/* WAC responsive fixes: phone/tablet menu, small-screen layout, large-screen scaling.
   Loaded on every page after wac-base.css. Selectors start with "html body" so they win
   over each page's own embedded styles. */

/* 2. Media never wider than its box; long words wrap instead of spilling out. */
html body #main img, html body #main video, html body #main iframe, html body #main svg { max-width: 100%; }
html body #main h1, html body #main h2, html body #main h3, html body #main h4, html body #main p, html body #main li, html body #main a { overflow-wrap: break-word; }

/* 3. Menu button: hidden on wide screens. */
.wac-menu-toggle, .wac-menu-actions { display: none; }

/* 4. Phones and tablets (up to 1024px): the desktop menu becomes a button + drop-down panel. */
@media (max-width: 1024px) {
  html body .header { flex-wrap: nowrap; }
  html body .header .header-inner { position: static; }
  html body .header .header-logo, html body .header .logo { flex: 0 0 auto; }
  html body .header .header-actions { margin-left: auto; flex: 0 0 auto; }
  html body .header .header-nav { display: none; }
  html body .header .wac-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 44px; height: 44px; margin-left: 0.5rem; padding: 0; border-radius: 8px; cursor: pointer;
    color: #ffffff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  }
  html body .header .header-inner > .wac-menu-toggle { margin-left: auto; }
  html body .header .wac-menu-toggle svg { width: 22px; height: 22px; display: block; }
  html body .header .wac-menu-toggle .wac-x { display: none; }
  html body .header.wac-open .wac-menu-toggle .wac-bars { display: none; }
  html body .header.wac-open .wac-menu-toggle .wac-x { display: block; }

  html body .header.wac-open { background: #0a1628 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html body .header.wac-open .header-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1001;
    padding: 0.25rem 1.25rem 1.25rem; background: #0a1628;
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
  }
  html body .header.wac-open .header-nav > a,
  html body .header.wac-open .header-nav .nav-item > a {
    display: flex; align-items: center; justify-content: space-between;
    color: #ffffff !important; opacity: 1; font-size: 1rem; font-weight: 600; line-height: 1.3;
    padding: 0.9rem 0.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  html body .header.wac-open .header-nav .nav-item { position: static; }
  html body .header.wac-open .header-nav .nav-item > a svg { display: none; }
  html body .header.wac-open .header-nav .nav-dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
    background: transparent; box-shadow: none; border-radius: 0; padding: 0.25rem 0 0.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  html body .header.wac-open .header-nav .nav-dropdown a {
    display: block; color: rgba(255, 255, 255, 0.86) !important; background: transparent !important;
    font-size: 0.95rem; font-weight: 500; padding: 0.6rem 0.25rem;
  }
  html body .header.wac-open .header-nav a:hover, html body .header.wac-open .header-nav a:focus { color: #ffffff !important; background: rgba(255, 255, 255, 0.06) !important; }
  html body .header.wac-open .header-nav .nav-item > a[href="#"] { border-bottom: 0; padding-bottom: 0.35rem; color: rgba(255, 255, 255, 0.6) !important; background: transparent !important; cursor: default; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }

  /* Home hero: fixed 600px height made the heading slide under the header when stacked. */
  html body.home .hero { height: auto; min-height: 0; padding-top: 112px; padding-bottom: 56px; }
  html body.home .hero .hero-visual { width: 100%; }
}

/* 5. Phones (up to 480px): keep the top bar to logo + main button + menu. */
@media (max-width: 480px) {
  html body .header { padding-left: 1rem; padding-right: 1rem; }
  html body .header .header-actions { gap: 0.25rem; }
  html body .header .header-actions .btn-signin { display: none; }
  html body .header .header-actions .btn-join, html body .header .header-actions .btn-demo { padding: 0.55rem 0.9rem; font-size: 0.875rem; white-space: nowrap; }
  html body .header.wac-open .header-nav .wac-menu-actions { display: block; padding-top: 0.75rem; }
  html body .header.wac-open .header-nav .wac-menu-actions a {
    display: block; text-align: center; color: #ffffff; font-weight: 600; font-size: 1rem;
    padding: 0.8rem 1rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px;
  }
}

/* 6. Home "4 Centres" cards: titles were wider than the cards at some widths. */
html body.home .pillar-title { -webkit-hyphens: auto; hyphens: auto; }
@media (min-width: 1025px) and (max-width: 1240px) {
  html body.home .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1241px) {
  html body.home .pillar-title { font-size: clamp(0.95rem, 1.25vw, 1.25rem); }
}
@media (max-width: 480px) {
  html body.home .pillar-title { font-size: clamp(1rem, 4.6vw, 1.25rem); }
}

/* 7. Impact page: large figures and chart headings on narrow columns. */
@media (min-width: 1025px) and (max-width: 1320px) {
  html body .big-stat-number { font-size: clamp(2rem, 3.3vw, 3rem); }
}
@media (max-width: 600px) {
  html body .chart-header { flex-wrap: wrap; gap: 0.5rem; }
  html body .chart-header > * { min-width: 0; }
}

/* 8. Home stats: when the last figure sits alone on a row, centre it. */
@media (max-width: 1024px) {
  html body.home .stats-container > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  html body.home .stats-container > :last-child:nth-child(3n+1) { grid-column: auto; }
  html body.home .stats-container > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 9. Intro paragraphs that the pages centre with auto margins: the base paragraph rule
      was resetting the side margins, leaving them stuck to the left of their centred headings. */
html body #main p.hero-subtitle,
html body #main p.hero-description,
html body #main p.overview-text,
html body:not(.home) #main p.section-description,
html body.page-contact #main p.page-hero-description { margin-left: auto; margin-right: auto; }

/* 11. Headings that were dark text on a dark background. */
html body.page-integrity-check #main footer h4,
html body.page-the-future-of-assessment #main footer h4 { color: #ffffff; }
html body.page-integrity-check-webapp #main .card-title { color: #f1f5f9; }

/* 12. Footer: two links that shared one line ("History Impact"). */
html body #main footer .footer-column li > a { display: block; }
html body #main footer .footer-column li > a + a { margin-top: 0.75rem; }

/* 13. Article pages: the drop cap was also applied to the photo caption. */
html body #main .article-content p.image-caption::first-letter { font-size: inherit; font-weight: inherit; color: inherit; float: none; line-height: inherit; margin: 0; }

/* 14. Tablets and small laptops (up to 1024px). */
@media (max-width: 1024px) {
  /* Focus Areas: every pillar stacks text over image (the "reverse" ones stayed side by side). */
  html body #main .pillar-header,
  html body #main .pillar-header.reverse { grid-template-columns: 1fr; gap: 2rem; }
  html body #main .pillar-header.reverse .pillar-header-content,
  html body #main .pillar-header.reverse .pillar-header-image { order: 0; }

  /* History: timeline cards use the full width instead of a 400px strip on the left. */
  html body #main .timeline-content { max-width: none; width: 100%; }

  /* Home: checklist reads as a left-aligned list, centred as a block. */
  html body.home .mission-points { display: table; margin-left: auto; margin-right: auto; text-align: left; }
  html body.home .mission-points li { justify-content: flex-start; }
  /* Home: hero video uses the full column. */
  html body.home .hero .hero-visual { max-width: none; }
  html body.home .hero .hero-video-card { max-height: none; }

  /* Leadership: portrait photos were cropped into short wide strips. */
  html body #main .leader-image { height: auto; aspect-ratio: 4 / 3; }
  html body #main .leader-image img,
  html body #main .featured-leader-image img { object-position: center 20%; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  html body.home .stats-container { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
}

/* 15. Phones and small tablets (up to 768px). */
@media (max-width: 768px) {
  /* Full-width buttons: centre the label. */
  html body #main .cta-buttons a,
  html body #main .partner-cta-actions a,
  html body #main a.btn-primary,
  html body #main a.btn-secondary,
  html body #main a.btn,
  html body #main a.btn-cta,
  html body #main a.btn-view-all { justify-content: center; text-align: center; }

  /* Footer: two columns of links instead of one long narrow column. */
  html body #main footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  html body #main footer .footer-grid > .footer-brand,
  html body #main footer .footer-grid > :first-child { grid-column: 1 / -1; }
  html body #main footer .footer-links { flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; }
  html body #main footer .footer-links a { white-space: nowrap; }

  /* Privacy / Terms: wide tables scroll sideways instead of squeezing. */
  html body #main .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html body #main .data-table th,
  html body #main .data-table td { min-width: 9.5rem; padding: 10px 12px; }
}

/* 16. Phones (up to 600px). */
@media (max-width: 600px) {
  /* Impact: region rows wrap so the name is readable. */
  html body #main .regional-stat-item { flex-wrap: wrap; gap: 0.75rem 1rem; padding: 1.25rem; }
  html body #main .regional-stat-item .regional-info { flex: 1 1 calc(100% - 70px); min-width: 0; }
  html body #main .regional-stat-item .regional-bar-container { flex: 1 1 auto; max-width: none; }
  html body #main .milestone-stats { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  html body #main .milestone-stat svg { flex: 0 0 16px; }
}

/* 17. Large screens (1600px and up): line the header up with the 1400px content column. */
@media (min-width: 1600px) {
  html body:not(.page-integrity-check-webapp) #main .header:not(:has(.header-inner)) {
    padding-left: calc((100% - 1400px) / 2);
    padding-right: calc((100% - 1400px) / 2);
  }
}

/* 18. Heading sizes on tablets and phones. The base styles set desktop heading sizes
       (42 / 36 / 30 / 22 px) on every screen. These rules have the same strength as the
       base ones, so any heading a page sizes with a more specific rule keeps the page's size. */
@media (max-width: 1024px) {
  .post-content h1 { font-size: clamp(2rem, 4.4vw, 2.625rem); }
  .post-content h2 { font-size: clamp(1.625rem, 3.6vw, 2.25rem); }
  .post-content h3 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); }
  .post-content h4 { font-size: clamp(1.0625rem, 1.9vw, 1.25rem); }
}
@media (max-width: 600px) {
  .post-content h1 { font-size: clamp(1.75rem, 8vw, 2.125rem); }
  .post-content h2 { font-size: clamp(1.5rem, 6.4vw, 1.75rem); }
  .post-content h3 { font-size: 1.25rem; }
  .post-content h4 { font-size: 1.0625rem; }
  /* Section headings that pages size at 32-40px with no phone rule. */
  html body #main h2 { font-size: clamp(1.5rem, 6.4vw, 1.75rem); }
}

