/* Public website layout (after welly-design/ui_kits/web). Mobile first; the desktop breakpoint is 900px. Tokens only. */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { min-height: 100%; }
body { background: var(--surface-page); color: var(--text-primary); }
body.is-menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; }

.ww-wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter-mobile); }

/* One logo per theme. Both <img>s are in the markup; exactly one may be displayed. Keep these
   rules the most specific ones that touch the logos' display (`.ww-logo img { display: ... }`
   would beat a lone class and show both, doubling the gold mark) - the !important makes sure. */
img.ww-logo-dark { display: none !important; }
[data-theme="dark"] img.ww-logo-light { display: none !important; }
[data-theme="dark"] img.ww-logo-dark { display: block !important; }

.ww-skip { position: absolute; left: var(--space-4); top: calc(var(--space-4) * -4); z-index: 100; padding: var(--space-2) var(--space-4);
  background: var(--surface-inverse); color: var(--text-inverse); border-radius: var(--radius-control); font: var(--type-label); }
.ww-skip:focus { top: var(--space-4); }

.ww-eyebrow { margin: 0 0 var(--space-3); font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.ww-eyebrow-gold { color: var(--accent); }
.ww-muted { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }
.ww-lede { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-light); line-height: var(--leading-relaxed); color: var(--text-secondary); max-width: 56ch; }
h1, h2, h3 { margin: 0; letter-spacing: var(--tracking-tight); text-wrap: pretty; }
h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); max-width: 22ch; }
h3 { font: var(--type-h3); letter-spacing: var(--tracking-display); }

/* ---------- header ---------- */
.ww-header { position: sticky; top: 0; z-index: 20; background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.ww-header-in { display: flex; align-items: center; gap: var(--space-4); height: var(--nav-h); }
.ww-logo { display: block; flex: none; }
.ww-logo img { height: var(--space-5); width: auto; } /* no display here: the theme rules above own it */
.ww-header-r { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.ww-header-login { display: none; }
.ww-menu-icon-close { display: none; }
.ww-header[data-menu-open="true"] .ww-menu-icon-open { display: none; }
.ww-header[data-menu-open="true"] .ww-menu-icon-close { display: inline; }

/* menu: a full-screen sheet on mobile */
.ww-nav { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 30;
  flex-direction: column; overflow-y: auto; padding: var(--space-4) var(--gutter-mobile) var(--space-8); background: var(--surface-page); }
.ww-header[data-menu-open="true"] .ww-nav { display: flex; }
.ww-nav > a { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle);
  font: var(--type-h3); color: var(--text-primary); text-decoration: none; }
.ww-nav > a:hover { color: var(--accent); text-decoration: none; }
.ww-nav-extras { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-6); }

.ww-lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-sunken); align-self: flex-start; }
.ww-lang a { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  font: var(--type-label); color: var(--text-secondary); text-decoration: none; transition: var(--transition-color); }
.ww-lang a:hover { color: var(--text-primary); text-decoration: none; }
.ww-lang a[aria-current="true"] { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.ww-lang a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- hero ---------- */
.ww-hero { background: var(--black); color: var(--white); padding: var(--space-12) 0 var(--space-10); }
.ww-hero-in { display: flex; flex-direction: column; gap: var(--space-8); }
.ww-hero-txt { display: flex; flex-direction: column; gap: var(--space-5); }
.ww-hero h1 { font: var(--type-display); font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); max-width: 16ch; }
.ww-hero .ww-lede { color: var(--grey-400); }
.ww-hero .ww-eyebrow { margin: 0; }
.ww-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* a ghost button on a black surface: the class must outrank .wl-btn[data-variant="ghost"], which sets
   the text colour (black in light mode, invisible on black) */
.wl-btn.ww-btn-on-dark { color: var(--white); }
.wl-btn.ww-btn-on-dark:hover { background: var(--grey-800); color: var(--white); }
.ww-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none;
  font: var(--type-body-sm); color: var(--grey-400); }
.ww-facts li { display: inline-flex; align-items: center; gap: var(--space-2); }
.ww-facts .wl-icon { color: var(--accent); }
.ww-hero-media { border-radius: var(--radius-media); overflow: hidden; background: var(--grey-900); }
.ww-hero-media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.85); }

