/**
 * layout.css
 * Header, footer, and structural layout only.
 * No component styles here.
 */


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

.site-header {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    z-index:          100;
    height:           var(--header-height);
    background-color: var(--header-bg);
    border-bottom:    1px solid var(--header-border);
    transition:       var(--header-transition);
}

.site-header--scrolled {
    box-shadow: var(--header-shadow);
}

.site-header--hidden {
    transform: translateY( -100% );
}

.site-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
    max-width:       var(--container-max);
    margin-inline:   auto;
    padding-inline:  var(--container-padding);
}

.site-header__brand a,
.site-header__site-name {
    display: block;
}

.site-header__brand img {
    height:    40px;
    width:     auto;
    max-width: 180px;
}


/* ============================================================
   PRIMARY NAV
============================================================ */

.primary-nav__menu {
    display:     flex;
    align-items: center;
    gap:         var(--primitive-space-2);
}

.primary-nav__menu a {
    display:     block;
    padding:     var(--nav-link-padding);
    color:       var(--nav-link-color);
    font-size:   var(--text-small);
    font-weight: 500;
    transition:  color var(--transition-fast);
}

.primary-nav__menu a:hover,
.primary-nav__menu .current-menu-item > a {
    color: var(--nav-link-hover);
}

/* Hamburger button - hidden on desktop */
.primary-nav__toggle {
    display:        none;
    flex-direction: column;
    gap:            5px;
    padding:        var(--primitive-space-2);
    color:          var(--nav-toggle-color);
}

.primary-nav__toggle-bar {
    display:          block;
    width:            24px;
    height:           2px;
    background-color: currentColor;
    transition:       opacity var(--transition-fast);
}


/* ── Submenu toggle — full row, chevron at far right ── */

/* Parent items with children: need position:relative for the button overlay */
.menu-item-has-children {
    position: relative;
}

/* Extra right padding keeps the link text clear of the chevron.
   The button overlay handles all click interaction; the <a> is visual only. */
.menu-item-has-children > a {
    padding-right: var(--primitive-space-10); /* 2.5rem — text + gap + chevron room */
}

/* The button expands to fill the entire <li> row. The chevron sits at the right. */
.submenu-toggle {
    position:        absolute;
    inset:           0;
    width:           auto;
    height:          auto;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    padding-inline:  var(--primitive-space-4);
    background:      none;
    border:          none;
    color:           var(--nav-link-color);
    cursor:          pointer;
    border-radius:   0;
    transition:      color var(--transition-fast),
                     background-color var(--transition-fast);
}

/* Hovering the button (which covers the full row) also lights up the link text */
.menu-item-has-children:hover > a {
    color: var(--nav-link-hover);
}

.submenu-toggle:hover,
.submenu-toggle:focus-visible {
    color:            var(--nav-link-hover);
    background-color: rgba( 255, 255, 255, 0.05 );
}

/* Chevron icon — CSS border trick, no SVG needed */
.submenu-toggle__icon {
    display:        block;
    width:          8px;
    height:         8px;
    border-right:   2px solid currentColor;
    border-bottom:  2px solid currentColor;
    transform:      rotate( 45deg ) translateY( -2px );
    transition:     transform var(--transition-fast);
    flex-shrink:    0;
}

.submenu-open > .submenu-toggle .submenu-toggle__icon {
    transform: rotate( 225deg ) translateY( -2px );
}


/* ── Submenus (desktop) ── */

.menu-item-has-children {
    position: relative;
}

.sub-menu {
    position:         absolute;
    top:              100%;
    left:             0;
    min-width:        200px;
    background-color: var(--color-surface-dark);
    border-top:       2px solid var(--color-brand);
    box-shadow:       var(--header-shadow);
    border-radius:    0 0 var(--radius-sm) var(--radius-sm);
    z-index:          200;
    /* hidden attribute controls visibility - not display:none */
    /* This allows CSS transitions while respecting the hidden attribute */
}

/* When hidden attribute is present: invisible but maintain display for transition */
.sub-menu[hidden] {
    display: none;
}

