/* Articles page helpers (kept separate to avoid affecting calculators) */

.articles-layout{
  /* uses .calc-layout from styles.css; this file only adjusts ratios */
}
@media (min-width: 980px){
  .articles-layout{ grid-template-columns: 1.15fr 0.85fr; }
}

.articles-grid{
  display: grid;
  gap: 16px;
}
@media (min-width: 900px){
  .articles-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Better mobile tap targets + layout for the hero buttons */
@media (max-width: 520px){
  .hero-actions .btn{
    width: 100%;
  }
}

/*
  In-page jump links (anchors like #latest, #tools)
  Use a softer, tinted style so it reads as “scroll down”, not a primary CTA.
*/
.btn-inpage,
.btn-explore{
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 18%, var(--surface)),
    color-mix(in srgb, var(--primary) 6%, var(--surface))
  );
  color: color-mix(in srgb, var(--text) 84%, var(--primary));
}
.btn-inpage:hover,
.btn-explore:hover{
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 24%, var(--surface)),
    color-mix(in srgb, var(--primary) 10%, var(--surface))
  );
}

/* When jumping to sections, keep anchors visible under the sticky header */
#latest,
#tools,
#topics,
#investing,
#parents{
  scroll-margin-top: calc(var(--header-h) + 14px);
}

.article-card{
  border: 1px solid var(--border);
  background: var(--panel-bg);
  border-radius: var(--radius-md);
  padding: 16px;
  overflow-wrap: anywhere;

  /* Improve readability by spacing the card content consistently */
  display: grid;
  gap: 12px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.article-card.is-hidden{
  display: none;
}

.article-card.is-filtered{
  display: none;
}

.article-card:hover{
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  box-shadow: var(--panel-shadow-hover);
  transform: translateY(-2px);
}

.article-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.86rem;
}

.article-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.article-jump a.chip:visited{
  color: var(--link);
}

.article-filter-bar{
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  display: grid;
  gap: 10px;
}

.article-search{
  position: relative;
  display: grid;
  align-items: center;
}

.article-search input{
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  padding-right: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
}

.article-search input:focus-visible{
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 0 0 3px var(--focus);
}

.article-search input::-webkit-search-cancel-button{
  -webkit-appearance: none;
  display: none;
}

