/* ==========================================================================
   Novera Languages — Components
   Reusable UI. Page-specific layout lives in pages.css, not here.
   ========================================================================== */

/* --- Eyebrow / label --- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--teal-text);   /* small uppercase text — raw --teal is only 2.93:1 on light */
}
.section--dark .eyebrow { color: var(--yellow); }

/* Gradient hairline under an eyebrow/heading — decorative edge use of the gradient */
.rule-grad {
  height: 4px; width: 56px; border-radius: 2px;
  background: var(--grad); background-size: 200% 100%;
  animation: grad-slide 2.2s linear infinite;   /* fast colour flow, every section */
}
@keyframes grad-slide { to { background-position: 200% 0; } }

/* --- Lede --- */
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--muted); max-width: 56ch; }
.section--dark .lede { color: var(--on-dark-muted); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .8rem 1.6rem;
  border-radius: var(--r-sm); border: 2px solid transparent;
  font-weight: 600; font-size: 1rem; text-decoration: none; text-align: center;
  transition: background .18s var(--ease), color .18s, border-color .18s, transform .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Primary: darkened coral fill carries white text at AA (raw --coral fails on white text) */
.btn--primary { background: var(--coral-cta); color: #fff; }
.btn--primary:hover { background: #c72f39; }
/* Secondary: navy outline */
.btn--secondary { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--secondary:hover { background: var(--navy); color: #fff; }
/* On dark bands */
.btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- Section header block --- */
.section-head { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 60ch; }

/* --- Cards --- */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: var(--shadow-lift); }
.card p { color: var(--muted); font-size: var(--fs-small); max-width: none; }
.card__icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center; flex-shrink: 0;
}
/* Coloured icon tiles — cycle the accents like the mockup's service row */
.card__icon--teal   { background: rgba(0,169,157,.12);  color: var(--teal); }
.card__icon--coral  { background: rgba(255,90,95,.12);  color: var(--coral-cta); }
.card__icon--purple { background: rgba(107,78,255,.12); color: var(--purple); }
.card__icon--yellow { background: rgba(255,184,28,.16); color: #a9741a; }
.card__icon--navy   { background: rgba(13,27,61,.08);   color: var(--navy); }
.card__icon svg { width: 26px; height: 26px; }

.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* Swipeable rail on small screens (services, etc.) */
@media (max-width: 52rem) {
  .grid--rail {
    display: flex; overflow-x: auto; gap: var(--sp-3);
    scroll-snap-type: x mandatory; padding-bottom: var(--sp-4);
    scrollbar-width: thin;
  }
  .grid--rail > * { flex: 0 0 min(78%, 20rem); scroll-snap-align: start; }
}

/* --- Pills / tag lists (language chips, mode chips) --- */
.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill {
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: .45rem .9rem; font-size: var(--fs-small); color: var(--text);
  background: var(--white);
}

/* --- Credential cards ------------------------------------------------------
   Extends .card for the homepage Credentials band. The band sits between a
   dark trust band and a tinted section, so it was the flattest strip on the
   page; the spine, larger icon tile and centred head give it weight without
   leaning on a logo strip. Accents are the four bar colours from the logo
   mark, in the same order, so the row reads as brand rather than decoration. */
.credgrid { margin-top: var(--sp-6); }
.card--cred { position: relative; overflow: hidden; padding-top: calc(var(--sp-5) + 8px); }
.card--cred::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--cc, var(--teal));
}
.card--cred:hover { border-color: var(--cc, var(--teal)); }
.card--cred .card__icon { width: 60px; height: 60px; border-radius: var(--r-lg, 14px); }
.card--cred .card__icon svg { width: 30px; height: 30px; }
.card--cred h3 { margin-top: var(--sp-1); }
.credgrid .card--cred:nth-child(1) { --cc: var(--teal); }
.credgrid .card--cred:nth-child(2) { --cc: var(--purple); }
.credgrid .card--cred:nth-child(3) { --cc: var(--yellow); }
.credgrid .card--cred:nth-child(4) { --cc: var(--coral); }

/* Centred section head — used by the Credentials band. base.css caps <p> at
   68ch for measure, which leaves a centred eyebrow sitting left of its rule. */
.section-head--center { align-items: center; text-align: center; margin-inline: auto; }
.section-head--center .eyebrow { max-width: none; }
.section-head--center .rule-grad { margin-inline: auto; }
.section-head--center .lede { margin-inline: auto; }

/* --- Membership / accreditation logo strip -------------------------------
   Sits under the Credentials cards on the homepage. Greyscale at rest, full
   colour on hover — the convention buyers expect for accreditation marks.

   Flex-centred rather than a grid on purpose: the bodies approve on different
   timelines, so the strip has to look deliberate with two logos or with six.
   Publish each logo only once that body has approved its use. Markup and the
   drop-in steps are in docs/credentials-preview.html. */
.credlogos { display: flex; flex-wrap: wrap; align-items: center;
             justify-content: center; gap: var(--sp-5) var(--sp-6); margin-top: var(--sp-5); }
.credlogo { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.credlogo img { height: 54px; width: auto; filter: grayscale(1); opacity: .78;
                transition: filter .25s var(--ease), opacity .25s var(--ease); }
.credlogo:hover img { filter: grayscale(0); opacity: 1; }
.credlogo__name { font-size: .78rem; color: var(--muted); text-align: center;
                  max-width: 15ch; line-height: 1.3; }
.credstrip-head { text-align: center; }
/* base.css caps every <p> at 68ch for readable measure; on a centred eyebrow
   that leaves the label sitting left of its own rule. Opt this one out. */
.credstrip-head .eyebrow { max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .credlogo img { transition: none; }
}

/* --- Stat cards (hero rail + trust band) --- */
.stat { display: flex; align-items: center; gap: var(--sp-3); }
.stat__val { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; color: var(--ink); }
.section--dark .stat__val { color: #fff; }
.stat__label { font-size: var(--fs-small); color: var(--muted); }
.section--dark .stat__label { color: var(--on-dark-muted); }

/* ==========================================================================
   Header + nav
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--navy); color: #fff;
  padding-top: env(safe-area-inset-top);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: 74px;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; flex-shrink: 0; }
.brand__mark { width: 40px; height: 36px; flex-shrink: 0; }
.brand__name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1; font-size: 1.05rem; }
.brand__name small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .58rem; letter-spacing: .28em; color: var(--on-dark-muted); margin-top: .28rem; }

.primary-nav { display: flex; align-items: center; gap: var(--sp-5); }
.primary-nav a { color: var(--on-dark); text-decoration: none; font-size: .95rem; font-weight: 500; padding-block: .4rem; }
.primary-nav a:hover { color: #fff; }
.primary-nav a[aria-current="page"] { color: #fff; border-bottom: 2px solid var(--coral); }
.header-cta { display: inline-flex; }

.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  min-height: 44px; min-width: 44px; padding: .5rem .8rem;
  background: transparent; border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-sm); color: #fff;
}

@media (max-width: 60rem) {
  .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy); padding: 5rem var(--sp-5) var(--sp-6);
    transform: translateX(100%); transition: transform .28s var(--ease);
    overflow-y: auto; box-shadow: -20px 0 50px rgba(0,0,0,.3);
  }
  .primary-nav a { font-size: 1.15rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .primary-nav a[aria-current="page"] { border-bottom: 1px solid rgba(255,255,255,.1); color: var(--coral); }
  .primary-nav .header-cta { display: inline-flex; margin-top: var(--sp-4); }
  .nav-open .primary-nav { transform: translateX(0); }
  .nav-open body { overflow: hidden; }
}

/* ==========================================================================
   Marquee ribbon (with WCAG 2.2.2 pause control)
   ========================================================================== */
.marquee { position: relative; overflow: hidden; background: var(--navy-800); color: var(--on-dark); padding-block: 1rem; }
.marquee__track { display: flex; width: max-content; gap: 2.75rem; animation: ovg-slide 34s linear infinite; }
@keyframes ovg-slide { to { transform: translateX(calc(-50% - 1.375rem)); } }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee.paused .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; gap: 2.75rem; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.5rem); }
.marquee__item::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
.marquee__pause {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.3); color: #fff;
}
.marquee__pause .i-play { display: none; }
.marquee.paused .marquee__pause .i-play { display: block; }
.marquee.paused .marquee__pause .i-pause { display: none; }

/* --- Ambient waveform motif (the logo, in motion) --- */
.wave { display: inline-flex; align-items: flex-end; gap: 4px; height: 30px; }
.wave i { width: 5px; border-radius: 2.5px; transform-origin: bottom; animation: ovg-eq 2.1s ease-in-out infinite; }
@keyframes ovg-eq { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.wave i:nth-child(1) { background: var(--teal);   height: 12px; animation-delay: -.1s; }
.wave i:nth-child(2) { background: var(--purple); height: 22px; animation-delay: -.55s; }
.wave i:nth-child(3) { background: var(--coral);  height: 30px; animation-delay: -.9s; }
.wave i:nth-child(4) { background: var(--yellow); height: 22px; animation-delay: -.4s; }
.wave i:nth-child(5) { background: var(--teal);   height: 12px; animation-delay: -.75s; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--sp-4); }
.field label { font-weight: 600; font-size: var(--fs-small); }
.field .req { color: var(--coral-cta); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem; font-size: 16px;   /* 16px stops iOS auto-zoom */
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--white); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid var(--purple); outline-offset: 1px; border-color: var(--navy);
}
.field textarea { min-height: 130px; resize: vertical; }
.field[aria-invalid] input, .field.invalid input,
.field.invalid select, .field.invalid textarea { border-color: var(--coral-cta); }
.field__error { color: var(--coral-cta); font-size: var(--fs-small); min-height: 1.2em; }
.field--consent { flex-direction: row; align-items: flex-start; gap: .6rem; }
.field--consent input { width: auto; min-width: 20px; height: 20px; margin-top: .25rem; }
.field--consent label { font-weight: 400; }
/* honeypot — visually and programmatically hidden from humans, catches bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-grid { display: grid; gap: 0 var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid--2 .field--full { grid-column: 1 / -1; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-800); color: var(--on-dark-muted); padding-block: var(--sp-8) var(--sp-6); padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.footer-col h4 { font-family: var(--font-body); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .14em; color: var(--on-dark-muted); margin-bottom: var(--sp-4); font-weight: 600; }
.footer-col ul { display: flex; flex-direction: column; gap: .55rem; font-size: var(--fs-small); }
.footer-bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-small);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem var(--sp-5);
}
.footer-copy { margin: 0; max-width: none; }

/* Visit counter — injected by js/visitors.js only once a real count comes
   back, so nothing renders when the endpoint is absent. Deliberately quiet:
   it shares the copyright line rather than competing with the CTA above. */
.visitcount {
  margin: 0; max-width: none;
  display: inline-flex; align-items: baseline; gap: .4rem;
  color: var(--on-dark-muted);
}
.visitcount__num {
  /* 1rem, not larger: .footer-bottom centres its children, and a taller box
     here lifts the number off the copyright baseline beside it. */
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--on-dark);
  /* tabular figures stop the digits jittering as the count animates */
  font-variant-numeric: tabular-nums;
}
.visitcount__label { font-size: var(--fs-small); }
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem var(--sp-4); margin: 0; }
.footer-legal li { position: relative; }
.footer-legal li + li::before {
  content: ""; position: absolute; left: calc(var(--sp-4) / -2); top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%;
  background: currentColor; opacity: .45;
}