/* ==========================================================================
   Shared components: logo tile, buttons, pills, nav, footer.
   Values are from docs/02-design-system.md and docs/03-components.md.
   ========================================================================== */

/* ---------- Logo tile (doc 02) -----------------------------------------
   Black tile, stacked BLURRED over LINES in Bebas.
   width : height = 1 : 0.68, text 26.5% of width, side padding 8.5%.
   ----------------------------------------------------------------------- */

.logo-tile {
  --logo-w: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--logo-w);
  height: calc(var(--logo-w) * .68);
  padding-inline: calc(var(--logo-w) * .085);
  background: #0A0A0B;
  color: var(--white);
  font-family: var(--font-display);
  font-size: calc(var(--logo-w) * .265);
  /* Measured: 23.91px on a 25.44px face. Bebas needs the tight leading or the
     two words drift apart and the tile grows past its 1:0.68 ratio. */
  line-height: .94;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: var(--ls-display);
  flex: 0 0 auto;
  /* A hairline keeps the tile readable where it sits on the dark ground. */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
}

/* The two words stack. They sit inside an aria-hidden wrapper rather than
   being direct flex children, so this must be block, not a flex direction. */
.logo-tile__line {
  display: block;
  white-space: nowrap;
}

.logo-tile--nav    { --logo-w: 72px; }
.logo-tile--footer { --logo-w: 84px; }

@media (min-width: 768px) {
  .logo-tile--nav    { --logo-w: 96px; }
  .logo-tile--footer { --logo-w: 110px; }
}

/* ---------- Buttons (doc 03) -------------------------------------------
   S 44/20/22, M 56/28/26, L 68/36/32. Border 3px, radius 0.
   ----------------------------------------------------------------------- */

.btn {
  --btn-h: 56px;
  --btn-px: 28px;
  --btn-fs: var(--fs-btn);
  --btn-shadow: 5px 5px 0 var(--pink);
  --btn-shadow-hover: 8px 8px 0 var(--pink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding-inline: var(--btn-px);
  border: var(--border) solid transparent;
  font-family: var(--font-display);
  font-size: var(--btn-fs);
  line-height: var(--lh-btn);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease,
              background-color .15s ease, color .15s ease;
}

.btn--s { --btn-h: 44px; --btn-px: 20px; --btn-fs: 22px; }
.btn--m { --btn-h: 56px; --btn-px: 28px; --btn-fs: 26px; }
.btn--l { --btn-h: 68px; --btn-px: 36px; --btn-fs: 32px; }

.btn__icon {
  font-size: 1em;
  line-height: 1;
}

/* Variants */

.btn--primary {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--btn-shadow);
}

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

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: transparent;
}

/* Band-specific variants: the ground changes, so the fill must too. */
.btn--on-pink {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  --btn-shadow: 5px 5px 0 var(--yellow);
  --btn-shadow-hover: 8px 8px 0 var(--yellow);
  box-shadow: var(--btn-shadow);
}

.btn--on-purple {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--white);
  --btn-shadow: 5px 5px 0 var(--ink);
  --btn-shadow-hover: 8px 8px 0 var(--ink);
  box-shadow: var(--btn-shadow);
}

/* States */

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--btn-shadow-hover);
}

.btn--secondary:hover {
  background: var(--text);
  color: var(--bg-0);
}

.btn--ghost:hover {
  text-decoration: underline;
  transform: none;
  box-shadow: none;
}

.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--pink);
}

.btn--on-pink:active   { box-shadow: 2px 2px 0 var(--yellow); }
.btn--on-purple:active { box-shadow: 2px 2px 0 var(--ink); }
.btn--secondary:active,
.btn--ghost:active     { box-shadow: none; }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .45;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Pills, eyebrows ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 10px;
  border-radius: var(--radius-teen);
  font-family: var(--font-teen), var(--font-body);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.pill--age {
  background: var(--lemon);
  color: var(--teen-ink);
  margin-left: var(--space-2);
}

.eyebrow {
  display: inline-block;
  padding: 6px 12px 4px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.eyebrow--pink { background: var(--pink); }

/* ---------- Nav (doc 03) ------------------------------------------------
   Mobile 64 high: logo, "Notify me", hamburger.
   768+: 88 high, centred links, "Join the launch list".
   ----------------------------------------------------------------------- */

/* The bar runs the full viewport width with its own side padding -- it is NOT
   capped at --container like the page sections are. On mobile that padding is
   tighter than the page: a measured 16px against the page's 20px gutter. */
.nav {
  --nav-px: 16px;
  position: relative;
  z-index: 50;
  background: var(--bg-0);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--nav-h);
  padding-inline: var(--nav-px);
}

/* Desktop link row: hidden on mobile, where the panel takes over. */
.nav__links { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 4px solid transparent;
}

.nav__link:hover { border-bottom-color: var(--line); }

