/* Youth coaching page. Ported from the Claude Design file "JawiFit Youth
   Coaching" (source/); its palette predates the home page system in home.css. */
body { margin: 0; background: #050505; }
body, [data-jawifit-theme], [data-jawifit-theme=""] {
  /* MONOCHROME — no accent hue. White is the interaction signal. */
  --color-bg: #050505;
  --color-surface: #0A0A09;
  --color-surface-raised: #11110F;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #D7D4CE;
  --color-text-tertiary: #A8A5A0;
  --color-line-subtle: rgba(255,255,255,0.12);
  --color-line-interactive: rgba(255,255,255,0.55);
  --color-accent: #FFFFFF;
  --color-accent-pressed: #CFCCC5;
  --color-on-accent: #050505;
  --color-accent-ink: #FFFFFF;
  --accent-on-light: #14140F;
  --accent-edge: #FFFFFF;
  --accent-line: rgba(255,255,255,0.55);
  --accent-tint: rgba(255,255,255,0.08);
  --cta-hover-bg: var(--color-bg);
  --cta-hover-ink: #FFFFFF;
  --cta-hover-edge: #FFFFFF;
  --focus-ring: #FFFFFF;
  --focus-gap: #050505;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-state: 180ms;

  /* page aliases */
  --pg-base: var(--color-surface); --pg-base-alt: var(--color-bg); --pg-field: var(--color-surface-raised);
  --pg-rule: var(--color-line-subtle); --pg-rule-2: var(--color-line-interactive); --pg-rule-3: var(--color-line-interactive);
  --pg-ink: var(--color-text-primary); --pg-ink-2: var(--color-text-secondary); --pg-ink-3: var(--color-text-tertiary); --pg-meta: #8B8781;
  --pg-lime-ink: var(--color-text-primary); --pg-lime-fill: #FFFFFF; --pg-on-lime: #050505;
  --pg-pending: #F4B860; --pg-pending-tint: rgba(244,184,96,0.14);
  --pg-scrim-94: rgba(10,10,9,0.94); --pg-scrim-82: rgba(10,10,9,0.82); --pg-scrim-30: rgba(10,10,9,0.30);
  --pg-scrim-32: rgba(10,10,9,0.32); --pg-scrim-74: rgba(10,10,9,0.74); --pg-scrim-97: rgba(10,10,9,0.97);
  --pg-logo-white: 1; --pg-logo-black: 0;
  --pg-accent: var(--color-text-primary);
  --pg-cta-bg: #FFFFFF; --pg-cta-ink: #050505; --pg-cta-border: var(--color-line-interactive); --pg-hero-secondary: var(--color-text-secondary);
  --pg-invert-bg: #F2F0EA; --pg-invert-ink: #14140F; --pg-invert-ink-2: #4A473F; --pg-invert-rule: rgba(20,20,15,0.16); --pg-invert-cta-bg: #14140F; --pg-invert-cta-ink: #FFFFFF;
  --pg-lime-tint: var(--accent-tint); --pg-lime-line: var(--accent-line); --pg-focus: var(--focus-ring);
  color: var(--pg-ink);
}
[data-jawifit-theme="light"] {
  --color-bg: #F7F5F0;
  --color-surface: #F7F5F0;
  --color-surface-raised: #EDE9E0;
  --color-text-primary: #0B0B08;
  --color-text-secondary: #33322B;
  --color-text-tertiary: #4F4C44;
  --color-line-subtle: rgba(11,11,8,0.14);
  --color-line-interactive: rgba(11,11,8,0.45);
  --color-accent: #16150F;
  --color-accent-pressed: #2E2C26;
  --color-on-accent: #F7F5F0;
  --color-accent-ink: #16150F;
  --accent-edge: #16150F;
  --accent-line: rgba(11,11,8,0.45);
  --accent-tint: rgba(11,11,8,0.06);
  --cta-hover-bg: var(--color-bg);
  --cta-hover-ink: #16150F;
  --cta-hover-edge: #16150F;
  --focus-ring: #0B0B08;
  --focus-gap: #F7F5F0;
  --pg-base-alt: #EEEAE0;
  --pg-meta: #605C53;
  --pg-pending: #8A5A08; --pg-pending-tint: rgba(138,90,8,0.12);
  --pg-scrim-94: rgba(247,245,240,0.88); --pg-scrim-82: rgba(247,245,240,0.60); --pg-scrim-30: rgba(247,245,240,0.04);
  --pg-scrim-32: rgba(247,245,240,0.06); --pg-scrim-74: rgba(247,245,240,0.70); --pg-scrim-97: rgba(247,245,240,0.94);
  --pg-logo-white: 0; --pg-logo-black: 1;
  --pg-lime-fill: #16150F; --pg-on-lime: #F7F5F0;
  --pg-accent: #11110F; --pg-cta-bg: #11110F; --pg-cta-ink: #FFFFFF;
  --pg-invert-bg: #16150F; --pg-invert-ink: #F7F5F0; --pg-invert-ink-2: #C9C4BB; --pg-invert-rule: rgba(247,245,240,0.18); --pg-invert-cta-bg: #F7F5F0; --pg-invert-cta-ink: #16150F;
}

/* ---- links ---- */
a { color: var(--pg-ink); text-decoration: none; transition: color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--color-text-primary) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}
a:active { color: var(--color-accent-pressed) !important; }

/* ---- keyboard focus: white ring + near-black separation gap, never the hover fill ---- */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--focus-gap);
}

