/**
 * Ewe Typography Styles
 * Special font handling for Ewe language characters
 * Version: 1.0.0
 * UPDATED: Removed Garamond, now uses sans-serif
 */

/* ============================================
   EWE SPECIAL CHARACTERS SUPPORT
   Ɖ/ɖ, Ɛ/ɛ, Ƒ/ƒ, Ɣ/ɣ, Ŋ/ŋ, Ɔ/ɔ, Ʋ/ʋ
   ============================================ */

/* Ensure Ewe characters display properly across all browsers */
@charset "UTF-8";

/* Font face declarations for optimal Ewe character support */
/* [CHANGED] Removed Garamond, added Noto Sans for better Ewe support */
@font-face {
    font-family: 'Ewe Serif';
    src: local('Times New Roman'), 
         local('Times'),
         local('Georgia'),
         local('Noto Serif');
    unicode-range: U+0189, U+0256, U+0190, U+025B, U+0191, U+0192, 
                   U+0194, U+0263, U+014A, U+014B, U+0186, U+0254, 
                   U+01B2, U+028B;
}

@font-face {
    font-family: 'Ewe Sans';
    src: local('Noto Sans'),
         local('Source Sans Pro'),
         local('Segoe UI'),
         local('Arial'), 
         local('Helvetica');
    unicode-range: U+0189, U+0256, U+0190, U+025B, U+0191, U+0192, 
                   U+0194, U+0263, U+014A, U+014B, U+0186, U+0254, 
                   U+01B2, U+028B;
}

/* ============================================
   EWE TEXT STYLES
   ============================================ */

/* [CHANGED] Base Ewe text - now uses var(--font-ewe) which is sans-serif */
.ewe-text,
[lang="ee"],
.ewe-word,
.proverb-ewe,
.story-ewe-title,
.folktale-ewe-title,
.greeting-ewe {
    font-family: var(--font-ewe);
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Larger Ewe text for better readability of special characters */
.ewe-text-large {
    font-size: calc(1em * var(--font-ewe-scale, 1.2));
    line-height: 1.5;
}

/* Ewe headings */
h1.ewe-text,
h2.ewe-text,
h3.ewe-text {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Ewe special characters highlighting (optional) */
.ewe-char-highlight {
    color: var(--color-secondary, #d4a017);
    font-weight: 600;
}

/* ============================================
   EWE CHARACTER EXPLANATIONS (Educational)
   ============================================ */

/* Tooltip for Ewe characters */
.ewe-char-tooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--color-secondary);
}

.ewe-char-tooltip:hover::after {
    content: attr(data-pronunciation);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: var(--font-body);
    white-space: nowrap;
    z-index: 100;
}

/* Character grid for reference pages */
.ewe-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.ewe-char-item {
    text-align: center;
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.ewe-char-large {
    font-family: var(--font-ewe);
    font-size: 3rem;
    line-height: 1.2;
    color: var(--color-primary);
}

.ewe-char-small {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-top: var(--spacing-xs);
}

.ewe-char-pronunciation {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-secondary);
    margin-top: 4px;
}

/* ============================================
   EWE PRONUNCIATION GUIDE
   ============================================ */

.pronunciation-guide {
    background: var(--color-background);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.pronunciation-item {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.pronunciation-char {
    font-family: var(--font-ewe);
    font-size: 1.5rem;
    font-weight: 700;
    min-width: 50px;
    color: var(--color-primary);
}

.pronunciation-sound {
    font-family: var(--font-body);
    color: var(--color-text-light);
}

.pronunciation-example {
    font-family: var(--font-ewe);
    color: var(--color-text);
    margin-left: auto;
}

/* ============================================
   EWE TONAL MARKS (Optional)
   ============================================ */

.ewe-tone-high {
    text-decoration: overline;
    text-decoration-color: var(--color-secondary);
}

.ewe-tone-low {
    text-decoration: underline;
    text-decoration-color: var(--color-secondary);
}

.ewe-tone-falling {
    text-decoration: overline underline;
    text-decoration-color: var(--color-secondary);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .ewe-text-large {
        font-size: calc(1em * (var(--font-ewe-scale, 1.2) * 0.9));
    }
    
    .ewe-char-large {
        font-size: 2.5rem;
    }
    
    .ewe-char-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .ewe-char-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   PRINT STYLES FOR EWE TEXT
   ============================================ */

@media print {
    .ewe-text,
    [lang="ee"] {
        font-family: 'Times New Roman', serif !important;
        color: black !important;
    }
    
    .ewe-char-tooltip {
        border-bottom: none;
    }
}

/* ============================================
   ANIMATIONS FOR EWE TEXT (Subtle)
   ============================================ */

@keyframes eweFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ewe-text-animate {
    animation: eweFadeIn 0.5s ease-out forwards;
}

/* Staggered animation for lists */
.ewe-text-list .ewe-text-item {
    opacity: 0;
    animation: eweFadeIn 0.3s ease-out forwards;
}

.ewe-text-list .ewe-text-item:nth-child(1) { animation-delay: 0.05s; }
.ewe-text-list .ewe-text-item:nth-child(2) { animation-delay: 0.10s; }
.ewe-text-list .ewe-text-item:nth-child(3) { animation-delay: 0.15s; }
.ewe-text-list .ewe-text-item:nth-child(4) { animation-delay: 0.20s; }
.ewe-text-list .ewe-text-item:nth-child(5) { animation-delay: 0.25s; }

/* ============================================
   UTILITY CLASSES FOR EWE CONTENT
   ============================================ */

.ewe-italic {
    font-style: italic;
}

.ewe-bold {
    font-weight: 700;
}

.ewe-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ewe-small-caps {
    font-variant: small-caps;
}

.ewe-text-center {
    text-align: center;
}

.ewe-text-right {
    text-align: right;
}

/* Ewe blockquote styling */
blockquote.ewe-text {
    position: relative;
    padding-left: var(--spacing-lg);
    border-left: 4px solid var(--color-secondary);
    quotes: "❝" "❞" "❛" "❜";
}

blockquote.ewe-text::before {
    content: open-quote;
    font-size: 3rem;
    position: absolute;
    left: 5px;
    top: -10px;
    color: var(--color-secondary);
    opacity: 0.3;
    font-family: serif;
}

/* [CHANGED] Ewe word of the day highlight */
.ewe-word-highlight {
    display: inline-block;
    background: linear-gradient(120deg, var(--color-background) 0%, var(--color-background) 70%, transparent 90%);
    padding: 0.1em 0.3em;
    border-radius: 4px;
    font-weight: 600;
}