/* ========================================
   HOME PAGE STYLES
   Midland International Air & Space Port
   ======================================== */

/* Vertical space reserved below the hero at first paint so the "Plan Your Visit"
   heading and the top of the card photos are visible without scrolling.
   Budget: 40px section padding + 38px heading + 8px + 26px subtitle + 32px
   = 144px to the top of the photo, + ~112px of the 200px photo itself.
   Raise this number to reveal more of the cards, lower it for a taller hero. */
:root {
    --hero-reveal: 256px;
}

/* ----------------------------------------
   Section Shared Styles
   ---------------------------------------- */
.section-title {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    color: var(--mid-gray);
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-description {
    color: var(--mid-gray);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

/* ========================================
   HERO SECTION
   ======================================== */
#hero {
    position: relative;
    /* The photo and its wash live in absolutely-positioned SIBLINGS of .hero-content,
       so nothing in the white text's ancestor chain carries a background. That reads
       as white-on-white to a contrast checker, and it IS white-on-white for real if
       the photo ever 404s or is slow. This opaque floor keeps the heading, the two
       hero buttons and the weather widget legible in both cases (white on it = 11.4:1).
       Invisible once the photo loads. Same reasoning as .page-header in pages.css. */
    background-color: var(--primary-color-dark);
    /* Sized off --hero-reveal so the next section always breaks the fold. The vh
       line is the fallback for browsers without svh (Safari < 15.4, Chrome < 108);
       svh measures the viewport with mobile browser chrome showing, so the hero
       does not resize when the toolbars collapse. --banner-h is set by
       components.js when a CMS alert bar is pushing the page down. */
    height: calc(100vh - var(--hero-reveal) - var(--banner-h, 0px));
    height: calc(100svh - var(--hero-reveal) - var(--banner-h, 0px));
    min-height: 420px;
    max-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -90px;
    padding-top: 80px;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* img covers the poster-only fallback path; video is the normal case. */
.hero-background img,
.hero-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The photo is 2400x1000 (2.4:1), already cropped to near the hero's shape by
       tools/prep-photo.ps1, so centre is the composition it was cut for. */
    object-position: center;
}

/* The video is 16:9 — far taller in aspect than the photo, so `cover` throws away
   roughly 40% of its height against this letterbox and it cannot share the
   photo's framing. Pulling the anchor above centre keeps the subject in frame and
   spends the crop on foreground tarmac instead. Lower % = show more of the top. */
.hero-background video {
    object-position: center 20%;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Darkened from 0.55/0.5/0.5/0.6 when the still photo became a video. A photo
       can be contrast-checked once; moving footage cannot — a bright sky or a
       tarmac glare frame drifts far lighter than the average, and the white
       heading has to hold on the WORST frame, not the mean one. */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.6) 35%,
        rgba(0, 0, 0, 0.6) 65%,
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 1;
}

/* Hero motion control (WCAG 2.2.2)
   ----------------------------------------
   Bottom-right so it clears the weather widget (top-right) and the centred
   heading/CTAs. Same translucent-pill treatment as .weather-widget so it reads
   as existing hero furniture rather than a bolted-on control. */
.hero-motion-toggle {
    position: absolute;
    bottom: 24px;
    right: 30px;
    z-index: 3;
    /* 0.6 for the same reason as .weather-widget: it sits over live footage, so
       the white glyph needs the darker ground to clear AA on a bright frame. */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
}

