/*
Theme Name: Lyrics Theme
Theme URI: https://example.com/lyrics-theme
Author: Lyrics PWA
Author URI: https://example.com
Description: A minimal, mobile-first WordPress theme for displaying song lyrics in multiple Indian languages. Optimized for PWA and offline access.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lyrics-theme
Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, theme-options, translation-ready, blog, entertainment
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# CSS Variables
# Base Reset
# Typography
# Layout
# Header
# Navigation
# Content
# Footer
# Utilities
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------------------------*/
:root {
    /* Lyrics Zoom Variable - initialize globally */
    --lyrics-zoom: 1;
    
    /* Colors - Light Mode (BHAJANBOOKLET Brand) */
    --color-primary: #8B1A1A;           /* Devotional Red - from lotus petals */
    --color-primary-dark: #6B1414;
    --color-primary-light: #D4A017;     /* Golden Saffron - lighter variant */
    --color-primary-lighter: #EAD7B0;   /* Champagne Gold */
    --color-secondary: #D4A017;         /* Golden Saffron - for buttons and highlights */
    --color-accent: #D4A017;            /* Golden Saffron */

    --color-text: #1A2B3C;              /* Midnight Navy - for body text */
    --color-text-secondary: #1A2B3C;    /* Midnight Navy - for tagline */
    --color-text-light: #64748b;
    --color-text-muted: #cbd5e1;

    --color-bg: #FFF9F0;                /* Spiritual Cream - global background */
    --color-bg-secondary: #FFF9F0;      /* Spiritual Cream */
    --color-bg-tertiary: #EAD7B0;       /* Champagne Gold - for cards */
    --color-bg-elevated: #ffffff;

    --header-bg: rgba(255, 249, 240, 0.95); /* Spiritual Cream with transparency */
    --header-border: 1px solid rgba(234, 215, 176, 0.8); /* Champagne Gold border */

    --color-border: #EAD7B0;            /* Champagne Gold - for borders */
    --color-border-dark: #D4A017;       /* Golden Saffron */

    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #D4A017;           /* Golden Saffron */
    --color-info: #3b82f6;

    /* Gradients - Updated with BHAJANBOOKLET colors */
    --gradient-primary: linear-gradient(135deg, #8B1A1A 0%, #D4A017 50%, #EAD7B0 100%);
    --gradient-hero: linear-gradient(135deg, #FFF9F0 0%, #EAD7B0 50%, #D4A017 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #FFF9F0 100%);
    --gradient-accent: linear-gradient(135deg, #D4A017 0%, #8B1A1A 100%);

    /* Typography - BHAJANBOOKLET Brand Fonts */
    --font-header: 'Cinzel', serif;       /* For "BHAJANBOOKLET" and main headers */
    --font-tagline: 'Montserrat', sans-serif; /* For the guide text and taglines */
    --font-body: 'Lora', serif;           /* For the actual Bhajan lyrics */
    --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Cinzel', serif;
    --font-telugu: 'Hind Guntur', 'Noto Sans Telugu', var(--font-body);
    --font-tamil: 'Hind Madurai', 'Noto Sans Tamil', var(--font-body);
    --font-kannada: 'Hind Siliguri', 'Noto Sans Kannada', var(--font-body);
    --font-hindi: 'Hind', 'Noto Sans Devanagari', var(--font-body);

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Font Size Adjustment - User customizable */
    --font-size-scale: 1; /* Default: 1 = 100%, Range: 0.85 to 1.3 */
    --content-font-size: calc(1rem * var(--font-size-scale));
    --content-line-height: 1.8;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows - Enhanced depth */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 20px rgb(99 102 241 / 0.15);
    --shadow-card: 0 2px 8px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.06);
    --shadow-card-hover: 0 4px 12px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.1);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --container-max: 1280px;
    --content-max: 800px;
    --header-height: 88px;
    
    /* Z-index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-toast: 1060;
}

/*--------------------------------------------------------------
# Dark Mode Variables
--------------------------------------------------------------*/
[data-theme="dark"] {
    /* Dark Mode Colors - Optimized for BHAJANBOOKLET brand */
    --color-text: #FFF9F0;              /* Spiritual Cream text */
    --color-text-secondary: #EAD7B0;    /* Champagne Gold */
    --color-text-light: #94a3b8;
    --color-text-muted: #64748b;

    --color-bg: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;
    --color-bg-elevated: #1e293b;

    --header-bg: rgba(15, 23, 42, 0.95);
    --header-border: 1px solid rgba(139, 26, 26, 0.5); /* Devotional Red border */

    --color-border: #334155;
    --color-border-dark: #475569;

    /* Primary colors remain vibrant but adjusted for dark backgrounds */
    --color-primary: #C84040;           /* Lighter Devotional Red for dark mode */
    --color-primary-dark: #8B1A1A;      /* Original Devotional Red */
    --color-primary-light: #6B1414;
    --color-primary-lighter: #312e81;

    --color-secondary: #E5B84A;         /* Lighter Golden Saffron for dark mode */
    --color-accent: #E5B84A;            /* Lighter Golden Saffron */

    --color-success: #34d399;
    --color-error: #f87171;
    --color-warning: #E5B84A;           /* Lighter Golden Saffron */
    --color-info: #60a5fa;

    /* Dark Mode Gradients - BHAJANBOOKLET themed */
    --gradient-primary: linear-gradient(135deg, #C84040 0%, #E5B84A 50%, #EAD7B0 100%);
    --gradient-hero: linear-gradient(135deg, #1e293b 0%, #312e81 50%, #422006 100%);
    --gradient-card: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --gradient-accent: linear-gradient(135deg, #E5B84A 0%, #C84040 100%);

    /* Enhanced shadows for dark mode */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7), 0 8px 10px -6px rgb(0 0 0 / 0.7);
    --shadow-glow: 0 0 20px rgb(200 64 64 / 0.3); /* Devotional Red glow */
    --shadow-card: 0 2px 8px rgb(0 0 0 / 0.2), 0 4px 16px rgb(0 0 0 / 0.3);
    --shadow-card-hover: 0 4px 12px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.5);
}

/* Support system preference for dark mode (only when no explicit theme is set) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Dark Mode Colors - Same as [data-theme="dark"] */
        --color-text: #FFF9F0;
        --color-text-secondary: #EAD7B0;
        --color-text-light: #94a3b8;
        --color-text-muted: #64748b;

        --color-bg: #0f172a;
        --color-bg-secondary: #1e293b;
        --color-bg-tertiary: #334155;
        --color-bg-elevated: #1e293b;

        --color-border: #334155;
        --color-border-dark: #475569;

        --color-primary: #C84040;
        --color-primary-dark: #8B1A1A;
        --color-primary-light: #6B1414;
        --color-primary-lighter: #312e81;

        --color-secondary: #E5B84A;
        --color-accent: #E5B84A;

        --color-success: #34d399;
        --color-error: #f87171;
        --color-warning: #E5B84A;
        --color-info: #60a5fa;

        --gradient-primary: linear-gradient(135deg, #C84040 0%, #E5B84A 50%, #EAD7B0 100%);
        --gradient-hero: linear-gradient(135deg, #1e293b 0%, #312e81 50%, #422006 100%);
        --gradient-card: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
        --gradient-accent: linear-gradient(135deg, #E5B84A 0%, #C84040 100%);

        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7), 0 8px 10px -6px rgb(0 0 0 / 0.7);
        --shadow-glow: 0 0 20px rgb(200 64 64 / 0.3);
        --shadow-card: 0 2px 8px rgb(0 0 0 / 0.2), 0 4px 16px rgb(0 0 0 / 0.3);
        --shadow-card-hover: 0 4px 12px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.5);
    }
}

/* Smooth theme transition */
html[data-theme] {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Prevent transitions on page load */
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
    transition: none !important;
}

/*--------------------------------------------------------------
# Base Reset
--------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

ul,
ol {
    padding-left: var(--space-6);
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header);    /* Cinzel for headers */
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 1px;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* Body text uses Lora for devotional lyrics */
body {
    font-family: var(--font-body);      /* Lora for body text */
}

/* Tagline/subtitle styling */
.tagline,
.site-description,
.subtitle {
    font-family: var(--font-tagline);   /* Montserrat for taglines */
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 600;
}

/*--------------------------------------------------------------
# Buttons & Call to Action
--------------------------------------------------------------*/
.btn,
.button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-tagline);   /* Montserrat */
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

/* Primary CTA Button - Golden Saffron */
.btn-primary,
.button-primary,
.wp-block-button__link {
    background: var(--color-secondary);  /* Golden Saffron */
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.3);
}

