/* ---------------------------------------------------------------------------
   Site header / primary navigation

   Layout follows the pattern used on graftonsafaris.com: wordmark on the left,
   horizontal uppercase links pushed to the right, and a single icon slot at the
   far right where that site puts its "Book now" button.

   Loaded after styles.min.css so the rules here win where they overlap.
   --------------------------------------------------------------------------- */

:root {
    --nav-bg: #05270C;
    --nav-fg: rgba(255, 255, 255, 0.86);
    --nav-fg-strong: #ffffff;
    --nav-accent: #c8a45c;
    --nav-rule: rgba(255, 255, 255, 0.14);
    --nav-height: 78px;
    --nav-height-sm: 62px;
}

.site-header {
    position: sticky;
    top: 0;
    /* Above .blog-sidebar (10001) and .overlay (100) from styles.min.css. A
       sticky element with a z-index forms a stacking context, so the hamburger
       inside it cannot out-stack the drawer on its own - the header itself has
       to sit on top, otherwise the drawer covers the button used to close it. */
    z-index: 10002;
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--nav-rule);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: var(--nav-height);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* -- Wordmark ------------------------------------------------------------- */

.site-brand {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.site-brand a {
    color: var(--nav-fg-strong);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.site-brand a:hover,
.site-brand a:focus {
    color: var(--nav-accent);
    text-decoration: none;
}

/* -- Link list ------------------------------------------------------------ */

.site-nav {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    margin: 0 0 0 auto; /* pushes the links to the right of the wordmark */
    padding: 0;
    list-style: none;
}

.site-nav > li {
    position: relative;
}

.site-nav a {
    position: relative;
    display: block;
    padding: 0.5rem 0;
    color: var(--nav-fg);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus {
    color: var(--nav-fg-strong);
    text-decoration: none;
}

/* Underline sweeps in from the left on hover and out to the right on exit. */
.site-nav > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--nav-accent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.28s ease;
}

.site-nav > li > a:hover::after,
.site-nav > li > a:focus::after,
.site-nav > li.is-current > a::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.site-nav > li.is-current > a {
    color: var(--nav-fg-strong);
}

/* -- Child pages ---------------------------------------------------------- */

.site-nav .has-children > a::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0.45em;
    vertical-align: 0.15em;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
}

.site-subnav {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 13rem;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: #ffffff;
    border-top: 2px solid var(--nav-accent);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.site-nav .has-children:hover .site-subnav,
.site-nav .has-children:focus-within .site-subnav {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.site-subnav a {
    padding: 0.55rem 1.25rem;
    color: #2b2b2b;
    letter-spacing: 0.1em;
}

.site-subnav a:hover,
.site-subnav a:focus {
    color: var(--nav-bg);
    background: #f4f1ea;
}

/* -- Icon slot ------------------------------------------------------------
   Holds Content/images/nav-icon.svg at 42px square, sized to sit level with the
   link row. The artwork is square, so both max constraints below resolve to the
   same 42px and nothing is letterboxed.
   ------------------------------------------------------------------------- */

.site-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin-left: 0.5rem;
    color: var(--nav-fg);
    text-decoration: none;
}

.site-header__icon img,
.site-header__icon svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* -- Hamburger ------------------------------------------------------------ */

/* styles.min.css scopes its toggle rules to .blog-header, which this markup no
   longer uses, so the equivalents are restated here. */
.site-header .blog-nav-toggle {
    display: none;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    outline: none !important;
    color: var(--nav-fg-strong);
    cursor: pointer;
}

/* Slimmer bars than the theme default. The box height and the +/-10px offsets
   the bars sit at are left alone, because the squeeze-to-X animation is written
   against those numbers. */
.site-header .hamburger-box {
    width: 28px;
}

.site-header .hamburger-inner,
.site-header .hamburger-inner::before,
.site-header .hamburger-inner::after {
    width: 28px;
    height: 3px;
}

/* -- Small screens -------------------------------------------------------- */

@media (max-width: 991.98px) {
    .site-header__inner {
        height: var(--nav-height-sm);
        gap: 1rem;
        padding: 0 1rem;
    }

    .site-brand {
        font-size: 1.1rem;
    }

    .site-brand a {
        letter-spacing: 0.1em;
    }

    /* The drawer in .blog-sidebar takes over as the menu at this width. */
    .site-nav {
        display: none;
    }

    /* With the link list hidden, the icon takes over the job of pushing the
       right-hand group away from the wordmark. */
    .site-header__icon {
        margin-left: auto;
    }

    .site-header .blog-nav-toggle {
        display: inline-flex;
        align-items: center;
        margin-left: 0.75rem;
    }
}