/**
 * Assisterhood 2026 — section and layout styles.
 *
 * Design tokens live in theme.json. This file carries only what tokens cannot
 * express: the hero banner, the two-column section rhythm, and the header/footer.
 *
 * Values are taken from the measured output of assisterhood2019 (its compiled
 * theme.css plus 7.5KB of Customizer overrides), not from its stale Sass variables.
 */

/* ---------------------------------------------------------------- base --- */

body { overflow-x: hidden; }

/* Bootstrap 4's container scale, which the old theme used, reproduced so that
   section widths match the baseline screenshots at every breakpoint. */
.ah-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 15px;
}
@media (min-width: 576px)  { .ah-container { max-width: 540px; } }
@media (min-width: 768px)  { .ah-container { max-width: 720px; } }
@media (min-width: 992px)  { .ah-container { max-width: 960px; } }
@media (min-width: 1200px) { .ah-container { max-width: 1140px; } }

/* -------------------------------------------------------------- header --- */

/* Measured from the live site: bar 60px, logo SVG 165x23, links 16px/500
   uppercase with 16px 32px padding (so 64px between adjacent labels). */

.ah-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  background: var(--wp--preset--color--navy);
  min-height: 60px;
}
.ah-header .ah-header__bar { min-height: 60px; }
.ah-header a { color: #fff; }

/* The logo is the theme's SVG, so it stays crisp at any density. */
.ah-header .ah-logo { display: inline-flex; align-items: center; line-height: 0; }
.ah-header .ah-logo img { width: 165px; height: auto; display: block; }

.ah-header .wp-block-navigation {
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: normal;
}
/* Spacing comes from the link padding, as it did on the old site, not from a gap. */
.ah-header .wp-block-navigation .wp-block-navigation__container { gap: 0; }
.ah-header .wp-block-navigation .wp-block-navigation-item__content {
  padding: 16px 32px;
  white-space: nowrap;
}
/* Every item keeps symmetric padding. Zeroing it on the last one made the Contact
   hover fill look lopsided and run to the edge of the bar. */
.ah-header .wp-block-navigation a:hover { color: var(--wp--preset--color--pink); }
.ah-header .wp-block-navigation__submenu-icon { color: #fff; fill: currentColor; }


/* The caret that marks a dropdown. Always visible, always white. */
.ah-header .wp-block-navigation .wp-block-navigation__submenu-icon {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 0.4rem;
  color: #fff;
  opacity: 1;
}
.ah-header .wp-block-navigation .wp-block-navigation__submenu-icon svg {
  fill: currentColor;
  width: 0.7em;
  height: 0.7em;
  transition: transform 0.15s ease;
}
.ah-header .wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon {
  color: var(--wp--preset--color--pink);
}
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon svg {
  transform: rotate(180deg);
}

/* --------------------------------------------------- mobile menu overlay --- */

@media (max-width: 767px) {
  /* The old site opened the menu as a full-width list under the bar, left
     aligned, with each parent collapsed until tapped. Match that. */
  .ah-header .wp-block-navigation__responsive-container.is-menu-open {
    padding: 0;
    background: var(--wp--preset--color--navy);
  }
  .ah-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    padding-block-start: 60px;   /* clear the bar so the logo stays visible */
    align-items: stretch;
  }
  .ah-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    gap: 0;
    align-items: stretch;
  }
  .ah-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
    width: 100%;
    align-items: stretch;
  }
  .ah-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    padding: 1rem 1.25rem;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    font-size: 1.25rem;
  }
  /* An open parent is highlighted, and its children sit on white, as on the live site. */
  .ah-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
    background: transparent;
    color: var(--wp--preset--color--pink);
  }
  .ah-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    background: var(--wp--preset--color--navy);
    padding-block: 0;
    width: 100%;
  }
  .ah-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container a {
    color: #fff;
    padding: 0.75rem 2.5rem;
    text-transform: uppercase;
    font-size: 1rem;
  }
  .ah-header .wp-block-navigation__responsive-container-close { color: #fff; }
}

