/* ====================================================================
  Retro-Block Design System | style.css
  --------------------------------------------------------------------
  – Responsive, performant & modular.
  – Tetrad colour palette  •  3D hover animations  •  Glassmorphism.
  – Fonts: Oswald (headings) • Nunito (body).
==================================================================== */

/* ------------------------------- */
/*  CSS Reset  &  Global Defaults  */
/* ------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  color:var(--clr-text);
  background:var(--clr-bg);
  padding-top:var(--header-height,72px); /* offset for fixed header */
}

/* ----------------- */
/*  Theme Variables  */
/* ----------------- */
:root{
  /* Tetrad Palette */
  --clr-primary:#FF6B6B;        /* vivid coral            */
  --clr-primary-dark:#C44545;
  --clr-secondary:#FECA57;      /* warm sunflower         */
  --clr-secondary-dark:#CC9C30;
  --clr-tertiary:#1DD1A1;       /* mint green             */
  --clr-tertiary-dark:#0B9B75;
  --clr-quaternary:#54A0FF;     /* bright azure           */
  --clr-quaternary-dark:#2669CC;

  /* Neutrals */
  --clr-bg:#FFF9F3;
  --clr-surface:#FFFFFF;
  --clr-surface-glass:rgba(255,255,255,.15);
  --clr-border:rgba(0,0,0,.07);
  --clr-text:#222;
  --clr-text-light:#f4f4f4;

  /* Gradient Helpers */
  --grad-primary:linear-gradient(135deg,var(--clr-primary),var(--clr-secondary));
  --grad-accent:linear-gradient(135deg,var(--clr-tertiary),var(--clr-quaternary));

  /* Sizing & Radius */
  --radius-sm:.5rem;
  --radius-md:1rem;
  --shadow-3d:0 15px 25px -5px rgba(0,0,0,.15),
              0 6px 10px -5px rgba(0,0,0,.05);
  --transition:.35s cubic-bezier(.37,.01,.15,.99);
}
/* --------------------- */
/*  Utility / Layout     */
/* --------------------- */
.container{
  width:90%;
  max-width:1200px;
  margin-inline:auto;
}
.flex{display:flex;align-items:center}
.space-between{justify-content:space-between}
.align-center{align-items:center}
.gap-lg{gap:2rem}

/* Grid helpers */
.grid-2      {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
.grid-3      {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
.grid-center {display:grid;place-items:center}

/* Glassmorphism */
.glass{
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  background:var(--clr-surface-glass);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-md);
}

/* ---------------------------------- */
/*  Fixed Header & Navigation Burger  */
/* ---------------------------------- */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:var(--clr-quaternary);
  color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:background .25s ease;
}
.logo{font-family:'Oswald',sans-serif;font-size:1.5rem;color:#fff;text-decoration:none}
.navigation ul{list-style:none}
.navigation a{color:#fff;text-decoration:none;font-weight:600;position:relative;padding:.5rem}
.navigation a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
  background:#fff;transition:width var(--transition)}
.navigation a:hover::after{width:100%}

/* Burger */
.burger{display:none;background:none;border:0;cursor:pointer}
.burger span{display:block;width:24px;height:3px;margin:5px;background:#fff;border-radius:2px}

/* Responsive Nav */
@media(max-width:768px){
  .burger{display:block}
  #main-nav{position:fixed;inset:0;display:grid;place-items:center;
    background:var(--clr-quaternary-dark);transform:translateX(100%);transition:var(--transition)}
  #main-nav.open{transform:translateX(0)}
  #main-nav ul{flex-direction:column;gap:2rem}
}

/* ------------------- */
/*  Typography         */
/* ------------------- */
h1,h2,h3,h4,h5{font-family:'Oswald',sans-serif;font-weight:600;line-height:1.2;color:var(--clr-text)}
h1{font-size:clamp(2.2rem,5vw,3rem)}
h2{font-size:clamp(1.6rem,4vw,2.4rem)}
h3{font-size:1.4rem}
p{margin-block:1rem}
.text-center{text-align:center}
.small{font-size:.85rem}

/* Link — Read more */
.read-more{display:inline-block;color:var(--clr-quaternary);font-weight:700;position:relative}
.read-more::after{
  content:'›';margin-left:.4em;transition:transform var(--transition);
}
.read-more:hover::after{transform:translateX(4px)}

/* --------------- */
/*  Global Buttons */
/* --------------- */
.btn,
button,
input[type='submit']{
  display:inline-block;
  padding:.75rem 1.5rem;
  font-family:'Oswald',sans-serif;
  font-size:1rem;
  border:none;
  border-radius:var(--radius-sm);
  background:var(--grad-primary);
  color:#fff;
  cursor:pointer;
  box-shadow:var(--shadow-3d);
  transition:transform var(--transition),box-shadow var(--transition);
}
.btn.secondary{background:var(--grad-accent)}
.btn:hover,
button:hover,
input[type='submit']:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 20px 30px -10px rgba(0,0,0,.25);
}
.btn:active{transform:translateY(0)}

/* ------------------ */
/*  Hero Section      */
/* ------------------ */
.hero-section{
  position:relative;min-height:60vh;display:grid;place-items:center;text-align:center;
}
.hero-section .overlay{
  position:absolute;inset:0;
  background-size:cover;background-repeat:no-repeat;
}
.hero-content{
  position:relative;z-index:1;color:var(--clr-text-light);
  max-width:720px;padding:3rem 1rem;
}
.hero-title{margin-bottom:1rem}
.hero-text{font-size:1.1rem}

/* Overlay darkening */
.hero-section .overlay::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
}

