/* ==========================================================================
   y2-components.css — component vocabulary
   Redesign Phase 1. Requires y2-tokens.css. Reference render: /design-system.html
   --------------------------------------------------------------------------
   SPECIFICITY CONTRACT

   Every selector in this file starts with a `.y2-` class. There is not one
   bare element selector at the top level, so this stylesheet cannot reach any
   markup that has not opted in. That is what makes "zero regressions on
   existing pages" a property of the file rather than a spot-check result.

   Section spacing has exactly one source: `.y2-section { padding-block }`,
   reading `--y2-section-y`, which steps up at 768px and 1280px in the token
   file. No other rule in this file sets vertical padding or margin on a
   section, and no element selector competes with it. Modifiers change the
   variable, never the property.

   Element selectors do appear *inside* a y2- scope (`.y2-accordion__panel > p`)
   where the component wraps author prose. Those are scoped and intentional.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FOCUS — one definition, applied to every interactive component.

   :focus-visible keeps the ring off mouse clicks but guarantees it for
   keyboard traversal. The @supports block below restores plain :focus for
   engines without it, so no browser ends up with no indicator at all.
   -------------------------------------------------------------------------- */
.y2-btn:focus-visible,
.y2-fab:focus-visible,
.y2-utility__link:focus-visible,
.y2-card--link:focus-visible,
.y2-card__link:focus-visible,
.y2-accordion__summary:focus-visible,
.y2-field__input:focus-visible,
.y2-field__select:focus-visible,
.y2-field__textarea:focus-visible,
.y2-link:focus-visible {
  outline: var(--y2-focus-width) solid var(--y2-focus);
  outline-offset: var(--y2-focus-offset);
  border-radius: var(--y2-radius-sm);
}

@supports not selector(:focus-visible) {
  .y2-btn:focus,
  .y2-fab:focus,
  .y2-utility__link:focus,
  .y2-card--link:focus,
  .y2-card__link:focus,
  .y2-accordion__summary:focus,
  .y2-field__input:focus,
  .y2-field__select:focus,
  .y2-field__textarea:focus,
  .y2-link:focus {
    outline: var(--y2-focus-width) solid var(--y2-focus);
    outline-offset: var(--y2-focus-offset);
  }
}

/* Inverted surfaces: ink focus ring on an ink background would be invisible,
   so the ring flips to pencil (8.39:1 against ink). Anything nested inside
   inherits the override. */
.y2-on-ink {
  --y2-focus: var(--y2-pencil);
  background: var(--y2-ink);
  color: var(--y2-white);
}

/* --------------------------------------------------------------------------
   LAYOUT — section wrapper + container
   -------------------------------------------------------------------------- */
.y2-section {
  padding-block: var(--y2-section-y);
  padding-inline: var(--y2-s-2);
}

.y2-section--tight  { --y2-section-y: var(--y2-s-6); }
.y2-section--flush  { --y2-section-y: 0; }
.y2-section--paper  { background: var(--y2-paper); }
.y2-section--white  { background: var(--y2-white); }

.y2-container {
  width: 100%;
  max-width: var(--y2-maxw);
  margin-inline: auto;
}

.y2-prose { max-width: var(--y2-maxw-prose); }

/* --------------------------------------------------------------------------
   EYEBROW + PENCIL RULE — the signature element

   A 2px pencil rule at 25% of the container width, left-aligned, sitting
   directly above the section label. Used only here. If it starts appearing as
   decoration elsewhere, it has stopped being a signature.
   -------------------------------------------------------------------------- */
.y2-eyebrow {
  display: block;
  margin: 0 0 var(--y2-s-3);
  font-family: var(--y2-body);
  font-size: var(--y2-t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--y2-track-eyebrow);
  text-transform: uppercase;
  color: var(--y2-link);
}

.y2-eyebrow::before {
  content: '';
  display: block;
  width: var(--y2-rule-w);
  max-width: 220px;
  height: var(--y2-rule-h);
  margin-bottom: var(--y2-s-2);
  background: var(--y2-pencil);
}

.y2-on-ink .y2-eyebrow { color: var(--y2-pencil); }

/* --------------------------------------------------------------------------
   TYPE HELPERS
   -------------------------------------------------------------------------- */
