/* Global wide-screen container and desktop layout.
 * Loaded after all visual-family styles so local legacy dimensions cannot
 * override the large-display layout. Reading-width elements keep their own
 * max-width; grids, media, cards and multi-column layouts gain extra room.
 */

/* Full-page Progesto compositions must not inherit WordPress' narrow reading
 * width from `.entry-content > *`. Sections own their internal container; the
 * outer composition stays full-width so backgrounds and grids align globally. */
.entry.page--demo > .entry-content > .wp-block-progesto-demo-section,
.entry.page--demo > .entry-content > .wp-block-progesto-bcorp-page,
.entry-content > .wp-block-progesto-bcorp-page.bcorp-page {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Every visual family, including B Corp, uses the single responsive site
 * container. This prevents local 1240/1320px caps from producing visibly
 * different page widths on desktop and ultra-wide displays. */
.page--demo .container,
.bcorp-page .container,
.editor-styles-wrapper .container {
  width: var(--container);
  max-width: none;
  margin-inline: auto;
}

/* Homepage keeps the shared section/contact scale here. The primary H1 is
 * canonical in hero-balance.css together with the internal hero titles. */
@media (min-width: 761px) {
  body.home .sec-title {
    font-size: clamp(36px, 3.4vw, 58px) !important;
    line-height: 1;
    letter-spacing: -.04em;
  }

  body.home .contact h2 {
    font-size: clamp(40px, 4.6vw, 72px) !important;
    line-height: .96;
    letter-spacing: -.045em;
  }
}

@media (min-width: 1600px) {
  :root {
    --container: min(1680px, calc(100% - 96px)) !important;
    --wide: 1680px;
  }

  .nav {
    width: min(calc(100% - 96px), 1680px);
  }
}

/* Image-led internal heroes need a responsive visual column. The legacy
 * families keep the right side fixed at 430px, which becomes too small once
 * the shared container grows on desktop and wide displays. */
@media (min-width: 1280px) {
  .page--demo .hero-layout:has(> :last-child .wp-block-image),
  .editor-styles-wrapper .hero-layout:has(.wp-block-image) {
    grid-template-columns: minmax(0, 1.35fr) minmax(520px, .85fr) !important;
    gap: clamp(48px, 4vw, 80px) !important;
    align-items: center !important;
  }

  .page--demo .hero-layout > :last-child:has(.wp-block-image),
  .editor-styles-wrapper .hero-layout :has(> .wp-block-image) {
    width: 100%;
    max-width: none !important;
  }

  .page--demo .hero-layout > :last-child .wp-block-image,
  .editor-styles-wrapper .hero-layout .wp-block-image {
    width: 100%;
    margin-inline: 0;
  }

  .page--demo .hero-layout > :last-child .wp-block-image img,
  .editor-styles-wrapper .hero-layout .wp-block-image img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
  }
}

@media (min-width: 2200px) {
  :root {
    --container: min(1920px, calc(100% - 128px)) !important;
    --wide: 1920px;
  }

  .nav {
    width: min(calc(100% - 128px), 1920px);
  }
}

/* Accessibility launcher branding.
 * The floating control is injected by a plugin, so its markup is outside the
 * theme. Keep the launcher consistently on the Progesto blue palette across
 * every template without recolouring the plugin panel itself. */
:root {
  --progesto-a11y-blue: #247fb6;
  --progesto-a11y-blue-hover: #044d76;
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle > a,
.pojo-a11y-toolbar-toggle > a,
#acsb-trigger,
.acsb-trigger,
#userwayAccessibilityIcon,
#INDmenu-btn,
.a11y-toolbar-toggle,
.aicon_link,
.accessibility-menu-toggle,
.accessibility-widget-toggle {
  background: var(--progesto-a11y-blue) !important;
  background-color: var(--progesto-a11y-blue) !important;
  border-color: var(--progesto-a11y-blue) !important;
  color: #fff !important;
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle > a:hover,
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle > a:focus-visible,
.pojo-a11y-toolbar-toggle > a:hover,
.pojo-a11y-toolbar-toggle > a:focus-visible,
#acsb-trigger:hover,
#acsb-trigger:focus-visible,
.acsb-trigger:hover,
.acsb-trigger:focus-visible,
#userwayAccessibilityIcon:hover,
#userwayAccessibilityIcon:focus-visible,
#INDmenu-btn:hover,
#INDmenu-btn:focus-visible,
.a11y-toolbar-toggle:hover,
.a11y-toolbar-toggle:focus-visible,
.aicon_link:hover,
.aicon_link:focus-visible,
.accessibility-menu-toggle:hover,
.accessibility-menu-toggle:focus-visible,
.accessibility-widget-toggle:hover,
.accessibility-widget-toggle:focus-visible {
  background: var(--progesto-a11y-blue-hover) !important;
  background-color: var(--progesto-a11y-blue-hover) !important;
  border-color: var(--progesto-a11y-blue-hover) !important;
  color: #fff !important;
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle > a :is(svg, path),
.pojo-a11y-toolbar-toggle > a :is(svg, path),
#acsb-trigger :is(svg, path),
.acsb-trigger :is(svg, path),
#INDmenu-btn :is(svg, path),
.a11y-toolbar-toggle :is(svg, path),
.aicon_link :is(svg, path),
.accessibility-menu-toggle :is(svg, path),
.accessibility-widget-toggle :is(svg, path) {
  color: #fff !important;
  fill: currentColor !important;
}

/* WP Accessibility Helper (WAH) ships its launcher colour inside a JPG.
 * Hide that bitmap and keep the actual plugin button as the branded surface. */
#wp_access_helper_container > button.wahout.aicon_link {
  position: absolute;
  overflow: hidden;
  background: var(--progesto-a11y-blue) !important;
  background-color: var(--progesto-a11y-blue) !important;
  border-color: var(--progesto-a11y-blue) !important;
  color: #fff !important;
}

#wp_access_helper_container > button.wahout.aicon_link:hover,
#wp_access_helper_container > button.wahout.aicon_link:focus-visible {
  background: var(--progesto-a11y-blue-hover) !important;
  background-color: var(--progesto-a11y-blue-hover) !important;
  border-color: var(--progesto-a11y-blue-hover) !important;
}

#wp_access_helper_container > button.wahout.aicon_link > img.aicon_image {
  opacity: 0 !important;
  visibility: hidden !important;
}

#wp_access_helper_container > button.wahout.aicon_link::before {
  content: "\267F";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}