/**
 * Trillium Salon - header.
 *
 * Rebuilds the two header rows of the old Gantry (g5_helium) layout
 * - #g-topbar and #g-navigation - on top of Cassiopeia's native markup:
 *
 *   header.container-header
 *     .container-topbar          -> address / phone / social / book online
 *     .logo-nav
 *       .grid-child > .navbar-brand   -> logo, lifted out of flow
 *       button.trillium-nav-toggle    -> burger, small screens only
 *       .grid-child.container-nav
 *         .trillium-nav.offcanvas-md  -> nav bar above 768px, drawer below
 *
 * On desktop the logo is absolutely positioned so it overhangs the hero,
 * exactly as #logoBlock did under Gantry. Below 768px the rows stack and
 * the menu moves into a full-screen drawer, replacing the old JL
 * menu-canvas particle with Joomla's bundled Bootstrap offcanvas.
 */

/* the brand palette lives in layout.css; these are header-only measurements */
:root {
    --trillium-header-inset: 4vw;
    --trillium-logo-width: 150px;
}
/* Animate dropdown */

@media (min-width: 768px) {
    /**
     * The panel stays in the box model so opacity can animate it, which leaves
     * it hit-testable while invisible - `visibility` takes it out of hit
     * testing, and transitioning it holds the panel visible for the length of
     * the fade out instead of cutting it on the first frame.
     */
    .container-header .mod-menu .parent>ul {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition:opacity 0.2s, visibility 0.2s;
    }
    .container-header .mod-menu .parent:hover > .mod-menu__sub, .container-header .mod-menu .parent:focus-within > .mod-menu__sub {
        display: block;
        opacity:1;
        visibility: visible;
    }
}
/* ------------------------------------------------------------ header shell */

.container-header {
    position: relative;
    color: var(--trillium-dark);
    background-color: #fff;
    background-image: none;
    box-shadow: none;
}

.container-header a:not(.btn),
.container-header .btn-link {
    color: var(--trillium-dark);
    text-decoration: none;
    transition: color .2s;
}

.container-header a:not(.btn):hover,
.container-header a:not(.btn):focus,
.container-header .btn-link:hover,
.container-header .btn-link:focus {
    color: var(--trillium-accent);
}

/* ------------------------------------------------------------- topbar row */

.container-topbar {
    display: flex;
    align-items: center;
    width: calc(100% - (var(--trillium-header-inset) * 2));
    min-height: 72px;
    margin-inline: auto;
    color: var(--trillium-dark);
    justify-content: center;
}

/**
 * The old layout put a 20%-wide spacer where the logo sits and capped the
 * content block beside it at 1040px. Without both, `space-between` below
 * spreads the three groups across the full container instead of 990px.
 */
/*.container-topbar::before {
    content: "";
    flex: 0 0 10%;
}*/

.container-topbar .mod-custom {
    flex: 0 1 80%;
    /* the old block measured 1040px across including its 10px side margins */
    max-width:1000px;
    margin-inline: 10px;
    padding-inline: 15px;
}

.topbarDeets {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    line-height: 2;
}

.topbarDeets .addressPhone {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-flow: row wrap;
}

.topbarDeets .topAddress {
    display: flex;
}

