/* Shared components: header, footer, buttons, section shell.
   Lengths are the live site's measured design pixels / 16 (see tokens.css). */

/* ------------------------------------------------------------------ layout */

.section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* A full-bleed image or video sitting behind a section's content. */
.section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section__bg img,
.section__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;              /* 9 */
  padding: 0.9375rem 3.75rem;  /* 15 / 60 */
  font-size: var(--fs-sm);
  line-height: var(--lh);
  border-radius: var(--radius);
  text-align: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: translateY(1px); }

.btn--light { background: var(--paper); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--lime {
  padding: 0.9375rem 1.875rem;  /* 15 / 30 */
  font-size: var(--fs-cta);
  text-transform: uppercase;
  background: var(--lime);
  color: var(--ink);
}
.btn--lime svg { width: 2.375rem; height: 2.375rem; flex: none; }

/* The one place --ab-indigo is used outside .ab. The header points at the agentic AI
   side of the company, so it wears that side's colour; see CLAUDE.md. */
.btn--ab {
  padding: 0.75rem 1.5rem;      /* 12 / 24 */
  font-size: var(--fs-cta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ab-indigo);
  color: var(--paper);
}
/* The mark is a white rounded tile in its own artwork, which is how the brand sets it. */
.btn--ab img { width: 2rem; height: 2rem; flex: none; }
/* Inside the mobile panel `.site-nav a` is more specific than `.btn` and was taking the
   button's gap and padding with it, closing the mark up against the words. */
.site-nav__cta .btn { gap: 0.5625rem; padding: 0.75rem 1.5rem; border-bottom: 0; }

/* WhatsApp, fixed bottom-right on every page. Below the mobile nav panel (z 40) so an
   open menu covers it, and below the header. */
.wa-fab {
  position: fixed;
  right: 1.75rem;
  bottom: 1.75rem;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.25rem;                               /* 84 */
  height: 5.25rem;
  color: #fff;
  background: #25d366;                          /* WhatsApp's own green */
  border-radius: 50%;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 26%);
  transition: transform 0.18s ease;
}
.wa-fab svg { width: 3rem; height: 3rem; }
.wa-fab:hover { transform: scale(1.06); }
/* The ring pulses, not the button: animating the button would move the tap target. */
.wa-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #25d366;
  border-radius: 50%;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
  0%        { transform: scale(1);   opacity: 0.5; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab::before { animation: none; }
}

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

   The two states every form on the site can reach, wherever it lives. They were
   in pages/home.css, which meant a successful submission on /cert-pathways-1-1
   or /contact replaced the form with an unstyled paragraph, `nav.js` writes
   `.form-sent` into every form it submits, not just the home page's.

   The fields themselves stay per-page: the home form's inputs are pill-shaped
   with a warm brown border and the others are not, and that is a real design
   difference rather than drift. Only what is genuinely shared moved. */

.form-error { margin-bottom: 0.75rem; color: #df3131; font-size: 0.875rem; }
/* Replaces the whole form once a message is away, so it has to hold the space a form
   was holding rather than read as a stray sentence. */
.form-sent {
  /* The forms it replaces are two-column grids, so without this it lands in column one
     and the confirmation comes out half the width of the thing it replaced. */
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3.5rem 2rem;
  text-align: center;
  background: #fff;
  border: 1px solid #e6e3df;
  border-radius: 0.5rem;
}
/* A filled disc with the tick knocked out of it, drawn rather than shipped: no request,
   nothing to 404. Masking a lime background gave a lime tick on nothing, which read as
   an afterthought. */
.form-sent::before {
  content: '';
  width: 3.25rem;
  height: 3.25rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23aaff00'/%3E%3Cpath d='m6.5 12.4 3.6 3.6 7.4-7.6' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.form-sent b { display: block; font-size: var(--fs-item); font-weight: 400; }
.form-sent span { display: block; max-width: 34rem; font-size: var(--fs-sm); color: #5c5c5c; }

/* ---------------------------------------------------------------- pathways
   Shared by the home page and /cert-pathways, which render the identical
   certification-pathway block. */

.pathways {
  min-height: 139.9375rem;         /* 2239 */
  padding: 6.6875rem var(--gutter) 0;
  background: var(--paper);
  text-align: center;
}
/* Decorative gradient artwork, bleeding past the section and clipped by it. */
.pathways__art {
  position: absolute;
  top: 19.5rem;                    /* 1715 - 1403 */
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}
.pathways__art img { width: 100%; height: auto; }

.pathways__title {
  max-width: 64rem;                /* 1024 */
  margin-inline: auto;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}
.pathways__lead {
  max-width: 80.3125rem;           /* 1285 */
  margin: 2.125rem auto 0;       /* 34 */
}

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(3, 19.0625rem);   /* 305 */
  justify-content: center;
  gap: 9.5625rem;                  /* 153 */
  margin-top: 4.8125rem;           /* 77 */
}
.pathway { display: flex; flex-direction: column; }

.pathway__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  min-height: 27.125rem;           /* 434 */
  padding: 2rem 1.5rem;
  background: var(--paper);
  border: 1px solid #e6e3df;
  border-radius: 0.375rem;
}
.pathway__head img { width: 9.5rem; height: auto; }   /* 152 */
.pathway__name { font-size: var(--fs-item); }

/* The vertical connector between the head card and each step. */
.pathway__steps { position: relative; display: flex; flex-direction: column; }
.pathway__steps li:first-child { margin-top: 2.125rem; }  /* 34 */
.pathway__steps li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.1875rem;           /* 99 */
  margin-top: 1.3125rem;           /* 21, leaves room for the connector */
  padding: 0.75rem 1rem;
  background: var(--paper);
  border: 1px solid #e6e3df;
  border-radius: 0.375rem;
}
.pathway__steps li::before {
  content: '';
  position: absolute;
  top: -1.3125rem;
  left: 50%;
  width: 1px;
  height: 1.3125rem;
  background: #cfccc8;
}

