/**
 * TFG Aviation sub-site shared styles.
 *
 * Loaded only on aviation pages via conditional enqueue in functions/scripts.php.
 * All rules scoped under .aviation-site so they cannot leak to the main TFG site.
 *
 * Per-block styling lives INLINE in each block's PHP file. Only shared concerns
 * live here:
 *   1. Tokens
 *   2. Base typography
 *   3. Header overrides
 *   4. Cut-corner gold frame primitive (button grid, service cards, modal)
 *   5. .aviation-button shared utility (leadership CTA, blog feed CTA)
 *   6. Footer Marketo button override (footer is shared with TFG main site)
 */


/* ============================================================
 * 1. TOKENS
 * ============================================================ */

.aviation-site {
    --avi-gold: #b8965a;
    --avi-gold-light: #e8dcc4;
    --avi-gold-dark: #8a7140;
    --avi-gold-soft: #d8c89a;

    --avi-black: #0d0d0d;
    --avi-text: #1a1a1a;
    --avi-muted: #6b6b6b;

    --avi-bg: #ffffff;
    --avi-bg-alt: #f5f5f5;
    --avi-bg-tan: rgba(168, 160, 144, 0.62);

    --avi-rule-width: 64px;
    --avi-ease: cubic-bezier(.2, .6, .2, 1);
}


/* ============================================================
 * 2. BASE TYPOGRAPHY
 * ============================================================ */

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

.aviation-site h1,
.aviation-site h2,
.aviation-site h3,
.aviation-site h4 {
    font-family: 'Merriweather', Georgia, serif;
    color: var(--avi-text);
    font-weight: 400;
    letter-spacing: -0.005em;
    margin: 0;
}

.aviation-site h1 {
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1.1;
    margin-bottom: 16px;
}

.aviation-site h2 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    margin-bottom: 14px;
}

.aviation-site h3 {
    font-size: clamp(20px, 1.6vw, 24px);
    line-height: 1.25;
}

.aviation-site p {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: var(--avi-text);
    margin: 0 0 1em;
}


/* ============================================================
 * 3. HEADER OVERRIDES
 * ============================================================ */

.aviation-site #scrollHeading {
    position: relative;
    width: 100%;
    background: var(--avi-bg);
    box-shadow: 0 1px 0 rgba(184, 150, 90, 0.18);
}

/* Header sits in normal page flow on aviation — no fixed-header spacer needed */
.aviation-site .fixedbackrel {
    display: none;
}

.aviation-site .parhead {
    align-items: flex-start;
    padding: 18px 0;
}

.aviation-site .logosection .mainLogo {
    max-height: 64px;
    width: auto;
}

/* Larger logo only on the aviation home (where the hero photo is) — keeps
 * the brand mark prominent against the dark scrim. Sub-pages stay at 64px. */
.aviation-home .logosection .mainLogo {
    max-height: 96px;
}

.aviation-site .menutop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 28px;
    padding-top: 0;
}

.aviation-site .menutop ul.main-navigation {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aviation-site .menutop ul.main-navigation li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aviation-site .menutop ul.main-navigation li a {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--avi-text);
    text-decoration: none;
    padding: 6px 0;
    position: relative;
    transition: color 0.25s var(--avi-ease);
}

/* TFG-main-style hover treatment: 2px gold lines top + bottom that grow
 * outward from 0 width to full on hover/active. Matches the global TFG menu. */
.aviation-site .menutop ul.main-navigation li a::before,
.aviation-site .menutop ul.main-navigation li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    height: 2px;
    width: 0;
    opacity: 0;
    background: var(--avi-gold);
    transition: width 0.4s var(--avi-ease), opacity 0.4s var(--avi-ease);
}

.aviation-site .menutop ul.main-navigation li a::before {
    top: -5px;
}

.aviation-site .menutop ul.main-navigation li a::after {
    bottom: -5px;
}

.aviation-site .menutop ul.main-navigation li a:hover,
.aviation-site .menutop ul.main-navigation li.current-menu-item a,
.aviation-site .menutop ul.main-navigation li.current_page_item a,
.aviation-site .menutop ul.main-navigation li.current_page_ancestor a {
    color: var(--avi-gold-dark);
}

