/* ==========================================================================
   BSB Design System: type and article layer  v1.0.4  (2026-10-23)
   1.0.4: Read More block in the new type; bsb-optin card for hand-coded MailerLite forms.
   1.0.3: article paragraph rule also scoped to .grid-area-content so it outranks
          the WP 7 stopgap in live Customizer Additional CSS.
   1.0.2: looser reading rhythm (line-height 1.8, 28px between paragraphs)
          and framed, spaced-out in-content ad slots.
   Source of truth: "Budget Savvy Bride Design System" (Claude Design) plus the
   Typography Audit decisions of 2026-10-23:
     fonts Lora (headings) + Mulish (text), underlined article links,
     68ch reading column, Buy button rose #B44152 (hover #C24B61).
   Loads after the theme stylesheet. Selectors match or beat the theme's own
   specificity so no !important is needed except against WordPress presets.
   No em dashes anywhere by request.
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/mulish-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/mulish-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/mulish-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/mulish-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/lora-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/lora-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/lora-latin-600-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --bsb-font-sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --bsb-font-serif: "Lora", Georgia, "Times New Roman", serif;

  --bsb-ink: #1a202c;
  --bsb-ink-muted: #4a5568;
  --bsb-link: #0d6873;            /* teal-800, 6.5:1 */
  --bsb-link-line: rgba(13, 104, 115, 0.4);
  --bsb-link-hover: #b44152;
  --bsb-button: #b44152;          /* rose, white text 5.5:1 */
  --bsb-button-hover: #c24b61;    /* lighter rose, 4.7:1 */
  --bsb-wash: #eef9fb;
  --bsb-rule: #e2e8f0;

  --prose-h1:   clamp(2rem,      1.5455rem + 1.9394vw, 3rem);
  --prose-h2:   clamp(1.625rem,  1.3409rem + 1.2121vw, 2.25rem);
  --prose-h3:   clamp(1.375rem,  1.2045rem + 0.7273vw, 1.75rem);
  --prose-h4:   clamp(1.1875rem, 1.1023rem + 0.3636vw, 1.375rem);
  --prose-lead: clamp(1.1875rem, 1.1591rem + 0.1212vw, 1.25rem);
  --prose-body: 1.125rem;
  --prose-small: 0.875rem;
  --prose-leading: 1.8;
  --prose-measure: 42rem;         /* 672px, about 68 characters of Mulish at 18px */

  --prose-space-para: 1.75rem;    /* 28px: a clear pause between paragraphs */
  --prose-space-h2:   clamp(3rem,     2.5455rem + 1.9394vw, 4rem);
  --prose-space-h3:   clamp(2rem,     1.7727rem + 0.9697vw, 2.5rem);
  --prose-space-h4:   clamp(1.5rem,   1.3864rem + 0.4848vw, 1.75rem);
}

/* ---------- Site-wide text font ---------- */
body,
.font-sans,
button, input, select, textarea {
  font-family: var(--bsb-font-sans);
}
body { -webkit-font-smoothing: antialiased; }

/* ---------- Post title and header ---------- */
.single .grid-area-title h1,
.page .grid-area-title h1 {
  font-family: var(--bsb-font-serif);
  font-size: var(--prose-h1);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--bsb-ink);
  text-wrap: balance;
}

/* ---------- Reading column: title and text share one 42rem column ---------- */
.grid-area-title > .max-w-2xl,
.grid-area-title > .md\:max-w-3xl,
.grid-area-content > .max-w-2xl,
.grid-area-content > .md\:max-w-3xl {
  max-width: var(--prose-measure);
}

/* ---------- Intro line under the title (the theme gives it class "prose") ---------- */
.grid-area-title .prose {
  font-family: var(--bsb-font-sans);
  font-style: normal;
  font-size: var(--prose-lead);
  line-height: 1.5;
  color: var(--bsb-ink-muted);
  border-left: 0;
  padding-left: 0;
}
.grid-area-title .prose p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

/* ---------- Article text ---------- */
.prose {
  color: var(--bsb-ink);
}
/* Block-editor paragraphs carry class="wp-block-paragraph"; the theme only styled class-less
   ones, which left staging with no space between paragraphs. Cover both. */
