/* public/css/guide.css
   Growth project, Session 3, task 3.1. Shared styles for every guide page
   and the recovery pages (Session 3B reuses this too). Same brand tokens,
   nav, and footer as the homepage (public/index.html), so a guide never
   looks like a different site. Loaded via <link>, not inline, so guide
   pages carry no inline <style> either, matching the no-inline-script
   rule with the same reasoning: one less thing to hash for CSP, and one
   file to update instead of N copies pasted into every guide.
*/

:root {
  --navy: #1B2A41;
  --navy-deep: #131F30;
  --paper: #F0F0F0;
  --paper-warm: #E8E8E8;
  --gold: #A47B2D;
  --gold-bright: #C99A3E;
  --slate: #3D4F66;
  --stone: #E0E0E0;
  --stone-line: #D0D0D0;
  --serif: 'Inter', -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--serif);
  background: var(--paper);
  color: var(--navy);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

a { color: var(--gold); }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 32px; }

/* ===== NAV (same markup/classes as the homepage) ===== */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  max-width: 1080px;
  margin: 0 auto;
}
.logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-decoration: none;
}
.logo span { color: var(--gold); }
.nav-back {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  text-decoration: none;
}

/* ===== ARTICLE ===== */
main.guide {
  padding: 8px 32px 64px;
}
.guide-eyebrow {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.guide h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 18px;
  text-wrap: balance;
}
.guide-meta {
  font-size: 13px;
  color: #8C93A0;
  margin-bottom: 32px;
}
.guide-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--slate);
  max-width: 68ch;
}
.guide-body p { margin-bottom: 20px; }
.guide-body h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 40px 0 16px;
}
.guide-body h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  margin: 28px 0 12px;
}
.guide-body ul, .guide-body ol {
  margin: 0 0 20px 22px;
}
.guide-body li { margin-bottom: 8px; }
.guide-body strong { color: var(--navy); }

/* ===== FOLLOW-UP QUESTIONS ===== */
.followups { margin-top: 12px; }
.followup { margin-bottom: 24px; }
.followup h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 8px;
}
.followup p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--slate);
}

/* ===== RELATED GUIDES ===== */
.related {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--stone-line);
}
.related-label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 12px;
}
.related-list { list-style: none; }
.related-list li { margin-bottom: 8px; }
.related-list a { font-weight: 600; text-decoration: none; }
.related-list a:hover { text-decoration: underline; }

/* ===== SIGNUP BOX (mid-page and end-of-page) ===== */
.guide-signup {
  background: var(--navy);
  border-radius: 12px;
  padding: 28px 30px;
  margin: 36px 0;
}
.guide-signup h2 {
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 800;
  font-size: 21px;
  margin-bottom: 8px;
}
.guide-signup p {
  color: rgba(240, 240, 240, 0.72);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 18px;
}
.signup-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin-bottom: 12px;
}
.signup-form input[type="email"] {
  flex: 1;
  padding: 13px 16px;
  border: 1.5px solid var(--stone-line);
  border-radius: 6px;
  font-family: var(--serif);
  font-size: 15px;
  background: #fff;
  color: var(--navy);
  outline: none;
  transition: border-color 0.15s ease;
}
.signup-form input[type="email"]:focus { border-color: var(--gold); }
.signup-form input[type="email"]::placeholder { color: #9BA3AE; }
.btn-primary {
  padding: 13px 22px;
  background: var(--gold);
  color: var(--navy-deep);
  border: none;
  border-radius: 6px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-primary:hover { background: var(--gold-bright); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.form-note {
  font-size: 12.5px;
  color: rgba(240, 240, 240, 0.55);
}
.success-box {
  display: none;
  max-width: 420px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid var(--gold-bright);
  border-radius: 6px;
  font-size: 14px;
  color: var(--paper);
}
.success-box.show { display: block; }
.success-box strong { color: var(--gold-bright); }

/* ===== FOOTER (same markup/classes as the homepage) ===== */
footer {
  border-top: 1px solid var(--stone-line);
  padding: 32px;
  margin-top: 24px;
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
}
.footer-meta {
  font-size: 12.5px;
  color: #9BA3AE;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 520px) {
  .signup-form { flex-direction: column; }
  nav { padding: 22px 20px; }
  main.guide, footer .wrap { padding-left: 20px; padding-right: 20px; }
  .guide-signup { padding: 22px 20px; }
}