/* ============================================================================
   TYPOGRAPHY REFINEMENTS - INFINITE ARCHITECTS
   Based on TYPOGRAPHY-STRATEGY-ULTIMATE.md
   "Don't change the fonts. Refine the execution."
   ============================================================================ */

/* ============================================================================
   1. FONT RENDERING OPTIMISATION
   ============================================================================ */

/* Global antialiasing for sharper text */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Cinzel (Display) - Authority without arrogance */
[class*="font-display"],
.hero-title,
.section-title,
.accordion-trigger,
.book-title,
h1, h2, h3 {
    font-feature-settings: 'liga' 1, 'kern' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Cormorant Garamond (Serif) - Intellect without stuffiness */
[class*="font-serif"],
.body-text,
.quote-text,
p,
blockquote {
    font-feature-settings: 'liga' 1, 'kern' 1, 'onum' 1;
    text-rendering: optimizeLegibility;
}

/* Space Mono (Technical) - Precision without coldness */
[class*="font-mono"],
.label,
.status-badge,
.data-point,
code,
pre {
    font-feature-settings: 'liga' 0; /* Disable ligatures for mono */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   1.5 UNIVERSAL TOUCH & INTERACTION OPTIMISATION
   Removes 300ms tap delay on iOS, improves all platforms
   ============================================================================ */

/* Interactive elements - eliminate tap delay */
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"],
a {
    touch-action: manipulation;
}

/* Form inputs - prevent zoom on focus (iOS) */
input,
textarea,
select {
    touch-action: manipulation;
    font-size: 16px; /* Prevents iOS zoom on focus */
}

/* Newsletter form specific */
.newsletter-button,
.newsletter-input {
    touch-action: manipulation;
}

/* Autofill styling - consistent across browsers */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary, #e8d4a0);
    -webkit-box-shadow: 0 0 0px 1000px var(--void-surface, #0a0c14) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================================================
   2. SYSTEMATIC LETTER-SPACING
   Following the strategy: 0.02em, 0.04em, 0.08em, 0.12em, 0.15em
   ============================================================================ */

/* Tight (body text) */
.ls-tight {
    letter-spacing: 0.01em;
}

/* Normal (standard content) */
.ls-normal {
    letter-spacing: 0.02em;
}

/* Medium (subtitles) */
.ls-medium {
    letter-spacing: 0.04em;
}

/* Wide (headlines) */
.ls-wide {
    letter-spacing: 0.08em;
}

/* Extra wide (labels, badges) */
.ls-extra-wide {
    letter-spacing: 0.12em;
}

/* Ultra wide (buttons, CTAs) */
.ls-ultra {
    letter-spacing: 0.15em;
}

/* ============================================================================
   3. LINE-HEIGHT STANDARDISATION
   Body text: 1.7-1.75 for optimal readability
   ============================================================================ */

/* Body content - optimal reading */
body {
    line-height: 1.75;
}

/* Headings - tighter */
h1, h2, h3, h4 {
    line-height: 1.2;
}

/* Large body text */
.text-lg,
.body-large {
    line-height: 1.7;
}

/* Standard paragraphs */
p {
    line-height: 1.75;
}

/* Quotes */
blockquote {
    line-height: 1.6;
}

/* Labels and technical text */
.label,
code {
    line-height: 1.4;
}

/* ============================================================================
   4. MOBILE TYPOGRAPHY (16px minimum for iOS zoom prevention)
   ============================================================================ */

@media (max-width: 767px) {
    /* Base font size - 16px minimum */
    body {
        font-size: 16px;
        line-height: 1.7;
    }

    /* Paragraphs */
    p {
        font-size: 1rem; /* 16px */
        line-height: 1.7;
        letter-spacing: 0.005em;
    }

    /* Hero title */
    .hero-title,
    h1 {
        font-size: 2.25rem; /* 36px */
        letter-spacing: 0.06em;
        line-height: 1.15;
    }

    /* Section titles */
    .section-title,
    h2 {
        font-size: 1.5rem; /* 24px */
        letter-spacing: 0.04em;
        line-height: 1.25;
    }

    /* Subsection titles */
    h3 {
        font-size: 1.25rem; /* 20px */
        letter-spacing: 0.03em;
        line-height: 1.3;
    }

    /* Body large */
    .body-large {
        font-size: 1.0625rem; /* 17px */
        line-height: 1.65;
    }

    /* Quotes */
    blockquote {
        font-size: 1.0625rem; /* 17px */
        line-height: 1.55;
    }

    /* Labels - minimum readable */
    .label,
    .status-badge {
        font-size: 0.625rem; /* 10px minimum */
        letter-spacing: 0.1em;
    }

    /* Buttons */
    button,
    .btn {
        font-size: 0.6875rem; /* 11px */
        letter-spacing: 0.12em;
    }
}

/* ============================================================================
   5. DESKTOP TYPOGRAPHY SCALE (1024px+)
   ============================================================================ */

@media (min-width: 1024px) {
    /* Hero Title */
    .hero-title,
    h1.hero-title {
        font-size: clamp(3rem, 5vw, 4.5rem); /* 48px - 72px */
        font-weight: 400;
        letter-spacing: 0.08em;
        line-height: 1.1;
    }

    /* Section Title */
    .section-title,
    h2.section-title {
        font-size: clamp(2rem, 3.5vw, 3rem); /* 32px - 48px */
        font-weight: 400;
        letter-spacing: 0.06em;
        line-height: 1.2;
    }

    /* Subsection Title */
    h3 {
        font-size: clamp(1.5rem, 2vw, 2rem); /* 24px - 32px */
        font-weight: 500;
        letter-spacing: 0.04em;
        line-height: 1.3;
    }

    /* Body Large - introductory paragraphs */
    .body-large {
        font-size: clamp(1.125rem, 1.5vw, 1.375rem); /* 18px - 22px */
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: 0.01em;
    }

    /* Body - standard */
    p {
        font-size: 1.0625rem; /* 17px - optimal for reading */
        font-weight: 400;
        line-height: 1.75;
        letter-spacing: 0.01em;
    }

    /* Quote */
    blockquote {
        font-size: 1.25rem; /* 20px */
        font-weight: 400;
        line-height: 1.6;
        letter-spacing: 0.01em;
    }

    /* Label */
    .label {
        font-size: 0.6875rem; /* 11px */
        font-weight: 400;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    /* Label Large */
    .label-large {
        font-size: 0.8125rem; /* 13px */
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    /* Button text */
    button,
    .btn {
        font-size: 0.75rem; /* 12px */
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }
}

/* ============================================================================
   6. FONT WEIGHT STANDARDISATION (400/500/600/700 only)
   ============================================================================ */

/* Regular (400) - body text, quotes */
.fw-regular {
    font-weight: 400;
}

/* Medium (500) - emphasis, subsections */
.fw-medium {
    font-weight: 500;
}

/* Semibold (600) - important labels */
.fw-semibold {
    font-weight: 600;
}

/* Bold (700) - buttons, strong emphasis */
.fw-bold {
    font-weight: 700;
}

/* ============================================================================
   7. PARAGRAPH SPACING
   ============================================================================ */

/* Generous spacing for serif body text */
p {
    margin-bottom: 1.5em;
}

p + p {
    margin-top: 0;
}

/* ============================================================================
   8. LINK STYLING - Underline that doesn't touch descenders
   ============================================================================ */

a:not(.btn):not(.button) {
    text-decoration: underline;
    text-decoration-color: rgba(212, 168, 75, 0.4);
    text-underline-offset: 0.15em;
    transition: text-decoration-color 0.2s ease;
}

a:not(.btn):not(.button):hover {
    text-decoration-color: rgba(212, 168, 75, 1);
}

/* ============================================================================
   9. OPTIMAL LINE LENGTH (65-75 chars on desktop)
   ============================================================================ */

.content-container,
.prose {
    max-width: 680px; /* ~70 characters at 17px */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .content-container,
    .prose {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================================================
   10. ACCORDION HEADERS (Mobile-specific refinement)
   ============================================================================ */

@media (max-width: 767px) {
    .accordion-trigger,
    .accordion-title,
    [data-accordion] > button {
        font-family: var(--font-display, 'Cinzel', serif);
        font-size: 1.5rem; /* 24px */
        letter-spacing: 0.04em;
        line-height: 1.25;
        font-weight: 400;
    }
}

/* ============================================================================
   11. SPECIFIC ELEMENT REFINEMENTS
   ============================================================================ */

/* Equation display (U = I x R) */
.equation,
.equation-display {
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: clamp(2.5rem, 4vw, 4rem); /* 40px - 64px */
    font-weight: 400;
    letter-spacing: 0.1em;
}

@media (max-width: 767px) {
    .equation,
    .equation-display {
        font-size: 2rem; /* 32px */
        letter-spacing: 0.08em;
    }
}

/* Data/statistics */
.data,
.stat-value {
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.75rem; /* 12px */
    font-weight: 400;
    letter-spacing: 0.08em;
}

/* Status badges */
.status-badge,
.verified-badge {
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.6875rem; /* 11px */
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ============================================================================
   12. PRINT TYPOGRAPHY
   ============================================================================ */

@media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }

    h1 {
        font-size: 24pt;
    }

    h2 {
        font-size: 18pt;
    }

    h3 {
        font-size: 14pt;
    }

    p {
        font-size: 12pt;
        orphans: 3;
        widows: 3;
    }
}

/* ============================================================================
   13. DESIGN FIXES - MOBILE NAVIGATION & CHAT
   Hide problematic navigation elements, fix chat suggestions
   ============================================================================ */

/* CRITICAL FIX: Hide the huge gold circles (progress indicator / section nav)
   These elements overlap content and look broken on mobile */
.progress-indicator,
.section-progress,
.chapter-sidebar,
.chapter-nav,
.slideshow-nav,
nav.progress-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Extra specificity for stubborn elements */
html body .progress-indicator,
html body .section-progress,
html body .progress-dot,
html body nav.progress-indicator,
html body nav.progress-indicator .progress-dot {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* FIX: Ask Book Chat Suggestion Buttons - proper pills, not broken circles */
.ask-book-chat__suggestions-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
}

.ask-book-chat__suggestion {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    border-radius: 100px !important;
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 36px !important;
    background: rgba(212, 168, 75, 0.1) !important;
    border: 1px solid rgba(212, 168, 75, 0.25) !important;
    color: rgba(240, 235, 227, 0.85) !important;
    font-family: var(--font-mono, 'Space Mono', monospace) !important;
    transition: all 0.2s ease !important;
}

.ask-book-chat__suggestion:hover {
    background: rgba(212, 168, 75, 0.2) !important;
    border-color: rgba(212, 168, 75, 0.5) !important;
    color: #d4a84b !important;
}

/* Mobile-specific chat fixes */
@media (max-width: 768px) {
    .ask-book-chat__suggestions-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .ask-book-chat__suggestion {
        white-space: normal !important;
        text-align: center !important;
        padding: 12px 10px !important;
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        border-radius: 12px !important;
        min-height: 48px !important;
    }
}

/* ============================================================================
   14. iOS VIEWPORT FIX - 100dvh fallback
   ============================================================================ */

/* iOS Safari viewport height fix */
@supports (-webkit-touch-callout: none) {
    .ask-book-chat__panel,
    .modal,
    .fullscreen {
        height: 100dvh;
        max-height: 100dvh;
    }
}

/* ============================================================================
   15. HIGH CONTRAST MODE SUPPORT
   ============================================================================ */

@media (prefers-contrast: high) {
    .ask-book-chat__suggestion {
        border-width: 2px !important;
        border-color: #d4a84b !important;
    }

    .progress-dot,
    .section-progress .progress-dot {
        display: none !important;
    }
}