/* The fixed header overlaps the document, exactly as the old theme's did. */
.wp-site-blocks > main { padding-block-start: 60px; }

/* --------------------------------------------------------- hero banner --- */

.ah-banner {
  position: relative;
  background-color: var(--wp--preset--color--navy);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding-block: 1rem;
  min-height: 252px;
}
/* Measured on live (/the-squad/, viewport heights 600/900/1200): the banner sits
   below a 60px fixed nav - body padding-top 56px on desktop, 60px on mobile - and
   is 40vh plus its own 32px of padding on desktop, content height with a 10rem
   floor below 768px. Our header overlaps the banner instead of pushing it down,
   so the banner absorbs that offset: each height below is live's height plus the
   nav offset, which lands the headline at the same place down the document. */
@media (min-width: 576px)  { .ah-banner { min-height: 252px; } }
@media (min-width: 768px)  { .ah-banner { min-height: 408px; } }
@media (min-width: 1200px) { .ah-banner { min-height: 0; height: calc(40vh + 88px); max-height: none; } }

/* Centre the headline in the visible banner area at every size. */
.ah-banner > .wp-block-cover__inner-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ah-banner__title,
.ah-banner__title.wp-block-heading {
  color: #fff;
  text-align: center;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin: 0;
}
.ah-banner__title .ah-banner__accent {
  display: block;
  text-transform: uppercase;
  font-weight: 700;   /* measured on the live banner: the name is bold, the eyebrow is not */
  font-size: 2.25rem;
  line-height: 2.25rem;
}
/* These carry .wp-block-heading as well, to match the specificity of the base rule
   above - without it the base 1.5rem wins on specificity and the desktop banner
   eyebrow stays at 24px instead of the 40px the live site uses. */
/* Live's banner type is not monotonic - it peaks in the tablet range and comes
   back down on wide screens. Measured at 390/768/992/1440. The tight line-height
   on the eyebrow is live's too: it is what makes the two lines sit close. */
@media (min-width: 768px) {
  .ah-banner__title,
  .ah-banner__title.wp-block-heading { font-size: 4rem; line-height: 4.2rem; }
  .ah-banner__title .ah-banner__accent,
  .ah-banner__title.wp-block-heading .ah-banner__accent { font-size: 4rem; line-height: 4rem; }
}
@media (min-width: 992px) {
  .ah-banner__title .ah-banner__accent,
  .ah-banner__title.wp-block-heading .ah-banner__accent { font-size: 5rem; line-height: 5rem; }
}
@media (min-width: 1200px) {
  .ah-banner__title,
  .ah-banner__title.wp-block-heading { font-size: 2.5rem; line-height: 1.625rem; }
  .ah-banner__title .ah-banner__accent,
  .ah-banner__title.wp-block-heading .ah-banner__accent { font-size: 4rem; line-height: 6rem; }
}

/* The home banner is taller and centres its headline. */
.ah-banner--home { min-height: 14rem; }
@media (min-width: 576px)  { .ah-banner--home { min-height: 16rem; } }
@media (min-width: 768px)  { .ah-banner--home { min-height: 20rem; } }
@media (min-width: 992px)  { .ah-banner--home { min-height: 20rem; max-height: 30rem; height: 90vh; } }
@media (min-width: 1200px) { .ah-banner--home { min-height: 40rem; max-height: 50rem; height: 90vh; } }
.ah-banner--home .ah-banner__title { text-align: center; }
@media (min-width: 992px) {
  .ah-banner--home .ah-banner__title { font-size: 4rem; line-height: 4.5rem; }
  .ah-banner--home .ah-banner__title .ah-banner__accent { font-size: 8.5rem; line-height: 8.5rem; }
}

/* ------------------------------------------------------------ sections --- */

.ah-section { padding-block: 2rem; }
@media (min-width: 768px) { .ah-section { padding-block: 3rem 4rem; } }

.ah-section__title.wp-block-heading {
  text-align: center;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy);
  margin: 1rem 0;
}

/* Two-column image + text. Collapses to one column below 768px, matching the
   old theme's col-md-6 behaviour. */
