/* ============================================================
   SHREE CLASSES  •  MASTER STYLESHEET
   ============================================================ */

/* ------------------------------------------------------------
   1.  BRAND ORANGE PALETTE  (mapped to Tailwind‑style classes)
   ------------------------------------------------------------ */
:root{
  --primary-50 : #FFF4EC;
  --primary-100: #FFE4D0;
  --primary-200: #FFC9A1;
  --primary-300: #FFA96D;
  --primary-400: #FF8A3A;
  --primary-500: #E96405;      /* brand orange */
  --primary-600: #C45002;
  --primary-700: #A04502;
  --primary-800: #7C3501;
  --primary-900: #4F2000;
  --primary-950: #341400;
}

/* ---------- TEXT HELPERS ---------- */
.text-primary-50  { color:var(--primary-50 ) !important; }
.text-primary-100 { color:var(--primary-100) !important; }
.text-primary-200 { color:var(--primary-200) !important; }
.text-primary-300 { color:var(--primary-300) !important; }
.text-primary-400 { color:var(--primary-400) !important; }
.text-primary-500 { color:var(--primary-500) !important; }
.text-primary-600 { color:var(--primary-600) !important; }
.text-primary-700 { color:var(--primary-700) !important; }
.text-primary-800 { color:var(--primary-800) !important; }
.text-primary-900 { color:var(--primary-900) !important; }
.text-primary-950 { color:var(--primary-950) !important; }

/* ---------- BACKGROUND HELPERS ---------- */
.bg-primary-50  { background:var(--primary-50 ) !important; }
.bg-primary-100 { background:var(--primary-100) !important; }
.bg-primary-200 { background:var(--primary-200) !important; }
.bg-primary-300 { background:var(--primary-300) !important; }
.bg-primary-400 { background:var(--primary-400) !important; }
.bg-primary-500 { background:var(--primary-500) !important; }
.bg-primary-600 { background:var(--primary-600) !important; }
.bg-primary-700 { background:var(--primary-700) !important; }
.bg-primary-800 { background:var(--primary-800) !important; }
.bg-primary-900 { background:var(--primary-900) !important; }
.bg-primary-950 { background:var(--primary-950) !important; }

/* ---------- BORDERS ---------- */
.border-primary-100{ border-color:var(--primary-100)!important; }
.border-primary-200{ border-color:var(--primary-200)!important; }
.border-primary-300{ border-color:var(--primary-300)!important; }
.border-primary-400{ border-color:var(--primary-400)!important; }

/* ---------- GRADIENT UTILS ---------- */
.from-primary-500 { --tw-gradient-from : var(--primary-500); }
.to-primary-700   { --tw-gradient-to   : var(--primary-700); }

/* ------------------------------------------------------------
   2.  GLOBAL BASE
   ------------------------------------------------------------ */
html{scroll-behavior:smooth;}
body{
  font-family:"Inter",sans-serif;
  line-height:1.6;
}

/* sections */
.section{padding:6rem 1.5rem;}
.section.alt{background:var(--primary-50);}   /* soft peach sheet */

/* simple card lift */
.course-card,
.offering-card{
  transition:transform .3s ease, box-shadow .3s ease;
}
.course-card:hover,
.offering-card:hover{
  transform:translateY(-8px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

/* ------------------------------------------------------------
   3.  HERO
   ------------------------------------------------------------ */
.hero-overlay{
  position:absolute; inset:0; z-index:5;
  background:linear-gradient(135deg,
              rgba(233,100,5,.88) 0%,
              rgba(233,100,5,.78) 40%,
              rgba(52,20,0 ,.75) 100%);
}

/* responsive hero typographic scale */
.hero-title  { font-size:clamp(2.25rem, 6vw + .5rem, 4.5rem); line-height:1.15; font-weight:800;}
.hero-subtext{ font-size:clamp(1.05rem, 3.5vw + .25rem, 1.35rem); }

/* ------------------------------------------------------------
   4.  FOOTER PILL BUTTON
   ------------------------------------------------------------ */
.footer-btn{
  display:inline-block;
  padding:.4rem 1rem;
  font-size:.8rem;
  font-weight:600;
  color:#fff;
  background:var(--primary-500);
  border-radius:9999px;
  transition:background .22s ease, transform .22s ease;
}
.footer-btn:hover{
  background:var(--primary-600);
  transform:translateY(-2px);
}

/* ------------------------------------------------------------
   5.  ANIMATIONS
   ------------------------------------------------------------ */
@keyframes fade-in-up     { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes slide-in-left  { from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none} }
@keyframes slide-in-right { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:none} }
@keyframes bounce-subtle  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes pulse-whatsapp { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}
                            70%     {box-shadow:0 0 0 20px rgba(37,211,102,0)} }

