/*
 * Feast and Find, Global Styles
 * Source: Stitch 2.0 approved brand kit
 *
 * Layers on Astra Free + theme.json.
 * Fixes Astra container conflicts for full-width layouts.
 */


/* ═══════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth anchor navigation, reduces "jump" disorientation for in-page
 * navigation like the ship-page jump-nav strip. Honors prefers-reduced-motion. */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 2026-04-23 accessibility baseline, lift the inherited base body size
   * from 16 → 17 px so WordPress/Astra defaults (post content, form
   * fields, block paragraphs) scale up ~6% without touching any rule
   * that already sets an explicit px. Targets the 40+/50+/60+ reader
   * audience. Elements with their own explicit font-size are unaffected. */
  font-size: 17px;
  line-height: 1.7;
}

img {
  max-width: 100%;
  height: auto;
}


/* ═══════════════════════════════════════════════
   ASTRA CONTAINER OVERRIDES
   Fixes the #1 layout conflict: Astra constrains
   content inside .ast-container. Our hero and
   full-bleed sections need to break out.
   ═══════════════════════════════════════════════ */

/* On the full-width template, let primary content be full-width */
.page-template-page-full-width #primary {
  width: 100% !important;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Full-bleed breakout: any element with .ff-bleed inside the
   Astra container stretches to viewport width */
.ff-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/*
 * Override Astra's default content-area padding on every template whose <main>
 * carries .ff-page (or .ff-homepage). Without this override, Astra's
 * .ast-container constrains our full-bleed sections (ocean CTA bands, hero
 * strips) to ~1200 px and the viewport-edge `margin-left: -50vw` trick on
 * .ff-page-hero mis-calculates, producing the "boxed-in / shifted-left"
 * visual on every secondary page.
 *
 * The selector is deliberately scoped to `#content .ast-container`, NOT
 * `.ast-container` globally. Without the `#content` scope, the reset leaks
 * into Astra's own header container (.main-header-bar-wrap .ast-container)
 * and pushes the site wordmark / nav flush to the viewport edge, a real
 * previous bug. Scoping keeps the header at its default width everywhere.
 *
 * Enumerated body classes first (fast, predictable), then a `:has()` safety
 * net for any future template that also uses .ff-page on its <main>.
 * 2026-04-23 polish pass broadened this rule from page-template-page-full-width
 * only to all our custom templates + archives.
 */
