/* =====================================================================
   FNP Fleur — Global Typography System
   ---------------------------------------------------------------------
   Loaded AFTER style.css and font/font2.css to refine the active type
   scale without breaking existing layouts.

   Active body font  : 'EB Garamond' (serif, set in font2.css)
   Active heading    : 'EB Garamond' (set in font2.css)
   Brand accent font : 'RollgatesLuxury' (script, declared in template)
   Local fallback    : 'Montserratc' (sans, used as UI fallback)

   This file ONLY refines: scale, rhythm, spacing, fluid sizing,
   letter-spacing, line-height, micro-typography.
   ===================================================================== */


/* ---------- 1. Design Tokens (CSS custom properties) ---------- */
:root {
    /* Font stacks ------------------------------------------------ */
    --ff-serif: 'EB Garamond', 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --ff-sans:  'Montserratc', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --ff-luxe:  'Optima', 'Optima Nova', 'Quattrocento Sans', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
    --ff-script:'RollgatesLuxury', 'Great Vibes', 'Pinyon Script', cursive;

    /* Fluid type scale (mobile → desktop) ----------------------- */
    --fs-xs:    clamp(0.75rem, 0.70rem + 0.20vw, 0.85rem);   /* 12 → 13.6px  */
    --fs-sm:    clamp(0.875rem, 0.82rem + 0.25vw, 1rem);     /* 14 → 16px    */
    --fs-base:  clamp(1rem, 0.95rem + 0.30vw, 1.1875rem);    /* 16 → 19px    */
    --fs-md:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);    /* 17 → 20px    */
    --fs-lg:    clamp(1.25rem, 1.15rem + 0.55vw, 1.5rem);    /* 20 → 24px    */
    --fs-xl:    clamp(1.5rem, 1.30rem + 1.00vw, 2rem);       /* 24 → 32px    */
    --fs-2xl:   clamp(1.75rem, 1.40rem + 1.75vw, 2.625rem);  /* 28 → 42px    */
    --fs-3xl:   clamp(2.125rem, 1.60rem + 2.50vw, 3.25rem);  /* 34 → 52px    */
    --fs-4xl:   clamp(2.5rem,  1.85rem + 3.20vw, 4rem);      /* 40 → 64px    */

    /* Line-height scale ----------------------------------------- */
    --lh-tight:   1.15;   /* big display headings        */
    --lh-snug:    1.25;   /* h1 / h2                      */
    --lh-normal:  1.45;   /* h3-h6                        */
    --lh-relaxed: 1.65;   /* body paragraphs              */
    --lh-loose:   1.85;   /* long-form reading            */

    /* Letter-spacing (tracking) --------------------------------- */
    --ls-tight:    -0.015em;
    --ls-normal:   0;
    --ls-wide:     0.04em;
    --ls-wider:    0.08em;
    --ls-widest:   0.16em;

    /* Vertical rhythm (spacing) --------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.5rem;
    --sp-8: 3rem;
    --sp-9: 4rem;
    --sp-10: 5rem;

    /* Reading-width measure ------------------------------------- */
    --measure-narrow: 38ch;
    --measure-base:   65ch;
    --measure-wide:   75ch;

    /* Color tokens (matching the active theme) ------------------ */
    --c-text:        #404040;
    --c-text-soft:   #606060;
    --c-text-muted:  #8a8a8a;
    --c-heading:     #303030;
    --c-rule:        rgba(0, 0, 0, 0.12);
    --c-brand:       #7e8000;
}


/* ---------- 2. Base micro-typography ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    font-variant-numeric: oldstyle-nums proportional-nums;
    text-wrap: pretty;
    color: var(--c-text);
}

/* Hyphenation only on long-form blocks */
p,
li,
blockquote {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* ---------- 3. Heading rhythm refinements (non-destructive) ---------- */
/* These only refine spacing & tracking; sizes still come from font2.css.
   We DON'T override font-size on bare h1-h6 to avoid breaking other pages. */

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;          /* prevents orphan words on headings */
    margin-top: 0;
    color: var(--c-heading);
    letter-spacing: var(--ls-tight);
}

