/* Homeschool Curriculum Architect: site theme
   Loaded after each page's own <style> block, so these rules restyle the
   existing markup without changing layout or content. */

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap');

:root{
  /* Original variable names, remapped to the new palette */
  --cream: #FFFFFF;
  --cream-deep: #F4F5F9;
  --navy: #1E4FA8;
  --charcoal: #1A1A2E;
  --gold: #1E4FA8;
  --gold-soft: #F4F5F9;
  --line: #E3E6EF;
  --white: #FFFFFF;

  /* New tokens */
  --hca-blue: #1E4FA8;
  --hca-blue-deep: #163C82;
  --hca-ink: #1A1A2E;
  --hca-body: #3D3D52;
  --hca-muted: #5E5E72;
  --hca-cloud: #F4F5F9;
  --hca-line: #E3E6EF;
  --hca-lavender: #CDB8EC;
  --hca-butter: #F7EE8E;
  --hca-mint: #9FE0CB;
  --hca-blush: #F7A8B4;
  --hca-head: 'League Spartan', 'Trebuchet MS', sans-serif;
  --hca-text: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
}

body{
  background: #FFFFFF;
  color: var(--hca-ink);
  font-family: var(--hca-text);
}

a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 3px solid var(--hca-blue);
  outline-offset: 3px;
}

/* ---------- Header ---------- */
.logo, .logo:hover{
  background: transparent;
  border: 0;
  padding: 0;
}
.logo .lines{ font-family: var(--hca-head); letter-spacing: 0; }
.logo .lines div{ text-transform: none; line-height: 1.08; }
.logo .lines div:first-child{ font-size: 21px; font-weight: 700; color: var(--hca-blue); }
.logo .lines div:last-child{ font-size: 16px; font-weight: 600; color: var(--hca-ink); }

