/* ==========================================================================
   ForemanCalc — pages.css
   Page-level layout only. Load after components.css.
   ========================================================================== */


/* ---- Shared page head (breadcrumb, H1, intro) ---- */
.fc-page-head .fc-h1 { margin-top: var(--fc-s-2); }
.fc-page-head .fc-intro { margin-top: var(--fc-s-3); }
.fc-page-head .fc-meta { margin-top: var(--fc-s-3); }


/* ==========================================================================
   Home
   ========================================================================== */
.fc-hero { padding: var(--fc-hero-top) 0 var(--fc-section-y); }
.fc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fc-s-8); align-items: center; }
.fc-hero__copy { min-width: 0; }
.fc-hero__copy .fc-lead { margin-top: var(--fc-s-3); }
.fc-hero__copy .fc-search-form { margin-top: var(--fc-s-6); }
.fc-hero__copy .fc-chip-row { margin-top: var(--fc-s-4); }
@media (min-width: 1024px) {
  .fc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, var(--fc-hero-calc-w)); gap: var(--fc-s-12); }
}

/* FAQ: full container width, contact card on the right from 1024 */
.fc-faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fc-grid-gap); align-items: start; }
@media (min-width: 1024px) {
  .fc-faq-layout { grid-template-columns: minmax(0, 1fr) var(--fc-faq-aside-w); }
}


/* ==========================================================================
   Calculators archive
   ========================================================================== */
.fc-archive-filters { margin-top: var(--fc-s-6); display: flex; flex-direction: column; gap: var(--fc-s-4); }
.fc-archive-filters .fc-field { max-width: 480px; }
.fc-archive-summary { font-size: var(--fc-fs-14); color: var(--fc-text-muted); }
.fc-archive-results { margin-top: var(--fc-s-4); }


/* ==========================================================================
   Category
   ========================================================================== */
.fc-category-tools { margin-top: var(--fc-grid-gap); }
.fc-other-cats__title { margin-bottom: var(--fc-s-3); }


/* ==========================================================================
   Tool page
   <1024: calculator -> sidebar -> article, stacked.
   >=1024: 1fr 320px; sidebar spans both rows.
   Calculator card: form and result side by side when the card's inner width
   is >= 600px (698-1023 and >=1066 viewport). Equal-height rule: the inner
   grid stretches both columns and the checkbox + buttons group is pushed to
   the bottom with margin-top:auto, so Calculate/Reset sit on the bottom edge.
   ========================================================================== */
.fc-tool-intro { margin-top: var(--fc-s-2); max-width: var(--fc-measure); font-size: var(--fc-fs-intro-tool); color: var(--fc-text-muted); text-wrap: pretty; }
.fc-tool-meta { margin-top: var(--fc-s-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--fc-s-1) var(--fc-s-3); font-size: var(--fc-fs-14); color: var(--fc-text-muted); }
.fc-tool-meta__ok { display: flex; align-items: center; gap: var(--fc-s-1); }
.fc-tool-meta__ok .fc-icon { width: 16px; height: 16px; color: var(--fc-success); }

.fc-tool-layout {
  margin-top: var(--fc-s-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "calc" "side" "art";
  gap: var(--fc-grid-gap);
  align-items: start;
}
@media (min-width: 1024px) {
  .fc-tool-layout {
    grid-template-columns: minmax(0, 1fr) var(--fc-sidebar-w);
    grid-template-areas: "calc side" "art side";
    gap: var(--fc-grid-gap) var(--fc-s-12);
  }
}
.fc-tool-layout__calc { grid-area: calc; }
.fc-tool-layout__side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: var(--fc-grid-gap); }
.fc-tool-layout__art { grid-area: art; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: var(--fc-s-6); }

.fc-calc {
  container: fc-calc / inline-size;
  min-width: 0;
  padding: var(--fc-card-pad);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-card);
}
.fc-calc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fc-s-6); align-items: start; }
.fc-calc__form { display: flex; flex-direction: column; gap: var(--fc-s-6); min-width: 0; }
.fc-calc__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fc-s-2) var(--fc-s-3); }
.fc-calc__fields { display: flex; flex-direction: column; gap: var(--fc-s-4); }
.fc-calc__submit { margin-top: auto; display: flex; flex-direction: column; gap: var(--fc-s-4); }
.fc-calc__submit .fc-btn--primary { flex: 1 1 160px; }
.fc-calc__submit .fc-btn--secondary { flex: 0 1 auto; }
@container fc-calc (min-width: 600px) {
  .fc-calc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}
