/* ============================================================
   GLOBAL FONT STACK — digitalic.id
   Primary   : Satoshi     (self-hosted, /fonts/satoshi/)
   Secondary : Inter       (Google Fonts)
   Tertiary  : Press Start 2P (Google Fonts — decorative)
   ============================================================ */

/* ── Satoshi @font-face (self-hosted) ── */
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/satoshi/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/satoshi/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/satoshi/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/satoshi/Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: optional;
}

/* ── CSS Custom Properties ── */
:root {
  --font-primary:   'Satoshi', sans-serif;
  --font-secondary: 'Inter', sans-serif;
  --font-accent:    'Press Start 2P', cursive;
}

/* ── Primary: Satoshi for body text & headings ── */
body,
p,
li,
dt, dd,
td, th,
label,
input,
textarea,
select,
button,
a,
blockquote,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary) !important;
}

/* ── Secondary: Inter for supporting UI text ── */
small,
figcaption,
.wp-caption-text,
.post-meta,
.entry-meta,
.breadcrumbs,
.tag-list,
[class*="text-sm"],
[class*="text-xs"],
.font-inter {
  font-family: var(--font-secondary) !important;
}

/* ── Tertiary: Press Start 2P — decorative & accent ── */
.font-accent,
.press-start,
[data-font="accent"] {
  font-family: var(--font-accent) !important;
  letter-spacing: 0.05em;
}

/* ── Utility classes (opt-in) ── */
.font-satoshi  { font-family: var(--font-primary)   !important; }
.font-inter    { font-family: var(--font-secondary)  !important; }


/* ============================================================
   CORE WEB VITALS — TYPOGRAPHY COMPLIANCE
   Fixes Bricks' 15px body default and enforces legible scale
   ============================================================ */

/*
 * 0. CSS VARIABLE OVERRIDES — fix Bricks' rem-based sizes
 *
 *    Bricks sets html { font-size: 62.5% } so 1rem = 10px (not 16px).
 *    This makes their original variables resolve to:
 *      --text-xs → 10–12px  ❌  (Lighthouse hard min: 12px)
 *      --text-s  → 14px     ❌  (body-text min: 16px)
 *      --text-m  → 15–16px  ⚠️  (borderline)
 *
 *    We re-declare them in px so they're independent of any rem reset,
 *    and cascade to every element that references these variables —
 *    including Bricks global classes (text-xs_c, text-s_c, text-m_c).
 *
 *    Our fonts.css is enqueued AFTER bricks-frontend, so this wins. ✓
 */
:root {
  /* xs: 10-12px → 12-14px  (breadcrumbs, badges, captions) */
  --text-xs: clamp(12px, calc(0.5vw + 10px), 14px);

  /* s:  14px    → 16-18px  (body copy, post meta, UI labels) */
  --text-s:  clamp(16px, calc(0.25vw + 15px), 18px);

  /* m:  15-16px → 17-20px  (sub-headings, card text)        */
  --text-m:  clamp(17px, calc(0.5vw + 15px), 20px);
}

/*
 * 1. BODY BASE — 16px minimum
 *    Bricks sets body { font-size: var(--text-s) } via theme styles.
 *    Double-guarded: the variable above + explicit px override below.
 */
body {
  font-size: 16px !important;
  line-height: 1.7  !important;
}

p {
  font-size: 1em   !important;   /* inherits body 16px */
  line-height: 1.7 !important;
}

/*
 * 2. FLUID HEADING SCALE — clamp(min, fluid, max)
 *    Desktop → mobile: h1 48→28px, h2 36→22px, h3 28→20px …
 *    Eliminates the need for explicit mobile breakpoint overrides.
 *
 *    Formula: clamp(minPx, slopePX·(vw/100) + interceptPx, maxPx)
 *    Breakpoints covered: ~320px (small phone) → 1440px (desktop)
 */
h1 { font-size: clamp(28px, 5vw   + 12px, 48px) !important; line-height: 1.15 !important; }
h2 { font-size: clamp(22px, 3.5vw + 10px, 36px) !important; line-height: 1.25 !important; }
h3 { font-size: clamp(20px, 2vw   + 14px, 28px) !important; line-height: 1.35 !important; }
h4 { font-size: clamp(18px, 1.5vw + 13px, 22px) !important; line-height: 1.4  !important; }
h5 { font-size: clamp(16px, 1vw   + 13px, 18px) !important; line-height: 1.4  !important; }
h6 { font-size: clamp(14px, 0.5vw + 12px, 16px) !important; line-height: 1.5  !important; }