.sub-menu li {
    display: block;
}

.sub-menu a {
    display:     block;
    padding:     var(--primitive-space-3) var(--primitive-space-5);
    color:       var(--nav-link-color);
    font-size:   var(--text-small);
    white-space: nowrap;
    transition:  color var(--transition-fast),
                 background-color var(--transition-fast);
}

.sub-menu a:hover,
.sub-menu a:focus-visible {
    color:            var(--nav-link-hover);
    background-color: rgba( 255, 255, 255, 0.06 );
}


/* ── Intermediate: nav padding compression ─────────────────────────
   CSS media queries cannot use custom properties, so this breakpoint
   is hardcoded. If you change --nav-collapse in client-vars.css,
   ALSO update this value to (your-nav-collapse + 200px).
   Default: 900px collapse -> 1100px compression start.
──────────────────────────────────────────────────────────────── */
/* NAV-COMPRESS-BREAKPOINT: default --nav-collapse (900px) + 200px */
@media ( max-width: 1100px ) {
    .primary-nav__menu a {
        padding-inline: var(--primitive-space-2);
    }
}

/* ── Collapse to hamburger ──────────────────────────────────────
   CSS cannot use custom properties in media queries.
   If you change --nav-collapse token, change this value to match.
   Example: --nav-collapse: 1024px -> change 900px to 1024px here.
──────────────────────────────────────────────────────────────── */
/* NAV-COLLAPSE-BREAKPOINT: matches --nav-collapse token (default 900px) */
@media ( max-width: 900px ) {

    .primary-nav__toggle {
        display: flex;
    }

    .primary-nav__menu {
        display:          none;
        position:         absolute;
        top:              var(--header-height);
        left:             0;
        right:            0;
        flex-direction:   column;
        align-items:      flex-start;
        gap:              0;
        background-color: var(--header-bg);
        padding:          0;
        box-shadow:       var(--header-shadow);
        border-top:       1px solid rgba( 255, 255, 255, 0.08 );
    }

    .primary-nav__menu--open {
        display: flex;
    }

    /* Each nav item is a full-width row with a separator */
    .primary-nav__menu > li {
        width:         100%;
        border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
    }

    /* Nav links become flex rows so the chevron can sit at the far right */
    .primary-nav__menu > li > a {
        display:     flex;
        align-items: center;
        width:       100%;
        padding:     var(--primitive-space-4) var(--container-padding);
        font-size:   var(--text-body);
        transition:  background-color var(--transition-fast),
                     color var(--transition-fast);
    }

    .primary-nav__menu > li > a:hover,
    .primary-nav__menu > li > a:focus-visible {
        background-color: rgba( 255, 255, 255, 0.04 );
        color:            var(--nav-link-hover);
    }

    /* Active/current page: brand left accent */
    .primary-nav__menu > .current-menu-item > a,
    .primary-nav__menu > .current-menu-ancestor > a {
        color:        var(--nav-link-hover);
        border-left:  3px solid var(--color-brand);
        padding-left: calc( var(--container-padding) - 3px );
    }

    /* Right-pointing chevron on leaf items (no submenu children).
       Items with children use .submenu-toggle for their chevron instead. */
    .primary-nav__menu > li:not(.menu-item-has-children) > a::after {
        content:      '';
        display:      block;
        width:        7px;
        height:       7px;
        border-right: 2px solid currentColor;
        border-top:   2px solid currentColor;
        transform:    rotate( 45deg );
        margin-left:  auto;
        flex-shrink:  0;
        opacity:      0.45;
        transition:   opacity var(--transition-fast);
    }

    .primary-nav__menu > li:not(.menu-item-has-children) > a:hover::after,
    .primary-nav__menu > li:not(.menu-item-has-children) > a:focus-visible::after {
        opacity: 1;
    }

    /* Submenus on mobile: full width, left border accent */
    .sub-menu {
        position:      static;
        width:         100%;
        border-top:    none;
        border-left:   3px solid var(--color-brand);
        box-shadow:    none;
        border-radius: 0;
        margin-left:   var(--container-padding);
    }

    .sub-menu a {
        padding-left: var(--primitive-space-6);
        white-space:  normal;
    }

    /* Full-row button padding matches the mobile link padding */
    .submenu-toggle {
        padding-inline: var(--container-padding);
    }

    .menu-item-has-children {
        width: 100%;
    }

    /* Extra right padding: container-padding + chevron clearance */
    .menu-item-has-children > a {
        padding-right: calc( var(--container-padding) + var(--primitive-space-8) );
    }

}