.aviation-site .menutop ul.main-navigation li a:hover::before,
.aviation-site .menutop ul.main-navigation li a:hover::after,
.aviation-site .menutop ul.main-navigation li.current-menu-item a::before,
.aviation-site .menutop ul.main-navigation li.current-menu-item a::after,
.aviation-site .menutop ul.main-navigation li.current_page_item a::before,
.aviation-site .menutop ul.main-navigation li.current_page_item a::after,
.aviation-site .menutop ul.main-navigation li.current_page_ancestor a::before,
.aviation-site .menutop ul.main-navigation li.current_page_ancestor a::after {
    width: 100%;
    opacity: 0.7;
}

.aviation-site .aviation-back-link {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--avi-gold-dark);
    text-decoration: none;
    transition: color 0.25s var(--avi-ease), letter-spacing 0.3s var(--avi-ease);
    padding: 4px 0;
}

.aviation-site .aviation-back-link:hover {
    color: var(--avi-gold-dark);
    letter-spacing: 0.2em;
}

.aviation-site .aviation-back-link i {
    margin-right: 6px;
    font-size: 10px;
    transition: transform 0.3s var(--avi-ease);
}

.aviation-site .aviation-back-link:hover i {
    transform: translateX(-2px);
}

@media (max-width: 1199px) {
    .aviation-site .aviation-back-link {
        display: none;
    }
}


/* ============================================================
 * 4. CUT-CORNER GOLD FRAME PRIMITIVE
 *
 * Layered clip-path construction shared by:
 *   - aviationbuttongrid items
 *   - aviationservicepopout cards
 *   - aviationservicepopout modal panel
 *
 * Apply via class="aviation-frame" on outer + class="aviation-frame__inner"
 * on inner content wrapper. --avi-cut stays in absolute pixels so the
 * 45° chamfer reads identically on a 130px button or a 750px modal.
 * ============================================================ */

.aviation-site .aviation-frame {
    --avi-cut: 14px;
    --avi-frame-line: 1.5px;
    --avi-frame-gap: 10px;
    --avi-octagon: polygon(
        var(--avi-cut) 0%,
        calc(100% - var(--avi-cut)) 0%,
        100% var(--avi-cut),
        100% calc(100% - var(--avi-cut)),
        calc(100% - var(--avi-cut)) 100%,
        var(--avi-cut) 100%,
        0% calc(100% - var(--avi-cut)),
        0% var(--avi-cut)
    );

    position: relative;
    background: var(--avi-gold);
    clip-path: var(--avi-octagon);
    isolation: isolate;
}

.aviation-site .aviation-frame::before,
.aviation-site .aviation-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
    clip-path: var(--avi-octagon);
}

.aviation-site .aviation-frame::before {
    inset: var(--avi-frame-line);
    background: var(--avi-bg);
}

.aviation-site .aviation-frame::after {
    inset: calc(var(--avi-frame-line) + var(--avi-frame-gap));
    background: var(--avi-gold);
}

.aviation-site .aviation-frame__inner {
    position: relative;
    z-index: 1;
    margin: calc(var(--avi-frame-line) + var(--avi-frame-gap) + var(--avi-frame-line));
    background: var(--avi-bg);
    clip-path: var(--avi-octagon);
}

@media (max-width: 767px) {
    .aviation-site .aviation-frame {
        --avi-cut: 11px;
    }
}


/* ============================================================
 * 5. .aviation-button — shared cream/gold button utility
 *      Used by leadership team CTA and blog feed CTA.
 * ============================================================ */

.aviation-site .aviation-button {
    display: inline-block;
    background: var(--avi-gold);
    color: #fff;
    border: 1px solid var(--avi-gold);
    padding: 14px 32px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s var(--avi-ease), color 0.3s var(--avi-ease), border-color 0.3s var(--avi-ease);
}

.aviation-site .aviation-button:hover {
    background: var(--avi-gold-dark);
    border-color: var(--avi-gold-dark);
    color: #fff;
}


