/* Deliberate deviations from the ported theme CSS — genuine fixes, not fidelity.
   Everything here is additive and last in the cascade, so the ported stylesheets stay
   verbatim and diffable against the WordPress theme. Each rule says why it exists. */

/* --------------------------------------------------------------------------
   Mobile menu: hide the logo while the panel is open.

   navigation.css:33-37 gives .header__logo z-index:1001, and the .nav panel
   (navigation.css:198-212) sets no z-index at all — so the logo paints above the open
   menu. At <=480px the panel is max-width:100% (navigation.css:273-276), which puts the
   logo directly on top of the menu content.

   The .nav-open class is added to .header by components/theme-scripts.tsx; it is not
   part of main.js.

   Faded out rather than display:none on purpose: .header__container is
   justify-content:space-between, so removing the logo from flow would shunt the close
   button across the header as the panel opens.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .header.nav-open .header__logo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--transition-normal),
      visibility var(--transition-normal);
  }
}

/* --------------------------------------------------------------------------
   ROUND 2 — small-viewport header height.

   --header-h is declared in variables.css for the 92px logo (127px total).
   Below 480px nav-inline.css drops the logo to 68px, so the header is
   17 + 68 + 17 + 1 = 103px. The breakpoint pair lives here rather than in
   variables.css because a media query there would be new structure in a
   verbatim-ported file; custom properties resolve at use time, so declaring
   it last works exactly the same.

   Keep this in step with nav-inline.css.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --header-h: 103px;
  }
}

/* --------------------------------------------------------------------------
   ROUND 2 — .section-header__tag holding a sentence.

   The client asked for the eyebrow and the headline to be transposed in four
   places, so the tag now carries a full sentence:

     /            Two Pathways   -> "Choose where to begin"
     /            Methodology    -> "ReThink. ReDefine. ReAlign."
     /coaching/   Who This Is For-> "You carry more than your title suggests."
     /coaching/   Pillars        -> "Five pillars. One philosophy."

   The base class is uppercase, 0.14em letter-spaced and small — correct for a
   label, unreadable for a sentence. This modifier drops the casing, softens
   the tracking and raises the size. The base class is untouched: it is still
   used as a label on ten other section headers.
   -------------------------------------------------------------------------- */
.section-header__tag--sentence {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   ROUND 2 (2.1) — /about/ hero: portrait left, headline right.

   The page used to render <PageHero> (centred, single column) with the
   portrait stacked in its own section beneath. It now renders one two-column
   hero; see the comment in app/about/page.tsx.

   .hero--page centres its title and subtitle (hero.css:351-359) and
   .hero__content is `margin: 0 auto` (hero.css:25-28) — both are undone here
   for the two-column case only. This file is last in the cascade, so no
   !important is needed.
   -------------------------------------------------------------------------- */
.about-hero__container {
  /* Was 0.8fr 1.2fr — the portrait read as too large next to the text. */
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: var(--space-2xl);
  align-items: start;
}

/* With The Origin folded into the right-hand box, that column runs to roughly
   1100px while the portrait is about 350px. Centring it would leave the image
   floating with dead space above and below, so it starts level with the
   headline and then tracks the box as you scroll.

   .hero sets overflow:hidden (hero.css:11), which would make the hero itself
   the scrollport and stop `sticky` sticking. `clip` clips identically without
   creating a scroll container. Safe here: overflow:hidden exists to contain
   the .hero__shape blobs, and the About hero renders none.

   Degrades cleanly — without sticky support the portrait is simply
   top-aligned, which is the layout this replaces. */
.about-hero {
  overflow: clip;
}

@media (min-width: 992px) {
  .about-hero__visual {
    position: sticky;
    top: calc(var(--header-h) + var(--space-xl));
  }
}

.about-hero__visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* The right column is a padded box holding the headline, the credentials line
   and The Origin, so the three read as one block. --bg-secondary on the hero's
   --bg-primary is a very slight step, hence the hairline border. */
.about-hero__content {
  max-width: none;
  margin: 0;
  background-color: var(--bg-secondary);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}

/* The Origin, continuing inside that box — separated by a rule rather than by
   the section padding it used to get as a standalone <section>. */
.about-hero__origin {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--light-gray);
}

/* .hero.hero--page .hero__content > *:last-child (hero.css:330) zeroes the last
   child's bottom margin. That child is now this wrapper, so re-target it. */
.about-hero__origin > *:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   ROUND 2 (2.1) — entrance animation for the About portrait.

   .reveal already animates it, but on a first load the effect that adds
   .active runs long before the page loader lifts (theme-scripts.tsx:34 hides
   the loader at window.load + 500ms, and the reveal transition is 800ms), so
   the animation has finished under the loader and the image simply appears.

   Holding the from-state while body.loading is set means the transition starts
   when the loader clears instead. No JS change and no guessed delay: body.loading
   is rendered server-side and removed by the same handler that hides the loader.

   On client-side navigation body.loading is absent, so this rule does nothing
   and the normal .reveal path animates the freshly-mounted image as usual.
   -------------------------------------------------------------------------- */
body.loading .about-hero__visual.reveal {
  opacity: 0;
  transform: translateX(-40px) scale(0.96);
}

.about-hero__visual.reveal {
  transition:
    opacity var(--transition-slower) 0.15s,
    transform var(--transition-slower) 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  /* responsive.css:200-203 flattens .reveal, but the body.loading rule above
     outranks it — so opt out explicitly. */
  body.loading .about-hero__visual.reveal {
    opacity: 1;
    transform: none;
  }
}