/* The current page is marked with a pink underline. */
.nav__link[aria-current="page"] { border-bottom-color: var(--pink); }

/* The right-hand group: switcher, launch-list button, hamburger. It carries
   the auto margin so everything in it stays together against the right edge;
   before the switcher existed the button carried it alone. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}

.nav__cta--desktop { display: none; }

/* Measured: the mobile CTA uses a tighter 3px shadow than the 5px default. */
.nav__cta--mobile {
  --btn-shadow: 3px 3px 0 var(--pink);
  --btn-shadow-hover: 5px 5px 0 var(--pink);
  box-shadow: var(--btn-shadow);
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--text);
  cursor: pointer;
  flex: 0 0 auto;
}

/* Hamburger drawn from one element plus its two pseudo-elements. */
.nav__burger,
.nav__burger::before,
.nav__burger::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
}

.nav__burger { position: relative; }

.nav__burger::before,
.nav__burger::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav__burger::before { top: -6px; }
.nav__burger::after  { top: 6px; }

/* Open state: the bars cross. */
.nav__toggle[aria-expanded="true"] .nav__burger { background: transparent; }

.nav__toggle[aria-expanded="true"] .nav__burger::before {
  top: 0;
  transform: rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__burger::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Mobile panel */

.nav__panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--bg-0);
  border-bottom: 1px solid var(--line);
}

.nav__panel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 64px;
  padding-inline: var(--nav-px);
  border-top: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.nav__panel-link[aria-current="page"] { color: var(--accent-text); }

.nav__panel-cta {
  padding: var(--space-5) var(--nav-px);
  border-top: 2px solid var(--line);
}

.nav__panel-cta .btn { width: 100%; }

@media (min-width: 768px) {
  .nav { --nav-px: var(--gutter); }
}

/* The comps draw the nav at 390 and 1440 only. The full link row needs
   about 815px once the logo, pill and CTA are counted, so the mobile nav
   holds until 1024 rather than breaking at the 768 layout switch. */
@media (min-width: 1024px) {
  .nav__links { display: block; margin-inline: auto; }
  .nav__cta--desktop { display: inline-flex; }
  .nav__cta--mobile,
  .nav__toggle { display: none; }
  .nav__panel { display: none; }
}

/* ---------- Footer (doc 03) ---------- */

/* Measured: full width, padding 64px 80px 40px, ground --footer. Like the
   nav, it is not capped at --container. */
.footer {
  background: var(--footer);
  border-top: 1px solid var(--line);
  padding-block: var(--space-8) var(--space-7);
}

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

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__tagline {
  max-width: 34ch;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--muted);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-5);
}

/* The press block runs full width on mobile, per the comp. */
.footer__col--press { grid-column: 1 / -1; }

.footer__col-title {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--fs-body-s);
  text-decoration: none;
}

.footer__list a:hover { text-decoration: underline; }

/* Needs to out-specify `.footer__list a`, which clears decoration. */
.footer__list a.footer__email { text-decoration: underline; }

/* The legal line and the language switcher share the footer's bottom rule.
   Stacked below 768 (the switcher first, because it is the actionable one),
   side by side above it. */
.footer__bottom {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--space-4);
  padding-inline: var(--gutter);
  padding-top: var(--space-8);
}

.footer__legal {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}

/* ---------- Language switcher ------------------------------------------
   Two links, one per locale, with the current one rendered as inert text.
   Kept out of the desktop nav bar on purpose: the nav already needs ~815px
   for its existing contents and holds the mobile layout until 1024 (see
   website/README.md), so this lives in the footer and in the mobile nav
   panel instead.

   Sized to the 44px minimum touch target from CLAUDE.md, which for a
   two-letter label means padding rather than font size.
   ----------------------------------------------------------------------- */

.langsw__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.langsw__link,
.langsw__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.langsw__link {
  color: var(--muted);
  border: 1px solid transparent;
}

.langsw__link:hover,
.langsw__link:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.langsw__link:focus-visible {
  outline: var(--outline);
  outline-offset: var(--outline-offset);
}

/* The current locale is not a link. It reads as selected, not as disabled. */
.langsw__current {
  color: var(--text);
  border: 1px solid var(--line);
}

/* `abbr[title]` picks up a dotted underline and a help cursor by default,
   which is wrong here: this is a label, not a definition to hover. The title
   stays for the full language name. */
.langsw__short {
  text-decoration: none;
  cursor: inherit;
  border: 0;
}

/* ---- In the header bar -------------------------------------------------
   Shown from 768 up. Below that the bar has no room for it: at 360px there
   is 55px of slack once the logo, the launch-list button and the hamburger
   have taken theirs, and this control needs about 112px. Below 768 it lives
   at the top of the nav panel instead (.langsw--panel).
   ------------------------------------------------------------------------ */

.langsw--nav { display: none; }

@media (min-width: 768px) {
  .langsw--nav { display: block; }
}