.topbarDeets .getAppointment {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.topbarDeets .getAppointment svg {
    animation: trillium-point 2s infinite;
}

@keyframes trillium-point {
    0%, 100% { transform: translateX(-2px); }
    50%      { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .topbarDeets .getAppointment svg {
        animation: none;
    }
}

/* -------------------------------------------------------------------- logo */

/* collapse the wrapper the brand leaves behind, without touching .container-nav */
.container-header .logo-nav > .grid-child:has(.navbar-brand) {
    padding: 0;
}

.container-header .navbar-brand {
    margin: 0;
    padding: 0;
    font-size: inherit;
}

.container-header .navbar-brand img {
    width: var(--trillium-logo-width);
    max-width: var(--trillium-logo-width);
    height: auto;
}

/* ------------------------------------------------------- menu, both modes */

.container-header .mod-menu > li {
    position: relative;
}

.container-header .mod-menu > li + li {
    margin-left: 0;
}

/* Cassiopeia's sliding underline is not part of this design */
.container-header .mod-menu > li::after {
    content: none;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--trillium-dark);
}

.container-header .mod-menu.mod-list > li.active > a,
.container-header .mod-menu.mod-list > li > a:hover,
.container-header .mod-menu.mod-list > li > a:focus {
    text-decoration: none;
}

.container-header .mod-menu.mod-list > li > a:hover,
.container-header .mod-menu.mod-list > li > a:focus {
    color: var(--trillium-accent);
}

.container-header .mod-menu .mod-menu__sub a,
.container-header .mod-menu .mod-menu__sub span {
    display: block;
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    text-transform: none;
    color: var(--trillium-dark);
}

.container-header .mod-menu .mod-menu__sub a:hover,
.container-header .mod-menu .mod-menu__sub a:focus {
    color: var(--trillium-accent);
    text-decoration: none;
}

/* The burger only exists below the offcanvas breakpoint. */
.trillium-nav-toggle {
    display: none;
}

/* ============================================================== >= 768px ==
   Desktop: logo overhangs, menu is a centred bar with hover dropdowns.
   ========================================================================= */

@media (min-width: 768px) {
    .container-header .navbar-brand {
        position: absolute;
        top: 10px;
        inset-inline-start: var(--trillium-header-inset);
        z-index: 999;
    }

    .container-header .container-nav {
        width: 100%;
        max-width: none;
        justify-content: center;
        padding: 10px var(--trillium-header-inset);
        background-color: #fff;
        border-top: 1px solid rgb(0 0 0 / 10%);
        box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
    }

    /**
     * Same offset as the topbar: a 20% spacer stands in for the logo, which is
     * lifted out of flow and would otherwise be centred over. Both rows share
     * the inset and the 1020px cap, so the menu lines up with the details above
     * it - see .container-topbar::before.
     */
   /* .container-header .container-nav::before {
        content: "";
        flex: 0 0 10%;
    }*/

    .container-header .container-nav .trillium-nav {
        flex: 0 1 80%;
        margin-inline: 10px;
        padding-inline: 15px;
    }

    /**
     * Bootstrap turns .offcanvas-body into a flex row above the breakpoint and
     * .mod-menu is `flex: 0 1 auto`, so without this the menu sits against the
     * left edge of the block rather than centred under the topbar content.
     */
    .container-header .container-nav .offcanvas-body {
        justify-content: center;
    }

    .container-header .container-nav nav,
    .container-header .container-nav .container-search {
        margin-top: 0;
    }

    .container-header .container-nav .mod-menu {
        flex: 0 1 auto;
        align-items: center;
        justify-content: center;
        gap: 4rem;
        color: var(--trillium-dark);

    }

    /**
     * Cassiopeia only lays the menu out as a row from 992px up, so between
     * 768px and 991px the items stack. This design goes horizontal at 768px,
     * so the row has to be re-declared here - see also .mod-menu__sub below.
     */
    .container-header .container-nav .mod-menu {
        display: flex;
        flex-direction: row;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        font-size: 1.5rem;
    }


    /* --------------------------------------------------------- dropdowns */

    .container-header .mod-menu .mod-menu__sub {
        min-width: 17rem;
        margin-top: 10px;
        padding: 0 1rem;
        background-color: #fff;
        border: 1px solid rgb(49 47 56 / 20%);
        border-radius: 0;
    }

    /**
     * The other half of Cassiopeia's 992px-only block: without this the panel
     * stays in flow below 992px and opens inside the bar instead of under it.
     * .mod-menu > li is already position: relative, so top: 100% hangs it off
     * the bottom of its parent item.
     */
    .container-header .mod-menu > li > .mod-menu__sub {
        position: absolute;
        top: 100%;
        z-index: 1001;
        margin-bottom: 0;
    }

    /* bridges the 10px gap so the pointer can travel into the dropdown */
    .container-header .mod-menu .mod-menu__sub::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
    }

    .container-header .mod-menu .mod-menu__sub a,
    .container-header .mod-menu .mod-menu__sub span {
        padding: .5rem 0;
        font-size: 1.1rem;
        border-bottom: 1px solid rgb(49 47 56 / 20%);
    }

    .container-header .mod-menu .mod-menu__sub > li:last-child a,
    .container-header .mod-menu .mod-menu__sub > li:last-child span {
        border-bottom: 0;
    }

    .container-header .mod-menu .parent:hover > .mod-menu__sub,
    .container-header .mod-menu .parent:focus-within > .mod-menu__sub {
        display: block;
    }

    /**
     * The old design showed no parent indicator and opened on hover. Keep the
     * toggle in the tab order for keyboard users, but out of sight until focused.
     */
    .container-header .mod-menu .mod-menu__toggle-sub {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        border: 0;
        clip-path: inset(50%);
    }

    .container-header .mod-menu .mod-menu__toggle-sub:focus-visible {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 0 .25rem;
        overflow: visible;
        clip-path: none;
        color: inherit;
        background: none;
    }

    /* Booking is a drawer-only entry - the topbar carries it up here. */
    .container-header .mod-menu > li:has(> .bookingLink) {
        display: none;
    }
}

