/* ======================================================================
   Modern Responsive CSS
   Author: AI Generated
   =====================================================================*/

/* ---------- 1. ROOT THEME VARIABLES ---------------------------------*/
:root{
    /* Split-Complementary Palette */
    --color-primary: #FF6B6B;        /* Vibrant Coral */
    --color-primary-dark: #E55656;
    --color-secondary: #4ECDC4;      /* Fresh Turquoise */
    --color-secondary-dark: #3FB7AE;
    --color-accent: #6B6BFF;         /* Electric Indigo (split-comp) */
    --color-accent-dark: #5050E0;

    /* Greys & Surfaces */
    --color-bg: #F7F9FC;
    --color-surface: rgba(255,255,255,0.7); /* glassmorphism */
    --color-text: #1A1A1A;
    --color-muted: #6D6D6D;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);
    --gradient-secondary: linear-gradient(135deg,var(--color-secondary) 0%,var(--color-primary) 100%);

    /* Typography */
    --font-display: 'Playfair Display',serif;
    --font-body: 'Source Sans Pro',sans-serif;
    --fs-h1: clamp(2.2rem,5vw,4rem);
    --fs-h2: clamp(1.8rem,4vw,3rem);
    --fs-h3: clamp(1.5rem,3vw,2.2rem);
    --fs-body: 1rem;

    /* Spacing */
    --space-xs: .5rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.5rem;
    --space-xl: 4rem;
    --radius: .75rem;
    --shadow: 0 8px 24px rgba(0,0,0,.12);
    --blur: 16px;
    --transition: all .35s cubic-bezier(.25,.8,.5,1.25); /* springy */
}

/* ---------- 2. RESET / BASE ----------------------------------------*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:var(--font-body);
    font-size:var(--fs-body);
    color:var(--color-text);
    background:var(--color-bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-display);
    font-weight:700;
    line-height:1.2;
    text-wrap:balance;
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
p{margin-bottom:var(--space-s);}
img{display:block;max-width:100%;height:auto;}

/* ---------- 3. LAYOUT UTILITIES ------------------------------------*/
.container{
    width:100%;
    max-width:1200px;
    margin-inline:auto;
    padding-inline:var(--space-s);
}
.flex{display:flex;gap:var(--space-m);}
.wrap{flex-wrap:wrap;}
.between{justify-content:space-between;align-items:center;}
.center{justify-content:center;align-items:center;}
.grid{display:grid;gap:var(--space-m);}
.text-center{text-align:center;}
/* columns utility (>=two-thirds) */
.col-two-thirds{flex:0 1 66.666%;max-width:66.666%;}

/* ---------- 4. GLOBAL COMPONENTS -----------------------------------*/
/* Buttons */
.btn,
button,
input[type='submit']{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.75rem 1.75rem;
    border-radius:var(--radius);
    border:none;
    font-family:var(--font-body);
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none;
    overflow:hidden;
    color:#fff;
}
.btn.primary{background:var(--gradient-primary);}
.btn.secondary{background:var(--gradient-secondary);}
.btn:hover,
button:hover,
input[type='submit']:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:var(--shadow);
}
.btn:active{
    transform:scale(.97);
}

/* Links */
a{color:var(--color-accent);text-decoration:none;transition:color .25s ease;}
a:hover{color:var(--color-accent-dark);}
.read-more{
    font-weight:600;
    position:relative;
}
.read-more::after{
    content:'→';
    margin-left:.4rem;
    transition:transform .25s ease;
}
.read-more:hover::after{transform:translateX(4px);}

/* Cards (strict rules) */
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--color-surface);
    backdrop-filter:blur(var(--blur));
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:var(--space-m);
    transition:var(--transition);
}
.card:hover{transform:translateY(-4px);}
.card-image,
.image-container{
    width:100%;
    height:220px;              /* fixed */
    overflow:hidden;
    border-radius:var(--radius);
    margin-bottom:var(--space-s);
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;             /* prevent shifting */
}

/* ---------- 5. HEADER / NAV ----------------------------------------*/
.site-header{
    position:fixed;
    inset:0 0 auto 0;
    width:100%;
    background:var(--color-surface);
    backdrop-filter:blur(var(--blur));
    z-index:1000;
    border-bottom:1px solid rgba(255,255,255,.3);
    transition:var(--transition);
}
.main-nav ul{display:flex;gap:var(--space-m);list-style:none;}
.main-nav a{
    padding:.5rem;
    font-weight:600;
    color:var(--color-text);
}
.main-nav a:hover{color:var(--color-primary);}
.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;
}
.burger span{
    width:22px;height:2px;
    background:var(--color-text);
}
/* Responsive nav */
@media(max-width:768px){
    .burger{display:flex;}
    .main-nav{position:fixed;top:64px;right:-100%;width:240px;height:calc(100% - 64px);
        flex-direction:column;background:var(--color-surface);backdrop-filter:blur(var(--blur));
        padding:var(--space-m);transition:var(--transition);}
    .main-nav.open{right:0;}
    .main-nav ul{flex-direction:column;}
}

