/* ==========================================================================
   BLAZERS SCHOOL — CORE STYLESHEET
   Structure: 1.Variables 2.Reset 3.Typography 4.Layout 5.Components 6.Utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES
   -------------------------------------------------------------------------- */
:root{
    /* Brand colors */
    --wine:#8d0523;
    --wine-dark:#6b0319;
    --wine-light:#a80a2c;
    --yellow:#ffbb00;
    --yellow-dark:#e6a800;

    --white:#ffffff;
    --light:#f7f7f7;
    --light-alt:#fbf6ee;

    --dark:#222222;
    --gray:#666666;
    --gray-light:#a3a3a3;
    --border:#e8e4dc;

    /* Elevation & shape */
    --shadow:0 15px 35px rgba(0,0,0,.08);
    --shadow-sm:0 6px 16px rgba(0,0,0,.06);
    --shadow-lg:0 25px 60px rgba(141,5,35,.16);
    --radius:18px;
    --radius-sm:10px;
    --radius-full:999px;

    /* Typography */
    --font-heading:'Poppins', sans-serif;
    --font-body:'Inter', sans-serif;

    --fs-xs:.8125rem;
    --fs-sm:.9375rem;
    --fs-base:1rem;
    --fs-md:1.125rem;
    --fs-lg:1.375rem;
    --fs-xl:1.75rem;
    --fs-2xl:2.25rem;
    --fs-3xl:3rem;
    --fs-4xl:3.75rem;

    /* Spacing scale */
    --space-2xs:.4rem;
    --space-xs:.75rem;
    --space-sm:1.25rem;
    --space-md:2rem;
    --space-lg:3.5rem;
    --space-xl:5.5rem;
    --space-2xl:8rem;

    /* Layout */
    --container-max:1280px;
    --header-h:88px;

    /* Motion */
    --ease:cubic-bezier(.4,0,.2,1);
    --dur-fast:.2s;
    --dur:.4s;
    --dur-slow:.7s;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

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

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

body{
    font-family:var(--font-body);
    color:var(--dark);
    background:var(--white);
    line-height:1.65;
    min-height:100vh;
    overflow-x:hidden;
    transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}

img, picture, svg{ display:block; max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }

ul, ol{ list-style:none; }

button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }

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

table{ border-collapse:collapse; }

/* Visible focus states — accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
    outline:3px solid var(--yellow);
    outline-offset:3px;
    border-radius:4px;
}

/* Skip link */
.skip-link{
    position:absolute;
    top:-100px;
    left:var(--space-sm);
    background:var(--wine);
    color:var(--white);
    padding:.85rem 1.5rem;
    border-radius:var(--radius-sm);
    z-index:9999;
    font-weight:600;
    transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:var(--space-sm); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6{
    font-family:var(--font-heading);
    color:var(--dark);
    line-height:1.2;
    font-weight:600;
}

h1{ font-size:var(--fs-4xl); font-weight:700; letter-spacing:-.02em; }
h2{ font-size:var(--fs-3xl); font-weight:700; letter-spacing:-.01em; }
h3{ font-size:var(--fs-2xl); }
h4{ font-size:var(--fs-xl); }
h5{ font-size:var(--fs-lg); }
h6{ font-size:var(--fs-md); text-transform:uppercase; letter-spacing:.08em; }

p{ color:var(--gray); font-size:var(--fs-base); }

.lede{ font-size:var(--fs-md); color:var(--gray); line-height:1.7; }

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-family:var(--font-heading);
    font-size:var(--fs-xs);
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--wine);
    margin-bottom:var(--space-xs);
}
.eyebrow::before{
    content:"";
    width:22px;
    height:2px;
    background:var(--yellow);
    display:inline-block;
}

.section-heading{
    max-width:640px;
    margin-bottom:var(--space-lg);
}
.section-heading.center{ margin-left:auto; margin-right:auto; text-align:center; }

@media (max-width:768px){
    h1{ font-size:var(--fs-3xl); }
    h2{ font-size:var(--fs-2xl); }
    h3{ font-size:var(--fs-xl); }
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container{
    width:100%;
    max-width:var(--container-max);
    margin-inline:auto;
    padding-inline:var(--space-sm);
}

.section{
    padding-block:var(--space-2xl);
    position:relative;
}
.section--tight{ padding-block:var(--space-xl); }
.section--light{ background:var(--light); }
.section--tint{ background:var(--light-alt); }
.section--wine{ background:var(--wine); color:var(--white); }

.grid{ display:grid; gap:var(--space-md); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-sm{ gap:var(--space-xs); }
.gap-md{ gap:var(--space-md); }

.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-xl);
    align-items:center;
}

