/* ═══════════════════════════════════════════════
   CuttingTies.ai — Site layout (public site)
   Requires: tokens.css + base.css
   Header, footer, hero, cards, guide template.
   Mobile first, no JS dependencies.
   ═══════════════════════════════════════════════ */

/* ── Page shell ── */
.shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
@media (min-width: 600px) {
  .shell { padding: 0 var(--space-xl); }
}

/* ── Header ── */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--border-light);
}
.site-header .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.site-logo { display: flex; align-items: center; gap: 8px; }
.site-logo img { height: 24px; width: auto; }
.site-logo .beta-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}
.site-nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  box-shadow: 0 2px 0 var(--gold);
}

/* ── Hero (front page only — the ONLY dark section) ── */
.hero {
  background: var(--navy);
  color: var(--on-navy);
  padding: var(--space-3xl) 0;
  border-bottom: 2px solid var(--gold);
}
@media (min-width: 700px) {
  .hero { padding: var(--space-4xl) 0; }
}
.hero-eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-light);
  margin: 0 0 var(--space-md);
}
.hero-eyebrow::before {
  content: "";
  display: block;
  width: 40px;
  border-top: 2px solid var(--gold);
  margin-bottom: var(--space-md);
}
.hero h1 {
  font-size: var(--text-display);
  color: var(--on-navy);
  max-width: 22ch;
  margin: 0 0 var(--space-lg);
}
.hero-sub {
  font-size: var(--text-lg);
  color: var(--on-navy-muted);
  max-width: var(--measure);
  margin: 0 0 var(--space-xl);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}
.hero-actions .link-light {
  color: var(--on-navy-muted);
  text-decoration-color: var(--gold);
}
.hero-actions .link-light:hover { color: var(--on-navy); }

/* ── Section spacing ── */
.section { padding: var(--space-3xl) 0; }
.section-title {
  font-size: var(--text-h2);
  margin: 0 0 var(--space-xl);
}
.section-title::before {
  content: "";
  display: block;
  width: 40px;
  border-top: 2px solid var(--gold);
  margin-bottom: var(--space-md);
}

/* ── Guide teasers — editorial list, not boxes ── */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 700px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); }
}
.guide-card {
  display: block;
  border-top: 1px solid var(--border);
  padding: var(--space-lg) 0 0;
  text-decoration: none;
  color: var(--ink);
}
.guide-card .kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  margin-bottom: var(--space-sm);
}
.guide-card h3 {
  margin: 0 0 var(--space-sm);
  font-size: 1.375rem;
  transition: color var(--transition);
}
.guide-card:hover { color: var(--ink); }
.guide-card:hover h3 { color: var(--gold-dark); }
.guide-card p {
  margin: 0 0 var(--space-sm);
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.guide-card .card-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--navy);
}
.guide-card:hover .card-link { color: var(--gold-dark); }

/* ── Editorial note (e.g. "avautuu myöhemmin") ── */
.notice-strip {
  border-top: 1px solid var(--border-light);
  padding: var(--space-2xl) 0;
  text-align: center;
}
.notice-strip p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--ink-muted);
  max-width: var(--measure);
  margin: 0 auto;
}

/* ── Article (guide template) ── */
.article {
  padding: var(--space-2xl) 0 var(--space-3xl);
}
/* Heading hierarchy: numbered serif H2 with a hairline section break,
   sans-serif H3 subheadings (x.y numbering in text) */
.article .prose h2 {
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-lg);
}
.article .prose h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--navy);
}
.article-eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  margin: 0 0 var(--space-sm);
}
.article-meta {
  font-size: var(--text-sm);
  color: var(--ink-light);
  margin: 0 0 var(--space-lg);
}
.article-meta time { color: inherit; }
/* Byline slot — hidden until a public byline is taken into use */
.article-byline[hidden] { display: none; }
.article-byline {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.article-intro {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* ── Table of contents ── */
.toc {
  background: var(--paper-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: 0 0 var(--space-xl);
  font-size: var(--text-sm);
}
.toc-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  color: var(--navy);
  margin: 0 0 var(--space-sm);
}
.toc ol {
  margin: 0;
  padding-left: var(--space-lg);
}
.toc li { margin: 4px 0; }
.toc a { text-decoration: none; color: var(--navy-900); }
.toc a:hover { color: var(--gold-dark); text-decoration: underline; }

/* ── FAQ ── */
.faq details {
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-sm) 0;
}
.faq summary {
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  padding: var(--space-sm) 0;
  list-style-position: outside;
}
.faq summary:hover { color: var(--gold-dark); }
.faq details > div { padding: var(--space-sm) 0 var(--space-md); }

/* ── CTA box (→ /tarkistus) ── */
.cta-box {
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
}
.cta-box h2, .cta-box h3 { margin-top: 0; }
.cta-box p { color: var(--ink-muted); }

/* ── Feedback note (→ /palaute) ── */
.feedback-note { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--navy-100); }
.feedback-note p { color: var(--ink-muted); font-size: .95rem; line-height: 1.6; margin: 0; }

/* ── Content placeholder (phase 3 fills) ── */
.placeholder {
  background: var(--signal-yellow-bg);
  border: 1px dashed var(--signal-yellow);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--signal-yellow-text);
  font-size: var(--text-sm);
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--space-3xl);
  padding: var(--space-xl) 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.site-footer .footer-disclaimer {
  max-width: var(--measure);
  margin: 0 0 var(--space-md);
}
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin: 0 0 var(--space-md);
}
.site-footer a { color: var(--navy-900); }
.site-footer a:hover { color: var(--gold-dark); }
.site-footer .footer-copy { margin: 0; color: var(--ink-light); }

/* ── Publication / beta notice ── */
.pub-notice {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink);
  background: var(--gold-wash);
  border-left: 3px solid var(--gold);
  padding: var(--space-md);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-lg) 0;
}
.pub-notice strong { color: var(--navy); }