.ah-cols { display: grid; grid-template-columns: 1fr; gap: 0; align-items: center; }
@media (min-width: 768px) { .ah-cols { grid-template-columns: 1fr 1fr; gap: 30px; } }

.ah-cols__media img { width: 100%; height: auto; display: block; padding: 2rem; margin-inline: auto; }
@media (min-width: 768px) { .ah-cols__media { padding-block: 2rem; } }

.ah-cols__copy { padding: 2rem 0 1rem; }
.ah-cols__copy > :last-child { margin-bottom: 0; }
.ah-cols__copy :is(h2, h3) { color: var(--wp--preset--color--blue); font-weight: 700; margin-bottom: 0; }

/* Image on the right at desktop; stays first on mobile so the reading order
   still makes sense. */
@media (min-width: 768px) {
  .ah-cols--media-right .ah-cols__media { order: 2; }
  .ah-cols--media-right .ah-cols__copy  { order: 1; }
  .ah-cols--media-left  .ah-cols__media { order: 1; }
  .ah-cols--media-left  .ah-cols__copy  { order: 2; }
}

.ah-cols__cta { margin-top: 2rem; }

/* Full-width rich text section. */
.ah-prose > :last-child { margin-bottom: 0; }
.ah-prose ul, .ah-prose ol { padding-inline-start: 1.25rem; }

/* ------------------------------------------------------------- footer --- */

.ah-footer {
  background: var(--wp--preset--color--pink);
  color: #fff;
  padding-block: 2rem;
}
.ah-footer a { color: #fff; }
.ah-footer .ah-footer__ack {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}
.ah-footer .wp-block-social-links { gap: 0.5rem; }
/* "Also in the UK / Australia" link to the other country's site. */
.ah-footer .ah-footer__sister {
  font-size: 0.875rem;
  line-height: 1.6;
  margin: -1rem 0 1.5rem;
}
.ah-footer .ah-footer__sister:last-child { margin-bottom: 0; }
.ah-footer .ah-footer__sister a { text-decoration: underline; text-underline-offset: 0.15em; }

/* -------------------------------------------------------- accessibility --- */

.ah-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: #fff;
  color: var(--wp--preset--color--navy);
  padding: 0.75rem 1rem;
}
.ah-skip-link:focus { left: 0; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------- home video banner --- */

/* Reproduces the old homepage hero: a muted YouTube video behind, the brand
   gradient laid over it, and the navy ground beneath as the fallback.

   One wrapper holds both layers. The content is in normal flow and sets the
   height, as live's does - 754px on any desktop, 737px on a phone - and the media
   layer fills whatever that is from behind. (It used to be two siblings, the
   video sized to the viewport and the copy pulled up over it by a negative
   margin read from a custom property the copy could not see, so on phones the
   copy used a 384px fallback against a 224px video and started 160px above the
   top of the page.) */
.ah-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;   /* a Group block: theme.json would otherwise pad it 16px */
  background-color: var(--wp--preset--color--navy);
}
.ah-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  container-type: size;
}
.ah-hero__content {
  position: relative;
  z-index: 1;
  margin-block: 0;   /* second child of a flow layout, which would add 1rem above */
  text-align: center;
}
.ah-hero__content,
.ah-hero__content :is(h1, h2, h3, p, li) { color: #e1e4e8; }  /* live: light grey, not white */

.ah-banner__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ah-banner__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 16:9 cover of the hero itself (container units), not of the viewport. */
  width: max(100%, 177.78cqh);
  height: max(100%, 56.25cqw);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.ah-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--ah-overlay-opacity, 0.8);
}



/* Autoplaying motion is a real accessibility problem. If the viewer has asked
   for less of it, drop the video and keep the gradient, which is what the
   overlay already shows. */
@media (prefers-reduced-motion: reduce) {
  .ah-banner__video { display: none; }
  .ah-banner__overlay { opacity: 1; }
}

/* Visible marker where a form has not been rebuilt yet. Deliberately obvious:
   a missing form should never look like finished work. */
.ah-form-placeholder {
  border: 2px dashed var(--wp--preset--color--pink);
  background: var(--wp--preset--color--blush);
  padding: 1rem 1.25rem;
  border-radius: 3px;
}