/* ---------------------------------------------------- desktop breakpoints */

@media (max-width: 1160px) {
    .topbarDeets {
        justify-content: center;
        flex-flow: row wrap;
    }
}

@media (max-width: 1000px) {
    :root {
        --trillium-header-inset: 2vw;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        font-size: 1.2rem;
    }

    .container-header .container-nav .mod-menu {
        gap: 2rem;
    }
}

/* ============================================================== < 768px ==
   Small screens: logo + burger on one row, topbar details below, and the
   menu in a full-screen drawer.
   ======================================================================== */

@media (max-width: 767.98px) {
    .container-header {
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
    }
    .topbarDeets, .addressPhone {
        justify-content: center;
    }
    .logo-nav {
        order: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding-inline: var(--trillium-header-inset);
    }

    .container-topbar {
        order: 2;
        min-height: 0;
        padding-block: .75rem;
    }

    /* no logo beside it down here, so drop the spacer and the width cap */
    .container-topbar::before {
        display: none;
    }

    .container-topbar .mod-custom {
        flex: 1 1 auto;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
    }

    /**
     * Cassiopeia stretches every .grid-child to 100% and auto-centres it,
     * which would wrap the burger onto its own row and push the logo inwards.
     */
    .container-header .logo-nav > .grid-child:has(.navbar-brand) {
        width: auto;
        margin-inline: 0;
    }

    .container-header .navbar-brand {
        padding-block: .5rem;
    }

    /* the drawer is fixed, so this wrapper just needs to get out of the way */
    .container-header .container-nav {
        flex: 1 0 100%;
        padding: 0;
    }

    /* ------------------------------------------------------------ burger */

    .trillium-nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-height: 62px;
        padding: 0 .5rem;
        font-family: "Raleway", sans-serif;
        font-size: 1.2rem;
        color: var(--trillium-dark);
        background: none;
        border: 0;
        cursor: pointer;
    }

    .trillium-nav-toggle:hover,
    .trillium-nav-toggle:focus-visible {
        color: var(--trillium-accent);
    }

    /* ------------------------------------------------------------ drawer */

    .trillium-nav.offcanvas-md {
        --offcanvas-width: 100%;
        border: 5px solid var(--trillium-blue);
    }

    .trillium-nav .offcanvas-header {
        position: relative;
        display: block;
        padding: 1.5rem 1rem 0;
        text-align: center;
    }

    .trillium-nav__logo {
        display: block;
        max-width: 200px;
        margin: 0 auto 2rem;
    }

    .trillium-nav__logo img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }

    .trillium-nav .btn-close {
        position: absolute;
        top: 1rem;
        inset-inline-end: 1rem;
    }

    .trillium-nav .offcanvas-body {
        padding: 0 1.5rem 2rem;
    }

    /* ------------------------------------------------- menu as accordion */

    .container-header .container-nav .mod-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        display: inline-block;
        padding-block: .5rem;
        font-size: 1.5rem;
    }

    .container-header .mod-menu .mod-menu__sub {
        position: static;
        min-width: 0;
        margin: 0 0 .5rem;
        padding-inline-start: 1rem;
        background: none;
        border: 0;
    }

    .container-header .mod-menu .mod-menu__sub a,
    .container-header .mod-menu .mod-menu__sub span {
        padding-block: .35rem;
        font-size: 1.2rem;
    }

    /* here the chevron is the accordion control, so it stays visible */
    .container-header .mod-menu .mod-menu__toggle-sub {
        padding: .25rem .5rem;
        color: var(--trillium-dark);
        background: none;
        border: 0;
    }

    /* Booking was a button in the old drawer */
    .container-header .mod-menu > li > .bookingLink {
        margin-top: 20px;
        margin-bottom: 10px;
        padding: .25rem 10px;
        color: var(--trillium-dark);
        background: var(--trillium-accent);
        border: 2px solid var(--trillium-dark);
        text-transform: none;
        transition: background .3s;
    }

    .container-header .mod-menu > li > .bookingLink:hover,
    .container-header .mod-menu > li > .bookingLink:focus {
        color: var(--trillium-dark);
        background: #fff;
    }
}
@media (max-width: 915px) {
    .container-topbar .mod-custom {
        max-width: 500px;
    }
}
@media (max-width: 915px) {
    .container-topbar .mod-custom {
        max-width: 500px;
    }
}