/**
 * Gal design system
 *
 * Desktop values are measured from the approved 1920px Figma homepage frame.
 * Gibson is the design font. Local WOFF2 files are loaded from assets/fonts.
 */

@font-face {
    font-family: "Gibson";
    src: url("../fonts/Gibson-Light.woff2") format("woff2");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Gibson";
    src: url("../fonts/Gibson-LightItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Gibson";
    src: url("../fonts/Gibson.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Gibson";
    src: url("../fonts/Gibson-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Gibson";
    src: url("../fonts/Gibson-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Gibson";
    src: url("../fonts/Gibson-SemiBoldItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Gibson";
    src: url("../fonts/Gibson-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Gibson";
    src: url("../fonts/Gibson-BoldItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Brand palette */
    --color-primary: #232d55;
    --color-secondary: #11182f;
    --color-accent: #ba9a39;
    --color-heading: #ffffff;
    --color-text: rgba(255, 255, 255, 0.75);
    --color-text-strong: #ffffff;
    --color-muted: rgba(255, 255, 255, 0.6);
    --color-background: #090e1c;
    --color-background-deep: #050913;
    --color-surface: #11182f;
    --color-surface-elevated: #151d3a;
    --color-border: rgba(255, 255, 255, 0.25);
    --color-border-strong: rgba(255, 255, 255, 0.5);
    --color-button-background: rgba(255, 255, 255, 0.08);
    --color-button-text: #ffffff;
    --color-button-hover: #ba9a39;
    --color-focus-frame: rgba(255, 255, 255, 0.72);

    /* Typography */
    --font-family-base: "Gibson", "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: "Gibson", "Helvetica Neue", Arial, sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-size-display: 7.5rem; /* 120px Figma display heading */
    --font-size-h1: 5rem; /* 80px Figma inner-page heading */
    --font-size-h2: 2.125rem; /* 34px section heading */
    --font-size-h3: 1.5625rem; /* 25px card heading */
    --font-size-h4: 1.25rem; /* 20px supporting heading */
    --font-size-body: 1.125rem; /* 18px */
    --font-size-small: 1rem; /* 16px navigation/button text */
    --line-height-display: 1;
    --line-height-heading: 1;
    --line-height-body: 1.6667; /* 30px at 18px */
    --line-height-control: 2; /* 32px at 16px */
    --letter-spacing-heading: 0;

    /* Layout and spacing */
    --layout-canvas: 120rem; /* 1920px Figma frame */
    --layout-container: 107.5rem; /* 1720px content + two 100px gutters */
    --layout-gutter: 6.25rem; /* 100px */
    --section-space: 7.5rem; /* 120px */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 2.5rem;
    --space-6: 3.25rem; /* 52px button height */
    --space-7: 4rem;
    --space-8: 4.875rem; /* 78px measured group gap */
    --space-9: 6.25rem;
    --space-10: 7.5rem;

    /* Shape and depth */
    --radius-control: 0;
    --radius-card: 0;
    --shadow-none: none;

    /* Motion */
    --transition-fast: 180ms ease-out;
    --transition-component: 300ms ease-out;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: clip;
}

body {
    max-width: 100%;
    overflow-x: clip;
}

html.gal-smooth-scroll {
    scroll-behavior: auto;
}

body,
.editor-styles-wrapper {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
    margin-block: 0 var(--space-3);
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-heading);
}

h1 {
    font-size: var(--font-size-h1);
    line-height: 1.5; /* 120px measured line height at 80px */
    text-transform: uppercase;
}

h2 {
    color: var(--color-accent);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-heading);
    text-transform: uppercase;
}

h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-heading);
}

h4 {
    font-size: var(--font-size-h4);
    line-height: 1.25;
}

p {
    margin-block: 0 var(--space-3);
}

.gal-text-motion .gal-text-reveal {
    transition-delay: var(--gal-text-delay, 0ms);
    will-change: opacity, transform, clip-path, filter;
}

.gal-text-motion .gal-text-reveal--heading {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 52px, 0);
    filter: blur(12px);
    transition:
        opacity 820ms ease-out var(--gal-text-delay, 0ms),
        clip-path 950ms cubic-bezier(0.16, 1, 0.3, 1) var(--gal-text-delay, 0ms),
        transform 950ms cubic-bezier(0.16, 1, 0.3, 1) var(--gal-text-delay, 0ms);
}

.gal-text-motion .gal-text-reveal--copy {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 52px, 0);
    transition:
        opacity 850ms ease-out var(--gal-text-delay, 0ms),
        clip-path 1050ms cubic-bezier(0.16, 1, 0.3, 1) var(--gal-text-delay, 0ms),
        transform 1050ms cubic-bezier(0.16, 1, 0.3, 1) var(--gal-text-delay, 0ms);
}

.gal-text-motion .gal-text-reveal.is-text-visible {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
    filter: none;
}

.gal-text-reveal.is-text-visible {
    will-change: auto;
}

.gal-text-small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-control);
}

