/* WAC responsive fixes. Loaded on every page by mu-plugins/wac-responsive.php.
   Selectors start with "html body" so they win over each page's own embedded styles. */

/* 1. Home page: Avada's container added side gutters around the custom sections.
      Let the sections span the full window at every width. */
html body.home #main { padding-left: 0 !important; padding-right: 0 !important; }
html body.home #main > .fusion-row { max-width: none !important; }
html body.home #content .fusion-fullwidth { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
html body.home #content .fusion-fullwidth > .fusion-builder-row { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
html body.home #content .fusion-builder-row > .fusion-layout-column { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
html body.home #content .fusion-layout-column > .fusion-column-wrapper { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* 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) and (max-width: 1560px) {
  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 theme's 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-id-3427 #main p.page-hero-description { margin-left: auto; margin-right: auto; }

/* 10. Remove the 20px white strip that showed under the footer. */
html body.page #content .fusion-fullwidth .fusion-layout-column { margin-bottom: 0 !important; }

/* 11. Headings that were dark text on a dark background. */
html body.page-id-3419 #main footer h4,
html body.page-id-3510 #main footer h4 { color: #ffffff; }
html body.page-id-3488 #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: inline-block; 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-id-3488) #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 theme forces its desktop heading sizes
       (42 / 36 / 30 / 22 px) on every screen. These rules have the same strength as the
       theme's, so any heading a page sizes with a more specific rule keeps the page's size.
       (wac-responsive.js releases the theme's "responsive typography" lock that would
       otherwise override them.) */
@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); }
}