/* The Kaleidoscope Principle now directly follows the hero. hero.css:335-338
   gives the next section a 1rem lid, which is right for a hero that ends in a
   subtitle but far too tight now the hero carries The Origin. Restore the
   normal section rhythm so it reads as its own centred section. */
.hero.about-hero + section {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

/* --------------------------------------------------------------------------
   ROUND 2 (3.1 follow-up) — /beyond-coaching/ service cards need a lid.

   Moving the resonance line to the bottom of the page left the service grid as
   the first section after the hero, so it inherited the same 1rem
   .hero.hero--page + section lid (hero.css:335-338) and the cards sat hard
   against the top of their tinted band. Same fix as .about-hero above.
   -------------------------------------------------------------------------- */
.hero.hero--page + .beyond {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.about-hero .hero__title {
  text-align: left;
}

.about-hero .hero__subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 991px) {
  .about-hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Stacked: portrait on top, capped so it does not dominate the fold. */
  .about-hero__visual {
    max-width: 380px;
    margin: 0 auto;
  }

  .about-hero__content {
    padding: var(--space-xl);
  }

  .about-hero .hero__title,
  .about-hero .hero__subtitle {
    text-align: center;
  }

  .about-hero .hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 576px) {
  .about-hero__content {
    padding: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   ROUND 2 (2.2 / 2.3) — centre the trailing row of .pillars__grid.

   Five cards in a `repeat(auto-fit, minmax(280px, 1fr))` grid leave a ragged
   last row of two, left-aligned, which the client read as "one block is
   missing". CSS grid cannot centre an orphan row without per-item placement
   or a container-query hack, so this switches to flex-wrap + centred
   justification with a capped basis. Structural, hence here rather than an
   in-place edit to sections.css:864.

   The cap has to be breakpoint-scoped: `flex: 1 1 280px` alone would let the
   trailing two cards grow to half the row each. Target shape is 3 across with
   2 centred beneath (>=992px), 2 across with 1 centred beneath (576-991px),
   and a single column below that.

   Shared by /about/ and /coaching/ — one rule fixes both (spec item 2.3).
   -------------------------------------------------------------------------- */
.pillars__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-xl);
}

.pillars__grid > * {
  flex: 1 1 280px;
  max-width: 100%;
}

@media (min-width: 992px) {
  .pillars__grid > * {
    max-width: calc((100% - 2 * var(--space-xl)) / 3);
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .pillars__grid > * {
    max-width: calc((100% - var(--space-xl)) / 2);
  }
}

/* --------------------------------------------------------------------------
   ROUND 2 (2.4) — /about/ credentials, restyled.

   Replaces the pill-shaped .credential-badge run with the treatment from the
   client's earlier site (docs/_feedback-media/image1.png): a bordered stats
   strip across the top, then grouped columns with a short rule above each
   uppercase label and plain listed items.

   The stats strip reuses the theme's own .stats / .stat / .stat__number /
   .stat__label (components.css:200-224) so the type scale and the 2x2
   reflow at 768px come for free; only the box and the hairlines are new.
   Those hairlines are a 1px grid gap showing the container background
   through, which stays correct however the row wraps — a border-left plus
   :first-child exception would leave a stray rule on the third cell once it
   wraps to a second row.

   The group columns use the same centred-flex approach as .pillars__grid
   above, for the same reason: five groups in three columns would otherwise
   leave the ragged trailing row the client complained about.
   -------------------------------------------------------------------------- */
.credentials__stats {
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-3xl);
}

.credentials__stats .stats {
  gap: 1px;
  background-color: var(--light-gray);
}

.credentials__stats .stat {
  background-color: var(--bg-primary);
  padding: var(--space-xl) var(--space-md);
}

.credentials__groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2xl) var(--space-xl);
}

.credentials__groups > .credential-group {
  flex: 1 1 260px;
  max-width: 100%;
}

@media (min-width: 992px) {
  .credentials__groups > .credential-group {
    max-width: calc((100% - 2 * var(--space-xl)) / 3);
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .credentials__groups > .credential-group {
    max-width: calc((100% - var(--space-xl)) / 2);
  }
}

/* h4 inherits the heading font and clamp() size from base.css:57-59 — both are
   replaced here, because this is a label rather than a heading. */
.credential-group__label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--space-md);
}

/* The short rule above each group label. A pseudo-element rather than a
   border-top, so the rule is 2.5rem wide while the label stays full width. */
.credential-group__label::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background-color: var(--electric-blue);
  margin-bottom: var(--space-md);
}

.credential-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.credential-group__item {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.credential-group__item:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   ROUND 2 (3.5) — footer HPCSA credential.

   .footer__credential is capped at 200px (base.css:394-403), which is too
   narrow for "(Health Professions Council of South Africa — HPCSA)". The
   strip now holds a single credential, so it can have the room.

   The logo is an opaque white PNG (no alpha) on a navy footer, so it gets an
   explicit white plate rather than pretending it will key out. Styled on its
   own class instead of .footer__credential-badge, whose
   `max-height: 60px !important` (base.css:410-417) would otherwise have to be
   fought with a second !important.
   -------------------------------------------------------------------------- */
.footer__credential--hpcsa {
  max-width: 320px;
}

.footer__credential-plate {
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 70px;
  display: block;
  object-fit: contain;
  background-color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.footer__credential-label--supporting {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   ROUND 2 (2.6) — .packages__grid responsive breakdown.

   The base rule is now repeat(4, 1fr) in sections.css:979. These are the two
   step-downs, matching .cs-packages on /career-strategy/ (sections.css:2148
   and 2159) so the two package grids behave identically.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .packages__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .packages__grid {
    grid-template-columns: 1fr;
  }
}