/* ===== TOOL & REFERENCE PAGES =====
   /due-date-calculator/, /how-many-weeks-pregnant/, /is-it-safe/

   Layered on tokens.css, which supplies the palette, the self-hosted fonts
   and the shared nav/footer styles. Nothing here redefines a token.

   Note on weights: Sora (--font-accent) is declared 400-600 in tokens.css,
   so 700 would render as synthetic bold. 600 is the top real weight. */

/* ===== LAYOUT ===== */

.tool-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px 80px;
}

.tool-hero {
  text-align: center;
  margin-bottom: 40px;
}

.tool-eyebrow {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin: 0 0 12px;
}

.tool-title {
  font-family: var(--font-display);
  /* DM Serif Display ships a single 400 weight. Without this the UA
     stylesheet's bold on headings makes the browser synthesise one by
     smearing the 400 outline, which flattens the stroke contrast the
     face is chosen for. */
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 2.85rem);
  line-height: 1.15;
  color: var(--text-1);
  margin: 0 0 16px;
}

.tool-lede {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 auto;
  max-width: 46ch;
}

.tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(45, 37, 32, 0.04);
}

.tool-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--text-1);
  margin: 0 0 20px;
}

.tool-prose {
  margin-top: 56px;
}

.tool-prose p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-2);
  margin: 0 0 18px;
}

.tool-prose strong {
  color: var(--text-1);
  font-weight: 700;
}

.tool-prose a,
.entry-readmore a,
.tool-crosslink a {
  color: var(--primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tool-crosslink {
  padding: 16px 20px;
  background: var(--accent-light);
  border-radius: 12px;
}

.tool-disclaimer {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-3);
  text-align: center;
  margin: 24px auto 0;
  max-width: 44ch;
}

/* ===== CALCULATOR FORM ===== */

.calc-methods {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
}

.calc-legend,
.calc-label {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 10px;
  padding: 0;
}

.calc-hint {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 2px;
}

.calc-method-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calc-method {
  position: relative;
  flex: 1 1 auto;
}

/* Visually hidden, but still focusable and still the thing the label drives,
   so keyboard and screen-reader users get a real radio group. */
.calc-method input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.calc-method span {
  display: block;
  text-align: center;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-2);
  background: var(--bg);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.calc-method input:checked + span {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-deep);
  font-weight: 700;
}

.calc-method input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.calc-field {
  margin-bottom: 22px;
}

.calc-field[hidden] {
  display: none;
}

.calc-field-inline {
  display: flex;
  gap: 16px;
}

.calc-input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-body);
  /* 16px minimum, or iOS Safari zooms the page on focus. */
  font-size: 1rem;
  color: var(--text-1);
  background: var(--bg);
}

.calc-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.calc-input-narrow {
  width: 100px;
}

.calc-cycle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calc-unit {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-2);
}

.calc-submit,
.tool-cta-submit {
  width: 100%;
  padding: 15px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.calc-submit:hover,
.tool-cta-submit:hover {
  background: var(--primary-dark);
}

.calc-submit:focus-visible,
.tool-cta-submit:focus-visible {
  outline: 2px solid var(--primary-deep);
  outline-offset: 2px;
}

.calc-error {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #b3261e;
  margin: 0 0 14px;
}

.calc-error[hidden] {
  display: none;
}

/* ===== CALCULATOR RESULT ===== */

.calc-result[hidden] {
  display: none;
}

.calc-result {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.result-eyebrow {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 8px;
}

.result-date {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 2.35rem);
  color: var(--primary-deep);
  margin: 0 0 20px;
  line-height: 1.2;
}

.result-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.result-stat {
  flex: 1 1 130px;
  padding: 14px 12px;
  background: var(--bg);
  border-radius: 12px;
}

.result-stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--text-1);
}

.result-stat-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-2);
  margin-top: 3px;
}

.result-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--border-light);
  overflow: hidden;
  margin-bottom: 10px;
}

.result-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}

