/* ==========================================================================
   Innervana Coaching — components.css
   Reusable UI: nav, buttons, footer, cards, shared section pieces.
   Depends on tokens in base.css.
   ========================================================================== */

/* ==========================================================================
   Skip link (accessibility)
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--color-cta);
  color: var(--color-text-light);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--border-radius);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  background: var(--color-bg-bar);
  border-bottom: 1px solid var(--color-border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 4.5rem;
}

.nav__brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

/* Brand lockup — the mark and the wordmark, side by side.
   Both are the supplied artwork: the wordmark was split out of
   innervana-logo-full.svg so the letterforms and colours are the originals,
   not a font match. The wordmark carries the alt text; the mark's is empty
   so a screen reader hears the name once, not twice.
   The mark's rays lose definition below ~44px — never set it smaller. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
}

.brand-lockup__mark {
  height: 2.75rem;          /* 44px — floor for the rays */
  width: auto;
  flex: none;
}

.brand-lockup__word {
  height: 2rem;             /* 32px — balances against a 44px mark */
  width: auto;
  flex: none;
}

/* Footer: same lockup, room to breathe */
.brand-lockup--footer .brand-lockup__mark { height: 5.5rem; }   /* 88px */
.brand-lockup--footer .brand-lockup__word { height: 3.5rem; }   /* 56px */
.brand-lockup--footer { gap: var(--space-6); }

/* Narrow screens: step the lockup down so it can't crowd the menu button */
@media (max-width: 26rem) {
  .brand-lockup { gap: var(--space-3); }
  .brand-lockup__mark { height: 2.5rem; }
  .brand-lockup__word { height: 1.75rem; }
}

@media (max-width: 22rem) {
  .brand-lockup__mark { display: none; }
}

@media (max-width: 30rem) {
  .brand-lockup--footer .brand-lockup__mark { height: 4rem; }
  .brand-lockup--footer .brand-lockup__word { height: 2.5rem; }
}
@media (max-width: 22rem) {
  /* the footer always has room for the mark */
  .brand-lockup--footer .brand-lockup__mark { display: block; }
}

/* Mobile toggle */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text-primary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Links */
.nav__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.nav__link {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-body);
  text-decoration: none;
  padding: var(--space-3) 0;
  transition: color 0.2s ease;
}
.nav__link:hover { color: var(--color-coral-text); }
.nav__link[aria-current="page"] {
  color: var(--color-coral-text);
}

/* Open state on mobile */
.nav__links.is-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .nav__toggle { display: none; }
  .nav__links,
  .nav__links.is-open {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    padding-bottom: 0;
  }
  .nav__link { padding: var(--space-2) 0; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--border-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: var(--color-cta);
  color: var(--color-text-light);
  border-color: var(--color-cta);
}
.btn-primary:hover {
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}
.btn-secondary:hover {
  background: var(--color-text-primary);
  color: var(--color-text-light);
}

/* Secondary button on dark backgrounds */
.section--dark .btn-secondary {
  color: var(--color-text-light);
  border-color: var(--color-text-light);
}
.section--dark .btn-secondary:hover {
  background: var(--color-text-light);
  color: var(--color-text-primary);
}

/* Group of buttons */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ==========================================================================
   Section variants & shared pieces
   ========================================================================== */

.section--linen { background: var(--color-bg-secondary); }

.section--dark {
  background-color: var(--color-bg-dark);
  /* Translucent forest laid over the texture so it grounds without shouting */
  background-image:
    linear-gradient(rgba(79, 98, 71, 0.58), rgba(79, 98, 71, 0.58)),
    url("../assets/images/textures/texture-forest.webp");
  background-size: cover;
  background-position: center;
  color: var(--color-text-light);
}

/* Light sage band — the counterpart to section--dark, for content that wants
   green without weight. CONTRAST WARNING: at #A8C4A4 only forest text passes
   (5.02:1). Body, muted, coral and sage all fail here. Everything goes forest;
   distinction comes from size, weight and the dawn rules, not colour. */
