/* =========================================
   The Dad Ledger — site.css (FULL)
   Page + hero + topic cards + parenting layout
   ========================================= */

:root{
  --ink: #002346;
  --cta: #005DBA;
  --bg: #ffffff;

  --brand: #1F3249;

  /* Topic / sidebar card color */
  --sand: #E9E5D9;

  /* Optional */
  --line: rgba(0,0,0,.10);
}
/* Sticky footer layout */
html, body{
  height: 100%;
}

body{
  display: flex;
  flex-direction: column;
}

/* Main content grows to fill space */
main.page{
  flex: 1;
}


*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, sans-serif;
}

img{ max-width: 100%; display: block; }

/* Page full-width with 20px side padding */
.page{
  width: 100%;
  padding: 24px 20px;
}
/* Start Here special styling */
.article-top-cards .section-card:last-child{
  background: #ffffff;                 /* ✅ white */
  border: 1px solid rgba(0,0,0,.15);    /* ✅ light gray border */
}
.muted{
  font-weight: 600;
  color: rgba(31,50,73,.65);
}
/* White variant for Start Here card */
.start-here-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.15);
}


/* ---------------------------------
   HERO ROW (50 / 50 split)
--------------------------------- */
.hero-row{
  display: flex;
  gap: 5px;                 /* ✅ 5px gap */
  width: 100%;
  max-height: 373px;        /* desktop hero height */
}

/* Stack on smaller screens */
@media (max-width: 900px){
  .hero-row{
    flex-direction: column;
    max-height: none;
  }
}

/* ---------------------------------
   HERO CARD
--------------------------------- */
.card.hero-card{
  width: 50%;
  height: 373px;
  background: #002346;
  color: #ffffff;
  display: flex;
  align-items: center;      /* keep vertical centering */
  overflow: hidden;
}

.card-content{
  padding: 24px;
}

.card-content h1{
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.15;
}

.card-content p{
  margin: 0 0 16px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.55;
}

.card-content em{
  font-style: italic;
  margin: 0 0 16px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.55;
}

/* CTA button (square corners) */
.button.cta{
  display: inline-block;
  background: var(--cta);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  text-decoration: none;
  border-radius: 0;        /* ✅ square */
}

.button.cta:hover{
  filter: brightness(.95);
}

/* ---------------------------------
   HERO IMAGE
--------------------------------- */
.hero-image{
  width: 50%;
  height: 373px;
  overflow: hidden;
}

.hero-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile hero sizing */
@media (max-width: 900px){
  .card.hero-card{
    width: 100%;
    height: auto;           /* let content define height */
  }

  .hero-image{
    width: 100%;
    height: 260px;
  }

  .hero-image img{
    height: 100%;
    object-fit: cover;
  }
}

/* ---------------------------------
   HOME: TOPIC CARDS GRID (square, no border)
--------------------------------- */
.topic-cards{
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px){
  .topic-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px){
  .topic-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .topic-cards{ grid-template-columns: 1fr; }
}

.topic-cards .info-card{
  background: var(--sand);
  color: var(--brand);
  padding: 18px;
  border: none;
  border-radius: 0;         /* ✅ square */
  box-shadow: none;
}

.topic-cards .info-card h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
}

.topic-cards .info-card p{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--brand);
}

/* Quote card */
.topic-cards .info-card.advice-card{
  grid-column: span 2;
  padding: 20px;
}

@media (max-width: 800px){
  .topic-cards .info-card.advice-card{ grid-column: span 1; }
}

/* ---------------------------------
   PARENTING PAGE: 2/3 + 1/3 layout
   Left: top cards + article
   Right: Previous Topics + Most Popular
--------------------------------- */
.content-row{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.left-col{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top cards inside left column */
.article-top-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Shared card style for: In This Section / Start Here / Previous Topics / Most Popular */
.section-card{
  background: var(--sand);
  color: var(--brand);
  border: none;
  border-radius: 0;
  padding: 16px;
}

/* Core Framework: In This Section links should be black + underlined */
.section-card-core a.section-link,
.section-card-core a.section-link:visited{
  color: #1F3249;           /* your site text color */
  text-decoration: underline;
}

.section-card-core a.section-link:hover{
  color: #1F3249;
  text-decoration: underline;
}

.section-card-title{
  margin: 0 0 10px;
  font-size: 15px;      /* ✅ Previous Topics matches Most Popular */
  font-weight: 700;
  color: var(--brand);
}

/* In This Section bullets */
.section-bullets{
  margin: 0;
  padding-left: 18px;
}

.section-bullets li{
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--brand);
}
/* Core Framework snippet accordion under In This Section links */
.tool-link-row{ margin-bottom: 6px; }

.tool-snippet{
  display:none;
  margin: 8px 0 10px 18px; /* indent under bullet */
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(31,50,73,.18);
}

.tool-snippet.is-open{ display:block; }

.tool-snippet ul{ margin: 8px 0 0 18px; }
.tool-snippet li{ margin: 4px 0; }

/* Start Here text/link */
.start-here-copy{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--brand);
}

.start-here-link{
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: var(--brand);
}

.start-here-link:hover{
  text-decoration: underline;
}

/* Article body (safe defaults if you don't already have these elsewhere) */
.article-body{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 0;
  padding: 18px 18px;
}

.article-title{
  margin: 0 0 12px;
  color: var(--brand);
  font-size: 24px;
  line-height: 1.2;
}

