/* ==========================================================================
   HEADER

   The split header's markup lives in the parent theme
   (theratio/inc/frontend/header-split.php), but its styling is owned here.

   Two reasons it is not edited in the theme: a Theratio update replaces that
   folder wholesale, and the same rules previously lived in the Customizer's
   Additional CSS box, which loads after every enqueued stylesheet and so
   silently won every disagreement. One home for these rules, and this is it.
   ========================================================================== */

/* --- Layout ----------------------------------------------------------------
   Grid, not flex. Equal flex bases should centre the logo, but any padding
   surviving on one menu gets absorbed into that side and shifts the mark. A
   1fr auto 1fr grid pins the middle column to the true centre of the row
   whatever the two menus contain. */
.split-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: initial;
    gap: clamp(18px, 3vw, 44px);
    padding: 18px 0;
}

/*
 * min-width:0 is what keeps the two columns equal.
 *
 * A 1fr track is really minmax(auto, 1fr): it refuses to shrink below its own
 * content. The left menu carries more characters than the right, so without
 * this it claims more than its share and drags the logo off centre.
 */
.split-nav-left,
.split-nav-right {
    justify-self: stretch;
    min-width: 0;
}

/*
 * Each menu spans its own half rather than bunching against the logo.
 * Hugging the logo lines the inner edges up but leaves the outer ones ragged
 * by different amounts on each side, and the two stop reading as a pair.
 */
.split-nav > ul,
.split-nav ul#split-left-menu,
.split-nav ul#split-right-menu {
    width: 100%;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

.split-logo {
    display: flex;
    justify-content: center;
}

/* --- Type ------------------------------------------------------------------
   The theme set this at 10px with 2.5px of tracking — 0.25em, a lot of air for
   very small text. At 14px the same ratio would sprawl, so tracking comes down
   to roughly 0.12em and the words hold together. */
.split-nav > ul > li > a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.7px;
    padding: 10px 20px;
    line-height: 1.2;
}

/* The links at both ends drop their outward padding, so each menu starts at
   the container edge and finishes at the logo. */
.split-nav-left > ul > li:first-child > a,
.split-nav-right > ul > li:first-child > a {
    padding-left: 0;
}

.split-nav-left > ul > li:last-child > a,
.split-nav-right > ul > li:last-child > a {
    padding-right: 0;
}

/* --- Current page ----------------------------------------------------------
   A soft cream block behind the active item, as on the reference site, rather
   than an underline.

   The block is drawn by a pseudo-element with negative insets instead of by
   giving the link a background. A background would need padding to look like
   anything, and the first and last links in each menu have theirs removed so
   the menus meet the container edge cleanly — the active item would jump
   sideways depending on where it sat. This way the block is the same size
   wherever it lands, and the layout does not move at all.

   z-index:0 on the link makes a stacking context, so the -1 sits behind the
   text without dropping behind the header itself. */
.split-nav > ul > li.current-menu-item > a,
.split-nav > ul > li.current-menu-ancestor > a {
    position: relative;
    z-index: 0;
    color: #2c2520;
    outline: none;
}

.split-nav > ul > li.current-menu-item > a::after,
.split-nav > ul > li.current-menu-ancestor > a::after {
    content: "";
    position: absolute;
    inset: -5px -15px;
    z-index: -1;
    background: #f2ece2;
}

/* --- Logo ------------------------------------------------------------------ */
.split-logo img {
    height: 55px;
    width: auto;
    max-width: 130px;
}

.octf-main-header.is-stuck .split-logo img {
    height: 42px;
}

/* --- Dropdowns -------------------------------------------------------------
   Related to the top level rather than matching it: a submenu set at the same
   size as its parent reads as a second navigation instead of a child of one. */
.split-nav > ul > li > ul > li > a {
    font-size: 13px;
    letter-spacing: 1.2px;
    padding: 10px 24px;
}

.split-nav > ul > li > ul > li > a:hover {
    padding-left: 30px;
}

/* --- Sticky state ----------------------------------------------------------
   The theme's JS adds .is-stuck on scroll, and its own rules set the padding,
   so these need the extra weight to land. */
.octf-main-header.is-stuck .split-header-inner {
    padding: 11px 0 !important;
}