/* ---------- 6. SECTIONS --------------------------------------------*/
.section{padding:var(--space-xl) 0;}
.section.alt-bg{background:var(--gradient-secondary);color:#fff;}
.section-title{text-align:center;margin-bottom:var(--space-l);}
.section-title::after{
    content:'';
    display:block;
    width:60px;height:4px;margin:var(--space-s) auto 0;
    background:var(--color-accent);
    border-radius:2px;
}

/* Hero */
.hero{
    position:relative;
    display:flex;
    align-items:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    color:#fff;                 /* required */
    min-height:80vh;
    text-align:center;
}
.hero::before{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.4));
}
.hero-inner{
    position:relative;
    z-index:1;
    width:100%;
    max-width:800px;
    margin:auto;
    padding:var(--space-l) var(--space-s);
}
.hero-title{margin-bottom:var(--space-s);animation:fadeInDown .9s cubic-bezier(.23,1,.32,1);}
.hero-text{margin-bottom:var(--space-m);animation:fadeInUp 1s cubic-bezier(.23,1,.32,1);}

/* Parallax */
.parallax{
    background-attachment:fixed;
}

/* Accordion (Pricing) */
.accordion{max-width:720px;margin:0 auto;}
.accordion-toggle{
    width:100%;text-align:left;
    background:var(--color-primary);color:#fff;
    margin-bottom:2px;
    padding:var(--space-s);
    cursor:pointer;font-weight:600;border:none;
    transition:var(--transition);
}
.accordion-toggle:hover{background:var(--color-primary-dark);}
.accordion-panel{
    max-height:0;overflow:hidden;
    background:#fff;transition:max-height .45s ease;
    padding:0 var(--space-s);
}
.accordion-toggle.active + .accordion-panel{padding:var(--space-s);max-height:240px;}

/* Partners & Workshops – card grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-l);}

/* Contact Form */
.contact-form{
    max-width:600px;margin:0 auto;display:grid;gap:var(--space-s);
}
.contact-form input,
.contact-form textarea{
    width:100%;padding:var(--space-s);
    border:2px solid transparent;
    border-radius:var(--radius);
    background:rgba(255,255,255,.9);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
    transition:border-color .25s ease,box-shadow .25s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--color-secondary);
    box-shadow:0 0 0 3px rgba(78,205,196,.25);
}

/* Community Glass Section */
.community-glass{
    background:var(--color-surface);
    backdrop-filter:blur(var(--blur));
    border-radius:var(--radius);
}

/* Careers */
#careers p{max-width:800px;margin-inline:auto;}

/* Vision & Mission Smooth Fade */
#mission,#vision{animation:fadeInUp .9s cubic-bezier(.23,1,.32,1);}

/* ---------- 7. FOOTER ----------------------------------------------*/
.site-footer{
    background:var(--color-text);
    color:#fff;
    padding:var(--space-l) 0;
}
.site-footer a{color:#fff;font-weight:600;}
.site-footer nav a{margin:0 var(--space-xs);}
.social a{margin:0 var(--space-xs);position:relative;}
.social a::before{
    content:'';
    position:absolute;inset:100% 0 0 0;
    height:2px;background:var(--color-secondary);
    transition:transform .35s ease;
    transform:scaleX(0);transform-origin:left;
}
.social a:hover::before{transform:scaleX(1);}

/* ---------- 8. SUCCESS PAGE ----------------------------------------*/
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:var(--gradient-primary);
    color:#fff;
}

/* ---------- 9. TERMS & PRIVACY PADDING -----------------------------*/
.legal-page{padding-top:100px;}

/* ---------- 10. UTILITY CLASSES ------------------------------------*/
.bg-cover{background-size:cover;background-repeat:no-repeat;background-position:center;}
.bg-dark-overlay{
     position:relative;
}
.bg-dark-overlay::before{
    content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));
}
.hidden{display:none;}
/* Responsive Hide */
@media(max-width:576px){.mobile-hidden{display:none;}}

/* ---------- 11. KEYFRAMES (Springy) --------------------------------*/
@keyframes fadeInDown{
    0%{opacity:0;transform:translateY(-20px);}
    80%{transform:translateY(4px);}
    100%{opacity:1;transform:translateY(0);}
}
@keyframes fadeInUp{
    0%{opacity:0;transform:translateY(20px);}
    80%{transform:translateY(-4px);}
    100%{opacity:1;transform:translateY(0);}
}

/* ---------- 12. MEDIA QUERIES (Typography & Spacing) ---------------*/
@media(max-width:992px){
    .section{padding:var(--space-l) 0;}
}