/* ==========================================================================
   layout.css
   Structural rules only: the page shell (header/main/footer), the content
   container, and the responsive grid for tool preview cards. No colour
   decisions live here — see base.css / themes.css for those.
   ========================================================================== */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Centres content and caps its width on large screens */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ---- Header ---- */
.site-header {
  border-bottom: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
}

/* ---- Main content ---- */
.site-main {
  flex: 1;
}

/* ---- Hero ----
   Deliberately compact: a heading, one line of supporting copy, and the
   search field. No large decorative imagery — the search field is the
   focal point, since getting to a calculator quickly is the priority. */
.hero {
  padding-block: var(--space-7) var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}

.hero__heading {
  max-width: var(--text-max-width);
}

.hero__subtitle {
  max-width: var(--text-max-width);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
}

/* The workspace call to action, under the search field: a line of supporting
   copy with a real button beside it, so it reads as a second way in rather
   than a footnote. The button is the shared .btn--primary component. */
.hero__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  max-width: var(--text-max-width);
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.search {
  max-width: 36rem;
  margin-top: var(--space-5);
}

.section {
  padding-block: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}

.section:last-of-type {
  border-bottom: none;
}

.section__heading {
  margin-bottom: var(--space-4);
}

/* Responsive grid for tool preview cards:
   1 column on small screens, 2 on medium, 3 on wide.
   minmax(0, 1fr) rather than 1fr: a bare 1fr track has an automatic minimum,
   so one card with a long unbroken formula would set the column width for the
   whole row — and on a phone that overflows the screen. */
.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about {
  max-width: var(--text-max-width);
}

/* ---- Long-form text pages -------------------------------------------------
   Used by the information pages (About, Contact, Privacy, Cookies, Terms,
   Disclaimer) and the 404 page. .section supplies the banded layout; .prose
   keeps the measure readable and restores list markers, which the reset in
   base.css removes. */
.prose {
  max-width: var(--text-max-width);
}

.prose h2 {
  margin-top: var(--space-6);
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--space-5);
}

.prose p,
.prose li {
  color: var(--color-text-secondary);
}

.prose strong {
  color: var(--color-text);
}

.prose ul,
.prose ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-5);
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-bottom: var(--space-1);
}


/* ---- Footer ---- */
.site-footer {
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-7);
}

.site-footer__inner {
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ---- Small-screen adjustments ---- */
@media (max-width: 639px) {
  .site-header__inner {
    flex-wrap: wrap;
    row-gap: var(--space-3);
  }

  .site-nav__list {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .hero {
    padding-block: var(--space-6) var(--space-5);
  }
}