/* ============================================================
   MAIN CONTENT AREA
============================================================ */

.site-main {
    min-height: 60vh;
}

.site-main--single .container,
.site-main--archive .container,
.site-main--search .container {
    padding-top:    var(--space-xl);
    padding-bottom: var(--space-xl);
}


/* ============================================================
   SITE FOOTER
============================================================ */

.site-footer {
    background-color: var(--footer-bg);
    color:            var(--footer-text);
}


/* ── Four-column upper section ──────────────────────────────── */

.site-footer__columns {
    padding-bottom: var(--space-xl);
}

.site-footer__columns-inner {
    display:               grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    column-gap:            var(--space-lg);
    row-gap:               var(--space-xl);
    max-width:             var(--container-max);
    margin-inline:         auto;
    padding-inline:        var(--container-padding);
    align-items:           start;
}

.site-footer__col-heading {
    font-size:      var(--text-h6);
    font-weight:    700;
    color:          var(--footer-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  var(--space-md);
}


/* ── Column 1: Brand ────────────────────────────────────────── */

.site-footer__col--brand {
    padding-right: var(--space-xl);
    border-right:  1px solid var(--footer-border);
}

.site-footer__logo {
    margin-bottom: 0;
}

.site-footer__logo img {
    height:    40px;
    width:     auto;
    max-width: 160px;
}

/* Brand accent line — anchors the logo/name visually */
.site-footer__logo::after,
.site-footer__site-name::after {
    content:          '';
    display:          block;
    width:            32px;
    height:           2px;
    background-color: var(--color-brand);
    margin-block:     var(--space-sm) var(--space-md);
}

.site-footer__site-name {
    font-family:   var(--font-heading);
    font-size:     var(--text-h4);
    font-weight:   700;
    color:         var(--footer-heading);
    margin-bottom: 0;
}

.site-footer__tagline {
    font-size:     var(--text-small);
    color:         var(--footer-text);
    line-height:   var(--leading-snug);
    margin-bottom: 0;
}

.site-footer__social {
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--primitive-space-3);
    margin-top: var(--space-md);
}

.site-footer__social-link {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            38px;
    height:           38px;
    color:            var(--footer-text);
    border:           1px solid var(--footer-border);
    border-radius:    var(--radius-full);
    transition:       color var(--transition-fast),
                      border-color var(--transition-fast),
                      background-color var(--transition-fast);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
    color:            var(--footer-heading);
    border-color:     var(--color-brand);
    background-color: rgba( 255, 255, 255, 0.06 );
}

.site-footer__social-link svg {
    width:  18px;
    height: 18px;
}


/* ── Column 2: Contact ──────────────────────────────────────── */

.site-footer__contact-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-sm);
}

.site-footer__contact-list li {
    display:     flex;
    align-items: flex-start;
    gap:         var(--primitive-space-3);
    font-size:   var(--text-small);
    line-height: var(--leading-snug);
    color:       var(--footer-text);
}

.site-footer__contact-list a {
    color:      var(--footer-link);
    transition: color var(--transition-fast);
}

.site-footer__contact-list a:hover {
    color: var(--footer-link-hover);
}

.site-footer__contact-icon {
    flex-shrink: 0;
    width:       16px;
    height:      16px;
    margin-top:  2px; /* optical alignment with text cap height */
}


/* ── Column 3: Opening Hours ────────────────────────────────── */

.site-footer__hours {
    display:               grid;
    grid-template-columns: auto 1fr;
    column-gap:            var(--space-md);
    row-gap:               var(--primitive-space-3);
    font-size:             var(--text-small);
}