.pathways__note { margin-top: 8.4375rem; font-size: var(--fs-sm); }  /* 135 */
.pathways__cta { margin-top: 1.375rem; }                             /* 22 */


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

/*
 * Sticky rather than fixed, and that is the whole trick: a fixed header leaves the flow, so
 * every page's content would slide up by the header's height and two pages held against the
 * Wix capture would drift. Sticky keeps the header in flow, it still occupies its 138px,
 * and only detaches once you scroll past it. Nothing moves.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding-inline: var(--gutter);
  transition: transform 0.25s ease;
}
/* Plain black. It was translucent with a blur for a while; over a light section the blur
   picked up the cream body behind it and the bar came out grey, which looked worse than
   solid. On the home page it is hidden at the top instead, see nav.js, so the weight
   never lands on the fold. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
}

/* Slides away while you scroll and back when you stop, nav.js sets the flag. The open
   burger panel hangs off the header, so it must not ride up with it. */
.site-header[data-hidden='true'] { transform: translateY(-100%); }
body[data-menu-open='true'] .site-header { transform: none; }

.site-header__logo { flex: none; width: 11.625rem; }  /* 186 */
.site-header__logo img { width: 100%; object-fit: contain; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 2.5rem;            /* 40 */
  margin-left: 10.5rem;   /* 168 */
}
.site-nav > li { position: relative; }
.site-nav a,
.site-nav .site-nav__label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-nav);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
.site-nav a:hover,
.site-nav__label:hover { color: var(--lime); }

/*
 * The underline that wipes in from the centre, borrowed from /youth-academy's nav so the
 * two feel like one site. Lime here, cyan there, that page has its own palette.
 *
 * Absolutely positioned, so it adds no height and cannot move a page held against the
 * capture. Only the top-level items: a submenu row is a list, not a tab.
 */
.site-nav > li:not(.site-nav__cta) > a::after,
.site-nav__label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.375rem;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.site-nav > li:not(.site-nav__cta) > a:hover::after,
.site-nav > li:hover > .site-nav__label::after,
.site-nav > li:not(.site-nav__cta) > a:focus-visible::after { transform: scaleX(1); }
.site-nav__label svg { width: 0.75rem; height: 0.75rem; }

/* "About" opens a small submenu; CSS-only would trap keyboard users, so nav.js
   toggles [aria-expanded] and this reacts to it. */
.site-nav__submenu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  min-width: 16rem;
  padding: 0.75rem 0;
  background: var(--ink);
  border-radius: var(--radius);
  display: none;
}
/*
 * The 0.75rem of air between the nav item and this panel is not hoverable, so moving the
 * mouse down towards the menu left the <li>, fired mouseleave, and closed it before it could
 * be reached. This spans the gap invisibly so the pointer never leaves.
 */
.site-nav__submenu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.75rem;
  height: 0.75rem;
}
.site-nav__submenu a { padding: 0.6rem 1.25rem; }
[aria-expanded='true'] + .site-nav__submenu { display: block; }
/*
 * ...and a fallback for when nav.js has not run, because [aria-expanded] is the
 * only thing that opened this and only script sets it. Without this, /cert-pathways
 * has no route in from the nav at all with JavaScript off, and the site promises
 * every page always has one.
 *
 * :focus-within is the half that answers the comment above: hover alone would
 * strand a keyboard user, and this does not.
 */
.site-nav li:hover > .site-nav__submenu,
.site-nav li:focus-within > .site-nav__submenu { display: block; }

.site-header__cta { margin-left: auto; flex: none; }

/* The burger and the in-panel CTA exist only below the desktop breakpoint;
   the header keeps its own CTA there instead. */
.nav-toggle { display: none; }
.site-nav__cta { display: none; }

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