.octf-main-header.is-stuck .split-nav > ul > li > a {
    font-size: 13px;
}

/* --- Announcement bar ------------------------------------------------------ */
.ot-top-bar {
    padding: 14px 0;
}

.ot-top-bar .top-bar-text {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.6px;
}

/* --- Narrower desktops -----------------------------------------------------
   Only the padding tightens here. The rules these replace dropped the type to
   12px and then 11px, which is what made a 14px nav still look small on most
   laptops — 1400px is a common screen, not an edge case. */
@media (max-width: 1400px) {
    .split-nav > ul > li > a {
        font-size: 14px;
        letter-spacing: 1.5px;
        padding: 9px 12px;
    }
}

@media (max-width: 1200px) {
    .split-nav > ul > li > a {
        font-size: 13px;
        letter-spacing: 1.2px;
        padding: 8px;
    }

    .split-logo img {
        height: 48px;
    }
}

/* ==========================================================================
   MOBILE

   The theme puts .site-header at position:absolute so it floats over the page,
   switching to static only where a page is flagged non-transparent. The
   homepage is flagged; the others are not, which is why the menu sat on top of
   their content while the homepage behaved.

   Static below the mobile breakpoint makes every page behave like the
   homepage. Stickiness is unaffected — that comes from the theme's own
   .is-stuck class, which is position:fixed and works either way.
   ========================================================================== */

@media (max-width: 991px) {
    .site-header,
    .site-header.header-transparent {
        position: static;
    }

    .header_mobile {
        position: relative;
        z-index: 999;
    }
}

/* ==========================================================================
   MOBILE HEADER COLOUR

   The theme's mobile header is built for a dark design: it paints itself
   #1a1a1a the moment it becomes sticky or the menu opens, sets the menu links
   white, and draws the hamburger in white on a white bar. That is the black
   band appearing on scroll.

   The theme's own mobile breakpoint is 1024px, so these match it rather than
   the 991px used above — otherwise the tablet range keeps the dark treatment.
   ========================================================================== */

@media only screen and (max-width: 1024px) {
    .header_mobile {
        background: #ffffff;
        border-bottom: 1px solid #f0ebe3;
    }

    /*
     * The theme turns the mobile header black in THREE places, and they are
     * different selectors on different elements:
     *
     *   .header_mobile.open / .is-stuck   the theme's own mobile template
     *   .header-mobile .is-stuck          an Elementor mobile header, where
     *                                     the stuck element is a descendant
     *
     * Underscore and hyphen are two separate wrappers, not a typo: the theme
     * uses the first when no mobile header is selected and the second when an
     * Elementor one is. Whichever is in play, it should be white.
     */
    .header-mobile .is-stuck {
        background-color: #ffffff;
        box-shadow: 0 2px 18px rgba(44, 37, 32, 0.08);
    }

    .header_mobile.open,
    .header_mobile.is-stuck {
        background: #ffffff;
        /* Lighter than the theme's 30% black, which reads as a drop shadow
           from a different site. */
        box-shadow: 0 2px 18px rgba(44, 37, 32, 0.08);
    }

    /* --- Open menu --- */
    .header_mobile .mobile_nav .mobile_mainmenu li a {
        color: #2c2520;
        border-bottom: 1px solid #f0ebe3;
        font-family: 'Raleway', Helvetica, Arial, sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 1.6px;
        text-transform: uppercase;
    }

    .header_mobile .mobile_nav .mobile_mainmenu li a:hover,
    .header_mobile .mobile_nav .mobile_mainmenu li.current-menu-item > a {
        color: #6b6256;
    }

    .header_mobile .mobile_nav .mobile_mainmenu > li.menu-item-has-children .arrow i {
        color: #6b6256;
    }

    /* --- Hamburger ---
       White bars on a white bar are invisible until the header turns black,
       which is presumably why nobody noticed. */
    #mmenu_toggle button,
    #mmenu_toggle button:before,
    #mmenu_toggle button:after {
        background: #6b6256;
    }

    /* The middle bar is hidden while open, so only the crossed pair shows. */
    #mmenu_toggle.active button {
        background: none;
    }
}