.site-footer__hours dt {
    color:       var(--footer-heading);
    font-weight: 500;
    white-space: nowrap;
}

.site-footer__hours dd {
    color: var(--footer-text);
}


/* ── Column 4: Quick Links ──────────────────────────────────── */

.site-footer__quick-links {
    display:        flex;
    flex-direction: column;
    gap:            var(--primitive-space-3);
}

/* Handles both hardcoded list items and wp_nav_menu output */
.site-footer__quick-links li a,
.site-footer__quick-links a {
    font-size:  var(--text-small);
    color:      var(--footer-link);
    transition: color var(--transition-fast);
}

/* 2-column layout instead of the default single column, for a shorter
   list that reads better as a block than a long vertical strip.
   Columns hug their own content rather than splitting the full width
   evenly, so short labels don't end up spread far apart. */
.site-footer__quick-links--grid {
    display:               grid;
    grid-template-columns: repeat( 2, max-content );
    gap:                   var(--space-sm) var(--space-xl);
}

.site-footer__quick-links li a:hover,
.site-footer__quick-links a:hover {
    color: var(--footer-link-hover);
}


/* ── Bottom bar ─────────────────────────────────────────────── */

.site-footer__bottom {
    padding: var(--space-md) 0;
}

.site-footer__bottom-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-sm);
    max-width:       var(--container-max);
    margin-inline:   auto;
    border-top:      1px solid var(--footer-border);
    padding-top:     var(--space-md);
    padding-inline:  var(--container-padding);
}

.site-footer__copyright {
    font-size:     var(--text-small);
    color:         var(--footer-text);
    margin-bottom: 0;
}

.site-footer__legal ul {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--primitive-space-1) var(--primitive-space-6);
}

.site-footer__legal a {
    font-size:  var(--text-small);
    color:      var(--footer-link);
    transition: color var(--transition-fast);
}

.site-footer__legal a:hover {
    color: var(--footer-link-hover);
}


/* ── Footer responsive ──────────────────────────────────────── */

@media ( max-width: 960px ) {
    .site-footer__columns-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media ( max-width: 600px ) {
    .site-footer__columns-inner {
        grid-template-columns: 1fr;
    }

    .site-footer__col--brand {
        border-right:  none;
        padding-right: 0;
        border-bottom: 1px solid var(--footer-border);
        padding-bottom: var(--space-xl);
    }

    .site-footer__bottom-inner {
        flex-direction: column;
        align-items:    flex-start;
    }
}


/* ============================================================
   ARCHIVE / BLOG GRID
============================================================ */

.archive-header {
    margin-bottom: var(--space-lg);
}

.archive-header__title {
    margin-bottom: var(--space-xs);
}

.post-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
    gap:                   var(--space-lg);
    margin-bottom:         var(--space-xl);
    list-style:            none;
    padding:               0;
}

.post-grid__item {
    display: block;
    margin:  0;
    padding: 0;
}

/* Pagination */
.nav-links {
    display:         flex;
    justify-content: center;
    gap:             var(--space-sm);
    flex-wrap:       wrap;
}

.page-numbers {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    min-width:        40px;
    height:           40px;
    padding-inline:   var(--primitive-space-3);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-sm);
    color:            var(--color-text);
    font-size:        var(--text-small);
    transition:       all var(--transition-fast);
}

a.page-numbers:hover,
.page-numbers.current {
    background-color: var(--color-brand);
    border-color:     var(--color-brand);
    color:            var(--color-text-inverse);
}


/* ============================================================
   FULL WIDTH TEMPLATE
============================================================ */

.site-main--full-width {
    width: 100%;
}

.site-main--full-width .container {
    max-width: 100%;
    padding-inline: 0;
}


/* ============================================================
   LANDING PAGE TEMPLATE
   No header padding needed - header is not rendered.
============================================================ */

.landing-page {
    padding-top: 0;
}

.site-main--landing {
    min-height: 100vh;
}