/* ============================================================
   Youssef Wahby, main stylesheet (v1.5.0)
   Subpage shell rebuilt to the HOMEPAGE design system:
   dark teal/ivory tokens, Bricolage Grotesque headings,
   Instrument Sans body, pill buttons, sticky minimal header.
   Dark is forced (html data-theme="dark"), no light mode.

   1. Tokens  2. Base  3. Header  4. Buttons  5. Page hero
   6. Sections  7. FAQ accordions  8. Cards  9. Chips
   10. Forms  11. Articles  12. Closing band  13. Footer
   14. Tables  15. Responsive  16. Easy-read
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #0F1B1D;
  --surface: #162629;
  --ink: #E8F0EF;
  --muted: #9FB3B5;
  --line: #264045;
  --brand: #4FA79B;
  --brand-ink: #0B1517;
  --accent: #7CC8BC;
  --soft: #1B3236;
  --head: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --danger: #e57373;
  --content: 1040px;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--head); line-height: 1.1; margin: 0; letter-spacing: -.02em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; margin-bottom: 1rem; }
h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: .4rem; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
section { scroll-margin-top: 84px; }
.wrap { max-width: var(--content); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 760px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--brand); color: var(--brand-ink);
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Header (mirrors homepage header) ---------- */
header.top {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { font-family: var(--head); font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.nav nav { display: flex; gap: 1.4rem; align-items: center; margin-left: auto; margin-right: 1.4rem; }
.nav-links { display: flex; gap: 1.4rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a, .nav nav a {
  text-decoration: none; color: var(--muted); font-weight: 500; font-size: .95rem; white-space: nowrap;
}
.nav-links a:hover, .nav nav a:hover { color: var(--ink); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--brand); color: var(--brand-ink);
  padding: .85rem 1.4rem; border-radius: 999px;
  font-weight: 600; text-decoration: none; border: 2px solid var(--brand);
  cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-primary { background: var(--brand); color: var(--brand-ink); border: 2px solid var(--brand); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary { background: transparent; color: var(--ink); border: 2px solid var(--line); }
.btn-secondary:hover { filter: brightness(1.15); }
.btn .arrow { font-size: 1.1em; line-height: 1; }
/* Header Book pill, slightly larger word, per owner request */
.nav .btn { padding: .6rem 1.2rem; font-size: 1.05rem; color: var(--brand-ink); }
/* Mobile menu toggle (hamburger), panel behaviour lives in the 800px block */
.nav-toggle { display: none; background: none; border: 1.5px solid var(--line); border-radius: 999px; width: 42px; height: 42px; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0; margin-left: .6rem; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-toggle.is-open { background: var(--soft); }
@media (max-width: 800px) {
  /* Mobile header: wordmark + Book + hamburger; nav becomes a dropdown panel */
  .nav { height: 56px; }
  .logo { font-size: 1rem; }
  .nav-toggle { display: inline-flex; }
  .nav nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0,0,0,.35); padding: .4rem 1.1rem .8rem; }
  .nav nav.open { display: block; }
  .nav .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav .nav-links li { border-bottom: 1px solid var(--line); }
  .nav .nav-links li:last-child { border-bottom: none; }
  .nav .nav-links a, .nav nav a { display: block; font-size: 1rem; padding: .75rem .2rem; }
  .nav .btn { font-size: .98rem; padding: .45rem 1rem; margin-left: auto; }
}

/* ---------- 5. Page hero ---------- */
.page-hero { padding: 4rem 1.25rem 3rem; max-width: var(--content); margin: 0 auto; }
.page-hero .eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.1rem;
}
.page-hero .eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 700; margin-bottom: 1.2rem; }
.page-lede { font-size: 1.25rem; color: var(--muted); max-width: 62ch; margin: 0; }

/* ---------- 6. Sections ---------- */
.page-section { padding: 3rem 0; border-top: 1px solid var(--line); }
.page-section > .wrap > h2 { margin-bottom: 1rem; }
.page-section .lede { color: var(--muted); max-width: 62ch; font-size: 1.1rem; margin: 0 0 2rem; }
.narrow p { color: var(--muted); font-size: 1.0625rem; }
.narrow h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 2.6rem 0 1rem; }
.narrow h2:first-child { margin-top: 0; }
.narrow h3 { margin-top: 1.8rem; }
.narrow ul, .narrow ol { color: var(--muted); padding-left: 1.4rem; margin: 0 0 1rem; }
.narrow li { margin-bottom: .4rem; }
.section-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

