/* ==========================================================================
   Payday Wings — responsive.css
   Breakpoints: 1200px, 1100px (navigation only), 992px, 768px, 576px.
   Loaded last so these rules win over main/components/pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1200px — large laptop
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  :root {
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --section-padding: 88px;
  }

  .site-header__inner {
    gap: var(--space-4);
  }

  .main-nav__link {
    padding: 10px 10px;
  }

  .hero-section__inner {
    gap: var(--space-7);
  }

  .site-footer__main {
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   1100px — navigation only: switch to the mobile drawer.
   The horizontal nav needs roughly 1125px to lay out (logo + five items +
   secondary link + CTA). It is collapsed here rather than at the 992px layout
   breakpoint so it never has to overflow or crush its own spacing.
   Keep this value in sync with DRAWER_BREAKPOINT in js/navigation.js.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav-scrim {
    display: block;
  }

  .site-header__actions {
    gap: var(--space-3);
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-drawer);
    width: min(380px, 88vw);
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-left: var(--border-hairline);
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.16);
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-out-soft);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  .main-nav__head {
    display: flex;
  }

  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--space-5) var(--space-5);
  }

  .main-nav__item {
    border-bottom: var(--border-hairline);
  }

  .main-nav__link {
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: var(--space-4) var(--space-2);
    border-radius: 0;
    font-size: 1.0625rem;
  }

  .main-nav__link:hover {
    background-color: transparent;
  }

  .main-nav__link[aria-current='page']::before {
    display: none;
  }

  .main-nav__chevron {
    width: 18px;
    height: 18px;
  }

  /* In the drawer the dropdowns are click-to-expand accordions rather than
     floating menus, so they lay out in the flow. */
  .main-nav__dropdown {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 var(--space-4);
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .main-nav__dropdown::before {
    display: none;
  }

  .main-nav__item.is-open .main-nav__dropdown {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    transform: none;
  }

  .main-nav__dropdown-link {
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--color-border);
    border-radius: 0;
  }

  .main-nav__dropdown-link:hover {
    border-left-color: var(--color-brand);
  }

  .main-nav__cta {
    display: block;
    padding: var(--space-5);
    margin-top: auto;
    border-top: var(--border-hairline);
    background-color: var(--color-background);
  }
}