/* 19. Very large screens (27-inch iMac and bigger): scale the whole page up in proportion,
       so the 1400px layout does not sit small in the middle of the screen. */
@media (min-width: 2200px) {
  html body #wrapper { zoom: 1.2; }
}
@media (min-width: 3000px) {
  html body #wrapper { zoom: 1.5; }
}

/* 20. Second pass. */

/* Privacy / Terms / Cookies: the text column may shrink below its widest table, so the
   table scrolls sideways inside the column instead of pushing the page wider. */
html body #main .main-content > * { min-width: 0; }
html body #main .main-content > .policy-content { width: 100%; }
@media (max-width: 1024px) {
  html body #main .main-content { grid-template-columns: minmax(0, 1fr); }
}

/* Impact: charts keep their drawn proportions instead of a fixed 280px height, and the
   chart heading wraps instead of squeezing the legend. */
html body #main .chart-area { height: auto; aspect-ratio: 500 / 280; max-height: 440px; }
html body #main .chart-header { flex-wrap: wrap; gap: 0.5rem 1rem; }
html body #main .chart-legend { flex-wrap: wrap; gap: 0.25rem 1rem; }
html body #main .legend-item { white-space: nowrap; }

/* Footer: bottom line wraps tidily at every width. */
html body #main footer .footer-bottom { flex-wrap: wrap; gap: 0.75rem 1.5rem; }
html body #main footer .footer-bottom p { margin-bottom: 0; text-wrap: balance; }
html body #main footer .footer-bottom .footer-links a { white-space: nowrap; }