/* ---------- sections ---------- */
.ww-section { padding: var(--space-16) 0; }
.ww-section-sunken { background: var(--surface-sunken); }
.ww-section-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }
.ww-section-head .ww-eyebrow { margin: 0; }
.ww-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.ww-tile { display: flex; flex-direction: column; gap: var(--space-3); }
.ww-tile p { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }
.ww-tile-icon { display: grid; place-items: center; width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-soft-fg); margin-bottom: var(--space-2); }

.ww-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); margin: var(--space-8) 0 0;
  padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font: var(--type-body); }
.ww-stat strong { font: var(--weight-light) var(--text-4xl)/1 var(--font-display); color: var(--text-primary); letter-spacing: var(--tracking-tight); }

.ww-principle { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-8); padding: var(--space-8); }
.ww-principle h3 { font: var(--type-h2); letter-spacing: var(--tracking-tight); max-width: 20ch; }
.ww-principle-foot { margin: var(--space-4) 0 0; font: var(--type-body); color: var(--grey-400); }
.ww-checks { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font: var(--type-body); }
.ww-checks li { display: flex; align-items: flex-start; gap: var(--space-3); }
.ww-checks .wl-icon { flex: none; margin-top: 3px; color: var(--accent); }

.ww-weeks { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0 0 var(--space-12); padding: 0; list-style: none; counter-reset: week; }
.ww-week { display: flex; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-card); }
.ww-week-no { flex: none; display: grid; place-items: center; width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-sm);
  background: var(--surface-inverse); color: var(--text-inverse); font: var(--type-h3); }
.ww-week .ww-eyebrow { margin-bottom: var(--space-1); }
.ww-week h3 { margin-bottom: var(--space-2); }
.ww-week p:last-child { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }

.ww-split { display: flex; flex-direction: column; gap: var(--space-8); }
.ww-split-txt { display: flex; flex-direction: column; gap: var(--space-4); }
.ww-split-txt p { margin: 0; }
.ww-split-media { border-radius: var(--radius-media); overflow: hidden; background: var(--surface-sunken); }
.ww-split-media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.85); }
.ww-split-media-portrait { background: none; max-width: 360px; }
.ww-split-media-portrait img { aspect-ratio: 1 / 1; filter: none; }

/* a prose section: starts at the column edge like every other section; the text keeps a readable
   measure through the max-widths on h2 and .ww-lede, and the paragraphs below match it */
.ww-prose .ww-tile-icon { margin-bottom: var(--space-4); }
.ww-prose h2 { margin-bottom: var(--space-4); }
.ww-prose .ww-lede { margin-bottom: var(--space-4); max-width: 64ch; }
.ww-prose .ww-muted { max-width: 64ch; }

.ww-story { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.ww-story-mark { color: var(--accent); }
.ww-story blockquote { margin: 0; flex: 1; }
.ww-story blockquote p { margin: 0; font: var(--type-body); line-height: var(--leading-relaxed); }
.ww-story figcaption { display: flex; align-items: center; gap: var(--space-3); }
.ww-story-who { display: flex; flex-direction: column; }
.ww-story-who strong { font: var(--type-label); }
.ww-avatar, .ww-avatar-img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ww-avatar { display: grid; place-items: center; background: var(--surface-inverse); color: var(--text-inverse); font: var(--type-label); }

.ww-pull { margin: 0; padding-left: var(--space-4); border-left: 3px solid var(--accent); }
.ww-pull p { font: var(--type-h3); font-weight: var(--weight-regular); line-height: var(--leading-snug); }

.ww-cta { padding-top: 0; }
.ww-cta-card { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); }
.ww-cta-card h2 { margin-bottom: var(--space-2); color: inherit; }
.ww-cta-card p { margin: 0; font-weight: var(--weight-light); color: var(--grey-400); max-width: 48ch; }
[data-theme="dark"] .ww-cta-card p { color: var(--grey-600); }
[data-theme="dark"] .ww-cta-card .wl-btn.ww-btn-on-dark { color: var(--black); }
[data-theme="dark"] .ww-cta-card .wl-btn.ww-btn-on-dark:hover { background: var(--grey-200); }