.y2-hero-title,
.y2-h2,
.y2-h3 {
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  color: var(--y2-ink);
  margin: 0;
  text-wrap: balance;
}

.y2-hero-title { font-size: var(--y2-t-hero); font-weight: 650; line-height: var(--y2-lh-tight); letter-spacing: -0.02em; }
.y2-h2         { font-size: var(--y2-t-h2);   font-weight: 650; line-height: var(--y2-lh-head); letter-spacing: -0.01em; }
.y2-h3         { font-size: var(--y2-t-h3);   font-weight: 600; line-height: var(--y2-lh-head); }

.y2-body {
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  line-height: var(--y2-lh-body);
  color: var(--y2-ink-60);
  margin: 0;
}

.y2-small {
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  line-height: 1.5;
  color: var(--y2-ink-60);
  margin: 0;
}

.y2-on-ink .y2-hero-title,
.y2-on-ink .y2-h2,
.y2-on-ink .y2-h3 { color: var(--y2-white); }

.y2-on-ink .y2-body,
.y2-on-ink .y2-small { color: rgba(255, 255, 255, .82); }

.y2-link {
  color: var(--y2-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
.y2-link:hover { text-decoration-thickness: 2px; }
.y2-on-ink .y2-link { color: var(--y2-pencil); }

/* --------------------------------------------------------------------------
   BUTTONS — primary / secondary / ghost / floating

   Primary is ink text on a pencil surface (8.39:1). Pencil is never the text
   colour on a light background; the measurement in the token file is why.
   -------------------------------------------------------------------------- */
.y2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--y2-s-1);
  min-height: 48px;               /* touch target floor, all breakpoints */
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--y2-radius-sm);
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--y2-dur) var(--y2-ease),
              border-color var(--y2-dur) var(--y2-ease),
              color var(--y2-dur) var(--y2-ease),
              transform var(--y2-dur-fast) var(--y2-ease),
              box-shadow var(--y2-dur) var(--y2-ease);
}

.y2-btn:active { transform: translateY(1px); }

.y2-btn[aria-disabled='true'],
.y2-btn:disabled {
  background: var(--y2-disabled-surface);
  border-color: transparent;
  color: var(--y2-disabled-ink);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Primary — pencil surface, ink label */
.y2-btn--primary {
  background: var(--y2-pencil);
  color: var(--y2-ink);
  box-shadow: var(--y2-shadow);
}
.y2-btn--primary:hover { background: #E0A70F; box-shadow: var(--y2-shadow-lg); }

/* Secondary — ink outline, transparent fill */
.y2-btn--secondary {
  background: transparent;
  border-color: var(--y2-ink);
  color: var(--y2-ink);
}
.y2-btn--secondary:hover { background: var(--y2-ink); color: var(--y2-white); }

.y2-on-ink .y2-btn--secondary { border-color: var(--y2-white); color: var(--y2-white); }
.y2-on-ink .y2-btn--secondary:hover { background: var(--y2-white); color: var(--y2-ink); }

/* Ghost — no chrome until hover */
.y2-btn--ghost {
  background: transparent;
  color: var(--y2-ink);
  padding-inline: var(--y2-s-2);
}
.y2-btn--ghost:hover { background: rgba(20, 38, 76, .06); }

.y2-on-ink .y2-btn--ghost { color: var(--y2-white); }
.y2-on-ink .y2-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.y2-btn--block { width: 100%; }

/* Floating — Phase 8 allows exactly two of these (call, WhatsApp) */
.y2-fab {
  position: fixed;
  right: var(--y2-s-2);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--y2-ink);
  color: var(--y2-white);
  box-shadow: var(--y2-shadow-lg);
  cursor: pointer;
  transition: transform var(--y2-dur) var(--y2-ease),
              background-color var(--y2-dur) var(--y2-ease);
}
.y2-fab:hover { transform: translateY(-2px); }
.y2-fab--primary { background: var(--y2-pencil); color: var(--y2-ink); }
.y2-fab--low  { bottom: var(--y2-s-2); }
.y2-fab--high { bottom: calc(var(--y2-s-2) + 68px); }

/* --------------------------------------------------------------------------
   CARDS — program / resource / score / dashboard
   -------------------------------------------------------------------------- */
.y2-card {
  display: flex;
  flex-direction: column;
  gap: var(--y2-s-2);
  padding: var(--y2-s-3);
  background: var(--y2-white);
  border: 1px solid var(--y2-line);
  border-radius: var(--y2-radius);
  box-shadow: var(--y2-shadow);
}

/* Whole-card link target. Needs its own focus ring because the ring must
   trace the card, not the text inside it. */
.y2-card--link {
  text-decoration: none;
  color: inherit;
  transition: transform var(--y2-dur) var(--y2-ease),
              box-shadow var(--y2-dur) var(--y2-ease),
              border-color var(--y2-dur) var(--y2-ease);
}
.y2-card--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--y2-shadow-lg);
  border-color: var(--y2-line-strong);
}