.article-subhead{
  margin: 18px 0 8px;
  color: var(--brand);
  font-size: 18px;
}

.article-body p{
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #0b1a33;
}

.article-body ul{
  margin: 8px 0 12px 20px;
  padding: 0;
}

.article-body li{
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.6;
}
.article-image {
  float: left;
  width: 320px;
  max-width: 40%;
  margin: 0 0 10px 0px;
  padding-right: 20px;
}

@media (max-width: 768px) {
  .article-image {
    float: none;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 20px;
  }
}

/* Right sidebar stack */
.sidebar{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Link list styling for Previous/Popular */
.previous-topics-list{
  list-style: none;
  margin: 0;
  padding: 0;
}


.prev-link{
  display: block;
  padding: 4px 6px;     /* tighter spacing */
  text-decoration: none;
  color: var(--brand);
  font-weight: 400;
  font-size: 13px;     /* ✅ match In This Section */
  line-height: 1.4;    /* tighter line height */
}



.prev-link:hover{
  text-decoration: underline;
}

/* Mobile stacking for parenting layout */
@media (max-width: 900px){
  .content-row{
    grid-template-columns: 1fr;
  }

  .article-top-cards{
    grid-template-columns: 1fr;
  }
}
/* Framework Tools accordion */
.framework-tools .tool-item{
  margin-top: 8px;
}

.framework-tools .tool-toggle{
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 4px 6px;
  font-size: 13px;          /* match In This Section size */
  line-height: 1.4;
  color: var(--brand);
  font-weight: 400;
  cursor: pointer;
}

.framework-tools .tool-toggle:hover{
  text-decoration: underline;
}

.framework-tools .tool-panel{
  margin: 6px 6px 0;
  padding: 10px 10px;
  background: rgba(255,255,255,.45);
}

.framework-tools .tool-panel p{
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--brand);
}

.framework-tools .tool-panel ul{
  margin: 0 0 6px 18px;
  padding: 0;
}

.framework-tools .tool-panel li{
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--brand);
}

.framework-tools .tool-note{
  margin-top: 8px;
  color: rgba(31,50,73,.75);
  font-size: 13px;
}

.framework-tools .tool-download{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.10);
}

.framework-tools .download-link{
  display: inline-block;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}

.framework-tools .download-link:hover{
  text-decoration: underline;
}
/* Dad Ledger accordion */
.dl-acc{
  border: 1px solid rgba(31,50,73,.18);
  background: #ffffff;
  margin: 12px 0;
}

.dl-acc > summary{
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  color: #1F3249;
  list-style: none;
}

.dl-acc > summary::-webkit-details-marker{ display:none; }

.dl-acc-body{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(31,50,73,.12);
}

.dl-download-link{
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid rgba(31,50,73,.25);
  color: #1F3249;
  text-decoration: none;
}

.dl-download-link:hover{ text-decoration: underline; }
/* Accordion (details/summary) baseline */
.article-body details {
  border: 1px solid rgba(31,50,73,.18);
  background: #fff;
  margin: 12px 0;
}

.article-body summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  color: #1F3249;
  user-select: none;
  list-style: none;
}

.article-body summary::-webkit-details-marker { display: none; }

.article-body details[open] summary {
  border-bottom: 1px solid rgba(31,50,73,.12);
}

.dl-acc-body {
  padding: 12px 14px 14px;
}
.dl-download-link:hover{ text-decoration: underline; }

/* Accordion (details/summary) baseline */
.article-body details{
  border: 1px solid rgba(31,50,73,.18);
  background: #fff;
  margin: 12px 0;
}

.article-body summary{
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 700;
  color: #1F3249;
  user-select: none;
  list-style: none;
}

.article-body summary::-webkit-details-marker{ display:none; }

.article-body details[open] summary{
  border-bottom: 1px solid rgba(31,50,73,.12);
}

.dl-acc-body{
  padding: 12px 14px 14px;
}
/* Inline accordion inside "In This Section" card */
.dl-inline-acc { margin: 0; padding-left: 18px; }
.dl-inline-item { margin-bottom: 6px; }

/* Make the inline accordion toggles look like links */
.dl-inline-toggle{
  appearance: none;
  border: 0;
  background: none;
  color: #1F3249;
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;      /* ✅ underline */
}

.dl-inline-toggle:hover{
  opacity: .8;
}


.dl-inline-panel{
  margin-top: 6px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(31,50,73,.18);
}

.dl-download-link{
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid rgba(31,50,73,.25);
  color: #1F3249;
  text-decoration: none;
}

.dl-download-link:hover{ text-decoration: underline; }
/* Underline framework navigation links */
.section-link{
  text-decoration: underline;
}
.section-link:hover{
  opacity: .8;
}
.prev-link{
  text-decoration: underline;
}
.prev-link:hover{
  opacity: .8;
}
.dl-divider{
  border: 0;
  border-top: 1px solid rgba(31,50,73,.15);
  margin: 22px 0 12px;
}

.dl-why-title{
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1F3249;
  margin-bottom: 6px;
}
.info-card{
  text-decoration: none;
  color: #1F3249;
}

.info-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
/* Core Framework accordion panels */
.tool-panel{
  display:none;
  margin-top:10px;
  padding:14px 16px;
  background:#fff;
  border:1px solid rgba(31,50,73,.18);
}

.tool-panel.is-open{
  display:block;
}
.tool-panel{
  display:none;
  margin-top:10px;
}
.tool-panel.is-open{
  display:block;
}