.prose p:not([class]),
.prose p.wp-block-paragraph,
.grid-area-content .prose p:not([class]),
.grid-area-content .prose p.wp-block-paragraph {
  font-size: var(--prose-body);
  line-height: var(--prose-leading);
  margin-top: 0;
  margin-bottom: var(--prose-space-para);
  color: var(--bsb-ink);
  letter-spacing: 0.005em;
}
.prose li {
  font-size: var(--prose-body);
  line-height: 1.7;
}
.prose ul, .prose ol { margin-top: 0; margin-bottom: var(--prose-space-para); }
.prose strong { font-weight: 700; color: var(--bsb-ink); }

/* Headings: serif for H1 to H3, sans for H4 to H6; more space above than between paragraphs */
.prose h1, .prose h2, .prose h3 {
  font-family: var(--bsb-font-serif);
  color: var(--bsb-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.prose h2 {
  font-size: var(--prose-h2);
  font-weight: 500;
  line-height: 1.18;
  margin-top: var(--prose-space-h2);
  margin-bottom: 0.75rem;
}
.prose h3 {
  font-size: var(--prose-h3);
  font-weight: 600;
  line-height: 1.25;
  margin-top: var(--prose-space-h3);
  margin-bottom: 0.5rem;
}
.prose h4 {
  font-family: var(--bsb-font-sans);
  font-size: var(--prose-h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--bsb-link);
  margin-top: var(--prose-space-h4);
  margin-bottom: 0.375rem;
}
.prose h5 {
  font-family: var(--bsb-font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bsb-ink-muted);
  margin-top: 1.75rem;
  margin-bottom: 0.375rem;
}
.prose h6 {
  font-family: var(--bsb-font-sans);
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.5rem;
}
/* The theme zeroes the top margin of whatever follows a heading; keep that, it binds text to its heading. */
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0.25rem; }

/* Links in article text: underlined, AA contrast */
.prose a:not([class]) {
  color: var(--bsb-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--bsb-link-line);
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
.prose a:not([class]):hover {
  color: var(--bsb-link-hover);
  text-decoration-color: currentColor;
}

/* Lists keep the theme's coral dots; give items a little air */
.prose ul > li + li, .prose ol > li + li { margin-top: 0.35em; }

/* Quotes */
.prose blockquote {
  font-family: var(--bsb-font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
}

/* Dividers: lighter, more room */
.prose hr {
  background-color: var(--bsb-rule);
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

/* Tables: row lines, bold header, scroll on phones */
.prose .wp-block-table { overflow-x: auto; }
.prose .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.prose .wp-block-table th,
.prose .wp-block-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--bsb-rule); text-align: left; vertical-align: top; }
.prose .wp-block-table thead th,
.prose .wp-block-table tr:first-child th { font-weight: 700; border-bottom: 2px solid var(--bsb-ink); }

/* Captions and small print: never under 14px */
.prose figcaption,
.prose .wp-element-caption { font-size: var(--prose-small); color: var(--bsb-ink-muted); }

/* Short answer box */
.bsb-ai-answer {
  border-left: 0;
  border-radius: 10px;
  background: var(--bsb-wash);
}

/* ---------- Buttons ---------- */
.wp-block-button__link.has-coral-background-color,
.wp-block-button__link.has-background.has-coral-background-color {
  background-color: var(--bsb-button) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 9999px;
  transition: background-color 150ms ease;
}
.wp-block-button__link.has-coral-background-color:hover,
.wp-block-button__link.has-coral-background-color:focus-visible {
  background-color: var(--bsb-button-hover) !important;
}
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--bsb-link);
  outline-offset: 2px;
}

/* ---------- Product cards (media and text blocks in roundups) ---------- */
.prose .wp-block-media-text h3,
.prose .wp-block-media-text__content h3 {
  margin-top: 0;
  font-size: clamp(1.25rem, 1.1932rem + 0.2424vw, 1.5rem); /* 20 to 24px: cards sit in half the column */
  line-height: 1.25;
}
.prose .wp-block-media-text__content p:not([class]),
.prose .wp-block-media-text__content p.wp-block-paragraph {
  font-size: 1.0625rem;  /* 17px in the narrow card column */
}

/* ---------- In-content ad slots ----------
   Raptive (AdThrive) and Advanced Ads drop units straight between paragraphs
   with about 10px of margin. Give each one a framed pause: 48px of space
   outside, 28px inside, and a light rule above and below so the ad reads as
   separate from the article. Empty Advanced Ads wrappers are left alone. */