/* ============================================================
 * 6. FOOTER MARKETO BUTTON — footer is shared with TFG main site;
 *      retro-fit cream/gold treatment so it doesn't break the look.
 * ============================================================ */

.aviation-site button.mktoButton {
    background: var(--avi-gold) !important;
    color: #fff !important;
    border: 1px solid var(--avi-gold) !important;
    border-radius: 0 !important;
    padding: 14px 32px !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    transition: background-color 0.3s var(--avi-ease), color 0.3s var(--avi-ease), border-color 0.3s var(--avi-ease) !important;
}

.aviation-site button.mktoButton:hover {
    background: var(--avi-gold-dark) !important;
    border-color: var(--avi-gold-dark) !important;
    color: #fff !important;
}


/* ============================================================
 * 7. ANGLED-EDGE UTILITIES
 *
 * Shared diagonal-cut utilities applied to section wrappers
 * — the PDF redesign repeats a single slope direction (left
 * side cut, right side full).
 *
 *   .avi-angled-bottom — bottom-left cut up   (heroes, leadership)
 *   .avi-angled-top    — top-left cut down
 *   .avi-angled-both   — both top and bottom (parallelogram
 *                        banner, used on Stay In the Know)
 * ============================================================ */

.aviation-site .avi-angled-bottom {
    --avi-angle: 64px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--avi-angle)));
}

.aviation-site .avi-angled-top {
    --avi-angle: 64px;
    clip-path: polygon(0 var(--avi-angle), 100% 0, 100% 100%, 0 100%);
}

.aviation-site .avi-angled-both {
    --avi-angle: 64px;
    clip-path: polygon(0 var(--avi-angle), 100% 0, 100% calc(100% - var(--avi-angle)), 0 100%);
}

@media (max-width: 991px) {
    .aviation-site .avi-angled-bottom,
    .aviation-site .avi-angled-top,
    .aviation-site .avi-angled-both {
        --avi-angle: 48px;
    }
}

@media (max-width: 540px) {
    .aviation-site .avi-angled-bottom,
    .aviation-site .avi-angled-top,
    .aviation-site .avi-angled-both {
        --avi-angle: 32px;
    }
}


/* ============================================================
 * 8. AVIATION HOME — header overlays the hero
 *
 * Applies only to the aviation parent page (.aviation-home).
 * Sub-pages keep the standard in-flow header above the subhero.
 * ============================================================ */

.aviation-home #scrollHeading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: transparent;
    box-shadow: none;
}

/* Subtle dark-to-transparent scrim across the top of the hero so the white
 * nav stays readable regardless of what part of the photo sits behind it
 * (sunset sky vs. plane fuselage vs. hangar). Sits between the photo and
 * the nav (z-index 5 < #scrollHeading's 10). */
.aviation-home #scrollHeading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: -1;
}

.aviation-home #scrollHeading .parhead {
    padding: 22px 0;
    align-items: center;
}

/* Back-to-TFG link on home — keep visible (white treatment to match the
 * home overlay header). Sub-pages already show it in muted gold below. */
.aviation-home .aviation-back-link {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.aviation-home .aviation-back-link:hover {
    color: var(--avi-gold-light);
}

/* Home-only nav treatment: same 18px Inter as sub-pages but white with a soft
 * drop-shadow so it reads against any portion of the hero photo. */
.aviation-home .menutop ul.main-navigation {
    gap: 40px;
}

.aviation-home .menutop ul.main-navigation li a {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.aviation-home .menutop ul.main-navigation li a::before,
.aviation-home .menutop ul.main-navigation li a::after {
    background: var(--avi-gold);
    height: 2px;
}

.aviation-home .menutop ul.main-navigation li a:hover {
    color: #fff;
}

/* On the home page nothing in the aviation menu represents the current page
 * (the home page itself isn't a menu item, and "Our Solutions" exits the
 * section via wp_nav_menu_objects). Force the active state to plain white so
 * Our Solutions doesn't read as gold-highlighted. */
.aviation-home .menutop ul.main-navigation li.current-menu-item a,
.aviation-home .menutop ul.main-navigation li.current_page_item a,
.aviation-home .menutop ul.main-navigation li.current_page_ancestor a {
    color: #fff;
}