.result-note {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

.result-links {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.result-links a {
  color: var(--primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Upcoming gestational-age landmarks, shown under the result. */
.result-milestones {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.result-milestones-label {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 12px;
}

.result-milestones-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.result-milestones-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-light);
}

.result-milestones-list li:last-child {
  border-bottom: 0;
}

.milestone-label {
  font-family: var(--font-accent);
  font-size: 0.9063rem;
  font-weight: 600;
  color: var(--text-1);
}

.milestone-date {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}

.milestone-away {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-3);
}

/* ===== FAQ ===== */

.tool-faq {
  margin-top: 56px;
}

.tool-faq-item {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}

.tool-faq-item summary {
  padding: 16px 0;
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}

.tool-faq-item summary::-webkit-details-marker {
  display: none;
}

.tool-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--text-3);
}

.tool-faq-item[open] summary::after {
  content: '–';
}

.tool-faq-item p {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 0.9688rem;
  line-height: 1.7;
  color: var(--text-2);
}

/* ===== WAITLIST CTA ===== */

.tool-cta {
  /* Target of the nav's "Join Waitlist" button. The nav is fixed, so without
     the offset the jump lands with the heading underneath it. Matches the
     90px used by .article-cta. */
  scroll-margin-top: 90px;
  margin-top: 56px;
  padding: 32px;
  background: var(--accent-light);
  border-radius: 20px;
  text-align: center;
}

.tool-cta-eyebrow {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin: 0 0 10px;
}

.tool-cta-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--text-1);
  margin: 0 0 10px;
}

.tool-cta-desc {
  font-family: var(--font-body);
  font-size: 0.9688rem;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 auto 20px;
  max-width: 40ch;
}

.tool-cta-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 440px;
  margin: 0 auto;
}

.tool-cta-input {
  flex: 1 1 200px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--surface);
  color: var(--text-1);
}

.tool-cta-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.tool-cta-submit {
  width: auto;
  flex: 0 0 auto;
}

/* Honeypot: off-screen rather than display:none, since some bots skip
   anything that is not rendered. Never shown to a real user. */
.tool-cta-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.tool-cta-note {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-3);
  margin: 14px 0 0;
}

/* ===== SAFETY DATABASE ===== */

.db-controls {
  margin-bottom: 22px;
}

.db-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.db-search {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--bg);
  color: var(--text-1);
  margin-bottom: 14px;
}

.db-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 9px;
}

.chip {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 0.8438rem;
  color: var(--text-2);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.chip:hover {
  border-color: var(--primary);
}

.chip[aria-pressed='true'] {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-deep);
  font-weight: 700;
}

.chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.db-count {
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  color: var(--text-3);
  margin: 0 0 12px;
}

.db-empty {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-2);
  text-align: center;
  padding: 28px 16px;
  margin: 0;
}

.db-empty[hidden] {
  display: none;
}

.db-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.row {
  border-bottom: 1px solid var(--border-light);
}

.row[hidden] {
  display: none;
}

.row-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  align-items: center;
  padding: 15px 4px;
  text-decoration: none;
  border-radius: 8px;
}

.row-link:hover {
  background: var(--bg);
}

.row-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.row-name {
  font-family: var(--font-accent);
  font-size: 0.9688rem;
  font-weight: 600;
  color: var(--text-1);
}

.row-why {
  grid-column: 1;
  font-family: var(--font-body);
  font-size: 0.8438rem;
  line-height: 1.5;
  color: var(--text-2);
}