.article-search-clear{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.article-search-clear:hover{
  border-color: var(--border-strong);
  color: var(--text);
}

.article-search-clear:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.article-filter-bar .small{
  margin: 0;
}

.article-filter-bar .article-empty{
  margin-top: 0;
}

.article-pagination{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.article-pagination .chip[aria-current="page"]{
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: color-mix(in srgb, var(--text) 90%, var(--primary));
}

@media (min-width: 720px){
  .article-filter-bar{
    position: sticky;
    top: calc(var(--header-h) + 8px);
    z-index: 5;
    backdrop-filter: blur(12px);
  }
  .article-search{
    max-width: 320px;
  }
}

@media (min-width: 900px){
  .article-filter-bar{
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .article-filter-bar .small,
  .article-filter-bar .article-empty{
    grid-column: 1 / -1;
  }
}

.article-empty{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: var(--panel-bg-soft);
}

.article-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 720px){
  .article-filters{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .article-filters .chip{
    white-space: nowrap;
  }
  .article-filter-bar{
    position: relative;
  }
  .article-search{
    order: 1;
  }
  .article-filters{
    order: 2;
  }
  .article-filter-bar .small{
    order: 3;
  }
  .article-filter-bar .article-empty{
    order: 4;
  }
  .article-search input{
    font-size: 1rem;
  }
  .article-jump{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .article-jump .chip{
    white-space: nowrap;
  }
}

.article-filters .chip{
  cursor: pointer;
  font-family: inherit;
  appearance: none;
}

.article-filters .chip:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.article-filters .chip[aria-pressed="true"]{
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: color-mix(in srgb, var(--text) 90%, var(--primary));
}

.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-decoration: none;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.chip:hover{
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.chip--guide{
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
}

.chip--news{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
}

.chip--draft{
  border-style: dashed;
  opacity: 0.9;
}

/* Tool chips (links) should look clickable + themed */
.chip--tool{
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: color-mix(in srgb, var(--text) 88%, var(--primary));
}
.chip--tool:hover{
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

a.chip{
  color: var(--link);
}

a.chip:hover{
  color: var(--link-hover);
}

.article-title{
  margin: 0;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.article-title a{
  text-decoration: none;
}

.article-title a:hover{
  text-decoration: underline;
}

.article-excerpt{
  margin: 0;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  line-height: 1.55;
}

.article-footer{
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.article-tools{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tool-list{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

/* When the calculators are shown as a bottom section, make them flow in columns on larger screens. */
.tool-list--grid{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (max-width: 520px){
  .tool-list--grid{ grid-template-columns: 1fr; }
}

.tool-link{
  display: block;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  /*
    Perfect left accent:
    Using a layered background avoids the pseudo-element corner scaling issue
    (a 4px-wide element cannot keep a 14px radius without distortion).
  */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary) 75%, white),
      var(--primary)
    ) 0 0 / 4px 100% no-repeat,
    var(--panel-bg-soft);
  background-origin: padding-box;
  background-clip: padding-box;
  border-radius: var(--radius-md);
  padding: 12px;
  text-decoration: none;
  color: inherit;
  overflow-wrap: anywhere;
  position: relative;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.tool-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
}

.tool-link:hover{
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: var(--panel-shadow-hover);
  transform: translateY(-2px);
}

.tool-link .tl-title{
  font-weight: 900;
}

.tool-link .tl-desc{
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Mobile polish */
@media (max-width: 520px){
  .article-card{ padding: 14px; gap: 10px; }
  .article-footer{ flex-direction: column; align-items: flex-start; }
  .article-tools{ width: 100%; }
  .hero .hero-card{ padding: 20px 18px; }
  .breadcrumbs{ font-size: 0.85rem; }
  .post-meta{ gap: 6px; }
  .post-meta .small{ flex-basis: 100%; }
  .article-meta{ gap: 6px; font-size: 0.82rem; }
  .article-meta .small{ flex-basis: 100%; }
  .post-meta .chip,
  .article-meta .chip{
    padding: 3px 8px;
    font-size: 0.74rem;
  }
}


/* Extra chip type for “tips & tactics” */
.chip--tactic{
  border-color: color-mix(in srgb, var(--accent-2) 55%, var(--border));
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}

.chip--explainer{
  border-color: color-mix(in srgb, var(--primary-2) 45%, var(--border));
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}

.chip--investing{
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}

/* ------------------------------------------------------------------ */
/* Article (post) pages */
/* ------------------------------------------------------------------ */

/* Keep post pages comfortably readable (especially on desktop). */
.post-stack{
  display: grid;
  gap: 14px;
  align-items: start;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* Consistent link color inside article content + the articles listing.
   Scoped to main content to avoid affecting header menus.
   Uses the site's primary color for brand consistency. */
.articles-page main a:not(.btn):not(.chip):not(.tool-link){
  color: var(--link);
}
.articles-page main a:not(.btn):not(.chip):not(.tool-link):hover{
  color: var(--link-hover);
}

.post-layout{
  /* Uses .calc-layout base grid from styles.css */
}
@media (min-width: 980px){
  .post-layout{ grid-template-columns: 1.15fr 0.85fr; }
}

.breadcrumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 10px 0;
}
.breadcrumbs a{
  color: var(--link);
}

.post{
  overflow-wrap: anywhere;
}
.post .post-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.post h1{
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}
.post h2{
  margin-top: 18px;
}
.post p{
  line-height: 1.68;
}
.post .toc{
  border: 1px dashed var(--border);
  background: var(--panel-bg-soft);
  border-radius: var(--radius-md);
  padding: 12px;
}
.post .toc summary{
  cursor: pointer;
  font-weight: 850;
}
.post .toc ol{
  margin: 10px 0 0 18px;
}
.post .cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 14px 0 0 0;
}

/* Responsive table wrapper (prevents horizontal overflow on mobile) */
.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}
.table-wrap table{
  width: 100%;
  border-collapse: collapse;
  min-width: 520px; /* ensures readable columns, scrolls on small screens */
}
.table-wrap th,
.table-wrap td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table-wrap th{
  text-align: left;
  color: var(--muted);
  font-size: 0.88rem;
}
.table-wrap td.num{
  text-align: right;
  white-space: nowrap;
}

.table-figure{
  margin: 14px 0;
}
.table-figure figcaption{
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.table-wrap--stack table{
  min-width: 0;
}

@media (max-width: 720px){
  .table-wrap--stack{
    overflow: visible;
  }
  .table-wrap--stack table{
    min-width: 0;
  }
  .table-wrap--stack thead{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .table-wrap--stack table,
  .table-wrap--stack tbody,
  .table-wrap--stack tr,
  .table-wrap--stack th,
  .table-wrap--stack td{
    display: block;
    width: 100%;
  }
  .table-wrap--stack tr{
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
  .table-wrap--stack tr:last-child{
    border-bottom: none;
  }
  .table-wrap--stack th,
  .table-wrap--stack td{
    border: 0;
    padding: 6px 0;
  }
  .table-wrap--stack th[scope="row"]{
    font-weight: 800;
  }
  .table-wrap--stack td::before{
    content: attr(data-label);
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 2px;
  }
  .table-wrap--stack td.num{
    text-align: left;
    white-space: normal;
  }
}

/* Mobile polish */
@media (max-width: 520px){
  .post h1{ font-size: 1.55rem; }
  .table-wrap{ border-radius: var(--radius-sm); }
  .post .cta-row .btn{ width: 100%; }
}