/* Depth help text shows from 640 so the calculator fits the first screen at 390x844 */
@media (max-width: 639.98px) { .fc-calc .fc-field__help--wide { display: none; } }

.fc-tool-section { padding-top: var(--fc-s-6); border-top: 1px solid var(--fc-border); }
.fc-tool-section--first { border-top: 0; }
.fc-tool-section__title { margin-bottom: var(--fc-s-3); }
.fc-tool-section__lead { max-width: var(--fc-measure); margin-bottom: var(--fc-s-3); }
.fc-related__title { margin-bottom: var(--fc-s-3); }


/* ==========================================================================
   Blog archive
   ========================================================================== */
.fc-blog-filters { margin-top: var(--fc-s-6); }
.fc-blog-featured { margin-top: var(--fc-grid-gap); }
.fc-blog-grid { margin-top: var(--fc-grid-gap); }


/* ==========================================================================
   Blog post
   <1024: TOC card above the body. >=1024: 1fr 280px with sticky TOC.
   ========================================================================== */
.fc-post-head { max-width: 760px; }
.fc-post-head .fc-eyebrow { margin-top: var(--fc-s-2); }
.fc-post-head .fc-h1 { margin-top: var(--fc-s-1); }
.fc-post-head .fc-post-lead { margin-top: var(--fc-s-3); max-width: 65ch; font-size: var(--fc-fs-lead-page); color: var(--fc-text-muted); text-wrap: pretty; }

.fc-post-layout { margin-top: var(--fc-grid-gap); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fc-grid-gap) var(--fc-s-12); align-items: start; }
.fc-post-layout__article { min-width: 0; max-width: 720px; }
.fc-post-layout__aside { position: sticky; top: var(--fc-s-6); min-width: 0; }
@media (min-width: 1024px) {
  .fc-post-layout { grid-template-columns: minmax(0, 1fr) var(--fc-toc-w); }
  .fc-post-layout .fc-toc--collapsible { display: none; }
}
@media (max-width: 1023.98px) { .fc-post-layout__aside { display: none; } }

/* Article body */
.fc-prose { font-size: var(--fc-fs-17); }
.fc-prose > p, .fc-prose > ul, .fc-prose > ol { max-width: var(--fc-measure); }
.fc-prose > p + p { margin-top: var(--fc-s-4); }
.fc-prose > h2,
.fc-prose > section > h2 {
  margin-top: var(--fc-s-8);
  margin-bottom: var(--fc-s-3);
  font-family: var(--fc-font-head);
  font-size: var(--fc-fs-h2-content);
  scroll-margin-top: var(--fc-s-4);
}
.fc-prose > h3 { margin-top: var(--fc-s-6); margin-bottom: var(--fc-s-2); font-family: var(--fc-font-head); font-size: var(--fc-fs-22); }
.fc-prose > ul, .fc-prose > ol { margin-top: var(--fc-s-3); padding-left: var(--fc-s-6); display: flex; flex-direction: column; gap: var(--fc-s-2); }
.fc-prose > ul { list-style: disc; }
.fc-prose > ol { list-style: decimal; }
.fc-prose > .fc-table-scroll { margin-top: var(--fc-s-6); }
.fc-prose > .fc-ad-slot { margin-top: var(--fc-s-6); }
.fc-prose .fc-accordion { font-size: var(--fc-fs-16); }

.fc-related-posts { margin-top: var(--fc-section-y); }


/* ==========================================================================
   404
   ========================================================================== */
.fc-404 { padding-top: var(--fc-hero-top); }
.fc-404__intro { max-width: 640px; }
.fc-404__intro .fc-h1 { margin-top: var(--fc-s-2); }
.fc-404__intro .fc-intro { margin-top: var(--fc-s-3); max-width: 60ch; }
.fc-404__intro .fc-search-form { margin-top: var(--fc-s-6); }
.fc-404__intro .fc-btn-row { margin-top: var(--fc-s-4); }
.fc-404__popular { margin-top: var(--fc-section-y); }


/* ==========================================================================
   Search results
   ========================================================================== */
.fc-search-page .fc-search-form { margin-top: var(--fc-s-4); }
.fc-search-page .fc-result-count + .fc-chip-row { margin-top: var(--fc-s-3); }
.fc-search-page .fc-empty { margin-top: var(--fc-s-6); max-width: 840px; }
.fc-search-page .fc-empty--inline { margin-top: var(--fc-s-4); }