/* ---- compact controls: optical inversion, hover only under a fine pointer ---- */
.act-fill { transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .act-fill:hover { background: var(--color-accent) !important; border-color: var(--accent-edge) !important; color: var(--color-on-accent) !important; }
  .act-fill:hover .act-glyph, .act-fill:hover .act-sub { color: var(--color-on-accent) !important; }
}
.act-fill:active { background: var(--color-accent-pressed) !important; border-color: var(--color-accent-pressed) !important; color: var(--color-on-accent) !important; }
.act-fill[aria-pressed="true"], .act-fill[aria-selected="true"], .act-fill[data-selected="true"] {
  background: var(--color-accent) !important; border-color: var(--accent-edge) !important; color: var(--color-on-accent) !important;
}
.act-fill[aria-pressed="true"] .act-glyph { color: var(--color-on-accent) !important; }

/* ---- primary CTA: white fill / black text · hover black fill, white border, white text ---- */
.act-cta { transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out) !important; }
@media (hover: hover) and (pointer: fine) {
  .act-cta:hover { background: var(--cta-hover-bg) !important; border-color: var(--cta-hover-edge) !important; color: var(--cta-hover-ink) !important; }
}
.act-cta:active { background: var(--color-accent-pressed) !important; border-color: var(--color-accent-pressed) !important; color: var(--color-on-accent) !important; transform: none !important; }

/* ---- CTA on the inverted (warm-white) surface ---- */
.act-cta-invert { transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out) !important; }
@media (hover: hover) and (pointer: fine) {
  .act-cta-invert:hover { background: var(--pg-invert-bg) !important; color: var(--pg-invert-ink) !important; border-color: var(--pg-invert-ink) !important; }
}
.act-cta-invert:active { background: #2E2C26 !important; color: #F7F5F0 !important; transform: none !important; }

/* ---- text links with a rule ---- */
.act-link { transition: color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .act-link:hover { color: var(--color-text-primary) !important; border-bottom-color: var(--color-text-primary) !important; text-decoration: none; }
}
.act-link:active { color: var(--color-accent-pressed) !important; border-bottom-color: var(--color-accent-pressed) !important; }

.act-link-invert { transition: color var(--dur-state) var(--ease-out) !important; }
@media (hover: hover) and (pointer: fine) {
  .act-link-invert:hover { color: var(--accent-on-light) !important; background: transparent !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}

/* ---- panel rows (menus) ---- */
.act-row-fill { transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .act-row-fill:hover { background: var(--color-accent); color: var(--color-on-accent) !important; text-decoration: none; }
  .act-row-fill:hover span { color: var(--color-on-accent) !important; }
}
.act-row-fill:active { background: var(--color-accent-pressed); color: var(--color-on-accent) !important; }
.act-row-fill:active span { color: var(--color-on-accent) !important; }

/* ---- accordion rows (FAQ) ---- */
.act-row { transition: color var(--dur-state) var(--ease-out); }
.act-glyph { transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .act-row:hover .act-q { color: var(--color-text-primary) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .act-row:hover .act-glyph { background: var(--color-accent) !important; color: var(--color-on-accent) !important; border-color: var(--accent-edge) !important; }
}
.act-row:active .act-glyph { background: var(--color-accent-pressed) !important; color: var(--color-on-accent) !important; }
.act-row[aria-expanded="true"] .act-glyph { background: var(--color-accent) !important; color: var(--color-on-accent) !important; border-color: var(--accent-edge) !important; }

/* ---- large cards ---- */
.act-card { transition: border-color var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .act-card:hover { border-color: var(--accent-line) !important; box-shadow: inset 3px 0 0 var(--color-text-primary); }
  .act-card:hover .act-eyebrow { color: var(--color-text-primary) !important; }
  .act-card:hover .act-link { color: var(--color-text-primary) !important; border-bottom-color: var(--color-text-primary) !important; }
}

/* ---- service disclosure rows ---- */
.svc-head { transition: opacity var(--dur-state) var(--ease-out); }
.svc-index, .svc-name, .svc-icon { transition: color var(--dur-state) var(--ease-out), opacity var(--dur-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .svc-head:hover .svc-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
  .svc-head:hover .svc-index, .svc-head:hover .svc-icon { color: var(--color-text-primary) !important; }
}
.svc-head:active .svc-icon { color: var(--color-accent-pressed) !important; }
.svc-head[aria-expanded="true"] .svc-index, .svc-head[aria-expanded="true"] .svc-icon { color: var(--color-text-primary) !important; }
.svc-panel { animation: svcOpen 200ms var(--ease-out) both; }
@keyframes svcOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@keyframes jfFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* ---- phone layout. The page styles are inline (ported as is), so these
   overrides need !important. Sizes follow the home page's phone layout. ---- */
@media (max-width: 900px) {
  .y-nav { padding: 0 20px !important; height: 64px !important; }
  .y-hero { padding: 72px 20px 64px !important; gap: 24px !important; }
  .y-h1 { font-size: 46px !important; line-height: 0.98 !important; text-wrap: balance; }
  .y-lead { font-size: 17px !important; }
  .y-sec { padding: 72px 20px !important; }
  .y-sec-head { margin-bottom: 32px !important; }
  .y-h2 { font-size: 34px !important; line-height: 1.06 !important; }
  .y-h2-sm { font-size: 30px !important; line-height: 1.1 !important; }
  .y-h2-cta { font-size: 40px !important; line-height: 1.04 !important; }
  .y-grid3 { grid-template-columns: 1fr !important; }
  .y-card { padding: 28px 24px 32px !important; }
  .y-card-title { font-size: 24px !important; }
  .y-grid2 { grid-template-columns: 1fr !important; gap: 48px !important; }
  .y-foot { padding: 32px 20px !important; }
}
@media (max-width: 600px) {
  .y-nav-link { display: none !important; }
}