/* =============================================================================
   AYAL TOURS AND TRAVEL — HEADER, NAV & MEGA MENU
   Built by Vanquish Brand Design | vanquish.co.ke
   ============================================================================= */


/* =============================================================================
   1. SKIP LINK
   ============================================================================= */

.ayal-skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-16);
    z-index: var(--z-toast);
    background: #283618;
    color: #F5F2EB;
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top var(--duration-fast) var(--ease);
}

.ayal-skip-link:focus { top: 0; }


/* =============================================================================
   2. HEADER STICKY WRAPPER + BASE
   The wrapper (nav row + its three mega panels) sticks to the top of the
   viewport from the very top of the page — there's no utility bar above it
   any more, so the nav row IS the top of the page. The header itself is
   always solid — it sits above every hero image, never overlays one.
   ============================================================================= */

.ayal-header-sticky {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.ayal-header {
    position: relative; /* positioning context for the mega panels below */
    background-color: var(--ayal-ivory);
    border-bottom: 1px solid var(--ayal-ivory-3);
    transition: box-shadow var(--duration-base) var(--ease);
}

.ayal-header-sticky.is-stuck .ayal-header {
    box-shadow: 0 4px 24px rgba(20, 21, 15, 0.08);
}

.ayal-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 22px clamp(20px, 4vw, 56px);
    gap: var(--space-24);
}


/* =============================================================================
   3. LOGO — centered column
   ============================================================================= */

.ayal-header__logo { justify-self: center; z-index: 1; }

.ayal-header__logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.ayal-header__logo .custom-logo {
    height: 44px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.ayal-header__logo-text {
    display: block;
    text-align: center;
    line-height: 1;
}

.ayal-header__logo-main {
    display: block;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    color: var(--ayal-charcoal);
}

.ayal-header__logo-sub {
    display: block;
    margin-top: 5px;
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--ayal-charcoal-3);
}


/* =============================================================================
   4. DESKTOP NAV LINKS — left column, burger lives here too (mobile only)
   ============================================================================= */

.ayal-nav {
    display: flex;
    align-items: center;
    justify-self: start;
}

.ayal-nav__menu {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Shared link/button style */
.ayal-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    padding: 4px 0;
    color: var(--ayal-charcoal-2);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-base) var(--ease);
    position: relative;
}

.ayal-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--ayal-green);
    transition: right var(--duration-base) var(--ease);
}

.ayal-nav__link:hover,
.ayal-nav__link[aria-expanded="true"],
.ayal-nav__link.is-active {
    color: var(--ayal-charcoal);
}

.ayal-nav__link:hover::after,
.ayal-nav__link[aria-expanded="true"]::after,
.ayal-nav__link.is-active::after {
    right: 0;
}

/* Chevron */
.ayal-nav__chevron {
    width: 10px;
    height: 10px;
    transition: transform var(--duration-base) var(--ease);
    flex-shrink: 0;
    opacity: 0.65;
}

.ayal-nav__link[aria-expanded="true"] .ayal-nav__chevron {
    transform: rotate(180deg);
    opacity: 1;
}


/* =============================================================================
   5. HEADER ACTIONS — search + CTA, right column
   ============================================================================= */

.ayal-header__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 22px;
    justify-self: end;
}

.ayal-header__search {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ayal-charcoal-2);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease);
    white-space: nowrap;
}

.ayal-header__search:hover { color: var(--ayal-charcoal); }

/* CTA button — rounded, as this header's always been */
.ayal-header__actions .ayal-btn--primary {
    border-radius: 8px;
}


/* =============================================================================
   6. MEGA MENU PANELS
   ============================================================================= */

/* Positioned absolute against .ayal-header-sticky (the nearest positioned
   ancestor — see .ayal-header-sticky above), sitting flush under the nav
   row at top:100% regardless of whether the wrapper is stuck to the top
   of the viewport yet or still in normal flow near the top of the page.
   No fixed pixel offset to keep in sync with the header's own height. */
.ayal-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: calc(var(--z-sticky) - 1);
    background: #FFFFFF;
    border-top: 1px solid #D9D6CB;
    box-shadow: 0 8px 40px rgba(31, 31, 31, 0.10);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
        opacity    var(--duration-base) var(--ease),
        transform  var(--duration-base) var(--ease),
        visibility var(--duration-base) var(--ease);
}

.ayal-mega.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.ayal-mega__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-40) clamp(20px, 4vw, 56px);
}

/* Eyebrow */
.ayal-mega__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: #283618;
    margin-bottom: var(--space-24);
}

/* Image card grid — destinations */
.ayal-mega__img-grid {
    display: grid;
    gap: var(--space-20);
    margin-bottom: var(--space-28);
}