.btn-primary:hover,
.button-primary:hover,
.wp-block-button__link:hover {
    background: #C89615;                 /* Darker Golden Saffron */
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(212, 160, 23, 0.4);
    transform: translateY(-2px);
}

/* Secondary Button - Devotional Red */
.btn-secondary,
.button-secondary {
    background: transparent;
    color: var(--color-primary);         /* Devotional Red */
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover,
.button-secondary:hover {
    background: var(--color-primary);    /* Devotional Red */
    color: #ffffff;
}

/* Links hover effect - Devotional Red */
a:not(.btn):not(.button):hover {
    color: var(--color-primary);         /* Devotional Red */
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.content-wrapper {
    max-width: var(--content-max);
    margin: 0 auto;
}

.site-main {
    min-height: calc(100vh - var(--header-height) - 200px);
    padding: var(--space-8) 0;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--header-border);
    transition: box-shadow var(--transition);
}

.site-header.is-scrolled {
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
    height: 100%;
}

.main-navigation {
    margin-left: auto;
}

.theme-mode-dropdown {
    margin-left: var(--space-2);
}

.site-branding {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.site-logo-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #FFF9F0 0%, #EAD7B0 100%);
    border: 2px solid #D4A017;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(139, 26, 26, 0.15);
}

.site-title {
    font-family: var(--font-header);    /* Cinzel for BHAJANBOOKLET */
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.site-title a {
    color: var(--color-primary);        /* Devotional Red */
    text-decoration: none;
}

.site-title a:hover {
    color: var(--color-primary-dark);
    opacity: 0.9;
}

.custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.custom-logo {
    max-height: 84px;
    height: auto;
    width: auto;
    display: block;
    object-fit: contain;
    transition: transform var(--transition), opacity var(--transition);
}

.custom-logo-link:hover .custom-logo {
    transform: scale(1.05);
    opacity: 0.9;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.main-navigation {
    display: flex;
    align-items: center;
}

.nav-menu {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: var(--color-primary);         /* Devotional Red for nav links */
    font-family: var(--font-tagline);    /* Montserrat */
    font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
    text-transform: uppercase;
    font-size: var(--text-sm);
    letter-spacing: 0.5px;
}

.nav-menu a:hover {
    color: var(--color-primary-dark);
    background: var(--color-primary-lighter); /* Champagne Gold background */
}

.nav-menu .current-menu-item a {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

/* Mobile Navigation Toggle */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    line-height: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    padding: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-lg);
    color: var(--color-primary);
    box-shadow: none;
    transition: all var(--transition-fast);
}

.menu-toggle:hover {
    background: var(--color-primary-lighter);
    border-color: var(--color-primary);
}

.menu-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    pointer-events: none;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .custom-logo {
        max-height: 64px;
    }

    .main-navigation {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-4);
        box-shadow: var(--shadow-lg);
    }

    [data-theme="dark"] .main-navigation {
        background: rgba(15, 23, 42, 0.98);
    }

    .main-navigation.is-active {
        display: block;
        animation: slideDown 0.2s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-menu {
        flex-direction: column;
        gap: var(--space-1);
    }

    .nav-menu li {
        border-bottom: none;
    }

    .nav-menu a {
        display: block;
        padding: var(--space-3) var(--space-4);
    }
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.page-header {
    margin-bottom: var(--space-8);
    text-align: center;
}

.page-title {
    margin-bottom: var(--space-2);
}

.page-description {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

/* Entry Content */
.entry-content {
    line-height: 1.8;
}

.entry-content > * + * {
    margin-top: var(--space-4);
}

.entry-content p {
    margin-bottom: var(--space-4);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
    background: #1A2B3C;                /* Midnight Navy background */
    color: #FFF9F0;                     /* Spiritual Cream text */
    border-top: 2px solid var(--color-secondary); /* Golden Saffron border */
    padding: var(--space-10) 0 var(--space-6);
    margin-top: var(--space-12);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.footer-brand .site-logo-icon {
    width: 32px;
    height: 32px;
    font-size: var(--text-sm);
    color: var(--color-secondary);      /* Golden Saffron */
}

.footer-brand-name {
    font-family: var(--font-header);    /* Cinzel */
    font-weight: 700;
    color: #FFF9F0;                     /* Spiritual Cream */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.site-info {
    color: #FFF9F0;                     /* Spiritual Cream */
    font-size: var(--text-sm);
}

.footer-links {
    display: flex;
    gap: var(--space-6);
}

.footer-links a {
    color: #FFF9F0;                     /* Spiritual Cream */
    font-size: var(--text-sm);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-secondary);      /* Golden Saffron on hover */
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }

.hidden { display: none !important; }

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Keyboard navigation mode */
.keyboard-nav :focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Custom Scrollbar (Webkit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--radius);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-dark);
    border-radius: var(--radius);
    transition: background var(--transition);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-light);
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-dark) var(--color-bg-secondary);
}
/*--------------------------------------------------------------
# Orientation Utilities
--------------------------------------------------------------*/
/* Utility classes added by JavaScript */
body.orientation-landscape {
    /* Landscape specific adjustments can go here */
}