/* --------------------------------------------------------------------------
   5. COMPONENTS
   -------------------------------------------------------------------------- */

/* ---- Loading Screen ---- */
.loading-screen{
    position:fixed; inset:0;
    background:var(--wine);
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loading-screen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loading-screen__mark{
    width:64px; height:64px;
    border:3px solid rgba(255,255,255,.25);
    border-top-color:var(--yellow);
    border-radius:50%;
    animation:spin 0.9s linear infinite;
}

/* ---- Arch Motif (signature element) ---- */
.arch{
    border-radius:50% 50% 0 0 / 100% 100% 0 0;
    overflow:hidden;
}
.arch-frame{
    position:relative;
    border-radius:220px 220px 24px 24px;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}
.arch-divider{
    width:100%;
    height:40px;
    display:block;
    margin-block:var(--space-md);
}

/* ---- Header / Navigation ---- */
.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    border-bottom:1px solid rgba(141,5,35,.08);
    transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.scrolled{
    box-shadow:0 8px 30px rgba(0,0,0,.06);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:var(--header-h);
    gap:var(--space-md);
}

.brand{
    display:flex;
    align-items:center;
    gap:.75rem;
    font-family:var(--font-heading);
    font-weight:700;
    font-size:var(--fs-lg);
    color:var(--wine);
    flex-shrink:0;
}
.brand__mark{
    width:46px; height:46px;
    border-radius:50% 50% 12px 12px;
    background:linear-gradient(150deg, var(--wine), var(--wine-light));
    display:flex; align-items:center; justify-content:center;
    color:var(--yellow);
    font-weight:700;
    font-size:1.1rem;
    flex-shrink:0;
}
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text small{
    font-family:var(--font-body);
    font-weight:500;
    font-size:.65rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--gray);
}

.main-nav{ display:flex; align-items:center; gap:var(--space-md); }
.nav-list{ display:flex; align-items:center; gap:var(--space-sm); }
.nav-list a{
    font-weight:500;
    font-size:var(--fs-sm);
    color:var(--dark);
    padding:.5rem 0;
    position:relative;
}
.nav-list a::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:0; height:2px;
    background:var(--yellow);
    transition:width var(--dur-fast) var(--ease);
}
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after{ width:100%; }
.nav-list a[aria-current="page"]{ color:var(--wine); }

.header-actions{ display:flex; align-items:center; gap:var(--space-xs); }