nav.site-nav{ align-items: center; gap: 8px 28px; }
nav.site-nav a{
  font-family: var(--hca-text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hca-ink);
  border-bottom: 3px solid transparent;
  padding-bottom: 2px;
}
nav.site-nav a:hover{ border-bottom-color: var(--hca-butter); }
nav.site-nav a:last-child{
  color: var(--hca-blue);
  background: var(--hca-cloud);
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
nav.site-nav a:last-child:hover{ background: #E8EBF4; }

/* ---------- Type ---------- */
h1, h2, h1.headline, h1.listing-title, h1.post-title, .post-body h2, .post-card h2, .group-head, .form-card h2, .price-tag{
  font-family: var(--hca-head);
  letter-spacing: -0.005em;
}
h1, h1.headline, h1.listing-title, h1.post-title{ color: var(--hca-blue); font-weight: 800; }
h2{ color: var(--hca-ink); font-weight: 700; }

.eyebrow, .section-kicker, .post-kicker{
  font-family: var(--hca-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--hca-blue);
}

p, li,
.subheadline, .lede, .framing-copy, .promise, .included-list li, .band-note,
.step p, .form-card p, .listing-lede, .post-card p, .intro, .note{
  color: var(--hca-body);
}
.price-note, .sample-note, .fine-print, .effective, footer p, footer a{
  color: var(--hca-muted);
}
.fine-print, footer p{ font-family: var(--hca-text); font-size: 14px; letter-spacing: 0; }
.hidden-field{ display: none; }

/* ---------- Buttons ---------- */
.btn, button.btn{
  font-family: var(--hca-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 14px;
  border: 2px solid var(--hca-blue);
  padding: 13px 26px;
  min-height: 52px;
  line-height: 1.5;
}
.btn{ background: var(--hca-blue); color: #FFFFFF; }
.btn:hover, .btn-primary:hover{ background: var(--hca-blue-deep); border-color: var(--hca-blue-deep); color: #FFFFFF; }
.btn-primary{ background: var(--hca-blue); color: #FFFFFF; }
.btn-secondary{ background: #FFFFFF; color: var(--hca-blue); }
.btn-secondary:hover{ background: var(--hca-cloud); color: var(--hca-blue); border-color: var(--hca-blue); }

/* ---------- Forms ---------- */
.field-input, .hca-popup-input{
  background: #FFFFFF;
  border: 2px solid var(--hca-blue);
  border-radius: 14px;
  padding: 12px 16px;
  min-height: 52px;
  font-family: var(--hca-text);
  font-size: 16px;
  color: var(--hca-ink);
}
.field-input:focus, .hca-popup-input:focus{ outline: 3px solid var(--hca-butter); outline-offset: 1px; }

/* ---------- Homepage and Compass page ---------- */
.hero, section{ border-bottom: 0; }
h1.headline{ font-size: clamp(36px, 5.4vw, 60px); line-height: 1.05; }
.subheadline{ font-size: 20px; line-height: 1.6; }

.hero + section{ box-shadow: 0 0 0 100vmax var(--hca-cloud); clip-path: inset(0 -100vmax); background: var(--hca-cloud); }

.fit-card{
  background: #FFFFFF;
  border: 0;
  border-radius: 20px;
  padding: 24px 26px;
  font-size: 16.5px;
  align-items: flex-start;
  gap: 16px;
}
.fit-card .mark{
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--hca-mint);
  color: #12352B;
  font-family: var(--hca-text);
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

.hero + section .promise{ background: #FFFFFF; }
.promise{
  border-left: 0;
  background: var(--hca-cloud);
  border-radius: 20px;
  padding: 22px 26px;
}

table.compare{
  font-family: var(--hca-text);
  font-size: 15.5px;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--hca-line);
  border-radius: 24px;
  overflow: hidden;
}
table.compare th, table.compare td{ border: 0; border-top: 1px solid var(--hca-line); padding: 16px 20px; }
table.compare tr:first-child th{ border-top: 0; }
table.compare th{
  background: #FFFFFF;
  color: var(--hca-ink);
  font-family: var(--hca-head);
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
}
table.compare th.highlight{ background: var(--hca-blue); color: #FFFFFF; }
table.compare td.highlight{ background: var(--hca-cloud); color: var(--hca-blue); font-weight: 700; }
table.compare tr td:first-child{ background: #FFFFFF; color: var(--hca-ink); font-weight: 700; }

#compass{
  box-shadow: 0 0 0 100vmax var(--hca-blue);
  clip-path: inset(0 -100vmax);
  background: var(--hca-blue);
  color: #FFFFFF;
}
#compass h2, #compass p, #compass .lede, #compass li{ color: #FFFFFF; }
#compass .section-kicker{ color: var(--hca-butter); }
#compass a:not(.btn){ color: #FFFFFF !important; }
#compass .btn-primary{ background: #FFFFFF; color: var(--hca-blue); border-color: #FFFFFF; }
#compass .btn-primary:hover{ background: var(--hca-cloud); border-color: var(--hca-cloud); color: var(--hca-blue); }
#compass .btn-secondary{ background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
#compass .btn-secondary:hover{ background: rgba(255,255,255,0.12); color: #FFFFFF; }

.card-section{ background: transparent; }
.form-card{
  background: var(--hca-cloud);
  border: 0;
  border-radius: 28px;
  padding: 40px 40px 34px;
}
#lead-magnet .form-card{
  background: var(--hca-lavender);
  max-width: none;
  border-radius: 32px;
  padding: 52px 44px 40px;
}
#lead-magnet .form-card h2, #lead-magnet .form-card p{ color: var(--hca-ink); }
.form-card h2{ font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }

.included-list li:before{ color: #12352B; background: var(--hca-mint); border-radius: 999px; width: 20px; height: 20px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; top: 2px; }
.price-tag{ color: var(--hca-blue); font-weight: 800; }
.sample-item{ border: 2px solid var(--hca-line); border-radius: 20px; overflow: hidden; }
.sample-item img{ border-bottom: 1px solid var(--hca-line); }
.sample-item .cap{ font-family: var(--hca-text); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hca-blue); padding: 12px 14px; }
.step .num{ font-family: var(--hca-head); color: var(--hca-lavender); -webkit-text-stroke: 0; font-weight: 800; }
.step strong, strong{ color: var(--hca-blue); }
.band-note a, a{ color: var(--hca-blue); }

/* ---------- Guides page ---------- */
.listing-hero{
  border-bottom: 0;
  box-shadow: 0 0 0 100vmax var(--hca-cloud);
  clip-path: inset(0 -100vmax);
  background: var(--hca-cloud);
  padding: 56px 0 52px;
  margin-top: 8px;
}
h1.listing-title{ font-size: clamp(36px, 5vw, 56px); line-height: 1.05; }
.listing-lede{ font-size: 19px; }

.group-head{
  color: var(--hca-ink);
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: 0;
  border-bottom: 0;
  margin: 64px 0 -16px;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.group-head::before{
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--dot, var(--hca-lavender));
  border: 2px solid var(--dot-edge, #2E1F4A);
}
h2.group-head:nth-of-type(1){ --dot: var(--hca-lavender); --dot-edge: #2E1F4A; }
h2.group-head:nth-of-type(2){ --dot: var(--hca-mint); --dot-edge: #12352B; }
h2.group-head:nth-of-type(3){ --dot: var(--hca-blush); --dot-edge: #4A1620; }
h2.group-head:nth-of-type(4){ --dot: var(--hca-butter); --dot-edge: #3D3606; }

.post-grid{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post-card{
  background: #FFFFFF;
  border: 2px solid var(--hca-line);
  border-radius: 22px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.post-card:hover{ border-color: var(--hca-blue); }
.post-card h2{ color: var(--hca-blue); font-size: 22px; line-height: 1.2; }
.post-card p{ font-size: 16px; flex-grow: 1; }
.post-card .read-more{
  font-family: var(--hca-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hca-blue);
}

/* ---------- Guide pages ---------- */
article.post{ margin-left: auto; margin-right: auto; padding-top: 0; }
.post-kicker{
  margin: 8px 0 0;
  padding-top: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 0 100vmax var(--hca-cloud);
  clip-path: inset(0 -100vmax);
  background: var(--hca-cloud);
}
.post-kicker::before{
  content: "";
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--dot, var(--hca-lavender));
  border: 2px solid var(--dot-edge, #2E1F4A);
}
.post-kicker.topic-time{ --dot: var(--hca-lavender); --dot-edge: #2E1F4A; }
.post-kicker.topic-tools{ --dot: var(--hca-mint); --dot-edge: #12352B; }
.post-kicker.topic-standards{ --dot: var(--hca-blush); --dot-edge: #4A1620; }
.post-kicker.topic-households{ --dot: var(--hca-butter); --dot-edge: #3D3606; }
h1.post-title{
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.08;
  margin: 0 0 52px;
  padding: 18px 0 52px;
  box-shadow: 0 0 0 100vmax var(--hca-cloud);
  clip-path: inset(0 -100vmax);
  background: var(--hca-cloud);
}
.post-body p{ font-size: 18px; line-height: 1.75; color: var(--hca-ink); }
.post-body h2{ color: var(--hca-blue); font-size: 26px; line-height: 1.2; margin: 44px 0 18px; }
.post-body a{ color: var(--hca-blue); font-weight: 700; text-decoration-color: var(--hca-butter); text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* ---------- Simple pages (404, thank you, order confirmed, terms) ---------- */
.doc-head{ border-bottom: 1px solid var(--hca-line); }
.note{ border-left: 0; background: var(--hca-cloud); border-radius: 20px; }

/* ---------- Footer ---------- */
footer{ border-top: 1px solid var(--hca-line); }

/* ---------- Lead popup ---------- */
.hca-popup-overlay{ background: rgba(26, 26, 46, 0.55); }
.hca-popup-card{
  border: 0;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(26, 26, 46, 0.28);
}
.hca-popup-close{ color: var(--hca-ink); }
.hca-popup-close:hover{ color: var(--hca-blue); }
.hca-popup-kicker{ font-family: var(--hca-text); font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--hca-blue); }
.hca-popup-card h2{ font-family: var(--hca-head); font-weight: 700; color: var(--hca-blue); font-size: 26px; line-height: 1.15; }
.hca-popup-card p{ font-size: 16px; color: var(--hca-body); }
.hca-popup-btn{
  font-family: var(--hca-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 14px;
  border: 2px solid var(--hca-blue);
  background: var(--hca-blue);
  color: #FFFFFF;
  min-height: 52px;
}
.hca-popup-btn:hover{ background: var(--hca-blue-deep); opacity: 1; }
.hca-popup-fine-print, .hca-popup-buy{ font-family: var(--hca-text); font-size: 14px; letter-spacing: 0; color: var(--hca-muted); }
.hca-popup-buy{ border-top-color: var(--hca-line); }
.hca-popup-buy a{ color: var(--hca-blue); font-weight: 700; text-decoration-color: var(--hca-butter); }

@media (max-width: 640px){
  table.compare{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fit-card{ padding: 20px; }
  #lead-magnet .form-card, .form-card{ padding: 32px 22px 26px; border-radius: 24px; }
  table.compare{ font-size: 14px; }
  table.compare th, table.compare td{ padding: 12px 12px; }
}