.ayal-mega__img-grid--2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
    flex: 0 0 720px;
}

/* Destinations mega layout — image grid + Featured Safaris column side by side */
.ayal-mega__dest-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-56);
    margin-bottom: var(--space-28);
}

.ayal-mega__dest-layout .ayal-mega__img-grid {
    margin-bottom: 0;
}

.ayal-mega__dest-featured {
    flex: 1 1 260px;
    max-width: 320px;
    padding-left: var(--space-40);
    border-left: 1px solid #D9D6CB;
}

.ayal-mega__card {
    position: relative;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.ayal-mega__card:hover .ayal-mega__card-bg {
    transform: scale(1.04);
}

.ayal-mega__card:hover .ayal-mega__card-title {
    color: #C7B78C;
}

.ayal-mega__card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform var(--duration-slow) var(--ease);
}

.ayal-mega__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10,14,8,0.10) 0%,
        rgba(10,14,8,0.72) 100%
    );
}

.ayal-mega__card-body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--space-20) var(--space-24);
    z-index: 2;
}

.ayal-mega__card-title {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: var(--weight-light);
    color: #FFFFFF;
    letter-spacing: var(--tracking-tight);
    margin-bottom: 4px;
    transition: color var(--duration-base) var(--ease);
}

.ayal-mega__card-sub {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: rgba(247, 245, 239, 0.70);
    letter-spacing: var(--tracking-wide);
}

/* Text columns — safaris */
.ayal-mega__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-40);
    margin-bottom: var(--space-28);
    padding-bottom: var(--space-28);
    border-bottom: 1px solid #D9D6CB;
}

/* Safaris mega menu: By Type / Kenya / Tanzania / Primate Adventures */
.ayal-mega__cols--4 {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-32);
}

.ayal-mega__col-head {
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: #A8A99A;
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid #E7E3D6;
}

.ayal-mega__col-link {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    color: #52544A;
    text-decoration: none;
    padding: 6px 0;
    transition: color var(--duration-base) var(--ease),
                padding-left var(--duration-base) var(--ease);
}

.ayal-mega__col-link:hover {
    color: #283618;
    padding-left: var(--space-4);
}

.ayal-mega__col-more {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: #283618;
    text-decoration: none;
    margin-top: var(--space-16);
    transition: opacity var(--duration-base) var(--ease);
}

.ayal-mega__col-more:hover { opacity: 0.70; }

/* Mega footer bar */
.ayal-mega__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    padding-top: var(--space-20);
    border-top: 1px solid #D9D6CB;
}

.ayal-mega__foot-link {
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: #283618;
    text-decoration: none;
    transition: opacity var(--duration-base) var(--ease);
}

.ayal-mega__foot-link:hover { opacity: 0.70; }

.ayal-mega__foot-note {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: #A8A99A;
    font-style: italic;
}

/* Mega backdrop */
.ayal-mega-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sticky) - 2);
    background: rgba(10, 14, 8, 0.30);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity    var(--duration-base) var(--ease),
        visibility var(--duration-base) var(--ease);
}

.ayal-mega-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =============================================================================
   7b. COMPACT MEGA — ABOUT
   A lighter-weight mega panel for a short link list (no images/columns).
   Reuses .ayal-mega / .ayal-mega__inner / .ayal-mega__eyebrow as-is; only
   narrows the content column and adds the simple two-line link style.
   ============================================================================= */

.ayal-mega--compact .ayal-mega__inner {
    max-width: 360px;
    margin: 0 auto;
    padding: var(--space-32) clamp(20px, 4vw, 56px);
}

.ayal-mega__simple-list {
    display: flex;
    flex-direction: column;
}

.ayal-mega__simple-link {
    display: block;
    padding: var(--space-12) 0;
    text-decoration: none;
    border-bottom: 1px solid #E7E3D6;
    transition: padding-left var(--duration-base) var(--ease);
}

.ayal-mega__simple-link:last-child {
    border-bottom: none;
}

.ayal-mega__simple-link:hover {
    padding-left: var(--space-4);
}

.ayal-mega__simple-link-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: var(--weight-regular, 400);
    color: #14150F;
    letter-spacing: var(--tracking-tight);
    margin-bottom: 2px;
    transition: color var(--duration-base) var(--ease);
}

.ayal-mega__simple-link:hover .ayal-mega__simple-link-title {
    color: #283618;
}

.ayal-mega__simple-link-sub {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: #8B8C7E;
}


/* =============================================================================
   7. MOBILE NAV
   ============================================================================= */

.ayal-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-left: -8px; /* optically align the bars with the nav's own left edge */
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
}