.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    width:28px;
    padding:8px 0;
}
.hamburger span{
    width:100%; height:2px;
    background:var(--dark);
    border-radius:2px;
    transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- Breadcrumb ---- */
.breadcrumb{
    padding-block:var(--space-sm);
    font-size:var(--fs-xs);
    color:var(--gray);
    background:var(--light-alt);
}
.breadcrumb ol{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.breadcrumb a{ color:var(--wine); font-weight:500; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:.4rem; color:var(--gray-light); }
.breadcrumb li[aria-current="page"]{ color:var(--gray); }

/* ---- Buttons ---- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    font-family:var(--font-heading);
    font-weight:600;
    font-size:var(--fs-sm);
    padding:.95rem 2rem;
    border-radius:var(--radius-full);
    transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    white-space:nowrap;
}
.btn-primary{
    background:var(--wine);
    color:var(--white);
    box-shadow:0 12px 24px rgba(141,5,35,.22);
}
.btn-primary:hover{ background:var(--wine-dark); transform:translateY(-2px); box-shadow:0 16px 30px rgba(141,5,35,.3); }

.btn-accent{
    background:var(--yellow);
    color:var(--dark);
    box-shadow:0 12px 24px rgba(255,187,0,.28);
}
.btn-accent:hover{ background:var(--yellow-dark); transform:translateY(-2px); }

.btn-outline{
    background:transparent;
    color:var(--wine);
    border:2px solid var(--wine);
    padding:.85rem 1.85rem;
}
.btn-outline:hover{ background:var(--wine); color:var(--white); }

.btn-ghost{
    background:rgba(255,255,255,.15);
    color:var(--white);
    border:1.5px solid rgba(255,255,255,.4);
    padding:.85rem 1.85rem;
}
.btn-ghost:hover{ background:rgba(255,255,255,.25); }

.btn-sm{ padding:.6rem 1.3rem; font-size:var(--fs-xs); }
.btn-block{ width:100%; }

/* ---- Cards ---- */
.card{
    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }

.card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--light); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .card__media img{ transform:scale(1.07); }

.card__body{ padding:var(--space-sm); }
.card__tag{
    display:inline-block;
    font-size:var(--fs-xs);
    font-weight:600;
    color:var(--wine);
    background:rgba(141,5,35,.08);
    padding:.3rem .8rem;
    border-radius:var(--radius-full);
    margin-bottom:.6rem;
}
.card__title{ font-size:var(--fs-md); margin-bottom:.5rem; }
.card__text{ font-size:var(--fs-sm); }

.icon-card{
    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:var(--space-md);
    text-align:left;
    transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
    border:1px solid var(--border);
}
.icon-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.icon-card__icon{
    width:56px; height:56px;
    border-radius:50% 50% 14px 14px;
    background:linear-gradient(150deg, var(--yellow), var(--yellow-dark));
    display:flex; align-items:center; justify-content:center;
    margin-bottom:var(--space-xs);
    color:var(--wine);
}
.icon-card__icon svg{ width:26px; height:26px; }

/* ---- Placeholder image blocks ---- */
.ph{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, var(--light-alt), var(--light));
    color:var(--gray);
    text-align:center;
    font-size:var(--fs-xs);
    font-weight:600;
    letter-spacing:.03em;
    min-height:100%;
    width:100%;
    border:1px dashed var(--border);
}
.ph span{ padding:var(--space-xs); }

/* ---- Stats ---- */
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-md);
    text-align:center;
}
.stat__num{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:var(--fs-3xl);
    color:var(--yellow);
}
.stat__label{
    font-size:var(--fs-sm);
    color:rgba(255,255,255,.85);
    margin-top:.3rem;
}

/* ---- Testimonials ---- */
.testimonial{
    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:var(--space-lg);
    max-width:720px;
    margin-inline:auto;
    text-align:center;
}
.testimonial__quote{
    font-family:var(--font-heading);
    font-size:var(--fs-lg);
    color:var(--dark);
    font-weight:500;
    margin-bottom:var(--space-sm);
}
.testimonial__avatar{
    width:64px; height:64px;
    border-radius:50%;
    margin-inline:auto var(--space-2xs);
    background:var(--light);
    overflow:hidden;
}
.testimonial__name{ font-weight:700; font-family:var(--font-heading); }
.testimonial__role{ font-size:var(--fs-xs); color:var(--gray); }

.carousel-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:var(--space-md); }
.carousel-dots button{
    width:9px; height:9px;
    border-radius:50%;
    background:var(--border);
    transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.carousel-dots button.active{ background:var(--wine); transform:scale(1.3); }

/* ---- FAQ Accordion ---- */
.accordion-item{
    border-bottom:1px solid var(--border);
}
.accordion-trigger{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-sm);
    padding:var(--space-sm) 0;
    text-align:left;
    font-family:var(--font-heading);
    font-weight:600;
    font-size:var(--fs-md);
}
.accordion-icon{
    flex-shrink:0;
    width:34px; height:34px;
    border-radius:50%;
    background:var(--light-alt);
    color:var(--wine);
    display:flex; align-items:center; justify-content:center;
    transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.accordion-trigger[aria-expanded="true"] .accordion-icon{ transform:rotate(45deg); background:var(--yellow); color:var(--dark); }
.accordion-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height var(--dur-slow) var(--ease);
}
.accordion-panel__inner{ padding-bottom:var(--space-sm); color:var(--gray); font-size:var(--fs-sm); max-width:70ch; }