/* ---------- 7. FAQ accordions (homepage style) ---------- */
.accordion { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
details[open] summary::after { content: "-"; }
details p { margin: .7rem 0 0; color: var(--muted); }

/* ---------- 8. Cards ---------- */
.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 1.8rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); margin: 0; font-size: 1rem; }
.card-meta { color: var(--accent); font-weight: 600; font-size: .9rem; margin-bottom: .8rem; }
.includes { list-style: none; margin: 1.2rem 0 1.4rem; padding: 1.1rem 0 0; border-top: 1px solid var(--line); }
.includes li { position: relative; padding-left: 1.7rem; margin-bottom: .6rem; font-size: 1rem; color: var(--ink); }
.includes li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.area-card small { display: block; font-size: .85rem; color: var(--muted); margin-top: .4rem; }

/* ---------- 9. Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips span, .chip {
  background: var(--surface); border: 1px solid var(--line);
  padding: .4rem .9rem; border-radius: 999px; font-size: .95rem;
}

/* ---------- 10. Forms ---------- */
.apex-form { max-width: 640px; }
.form-field { display: grid; gap: .3rem; margin-bottom: 1rem; font-weight: 500; }
.form-field label { font-size: .95rem; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: .7rem .9rem; width: 100%;
}
.form-field textarea { resize: vertical; min-height: 9rem; }
.form-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239FB3B5' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.6rem;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}
.form-field .honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-notice { border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 1rem; }
.form-success { background: var(--soft); color: var(--ink); border: 1px solid var(--accent); }
.form-error { background: transparent; border: 1.5px solid var(--danger); color: var(--danger); font-weight: 600; }
.contact-details { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1.75rem; color: var(--muted); font-size: 1rem; }
.contact-details strong { color: var(--ink); }

/* ---------- 11. Articles ---------- */
.article-featured { margin: 0 0 2rem; }
.article-featured img { border-radius: 14px; border: 1px solid var(--line); }
.article-content { font-size: 1.0625rem; }
.article-content p { color: var(--ink); max-width: 68ch; }
.article-content h2 { margin-top: 2.4rem; }
.article-content ul, .article-content ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.article-content li { margin-bottom: .5rem; }
.article-content a { color: var(--accent); }
.article-content img { border-radius: 12px; margin: 1.5rem 0; }

/* ---------- 12. Closing band ---------- */
.closing { padding: 0 0 3rem; }
.closing-card {
  background: var(--brand); color: var(--brand-ink);
  border-radius: 20px; padding: 2.5rem 2rem;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.closing-card h2 { color: inherit; margin-bottom: .8rem; }
.closing-card p { color: inherit; opacity: .85; margin: 0; max-width: 520px; }
.closing-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.closing-card .btn-primary { background: var(--brand-ink); color: var(--brand); border-color: var(--brand-ink); }
.closing-card .btn-primary:hover { filter: brightness(1.25); }
.closing-card .btn-secondary { background: transparent; color: var(--brand-ink); border: 2px solid var(--brand-ink); }
.closing-card .btn-secondary:hover { filter: brightness(1.1); }

/* ---------- 13. Footer (homepage footer look) ---------- */
.site-footer { padding: 2rem 0 3rem; color: var(--muted); font-size: .9rem; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.footer-menu { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-menu a { text-decoration: none; }
.footer-menu a:hover { color: var(--ink); }

/* ---------- 14. Tables ---------- */
table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 1rem; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--head); font-size: .95rem; color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ---------- 15. Responsive ---------- */
@media (max-width: 900px) {
  .card-grid { grid-template-columns: 1fr; }
  .closing-card { display: block; }
  .closing-actions { margin-top: 1.6rem; }
}
@media (max-width: 640px) {
  .page-hero { padding: 2.75rem 1.25rem 2.25rem; }
  .section-actions .btn { width: 100%; }
  .closing-card { padding: 2rem 1.5rem; }
  .closing-actions .btn { width: 100%; }
  .footer-row { display: block; }
  .footer-row > * { display: block; margin-bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- 16. Easy-read mode (larger text, roomier tap targets) ---------- */
body { font-size: 1.125rem; line-height: 1.7; }
.btn { font-size: 1.0625rem; padding: 1rem 1.75rem; min-height: 54px; }
.nav .btn { font-size: 1.1rem; padding: .65rem 1.3rem; min-height: 0; }
.nav-links a, .nav nav a { font-size: 1rem; }
.page-lede { font-size: 1.375rem; }
.card p { font-size: 1.0625rem; }
summary { font-size: 1.1875rem; padding: 1.4rem 0; }
details p { font-size: 1.0625rem; }
.form-field label { font-size: 1rem; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea { font-size: 1.0625rem; padding: .8rem 1rem; min-height: 54px; }
.site-footer { font-size: 1rem; }
@media (max-width: 640px) {
  .nav-links a, .nav nav a { font-size: .9rem; }
  .nav .btn { font-size: 1rem; padding: .45rem 1rem; }
}