.grid-area-content .prose > .adthrive-ad,
.grid-area-content .prose > .adthrive,
.grid-area-content .prose > [class^="savvy-"]:not(:empty):not(:has(.bsb-optin, .ml-form-embedContainer)),
.grid-area-content .prose .wp-block-advads-gblock {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
  border-top: 1px solid var(--bsb-rule);
  border-bottom: 1px solid var(--bsb-rule);
  clear: both;
}
.grid-area-content .prose > .adthrive-ad + *,
.grid-area-content .prose > .adthrive + * { margin-top: 0 !important; }

/* ---------- Read More block (related post link inside articles) ---------- */
.prose .read-more-block {
  border-top: 1px solid var(--bsb-rule);
  border-bottom: 1px solid var(--bsb-rule);
  padding: 1.25rem 0;
  margin: 2.5rem 0;
}
.prose .read-more-subtitle {
  font-family: var(--bsb-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bsb-button);
  margin-bottom: 0.375rem;
}
.prose .read-more-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.prose .read-more-content a,
.prose .read-more-content a:not([class]) {
  font-family: var(--bsb-font-serif);
  font-size: clamp(1.25rem, 1.1932rem + 0.2424vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--bsb-ink);
  text-decoration: none;
  text-wrap: balance;
}
.prose .read-more-content a:hover,
.prose .read-more-content a:not([class]):hover {
  color: var(--bsb-button);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.prose .read-more-content .read-more-icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--bsb-button);
  transition: transform 150ms ease;
}
.prose .read-more-block:hover .read-more-icon { transform: translateX(3px); }

/* ---------- Email opt-in card (hand-coded MailerLite form, class bsb-optin) ---------- */
.bsb-optin {
  background: #fbf2f3;
  border: 1px solid #f1dadf;
  border-radius: 16px;
  padding: clamp(1.5rem, 1.0455rem + 1.9394vw, 2.5rem);
  margin: 3rem 0;
  font-family: var(--bsb-font-sans);
  color: var(--bsb-ink);
  text-align: left;
}
.bsb-optin__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bsb-button);
  margin: 0 0 0.5rem;
}
.prose .bsb-optin .bsb-optin__title,
.bsb-optin__title {
  font-family: var(--bsb-font-serif);
  font-size: clamp(1.5rem, 1.3295rem + 0.7273vw, 1.875rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bsb-ink);
  margin: 0 0 0.625rem;
  text-wrap: balance;
}
.prose .bsb-optin p.bsb-optin__text,
.bsb-optin__text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--bsb-ink-muted);
  margin: 0 0 1.5rem;
}
.bsb-optin__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}
@media (min-width: 640px) {
  .bsb-optin__fields { grid-template-columns: 1fr 1fr; }
}
.bsb-optin__field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; }
.bsb-optin__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bsb-ink);
}
.bsb-optin input.bsb-optin__input {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  font-family: var(--bsb-font-sans);
  font-size: 1rem;
  color: var(--bsb-ink);
  background: #ffffff;
  border: 1px solid #d5dbe2;
  border-radius: 10px;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.bsb-optin input.bsb-optin__input::placeholder { color: #8a94a3; }
.bsb-optin input.bsb-optin__input:focus {
  outline: none;
  border-color: var(--bsb-link);
  box-shadow: 0 0 0 3px rgba(13, 104, 115, 0.18);
}
.bsb-optin__submit {
  align-self: end;
  height: 3.25rem;
  width: 100%;
  border: 0;
  border-radius: 9999px;
  background: var(--bsb-button);
  color: #ffffff;
  font-family: var(--bsb-font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.bsb-optin__submit:hover,
.bsb-optin__submit:focus-visible { background: var(--bsb-button-hover); }
.bsb-optin__submit:focus-visible { outline: 3px solid var(--bsb-link); outline-offset: 2px; }
.bsb-optin__submit[disabled] { opacity: 0.7; cursor: wait; }
.prose .bsb-optin p.bsb-optin__fine,
.bsb-optin__fine {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bsb-ink-muted);
  margin: 0.875rem 0 0;
}
.bsb-optin__success { display: none; }
.bsb-optin.is-done .bsb-optin__form { display: none; }
.bsb-optin.is-done .bsb-optin__success { display: block; }
.prose .bsb-optin .bsb-optin__success p:not([class]) { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--bsb-ink); }

@media (prefers-reduced-motion: reduce) {
  .prose a:not([class]), .wp-block-button__link { transition: none; }
}