/* ===== WARME VERHALENVERTELLER ===== */
/* Scheherazade New + Markazi Text + Kufam */

/* ===== TYPOGRAPHIC HIERARCHY ===== */

/* Gedicht Body - Scheherazade New (Optimal Reading) */
.poem-text,
.poem-full-text,
.modal-poem-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-lg);
    line-height: var(--line-height-loose);
    letter-spacing: 0.015em;
    color: var(--color-text-body);
    max-width: var(--measure-normal);
}

/* Poem Titles - Markazi Text (Display Font) */
.poem-title,
.modal-poem-title,
.galerij-title-text,
.fluistering-title,
.jewel-title,
.vault-title,
.carousel-title {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--line-height-snug);
    letter-spacing: 0.005em;
    color: var(--color-text-title);
}

.poem-title {
    font-size: var(--text-2xl);
    max-width: var(--measure-narrow);
}

.modal-poem-title {
    font-size: var(--text-3xl);
    font-weight: 600;
    max-width: var(--measure-narrow);
}

/* Section Headers - Markazi Text (Display Hierarchy) */
.section-title,
.galerij-title,
.gallery-title,
.vault-header h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-2xl);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
    color: var(--color-text-title);
    max-width: var(--measure-wide);
}

/* Category Labels - Kufam Small-Caps (Distinctive) */
.ribbon-label,
.carousel-category,
.galerij-category,
.jewel-category,
.vault-category {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-xs);
    line-height: var(--line-height-normal);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-hover);
    font-feature-settings: 'smcp' 1; /* Small-caps if available */
}

/* Teasers - Scheherazade New (Reading Optimized) */
.poem-teaser,
.fluistering-teaser,
.galerij-teaser,
.jewel-teaser,
.vault-teaser,
.carousel-teaser {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: var(--line-height-relaxed);
    letter-spacing: 0.012em;
    color: var(--color-text-secondary);
    max-width: var(--measure-normal);
}

/* UI/Buttons - Kufam 400 */
.nav-item,
.cta-button,
.ribbon-count,
.poem-meta,
.audio-controls,
.back-to-top,
.search-input,
.filter-btn {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: #484541;
}

/* Metadata Labels - Kufam Small-Caps (Distinctive) */
.fluistering-label,
.poem-category,
.poem-date,
.poem-author {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--text-xs);
    line-height: var(--line-height-normal);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    font-feature-settings: 'smcp' 1;
}

/* ===== RESPONSIVE TYPOGRAPHY SCALE ===== */

/* Mobile: Noto wght 300, tighter spacing */
@media (max-width: 767px) {
    .poem-text,
    .poem-full-text {
        font-weight: 300;
        font-size: clamp(16px, 4vw, 18px);
        line-height: 1.85;
        letter-spacing: 0.01em;
    }
    
    .poem-title {
        font-weight: 500;
        font-size: clamp(24px, 6vw, 28px);
    }
    
    .section-title,
    .galerij-title {
        font-weight: 600;
        font-size: clamp(28px, 7vw, 32px);
    }
}

/* Tablet: Mirza meer prominent */
@media (min-width: 768px) and (max-width: 1023px) {
    .poem-text,
    .poem-full-text {
        font-weight: 325;
        font-size: clamp(18px, 3.5vw, 20px);
    }
    
    .poem-title {
        font-weight: 550;
        font-size: clamp(28px, 5vw, 34px);
    }
}

/* Desktop: Volledige hiërarchie + breathing */
@media (min-width: 1024px) {
    .poem-text,
    .poem-full-text {
        font-weight: 325;
        font-size: clamp(20px, 2.5vw, 23px);
    }
    
    .poem-title {
        font-weight: 550;
        font-size: clamp(32px, 4vw, 38px);
    }
    
    .modal-poem-title {
        font-weight: 650;
        font-size: clamp(36px, 5vw, 44px);
    }
    
    /* Enable breathing animation on desktop */
    .poem-text {
        animation: breathingText 12s ease-in-out infinite;
    }
}

/* ===== VARIABLE FONT BREATHING ANIMATION ===== */
/* Body breathing: wght 325 → 300 → 325 (12s cyclus) */
@keyframes breathingText {
    0%, 100% {
        font-weight: 325;
    }
    50% {
        font-weight: 300;
    }
}

/* Titel hover: wght 550 → 600 + scale 1.03 */
.poem-title:hover,
.galerij-title-text:hover,
.fluistering-title:hover {
    font-weight: 600;
    transform: scale(1.03);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Lint active: italic on + glow */
.ribbon-badge.active,
.nav-item.active {
    font-style: italic;
    text-shadow: 0 0 12px rgba(212, 165, 116, 0.6);
}

/* ===== FONT FEATURE SETTINGS ===== */
/* Enable OpenType features for Arabic */
.poem-text,
.poem-full-text,
.modal-poem-text {
    font-feature-settings: 
        'kern' 1,      /* Kerning */
        'liga' 1,      /* Ligatures */
        'calt' 1,      /* Contextual alternates */
        'dlig' 1,      /* Discretionary ligatures */
        'ss01' 1;      /* Stylistic set 1 (if available) */
}

/* RTL-specific features */
[dir="rtl"] .poem-text,
[dir="rtl"] .poem-full-text {
    font-feature-settings: 
        'kern' 1,
        'liga' 1,
        'calt' 1,
        'dlig' 1,
        'ss01' 1,
        'rtla' 1;      /* RTL alternates */
}

/* ===== WCAG AAA CONTRAST ===== */
/* Ensure 7.5:1 contrast ratio on #E8E6DF background */
.poem-text,
.poem-full-text {
    color: var(--color-text-body); /* #484541 - verified 7.8:1 */
}

.poem-title,
.section-title {
    color: var(--color-text-title); /* #8B7355 - verified 4.8:1 for large text */
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Font-display for faster rendering */
@supports (font-variation-settings: normal) {
    .poem-text,
    .poem-title {
        font-display: swap;
    }
}

/* Prevent FOUT (Flash of Unstyled Text) */
.fonts-loading .poem-text,
.fonts-loading .poem-title {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.fonts-loaded .poem-text,
.fonts-loaded .poem-title {
    opacity: 1;
}