.section--sage {
  background-color: var(--color-bg-sage);
  color: var(--color-text-primary);
}
.section--sage h1,
.section--sage h2,
.section--sage h3,
.section--sage .eyebrow,
.section--sage .testimonial__quote,
.section--sage .testimonial__name { color: var(--color-text-primary); }

/* Warm dawn wash — the light counterpart to section--dark.
   Use for invitations and closing moments. Text stays dark. */
.section--dawn {
  background: var(--gradient-dawn-wash);
  position: relative;
}
.section--dawn::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--gradient-dawn);
}

/* Signature gradient rule — the logo, reduced to a mark. */
.dawn-rule {
  width: 5rem;
  height: 4px;
  border: 0;
  border-radius: 2px;
  margin: 0 0 var(--space-8);
  background: var(--gradient-dawn);
}
.section__header--center .dawn-rule { margin-inline: auto; }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--color-text-light); }

.section__header {
  max-width: var(--width-text);
  margin-bottom: var(--space-12);
}
.section__header--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  /* Forest, not coral. The small caps labels read as structure this way;
     in coral they read as a warning. Changed 27 Sep 2026. */
  text-transform: uppercase;
  color: var(--color-bg-dark);
  margin-bottom: var(--space-4);
}
.section--dark .eyebrow { color: var(--color-accent-on-dark); }

/* Prose: comfortable reading column */
.prose {
  max-width: var(--width-text);
}
.prose p + p { margin-top: var(--space-6); }
.prose p {
  font-size: var(--text-lg);
  color: inherit;
}
.section--dark .prose p { color: var(--color-text-light); }

/* Lead paragraph */
.lead {
  font-size: var(--text-lg);
  color: var(--color-text-body);
}

/* ==========================================================================
   Pull quotes
   --------------------------------------------------------------------------
   These used to live in home.css, which meant about.html and coaching.html
   rendered them as plain paragraphs: neither page loads that file. Moved here
   so all three pages get them. Keep the modifiers directly below the base
   rule; they rely on source order, not specificity, to win.
   ========================================================================== */

.pull-quote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--color-coral-text);
  max-width: 28ch;
  margin: var(--space-12) auto;
}
.section--dark .pull-quote { color: var(--color-accent-on-dark); }

/* In a left-aligned section the centred 28ch column reads as misplaced beside
   flush-left prose, and breaks the line in two. */
.pull-quote--left {
  margin-inline: 0;
  max-width: none;
  text-align: left;
}

/* The anchoring phrases, and only those: "Depth is contagious", "The answers
   are closer than you think", "Vulnerability is a superpower".

   These were set in Parisienne until 27 Sep 2026. The script face read as
   pasted on rather than as part of the page, so they now inherit the pull
   quote's Lora italic and sit a little wider. */
.pull-quote--anchor {
  font-size: var(--text-2xl);
  line-height: 1.3;
  max-width: 28ch;
  /* Script letterforms have swashes that overhang their advance width, so the
     last glyph on a line can graze the gutter. A sliver of inline padding buys
     the overhang room. The left-aligned variant pulls its own start edge back
     by the same amount, so the line still sits flush with the prose above. */
  padding-inline: 0.15em;
}
.pull-quote--anchor.pull-quote--left {
  max-width: none;
  margin-inline-start: -0.15em;
}

/* 1.625rem, not a scale token: at 1.75rem the anchor lines break to three
   lines on a 390px screen, and at 1.625rem they break to two. */