/* ---------- sub-pages: one article column (legal documents) ---------- */
.ww-page { padding: var(--space-12) 0 var(--space-16); }
.ww-article { max-width: var(--content-narrow); }
.ww-article h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2); }
.ww-article h2 { font: var(--type-h3); margin: var(--space-10) 0 var(--space-3); max-width: none; }
.ww-article h3 { font: var(--type-label); font-size: var(--text-md); margin: var(--space-6) 0 var(--space-2); }
.ww-article p, .ww-article li { font: var(--type-body); line-height: var(--leading-relaxed); color: var(--text-primary); }
.ww-article p { margin: 0 0 var(--space-4); }
.ww-article ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.ww-article li { margin-bottom: var(--space-2); }
.ww-article a { text-decoration: underline; text-underline-offset: 3px; }
.ww-article-meta { font: var(--type-body-sm); color: var(--text-secondary); margin-bottom: var(--space-6); }
.ww-article-lede { font-size: var(--text-lg); font-weight: var(--weight-light); color: var(--text-secondary); }
.ww-note { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); background: var(--surface-sunken);
  font: var(--type-body-sm); color: var(--text-secondary); margin-bottom: var(--space-8); }
.ww-address { font: var(--type-body); font-style: normal; line-height: var(--leading-relaxed); }
@media (min-width: 900px) { .ww-page { padding: var(--space-16) 0 var(--space-24); } }

/* ---------- footer ---------- */
.ww-footer { border-top: 1px solid var(--border-subtle); background: var(--surface-sunken); padding: var(--space-10) 0 var(--space-6); }
.ww-footer-in { display: flex; flex-direction: column; gap: var(--space-8); }
.ww-footer-brand { display: flex; flex-direction: column; gap: var(--space-3); max-width: 320px; }
.ww-footer-brand img { width: 36px; height: auto; }
.ww-footer-brand p { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }
.ww-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.ww-footer-cols h4 { margin: 0 0 var(--space-3); font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.ww-footer-cols a { display: block; padding: var(--space-1) 0; font: var(--type-body-sm); color: var(--text-primary); text-decoration: none; }
.ww-footer-cols a:hover { color: var(--accent); }
.ww-footer-legal { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle); font: var(--type-caption); color: var(--text-muted); }

/* ---------- desktop ---------- */
@media (min-width: 600px) {
  .ww-grid-2, .ww-grid-3, .ww-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ww-weeks { grid-template-columns: repeat(2, 1fr); }
  .ww-footer-cols { grid-template-columns: repeat(3, 1fr); }
  .ww-cta-card { padding: var(--space-10); }
}

@media (min-width: 900px) {
  .ww-wrap { padding: 0 var(--gutter-desktop); }
  .ww-header-in { height: 72px; gap: var(--space-8); }
  .ww-logo img { height: var(--space-6); }
  .ww-header-login { display: inline-flex; }
  .ww-menu-toggle { display: none; }
  .ww-nav { display: flex; position: static; flex: 1; flex-direction: row; align-items: center; gap: var(--space-8); padding: 0; overflow: visible; background: none; }
  .ww-nav > a { padding: var(--space-2) 0; border: 0; border-bottom: 2px solid transparent; font: var(--type-label); color: var(--text-secondary); }
  .ww-nav > a:hover { color: var(--text-primary); border-color: var(--accent); }
  .ww-nav-extras { flex-direction: row; align-items: center; gap: var(--space-3); margin-left: auto; padding: 0; }

  .ww-hero { padding: var(--space-20) 0; }
  .ww-hero-in { flex-direction: row; align-items: center; gap: var(--space-12); }
  .ww-hero-txt { flex: 6; }
  .ww-hero-media { flex: 5; }
  .ww-hero h1 { font-size: var(--text-5xl); }
  .ww-section { padding: var(--space-24) 0; }
  .ww-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .ww-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .ww-grid { gap: var(--space-5); }
  .ww-principle { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12); }
  .ww-principle > div:first-child { flex: 1; }
  .ww-weeks { grid-template-columns: repeat(4, 1fr); }
  .ww-week { flex-direction: column; }
  .ww-split { flex-direction: row; align-items: center; gap: var(--space-12); }
  .ww-split > * { flex: 1; }
  .ww-split-reverse { flex-direction: row; }
  .ww-split-media-portrait { flex: 0 0 360px; }
  .ww-cta-card { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-10); padding: var(--space-12); }
  .ww-footer-in { flex-direction: row; justify-content: space-between; }
  .ww-footer-legal { flex-direction: row; justify-content: space-between; }
}