/* Footer logo: the same SVG the live site uses, 150x21, linked home. */
.ah-footer__logo { display: inline-flex; align-items: center; line-height: 0; }
.ah-footer__logo img { width: 150px; height: auto; display: block; }
.ah-footer .ah-footer__top { margin-block-end: 2rem; }

/* ---------------------------------------------- header sizing corrections --- */

/* theme.json gives every core/group 2rem of vertical padding; the header bar
   must not inherit it, or the bar grows from 60px to 92px. */
.ah-header .wp-block-group { padding-block: 0; }

/* The submenu parents are <button> elements once openSubmenusOnClick is set, and
   pick up a heavier default weight. Live is 500. */
.ah-header .wp-block-navigation .wp-block-navigation-item__content,
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle,
.ah-header .wp-block-navigation button { font-weight: 500; }

/* --------------------------------------- person cards (squad and mentors) --- */

/* Measured from the live Squad page: name 40px Anton uppercase in link blue,
   role 20px weight 500, body paragraphs 1rem with a 1rem gap. */
.ah-cols__copy :is(h2, h3),
.ah-cols__copy :is(h2, h3).wp-block-heading {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--wp--preset--color--blue);
  margin-block: 0;
  text-transform: uppercase;
}
.ah-cols__copy h5,
.ah-cols__copy h5.wp-block-heading {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 500;
  margin-block: 0 0.5rem;
}
.ah-cols__copy p { margin-block-end: 1rem; }
.ah-cols__copy p:last-child { margin-block-end: 0; }

/* ------------------------------------------------------- in-page sub-nav --- */

/* Sticky section nav for long listing pages (Squad, and later the mentor
   chapters). Sits just under the fixed site header, centred. */
.ah-subnav {
  position: sticky;
  top: 60px;
  z-index: 900;
  background: var(--wp--preset--color--navy);
  border-block-end: 1px solid rgba(255, 255, 255, 0.15);
}
.ah-subnav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ah-subnav__list a {
  display: block;
  padding: 0.75rem 1.25rem;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.ah-subnav__list a:hover,
.ah-subnav__list a:focus-visible { color: var(--wp--preset--color--pink); }

@media (max-width: 767px) {
  /* Scroll the row sideways rather than wrapping to three cramped lines. The
     container padding is dropped so the first and last chips are not clipped,
     and justify-content must be start or the scroll start is unreachable. */
  .ah-subnav .ah-container { padding-inline: 0; max-width: none; }
  .ah-subnav__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 0.5rem;
  }
  .ah-subnav__list::-webkit-scrollbar { display: none; }
  .ah-subnav__list li { flex: 0 0 auto; }
  .ah-subnav__list a { padding: 0.75rem 1rem; font-size: 0.875rem; }
}

/* Anchored sections must clear the fixed header and the sticky sub-nav when
   jumped to, or the heading hides behind them. */