.animate-fade-in-up      { animation:fade-in-up .8s both ease-out; }
.animate-fade-in-up.delay{ animation-delay:.25s; }
.animate-slide-in-left   { animation:slide-in-left .8s both ease-out; }
.animate-slide-in-right  { animation:slide-in-right .8s both ease-out; }
.animate-bounce-subtle   { animation:bounce-subtle 2.4s infinite both; }
.animate-pulse-whatsapp  { animation:pulse-whatsapp 2.5s infinite; }

/* ------------------------------------------------------------
   6.  ICON‑CIRCLE utility (courses / offerings)
   ------------------------------------------------------------ */
.icon-circle{
  width:5rem; height:5rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:9999px;
}

/* ------------------------------------------------------------
   7.  CONTACT FORM GRID
   ------------------------------------------------------------ */
.contact-form{
  display:grid;
  gap:1.2rem;
  grid-template-columns:1fr;          /* mobile: single column */
}
@media(min-width:640px){              /* ≥ sm */
  .contact-form{ grid-template-columns:1fr 1fr; }
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.9rem 1rem;
  border-radius:.75rem;
  background:#fff;
  border:1px solid #e5e7eb;          /* Tailwind gray‑200 */
  font-size:1rem;
}
.contact-form textarea{ grid-column:1/-1; resize:vertical; }
.contact-form button{  grid-column:1/-1; }

/* vivid orange CTA button */
.btn-orange{
  background:linear-gradient(135deg,var(--primary-500),var(--primary-600));
  color:#fff;
  font-weight:700;
  transition:transform .2s ease, box-shadow .25s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
.btn-orange:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}

/* ------------------------------------------------------------
   8.  COOKIE MODAL POP
   ------------------------------------------------------------ */
@keyframes modal-pop{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:none}}
.animate-modal-pop{animation:modal-pop .35s ease-out both;}

/* ------------------------------------------------------------
   9.  MOBILE POLISH
   ------------------------------------------------------------ */
@media(max-width:480px){
  .section{padding:4rem 1rem;}
  .hero-title{margin-bottom:1.75rem;text-align:left;}
  .hero-subtext{text-align:left;}
  /* stack hero buttons */
  .hero-title + .hero-subtext + div{
    flex-direction:column; align-items:flex-start;
  }
  .hero-title + .hero-subtext + div a{width:100%; justify-content:center;}
}

/* shrink h1 slightly on very tiny phones */
@media(max-width:340px){
  .hero-title{font-size:2rem;}
}

/* ──────────────────────────────────────────────
   A. icon‑circle → force the <i> dead‑centre
   ──────────────────────────────────────────────*/

.icon-circle{
  width:5rem;                     /* keep your size */
  height:5rem;
  display:flex;                   /* flexbox → centre */
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  position:relative;              /* for future if you need */
}

/* kill the absolute positioning we added before */
.icon-circle > i{
  position:static !important;     /* static, not absolute  */
  margin:0;                       /* no weird offset       */
  font-size:1.75rem;              /* tweak size as you like*/
  line-height:1;                  /* no extra vertical gap */
}
/* Centre the whole peach circle inside its card */
.icon-circle{
  margin-left:auto;
  margin-right:auto;
}


/* ──────────────────────────────────────────────
   B. mobile CTA buttons – nicer gap & full width
   (they already sit inside #mobileMenu)
   ──────────────────────────────────────────────*/
#mobileMenu .cta-btn{               /*  add class="cta-btn" to both links  */
  display:block;
  width:100%;
  border-radius:1.7rem;
  padding:.7rem 0;
  font-weight:600;
  text-align:center;
}
#mobileMenu .cta-btn + .cta-btn{ margin-top:.65rem; } /* stacked gap */

/* Make inputs readable on the dark background */
.field{
  background:#fff;          /* solid white box */
  color:#4f2000;             /* brand‑brown text */
  border:1px solid var(--primary-100);
}
.field::placeholder{color:#9f9f9f}

/* fix 1‑column mobile alignment (the icon‑circle issue was solved earlier) */
.contact-form{
  grid-template-columns:1fr;     /*  ⬅︎ enforce single column on ≤ 639 px  */
}
@media(min-width:640px){
  .contact-form{grid-template-columns:1fr 1fr;}  /* 2‑col from sm‑breakpoint */
}

/* mobile slide‑down nav ─ fixes “still hidden” bug */
#mobileMenu{
  position:fixed;         /* detached from header flow       */
  top:4rem;               /* = header height (64 px)          */
  left:0;
  width:100%;
  z-index:60;
  max-height:0;           /* collapses */
  overflow:hidden;
  transition:max-height .35s ease;
}

/* when JS adds .open */
#mobileMenu.open{
  display:block !important;  /* beat Tailwind’s .hidden       */
  max-height:420px;          /* slide‑down height             */
}