/* ============================================================
   teas.co.uk, Generic page (page.php fallback)
   For pages without a slug-matched template (terms, privacy, etc.).
   Loaded conditionally by functions.php via is_page() && !specific.
   ============================================================ */

.generic-page{display:flex;flex-direction:column;gap:24px}

.page-head-simple{
  display:flex;flex-direction:column;gap:12px;
  margin:8px 0 16px;
}
.page-head-simple .head{
  font-family:var(--fb);font-size:54px;font-weight:800;letter-spacing:-.025em;
  line-height:1;margin:0;text-wrap:balance;
}
.page-head-simple .lede{
  font-size:16px;line-height:1.55;color:var(--slate);margin:0;max-width:60ch;
}

/* The .card wrapper styling is already in design-system.css.
   .prose handles the body content typography for editor-driven content. */

.prose{
  font-size:15px;line-height:1.7;color:var(--ink);
  max-width:72ch;
}
.prose > * + *{margin-top:1em}
.prose h2{
  font-family:var(--fb);font-size:28px;font-weight:800;letter-spacing:-.018em;
  line-height:1.15;margin:1.6em 0 .4em;text-wrap:balance;
}
.prose h2 em{font-family:var(--fd);font-style:italic;font-weight:400}
.prose h3{
  font-family:var(--fb);font-size:20px;font-weight:700;letter-spacing:-.012em;
  line-height:1.25;margin:1.4em 0 .3em;
}
.prose h4{
  font-family:var(--fb);font-size:16px;font-weight:700;letter-spacing:-.005em;
  margin:1.2em 0 .3em;
}
.prose p,.prose ul,.prose ol{margin:0 0 1em}
.prose ul,.prose ol{padding-left:1.5em}
.prose li{margin-bottom:.4em}
.prose a{
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);
  text-underline-offset:3px;text-decoration-thickness:2px;
  transition:text-decoration-color .14s var(--ease);
}
.prose a:hover{text-decoration-color:var(--ink)}
.prose strong{font-weight:700}
.prose em{font-family:var(--fd);font-style:italic;font-weight:400}
.prose blockquote{
  margin:1.5em 0;padding:14px 22px;border-left:3px solid var(--acc);
  font-family:var(--fd);font-style:italic;font-size:18px;color:var(--slate);
  background:var(--paper-2);border-radius:0 var(--r-md) var(--r-md) 0;
}
.prose code{
  font-family:var(--fm);font-size:13px;
  background:var(--paper-2);padding:2px 6px;border-radius:6px;
  color:var(--ink);
}
.prose pre{
  font-family:var(--fm);font-size:13px;line-height:1.55;
  background:#042220;color:#eff7f6;padding:18px;border-radius:var(--r-md);
  overflow-x:auto;
}
.prose hr{
  border:none;height:1px;background:var(--hair);margin:2em 0;
}

@media (max-width:760px){
  .page-head-simple .head{font-size:38px}
}

/* ============================================================
   B2B segment pages, /charities/ + shared seg styling (added 2026-05-08)
   ============================================================ */
.seg-page { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; }
.seg-page .breadcrumb { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #5C6270; margin-bottom: 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.seg-page .breadcrumb a { color: #5C6270; text-decoration: none; }
.seg-page .breadcrumb a:hover { color: #042220; }

.seg-hero { background: linear-gradient(135deg, #fff8e1 0%, #ffe7a3 100%); border-radius: 18px; padding: 56px 48px; margin-bottom: 36px; }
.seg-hero .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: #92400e; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.seg-hero .eyebrow .pip { width: 6px; height: 6px; background: #c44b4b; border-radius: 50%; }
.seg-hero h1 { font-family: 'Instrument Serif', Georgia, serif; font-size: 56px; line-height: 1.0; margin: 0 0 18px; }
.seg-hero h1 em { font-style: italic; }
.seg-hero .lede { font-size: 16.5px; line-height: 1.6; max-width: 720px; margin: 0 0 28px; color: #2a2a2a; }
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #042220; color: #fde68a; padding: 14px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.cta-primary:hover { background: #c44b4b; color: #fff; }
.cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #042220; padding: 14px 24px; border: 1px solid rgba(14,15,18,.2); border-radius: 999px; font-weight: 600; text-decoration: none; }
.cta-secondary:hover { border-color: #042220; }

.seg-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 40px; }
.seg-features article { background: #fff; border: 1px solid rgba(14,15,18,.08); border-radius: 12px; padding: 22px; }
.seg-features .ico { font-size: 28px; display: block; margin-bottom: 8px; }
.seg-features h3 { font-family: 'Instrument Serif', serif; font-size: 19px; margin: 0 0 6px; }
.seg-features p { font-size: 13.5px; line-height: 1.55; color: #2a2a2a; margin: 0; }
.seg-features a { color: #042220; font-weight: 600; }

.seg-trust { background: #eff7f6; border-radius: 14px; padding: 36px 40px; margin-bottom: 40px; }
.seg-trust h2 { font-family: 'Instrument Serif', serif; font-size: 28px; margin: 0 0 16px; }
.seg-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.seg-trust ul li { font-size: 14px; line-height: 1.55; padding-left: 22px; position: relative; }
.seg-trust ul li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #15803d; font-weight: 700; }
.seg-trust strong { color: #042220; }

.seg-cta-final { text-align: center; padding: 48px 32px; background: #042220; color: #eff7f6; border-radius: 18px; }
.seg-cta-final h2 { font-family: 'Instrument Serif', serif; font-size: 36px; margin: 0 0 14px; color: #eff7f6; }
.seg-cta-final p { font-size: 15px; margin: 0 0 22px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.55; color: rgba(239,247,246,.85); }
.seg-cta-final .cta-primary { background: #fde68a; color: #042220; }
.seg-cta-final .cta-primary:hover { background: #30d8c8; }
.seg-cta-final .alt { font-size: 13px; color: rgba(239,247,246,.55); margin-top: 14px; }
.seg-cta-final .alt a { color: #fde68a; font-weight: 600; }

@media (max-width: 760px) {
  .seg-hero { padding: 32px 24px; }
  .seg-hero h1 { font-size: 36px; }
}