/*
 * Get Blogged marketing site — brand tokens + shared utilities.
 * Loaded by every www.getblogged.net template.
 * Designed to sit alongside the Tailwind CDN runtime used in Phase 3;
 * Phase 5 compiles Tailwind statically and removes the CDN script.
 *
 * Palette pulled from www.getblogged.net 2026-04-21. See
 * docs/www-rebuild/00-project-plan.md §"Brand palette".
 */

:root {
  --ink: #32373C;
  --ink-soft: #6B6F75;
  --ink-darker: #1E2126;
  --cream: #FFFFFF;
  --cream-2: #FBF7F9;
  --pink: #FE0072;
  --pink-soft: #FFE0EC;
  --pink-mid: #F78DA7;
  --sage-soft: #E5EDE2;
  --lilac-soft: #ECE3F3;
  --line: #EAE7EA;
}

html, body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
}

.font-display { font-family: 'Fraunces', 'Playfair Display', ui-serif, Georgia, serif; letter-spacing: -0.01em; font-optical-sizing: auto; }

.ink { color: var(--ink); }
.ink-soft { color: var(--ink-soft); }
.text-pink { color: var(--pink); }
.text-cream { color: var(--cream); }
.bg-cream { background: var(--cream); }
.bg-cream-2 { background: var(--cream-2); }
.bg-ink { background: var(--ink); }
.bg-pink { background: var(--pink); }
.bg-pink-soft { background: var(--pink-soft); }
.bg-sage-soft { background: var(--sage-soft); }
.bg-lilac-soft { background: var(--lilac-soft); }
.border-line { border-color: var(--line); }
.ring-line { --tw-ring-color: var(--line); }

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Buttons */
.btn-primary { background: var(--pink); color: #FFFFFF; border: 0; cursor: pointer; }
.btn-primary:hover { background: #D9005F; }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); cursor: pointer; }
.btn-secondary:hover { background: var(--ink); color: #FFFFFF; }
.btn-ink { background: var(--ink); color: #FFFFFF; border: 0; cursor: pointer; }
.btn-ink:hover { background: var(--ink-darker); }
.btn-cream { background: var(--cream); color: var(--ink); border: 0; cursor: pointer; }
.btn-cream:hover { background: #F0EDF1; }

/* Decorative — editorial grain texture on hero blocks. */
.hero-grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.04'/></svg>");
}

/* Image placeholder with editorial gradient + optional data-label caption.
   Replaced by <img> inside when a real asset is provided. */
.img-ph {
  position: relative;
  background: linear-gradient(135deg, #F7E7EE 0%, #EBD4DE 40%, #D9BDC9 100%);
  overflow: hidden;
}
.img-ph::before {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.1em;
  color: rgba(50, 55, 60, 0.55); text-transform: uppercase; padding: 12px; text-align: center;
}
.img-ph img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* When a real image is inside, hide the placeholder label. */
.img-ph:has(img)::before { display: none; }

.nav a { font-size: 14px; }

.rule { height: 1px; background: var(--line); }

.card-lift { transition: transform 200ms ease, box-shadow 200ms ease; }
.card-lift:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(50, 55, 60, 0.22); }

/* Article/help body prose — applies to the output of the block renderer. */
.prose { font-size: 17px; line-height: 1.72; color: var(--ink); }
.prose p { margin: 0 0 20px; }
.prose h2 { font-family: 'Fraunces', serif; font-size: 28px; line-height: 1.2; font-weight: 600; margin: 40px 0 14px; letter-spacing: -0.01em; }
.prose h3 { font-family: 'Fraunces', serif; font-size: 22px; line-height: 1.25; font-weight: 600; margin: 32px 0 10px; letter-spacing: -0.01em; }
.prose h4 { font-family: 'Fraunces', serif; font-size: 18px; line-height: 1.3; font-weight: 600; margin: 24px 0 8px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin: 0 0 6px; }
.prose blockquote {
  border-left: 3px solid var(--pink);
  padding: 4px 0 4px 18px;
  margin: 24px 0;
  font-family: 'Fraunces', serif;
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.prose a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #D9005F; }
.prose img { max-width: 100%; height: auto; border-radius: 14px; margin: 24px 0; }
.prose code { background: var(--pink-soft); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; }
.prose pre { background: var(--ink-darker); color: var(--cream); padding: 18px 20px; border-radius: 12px; overflow-x: auto; margin: 24px 0; font-size: 14px; line-height: 1.6; }
.prose pre code { background: transparent; color: inherit; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.prose table th, .prose table td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose table th { background: var(--cream-2); font-weight: 600; font-family: 'Inter', sans-serif; }

/* Block-level inline components surfaced through the block renderer. */
.gb-callout {
  background: var(--pink-soft);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 24px 0;
  display: flex;
  gap: 14px;
}
.gb-callout .gb-callout-icon { flex-shrink: 0; font-size: 22px; }
.gb-callout-info    { background: var(--cream-2); }
.gb-callout-warning { background: #FFF6E5; }

.gb-takeaways {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 28px;
  margin: 28px 0;
}
.gb-takeaways-title {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.gb-takeaways ul { margin: 0; padding-left: 20px; }
.gb-takeaways li { margin-bottom: 6px; }

.gb-cta-banner {
  background: var(--ink);
  color: var(--cream);
  border-radius: 22px;
  padding: 36px 40px;
  margin: 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.gb-cta-banner h3 { font-family: 'Fraunces', serif; font-size: 26px; margin: 0 0 6px; color: var(--cream); font-weight: 600; letter-spacing: -0.01em; }
.gb-cta-banner p { margin: 0; color: #C9CBCE; font-size: 14px; }

.gb-faq details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.gb-faq details > summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  letter-spacing: -0.01em;
}
.gb-faq details > summary::-webkit-details-marker { display: none; }
.gb-faq details > summary::after {
  content: '＋';
  color: var(--pink);
  font-weight: 400;
}
.gb-faq details[open] > summary::after { content: '−'; }
.gb-faq .gb-faq-answer {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.gb-toc {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 24px 0;
  background: var(--cream-2);
}
.gb-toc-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.gb-toc ul { list-style: none; padding: 0; margin: 0; }
.gb-toc li { margin: 5px 0; }
.gb-toc a { color: var(--ink); font-size: 15px; text-decoration: none; }
.gb-toc a:hover { color: var(--pink); }
.gb-toc li.gb-toc-h3 { padding-left: 14px; font-size: 14px; }

.gb-stats {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 28px 0;
  margin: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gb-stat-value { font-family: 'Fraunces', serif; font-size: 38px; line-height: 1; color: var(--pink); font-weight: 600; letter-spacing: -0.02em; }
.gb-stat-label { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

.gb-pricing-tiers {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 32px 0;
}
.gb-pricing-tier {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  background: var(--cream);
}
.gb-pricing-tier.gb-pricing-featured { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.gb-pricing-tier h4 { font-family: 'Fraunces', serif; font-size: 22px; margin: 0 0 6px; font-weight: 600; }
.gb-pricing-tier .gb-pricing-price { font-family: 'Fraunces', serif; font-size: 42px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 10px 0 18px; }
.gb-pricing-tier ul { list-style: none; padding: 0; margin: 0 0 22px; }
.gb-pricing-tier li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.gb-pricing-tier li:last-child { border-bottom: 0; }

.gb-testimonial {
  border-left: 3px solid var(--pink);
  padding: 0 0 0 22px;
  margin: 28px 0;
}
.gb-testimonial blockquote {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  line-height: 1.45;
  margin: 0 0 14px;
  color: var(--ink);
  border: 0;
  padding: 0;
}
.gb-testimonial-attribution { font-size: 14px; color: var(--ink-soft); }
.gb-testimonial-attribution strong { color: var(--ink); font-weight: 600; }

/* Responsive nav helpers used by _chrome.php. */
@media (max-width: 768px) {
  .gb-mobile-hide { display: none !important; }
}