/* ============================================================
   user_responsiveness.css — viewport breakpoints for the public
   / user-facing pages (Home, About, Apply).

   Loaded AFTER header.css + styles.css so these overrides win.
   Covers every class defined in either of those two files —
   header/nav classes live in header.css, everything else
   (hero, footer, forms, cards…) lives in styles.css, but both
   get their responsive treatment collected here in one place.

   Note: prefers-reduced-motion stays in styles.css — that's an
   accessibility/motion preference, not a screen-size breakpoint.
   ============================================================ */

/* ==========================================================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {

  :root {
    --header-height: 92px;
  }

  /* ===== Header ===== */
  .site-header {
    /* the desktop rule clips anything taller than the bar — that would swallow
       the dropdown below, which is absolutely positioned inside the header */
    overflow: visible;
  }

  .site-brand__logo {
    height: 56px;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 4px 20px 20px;
    gap: 0; /* the rows carry their own dividers — a gap would break them up */
    /* Translucent like .site-header so the page still shows through. Note the
       tint is heavier than the header's 0.3: .site-header is already a backdrop
       root, so a nested backdrop-filter here blurs nothing and the hero
       headline would read straight through the menu labels. */
    background: rgba(224, 243, 252, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
  }

  .main-nav.is-open {
    display: flex;
    /* taller rows can outgrow a short viewport — scroll instead of overflowing */
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }

  /* Full-width rows: label left, chevron right, divider underneath. Bigger text
     and a 56px tap target so the menu is comfortable to read and hit. */
  .main-nav a:not(.btn) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 14px 6px;
    font-size: 17px;
    text-align: left;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
  }

  /* chevron — same border-rotate trick as .accordion-arrow */
  .main-nav a:not(.btn)::after {
    content: "";
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--sky-dark);
    border-bottom: 2px solid var(--sky-dark);
    transform: rotate(-45deg);
  }

  .main-nav a:not(.btn):hover,
  .main-nav a:not(.btn):active {
    background: rgba(28, 167, 224, 0.12);
    color: var(--sky-dark);
  }

  .main-nav .btn {
    width: 78%;
    margin: 18px auto 0;
    padding: 16px 32px; /* overrides .btn-sm */
    font-size: 16px;
  }

  .nav-toggle {
    display: flex;
  }

  .header-container {
    position: relative;
    padding: 16px 32px;
  }

  .header-right {
    gap: 0; /* the topbar row it separated is hidden here */
  }

  .header-topbar-inner,
  .header-divider {
    display: none;
  }

  /* .nav-contact (email + numbers inside the dropdown) stays hidden — its
     display:none lives in header.css. The markup is still in usertemplate.html
     if it's ever wanted back; contact details remain in the footer. */

  /* ===== Footer ===== */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 32px 40px;   /* tighten side padding to match the header at this breakpoint */
  }

  .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 8px;
    text-align: center;
  }

  /* scoped to .footer-brand so the header logo keeps its own responsive size */
  .footer-brand .site-brand {
    justify-content: center;
  }

  .footer-brand .site-brand__logo {
    height: 110px;
  }

  .footer-brand .footer-tagline {
    margin-left: auto;
    margin-right: auto;
  }

  /* ===== Home: Hero ===== */
  .hero,
  .join-team {
    min-height: auto;
  }

  /* Stacking order here is deliberate: eyebrow + headline, THEN the model
     photo, THEN tagline/buttons/stats. .hero-text is flattened with
     display:contents so its children can be ordered against .hero-visual.
     gap stays 0 — the children already carry their own margin-bottom. */
  .hero-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch; /* same shrink-wrap trap as .how-to-grid below */
    padding: 60px 32px;
    text-align: center;
  }

  .hero-text {
    display: contents;
  }

  .hero-text > * {
    order: 4; /* tagline, actions, stats — keep source order among themselves */
  }

  .hero-text > .eyebrow {
    order: 1;
  }

  .hero-text > h1 {
    order: 2;
  }

  .hero-text h1 {
    font-size: 42px;
  }

  .hero-tagline {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-visual {
    order: 3; /* sits between the headline and the tagline */
    justify-content: center; /* reset the desktop right-overflow trick */
    align-self: auto; /* reset the desktop stretch/negative-margin flush-bottom trick */
    margin: 4px 0 24px;
  }

  .hero-visual img {
    width: 100%; /* reset the desktop fixed overflow width */
    max-width: 400px;
    margin-left: 0; /* reset the desktop nudge so the image centers properly */
  }

  .hero-card {
    max-width: 300px;
  }

  /* ===== Home: About Preview ===== */
  /* eyebrow + "From Dreams To Reality." → image → subheadline, copy, link */
  .about-preview-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch; /* same shrink-wrap trap as .how-to-grid above */
  }

  .about-preview-text {
    display: contents;
  }

  .about-preview-text > * {
    order: 4;
  }

  .about-preview-text > .eyebrow {
    order: 1;
  }

  .about-preview-text > h2:first-of-type {
    order: 2;
  }

  .about-preview-visual {
    order: 3;
    margin: 16px 0 20px;
  }

  /* it's a flex item here, so stretch would drag its underline the full width */
  .about-preview-text > .link-arrow {
    align-self: flex-start;
  }

  /* ===== Home: How to Apply ===== */
  /* eyebrow + heading → image → the five steps */
  .how-to-grid {
    display: flex;
    flex-direction: column;
    gap: 18px; /* replaces the gap .how-to-steps loses to display:contents */
    /* the desktop grid centers its two columns; inherited into this column flex
       it would shrink-wrap each step to its text width and stagger them */
    align-items: stretch;
  }

  .how-to-steps {
    display: contents;
  }

  .how-to-steps > * {
    order: 4;
  }

  .how-to-steps > .eyebrow {
    order: 1;
  }

  .how-to-steps > h2 {
    order: 2;
  }

  /* headings centered over the centered model image below them */
  .how-to-steps > .eyebrow,
  .how-to-steps > h2 {
    text-align: center;
  }

  .how-to-visual {
    order: 3;
  }

  /* ===== Home: Features ===== */
  .features-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;
  }

  /* ===== About: Mission & Vision ===== */
  .mv-grid {
    grid-template-columns: 1fr;
  }

  /* ===== Home: Join Our Team ===== */
  .join-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* ===== About: Contact ===== */
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ===== Apply: Layout ===== */
  /* Sidebar title stays on top, then the form, then the requirements — so the
     user isn't scrolling past the whole requirement list on every step.
     .apply-sidebar is flattened with display:contents; its white panel and
     side padding are re-applied to its children below. */
  .apply-layout {
    display: flex;
    flex-direction: column;
  }

  .apply-sidebar {
    display: contents;
  }

  .apply-sidebar > * {
    order: 3;
    background: var(--section-bg);
    padding-left: 32px;
    padding-right: 32px;
    margin-bottom: 0;
  }

  .apply-sidebar > .apply-sidebar-title {
    order: 1;
    padding-top: 28px;
    padding-bottom: 18px;
    margin-bottom: 0;
  }

  .apply-sidebar > .sidebar-section {
    padding-top: 24px;
  }

  .apply-sidebar > *:last-child {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
  }

  .apply-main {
    order: 2;
    padding: 32px;
  }
}