body.orientation-portrait {
    /* Portrait specific adjustments can go here */
}

/* Use CSS custom property for viewport height (mobile fix) */
.full-height {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

/* Prevent layout shift during orientation change */
@media (prefers-reduced-motion: no-preference) {
    body {
        transition: padding 0.3s ease-out;
    }
}
/*--------------------------------------------------------------
# Font Size Adjustment
--------------------------------------------------------------*/

/* Font size levels - Applied via JavaScript */
[data-font-size="smallest"] {
    --font-size-scale: 0.85;
}

[data-font-size="small"] {
    --font-size-scale: 0.925;
}

[data-font-size="normal"] {
    --font-size-scale: 1;
}

[data-font-size="large"] {
    --font-size-scale: 1.075;
}

[data-font-size="largest"] {
    --font-size-scale: 1.15;
}

[data-font-size="extra-large"] {
    --font-size-scale: 1.3;
}

/* Apply font size to content areas */
.entry-content,
.lyrics-content,
.lyrics-text,
.song-card-content,
.category-description,
.page-content,
article p,
article li,
.site-main p {
    font-size: var(--content-font-size);
    line-height: var(--content-line-height);
}

/* Adjust headings proportionally */
[data-font-size] h1 {
    font-size: calc(var(--text-5xl) * var(--font-size-scale));
}

[data-font-size] h2 {
    font-size: calc(var(--text-4xl) * var(--font-size-scale));
}

[data-font-size] h3 {
    font-size: calc(var(--text-3xl) * var(--font-size-scale));
}

[data-font-size] h4 {
    font-size: calc(var(--text-2xl) * var(--font-size-scale));
}

[data-font-size] h5 {
    font-size: calc(var(--text-xl) * var(--font-size-scale));
}

[data-font-size] h6 {
    font-size: calc(var(--text-lg) * var(--font-size-scale));
}

/* Lyrics language-specific adjustments */
.lyrics-telugu,
.lyrics-tamil,
.lyrics-kannada,
.lyrics-hindi {
    font-size: calc(1.35rem * var(--font-size-scale));
    line-height: calc(2.4 * (1 + (var(--font-size-scale) - 1) * 0.5));
}

.lyrics-english {
    font-size: calc(1.25rem * var(--font-size-scale));
    line-height: calc(2 * (1 + (var(--font-size-scale) - 1) * 0.5));
}

/* Smooth transition for font size changes */
@media (prefers-reduced-motion: no-preference) {
    .entry-content,
    .lyrics-content,
    .lyrics-text,
    article p,
    h1, h2, h3, h4, h5, h6 {
        transition: font-size 0.2s ease;
    }
}