/* =========================================================================
   The site header.

   Loaded after style.css and responsive.css so the original stays untouched
   and this can be lifted out again by deleting one <link>. Nothing here
   changes the markup: the same logo, the same six links, the same quote
   button and the same toggle, dressed differently.

   The palette is the logo's own — the red of the swoosh and the navy of the
   wordmark — rather than the near-black the top bar had, which belonged to
   no part of the brand.
   ========================================================================= */

:root {
    --elite-red: #e80719;
    --elite-red-dark: #c00614;
    --elite-navy: #02135b;
    --elite-navy-soft: #1b2a6b;
    /* Greys pulled a little towards the navy, so they sit with it rather
       than beside it. */
    --elite-ink: #16203d;
    --elite-line: #e4e7f2;
}

/* -------------------------------------------------------------------------
   The strip above: email and phone.
   ------------------------------------------------------------------------- */

.top-header {
    background: #ffffff;
    /* Back in the flow. It was taken out of it while it was transparent, so
       the banner could run up behind it; a solid bar has nothing to gain from
       that and would just cover the top 40px of the picture for good. In the
       flow it takes its own 40px and the banner starts below it. */
    position: static;
    z-index: 901;
}

.top-header .border-left-solid-all {
    border: 0;
}

/* The bar spans the page, so its contents sit inside the same gutter as the
   logo and the menu below rather than hard against the window edge — and it
   is a row, so what is written takes the left and what can be pressed takes
   the right. */
.top-header > div > div {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.top-header .border-left-solid-all {
    flex: 1 1 auto;
    min-width: 0;
}

/* The strip's own dark block, which sat on top of the bar and made the
   colour above look like it only covered half the width. */
.top-header .socail-media ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 6px 22px;
    margin: 0;
    padding: 9px 0;
    background-color: transparent;
}

.top-header .socail-media ul li {
    /* Black on the white bar. It was white for the navy bar this replaced,
       then grey while the bar was transparent over the banner. */
    color: #000000;
    font-size: 13px;
    letter-spacing: .01em;
    line-height: 1.5;
}

.top-header .socail-media ul li i {
    color: var(--elite-red);
    margin-right: 7px;
    font-size: 15px;
    vertical-align: -1px;
}

/* The TikTok mark is an inline SVG, not an icon font, and it fills with
   currentColor — which on these links is white, so it was a white glyph on a
   white bar: measurable, positioned, and invisible. Coloured like the rest. */
.top-header .socail-media ul li.tiktok a svg {
    color: var(--elite-red);
    fill: currentColor;
}

/* The written details read first, so they take the left and the social
   circles are ordered past them to the right. Nothing is moved in the
   markup; only where each lands. */
.top-header .socail-media ul li.facebook,
.top-header .socail-media ul li.youtube,
.top-header .socail-media ul li.skype,
.top-header .socail-media ul li.whatsapp,
.top-header .socail-media ul li.instagram,
.top-header .socail-media ul li.tiktok {
    order: 2;
    margin: 0;
}

/* The first circle takes the gap, so the written details keep the left and
   the icons sit out at the right — and with no social accounts set, as here,
   the details simply stay left rather than drifting across. */
.top-header .socail-media ul li.instagram:first-of-type,
.top-header .socail-media ul li.tiktok:first-of-type,
.top-header .socail-media ul li.facebook:first-of-type,
.top-header .socail-media ul li.youtube:first-of-type,
.top-header .socail-media ul li.skype:first-of-type,
.top-header .socail-media ul li.whatsapp:first-of-type {
    margin-left: auto;
}

/* Outlined circles rather than each platform's own brand colour, which put
   four unrelated blues and reds in a bar meant to be one thing. */
.top-header .socail-media ul li.facebook a,
.top-header .socail-media ul li.youtube a,
.top-header .socail-media ul li.skype a,
.top-header .socail-media ul li.whatsapp a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    transition: background .2s ease, border-color .2s ease;
}

.top-header .socail-media ul li.facebook a:hover,
.top-header .socail-media ul li.youtube a:hover,
.top-header .socail-media ul li.skype a:hover,
.top-header .socail-media ul li.whatsapp a:hover {
    background: var(--elite-red);
    border-color: var(--elite-red);
}

.top-header .socail-media ul li a {
    color: rgba(255, 255, 255, .82);
    transition: color .2s ease;
}

.top-header .socail-media ul li a:hover {
    color: #fff;
}

/* -------------------------------------------------------------------------
   The header itself.
   ------------------------------------------------------------------------- */