/* ==========================================================================
   RESPONSIVE — SMALL DESKTOP / TABLET (max-width: 900px)
   ========================================================================== */
@media (max-width: 900px) {

  /* ===== Services =====
     Still the horizontal 3-column row, but the columns get tight at this width,
     so the type and gaps come down a notch before the 768px stack takes over. */
  .service-card-body {
    padding: 18px 22px;
    gap: 10px 18px;
  }

  .service-card h3 {
    font-size: 26px;
  }

  .service-card li {
    font-size: 20px;
  }
}


/* ==========================================================================
   RESPONSIVE — TABLET / SMALL (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {

  /* ===== Services =====
     The desktop card is horizontal (image left, then a 3-column row of
     heading / amount / Apply — see .service-card in styles.css). Below this
     width there isn't room for that, so the card goes back to a vertical
     image-on-top poster with everything centered in one column. */
  .service-card {
    flex-direction: column;
    min-height: 0;
  }

  .service-card-cover {
    width: 100%;
    height: 190px;
  }

  .service-card-body {
    padding: 24px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 14px;
  }

  .service-card h3 {
    font-size: 28px;
  }

  .service-card-sub {
    font-size: 13px;
  }

  .service-card li {
    font-size: 19px;
  }

  .service-card .btn {
    justify-self: stretch;
    text-align: center;
  }
}


/* ==========================================================================
   RESPONSIVE — MOBILE (max-width: 640px)
   ========================================================================== */