@media (min-width: 769px) and (max-width: 1024px) {
  /* Footer on tablets: brand on its own row, the four link columns side by side. */
  html body #main footer .footer-grid:has(> .footer-column) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  html body #main footer .footer-grid:has(> .footer-column) > .footer-brand { grid-column: 1 / -1; }
  html body #main footer .footer-brand p { max-width: 36rem; }
}

@media (max-width: 1024px) {
  /* Leadership: the featured portrait was cropped to a short strip. */
  html body #main .featured-leader-image { height: auto; aspect-ratio: 4 / 3; max-height: 480px; max-width: 640px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 768px) {
  html body #main footer .footer-brand p { max-width: none; }
  /* Focus areas: numbered jump buttons centred as a stack. */
  html body #main .pillar-nav-btn { justify-content: center; }
  /* Spotlight: featured story card. */
  html body #main .featured-card .featured-content { padding: 1.5rem; }
  html body #main .featured-card .featured-image { min-height: 220px; }
  html body #main .featured-card { gap: 0; }
}

/* Home: on large screens the hero video fills its column. */
@media (min-width: 1440px) {
  html body.home .hero .hero-video-card { max-height: none; }
}

/* Large screens: on pages with a 1200px content column the header lines up with it. */
@media (min-width: 1600px) {
  html body.page-mission #main .header:not(:has(.header-inner)),
  html body.page-history #main .header:not(:has(.header-inner)),
  html body.page-spotlight #main .header:not(:has(.header-inner)),
  html body.page-impact #main .header:not(:has(.header-inner)) {
    padding-left: calc((100% - 1200px) / 2);
    padding-right: calc((100% - 1200px) / 2);
  }
}