.header-middle {
    /* Transparent, so the banner runs up behind it. */
    background: transparent;
    border-bottom: 0;
    /* Out of the flow and over the banner, which is what transparent asks
       for: sticky and transparent together would carry the menu down the
       page with nothing behind it, and the links would cross whatever they
       happened to be over. */
    position: absolute;
    /* header.js measures the bar and publishes it; 40px is the desktop value
       and the fallback for the moment before the script runs. */
    top: var(--top-bar-h, 40px);
    left: 0;
    right: 0;
    z-index: 900;
}

/* The header is placed against this. */
.wrapper {
    position: relative;
}

.header-middle:hover {
    box-shadow: none;
}

/* No gap under it, and the page's first section pulled up by the header's
   own height so the banner begins behind it rather than below it. */
.header-middle {
    margin-bottom: 0;
}



.mh-wrap {
    align-items: center;
}

.mh-wrap .logo img {
    transition: transform .3s ease;
}

.mh-wrap .logo a:hover img {
    transform: scale(1.03);
}

/* -------------------------------------------------------------------------
   The links.
   ------------------------------------------------------------------------- */

.header-middle .navbar-nav {
    align-items: center;
    gap: 4px;
}

.header-middle .navbar-nav .nav-link {
    position: relative;
    color: var(--elite-ink);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .035em;
    padding: 10px 16px;
    transition: color .2s ease;
}

/* The underline grows out of the middle rather than wiping across, which
   reads as the link answering rather than something sliding past it. */
.header-middle .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 2px;
    height: 2px;
    background: var(--elite-red);
    border-radius: 2px;
    transition: left .25s ease, right .25s ease;
}

/* The one !important here, and only because style.css already has one:
   .navbar-light .navbar-nav .nav-link:hover is declared !important at the
   same specificity, so nothing short of this reaches it from a later file. */
.header-middle .navbar-nav .nav-link:hover,
.header-middle .navbar-nav .nav-item.active > .nav-link {
    color: var(--elite-red) !important;
}

.header-middle .navbar-nav .nav-link:hover::after,
.header-middle .navbar-nav .nav-item.active > .nav-link::after {
    left: 16px;
    right: 16px;
}

/* Submenus, where a menu item has children. */
.header-middle .navbar-nav .dropdown-menu {
    border: 1px solid var(--elite-line);
    border-radius: 8px;
    box-shadow: 0 18px 40px -20px rgba(2, 19, 91, .35);
    padding: 6px;
    margin-top: 10px;
}

.header-middle .navbar-nav .dropdown-menu li a {
    display: block;
    padding: 9px 14px;
    border-radius: 6px;
    color: var(--elite-ink);
    font-size: 14px;
    font-weight: 500;
    transition: background .2s ease, color .2s ease;
}

.header-middle .navbar-nav .dropdown-menu li a:hover {
    background: #f4f6fc;
    color: var(--elite-red);
}

/* -------------------------------------------------------------------------
   Get a quote.

   The angled left edge is kept: it is the same cut as the swoosh in the
   logo, and it is the one piece of the old header that was clearly a
   decision rather than a default. Sharpened, and given somewhere to go on
   hover.
   ------------------------------------------------------------------------- */

/* The old header drew a 2px rule fading in from nothing across 85% of the
   navbar, leading the eye to the button. On screen it read as a stray pink
   line floating above the links; the button's own angle already does the
   leading. */
.navbar.navbar-expand-lg.navbar-light::after {
    display: none;
}

.ft-header-cta-btn {
    margin-left: 18px;
    /* The button and the flag sit on one line. The button keeps its own
       margin-right, which is what the round arrow rides in. */
    display: flex;
    align-items: center;
}

/* -------------------------------------------------------------------------
   The flag, flying.

   The wave is the GIF's own twelve frames, so there is nothing here to
   animate it — only to size it. Sized by height, because the frames are
   74x100 and the height is what has to line up with the button beside it.
   ------------------------------------------------------------------------- */
.np-flag {
    display: inline-block;
    flex: none;
    line-height: 0;
}

.np-flag img {
    display: block;
    /* As tall as the logo, which renders at 140x75. Height rather than width:
       the frames are 74x100, so matching the logo's width instead would make
       the flag 140x189 and push the whole bar open. */
    height: 75px;
    width: auto;
}

/* The angle was drawn twice over: a bordered triangle sitting outside the
   button, and the clip below. Two mechanisms for one edge, and the triangle's
   height was a fixed 58px that stopped matching the moment the padding
   changed. The clip is height-independent, so the triangle goes. */
.ft-header-cta-btn a::before {
    display: none;
}