/* --------------------------------------------------------------------------
   992px — tablet landscape / small laptop
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
  :root {
    --fs-h1: 2.75rem;
    --fs-h2: 2rem;
    --section-padding: 80px;
  }

  /* --- Hero --- */
  .hero-section__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero-content__lead,
  .hero-disclosure {
    max-width: none;
  }

  .hero-visual {
    max-width: 560px;
  }

  .hero-section__lines {
    width: 100%;
    opacity: 0.35;
  }

  /* --- Sections --- */
  .trust-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /*
   * minmax(0, 1fr) rather than 1fr: a bare 1fr track takes its automatic
   * minimum from the item's min-content width, so a single long nowrap button
   * can push the track wider than its container.
   */
  .explorer-section__inner,
  .responsible-section__inner,
  .faq-section__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

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

  .faq-section__aside {
    position: static;
  }

  .why-section__grid,
  .resources-section__grid,
  .about-standards__grid,
  .persona-grid,
  .alternative-grid,
  .process-steps,
  .sitemap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The wing path only makes sense across a single row */
  .process-steps__path {
    display: none;
  }

  .about-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .about-hero__lead {
    max-width: none;
  }

  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

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

  .editorial-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .article-card--featured {
    flex-direction: column;
  }

  .article-card--featured .article-card__media {
    flex: none;
    border-right: none;
    border-bottom: var(--border-hairline);
  }

  .article-card--featured .article-card__media img {
    height: auto;
    max-height: 280px;
    object-fit: cover;
  }

  .article-card--featured .article-card__body {
    padding: var(--space-6);
  }

  .article-card--featured .article-card__title {
    font-size: 1.5rem;
  }

  .site-footer__main {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
    padding-block: var(--space-9) var(--space-7);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   768px — tablet portrait / large phone
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --fs-h1: 2.5rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
    --fs-body-lg: 1.0625rem;
    --section-padding: 64px;
    --container-gutter: 20px;
    --space-9: 48px;
    --space-10: 64px;
  }

  html {
    scroll-padding-top: 80px;
  }

  .site-header__inner {
    min-height: 64px;
  }

  /*
   * Full-width drawer below this point. As a 380px side panel it starts at
   * x45 on a 375px screen and cuts the page logo in half, leaving a sliver of
   * it poking out beside the panel. Full width covers the header cleanly, and
   * the drawer's own head bar carries the logo instead.
   */
  .main-nav {
    width: 100%;
    border-left: none;
  }

  /* Full-width CTAs on small screens */
  .hero-content .btn-group .btn,
  .explorer-section__actions .btn,
  .cta-section .btn-group .btn {
    width: 100%;
  }

  .hero-content .btn-group,
  .cta-section .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-trust {
    flex-direction: column;
    gap: var(--space-3);
  }

  .hero-visual__chip {
    left: 0;
    bottom: -14px;
  }

  .hero-visual__wing {
    width: 160%;
  }

  /* Horizontal journeys become vertical */
  .how-section__steps {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .how-section__path {
    display: none;
  }

  .step-card {
    padding: var(--space-5);
  }

  .amount-display__value {
    font-size: 2.75rem;
  }

  .explorer-section__panel,
  .responsible-section__panel {
    padding: var(--space-5);
  }

  .explorer-section__actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  /* Equation stacks vertically */
  .equation {
    grid-template-columns: 1fr;
    padding: var(--space-5);
    gap: var(--space-3);
  }

  .equation__operator {
    text-align: center;
  }

  .provinces-section__grid,
  .why-section__grid,
  .cost-section__grid,
  .resources-section__grid,
  .about-not__grid,
  .about-standards__grid,
  .persona-grid,
  .alternative-grid,
  .process-steps,
  .sitemap-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .about-hero {
    padding-block: var(--space-8) var(--space-9);
  }

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

  .contact-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form-card {
    padding: var(--space-5);
  }

  .about-hero .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .about-hero .btn-group .btn {
    width: 100%;
  }

  /*
   * A full Canada map cannot hold 13 readable labels at 375px — scaled to fit
   * they drop to about 5px. Pin it to a legible width and let it pan inside
   * its own scroller instead; the province cards below carry the same names
   * as real text, so nothing is lost if the map is not panned.
   */
  .province-map__canvas {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .province-map__canvas img {
    width: 560px;
    max-width: none;
  }

  .provinces-section__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .accordion__trigger {
    padding: var(--space-4) var(--space-5);
    font-size: 1rem;
  }

  .accordion__panel-inner {
    padding: 0 var(--space-5) var(--space-5);
  }

  .responsible-section__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* This CTA is long enough that nowrap would force it off a narrow screen. */
  .responsible-section__actions .btn {
    width: 100%;
    white-space: normal;
  }

  .site-footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    /* Clear the sticky CTA at the end of the page */
    padding-bottom: 88px;
  }

  /* Sticky CTA is revealed by main.js once the hero has scrolled away */
  .sticky-cta {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   576px — small phone
   -------------------------------------------------------------------------- */

@media (max-width: 576px) {
  :root {
    --fs-h1: 2.25rem;
    --section-padding: 56px;
    --container-gutter: 16px;
  }

  /* Logo + CTA + hamburger stop fitting together here. The drawer's own CTA
     and the sticky bar keep the primary action reachable. */
  .site-header__actions .btn {
    display: none;
  }

  .trust-strip__grid {
    grid-template-columns: 1fr;
  }

  /* Two columns leaves ~65px for the name once the abbr chip is placed, which
     shreds "Newfoundland and Labrador" across four lines. */
  .about-provinces__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .trust-item {
    padding: var(--space-4);
  }

  .hero-visual__panel {
    padding: var(--space-4);
  }

  .hero-visual__chip {
    position: static;
    margin-top: var(--space-4);
    box-shadow: none;
  }

  .amount-display__value {
    font-size: 2.5rem;
  }

  .article-card--featured .article-card__title {
    font-size: 1.375rem;
  }

  .info-card,
  .summary-card {
    padding: var(--space-5);
  }

  .editorial-section__links {
    flex-direction: column;
    gap: var(--space-3);
  }

  .faq-link-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__disclosure {
    padding: var(--space-5);
  }

  .cost-table th,
  .cost-table td {
    padding: var(--space-3) var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .sticky-cta,
  .nav-scrim,
  .cta-section {
    display: none;
  }

  body {
    color: #000;
  }

  .accordion__panel {
    height: auto !important;
  }
}