@media (max-width: 40rem) {
  .pull-quote--anchor { font-size: var(--text-xl); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background-color: var(--color-bg-dark);
  /* Same softening as .section--dark so the two read as one material */
  background-image:
    linear-gradient(rgba(79, 98, 71, 0.58), rgba(79, 98, 71, 0.58)),
    url("../assets/images/textures/texture-forest.webp");
  background-size: cover;
  background-position: center;
  color: var(--color-text-light);
  padding-block: var(--space-16);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.footer__brand {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text-light);
  text-decoration: none;
}



.footer__tagline {
  font-size: var(--text-base);
  color: var(--color-text-light);
  opacity: 0.85;
  max-width: 46ch;          /* wide enough that the second sentence holds one line */
  margin-top: var(--space-3);
}

/* One sentence per line. Spans rather than <br> so each is a real block and
   the line break survives editing the text around it. */
.footer__tagline span { display: block; }

.footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.footer__nav a {
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--color-text-light);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.footer__nav a:hover { opacity: 1; text-decoration: underline; }

.footer__bottom {
  border-top: 1px solid rgba(248, 242, 234, 0.18);
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .footer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-12);
  }
}

/* ==========================================================================
   Placeholder flag (for clearly-marked missing copy)
   ========================================================================== */

.placeholder {
  display: inline-block;
  background: rgba(224, 104, 92, 0.12);
  border: 1px dashed var(--color-coral-text);
  border-radius: var(--border-radius);
  color: var(--color-coral-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  letter-spacing: 0.02em;
  padding: var(--space-2) var(--space-4);
}

/* ==========================================================================
   Testimonials
   Three quotes. Designed to sit on .section--dark, where attribution uses
   gold (--color-accent-on-dark, 5.77:1) — sage-light and coral both fail there.
   ========================================================================== */

.testimonials {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

@media (min-width: 900px) {
  .testimonials {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
  /* With one real testimonial and two slots still empty, a two-column row
     under a full-width feature balances. Three equal columns would put a long
     quote in a third of the width beside two one-line cards. */
  .testimonials--featured { grid-template-columns: repeat(2, 1fr); }
  .testimonials--featured .testimonial--feature { grid-column: 1 / -1; }
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.testimonial::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gradient-dawn);
}

.testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.5;
  max-width: none;
}

.testimonial__who {
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
  max-width: none;
}

.testimonial__name {
  display: block;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-sm);
  color: var(--color-coral-text);
}

/* A plain hyphen before the name. Never an en or an em dash. */
.testimonial__name::before { content: "- "; }

.section--dark .testimonial__name { color: var(--color-accent-on-dark); }

/* The featured testimonial. Long enough that italic would tire the eye, so it
   sits upright, and its paragraphs need space between them. */
.testimonial--feature .testimonial__quote { font-style: normal; }
.testimonial--feature .testimonial__quote p + p { margin-top: var(--space-4); }
.testimonial--feature .testimonial__quote p { max-width: 62ch; }

/* Quotation marks: opening on the first paragraph, closing on the last, so the
   whole thing reads as one continuous quote. Real testimonials only. The
   placeholders are not something anyone said. The opening mark hangs into the
   margin so the first line stays flush with the paragraphs under it. */
.testimonial--feature .testimonial__quote p:first-child { text-indent: -0.42em; }
.testimonial--feature .testimonial__quote p:first-child::before { content: "\201C"; }
.testimonial--feature .testimonial__quote p:last-child::after { content: "\201D"; }

/* Placeholder state — visible while the other two are gathered */
.testimonial--placeholder .testimonial__quote { opacity: 0.45; }
.testimonial--placeholder .testimonial__who { opacity: 0.45; }

/* ==========================================================================
   Callout — an aside in CJ's voice, set apart from the surrounding prose
   ========================================================================== */

.callout {
  position: relative;
  max-width: var(--width-text);
  margin-top: var(--space-12);
  padding: var(--space-8);
  padding-left: var(--space-12);
  background: var(--color-bg-secondary);
  border-radius: var(--border-radius-lg);
}

.callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-8);
  bottom: var(--space-8);
  width: 4px;
  border-radius: 2px;
  background: var(--gradient-dawn);
}

.callout p { margin: 0; }
.callout p + p { margin-top: var(--space-4); }