/*
Theme Name: Tar Music Theme
Author: Tar Music Team
Description: Custom Editorial Theme for Tar Music School (Bodoni/Inter)
Version: 1.2 (Final Optimized)
*/

/* =========================================
   1. RESET & VARIABLES
   ========================================= */
:root {
    --white: #ffffff;
    --black: #080808;
    --tar-yellow: #fcbb44;
    --string: rgba(0, 0, 0, 0.08);
    --fret: rgba(0, 0, 0, 0.05);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents horizontal scroll */
}

body {
    background: var(--white);
    color: var(--black);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }

/* =========================================
   2. TYPOGRAPHY
   ========================================= */
h1, h2, h3, h4, h5 { font-weight: normal; margin: 0; }

.editorial-title {
    font-family: 'Bodoni Moda', serif;
    font-size: clamp(3rem, 6vw, 7rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 30px;
    word-break: break-word; /* Prevents text going off-screen */
}
.editorial-title em { font-style: italic; color: var(--tar-yellow); }

.body-copy {
    font-weight: 200;
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 40px;
    color: #333;
    max-width: 650px;
}

.chapter-num {
    font-size: 0.7rem;
    letter-spacing: 5px;
    color: var(--tar-yellow);
    border-left: 1px solid var(--tar-yellow);
    padding-left: 15px;
    height: fit-content;
    margin-top: 10px;
    text-transform: uppercase;
    white-space: nowrap; /* Keeps chapter num on one line */
}

/* =========================================
   3. LAYOUT GRID (The Backbone)
   ========================================= */
.section-grid, main section {
    min-height: auto;
    padding: 100px 10%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: relative;
    align-items: start;
    background: transparent;
}

/* Column Utilities */
.col-chapter, .chapter-num { grid-column: 1 / 2; }
.col-content, .content-block { grid-column: 2 / 6; }
.col-full { grid-column: 1 / 7; }

/* =========================================
   4. GUITAR SKELETON (BACKGROUND)
   ========================================= */
.guitar-skeleton {
    position: fixed;
    top: 0; left: 50%; 
    transform: translateX(-50%);
    width: 320px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 0;
    pointer-events: none;
}
.v-string {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--string) 5%, var(--string) 95%, transparent);
}

/* =========================================
   5. HEADER & NAV
   ========================================= */
header {
    position: fixed;
    top: 0; width: 100%;
    padding: 25px 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
}
.logo-img { height: 45px; width: auto; }

.nav-container, .desktop-nav { display: flex; align-items: center; }

.desktop-nav a, nav a {
    text-decoration: none;
    color: var(--black);
    font-size: 0.65rem;
    letter-spacing: 3px;
    margin-left: 35px;
    text-transform: uppercase;
    font-weight: 300;
    transition: color 0.3s;
    position: relative;
}
.desktop-nav a:hover, .desktop-nav a.current-menu-item,
nav a:hover, nav a.active { color: var(--tar-yellow); }

