/* ===================================
   TYPOGRAPHY SYSTEM
   Based on professional design Analysis
   =================================== */

/* ===================================
   CUSTOM FONT DECLARATIONS
   =================================== */

/* Custom Hero Font - QTKorrin */
@font-face {
    font-family: 'CustomHeroFont';
    src: url('../fonts/QTKorrin.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* QTKorrin Italic */
@font-face {
    font-family: 'CustomHeroFont';
    src: url('../fonts/QTKorrin-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ===================================
   HEADING STYLES
   =================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.2;
    font-weight: 400;
}

/* Main Navigation & Logo */
.logo-text,
.menu-toggle,
.lang-link {
    font-family: var(--font-mono);
    font-size: 14.88px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-black);
}

/* Hero Section Typography */
.hero-title {
    font-family: var(--font-mono);
    font-size: 14.88px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 24px;
    letter-spacing: 1px;
}

/* Album Titles (H2) */
.album-title {
    font-family: var(--font-serif);
    font-size: 52px;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: normal;
}

/* Section Headings (H3) */
.about-text {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: normal;
}

/* Subtitles (H4) */
.section-title,
.album-subtitle,
.newsletter-title,
.social-title {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 37.6px;
    letter-spacing: normal;
}

/* Body Text */
body,
p,
.footer-info {
    font-family: var(--font-sans);
    font-size: 17.92px;
    font-weight: 400;
    line-height: 1.6;
}

/* Small Text Elements */
.about-label,
.album-meta,
.view-all-link,
.learn-more-link {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Badge Text */
.album-badge {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Input Fields */
.email-input {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 200;
}

.submit-btn {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 400;
}

/* Footer Logo - Matching professional design Style */
.footer-logo h1 {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 300;
    text-transform: none;
    letter-spacing: normal;
}

/* Footer Small Text */
.footer-credits,
.privacy-group {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
}

/* Questions Section */
.questions-section {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

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

/* Mobile Adjustments (< 768px) */
@media (max-width: 767px) {
    /* Hero Text - Mobile */
    .hero-title {
        font-size: 16px;
        line-height: 28px;
    }
    
    /* Album Titles - Mobile */
    .album-title {
        font-size: 33.75px;
        line-height: 40.5px;
    }
    
    /* Section Headings - Mobile */
    .about-text {
        font-size: 29.0625px;
        line-height: 34.875px;
    }
    
    /* Subtitles - Mobile */
    .section-title,
    .album-subtitle,
    .newsletter-title,
    .social-title {
        font-size: 21.5625px;
        line-height: 25.875px;
    }
    
    /* Body Text - Mobile (stays same) */
    body,
    p {
        font-size: 17.92px;
        line-height: 1.6;
    }
    
    /* Small Text - Mobile (stays same) */
    .about-label,
    .album-meta,
    .view-all-link {
        font-size: 15px;
    }
    
    /* Footer Logo - Mobile */
    .footer-logo h1 {
        font-size: 20px;
    }
}

/* Tablet Adjustments (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .album-title {
        font-size: 42px;
        line-height: 50px;
    }
    
    .about-text {
        font-size: 32px;
        line-height: 42px;
    }
    
    .section-title,
    .album-subtitle {
        font-size: 22px;
        line-height: 32px;
    }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    .album-title {
        font-size: 58px;
        line-height: 68px;
    }
    
    .about-text {
        font-size: 42px;
        line-height: 54px;
    }
}

/* ===================================
   TEXT EFFECTS AND ANIMATIONS
   =================================== */

/* Highlight Text Effect */
.highlight {
    position: relative;
    color: var(--color-purple);
    transition: color var(--transition-medium);
}

.highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-purple);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-medium);
}

.highlight:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Link Hover Effects */
a:hover {
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

/* Text Selection Styling */
::selection {
    background-color: var(--color-purple);
    color: var(--color-white);
}

::-moz-selection {
    background-color: var(--color-purple);
    color: var(--color-white);
}

/* ===================================
   ACCESSIBILITY IMPROVEMENTS
   =================================== */

/* Focus States */
a:focus,
button:focus,
input:focus {
    outline: 2px solid var(--color-purple);
    outline-offset: 2px;
}

/* Skip Links */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--color-black);
    color: var(--color-white);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 14px;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --color-cream: #ffffff;
        --color-near-black: #000000;
        --color-purple: #4a0e4e;
    }
    
    .album-card {
        border: 2px solid var(--color-black);
    }
    
    .social-link {
        border: 1px solid var(--color-black);
    }
}