.hero-motion-toggle:hover,
.hero-motion-toggle:focus-visible {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Same override the hero CTAs use (.btn-hero-primary:focus). The global ring in
   main.css is --primary-color #094989, a dark navy that all but disappears against
   the darkened hero — under 2:1, so it fails 2.4.11. --accent-color #6AADE4 clears
   6:1 on the same ground. */
.hero-motion-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* The button is icon-only by design (44x44 keeps it at the AAA target size
   without crowding the hero), so the label is the accessible name only. Clipped
   rather than display:none so screen readers still announce it. */
.hero-motion-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* No video element on the page (or JS disabled) means nothing to pause, so the
   control would be a dead button. home.js unhides it once it has wired up. */
.hero-motion-toggle[hidden] {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    padding: 0 1rem;
}

.hero-title {
    font-size: 3.25rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-hero-primary {
    background-color: transparent;
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-normal);
    border: 2px solid var(--white);
}

.btn-hero-primary:hover,
.btn-hero-primary:focus {
    background-color: var(--white);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-hero-primary:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ----------------------------------------
   Weather Widget
   ---------------------------------------- */
.weather-widget {
    position: absolute;
    top: 110px;
    right: 30px;
    z-index: 3;
    /* 0.6, not 0.4: this widget sits over the sky, the brightest part of the hero
       photo, and at 0.4 the white readout was below AA (2.85:1 against a white
       ground). At 0.6 it clears 4.5:1 even in the worst case. */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
}

.weather-icon {
    font-size: 1.75rem;
}

.weather-info {
    display: flex;
    flex-direction: column;
}

.weather-temp {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Populated from the NWS observation's textDescription. Empty until the fetch
   resolves, so it takes no vertical space on a failed load.

   Neither this nor .weather-location carries an opacity any more (they were 0.95
   and 0.9): it shaved contrast off the tightest text on the page. Size alone
   carries the hierarchy below .weather-temp. */
.weather-cond {
    font-size: 0.8rem;
    line-height: 1.3;
}

.weather-location {
    font-size: 0.8rem;
}

/* ========================================
   QUICK ACTION STRIP
   ======================================== */
#quick-action-strip {
    background-color: var(--primary-color);
    padding: 0;
    position: relative;
    z-index: 10;
}

.action-strip {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.action-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 2.5rem;
    color: var(--white);
    text-decoration: none;
    transition: all var(--transition-normal);
    position: relative;
}

.action-strip-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 50%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

.action-strip-item:last-child::after {
    display: none;
}

.action-strip-item:hover {
    background-color: var(--primary-color-dark);
    color: var(--white);
}

.action-strip-item:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

.action-strip-item i {
    font-size: 1.5rem;
    transition: transform var(--transition-normal);
}

.action-strip-item:hover i {
    transform: translateY(-3px);
    color: var(--white);
}

.action-strip-item span {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   FLIGHT INFORMATION WIDGET
   ======================================== */
#flight-widget {
    background-color: var(--light-gray);
    padding: 3rem 0;
}

.flight-board {
    background-color: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-gray);
    max-width: 1000px;
    margin: 0 auto;
}

/* Flight Search */
.flight-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-gray);
}

.flight-search-icon {
    color: var(--mid-gray);
    font-size: 0.9rem;
}

.flight-search input {
    border: none;
    outline: none;
    font-size: 0.95rem;
    width: 100%;
    color: var(--dark-gray);
    background: transparent;
}
    .flight-search input:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
        border-radius: 4px;
    } 

.flight-search input::placeholder {
    color: var(--mid-gray);
}

/* Flight Table */
.table-responsive {
    overflow-x: auto;
}

.flight-table {
    width: 100%;
    border-collapse: collapse;
}

.flight-table thead {
    background-color: var(--light-gray);
}

.flight-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
}

.flight-table td {
    padding: 14px 16px;
    border-top: 1px solid var(--border-gray);
    font-size: 0.95rem;
}

.flight-table tbody tr:hover {
    background-color: var(--light-gray);
}

.flight-number {
    font-weight: 600;
    color: var(--primary-color);
}

/* Flight Type (plain text, no badge) */
.flight-type {
    font-size: 0.85rem;
    color: var(--mid-gray);
    font-weight: 500;
}

/* Delay Time Styles */
.flight-time-original {
    text-decoration: line-through;
    /* An explicit grey rather than opacity: 0.5, which computed to #999 on white
       (2.85:1, below AA). This is a delayed flight's original departure time, so
       it carries meaning and has to be readable, not just de-emphasised. The
       line-through already signals "superseded". */
    color: var(--mid-gray);
    font-size: 0.8rem;
    display: block;
    line-height: 1.2;
}