.y2-card__eyebrow {
  font-family: var(--y2-body);
  font-size: var(--y2-t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--y2-track-eyebrow);
  text-transform: uppercase;
  color: var(--y2-link);
}

.y2-card__title {
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  font-size: var(--y2-t-h3);
  font-weight: 600;
  line-height: var(--y2-lh-head);
  color: var(--y2-ink);
  margin: 0;
}

.y2-card__body { font-family: var(--y2-body); font-size: var(--y2-t-body); line-height: var(--y2-lh-body); color: var(--y2-ink-60); margin: 0; }
.y2-card__foot { margin-top: auto; padding-top: var(--y2-s-2); }
.y2-card__link { font-family: var(--y2-body); font-size: var(--y2-t-body); font-weight: 600; color: var(--y2-link); text-decoration: none; }
.y2-card__link:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* Program — meta row for format / duration / fit. Never a price (G2). */
.y2-card--program .y2-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y2-s-1) var(--y2-s-2);
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  color: var(--y2-ink-60);
}

/* Resource — compact, icon-led */
.y2-card--resource { flex-direction: row; align-items: flex-start; gap: var(--y2-s-2); }
.y2-card--resource .y2-card__icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--y2-radius-sm); background: var(--y2-paper); }

/* Score — the number is the content, so it carries the display face */
.y2-card--score { align-items: center; text-align: center; gap: var(--y2-s-1); }
.y2-card__score {
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 4vw + 1rem, 3.5rem);
  font-weight: 650;
  line-height: 1;
  color: var(--y2-ink);
  letter-spacing: -0.02em;
}
.y2-card__delta {
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  font-weight: 700;
  color: var(--y2-ink);
  background: var(--y2-pencil);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.y2-card__attrib { font-family: var(--y2-body); font-size: var(--y2-t-small); color: var(--y2-ink-60); }

/* Dashboard — serves, does not sell. Flat, no lift, no shadow. */
.y2-card--dashboard {
  gap: var(--y2-s-1);
  padding: var(--y2-s-2);
  box-shadow: none;
  background: var(--y2-white);
}
.y2-card--dashboard:hover { border-color: var(--y2-line-strong); box-shadow: var(--y2-shadow); }
.y2-card--dashboard .y2-card__title { font-size: var(--y2-t-body); font-family: var(--y2-body); font-weight: 700; }
.y2-card--dashboard .y2-card__body  { font-size: var(--y2-t-small); }

.y2-card-grid {
  display: grid;
  gap: var(--y2-s-2);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .y2-card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--y2-s-3); } }
@media (min-width: 1280px) { .y2-card-grid { grid-template-columns: repeat(3, 1fr); } }
.y2-card-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .y2-card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .y2-card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.y2-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1280px) { .y2-card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   UTILITY BAR — above the primary nav. Subordinate by construction: small
   type, ~32px tall, no hover fill. It must not read as navigation.
   -------------------------------------------------------------------------- */
.y2-utility {
  background: var(--y2-ink);
  color: var(--y2-white);
  --y2-focus: var(--y2-pencil);
}
.y2-utility__inner {
  max-width: var(--y2-maxw);
  margin-inline: auto;
  min-height: 32px;
  padding-inline: var(--y2-s-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--y2-s-3);
}
.y2-utility__link {
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  padding-block: var(--y2-s-1);
}
.y2-utility__link:hover { color: var(--y2-pencil); }

/* Hidden wherever the mobile overlay is in charge — its links live in the
   overlay footer there. Kept in step with the nav breakpoint in y2-nav.css;
   if the two drift apart the links are either duplicated or unreachable. */
@media (max-width: 1023px) { .y2-utility { display: none; } }

/* --------------------------------------------------------------------------
   ACCORDION — native <details>/<summary>

   Built on the native elements so keyboard operation, the expanded/collapsed
   state, and screen-reader announcement come from the browser rather than
   from JavaScript that has to be kept correct.
   -------------------------------------------------------------------------- */
.y2-accordion { border-top: 1px solid var(--y2-line); }

.y2-accordion__item { border-bottom: 1px solid var(--y2-line); }

.y2-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--y2-s-2);
  min-height: 48px;
  padding: var(--y2-s-2) 0;
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  font-weight: 600;
  color: var(--y2-ink);
  cursor: pointer;
  list-style: none;
}
.y2-accordion__summary::-webkit-details-marker { display: none; }
.y2-accordion__summary:hover { color: var(--y2-link); }

