/* ─────────────────────────────────────────────
   ID - Investment Decisions — base stylesheet
   All shared variables, resets, form components,
   and page-shell layout live here.
   ───────────────────────────────────────────── */

/* ── Design tokens ──────────────────────────── */
:root {
  --bg: #FAFAF5;
  --surface: #FFFFFF;
  --surface-alt: #F4F1EB;
  --border: #E5E0D8;
  --text: #1A1A1A;
  --muted: #5A5A5A;
  /* --light contrast on --bg (#FAFAF5): #8A8A8A was 3.5:1 (WCAG AA Large only).
     Darkened to #6B6B6B = 5.2:1 — passes AA Normal (≥4.5:1) for body text. */
  --light: #6B6B6B;
  --green: #1E3A2F;
  --gold: #C9A84C;
  /* --gold-dim contrast on --bg (#FAFAF5): #9A7A30 was 3.85:1 (FAIL AA Normal).
     Darkened to #7B6121 = 5.40:1 — passes AA Normal (≥4.5:1) for body text.
     #7B6121 is an already-in-use brand colour (analyser .limited-note). */
  --gold-dim: #7B6121;
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fb: 'DM Sans', system-ui, sans-serif;
}

/* ── Reset ──────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* Visually-hide an element while keeping it in the a11y tree (screen readers,
   speech-recognition tools). Use on <label> text when the visual control
   already conveys the field's purpose to sighted users. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-main-content link (WCAG 2.4.1 Bypass Blocks). Visually hidden
   off-screen by default (sr-only-shape `clip` so it stays in the
   accessibility tree) and reveals as a prominent button at the top of
   the viewport on :focus-visible. Pre-iter keyboard users tabbed
   through 12-15 chrome links before reaching content (R2.10 #1). */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  z-index: 1000;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--green);
  color: var(--bg);
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--fb);
  font-weight: 600;
  font-size: .95rem;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Page shell ─────────────────────────────── */
.wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.brand-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.brand-top svg { flex-shrink: 0; }

.brand-top-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-top-name {
  font-family: var(--fd);
  font-size: 1.25em;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
}

.brand-top-sub {
  font-size: .58em;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--light);
  font-weight: 400;
  margin-top: 2px;
}

.lang-pill {
  position: fixed;
  top: 14px;
  right: 16px;
  font-size: .65em;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--light);
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  transition: color .15s, border-color .15s;
  text-decoration: none;
}

.lang-pill:hover { color: var(--text); border-color: var(--gold); }

/* ── Card / form components ─────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 48px 52px;
  width: 90%;
  max-width: 440px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

.eyebrow {
  font-size: .7em;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 14px;
  font-weight: 500;
}

.card h1 {
  font-family: var(--fb);
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: -.02em;
}

.sub {
  font-size: .875em;
  color: var(--light);
  margin-bottom: 28px;
}

.sub a { color: #5C6B8A; font-weight: 500; }
.sub a:hover { text-decoration: underline; }

.divider {
  width: 36px;
  height: 1px;
  background: var(--gold);
  margin: 16px auto 28px;
}

label {
  display: block;
  font-size: .875em;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}

input[type=text],
input[type=password],
input[type=email] {
  width: 100%;
  padding: 11px 14px;
  font-size: .95em;
  background: #faf9f7;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-family: inherit;
  transition: border-color .15s;
  margin-bottom: 18px;
}

input:focus {
  outline: none;
  border-color: #5C6B8A;
  box-shadow: 0 0 0 3px rgba(92, 107, 138, .08);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 18px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.checkbox-row input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #5C6B8A;
  flex-shrink: 0;
}

.checkbox-row span {
  font-size: .88em;
  line-height: 1.4;
}

.btn {
  display: block;
  width: 100%;
  padding: 13px;
  background: #5C6B8A;
  color: #fff;
  border-radius: 6px;
  font-size: .9em;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background .15s;
  text-align: center;
  letter-spacing: .01em;
}

.btn:hover { background: #4A5772; }

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
  margin-top: 0;
}

.btn-outline:hover { background: var(--surface-alt); border-color: #aaa; }

.or-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--light);
  font-size: .8em;
  letter-spacing: .5px;
}

.or-sep::before,
.or-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.msg-err {
  background: #fdf4f4;
  border: 1px solid #e5c5c5;
  color: #a33;
  border-radius: 6px;
  padding: 9px 12px;
  margin-bottom: 16px;
  font-size: .85em;
}

.msg-ok {
  background: #f0f8f1;
  border: 1px solid #b5d8bc;
  color: #2a6b38;
  border-radius: 6px;
  padding: 9px 12px;
  margin-bottom: 16px;
  font-size: .85em;
}

.small {
  font-size: .78em;
  color: var(--light);
  margin-top: 16px;
  text-align: center;
}

.small a {
  color: #5C6B8A;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}

.small a:hover { border-color: #5C6B8A; }

/* ── 21st.dev upgrades ──────────────────────────────────────────────────── */