.flight-time-updated {
    color: #856404;
    font-weight: 700;
    display: block;
    line-height: 1.3;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge i {
    font-size: 0.7rem;
}

.status-ontime {
    background-color: #d4edda;
    color: #155724;
}

.status-delayed {
    background-color: #fff3cd;
    color: #856404;
}

.status-arrived {
    background-color: #cce5ff;
    color: #004085;
}

.status-cancelled {
    background-color: #f8d7da;
    color: #721c24;
}

/* Flight Loading & Error States */
.flight-loading,
.flight-error {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--mid-gray);
}

.flight-error i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    /* Was --primary-color-light, which is 1.93:1 on white. This icon is the only
       visual signal that the board failed to load, so SC 1.4.11 wants 3:1 — the
       full primary gives 9:1. */
    color: var(--primary-color);
}

.flight-error a {
    color: var(--primary-color);
    font-weight: 500;
}

/* Flight Board Footer */
.flight-board-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    background-color: var(--off-white);
}

.flight-disclaimer {
    font-size: 0.85rem;
    color: var(--mid-gray);
    margin: 0;
}

.flight-disclaimer i {
    margin-right: 0.35rem;
}

.flight-disclaimer a {
    color: var(--primary-color);
    font-weight: 500;
}

.flight-disclaimer a:hover {
    color: var(--primary-color-dark);
}

.flight-view-all {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--transition-normal);
}

.flight-view-all:hover {
    color: var(--primary-color-dark);
}

.flight-view-all i {
    transition: transform var(--transition-normal);
}

.flight-view-all:hover i {
    transform: translateX(3px);
}

/* ========================================
   AIRLINES SECTION
   ======================================== */
#airlines {
    padding: 4rem 0;
    background-color: var(--white);
}

.airlines-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
}

.airline-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 3rem;
    background-color: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    text-decoration: none;
    transition: all var(--transition-normal);
    min-width: 220px;
}

.airline-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.airline-card:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.airline-card img {
    max-width: 180px;
    height: 70px;
    object-fit: contain;
    transition: transform var(--transition-normal);
}

.airline-card:hover img {
    transform: scale(1.05);
}

.airlines-cta {
    text-align: center;
    margin-top: 1.5rem;
}

.btn-primary-outline {
    display: inline-block;
    padding: 0.875rem 2rem;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.btn-primary-outline:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-primary-outline:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ========================================
   SPACEPORT SECTION
   ======================================== */
#spaceport-highlight {
    position: relative;
    /* Opaque floor for the same reason as #hero: the tint is in a sibling
       .spaceport-overlay, so the white heading and body text have no resolvable
       background of their own. This is that overlay's own colour at full opacity,
       so the loaded appearance does not change (white on it = 9.5:1). */
    background-color: #37475a;
    padding: 6rem 0;
    overflow: hidden;
}

.spaceport-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.spaceport-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spaceport-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Retuned for the Webb Centaurus A backdrop, which is far brighter through the
       middle than the flat starfield this was originally set for: in the left 55%
       (where .spaceport-content sits) 12-14% of pixels exceed 0.5 relative
       luminance, and at the old 0.7 mid-stop a near-white pixel left the white
       heading at 4.2:1 — under AA. 0.84 puts the worst case at 6.1:1. The right
       edge stays light so the galaxy core still reads; no text is over there. */
    background: linear-gradient(
        to right,
        rgba(55, 71, 90, 0.92) 0%,
        rgba(55, 71, 90, 0.84) 50%,
        rgba(55, 71, 90, 0.35) 100%
    );
    z-index: 1;
}

#spaceport-highlight .container {
    position: relative;
    z-index: 2;
}

.spaceport-content {
    max-width: 550px;
    color: var(--white);
}

.spaceport-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--white);
}

.spaceport-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.spaceport-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--white);
    color: var(--primary-color);
    padding: 1rem 1.75rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.spaceport-btn:hover {
    /* --accent-color-dark under white text is 3.45:1, below WCAG AA 4.5:1 */
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateX(5px);
}

.spaceport-btn:focus {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

.spaceport-btn i {
    transition: transform var(--transition-normal);
}

.spaceport-btn:hover i {
    transform: translateX(3px);
}

/* ========================================
   EXPLORE / PLAN YOUR VISIT SECTION
   ======================================== */
/* Tighter top padding than the other bands on purpose: this is the first section
   after the hero, and every pixel here is a pixel of card photo above the fold.
   The two rules below are part of the --hero-reveal budget — change them together. */
#explore-section {
    padding: 2.5rem 0 4rem;
    background-color: var(--off-white);
    border-top: 4px solid var(--primary-color);
}