.site-footer {
  position: relative;
  min-height: 51.375rem;                        /* 822 */
  padding-inline: 6.625rem;                     /* 106 */
  background: var(--paper);
  overflow: hidden;
}
.site-footer__bg { position: absolute; inset: 0; z-index: 0; }
.site-footer__bg video,
.site-footer__bg img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Column origins on the original: logo 106, nav 779, copy 1086, CTA ends 1760, so the two
 * gaps between them are 296 and 38 design pixels, not one shared gutter.
 *
 * They are columns rather than margins. Pushing the nav across with `margin-left: 18.5rem`
 * put 296px of margin inside a 269px cell, and the nav's text simply overflowed the cell and
 * ran underneath the paragraph in the next one. A track cannot overflow the way a margin can.
 */
.site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 23.5625rem 18.5rem 16.8125rem 2.375rem 42rem;
  padding-top: 8.6875rem;                       /* 139 */
  border-top: 1px solid rgb(0 0 0 / 18%);
}
.site-footer__logo { grid-column: 1; width: 23.5625rem; }   /* 377 */
.site-footer__nav { grid-column: 3; }

.footer-nav li { min-height: 3.4375rem; }       /* 55 */
.footer-nav a,
.footer-nav .footer-nav__label { font-size: var(--fs-sm); }
.footer-nav a:hover { opacity: 0.6; }

.site-footer__col {
  grid-column: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.site-footer__about {
  max-width: 42rem;                             /* 672 */
  font-size: var(--fs-sm);
  text-align: justify;
}
.site-footer__cta {
  margin-top: 12.9375rem;                       /* 207 */
  min-width: 12.875rem;                         /* 206 */
  height: 4.375rem;                             /* 70 */
  padding: 0 0.9375rem;
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7.4375rem;                        /* 119 */
  padding-bottom: 4.5rem;                       /* 72 */
  font-size: var(--fs-sm);
}
.social-nav { display: flex; gap: 0.78125rem; }  /* 12.5 */
.social-nav a { display: block; width: 1.875rem; height: 1.875rem; }
.social-nav svg { width: 100%; height: 100%; fill: currentColor; }
.social-nav a:hover { opacity: 0.6; }

/* ------------------------------------------------- tablet + mobile nav */

@media (max-width: 999px) {
  /* The row of seven items plus a CTA does not fit here, and never did: it used to
     overflow by 660-880px, clipped in silence. The burger owns this band now. */
  /* A stacked panel, not a tab bar, the underline reads as a stray rule here. */
  .site-nav > li > a::after, .site-nav__label::after { display: none; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3125rem;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
  }
  .nav-toggle span {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: var(--paper);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The desktop nav becomes a full-screen panel under the header. */
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 1.5rem var(--gutter) 2.5rem;
    background: var(--ink);
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s;
  }
  .site-nav[data-open='true'] { transform: none; visibility: visible; }
  .site-nav a,
  .site-nav .site-nav__label {
    padding: 1.125rem 0;
    font-size: 1.25rem;
    border-bottom: 1px solid #1f1f1f;
  }
  .site-nav__submenu { position: static; min-width: 0; padding: 0 0 0 1rem; }

  .site-header__cta { display: none; }
  .site-nav__cta { display: block; margin-top: 1.5rem; }
  body[data-menu-open='true'] { overflow: hidden; }
  .site-footer { padding-inline: var(--gutter); min-height: 0; }
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2rem;
    padding-top: 5rem;
  }
  /* Placed explicitly above; with the tracks gone those columns no longer exist. */
  .site-footer__logo,
  .site-footer__nav,
  .site-footer__col { grid-column: auto; }
  .site-footer__col { align-items: flex-start; }
  .site-footer__cta { justify-self: start; margin-top: 0; }
  .site-footer__bottom { margin-top: 3rem; padding-bottom: 3rem; }
}

@media (max-width: 749px) {
  /* Card titles keep a readable size; the mobile --fs-item is scaled for the
     step chips, not for a card heading. */
  .pathway__name { font-size: 1.125rem; }
  .pathway__steps li { min-height: 0; padding: 0.9rem 1rem; }


  .site-header__logo { width: 8.125rem; }

  .site-footer__inner { grid-template-columns: 1fr; padding: 3rem 0 2rem; }
  .site-footer__logo { width: 12rem; }
  .site-footer__about { text-align: left; }
  .site-footer__bottom { flex-direction: column; gap: 1.25rem; align-items: flex-start; }
}

/* ------------------------------------------------------------- contact call to action

   Every page carries this block and one form stands behind all of them, on /contact. It
   was four forms of four different shapes; keeping them in step by hand is what stopped
   working. The button's query says what the page was about and where it came from. */

.contact-cta__btn { margin-top: 2.5rem; }
.contact-cta__alt { margin-top: 1.5rem; font-size: var(--fs-sm); }
.contact-cta__alt a { text-decoration: underline; text-underline-offset: 0.2em; }