/* ------------------ */
/*  Section Spacing   */
/* ------------------ */
section{padding-block:4rem}
.retro-block{background:var(--clr-secondary);background-image:url('');
  background-size:cover;background-repeat:no-repeat}

/* ------------------ */
/*  Accordion         */
/* ------------------ */
.accordion-item{border-bottom:1px solid var(--clr-border)}
.accordion-header{
  width:100%;text-align:left;padding:1rem;background:none;border:none;
  font-family:'Oswald';font-size:1.1rem;color:var(--clr-primary-dark);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center
}
.accordion-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.accordion-item.open .accordion-body{max-height:300px}

/* ------------------ */
/*  Cards (Universal) */
/* ------------------ */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;flex-direction:column;align-items:center;
  background:var(--clr-surface);border-radius:var(--radius-md);
  box-shadow:var(--shadow-3d);text-align:center;
  transition:transform var(--transition);
}
.card:hover,
.item:hover,
.team-member:hover,
.product-card:hover{transform:translateY(-6px) rotateX(1deg) rotateY(-1deg)}
.card-image,
.image-container{
  width:100%;
  height:250px;
  overflow:hidden;
  border-top-left-radius:var(--radius-md);
  border-top-right-radius:var(--radius-md);
}
.card-image img,
.image-container img{
  width:100%;height:100%;object-fit:cover;margin:0 auto;display:block
}
.card-content{padding:1.5rem}

/* ------------------ */
/*  Carousel          */
/* ------------------ */
.carousel{position:relative;overflow:hidden}
.carousel-track{display:flex;gap:2rem;scroll-snap-type:x mandatory;overflow-x:auto;padding-bottom:1rem}
.carousel-track .card{min-width:300px;scroll-snap-align:center}
.carousel-controls{
  position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;
  pointer-events:none
}
.carousel-controls button{
  pointer-events:auto;background:var(--clr-surface);color:var(--clr-primary-dark);
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center
}

/* ------------------ */
/*  Progress Bars     */
/* ------------------ */
.progress-wrapper p{margin-bottom:.25rem;font-weight:600}
.progress-bar{
  width:100%;height:10px;background:var(--clr-border);border-radius:5px;margin-bottom:1rem
}
.progress-bar span{
  display:block;height:100%;background:var(--grad-accent);border-radius:5px
}

/* ------------------ */
/*  Events Section    */
/* ------------------ */
.events-section .card{flex-direction:row;gap:2rem}
.events-section .card-image{height:auto;flex:1 1 50%}
@media(max-width:768px){
  .events-section .card{flex-direction:column}
}

/* ------------------ */
/*  Contact Section   */
/* ------------------ */
.contact-form{display:grid;gap:1.25rem;margin-top:2rem}
.form-group{display:flex;flex-direction:column;gap:.5rem}
input,textarea{
  width:100%;padding:.75rem;border:2px solid var(--clr-border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:1rem;resize:vertical
}
input:focus,textarea:focus{outline:none;border-color:var(--clr-primary)}
address{font-style:normal;margin-top:2rem;line-height:1.8}

/* ------------------ */
/*  Success Page      */
/* ------------------ */
.success-message{
  min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center
}

/* ------------------ */
/*  Footer            */
/* ------------------ */
.site-footer{
  background:var(--clr-primary-dark);color:#fff;padding:3rem 1rem;margin-top:4rem
}
.footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.site-footer a{color:#fff;text-decoration:none;position:relative}
.site-footer a::after{
 content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:#fff;
 transition:width var(--transition)
}
.site-footer a:hover::after{width:100%}

/* Social icons (text links with pseudo-icons) */
.site-footer ul li a::before{
  content:'◆ '; /* diamond as simple icon */
  color:var(--clr-secondary);font-size:.9em
}

/* ------------------ */
/*  Legal Pages (Privacy & Terms) */
/* ------------------ */
.page-content{padding-top:100px}

/* ------------------ */
/*  3D Fade-Up Anim   */
/* ------------------ */
@keyframes fadeUp3D{
  0%{opacity:0;transform:translate3d(0,40px,-60px)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
[data-aos]{animation:fadeUp3D .8s both}

/* ------------------ */
/*  Images & Parallax */
/* ------------------ */
[data-parallax]{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat
}

/* ------------------ */
/*  Misc Helpers      */
/* ------------------ */
.section-title{margin-bottom:2.5rem;text-transform:uppercase;letter-spacing:.03em}
.mt-2{margin-top:2rem}
.pt-4{padding-top:4rem}

/* ------------------ */
/*  Accessibility     */
/* ------------------ */
:focus-visible{outline:3px dashed var(--clr-secondary-dark);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation-duration:.01ms!important}
}