/* Scoped, not global: #notices-preview keeps the roomier 2.5rem. */
#explore-section .section-subtitle {
    margin-bottom: 2rem;
}

/* Latest Notices band. Swap this one background-color line to var(--primary-color)
   (and see the navy overrides below) if the navy treatment is chosen later. */
#notices-preview {
    padding: 4rem 0;
    background-color: var(--off-white);
}

.explore-card {
    display: block;
    background-color: var(--white);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid var(--border-gray);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    height: 100%;
}

.explore-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color-light);
}

.explore-card:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.explore-card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.explore-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.explore-card:hover .explore-card-image img {
    transform: scale(1.05);
}

.explore-card-content {
    padding: 1.5rem;
}

.explore-card-content h3 {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.explore-card-content p {
    color: var(--mid-gray);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* ========================================
   LATEST NOTICES — homepage card carousel
   ======================================== */
.hn-carousel {
    margin-top: 1rem;
}

.hn-loading {
    text-align: center;
    color: var(--mid-gray);
    padding: 1.5rem 0;
    margin: 0;
}

.hn-empty {
    text-align: center;
    color: var(--mid-gray);
    background-color: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    margin: 0;
}

.hn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.hn-grid:empty {
    display: none;
}

.hn-card {
    display: grid;
    grid-template-columns: 6px 1fr;
    background-color: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.hn-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color-light);
}

.hn-stripe {
    background-color: var(--accent-color);
}

.hn-body {
    padding: 1.25rem 1.35rem;
}

.hn-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.hn-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.6rem;
    border-radius: 5px;
    background-color: var(--light-gray);
    color: var(--primary-color-dark);
}

.hn-date {
    font-size: 0.82rem;
    color: var(--mid-gray);
}

.hn-title {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.3;
}

.hn-text {
    margin: 0;
    color: var(--mid-gray);
    font-size: 0.95rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.9rem;
}

.hn-attach {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.hn-attach:hover {
    text-decoration: underline;
}

/* Paging controls */
.hn-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.75rem;
}

.hn-controls[hidden] {
    display: none;
}

.hn-nav {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-gray);
    background-color: var(--white);
    color: var(--primary-color);
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hn-nav:hover:not(:disabled) {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: var(--white);
}

.hn-nav:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hn-nav:disabled {
    opacity: 0.4;
    cursor: default;
}

.hn-status {
    font-size: 0.9rem;
    color: var(--mid-gray);
    min-width: 9rem;
    text-align: center;
}

