/* ─────────────────────────────────────────────────────────────
   foilnexus.com — shared stylesheet

   Colour is transcribed from the eFoilCrew design system:
     src/app/globals.css  @theme block (Deep palette) and the
                          [data-theme="light"] block

   Typography is deliberately NOT shared. eFoilCrew uses Inter with
   Instrument Serif for display; FoilNexus uses IBM Plex Sans and
   IBM Plex Mono throughout. The separation between the corporate
   entity and the consumer product is carried by the typeface rather
   than the palette: teal collided with Lift's brand colour and the
   graphite/rust option collided with Strava, so the accent stays.

   Light is the DEFAULT here, dark is the mirror. That is the
   opposite of the product app and deliberate: the app is used by
   members who have chosen a theme, this site is read cold by people
   arriving from search, the Connect IQ listing or an enrolment
   check. It matches the public /watch-guide route, which moved to
   light-by-default for the same reason.

   Same-origin stylesheet rather than six inlined copies: the tokens
   drifted between two files within a week of the second page
   existing. Still no build step.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Brand */
  --accent: #3B82F6;
  --accent-light: #60A5FA;
  --accent-dim: rgba(59, 130, 246, 0.08);

  /* Surfaces — light */
  --bg: #F0F5FC;
  --bg-card: #FFFFFF;
  --bg-elevated: #E8F0FA;
  --border: #C0D0E8;

  /* Text */
  --text: #0A1628;
  --text-2: #3A5878;
  --text-3: #6A88A8;

  /* Type — IBM Plex, not eFoilCrew's Inter + Instrument Serif */
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --shadow: 0 2px 12px rgba(10, 22, 40, 0.06);
  --shadow-lg: 0 12px 32px rgba(10, 22, 40, 0.10);

  color-scheme: light;
}

/* Dark is opt-in via the header toggle, NOT via prefers-color-scheme.
   The site is read cold by people arriving from search, the Connect IQ
   listing or an entity check, and it should look the same to all of them
   on first load. A stored choice wins; absent one, light. The attribute
   is set by a pre-paint inline script in every page head, so there is no
   flash of the wrong theme. Values are the eFoilCrew Deep dark palette
   from src/app/globals.css. */
[data-theme="dark"] {
  --accent-dim: rgba(59, 130, 246, 0.14);
  --bg: #0A1628;
  --bg-card: #101E32;
  --bg-elevated: #0E1A2E;
  --border: #1E3050;
  --text: #E8F0FA;
  --text-2: #7EA0C4;
  --text-3: #4E7098;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: 58rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 2.5rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg-card);
  color: var(--text);
  padding: 0.625rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  z-index: 20;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4rem;
  flex-wrap: wrap;
  padding: 0.75rem 0;
}
/* Wordmark only. There is no logo yet, and a placeholder glyph reads worse
   than none at all. */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; color: var(--text); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.375rem;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
}
.nav a { color: var(--text-2); }
.nav a:hover { color: var(--accent); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); }

.header-right { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

.theme-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--bg-elevated); color: var(--text); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { display: block; }
/* Show the icon for the theme you would switch TO. */
.theme-toggle .i-moon { display: block; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }

/* ── Type ───────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.75rem;
}

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 22ch;
}
h1.wide { max-width: 28ch; }

h2 {
  font-family: var(--display);
  font-size: clamp(1.3125rem, 2.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.lead {
  font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
  line-height: 1.5;
  color: var(--text-2);
  margin: 1.5rem 0 0;
  max-width: 52ch;
}
.lead.wide { max-width: 60ch; }

.prose { max-width: 45rem; }
.prose p { margin: 0 0 1rem; color: var(--text-2); }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { margin-top: 2rem; color: var(--text); }
.prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--text-2); }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--text); font-weight: 600; }
.prose code {
  font-family: var(--mono);
  font-size: 0.8125rem;
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
  padding: 0.0625rem 0.375rem;
}

.muted { color: var(--text-3); font-size: 0.875rem; }

/* ── Sections ───────────────────────────────────────────── */
.hero { padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2rem, 5vw, 3rem); }
section { padding-bottom: clamp(3rem, 7vw, 4.5rem); }
.section-head { margin-bottom: 2rem; max-width: 45rem; }
.section-head p { color: var(--text-2); margin: 0; }
.rule { border: 0; border-top: 1px solid var(--border); margin: 0 0 clamp(2.5rem, 6vw, 4rem); }

/* ── Cards ──────────────────────────────────────────────── */
.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 44rem) { .cards-2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.card-body {
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
}
.card-body p { margin: 0; color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; flex: 1; }
.card-shot {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.card-link { font-size: 0.875rem; font-weight: 600; }
.card-link::after { content: " \2192"; }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: 999px;
  padding: 0.1875rem 0.5rem;
}
.tag-quiet { color: var(--text-3); background: var(--bg-elevated); }

/* ── Figures ────────────────────────────────────────────── */
figure { margin: 0 0 1.5rem; }
figure img {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
figcaption { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--text-3); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.75rem 1.375rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.btn:hover { background: var(--accent-light); text-decoration: none; }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-elevated); color: var(--text); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ── Facts grid (about page) ────────────────────────────── */
.facts {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2rem);
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .facts { grid-template-columns: 1fr 1fr; } }
.facts h3 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.5rem;
}
.facts p, .facts address {
  margin: 0;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.span-2 { grid-column: 1 / -1; }
.ubi-number {
  font-family: var(--mono);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.trader { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.trader p { font-size: 0.8125rem; color: var(--text-2); }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0 3rem;
  font-size: 0.875rem;
  color: var(--text-3);
  background: var(--bg-elevated);
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-bottom: 2rem;
}
@media (min-width: 44rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-grid h3 {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.75rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 0.4375rem; }
.footer-list a { color: var(--text-2); }
.footer-entity { font-style: normal; line-height: 1.7; color: var(--text-2); }
.footer-entity strong { color: var(--text); font-weight: 600; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}
.footer-bottom p { margin: 0; }

/* ── Phone shot trio (eFoilCrew page) ───────────────────────── */
.shots {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  max-width: 22rem;
  margin: 0 auto;
}
@media (min-width: 40rem) {
  .shots { grid-template-columns: repeat(3, 1fr); max-width: none; margin: 0; }
}
.shots img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
/* Portrait app captures: show the top of the screen, not a centre crop. */
.card-shot.tall { aspect-ratio: 4 / 3; }