.ah-section[id] { scroll-margin-top: 110px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* An empty media cell keeps a text-only row aligned with the image rows. It must
   not reserve vertical space of its own. */
.ah-cols__media--empty { padding: 0; min-height: 0; }
@media (max-width: 767px) { .ah-cols__media--empty { display: none; } }

/* ------------------------------------------------------------- polish --- */

/* The navigation submenu toggles are <button> elements and were picking up the
   pink button styling from theme.json. They are navigation, not buttons. */
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle,
.ah-header .wp-block-navigation button.wp-block-navigation-item__content {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
}
.ah-header .wp-block-navigation .wp-block-navigation__responsive-container-open,
.ah-header .wp-block-navigation .wp-block-navigation__responsive-container-close {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
  padding: 0;
}
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle:hover {
  background: transparent;
  color: var(--wp--preset--color--pink);
}

/* No white band between the last section and the footer: the site wrapper's
   default block gap was letting the body background show through. */
.wp-site-blocks { gap: 0; }
.wp-site-blocks > main { margin-block: 0; }
.ah-footer { margin-block-start: 0; }

/* The template-part wrappers are direct children of .wp-site-blocks and pick up
   the editor's default top margin, which showed as a white band above the
   footer. Sections carry their own padding, so no stack margin is wanted here. */
.wp-site-blocks > * { margin-block-start: 0; }

/* -------------------------------------------------------------- buttons --- */

.wp-block-button__link,
.wp-element-button {
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Anything still carrying the old Bootstrap classes should at least look right. */
a.btn, a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--wp--preset--color--pink);
  color: #fff;
  padding: 0.6rem 3rem;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
a.btn:hover, a.btn-primary:hover { background: var(--wp--preset--color--navy); color: #fff; }



/* ----------------------------------------------------------- FAQ details --- */

/* Measured against the live accordion: question 24px Anton at 700, each closed
   item 57px tall. */
.wp-block-details {
  border-block-end: 1px solid rgba(0, 0, 71, 0.12);
  padding-block: 0;
}
.wp-block-details > summary {
  display: flex;
  align-items: center;      /* vertically centre the marker against the question */
  gap: 0.75rem;
  list-style: none;
  cursor: pointer;
  padding-block: 10px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--wp--preset--color--navy);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::marker { content: ""; }
.wp-block-details > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background: var(--wp--preset--color--blue);
  transition: transform 0.15s ease;
}
.wp-block-details[open] > summary::before { transform: rotate(45deg); }
.wp-block-details > summary:hover { color: var(--wp--preset--color--blue); }
.wp-block-details > :not(summary) { padding-inline-start: 1.75rem; padding-block-end: 1rem; }

/* ------------------------------------------- sections on a background image --- */

/* Sections that carry a background image were designed for light text, and their
   copy keeps the inline white colours the old site used. Make headings and plain
   text match so nothing disappears against the gradient. */


/* ------------------------------------------------- Elementor column rows --- */

/* Rows carried over from Elementor. The columns keep their original percentage
   widths on desktop and stack on mobile, as they did before. Elementor puts no gap
   between columns - each column pads itself by the section's gap setting, which
   the converter writes inline - so a flex gap here would double it. */
.ah-elcols { gap: 0; margin-block: 0; align-items: flex-start; }
.ah-elcols > .wp-block-column { min-width: 0; }
@media (max-width: 781px) {
  .ah-elcols > .wp-block-column:empty { display: none; }
}

/* Elementor's vertical rhythm, measured on the live homepage: widgets sit 20px
   apart and the last in a column has none; inside a text widget paragraphs keep
   their own 16px, including the last one. Headings are set solid (line-height 1):
   72px type in a 72px line, where the theme default of 1.2 added 14px per line. */
.ah-section--elementor :is(.ah-container, .ah-elcols > .wp-block-column) > * { margin-block: 0 20px; }
.ah-section--elementor :is(.ah-container, .ah-elcols > .wp-block-column) > :last-child { margin-block-end: 0; }
.ah-section--elementor .ah-el-text > * { margin-block: 0 16px; }
/* The text wrapper is a Group block, and theme.json pads every Group 16px top and
   bottom - which added 32px to every text widget on the homepage. */
.ah-section--elementor .ah-el-text { padding-block: 0; display: flow-root; }
/* A toggle widget's questions sit edge to edge, as on live (57px pitch). */
.ah-section--elementor .ah-el-toggle { padding-block: 0; display: flow-root; }
.ah-section--elementor .ah-el-toggle > .wp-block-details { margin-block: 0; }
/* flow-root keeps the last paragraph's 16px inside the widget. Without it that
   margin collapses into the 20px widget gap (20, not 36), as it cannot on live,
   where each Elementor widget is a flex item - 16px short per text widget. */
.ah-section--elementor .ah-container { padding-inline: 0; }

/* Elementor's heading-widget defaults on this site: bold, set solid. An explicit
   weight or line-height in the widget is written inline and still wins. Headings
   that sat inside a text widget keep the theme's line-height (live FAQ: 48/57.6)
   but are bold too. */
.ah-section--elementor .ah-el-heading { line-height: 1; font-weight: 700; }
.ah-section--elementor .ah-el-text :is(h1, h2, h3, h4) { font-weight: 700; }

/* Elementor's button widget: 12px by 24px and a solid 16px line - smaller than
   the theme's button. Only for button widgets (.ah-cols__cta); a button that was
   written into a text widget's HTML is a site button and keeps the theme style. */
.ah-section--elementor .ah-cols__cta .wp-block-button__link { padding: 12px 24px; line-height: 1; border: 0; }
/* Live: every button is letter-spaced 1.2px; site buttons carry a 1px border in
   their own pink (49px tall), Elementor button widgets have none (40px). */

/* Per-device values from Elementor (tablet up to 1024px, mobile up to 767px) are
   in blocks-generated.css, as classes written by scripts/normalize-blocks.mjs. */
@media (min-width: 1025px) { .ah-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .ah-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .ah-hide-mobile { display: none !important; } }

/* A section whose content width came from Elementor centres within the container. */
.ah-section .ah-container[style*="max-width"] { margin-inline: auto; }

/* --------------------------------------------------- nav hover treatment --- */

/* Pink fill on hover and while a dropdown is open, for both the top-level items
   and the items inside a dropdown. */
.ah-header .wp-block-navigation .wp-block-navigation-item__content,
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
  transition: background-color 0.12s ease, color 0.12s ease;
}
/* Measured from the live site: blush fill with navy text, and the current page
   keeps that state rather than only showing it on hover. */