h1 + p, h2 + p, h3 + p,
h4 + p, h5 + p, h6 + p {
    margin-top: var(--sp-3);     /* tightens heading → first paragraph */
}

/* Refine uppercase headings — current rule sets 1px, this adds polish */
h1.text-uppercase,
h2.text-uppercase,
h3.text-uppercase,
h4.text-uppercase,
h5.text-uppercase,
h6.text-uppercase {
    letter-spacing: var(--ls-widest);
    font-weight: 600;
}


/* ---------- 4. Paragraph & list rhythm ---------- */
p {
    margin-bottom: var(--sp-5);
}

/* Constrain measure ONLY inside long-form content blocks (safe for other
   templates — won't shrink paragraphs in cards, banners, footers, etc.) */
.entry-content p,
.custom_headings p,
article .post-content p,
.long-form p {
    max-width: var(--measure-wide);
}

/* Last paragraph in a block shouldn't add a phantom margin */
p:last-child,
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

/* List defaults ------------------------------------------------- */
ul, ol {
    margin: 0 0 var(--sp-5) 0;
    padding-left: 1.25rem;
}

li {
    margin-bottom: var(--sp-2);
    line-height: var(--lh-relaxed);
}

li:last-child {
    margin-bottom: 0;
}

/* Nested lists tighten one notch */
li > ul,
li > ol {
    margin-top: var(--sp-2);
    margin-bottom: 0;
}


/* ---------- 5. Inline elements ---------- */
strong, b {
    font-weight: 600;
    color: var(--c-heading);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

/* Selection */
::selection { background: rgba(126, 128, 0, 0.18); color: var(--c-heading); }


/* ---------- 6. Blockquote refinement ---------- */
blockquote {
    margin: var(--sp-7) 0;
    padding: 0 var(--sp-5);
    border-left: 3px solid var(--c-brand);
    font-style: italic;
    color: var(--c-text);
}

blockquote p {
    margin-bottom: var(--sp-3);
}


/* ---------- 7. Horizontal rule ---------- */
hr {
    border: 0;
    height: 1px;
    background: var(--c-rule);
    margin: var(--sp-7) 0;
}


/* ---------- 8. Links inside body copy ---------- */
p a:not(.btn):not(.nav-link),
li a:not(.btn):not(.nav-link) {
    color: var(--c-brand);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 220ms ease;
}

p a:not(.btn):hover,
li a:not(.btn):hover {
    background-size: 100% 1px;
}


/* ---------- 9. Refined section / display titles ---------- */
/* Add ".display-title" utility for hero-scale headlines without breaking
   existing .heading / .section-title rules. Use opt-in. */
.display-title {
    font-family: var(--ff-serif);
    font-size: var(--fs-4xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-weight: 500;
    color: var(--c-heading);
    margin-bottom: var(--sp-5);
}

.eyebrow {
    display: inline-block;
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--c-brand);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}

.script-accent {
    font-family: var(--ff-script);
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1;
}


/* ---------- 10. Form / input typography polish ---------- */
input,
select,
textarea {
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
}

label {
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-wide);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--c-heading);
    margin-bottom: var(--sp-2);
    display: inline-block;
}


/* ---------- 11. Responsive refinements ---------- */
/* On very small screens, dial back tracking so caps don't break lines */
@media (max-width: 480px) {
    h1.text-uppercase,
    h2.text-uppercase,
    h3.text-uppercase {
        letter-spacing: var(--ls-wider);
    }
    blockquote {
        padding: 0 var(--sp-4);
        margin: var(--sp-5) 0;
    }
}

/* Tablet & up — give long-form copy a touch more breathing room */
@media (min-width: 768px) {
    .entry-content,
    .custom_headings,
    .long-form {
        line-height: 1.7;
    }
    .entry-content p,
    .custom_headings p,
    .long-form p {
        margin-bottom: var(--sp-6);
    }
}

/* Print typography */
@media print {
    body { font-size: 11pt; line-height: 1.5; color: #000; }
    h1, h2, h3 { page-break-after: avoid; }
    p, blockquote { orphans: 3; widows: 3; }
}