.row-verdict {
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: 5px 11px;
  border-radius: 99px;
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Verdict colours carry a text label as well as a hue, so the verdict is
   never communicated by colour alone. */
.verdict-safe {
  background: var(--secondary-light);
  color: #3f6b4d;
}

.verdict-limit {
  background: var(--accent-light);
  color: #8a5a22;
}

.verdict-avoid {
  background: #fbe9e7;
  color: #a33527;
}

.verdict-ask {
  background: #eaeff5;
  color: #43607f;
}

/* ===== SAFETY ENTRY PAGE ===== */

.entry-main {
  max-width: 640px;
}

.entry-breadcrumb {
  font-family: var(--font-body);
  font-size: 0.8438rem;
  color: var(--text-3);
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.entry-breadcrumb a {
  color: var(--primary-deep);
  text-decoration: none;
}

.entry-breadcrumb a:hover {
  text-decoration: underline;
}

.entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
}

.entry-verdict {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 99px;
  font-family: var(--font-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.entry-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1.25;
  color: var(--text-1);
  margin: 0 0 14px;
}

.entry-limit {
  font-family: var(--font-accent);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--primary-deep);
  padding: 14px 18px;
  background: var(--primary-light);
  border-radius: 12px;
  margin: 0 0 18px;
}

.entry-why,
.entry-detail {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 16px;
}

.entry-readmore {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  margin: 0 0 24px;
}

.entry-sources-title {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 28px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.entry-sources {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-sources li {
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
}

.entry-sources a {
  color: var(--primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-verified {
  display: block;
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 2px;
}

.entry-related {
  margin-top: 48px;
}

.entry-related-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--text-1);
  margin: 0 0 4px;
}

.entry-related-sub {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 22px;
}

.entry-related-group + .entry-related-group {
  margin-top: 18px;
}

.entry-related-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* The verdict is the group heading, so it is always a word. This replaced a
   coloured dot beside each name, which carried the verdict in colour alone. */
.entry-related-label {
  font-family: var(--font-accent);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

.entry-related-rule {
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.entry-related-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.entry-related-items a {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-1);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.entry-related-items a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.entry-related-items a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .entry-related-items a {
    transition: none;
  }
}

/* ===== RESPONSIVE ===== */

@media (max-width: 600px) {
  .tool-main {
    padding: 100px 18px 64px;
  }

  .tool-card,
  .entry,
  .tool-cta {
    padding: 22px 18px;
  }

  .calc-method-row {
    flex-direction: column;
  }

  .row-link {
    grid-template-columns: 1fr;
  }

  .row-verdict {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
    margin-top: 7px;
  }
}

/* Respect a reduced-motion preference: the only transitions here are hover
   affordances, and none of them carry meaning. */
@media (prefers-reduced-motion: reduce) {
  .calc-method span,
  .chip,
  .calc-submit,
  .tool-cta-submit {
    transition: none;
  }
}

/* This week's size comparison — /how-many-weeks-pregnant/ only.
   The payoff that makes this page more than a smaller calculator: it answers
   where you are, then tells you what that week means. */
.baby {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: var(--secondary-light);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 20px;
}

/* Eight weeks have no illustration matching their name, so they render as
   copy alone; centre it rather than leaving a gap where the picture was. */
.baby-textonly {
  text-align: center;
  justify-content: center;
}

.baby-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex: 0 0 auto;
}

.baby-size {
  font-family: var(--font-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}

.baby-dev {
  font-family: var(--font-body);
  font-size: 0.8438rem;
  line-height: 1.55;
  color: var(--text-2);
  margin: 4px 0 0;
}

.calc-aside {
  font-family: var(--font-body);
  font-size: 0.8438rem;
  line-height: 1.6;
  color: var(--text-3);
  text-align: center;
  margin: 14px 0 0;
}

.calc-aside a {
  color: var(--primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 480px) {
  .baby {
    flex-direction: column;
    text-align: center;
  }
}

/* ===== 404 ===== */

/* The 404 is the shortest page on the site, and short enough that on a tall
   window the footer stopped short of the bottom and left a band of background
   under it — 298px at 1280x1440. Scoped to this page rather than applied to
   body globally, because the homepage and article templates are hand-written
   monoliths and giving them a flex body is not a change worth making blind. */
body.page-404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.page-404 .tool-main {
  flex: 1 0 auto;
}

body.page-404 .footer {
  flex-shrink: 0;
}

.notfound-links {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

/* Two across once there is room. Four full-width slabs read as a stack of
   banners; paired, they read as a set of choices. */
@media (min-width: 620px) {
  .notfound-links {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

.notfound-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.notfound-link:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.notfound-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.notfound-link-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
}

/* Arrow on the title rather than the card, so it sits with the words instead
   of floating in whitespace when the two cards in a row differ in height. */
.notfound-link-title::after {
  content: '\2192';
  font-size: 0.875rem;
  color: var(--primary);
  opacity: 0;
  transform: translateX(-3px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.notfound-link:hover .notfound-link-title::after,
.notfound-link:focus-visible .notfound-link-title::after {
  opacity: 1;
  transform: translateX(0);
}

.notfound-link-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-2);
  margin-top: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .notfound-link,
  .notfound-link-title::after {
    transition: none;
  }
  .notfound-link:hover {
    transform: none;
  }
}