.page-template-page-full-width #content .ast-container,
.page-template-page-homepage #content .ast-container,
.page-template-page-about #content .ast-container,
.page-template-page-contact #content .ast-container,
.page-template-page-essentials #content .ast-container,
.page-template-page-essentials-article #content .ast-container,
.page-template-page-shop #content .ast-container,
.page-template-page-privacy-policy #content .ast-container,
.page-template-page-terms #content .ast-container,
.page-template-page-checklists #content .ast-container,
.page-template-page-worksheet #content .ast-container,
.page-template-page-journal #content .ast-container,
.page-template-page-duck-hunt #content .ast-container,
.post-type-archive-ship_guide #content .ast-container,
.single-ship_guide #content .ast-container,
.tax-cruise_line #content .ast-container,
.blog #content .ast-container,
.archive #content .ast-container,
.search #content .ast-container,
body:has(#content main.ff-page) #content .ast-container,
body:has(#content main.ff-homepage) #content .ast-container {
  /* `display: block` overrides Astra's `display: flex; flex-direction:
   * column-reverse` on .ast-container, which was making our <main> a
   * flex item that shrunk to its widest child's width and got pushed
   * to flex-start (the LEFT of the container). This is the actual
   * cause of the "narrow column on the left, empty space on the right"
   * symptom on every .ff-page template. */
  display: block;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Belt-and-braces: even if Astra's flex display somehow wins on .ast-container,
 * forcing our <main> to width: 100% via `align-self: stretch` would be the
 * fallback. With display: block on the parent (above) this is redundant, but
 * defensive against Astra version drift. */
body:has(#content main.ff-page) main.ff-page,
body:has(#content main.ff-homepage) main.ff-homepage,
main.ff-page,
main.ff-homepage {
  display: block;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  align-self: stretch;
}

/* CSS safety net for Astra's separate-container wrapper. The PHP filter in
 * functions.php (`astra_get_content_layout` → 'plain-container') should
 * already prevent Astra from emitting these card-style wrappers on our
 * templates. This rule is a belt-and-braces reset in case:
 *   (a) Astra renames the filter hook in a future version, or
 *   (b) a per-page meta value still forces separate-container.
 *
 * Neutralizes the card background, padding, max-width, box-shadow, and
 * border-radius that Astra applies via `.ast-separate-container .site-content`,
 * `.ast-separate-container .ast-article-single`, and `.ast-separate-container
 * .ast-article-post` so our full-bleed heroes render edge-to-edge even if
 * Astra's wrappers are still in the DOM.
 *
 * Scoped to body classes that indicate we're on an FF route (via `.ff-page`
 * or `.ff-homepage` on main, or the archive/blog/search body classes).
 */
body.ast-separate-container:has(#content main.ff-page) .site-content,
body.ast-separate-container:has(#content main.ff-homepage) .site-content,
body.ast-separate-container.blog #content,
body.ast-separate-container.archive #content,
body.ast-separate-container.search #content,
body.ast-separate-container.post-type-archive-ship_guide #content,
body.ast-separate-container.tax-cruise_line #content {
  background: transparent;
  padding: 0;
}
body.ast-separate-container:has(#content main.ff-page) .ast-article-single,
body.ast-separate-container:has(#content main.ff-page) .ast-article-post,
body.ast-separate-container:has(#content main.ff-homepage) .ast-article-single,
body.ast-separate-container:has(#content main.ff-homepage) .ast-article-post,
body.ast-separate-container.blog .ast-article-single,
body.ast-separate-container.blog .ast-article-post,
body.ast-separate-container.archive .ast-article-single,
body.ast-separate-container.archive .ast-article-post,
body.ast-separate-container.search .ast-article-single,
body.ast-separate-container.search .ast-article-post,
body.ast-separate-container.post-type-archive-ship_guide .ast-article-single,
body.ast-separate-container.post-type-archive-ship_guide .ast-article-post,
body.ast-separate-container.tax-cruise_line .ast-article-single,
body.ast-separate-container.tax-cruise_line .ast-article-post {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  max-width: none;
}

/* But constrained sections inside still get padding */
.ff-contained {
  max-width: var(--ff-wide-width);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--40);
}


/* ═══════════════════════════════════════════════
   FF CONTAINER SYSTEM, 2026 layout pass
   Semantic, fluid, predictable. Use these classes anywhere a section
   needs to center content within a max-width with side padding.

   Anatomy:
     .ff-container, editorial-width centered content (1180 px max)
     .ff-container-wide, feature/grid centered content (1280 px max)
     .ff-full-bleed, outer wrapper that paints viewport-wide
                             (background colors / hero bands)
     .ff-full-bleed__inner, inner wrapper inside .ff-full-bleed that
                             constrains the content back to a max-width
                             with the standard gutter.

   Usage examples:
     <section class="ff-container">…</section>
     <section class="ff-full-bleed" style="background:var(--ff-ocean)">
       <div class="ff-full-bleed__inner">…</div>
     </section>

   Why these instead of the existing .ff-section* / .ff-contained?
   The old utilities use literal --wp--preset--spacing--40 padding which
   is a fixed px value across viewports. The new ones use --ff-page-gutter
   (clamp 20-64 px) so the side padding is fluid 320 → 1440 viewport.
   ═══════════════════════════════════════════════ */

.ff-container {
  width: 100%;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding-inline: var(--ff-page-gutter);
}

.ff-container-wide {
  width: 100%;
  max-width: var(--ff-container-wide);
  margin-inline: auto;
  padding-inline: var(--ff-page-gutter);
}

.ff-full-bleed {
  /* Semantic marker, a section that paints a background viewport-wide.
   * Width is 100% of the parent (which itself is 100% of viewport on our
   * pages thanks to the Astra-container reset above). The inner element
   * provides the centered max-width content area. */
  width: 100%;
}

.ff-full-bleed__inner {
  width: 100%;
  max-width: var(--ff-container-wide);
  margin-inline: auto;
  padding-inline: var(--ff-page-gutter);
}


/* ═══════════════════════════════════════════════
   ASTRA WRAPPER NEUTRALIZATION, viewport-mode-agnostic.
   Fires whenever .ff-page or .ff-homepage is rendered, regardless of
   body class (ast-plain-container vs ast-separate-container). This is
   stronger than the body-class-scoped rules above, it works even when
   the astra_get_content_layout PHP filter doesn't fire (Astra version
   bumps, per-page meta overrides, plugin conflicts, etc).

   `!important` is intentional: Astra's `.ast-separate-container *`
   selectors are deeply specific and load late in the cascade, so we
   need to win unambiguously on every property we touch.
   ═══════════════════════════════════════════════ */

body:has(#content main.ff-page) #content,
body:has(#content main.ff-homepage) #content,
body:has(#content main.ff-page) .site-content,
body:has(#content main.ff-homepage) .site-content {
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* CRITICAL SCOPE FIX (2026 layout pass, calc-page reference diagnosis):
 * `.ast-container` is used by BOTH the content area (#content > .ast-container)
 * AND the site header (.site-primary-header-wrap.ast-container). A rule that
 * targets `.ast-container` anywhere in the body breaks the header, pushing
 * the logo flush-left and the nav off the centered 1200-px grid Astra
 * provides natively. The /calculator/ page rendered correctly only because
 * it doesn't carry the .ff-page class, so this rule never fired there.
 *
 * Scope: descendants of `#content` ONLY. The header's .ast-container is
 * untouched, Astra's native --ast-normal-container-width: 1200px keeps it
 * centered with proper logo+nav padding, identical to the calculator page.
 *
 * CRITICAL DISPLAY FIX (2026 flex-trap diagnosis): Astra ships
 * `.ast-container { display: flex; flex-direction: column-reverse }` in its
 * mobile/responsive CSS. When that rule wins, our <main> element becomes a
 * FLEX ITEM whose width shrinks to its widest child (e.g. .ffh-hero at
 * max-width: 1200), and `justify-content: flex-start` (default) sticks the
 * shrunken main to the LEFT of the flex container, producing the "narrow
 * column on the left, empty space on the right" visual.
 *
 * Reset display to BLOCK so our <main> fills the container via normal block
 * flow, regardless of Astra's flex setting. */
body:has(#content main.ff-page) #content .ast-container,
body:has(#content main.ff-homepage) #content .ast-container {
  display: block !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* CRITICAL SCOPE FIX (2026 archive-card pass):
 * `.ast-article-post` is NOT just Astra's outer post wrapper, it's added to
 * EVERY <article> element on archive pages (journal cards, ship guide cards,
 * etc). A blanket reset broke every archive card visual: transparent
 * background, no border, no shadow, no padding. Cards rendered invisible.
 *
 * Fix: only neutralize `.ast-article-single` (the OUTER single-post wrapper
 * which our custom templates don't use anyway, but keep the rule as a safety
 * net for any future single-post route that runs through Astra's chain).
 * Per-card archive styling stays under the control of our own classes
 * (.ffj-archive-card, .ffsg-line, etc), with !important on the visual
 * properties so we win against Astra's `.ast-separate-container .ast-article-post`
 * defaults (padding/margin/background/max-width). */
body:has(#content main.ff-page) .ast-article-single,
body:has(#content main.ff-homepage) .ast-article-single {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  width: 100% !important;
}

/* Neutralize Astra's `.ast-separate-container .ast-article-post` defaults so
 * archive cards keep their own visual styling. Astra applies `padding: 60px 70px;
 * margin: 30px auto; max-width: 1200px; background: var(--ast-global-color-5)`
 * to every <article> on archive pages, which conflicts with our card classes.
 * Resetting just the layout-affecting properties (padding/margin/max-width/
 * background) lets each card's own class (.ffj-archive-card, .ffsg-line, etc)
 * paint freely. We do NOT reset border/shadow/border-radius here, those should
 * come from the per-card class with !important if needed. */
body:has(#content main.ff-page) article.ast-article-post,
body:has(#content main.ff-homepage) article.ast-article-post {
  padding: 0;
  margin: 0;
  max-width: none;
  background: transparent;
}

body:has(#content main.ff-page) #primary,
body:has(#content main.ff-homepage) #primary {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Astra adds a top margin to main content, remove on every template whose
 * <main> is a full-bleed hero-first layout. Same coverage as the container
 * reset above so the hero starts at Y = 0 on all our pages. */
.page-template-page-full-width .site-main > .wp-block-group:first-child,
.page-template-page-full-width .site-main > section:first-child,
.page-template-page-full-width .site-main > .ff-page-hero:first-child,
.page-template-page-full-width .site-main > .ff-hero--split:first-child,
.site-main > main.ff-page > .ff-page-hero:first-child,
.site-main > main.ff-page > section:first-child,
.site-main > main.ff-homepage > section:first-child,
main.ff-page > .ff-page-hero:first-child,
main.ff-page > section:first-child,
main.ff-homepage > section:first-child {
  margin-top: 0;
}

/* Muted text utility */
.ff-muted-text {
  color: var(--ff-muted);
  font-size: var(--wp--preset--font-size--small);
}


/* ═══════════════════════════════════════════════
   TYPOGRAPHY
   Plus Jakarta Sans: bold headings, generous
   body line-height for older readers
   ═══════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wp--preset--font-family--primary);
  color: var(--ff-ocean);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.625rem, 3.5vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.375rem); }

p, li, td, th, label, input, textarea, select {
  line-height: 1.75;
}

/* Body / muted text */
p {
  color: var(--ff-muted);
}


/* ═══════════════════════════════════════════════
   PAGE HERO (subpages: about, contact, etc.)
   wp:html block, always Gutenberg-safe.
   ═══════════════════════════════════════════════ */

.ff-page-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
  background: linear-gradient(135deg, #006380 0%, #004d63 100%);
  color: var(--ff-white);
  text-align: center;
}

.ff-page-hero h1 {
  color: var(--ff-white);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 720px;
  margin: 0 auto var(--wp--preset--spacing--20);
}

.ff-page-hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--wp--preset--font-size--large);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

.ff-page-hero .ff-tag {
  margin-bottom: var(--wp--preset--spacing--20);
}


/* ═══════════════════════════════════════════════
   SECTIONS, breathable vertical rhythm
   ═══════════════════════════════════════════════ */

.ff-section {
  padding-block: var(--wp--preset--spacing--70);
}

.ff-section--narrow {
  max-width: var(--ff-content-width);
  margin-inline: auto;
  padding-inline: var(--ff-page-padding, 48px);
}

.ff-section--wide {
  max-width: var(--ff-wide-width);
  margin-inline: auto;
  padding-inline: var(--ff-page-padding, 48px);
}

/* Sand-alt background sections (warm alternating blocks, Figma #f7f3eb) */
.ff-section.has-sand-alt-background-color,
.has-sand-alt-background-color {
  background: var(--ff-sand-alt) !important;
}


/* ═══════════════════════════════════════════════
   CARDS, white, subtle shadow, generous padding
   ═══════════════════════════════════════════════ */

.ff-card {
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  padding: var(--wp--preset--spacing--50);
  transition: box-shadow var(--ff-ease-normal), transform var(--ff-ease-normal);
}

.ff-card:hover {
  box-shadow: var(--ff-shadow-card-hover);
  transform: translateY(-2px);
}

.ff-card p {
  color: var(--ff-muted);
  margin-bottom: var(--wp--preset--spacing--20);
}

.ff-card p:last-child {
  margin-bottom: 0;
}

/* Card links ("Read more →") */
.ff-card a {
  color: var(--ff-ocean);
  font-weight: 600;
  /* 2026-04-23 accessibility pass: 14 → 15 px. Card CTAs need to be
   * tap-comfortable and scannable for older users. */
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--ff-ease-fast), gap var(--ff-ease-fast);
}

.ff-card a:hover {
  color: var(--ff-coral);
  gap: 8px;
}

/* Card h3, Figma uses 20px for tool cards */
.ff-card h3 {
  font-size: 20px;
  line-height: 28px;
  color: var(--ff-navy);
  margin-bottom: 8px;
}

/* Equal-height cards in WordPress columns */
.wp-block-columns:has(.ff-card) {
  align-items: stretch;
}

.wp-block-columns:has(.ff-card) > .wp-block-column {
  display: flex;
  flex-direction: column;
}

.wp-block-columns:has(.ff-card) > .wp-block-column > .wp-block-group.ff-card {
  flex: 1;
}


/* ═══════════════════════════════════════════════
   BUTTONS, one system, no overlap
   Style through WordPress's own selectors so
   Astra's defaults are cleanly overridden.
   ═══════════════════════════════════════════════ */

/* Primary button (coral CTA), WordPress default */
.wp-block-button .wp-block-button__link,
.wp-element-button {
  font-family: var(--wp--preset--font-family--primary);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--medium);
  padding: 0.875rem 2rem;
  border-radius: var(--ff-radius-pill);
  border: 2px solid transparent;
  background: var(--ff-coral);
  color: var(--ff-white);
  text-decoration: none;
  box-shadow: var(--ff-shadow-button);
  transition: background var(--ff-ease-fast), transform var(--ff-ease-fast), border-color var(--ff-ease-fast);
  cursor: pointer;
  line-height: 1.4;
}

.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover {
  background: var(--ff-coral-dark);
  color: var(--ff-white);
  transform: translateY(-1px);
}

/* Outline/ghost button (navy border) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--ff-white);
  color: var(--ff-white);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ff-white);
  color: var(--ff-navy);
  border-color: var(--ff-white);
}

/* Secondary button (teal background, navy text), apply via custom class */
.wp-block-button.ff-btn-secondary .wp-block-button__link {
  background: var(--ff-teal);
  color: var(--ff-navy);
  border-color: transparent;
}

.wp-block-button.ff-btn-secondary .wp-block-button__link:hover {
  background: var(--ff-teal-muted);
  color: var(--ff-navy);
}

/* Ghost on light backgrounds */
.wp-block-button.ff-btn-ghost .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--ff-navy);
  color: var(--ff-navy);
}

.wp-block-button.ff-btn-ghost .wp-block-button__link:hover {
  background: var(--ff-navy);
  color: var(--ff-white);
}


/* ═══════════════════════════════════════════════
   TAGS / BADGES
   ═══════════════════════════════════════════════ */

.ff-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  border-radius: var(--ff-radius-pill);
  background: var(--ff-slate);
  color: var(--ff-muted);
  line-height: 1.4;
}

.ff-tag--ocean {
  background: var(--ff-ocean);
  color: var(--ff-white);
}

.ff-tag--coral {
  background: var(--ff-coral);
  color: var(--ff-white);
}

.ff-tag--teal {
  background: var(--ff-teal);
  color: var(--ff-navy);
}


/* ═══════════════════════════════════════════════
   TABLES (ship guide overview)
   ═══════════════════════════════════════════════ */

.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--wp--preset--font-size--medium);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--ff-slate);
}

.wp-block-table td,
.wp-block-table th {
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border-bottom: 1px solid var(--ff-border);
  text-align: left;
}


/* ═══════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════ */

.ff-breadcrumb {
  font-size: var(--wp--preset--font-size--small);
  color: var(--ff-muted);
  padding: var(--wp--preset--spacing--30) 0;
}

.ff-breadcrumb a {
  color: var(--ff-ocean);
  text-decoration: none;
}

.ff-breadcrumb a:hover {
  color: var(--ff-coral);
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════
   SEPARATOR
   ═══════════════════════════════════════════════ */

.ff-divider,
hr.wp-block-separator {
  border: none;
  border-top: 1px solid var(--ff-border);
  margin-block: var(--wp--preset--spacing--60);
}


/* ═══════════════════════════════════════════════
   LISTS (checklist / essentials / about values)
   ═══════════════════════════════════════════════ */

.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
}

.entry-content li {
  margin-bottom: var(--wp--preset--spacing--20);
}

.entry-content li strong {
  color: var(--ff-navy);
}


/* ═══════════════════════════════════════════════
   CALCULATOR PLACEHOLDER
   Styled empty state for /calculator/ before the
   Preact bundle exists.
   ═══════════════════════════════════════════════ */

.ff-calculator-placeholder {
  max-width: 640px;
  margin: var(--wp--preset--spacing--70) auto;
  padding: var(--wp--preset--spacing--60);
  text-align: center;
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
}

.ff-calculator-placeholder__icon {
  font-size: 3rem;
  margin-bottom: var(--wp--preset--spacing--30);
  line-height: 1;
}

.ff-calculator-placeholder h2 {
  font-size: var(--wp--preset--font-size--xx-large);
  margin-bottom: var(--wp--preset--spacing--20);
}

.ff-calculator-placeholder p {
  color: var(--ff-muted);
  font-size: var(--wp--preset--font-size--large);
  margin-bottom: var(--wp--preset--spacing--20);
  line-height: 1.7;
}

.ff-calculator-placeholder p:last-child {
  margin-bottom: 0;
}

.ff-calculator-placeholder__badge {
  display: inline-block;
  padding: 0.375rem 1rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  background: var(--ff-teal);
  color: var(--ff-navy);
  border-radius: var(--ff-radius-pill);
  margin-top: var(--wp--preset--spacing--30);
}


/* ═══════════════════════════════════════════════
   RESPONSIVE, 768px
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
  .ff-section {
    padding-block: var(--wp--preset--spacing--60);
  }

  .ff-section--narrow,
  .ff-section--wide,
  .ff-contained {
    padding-inline: var(--wp--preset--spacing--30);
  }

  /* Stack columns on tablet */
  .wp-block-columns {
    flex-direction: column;
  }

  .wp-block-column {
    flex-basis: 100% !important;
  }

  .ff-card {
    padding: var(--wp--preset--spacing--40);
  }

  .ff-calculator-placeholder {
    margin: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
    padding: var(--wp--preset--spacing--50);
  }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE, 480px
   ═══════════════════════════════════════════════ */

@media (max-width: 480px) {
  .ff-section {
    padding-block: var(--wp--preset--spacing--50);
  }

  .ff-section--narrow,
  .ff-section--wide,
  .ff-contained {
    padding-inline: var(--wp--preset--spacing--20);
  }

  /* Buttons full-width on mobile */
  .wp-block-button .wp-block-button__link,
  .wp-element-button {
    padding: 0.75rem 1.5rem;
    font-size: var(--wp--preset--font-size--medium);
  }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE, 320px (small phones)
   ═══════════════════════════════════════════════ */

@media (max-width: 320px) {
  .ff-card {
    padding: var(--wp--preset--spacing--30);
  }

  .wp-block-table td,
  .wp-block-table th {
    padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--small);
  }
}