/* Shimmer sweep — eyebrow labels feel like a premium financial ticker */
@keyframes id-shimmer { 0% { background-position: -200% center } 100% { background-position: 200% center } }

.eyebrow {
  background: linear-gradient(90deg, var(--gold-dim) 20%, #d4b86a 50%, var(--gold-dim) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: id-shimmer 4s linear infinite;
  display: inline-block;
}

/* Scroll-reveal — sections fade up as they enter the viewport */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .18s; }
.reveal-d3 { transition-delay: .28s; }

/* Gradient text — used on hero headings (investment green → gold) */
@keyframes id-grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.grad-text {
  background: linear-gradient(135deg, #1E3A2F 0%, #2e6b4f 40%, #C9A84C 70%, #1E3A2F 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: id-grad-shift 7s ease infinite;
}

/* Floating label inputs (21st.dev staple) — label rises on focus */
.field-float { position: relative; margin-bottom: 18px; }
.field-float input[type=text],
.field-float input[type=email],
.field-float input[type=password] {
  width: 100%;
  padding: 22px 14px 8px;
  font-size: .95em;
  background: #faf9f7;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  margin-bottom: 0;
}
.field-float input:focus {
  outline: none;
  border-color: #5C6B8A;
  box-shadow: 0 0 0 3px rgba(92, 107, 138, .08);
}
.field-float label {
  position: absolute;
  left: 14px;
  top: 15px;
  font-size: .875em;
  color: var(--light);
  pointer-events: none;
  transition: top .15s ease, font-size .15s ease, color .15s ease;
  margin-bottom: 0;
}
.field-float input:focus ~ label,
.field-float input:not(:placeholder-shown) ~ label {
  top: 6px;
  font-size: .66em;
  color: var(--gold-dim);
  letter-spacing: .4px;
  font-weight: 600;
}

/* Reduced-motion preference — respect users who disable animations.
   Pre-iter base.css had 3 unguarded infinite animations:
   - .eyebrow's id-shimmer (4s shimmer sweep on the gold gradient)
   - .grad-text's id-grad-shift (7s gradient position cycle on hero
     headings)
   - .reveal's translateY+opacity transition on scroll-reveal sections
   etf.css already wraps its own animations in this query (R2.5).
   This block extends the same hygiene to base.css so the chrome
   stops moving for users with vestibular sensitivity (R2.10 #10,
   WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .eyebrow {
    animation: none;
    /* Without the moving sweep the gradient still looks fine — gold-dim
       is the dominant stop, so a static `background-position: 0 0` lands
       on a readable gold tone. */
  }
  .grad-text {
    animation: none;
  }
  .reveal {
    /* Skip the fade-up entirely: render at the final state immediately.
       Pre-iter the section briefly translated upward + faded in on
       scroll, which can trigger motion sensitivity. */
    opacity: 1;
    transform: none;
    transition: none;
  }
}