.ayal-header__burger-bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background-color: var(--ayal-charcoal);
    border-radius: 2px;
    transition: transform var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
}

.ayal-header__burger[aria-expanded="true"] .ayal-header__burger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ayal-header__burger[aria-expanded="true"] .ayal-header__burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ayal-header__burger[aria-expanded="true"] .ayal-header__burger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav overlay */
.ayal-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: #14150F;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--duration-slow) var(--ease);
}

.ayal-mobile-nav:not([hidden]) {
    transform: translateX(0);
}

.ayal-mobile-nav[hidden] {
    display: flex !important; /* keep in DOM for animation */
    transform: translateX(100%);
}

.ayal-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-20) var(--space-24);
    border-bottom: 1px solid rgba(247, 245, 239, 0.08);
    flex-shrink: 0;
}

.ayal-mobile-nav__logo .custom-logo {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.90;
}

.ayal-mobile-nav__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(247, 245, 239, 0.08);
    border: 1px solid rgba(247, 245, 239, 0.12);
    border-radius: 4px;
    color: rgba(247, 245, 239, 0.70);
    cursor: pointer;
    transition: background var(--duration-base) var(--ease);
}

.ayal-mobile-nav__close:hover {
    background: rgba(247, 245, 239, 0.14);
    color: #FFFFFF;
}

.ayal-mobile-nav__menu {
    flex: 1;
    padding: var(--space-24) var(--space-24);
    display: flex;
    flex-direction: column;
}

.ayal-mobile-nav__link {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(22px, 4vw, 28px);
    font-weight: var(--weight-light);
    color: rgba(247, 245, 239, 0.82);
    text-decoration: none;
    padding: var(--space-16) 0;
    border-bottom: 1px solid rgba(247, 245, 239, 0.08);
    transition: color var(--duration-base) var(--ease);
}

.ayal-mobile-nav__link:hover { color: #FFFFFF; }

/* Mobile accordion groups */
.ayal-mobile-nav__group {
    border-bottom: 1px solid rgba(247, 245, 239, 0.08);
}

.ayal-mobile-nav__group-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-16) 0;
    font-family: var(--font-heading);
    font-size: clamp(22px, 4vw, 28px);
    font-weight: var(--weight-light);
    color: rgba(247, 245, 239, 0.82);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color var(--duration-base) var(--ease);
}

.ayal-mobile-nav__group-trigger:hover { color: #FFFFFF; }

.ayal-mobile-nav__group-trigger svg {
    flex-shrink: 0;
    opacity: 0.50;
    transition: transform var(--duration-base) var(--ease);
}

.ayal-mobile-nav__group-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
    opacity: 0.80;
}

.ayal-mobile-nav__sub {
    padding-bottom: var(--space-12);
}

.ayal-mobile-nav__sub[hidden] { display: none; }

.ayal-mobile-nav__sub-link {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: rgba(247, 245, 239, 0.55);
    text-decoration: none;
    padding: var(--space-10) 0;
    transition: color var(--duration-base) var(--ease);
}

.ayal-mobile-nav__sub-link:hover { color: #C7B78C; }

.ayal-mobile-nav__sub-link--all {
    color: #283618;
    font-weight: var(--weight-bold);
    font-size: var(--text-body-sm);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin-top: var(--space-8);
}

.ayal-mobile-nav__footer {
    padding: var(--space-24);
    border-top: 1px solid rgba(247, 245, 239, 0.08);
    flex-shrink: 0;
}


/* =============================================================================
   8. BODY OFFSET & ADMIN BAR
   The header is no longer fixed/overlaid — it sits in normal flow (sticky
   only once scrolled), so the page needs no artificial top padding at all;
   the sticky wrapper just needs to stick below WP's own fixed admin bar
   rather than under it.
   ============================================================================= */

.admin-bar .ayal-header-sticky { top: 32px; }

@media screen and (max-width: 782px) {
    .admin-bar .ayal-header-sticky { top: 46px; }
}


/* =============================================================================
   9. RESPONSIVE
   ============================================================================= */

@media (max-width: 1023px) {

    .ayal-header__burger { display: flex; }
    .ayal-nav__menu { display: none; }
    .ayal-header__actions .ayal-btn--primary { display: none; }
    .ayal-header__inner { padding-top: 16px; padding-bottom: 16px; }

}

@media (max-width: 640px) {

    .ayal-header__search span { display: none; } /* icon-only */
    .ayal-header__logo-main { font-size: 22px; }

}

@media (max-width: 767px) {

    .ayal-mega__img-grid--2 {
        grid-template-columns: 1fr;
    }

    .ayal-mega__cols,
    .ayal-mega__cols--4 {
        grid-template-columns: 1fr;
        gap: var(--space-24);
    }

}