@media (max-width: 640px) {

  :root {
    --header-height: 52px;
  }

  /* ===== Global ===== */
  .container {
    padding: 0 20px;
  }

  .section {
    padding: 64px 0;
  }

  h1 { font-size: 34px; }
  h2 { font-size: 30px; }

  /* ===== Header ===== */
  .header-container {
    padding: 0 20px;
  }

  .site-brand__name {
    font-size: 12px;
  }

  .site-brand__logo {
    height: 44px;
  }

  .main-nav {
    padding: 16px 20px 20px;
  }

  /* ===== Home: Hero ===== */
  .hero-content {
    padding: 48px 20px;
  }

  .hero-text h1 {
    font-size: 34px;
  }

  .hero-stats {
    gap: 24px;
  }

  .hero-stat strong {
    font-size: 26px;
  }

  /* ===== Home: How to Apply ===== */
  .how-to-apply .container {
    padding: 0 20px;
  }

  /* ===== Services ===== */
  .service-grid {
    grid-template-columns: 1fr;
  }

  /* ===== Contact ===== */
  .join-wrap h2 {
    font-size: 32px;
  }

  .join-perks {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .join-form-card {
    padding: 24px 20px;
  }

  /* ===== Footer ===== */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 0 20px 32px;   /* match .container's mobile side padding instead of the desktop 48px */
  }

  .footer-links ul,
  .footer-contact ul {
    align-items: center;
  }

  .footer-tagline {
    margin-left: auto;
    margin-right: auto;
  }

  /* ===== Apply ===== */
  /* .apply-sidebar is display:contents at this width — pad its children instead */
  .apply-sidebar > * {
    padding-left: 20px;
    padding-right: 20px;
  }

  .apply-main {
    padding: 24px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column-reverse;
  }

  .form-actions .btn {
    width: 100%;
  }

  .step-indicator {
    max-width: 100%;
  }

  .step-label {
    font-size: 11px;
  }

  .success-actions .btn {
    width: 100%;
  }

  .review-table td:first-child {
    width: auto;
  }

  /* ===== About ===== */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .offerings-cta-actions .btn,
  .contact-cta .btn {
    width: 100%;
  }

  .contact-meta {
    flex-direction: column;
    gap: 8px;
  }

  /* Centered long-form copy is hard to read on a narrow column */
  .privacy-body {
    text-align: left;
  }
}


/* ==========================================================================
   RESPONSIVE — SMALL PHONES (max-width: 400px)

   iPhone SE (375), iPhone 14/15 (390) and small Android (360). The 640px
   block above already does the mobile layout; this only takes the padding
   and type scale down the last step so nothing overflows at 360.

   Placed after the 640px block deliberately — these blocks are ordered
   widest to narrowest so each wins over the one before it.
   ========================================================================== */
@media (max-width: 400px) {

  /* ===== Global ===== */
  .container {
    padding: 0 16px;
  }

  .section {
    padding: 48px 0;
  }

  h1 { font-size: 28px; }
  h2 { font-size: 24px; }

  .section-title {
    font-size: 26px;
  }

  /* ===== Header ===== */
  .header-container {
    padding: 0 16px;
  }

  .site-brand__logo {
    height: 38px;
  }

  .main-nav {
    padding: 12px 16px 16px;
  }

  /* ===== Home: Hero ===== */
  .hero-content {
    padding: 40px 16px;
  }

  .hero-text h1 {
    font-size: 28px;
  }

  .hero-tagline {
    font-size: 15px;
  }

  .hero-stats {
    gap: 16px;
  }

  .hero-stat strong {
    font-size: 22px;
  }

  /* Two buttons side by side get too narrow to read their labels */
  .hero-actions {
    gap: 10px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  /* ===== Home: Services ===== */
  .service-card-body {
    padding: 18px 14px;
  }

  .service-card h3 {
    font-size: 24px;
  }

  .service-card li {
    font-size: 17px;
  }

  /* ===== Home: Join Our Team ===== */
  .join-form-card {
    padding: 18px 14px;
  }

  /* ===== Footer ===== */
  .footer-grid {
    padding: 0 16px 24px;
  }

  /* ===== Apply ===== */
  /* .apply-sidebar is display:contents from 1024px down — pad its children */
  .apply-sidebar > * {
    padding-left: 16px;
    padding-right: 16px;
  }

  .apply-main {
    padding: 20px 16px;
  }

  /* Five steps across a 360px screen: the labels carry white-space:nowrap
     (styles.css:1634), which is what pushes the row past the viewport.
     Let them wrap onto a second line instead. */
  .step-indicator {
    margin-bottom: 24px;
  }

  .step-label {
    font-size: 10px;
    white-space: normal;
    line-height: 1.25;
  }
}


/* ==========================================================================
   RESPONSIVE — LARGE DESKTOP (min-width: 1440px)

   --container is 1140px (styles.css:38), which leaves a lot of empty
   canvas on a 1920 monitor. Widening the token moves the header, the
   footer grid and every .container section together.
   ========================================================================== */
@media (min-width: 1440px) {
  :root {
    --container: 1280px;
  }
}