/*
 * 3. SMALL TEXT — 12px hard minimum (Lighthouse "Use legible font sizes")
 *    max() ensures we never go below 12px regardless of inheritance.
 */
small,
figcaption,
.wp-caption-text,
.post-meta,
.entry-meta {
  font-size:   max(12px, 0.75em) !important;
  line-height: 1.5               !important;
}

/*
 * 4. FORM INPUTS — force 16px to prevent iOS Safari auto-zoom
 *    iOS zooms the viewport whenever a focused input has font-size < 16px.
 *    This is a common mobile UX / CWV issue.
 */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  font-size:   16px !important;
  line-height: 1.5  !important;
}

/*
 * 5. BUTTONS — fix cramped line-height
 *    Bricks sets button line-height: 1 which causes visual cramping
 *    and fails WCAG 2.1 SC 1.4.12 (Text Spacing).
 */
button,
.brxe-button,
[class*="brxe-button"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
  font-size:   max(14px, 0.875em) !important;
  line-height: 1.35               !important;
}

/*
 * 6. SINGLE POST / ARTICLE CONTENT — brxe-post-content
 *
 *    The `post-content` Bricks element (ID zlhzyy in Single Post Blog,
 *    and `{post_content}` token in Single Post Service) renders the raw
 *    WordPress editor output. Bricks applies no explicit font-size to this
 *    element, so all sizing comes from inheritance and the editor's own
 *    generated markup.
 *
 *    These rules ensure article body text and all heading levels inside
 *    the content area render at legible, scaled sizes — desktop & mobile.
 */

/* Article wrapper — both Bricks post-content element and classic WP content */
.brxe-post-content,
.entry-content,
.post-content,
.wp-block-post-content,
article .content {
  font-size:   16px !important;
  line-height: 1.75 !important;
}

/* Paragraphs & lists inside article */
.brxe-post-content p,
.brxe-post-content li,
.brxe-post-content dt,
.brxe-post-content dd,
.entry-content p,
.entry-content li {
  font-size:   1em  !important;   /* inherits 16px from parent */
  line-height: 1.75 !important;
  max-width:   72ch;              /* optimal reading line-length (~65-75 chars) */
}

/* Headings inside article content — fluid scale */
.brxe-post-content h1,
.entry-content h1 { font-size: clamp(26px, 4vw + 10px, 44px) !important; line-height: 1.15 !important; }

.brxe-post-content h2,
.entry-content h2 { font-size: clamp(22px, 3vw + 10px, 34px) !important; line-height: 1.25 !important; }

.brxe-post-content h3,
.entry-content h3 { font-size: clamp(19px, 2vw + 12px, 26px) !important; line-height: 1.35 !important; }

.brxe-post-content h4,
.entry-content h4 { font-size: clamp(17px, 1vw + 13px, 22px) !important; line-height: 1.4  !important; }

.brxe-post-content h5,
.brxe-post-content h6,
.entry-content h5,
.entry-content h6  { font-size: clamp(16px, 0.5vw + 13px, 18px) !important; line-height: 1.4 !important; }

/* Blockquotes */
.brxe-post-content blockquote,
.entry-content blockquote {
  font-size:   clamp(17px, 1.5vw + 13px, 22px) !important;
  line-height: 1.6  !important;
  font-style:  italic;
}

/* Captions & footnotes inside content */
.brxe-post-content figcaption,
.brxe-post-content small,
.entry-content figcaption,
.entry-content small {
  font-size:   max(12px, 0.75em) !important;
  line-height: 1.5 !important;
}

/* Code blocks */
.brxe-post-content pre,
.brxe-post-content code,
.entry-content pre,
.entry-content code {
  font-size: max(13px, 0.85em) !important;
  line-height: 1.6 !important;
}

/*
 * 7. BREADCRUMBS & POST META — typically small supporting text
 *    Clamped to 12px minimum to pass Lighthouse "legible font sizes".
 */
.brxe-breadcrumbs,
.brxe-post-meta,
.brxe-post-reading-time,
.brxe-post-taxonomy {
  font-size:   max(12px, var(--text-xs)) !important;
  line-height: 1.5 !important;
}