.ah-header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.ah-header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle,
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"],
.ah-header .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  background: var(--wp--preset--color--blush);
  color: var(--wp--preset--color--navy);
}
.ah-header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon {
  color: var(--wp--preset--color--navy);
}
.ah-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover,
.ah-header .wp-block-navigation .wp-block-navigation__submenu-container a:focus-visible {
  background: var(--wp--preset--color--blush);
  color: var(--wp--preset--color--navy);
}

/* ---------------------------------------------------- banner breathing room --- */

/* The fixed header sits over the banner, so the top padding clears it and then
   positions the headline. The asymmetry is deliberate: live's headline is not
   centred in its banner (124px above, 146px below on desktop), and these values
   reproduce that once the nav offset is included. */
.ah-banner { padding-block-start: 60px; padding-block-end: 4px; }
@media (min-width: 768px) {
  .ah-banner { padding-block-start: 56px; padding-block-end: 22px; }
}

/* ------------------------------------------------- mentor / squad listing --- */

/* Cards come from the plugin, so they reuse the section and column classes the
   rest of the site uses rather than inventing a second layout language. A card is
   NOT a section though: measured against live, the band is 16px top and bottom and
   the headshot fills its column edge to edge at 540px. */
.ah-card { padding-block: 16px !important; }
.ah-card .ah-cols { gap: 30px; }
.ah-card .ah-cols__media { padding: 0; }
.ah-card .ah-cols__media img {
  width: 100%;
  height: auto;
  display: block;
  padding: 0;
  box-sizing: border-box;
}
.ah-card .ah-cols__copy { padding-block: 0; }
.ah-card .ah-cols__copy :is(h2, h3) { margin-block-end: 0; }
.ah-card__location { font-size: 0.6em; }
.ah-listing--empty { padding: 2rem; text-align: center; color: var(--wp--preset--color--body); }

/* Profile Q&A. Half-width alternating columns, matching live - but with an empty
   cell rather than the old theme's <img src="">. */
.ah-qa__item { margin-block-end: 2rem; }
.ah-qa__item:last-child { margin-block-end: 0; }
.ah-qa__item h3 {
  color: var(--wp--preset--color--blue);
  font-weight: 700;
  font-size: 2.5rem;      /* 40px, measured from live */
  line-height: 1.2;
  margin-block-end: 0.5rem;
}

/* Headshots fill their column: the old theme padded the image inside a
   content-box, which pushed a 540px column out to 604px. */
.ah-section .ah-cols__media img { padding: 0; width: 100%; height: auto; display: block; box-sizing: border-box; }