.y2-accordion__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform var(--y2-dur) var(--y2-ease);
}
.y2-accordion__icon::before,
.y2-accordion__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--y2-ink);
}
.y2-accordion__icon::after { transition: transform var(--y2-dur) var(--y2-ease); transform: rotate(90deg); }
.y2-accordion__item[open] .y2-accordion__icon::after { transform: rotate(0deg); }

.y2-accordion__panel { padding-bottom: var(--y2-s-3); max-width: var(--y2-maxw-prose); }
.y2-accordion__panel > p {
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  line-height: var(--y2-lh-body);
  color: var(--y2-ink-60);
  margin: 0 0 var(--y2-s-2);
}
.y2-accordion__panel > p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   FORM FIELD

   Control borders use --y2-line-strong, not --y2-line. A 1.25:1 boundary is
   not a boundary a low-vision user can find.
   -------------------------------------------------------------------------- */
.y2-field { display: flex; flex-direction: column; gap: var(--y2-s-1); margin-bottom: var(--y2-s-3); }

.y2-field__label {
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  font-weight: 600;
  color: var(--y2-ink);
}
.y2-field__req { color: var(--y2-link); }

.y2-field__input,
.y2-field__select,
.y2-field__textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  color: var(--y2-ink);
  background: var(--y2-white);
  border: 1px solid var(--y2-line-strong);
  border-radius: var(--y2-radius-sm);
  transition: border-color var(--y2-dur) var(--y2-ease),
              box-shadow var(--y2-dur) var(--y2-ease);
}
.y2-field__textarea { min-height: 120px; resize: vertical; }

.y2-field__input:hover,
.y2-field__select:hover,
.y2-field__textarea:hover { border-color: var(--y2-ink-60); }

/* Placeholders sit at 4.24:1 rather than reusing --y2-disabled-ink (3.08:1).
   Every field here has a real label, so the placeholder is never the only cue,
   but 3:1 grey text is uncomfortable to read at 17px. */
.y2-field__input::placeholder,
.y2-field__textarea::placeholder { color: #6F7B96; }

.y2-field__input:disabled,
.y2-field__select:disabled,
.y2-field__textarea:disabled {
  background: var(--y2-disabled-surface);
  color: var(--y2-disabled-ink);
  cursor: not-allowed;
}

.y2-field__help { font-family: var(--y2-body); font-size: var(--y2-t-small); color: var(--y2-ink-60); }

/* Error state carries a text label as well as colour — colour alone is not an
   accessible signal (WCAG 1.4.1). */
.y2-field__error { font-family: var(--y2-body); font-size: var(--y2-t-small); font-weight: 600; color: #A3231B; }
.y2-field--invalid .y2-field__input,
.y2-field--invalid .y2-field__select,
.y2-field--invalid .y2-field__textarea { border-color: #A3231B; border-width: 2px; }

/* --------------------------------------------------------------------------
   REDUCED MOTION

   Durations are zeroed at the variable, which covers every transition in this
   file in one place. Hover transforms are neutralised separately because
   translate is motion regardless of how long it takes.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --y2-dur-fast: 0.01ms;
    --y2-dur: 0.01ms;
  }

  .y2-btn:active,
  .y2-fab:hover,
  .y2-card--link:hover { transform: none; }

  .y2-accordion__icon,
  .y2-accordion__icon::after { transition: none; }
}