.gal-display {
    color: var(--color-text);
    font-size: var(--font-size-display);
    line-height: var(--line-height-display);
    text-align: center;
    text-transform: uppercase;
}

a {
    color: inherit;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover,
a:focus-visible {
    color: var(--color-accent);
}

a:hover, a:focus-visible {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

figure {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    .gal-heading-reveal,
    .gal-heading-reveal__mask,
    .gal-heading-reveal__line,
    .gal-heading-reveal__word {
        overflow: visible;
        clip-path: none;
        transform: none;
        transition: none;
        white-space: normal;
    }
}

.gal-container,
.wp-site-blocks > :where(header, main, footer) > .alignwide {
    width: min(100% - (2 * var(--layout-gutter)), var(--layout-container));
    margin-inline: auto;
}

.gal-section {
    padding-block: var(--section-space);
}

.gal-stack > * {
    margin-block: 0;
}

.gal-stack > * + * {
    margin-block-start: var(--space-3);
}

.gal-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.gal-grid {
    display: grid;
    gap: var(--space-4);
}

.gal-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gal-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gal-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

:where(button, .button, .wp-element-button, .wp-block-button__link, input[type="button"], input[type="submit"]) {
    position: relative;
    display: inline-flex;
    min-width: 12rem;
    min-height: var(--space-6);
    align-items: center;
    justify-content: center;
    padding: 0.5625rem var(--space-3);
    border: 1px solid var(--color-border-strong);
    box-sizing: border-box;
    border-radius: var(--radius-control);
    background: var(--color-button-background);
    color: var(--color-button-text);
    font: var(--font-weight-regular) var(--font-size-small) / var(--line-height-control) var(--font-family-base);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 420ms cubic-bezier(0.22, 1, 0.36, 1), color 420ms cubic-bezier(0.22, 1, 0.36, 1), background-color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

:where(.button, .wp-element-button, .wp-block-button__link) {
    isolation: isolate;
    overflow: hidden;
}

:where(.button, .wp-element-button, .wp-block-button__link)::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: rgba(255, 255, 255, 0.075);
    content: "";
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Camera-style corner marks used throughout the approved Figma components. */
.gal-focus-frame,
:where(.button, .wp-element-button, .wp-block-button__link) {
    --focus-frame-size: 0.6875rem;
    position: relative;
}

.gal-focus-frame::after,
:where(.button, .wp-element-button, .wp-block-button__link)::after {
    position: absolute;
    z-index: 5;
    inset: 0;
    background:
        linear-gradient(var(--color-focus-frame), var(--color-focus-frame)) left top / var(--focus-frame-size) 1px no-repeat,
        linear-gradient(var(--color-focus-frame), var(--color-focus-frame)) left top / 1px var(--focus-frame-size) no-repeat,
        linear-gradient(var(--color-focus-frame), var(--color-focus-frame)) right top / var(--focus-frame-size) 1px no-repeat,
        linear-gradient(var(--color-focus-frame), var(--color-focus-frame)) right top / 1px var(--focus-frame-size) no-repeat,
        linear-gradient(var(--color-focus-frame), var(--color-focus-frame)) left bottom / var(--focus-frame-size) 1px no-repeat,
        linear-gradient(var(--color-focus-frame), var(--color-focus-frame)) left bottom / 1px var(--focus-frame-size) no-repeat,
        linear-gradient(var(--color-focus-frame), var(--color-focus-frame)) right bottom / var(--focus-frame-size) 1px no-repeat,
        linear-gradient(var(--color-focus-frame), var(--color-focus-frame)) right bottom / 1px var(--focus-frame-size) no-repeat;
    content: "";
    pointer-events: none;
    transition: background-size 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out;
}

/* Image frames use the same six-pixel camera gap as the approved About view. */
.gal-focus-frame.gal-focus-frame--spaced {
    overflow: visible;
    isolation: isolate;
    z-index: 1;
}

/* Allow the approved outer camera gap to clear page-level clipping. */
.gal-capabilities-view.gal-capabilities-view,
.gal-national-champion.gal-national-champion,
.gal-careers.gal-careers,
.gal-media-content.gal-media-content,
.gal-social__gallery:has(.gal-focus-frame--spaced) {
    overflow: visible;
}

.gal-focus-frame.gal-focus-frame--spaced::after {
    inset: -0.375rem;
    z-index: 20;
}

.gal-focus-frame__clip {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

html body .gal-focus-frame--spaced.gal-stage-image {
    clip-path: none;
}

:where(button, .button, .wp-element-button, .wp-block-button__link, input[type="button"], input[type="submit"]):hover,
:where(button, .button, .wp-element-button, .wp-block-button__link, input[type="button"], input[type="submit"]):focus-visible {
    border-color: transparent;
    color: var(--color-button-text);
}

/* Keep the Figma button label white instead of inheriting the global gold link hover. */
.button:hover,
.button:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
    --color-focus-frame: var(--color-button-hover);
    color: var(--color-button-text);
}

:where(.button, .wp-element-button, .wp-block-button__link):hover::before,
:where(.button, .wp-element-button, .wp-block-button__link):focus-visible::before {
    transform: scaleX(1);
    transform-origin: left center;
}

:where(.button, .wp-element-button, .wp-block-button__link):hover::after,
:where(.button, .wp-element-button, .wp-block-button__link):focus-visible::after {
    background-size:
        50.5% 1px,
        1px 50.5%,
        50.5% 1px,
        1px 50.5%,
        50.5% 1px,
        1px 50.5%,
        50.5% 1px,
        1px 50.5%;
}

:where(input:not([type="button"]):not([type="submit"]), textarea, select) {
    width: 100%;
    min-height: var(--space-6);
    padding: 0.625rem var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-background-deep);
    color: var(--color-text-strong);
    font: inherit;
}

textarea {
    min-height: 10rem;
    resize: vertical;
}

::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

@media (max-width: 74.9375rem) {
    :root {
        --layout-gutter: 4rem;
        --section-space: 6rem;
        --font-size-display: 5.5rem;
        --font-size-h1: 4rem;
    }

    .gal-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 63.9375rem) {
    :root {
        --layout-gutter: 2.5rem;
        --section-space: 5rem;
    }

    .gal-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 47.9375rem) {
    :root {
        --layout-gutter: 1.5rem;
        --section-space: 4.5rem;
        --font-size-display: 3.5rem;
        --font-size-h1: 2.875rem;
        --font-size-h2: 1.875rem;
        --font-size-h3: 1.375rem;
        --font-size-body: 1.0625rem;
        --line-height-body: 1.6471;
    }

    h1 {
        line-height: 1.15;
    }

    .gal-grid--2,
    .gal-grid--3,
    .gal-grid--4 {
        grid-template-columns: 1fr;
    }

    :where(button, .button, .wp-element-button, .wp-block-button__link, input[type="button"], input[type="submit"]) {
        min-width: 0;
    }
}

@media (max-width: 29.9375rem) {
    :root {
        --layout-gutter: 1.25rem;
        --font-size-display: 3rem;
        --font-size-h1: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Shared appearance for banner navigation tabs; each page controls only its layout. */
.gal-banner-tabs {
    gap: 0.625rem;
}

.gal-banner-tabs .button {
    min-height: 3.25rem;
    font-size: 0.925rem;
}

.gal-banner-tabs .button:is(.is-active, [aria-current="page"], [aria-selected="true"], :hover, :focus-visible) {
    border-color: rgba(186, 154, 57, 0.65);
    background: rgba(255, 255, 255, 0.1);
}

.gal-banner-tabs .button:is(.is-active, [aria-current="page"], [aria-selected="true"], :hover, :focus-visible)::after {
    opacity: 0;
}

/* Shared capability feature cards */
.gal-capability-features {
    position: relative;
    z-index: 1;
    padding-block: 7rem 8rem;
}

.gal-capability-features__intro {
    max-width: 48rem;
    margin-bottom: 4.5rem;
}

.gal-capability-features__intro h2 {
    margin-bottom: 1.5rem;
}

.gal-capability-features__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.gal-capability-features article {
    min-height: 12rem;
    padding: 2rem 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.gal-capability-features article:last-child {
    border-top-color: var(--color-accent);
}

.gal-capability-features h3 {
    margin-bottom: 1.25rem;
    color: var(--color-text);
}