/* ═══════════════════════════════════════════════════════════════
   Added sections on classic layouts (flex/classic.py)
   ─────────────────────────────────────────────────────────────
   Loaded only on pages that have added sections, after flex/base.css.
   Maps the Flex tokens (--fx-*) onto the layout's own (--font-display,
   --brand, --radius… from themes.css / themes-services.css /
   themes-food.css) so an added section reads as part of the page.
   Every rule is scoped to .fx-embed (the slot wrapper), which carries
   data-family and data-layout.
   ═══════════════════════════════════════════════════════════════ */
.fx-embed {
  --fx-font-display: var(--font-display);
  --fx-font-body: var(--font-body);
  --fx-display-weight: 700;
  --fx-display-tracking: -0.02em;
  --fx-display-case: none;
  --fx-h1-tracking: -0.03em;
  --fx-h2-size: clamp(32px, 4.5vw, 52px);
  --fx-h2-line: 1.05;
  --fx-em-style: normal;
  --fx-em-weight: 700;
  --fx-body-size: 16px;
  --fx-wrap: 1300px;
  --fx-gut: clamp(20px, 4vw, 40px);
  --fx-pad: clamp(64px, 8vw, 100px);
  --fx-radius-btn: var(--radius);
  --fx-radius-img: var(--radius-lg);
  --fx-radius-card: var(--radius-lg);
  --fx-hero-mask: var(--radius-lg);
  --fx-status-radius: var(--radius);
  background: var(--fx-bg);
  color: var(--fx-ink);
  font-family: var(--fx-font-body);
  font-size: var(--fx-body-size);
  line-height: 1.6;
}
.fx-embed .fx-btn { font-family: var(--font-body); }

/* Colours. Trades palettes come from themes-flex.css (same names and
   values); Salon and Food palettes are mapped from the layout's tokens. */
.fx-embed:is([data-family="salon"], [data-family="food"]) {
  --fx-accent: var(--brand);
  --fx-accent-dk: var(--brand-dk);
  --fx-accent-soft: var(--brand-light);
  --fx-bg: var(--bg);
  --fx-surface: var(--surface);
  --fx-surface-2: var(--surface-2);
  --fx-ink: var(--text);
  --fx-ink-dim: var(--text-dim);
  --fx-muted: var(--muted);
  --fx-rule: var(--border);
  --fx-alt: var(--accent);
  --fx-on-accent: var(--bg);
  --fx-button: var(--brand);
  --fx-button-hover: var(--brand-dk);
  --fx-on-button: var(--bg);
}
/* Palettes where text in the page colour on the brand colour falls below
   WCAG AA (4.5:1): the button uses the darker shade, or dark text. */
:is([data-theme="terracotta"], [data-theme="sage"], [data-theme="blush"], [data-theme="ink"], [data-theme="trattoria"])
  .fx-embed:is([data-family="salon"], [data-family="food"]) { --fx-button: var(--brand-dk); --fx-button-hover: var(--text); }
[data-theme="bold-aloha"] .fx-embed[data-family="food"] { --fx-on-button: var(--text); --fx-on-accent: var(--text); }

/* Type per layout, matching each layout's own section headings. */
.fx-embed:is([data-layout="warm-boutique"], [data-layout="editorial-luxe"], [data-layout="daybreak-cafe"]) {
  --fx-display-weight: 400; --fx-em-style: italic; --fx-em-weight: 400;
}
.fx-embed[data-layout="editorial-luxe"] { --fx-h2-size: clamp(36px, 5vw, 60px); --fx-h2-line: 1; }
.fx-embed[data-layout="industrial-bold"] { --fx-display-case: uppercase; --fx-h2-line: .95; --fx-display-tracking: -0.03em; }
.fx-embed[data-layout="counter-diner"] { --fx-display-weight: 800; --fx-display-case: uppercase; --fx-h2-line: .95; --fx-display-tracking: -0.03em; }
.fx-embed[data-layout="numero-otto-trattoria"] { --fx-h2-size: clamp(28px, 3.8vw, 46px); }