/* Footer row: Instagram + View all */
.hn-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.hn-ig,
.hn-viewall {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.hn-ig {
    color: var(--primary-color);
}

.hn-ig:hover {
    color: var(--primary-color-dark);
}

.hn-ig i {
    font-size: 1.2rem;
}

.hn-viewall {
    color: var(--white);
    background-color: var(--primary-color);
    padding: 0.65rem 1.4rem;
    border-radius: 8px;
}

.hn-viewall:hover {
    background-color: var(--primary-color-dark);
    color: var(--white);
}

.hn-viewall i {
    transition: transform var(--transition-fast);
}

.hn-viewall:hover i {
    transform: translateX(3px);
}

/* Navy treatment (opt-in): uncomment with the #notices-preview background swap. */
/*
#notices-preview.hn-navy { background-color: var(--primary-color); }
#notices-preview.hn-navy .section-title,
#notices-preview.hn-navy .section-subtitle { color: var(--white); }
#notices-preview.hn-navy .hn-status { color: rgba(255, 255, 255, 0.85); }
#notices-preview.hn-navy .hn-nav { background-color: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
#notices-preview.hn-navy .hn-ig { color: var(--white); }
#notices-preview.hn-navy .hn-viewall { background-color: var(--white); color: var(--primary-color); }
*/

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Large Tablets */
@media (max-width: 991.98px) {
    /* The navbar drops to 70px at this breakpoint (navigation.css), so the negative
       pull that tucks the hero under it and the padding that clears it must both
       match — otherwise the top of the hero photo is dragged off-screen. */
    #hero {
        margin-top: -70px;
        padding-top: 70px;
    }

    .hero-title {
        font-size: 3rem;
    }

    .weather-widget {
        top: 90px;
        right: 20px;
        padding: 10px 16px;
    }

    /* Tracks the widget's inset above. Deliberately NOT hidden at any width the way
       .weather-widget is below 768px — the video still plays on a phone, so 2.2.2
       still applies and the control has to come with it. Stays 44x44 for the touch
       target. */
    .hero-motion-toggle {
        bottom: 20px;
        right: 20px;
    }

    .weather-icon {
        font-size: 1.5rem;
    }

    .weather-temp {
        font-size: 1.2rem;
    }

    .action-strip-item {
        padding: 1rem 1.5rem;
    }

    .action-strip-item i {
        font-size: 1.25rem;
    }

    .action-strip-item span {
        font-size: 0.75rem;
    }

    .airline-card {
        padding: 1.5rem 2rem;
        min-width: 180px;
    }

    .airline-card img {
        max-width: 150px;
        height: 60px;
    }

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

/* Tablets */
@media (max-width: 767.98px) {
    /* Height still comes from the --hero-reveal calc; only the clamp changes so a
       tall, narrow phone viewport does not hand the hero 600px of screen. */
    #hero {
        min-height: 360px;
        max-height: 520px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .weather-widget {
        display: none;
    }

    .btn-hero-primary {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }

    /* Quick Action Strip */
    .action-strip {
        flex-wrap: wrap;
    }

    .action-strip-item {
        flex: 1 1 33.333%;
        padding: 1rem 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .action-strip-item::after {
        display: none;
    }

    .action-strip-item:nth-last-child(-n+2) {
        flex: 1 1 50%;
    }

    /* Flight Widget */
    #flight-widget {
        padding: 2rem 0;
    }

    .flight-table th,
    .flight-table td {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .flight-board-footer {
        flex-direction: column;
        text-align: center;
    }

    /* Airlines */
    .airlines-grid {
        gap: 1rem;
    }

    .airline-card {
        padding: 1.25rem 1.5rem;
        min-width: 150px;
    }

    .airline-card img {
        max-width: 120px;
        height: 50px;
    }

    /* Spaceport */
    #spaceport-highlight {
        padding: 4rem 0;
    }

    /* Mobile centres the text and lets it run full width, so it can land directly
       over the galaxy core — this gradient has to hold AA everywhere, not just on
       one side like the desktop one. 0.84 at the weakest point = 6.1:1. */
    .spaceport-overlay {
        background: linear-gradient(
            to bottom,
            rgba(55, 71, 90, 0.88) 0%,
            rgba(55, 71, 90, 0.84) 100%
        );
    }

    .spaceport-content {
        text-align: center;
        max-width: 100%;
    }

    .spaceport-title {
        font-size: 2rem;
    }

    .spaceport-text {
        font-size: 1rem;
    }

    /* Explore Cards */
    .explore-card-image {
        height: 180px;
    }

    /* Latest Notices */
    .hn-grid {
        grid-template-columns: 1fr;
    }

    .hn-footer {
        gap: 1rem;
    }
}

/* Mobile — matches navigation.css, where the navbar drops to 60px */
@media (max-width: 575.98px) {
    #hero {
        margin-top: -60px;
        padding-top: 60px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .weather-widget {
        display: none;
    }

    .action-strip-item {
        flex: 1 1 50%;
    }

    .action-strip-item:last-child {
        flex: 1 1 100%;
    }

    .flight-table th,
    .flight-table td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .flight-time-original {
        font-size: 0.75rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .airline-card {
        flex: 1 1 100%;
        max-width: 280px;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Note: the rule above has no effect on a playing <video>, which is the
       largest moving thing on the page. That is handled in home.js instead —
       playback is started by script, and it does not start under reduced motion.
       Hiding the video here would be wrong: the poster is rendered BY the video
       element, so display:none would take the fallback still down with it. */
}