/* The caret belongs to its label, so keep it tight against the text rather than
   pushed out by the item's horizontal padding. */
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.ah-header .wp-block-navigation .wp-block-navigation__submenu-icon {
  margin-inline-start: 0.25rem;
  margin-inline-end: 0;
  padding: 0;
}

/* The hover fill should span the full height of the bar, as it does on the live
   site, rather than floating as a short block inside it. */
.ah-header .wp-block-navigation .wp-block-navigation-item,
.ah-header .wp-block-navigation .wp-block-navigation-item__content,
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
  align-self: stretch;
}
.ah-header .wp-block-navigation .wp-block-navigation-item__content,
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  padding-block: 0;
}

/* ----------------------------------------------------------------- forms --- */

.ah-form { max-width: 40rem; }
.ah-form__field { margin-block-end: 1.5rem; }
.ah-form__field label {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.125rem;
  color: var(--wp--preset--color--navy);
  margin-block-end: 0.4rem;
}
.ah-form__req { color: var(--wp--preset--color--pink); }
.ah-form__field input[type="text"],
.ah-form__field input[type="email"],
.ah-form__field select,
.ah-form__field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--wp--preset--color--navy);
  border-radius: 3px;
  background: #fff;
  color: var(--wp--preset--color--body);
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  line-height: 1.5;
}
.ah-form__field textarea { resize: vertical; min-height: 8rem; }
.ah-form__field input:focus-visible,
.ah-form__field select:focus-visible,
.ah-form__field textarea:focus-visible {
  outline: 3px solid var(--wp--preset--color--blue);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--blue);
}
.ah-form__field--check label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--wp--preset--color--body);
}
.ah-form__field--check input { margin-block-start: 0.2rem; }
.ah-form__hint {
  display: block;
  margin-block-start: 0.4rem;
  font-size: 0.875rem;
  color: var(--wp--preset--color--body);
}

/* A route that only shows guidance rather than fields. */
.ah-form__notice {
  background: var(--wp--preset--color--blush);
  border-radius: 3px;
  padding: 1.25rem 1.5rem;
  margin-block-end: 1.5rem;
}
.ah-form__notice p { margin-block: 0 1rem; }
.ah-form__notice p:last-child { margin-block-end: 0; }