.ft-header-cta-btn a {
    position: relative;
    background: var(--elite-red);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em;
    padding: 14px 30px;
    border-radius: 999px;
    /* Was an angled block; a pill now, with the arrow riding beside it. */
    clip-path: none;
    margin-right: 54px;
    transition: background .25s ease;
}

/* The arrow, set apart from the pill. A pseudo-element rather than a second
   link, so the markup is untouched — and clicks on it still land on the
   button, because a pseudo-element belongs to its parent for that. */
.ft-header-cta-btn a::after {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    position: absolute;
    right: -54px;
    top: 50%;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border-radius: 50%;
    background: var(--elite-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-45deg);
    transition: background .25s ease, transform .25s ease;
}

.ft-header-cta-btn a:hover,
.ft-header-cta-btn a:hover::after {
    background: var(--elite-red-dark);
    color: #fff;
}

.ft-header-cta-btn a:hover::after {
    transform: rotate(0deg);
}

/* -------------------------------------------------------------------------
   The toggle, on phones.

   Nine dots rather than three bars — unusual, and the only thing in the old
   header with any character, so it stays. Only tidied: even spacing, a
   proper target size, and the brand's two colours instead of one.
   ------------------------------------------------------------------------- */

/* Deliberately no display rule here. style.css hides it and responsive.css
   shows it below 991px; setting display: flex made it appear on desktop
   beside the full menu. Only what it looks like is decided here. */
.toggle-btn {
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s ease;
}

.toggle-btn:hover {
    background: #f4f6fc;
}

.toggle-btn .toggle-wrap {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}

.toggle-btn .toggle-wrap:last-child {
    margin-bottom: 0;
}

.toggle-btn .toggle-wrap span {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--elite-navy);
    transition: background .2s ease;
}

/* One diagonal in red, so the mark reads as the logo's colours rather than
   a grid of dots. */
.toggle-btn .toggle-wrap:nth-child(1) span:nth-child(1),
.toggle-btn .toggle-wrap:nth-child(2) span:nth-child(2),
.toggle-btn .toggle-wrap:nth-child(3) span:nth-child(3) {
    background: var(--elite-red);
}

.toggle-btn:hover .toggle-wrap span {
    background: var(--elite-red);
}

/* -------------------------------------------------------------------------
   Narrower screens.
   ------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .header-middle .navbar-nav .nav-link {
        padding: 10px 11px;
        font-size: 14px;
    }

    .ft-header-cta-btn a {
        padding: 15px 24px 15px 36px;
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .top-header .socail-media ul {
        justify-content: center;
        gap: 4px 16px;
        padding: 8px 0;
    }

    .top-header .socail-media ul li {
        font-size: 12px;
    }

    .mh-wrap .logo img {
        max-height: 58px;
        width: auto;
    }
}

/* -------------------------------------------------------------------------
   The inner pages.

   Both rows are out of the flow on every page, not just the home page, so
   the 115px they used to occupy is now the top of whatever follows. Inner
   pages open on a banner of their own, which is a ground for the menu to sit
   over — but its title was centred in the old height and came up behind the
   links. It gets that height back as room above.
   ------------------------------------------------------------------------- */

.banner {
    height: auto;
    min-height: 395px;
    padding-top: 130px;
}

/* -------------------------------------------------------------------------
   Pinned on the way back up.

   Transparent is right at the top of the page, where the banner is behind
   it. Past that the menu needs a ground of its own, so scrolling up pins it
   to the window on white. header.js does the deciding; these are the two
   states it names.
   ------------------------------------------------------------------------- */

.header-middle.is-stuck {
    position: fixed;
    top: 0;
    background: #fff;
    box-shadow: 0 10px 30px -18px rgba(2, 19, 91, .55);
    /* Slid down rather than snapped, so the change of ground is not a blink.
       Only on the way in: pinning happens once, at the banner's edge. */
    animation: header-drops-in .28s ease;
}