.lang-switch {
    margin-left: 50px;
    border-left: 1px solid #ccc;
    padding-left: 20px;
}
.lang-switch a { margin-left: 10px; font-weight: 400; text-decoration: none; color: #000; font-size: 0.7rem; }
.lang-switch a.active { color: var(--tar-yellow); }

/* =========================================
   6. HAMBURGER MENU (Optimized)
   ========================================= */
.burger-menu {
    display: none; 
    cursor: pointer; 
    z-index: 2000; /* CRITICAL: Higher than overlay */
    width: 30px;
    height: 25px;
    position: relative;
}

.burger-line {
    width: 30px;
    height: 2px;
    background: var(--black);
    position: absolute;
    left: 0;
    transition: 0.4s ease-in-out;
}
.line1 { top: 0; }
.line2 { top: 10px; }
.line3 { top: 20px; }

/* Active X Animation */
.burger-menu.active .line1 { top: 10px; transform: rotate(45deg); }
.burger-menu.active .line2 { opacity: 0; transform: translateX(-10px); }
.burger-menu.active .line3 { top: 10px; transform: rotate(-45deg); }

/* Mobile Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background: white;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; pointer-events: none;
    transition: 0.5s ease;
}
.mobile-nav-overlay.active { opacity: 1; pointer-events: all; }
.mobile-nav-overlay a {
    font-family: 'Bodoni Moda';
    font-size: 2rem;
    text-decoration: none;
    color: var(--black);
    margin: 15px 0;
}

/* =========================================
   7. PAGE COMPONENTS
   ========================================= */
/* Hero */
.hero-indicator {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.5;
}
.indicator-line { width: 1px; height: 50px; background: var(--black); margin-bottom: 15px; }

/* Image Strip (Edge to Edge) */
.edge-to-edge {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.edge-to-edge .chapter-num { margin-left: 10%; } /* Restore padding for text */
.edge-to-edge .content-block { margin-left: 0; }

.img-wide-strip {
    grid-column: 1 / 7;
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    transition: 0.5s ease;
    margin-top: 80px;
    display: block;
}
.img-wide-strip:hover { filter: grayscale(0%); }

/* Big Essence */
.big-essence {
    grid-column: 1 / 7;
    text-align: center;
    padding: 180px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.big-word {
    font-family: 'Bodoni Moda';
    font-size: clamp(3rem, 10vw, 8rem);
    line-height: 0.9;
    font-weight: 300;
    letter-spacing: -2px;
    text-transform: uppercase;
    display: block;
}
.big-word.highlight { color: var(--tar-yellow); font-style: italic; }

/* Bio Split */
.bio-split {
    grid-column: 1 / 7;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 40px;
}
.bio-img-container {
    height: 700px;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    transition: 1s ease;
    width: 100%;
}
.bio-img-container:hover { filter: grayscale(0%); }

/* Programs */
.program-item {
    display: grid; grid-template-columns: 1.5fr 2fr; gap: 60px;
    padding: 50px 0; border-bottom: 1px solid var(--string);
    transition: 0.3s ease;
}
.program-item:hover .prog-title { color: var(--tar-yellow); }
.prog-title { font-family: 'Bodoni Moda'; font-size: 2.5rem; line-height: 1; transition: 0.3s; }
.prog-features { display: flex; flex-wrap: wrap; gap: 25px; }
.prog-features li { font-size: 0.8rem; color: #666; text-transform: uppercase; letter-spacing: 1px; }
.prog-features li::before { content: '•'; color: var(--tar-yellow); margin-right: 10px; }

/* Levels */
.levels-flow-container { margin-top: 80px; position: relative; padding: 40px 0; }
.levels-flow-container::before {
    content: ''; position: absolute; top: 90px; left: 5%; right: 5%;
    height: 1px; background: var(--string); z-index: 1;
}
.levels-flex { display: flex; justify-content: space-between; }
.level-step { flex: 1; text-align: center; padding: 0 30px; position: relative; z-index: 2; }
.lvl-num { font-family: 'Bodoni Moda'; font-size: 4rem; font-style: italic; color: var(--tar-yellow); background: var(--white); padding: 0 15px; }

/* Quote */
.quote-section {
    grid-column: 2 / 6;
    text-align: center;
    padding: 80px 0;
    border-top: 1px solid var(--fret);
    border-bottom: 1px solid var(--fret);
    margin: 60px 0;
}
.quote-text {
    font-family: 'Bodoni Moda', serif;
    font-size: 2.2rem;
    font-style: italic;
    line-height: 1.3;
}

/* =========================================
   8. FORMS & INPUTS
   ========================================= */
.contact-section, .form-section {
    background: var(--white);
    z-index: 20;
    padding-top: 80px;
    padding-bottom: 120px;
    margin-top: 40px;
}
.form-area, .form-wrapper { grid-column: 2 / 6; }
.form-grid, .form-grid-layout {
    display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 40px;
}
.full-width { grid-column: 1 / -1; }

input, select, textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--black);
    outline: none;
    border-radius: 0;
    transition: border-color 0.4s ease;
}
input:focus, select:focus, textarea:focus { border-bottom-color: var(--tar-yellow); }

/* Add .submit-btn here to fix the Front Page button */
.btn-submit, .btn-elegant, .submit-btn {
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    padding: 20px 60px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
}

.btn-submit:hover, .btn-elegant:hover, .submit-btn:hover {
    background: transparent;
    color: var(--black);
}

/* =========================================
   11. FOOTER (Optimized)
   ========================================= */
footer {
    padding: 80px 10% 60px;
    background: white;
    border-top: 1px solid var(--fret);
    position: relative;
    z-index: 30;
    
    /* Desktop Grid: 3 Columns */
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; 
    gap: 60px;
}

.footer-logo { height: 40px; margin-bottom: 25px; }
.footer-copy { font-size: 0.7rem; color: #999; margin-bottom: 15px; }

/* Language Switcher */
.footer-lang a { text-decoration: none; color: #999; font-size: 0.8rem; font-weight: 400; }
.footer-lang a.active { color: var(--tar-yellow); font-weight: bold; }
.footer-lang .sep { color: #ddd; margin: 0 5px; }

/* Buttons Area */
.footer-buttons {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* Icon Buttons (WhatsApp / Maps) */
.footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--tar-yellow);
    color: var(--black) !important;
    padding: 10px 20px;
    border-radius: 0; /* Square edges */
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    width: fit-content;
}
.footer-btn:hover { background: var(--black); color: var(--white) !important; }
.footer-icon { width: 16px; height: 16px; fill: currentColor; }

/* Links & Text */
.footer-heading {
    color: var(--tar-yellow);
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin: 10px 0; }
.footer-links a, .footer-text a { font-size: 0.9rem; color: #555; text-decoration: none; transition: 0.3s; }
.footer-links a:hover, .footer-text a:hover { color: var(--tar-yellow); }
.footer-text { margin: 8px 0; font-size: 0.9rem; color: #555; }


/* =========================================
   MOBILE FOOTER (2-Column Layout)
   ========================================= */
@media (max-width: 1024px) {
    footer {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two Columns */
        gap: 40px;
        padding: 60px 25px;
    }

    /* Column 1 (Logo & Buttons) takes full width */
    .footer-col-1 {
        grid-column: 1 / -1; /* Spans full width */
        margin-bottom: 20px;
    }

    /* Column 2 (Nav) & Column 3 (Contact) sit side-by-side */
    .footer-col-2 { grid-column: 1 / 2; }
    .footer-col-3 { grid-column: 2 / 3; }

    /* Adjust button width for mobile touch */
    .footer-btn { width: 100%; justify-content: center; }
}

/* =========================================
   10. MOBILE RESPONSIVE (FINAL FIXES)
   ========================================= */
@media (max-width: 1024px) {
    
    /* 1. HERO SPACING FIX (Home Page) */
    section:first-of-type {
        height: auto !important;
        min-height: 60vh;
        padding-bottom: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Ensure Hero also clears the header */
        padding-top: 120px !important; 
    }

    /* 2. GLOBAL SPACING & HEADER CLEARANCE */
    /* Changed padding-top from 60px to 120px to clear the fixed header */
    .section-grid, main section, footer { 
        display: block; 
        padding-top: 120px;    /* <--- THE FIX */
        padding-bottom: 60px;
        padding-left: 25px;
        padding-right: 25px;
    }
    
    /* Reset columns */
    .col-content, .content-block, .form-wrapper, .form-area, .info-content, .quote-section { 
        grid-column: 1 / 7; 
        width: 100%;
    }
    
    /* 3. EDGE TO EDGE (School Section) */
    .edge-to-edge {
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* Keep the top padding to avoid cutoff here too */
        padding-top: 120px; 
    }
    
    .edge-to-edge .content-block {
        padding: 0 25px;
    }
    
    .edge-to-edge .chapter-num { 
        margin-left: 25px;
        margin-bottom: 20px;
    }

    /* 4. FORM PADDING */
    .contact-section, .form-section {
        padding-left: 25px !important;
        padding-right: 25px !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Nav & Menu */
    .desktop-nav, .lang-switch, nav { display: none; }
    .burger-menu { display: block; }
    
    /* Typography */
    .editorial-title { font-size: 2.8rem; line-height: 1.1; word-wrap: break-word; }
    .big-word { font-size: 14vw; }
    .quote-text { font-size: 1.4rem; }
    
    /* Components */
    .bio-split { display: block; margin-top: 20px; }
    .bio-img-container { height: 350px; margin-bottom: 30px; width: 100%; }
    .img-wide-strip { height: 250px; margin-top: 50px; width: 100%; }
    
    /* Programs */
    .program-item { grid-template-columns: 1fr; gap: 15px; padding: 30px 0; }
    
    /* Levels */
    .levels-flex { flex-direction: column; gap: 50px; }
    .levels-flow-container::before { display: none; }
    
    /* Footer */
    footer > div { margin-bottom: 40px; }
    .footer-contact-col { text-align: left !important; margin-top: 30px; }
    .footer-contact-col div { align-items: flex-start !important; }
}
@media (max-width: 1024px) {
    
    /* 1. TIGHTER GUITAR STRINGS */
    .guitar-skeleton { 
        width: 160px; /* Reduced from 220px to bring lines closer */
    }

    /* 2. HERO SPACING FIX */
    section:first-of-type {
        height: auto !important;
        min-height: 60vh;
        padding-bottom: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 120px !important; 
    }

    /* 3. GLOBAL SPACING & HEADER CLEARANCE */
    .section-grid, main section, footer { 
        display: block; 
        padding-top: 120px;
        padding-bottom: 60px;
        padding-left: 25px;
        padding-right: 25px;
    }
    
    /* ... keep the rest of your mobile styles ... */
}
/* --- GRAPHIC STRIP (Reusing img-wide-strip) --- */
.img-wide-strip {
    grid-column: 1 / 7;
    width: 100%;
    
    /* Desktop Height */
    height: 400px; 
    
    background-size: cover;
    background-position: center;
    
    /* PARALLAX ENABLED (Fixed Background) */
    background-attachment: fixed; 
    
    /* Dark texture look */
    filter: grayscale(100%) contrast(1.5) brightness(0.6); 
    
    transition: 0.5s ease;
    margin-top: 80px;
    display: block;
}

.img-wide-strip:hover {
    filter: grayscale(100%) contrast(1.2) brightness(0.8);
}

/* Mobile Adjustment */
@media (max-width: 1024px) {
    .img-wide-strip {
        /* INCREASED HEIGHT FOR MOBILE */
        height: 450px; 
        margin-top: 50px;
        
        /* FORCE PARALLAX ON MOBILE */
        background-attachment: fixed; 
        background-position: center center;
        background-size: cover;
    }
}
/* --- PROGRAM TITLE UTILS --- */
.prog-label {
    font-size: 0.7rem; 
    letter-spacing: 3px; 
    color: #999; 
    text-transform: uppercase;
    display: block;
}

.prog-heading {
    font-size: 2.2rem; 
    margin-top: 10px; 
    margin-bottom: 0;
}

/* --- ELEGANT SQUARE PILLS --- */
.pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pills-list li {
    font-size: 0.65rem; /* Reduced font size */
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 2px; /* Elegant spacing */
    border: 1px solid var(--tar-yellow); /* Sharp Yellow Border */
    border-radius: 0;   /* Square / Not rounded */
    padding: 10px 16px;
    background: transparent;
    transition: all 0.3s ease;
    cursor: default;
}

.pills-list li:hover {
    background: var(--tar-yellow); /* Yellow fill on hover */
    color: var(--black);
}

/* --- STAGES GRID (Aligned Paragraphs) --- */
.stages-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.stage-card {
    border-top: 1px solid var(--black);
    padding-top: 20px;
    position: relative;
}

.stage-num {
    display: block;
    font-size: 0.8rem;
    color: var(--tar-yellow);
    font-weight: 600;
    margin-bottom: 15px;
}

.stage-title {
    font-family: 'Bodoni Moda', serif;
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--black);
}

/* Mobile Adjustments for Programs */
@media (max-width: 1024px) {
    .stages-grid {
        grid-template-columns: 1fr; 
        gap: 50px;
    }
    
    .prog-heading {
        font-size: 1.8rem; 
    }
}