/* Slightly tighter than the footer's: the bar is a denser row, and the two
   items read as one control rather than as two separate links. */
.langsw--nav .langsw__list { gap: 0; }

.langsw--nav .langsw__link,
.langsw--nav .langsw__current {
  min-width: 46px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
}

/* One outline around the pair, with a divider between them, so it reads as a
   toggle instead of two adjacent words. */
.langsw--nav .langsw__list { border: 2px solid var(--line); }
.langsw--nav .langsw__item + .langsw__item { border-left: 2px solid var(--line); }

.langsw--nav .langsw__current {
  border: 0;
  background: var(--text);
  color: var(--bg-0);
}

.langsw--nav .langsw__link {
  border: 0;
  color: var(--text);
}

.langsw--nav .langsw__link:hover,
.langsw--nav .langsw__link:focus-visible {
  background: var(--bg-2);
  text-decoration: none;
}

/* ---- At the top of the mobile panel ------------------------------------ */

.langsw--panel .langsw__list {
  padding-inline: var(--nav-px);
  padding-block: var(--space-3);
  gap: var(--space-2);
}

.langsw--panel .langsw__link,
.langsw--panel .langsw__current {
  min-width: 56px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  border: 2px solid var(--line);
}

.langsw--panel .langsw__current {
  background: var(--text);
  color: var(--bg-0);
  border-color: var(--text);
}

@media (min-width: 1024px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-7);
  }

  /* Measured: the tagline sits beside the tile (tile x=80, tagline x=210),
     not beneath it. */
  .footer__brand {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .footer__tagline { max-width: 320px; }

  .footer__cols {
    grid-template-columns: repeat(3, auto);
    /* The comps only measure 390 and 1440. The measured 96px gap overflows a
       768px viewport once the row layout starts, so it scales in until there
       is room for it. */
    gap: var(--space-6);
  }

  .footer__col--press { grid-column: auto; }
}

@media (min-width: 1200px) {
  .footer__inner { gap: var(--space-9); }
  .footer__cols  { gap: 96px; }
}

/* ---------- Scaffold (temporary, phases 1-2) ----------------------------
   Placeholder styling for pages not yet built. Delete once every page has
   its real sections.
   ----------------------------------------------------------------------- */

.scaffold__title {
  margin-top: var(--space-4);
  font-size: var(--fs-title-l);
  line-height: var(--lh-title-l);
}

.scaffold__note {
  margin-top: var(--space-5);
  max-width: 60ch;
  color: var(--muted);
}

/* ---------- Dev state board (public/_states.php). Not deployed. ---------- */

.states__band {
  padding-block: var(--section-y);
  background: var(--bg-0);
}

.states__band--pink      { background: var(--pink); }
.states__band--purple    { background: var(--purple); }
.states__band--teen      { background: var(--cream); }
.states__band--teen-dark { background: var(--teen-bg); }

.states__label {
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.states__band--pink .states__label   { color: var(--ink); }
.states__band--purple .states__label { color: var(--white); }
.states__band--teen .states__label   { color: var(--teen-ink); }

/* ---------- Blurped buttons (doc 03, doc 07) ----------------------------
   Pills in Lilita One, 4px smaller than the adult sizes. Ink pill with white
   text on light grounds; lemon pill with ink text on the dark ground. Both
   carry a coral shadow.
   ----------------------------------------------------------------------- */

.btn--teen,
.btn--teen-dark {
  border-radius: var(--radius-teen);
  border-width: var(--border-teen);
  font-family: var(--font-teen), var(--font-display);
  font-size: calc(var(--btn-fs) - 4px);
  letter-spacing: 0;
  text-transform: none;
  --btn-shadow: 4px 4px 0 var(--coral);
  --btn-shadow-hover: 7px 7px 0 var(--coral);
  box-shadow: var(--btn-shadow);
}

.btn--teen {
  background: var(--teen-ink);
  color: var(--white);
  border-color: var(--teen-ink);
}

.btn--teen-dark {
  background: var(--lemon);
  color: var(--teen-ink);
  border-color: var(--teen-ink);
}

.btn--teen:active,
.btn--teen-dark:active { box-shadow: 2px 2px 0 var(--coral); }

/* Card-sized logo tiles: sized by the card via container units, set in packs.css. */
.logo-tile--card,
.logo-tile--card-teen { --logo-w: 13.1cqw; }

/* Square, both variants: the tile is a printed mark on the card face and the
   rounding read as a mistake against the card's own corners. */
.logo-tile--card,
.logo-tile--card-teen { border-radius: 0; }

/* The teen tile keeps its ink colour but NOT the teen face. --font-teen leads
   with Lilita One, which is only a stand-in and is not self-hosted, so it fell
   back to Arial Rounded MT Bold -- far wider than Bebas, and "BLURRED" spilled
   straight out of a tile whose proportions assume a condensed face. */
.logo-tile--card-teen {
  background: var(--teen-ink);
}