@keyframes header-drops-in {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Shorter once pinned — a menu you scrolled back for should give the page
   back as much room as it can. */
.header-middle.is-stuck .mh-wrap {
    padding-top: 6px;
    padding-bottom: 6px;
}

.header-middle.is-stuck .logo img {
    max-height: 52px;
}

/* -------------------------------------------------------------------------
   Pages with nothing behind the header.

   The home page has the banner and the inner pages have one of their own,
   but tracking, inquiry and the like open straight onto content — and the
   header is out of the flow on every page, so it came down over the first
   thing they show. They get that height back as room at the top.
   ------------------------------------------------------------------------- */

.wrapper:not(:has(.slider)):not(:has(.banner)) {
    padding-top: 115px;
}

/* -------------------------------------------------------------------------
   Opening hours and the address in the bar.

   Four items — two emails, the phone, the hours, the address — come to
   1,144px inside a 1,176px container that also carries the Inquiry pill.
   They wrapped to a second row and took the bar from 40px to 67, and the
   header below is placed at top: 40px, so the whole page slipped behind it.

   So: one row, never two, and the longest item goes first when there is no
   longer room for it.
   ------------------------------------------------------------------------- */

.top-header .socail-media ul {
    flex-wrap: nowrap;
    gap: 0 18px;
    font-size: 12.5px;
}

.top-header .socail-media ul li {
    font-size: 12.5px;
    white-space: nowrap;
}

.top-header .top-timing i,
.top-header .top-address i {
    color: var(--elite-red, #e80719);
    margin-right: 7px;
    font-size: 15px;
    vertical-align: -1px;
}

/* Below these the row no longer fits, and an address cut in half is worse
   than an address you read further down the page — which is where the
   strip under the banner still carries all three. */
@media (max-width: 1199px) {
    .top-header .top-address {
        display: none;
    }
}

@media (max-width: 991px) {
    .top-header .top-timing {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   The line under a section heading.

   Optional, and empty on every section until somebody types one in Settings.
   Kept narrow: a single sentence set across the full 1,176px of the container
   is a very long line to read under a centred title.
   ------------------------------------------------------------------------- */

.section-lede {
    max-width: 620px;
    margin: 14px auto 0;
    font-size: 16px;
    line-height: 1.65;
    color: #5b6478;
    text-align: center;
}

/* -------------------------------------------------------------------------
   The bar has nothing left to say on a phone.

   Below 768px the email and phone list is hidden by responsive.css, and the
   Inquiry pill was the only thing left in the strip. With that gone the bar
   collapsed to a 1px line, and header.js published that as --top-bar-h, so
   the header sat one pixel down. Taken out of the page entirely instead: the
   banner then starts at the very top, which is what an empty bar should do.
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .top-header {
        display: none;
    }
}


/* -------------------------------------------------------------------------
   Making the row fit.

   Instagram, WhatsApp and TikTok were added to the bar and it stopped fitting:
   1,380px of content in a 1,296px container, so the items ordered last —
   Facebook and WhatsApp — sat past the right edge, present in the page and
   invisible on it. They were not missing, they were off the end.

   The icons give back most of it, and the address, which is the longest item
   and the least urgent, steps aside sooner than it did.
   ------------------------------------------------------------------------- */

.top-header .socail-media ul li.facebook a,
.top-header .socail-media ul li.youtube a,
.top-header .socail-media ul li.skype a,
.top-header .socail-media ul li.whatsapp a,
.top-header .socail-media ul li.instagram a,
.top-header .socail-media ul li.tiktok a {
    width: 26px;
    height: 26px;
    font-size: 15px;
}

/* The address is the item that yields.

   The bar is capped at 1,320px whatever the screen, and the full contents come
   to about 1,330 — so something has to give at every width, and picking
   breakpoints for it is guesswork that the next settings change invalidates.
   The address takes whatever room is left and trims itself with an ellipsis,
   so the icons after it can never be pushed off the end again. It is written
   in full in the footer and on the contact page. */
.top-header .top-address {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Below this there is not enough room for it to say anything useful. */
@media (max-width: 1199px) {
    .top-header .top-address {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   The space between the logo and the first menu item.

   The logo row is justify-content: space-between with the nav shrink-wrapped
   to its contents, so every pixel not used by the two of them piles up in one
   place: 181px of empty cream between the logo and HOME, at 1600px wide.

   Halving it is not a matter of moving the nav left — that only moves the hole
   to the other end, behind the flag. The nav is given the whole row instead,
   with a stated indent on the left and the button pushed to the right by an
   auto margin, so both edges stay where they were and the space between the
   links is untouched. What changes is only where the run of links begins.

   Desktop only. Below 992px the navbar collapses and there is no row to share.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .header-middle .mh-wrap .header-col {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Each of these is shrink-to-fit by default, and one of them left short
       drops the button back into the middle of the row — the nav was the one
       that did it, and the flag came to rest 114px shy of the edge. */
    .header-middle .mh-wrap .h-wrap > .navbar,
    .header-middle .mh-wrap .navbar-collapse,
    .header-middle .mh-wrap .navbar-nav {
        width: 100%;
    }

    /* Half of the 169px the row had going spare, less the 12px the container
       already pads by. */
    .header-middle .mh-wrap .navbar-nav {
        padding-left: 73px;
    }

    /* Keeps the button and the flag against the right edge, where they were
       when the whole block was pushed there. */
    .header-middle .mh-wrap .ft-header-cta-btn {
        margin-left: auto;
    }
}