/* ---- Forms ---- */
.form-group{ margin-bottom:var(--space-sm); }
.form-label{
    display:block;
    font-weight:600;
    font-size:var(--fs-sm);
    margin-bottom:.5rem;
}
.form-label .req{ color:var(--wine); }
.form-control{
    width:100%;
    padding:.9rem 1.1rem;
    border:1.5px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--white);
    font-size:var(--fs-sm);
    transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-control:focus{
    border-color:var(--wine);
    box-shadow:0 0 0 4px rgba(141,5,35,.1);
    outline:none;
}
.form-control.error{ border-color:#c0392b; }
.form-error{ display:none; color:#c0392b; font-size:var(--fs-xs); margin-top:.4rem; }
.form-error.visible{ display:block; }
textarea.form-control{ resize:vertical; min-height:140px; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-sm); }

.upload-box{
    border:2px dashed var(--border);
    border-radius:var(--radius-sm);
    padding:var(--space-md);
    text-align:center;
    color:var(--gray);
    font-size:var(--fs-sm);
    cursor:pointer;
    transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.upload-box:hover, .upload-box.dragover{ border-color:var(--wine); background:var(--light-alt); }

/* ---- Newsletter ---- */
.newsletter{
    display:flex;
    gap:.75rem;
    max-width:480px;
}
.newsletter input{ flex:1; }

/* ---- Footer ---- */
.site-footer{
    background:var(--dark);
    color:rgba(255,255,255,.7);
    padding-block:var(--space-xl) var(--space-md);
}
.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.2fr;
    gap:var(--space-lg);
    padding-bottom:var(--space-lg);
    border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand p{ color:rgba(255,255,255,.6); margin-top:var(--space-xs); font-size:var(--fs-sm); }
.footer-heading{ color:var(--white); font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.1em; margin-bottom:var(--space-xs); }
.footer-links li{ margin-bottom:.6rem; }
.footer-links a{ font-size:var(--fs-sm); transition:color var(--dur-fast) var(--ease); }
.footer-links a:hover{ color:var(--yellow); }
.footer-social{ display:flex; gap:.6rem; margin-top:var(--space-xs); }
.footer-social a{
    width:38px; height:38px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center;
    transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer-social a:hover{ background:var(--yellow); color:var(--dark); transform:translateY(-3px); }
.footer-bottom{
    padding-top:var(--space-md);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-xs);
    font-size:var(--fs-xs);
    color:rgba(255,255,255,.5);
}

/* ---- Floating Buttons ---- */
.float-stack{
    position:fixed;
    right:var(--space-sm);
    bottom:var(--space-sm);
    display:flex;
    flex-direction:column;
    gap:.75rem;
    z-index:900;
}
.float-btn{
    width:54px; height:54px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
    transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.float-btn:hover{ transform:translateY(-3px) scale(1.05); }
.whatsapp-btn{ background:#25D366; color:var(--white); }
.scroll-top-btn{
    background:var(--wine);
    color:var(--white);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
}
.scroll-top-btn.visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---- Dark mode toggle ---- */
.theme-toggle{
    width:44px; height:44px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--light-alt);
    color:var(--wine);
    transition:background var(--dur-fast) var(--ease);
}
.theme-toggle:hover{ background:var(--border); }

/* ---- Search ---- */
.search-bar{
    position:relative;
    max-width:560px;
    margin-inline:auto;
}
.search-bar input{
    width:100%;
    padding:1.1rem 3.2rem 1.1rem 1.5rem;
    border-radius:var(--radius-full);
    border:1.5px solid var(--border);
    background:var(--white);
    box-shadow:var(--shadow-sm);
    font-size:var(--fs-sm);
}
.search-bar button{
    position:absolute;
    right:6px; top:50%;
    transform:translateY(-50%);
    width:42px; height:42px;
    border-radius:50%;
    background:var(--wine);
    color:var(--white);
    display:flex; align-items:center; justify-content:center;
}
.search-results{
    position:absolute;
    top:calc(100% + 10px);
    left:0; right:0;
    background:var(--white);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-lg);
    max-height:340px;
    overflow-y:auto;
    z-index:50;
    display:none;
}
.search-results.active{ display:block; }
.search-results a{
    display:block;
    padding:.9rem 1.3rem;
    border-bottom:1px solid var(--border);
    font-size:var(--fs-sm);
}
.search-results a:hover{ background:var(--light-alt); }
.search-results__empty{ padding:1.3rem; color:var(--gray); font-size:var(--fs-sm); }

/* --------------------------------------------------------------------------
   6. UTILITIES
   -------------------------------------------------------------------------- */
.text-center{ text-align:center; }
.text-wine{ color:var(--wine); }
.text-yellow{ color:var(--yellow); }
.text-white{ color:var(--white); }
.bg-light{ background:var(--light); }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.container-narrow{ max-width:880px; margin-inline:auto; }