.ah-form__flash {
  border-radius: 3px;
  padding: 1rem 1.25rem;
  margin-block-end: 1.5rem;
}
.ah-form__flash--ok { background: var(--wp--preset--color--blush); }
.ah-form__flash--error { background: #ffe8ef; border: 2px solid var(--wp--preset--color--pink); }
.ah-form__flash p { margin: 0; }

.ah-form__actions { margin-block-start: 2rem; }
.ah-form__actions button { border: 0; cursor: pointer; }

/* The honeypot must be unreachable for people but present for bots. */
.ah-form__trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* The "Stay in the know" band: Elementor paints a colour BEHIND its background
   image, which shows through the image's transparent areas. */
.ah-section--image { background-color: #fcffe7; }

/* Text colour is NOT forced here. A section over a light gradient (the homepage)
   keeps navy, and one over a dark gradient (the FAQ "Connect with us") carries its
   own inline light colours from the old content. Forcing white broke the first. */
.ah-section--light :is(h1, h2, h3, h4, h5, h6),
.ah-section--light p,
.ah-section--light li { color: #e1e4e8; }
.ah-section--light a:where(:not(.wp-element-button)) { color: #fff; text-decoration: underline; }

/* In the mobile overlay WordPress renders every submenu expanded. Live keeps them
   collapsed until the parent is tapped, which is also what the caret implies. */
@media (max-width: 767px) {
  .ah-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    display: none;
  }
  /* The toggle is not the submenu's previous sibling - the caret span sits
     between them - so match on the parent item instead. */
  .ah-header .wp-block-navigation__responsive-container.is-menu-open
    li:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"])
    > .wp-block-navigation__submenu-container {
    display: block;
  }
}

/* Consecutive sections must butt up against each other: the editor's default
   stack margin was letting the page background show as white strips between
   the homepage's grey bands. */
.wp-block-post-content > *,
main > .wp-block-post-content > * { margin-block: 0; }
.ah-section + .ah-section,
.ah-section + .ah-card,
.ah-card + .ah-card,
.ah-card + .ah-section { margin-block-start: 0; }





/* Elementor-derived sections bring their own padding and margin from the original
   design, so the theme's section rhythm must not add to it. */
.ah-section--elementor { padding-block: 0; }




/* The caret is white on navy, so on the blush hover fill it has to flip to navy
   or it disappears exactly when the item is active. */
.ah-header .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon,
.ah-header .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon svg,
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon,
.ah-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon svg {
  color: var(--wp--preset--color--navy);
  fill: currentColor;
}


/* The label is a <span> inside the <a> with its own colour, so hovering the link
   alone left white text on the blush fill. Both have to change. Hover text is
   blue, matching the site's link colour. */
.ah-header .wp-block-navigation .wp-block-navigation__submenu-container li:hover > a,
.ah-header .wp-block-navigation .wp-block-navigation__submenu-container li:hover > a .wp-block-navigation-item__label,
.ah-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover,
.ah-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover .wp-block-navigation-item__label,
.ah-header .wp-block-navigation .wp-block-navigation__submenu-container a:focus-visible,
.ah-header .wp-block-navigation .wp-block-navigation__submenu-container a:focus-visible .wp-block-navigation-item__label {
  background: var(--wp--preset--color--blush);
  color: var(--wp--preset--color--blue) !important;
}

/* The submenu list inherited the top bar's flex gap, which spread the items out. */
.ah-header .wp-block-navigation .wp-block-navigation__submenu-container {
  gap: 0;
  padding-block: 0.25rem;
}
.ah-header .wp-block-navigation .wp-block-navigation__submenu-container li {
  margin: 0;
}

/* ===================================================================== */
/* Dropdown menus - one block, deliberately. These rules were previously  */
/* spread over several passes and were overriding each other.            */
/* ===================================================================== */

.ah-header .wp-block-navigation .wp-block-navigation__submenu-container {
  /* Aligned to the left edge of the parent item, not centred under it. */
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 16rem;
  min-width: 16rem;
  background: var(--wp--preset--color--navy);
  border: 0;
  border-radius: 0;
  gap: 0;
  overflow: hidden;      /* nothing can protrude past the panel */
}

.ah-header .wp-block-navigation .wp-block-navigation__submenu-container li {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

.ah-header .wp-block-navigation .wp-block-navigation__submenu-container li > a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem !important;
  min-height: 0 !important;
  text-align: center;    /* centred, matching the labels in the bar */
  text-transform: uppercase;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #fff;
  background: transparent;
  transition: none;      /* the bar's transition read as an odd animation here */
}

.ah-header .wp-block-navigation .wp-block-navigation__submenu-container li > a .wp-block-navigation-item__label {
  color: inherit;
}

.ah-header .wp-block-navigation .wp-block-navigation__submenu-container li > a:hover,
.ah-header .wp-block-navigation .wp-block-navigation__submenu-container li > a:focus-visible {
  background: var(--wp--preset--color--blush);
  color: var(--wp--preset--color--blue);
}

/* A person's or sponsor's role line. Was an <h5> directly after an <h3>, which
   skipped a heading level on every card; it is a subtitle, not a section heading.
   Styled exactly as the h5 was, so nothing moves. */
.ah-role {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--wp--preset--color--navy);
  margin-block: 0 0.5rem;
}
.ah-cols__copy .ah-role { margin-block: 0 0.5rem; }

/* ------------------------------------------------------------------- 404 ---

   The 404 page is shorter than the viewport, so without this the footer floats
   partway up with blank page beneath it. Make the page column at least a screen
   tall and let the message take the slack, which also centres it. The top
   padding clears the fixed header, as the banner does on every other page. */
body.error404 .wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.admin-bar.error404 .wp-site-blocks { min-height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar.error404 .wp-site-blocks { min-height: calc(100vh - 46px); }
}
body.error404 .wp-site-blocks > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block-start: calc(60px + 2rem);
  padding-block-end: 2rem;
}
body.error404 .wp-site-blocks > div:last-child { flex: 0 0 auto; }