/* learn.doug-fraley.com - shared styles for the course site.
   Same design tokens as doug-fraley.com (navy / gold / sage, Lora + Inter,
   fonts self-hosted in /fonts/ so no third party is told a learner arrived).
   Responsive at three breakpoints: desktop > 900px, tablet 600-900px,
   phone < 600px; touch targets at least 44px. */

:root {
  --bg:           #F7F4EF;
  --surface:      #FFFFFF;
  --navy:         #1C2B3A;
  --navy-mid:     #2C3E50;
  --navy-deep:    #0F1E2D;
  --gold:         #B8965A;
  --gold-light:   #F0E4CA;
  --gold-mid:     #D4B278;
  --sage:         #4A7A6D;
  --sage-light:   #D8EDEA;
  --rust:         #A85A3A;
  --muted:        #7A8E9E;
  --border:       #DDD5C8;
  --text:         #2C3E50;
  --font-heading: 'Lora', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-sm:    6px;
  --radius:       10px;
  --shadow:       0 2px 16px rgba(28,43,58,0.09);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--sage); }

/* Top bar */
.learn-bar { background: var(--navy); padding: 1rem 1.5rem; }
.learn-bar-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.learn-brand { font-family: var(--font-heading); font-weight: 600; color: #fff; text-decoration: none; font-size: 1.05rem; }
.learn-brand span { display: block; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.learn-user { font-size: 0.85rem; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.learn-user button { background: none; border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: var(--radius-sm); padding: 0 0.9rem; min-height: 44px; font: inherit; cursor: pointer; }

/* Main card */
main { flex: 1; padding: 3.5rem 1.5rem 5rem; }
.card {
  max-width: 560px; margin: 0 auto; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2.25rem;
}
.card.wide { max-width: 760px; }
.eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; }
h1 { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.25; color: var(--navy); margin-bottom: 1rem; }
h2 { font-family: var(--font-heading); font-size: 1.25rem; color: var(--navy); margin: 1.5rem 0 0.6rem; }
p { margin-bottom: 1rem; }
.muted { color: var(--muted); font-size: 0.9rem; }

label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--navy); margin-bottom: 0.4rem; }
input[type="email"] {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; font: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text);
}
input[type="email"]:focus { outline: none; border-color: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 1.6rem; border: none; border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; text-decoration: none;
  background: var(--gold); color: var(--navy-deep); transition: background 0.2s;
}
.btn:hover { background: var(--gold-mid); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; }

.notice { border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; margin: 1rem 0; font-size: 0.92rem; }
.notice.ok    { background: var(--sage-light); color: var(--navy-mid); }
.notice.warn  { background: var(--gold-light); color: var(--navy-mid); }
.notice.error { background: #F6E1D8; color: #6E2F17; }
.draft-flag {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--rust); color: #fff; border-radius: 4px; padding: 0.2rem 0.55rem; margin-bottom: 1rem;
}
.consent-text { border-left: 3px solid var(--gold); padding: 0.25rem 0 0.25rem 1rem; margin: 1rem 0 1.25rem; }
.consent-text li { margin: 0 0 0.5rem 1.1rem; }
.hidden { display: none !important; }

footer.learn-foot { padding: 1.5rem; text-align: center; font-size: 0.8rem; color: var(--muted); }

@media (max-width: 600px) {
  main { padding: 2rem 1rem 3.5rem; }
  .card { padding: 1.5rem 1.25rem; }
  .btn { width: 100%; }
}