/* ===========================================================
   Ganesh Shirsat Academy — custom overrides on top of Tailwind
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

html, body { overflow-x: hidden; }
body { font-family: 'Poppins', sans-serif; }

:root {
  --brand-red: #bd3538;
  --brand-red-dark: #a82e31;
  --brand-dark: #061d1b;
  --brand-dark-2: #172f2d;
  --brand-gold: #c49a63;
  --brand-muted: #9eb0b8;
  --brand-whatsapp: #25D366;
}

/* ---------- Button reset (Tailwind preflight is disabled, so native <button>
     elements inherit the browser's grey "buttonface" styling. This normalises
     every button that lives inside the GS header/mobile panel so it looks like
     a plain nav link. Also normalises the social/action pills.) ---------- */
.gs-header-root button {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.gs-header-root svg { display: inline-block; vertical-align: middle; }

/* ---------- List reset for footer & nav lists (Tailwind preflight is disabled,
     so <ul>/<ol>/<li> inherit the browser's default bullet markers. We strip
     them where we're drawing our own bullets with inner spans.) ---------- */
.rc-app footer ul,
.rc-app footer ol,
.gs-header-root ul,
.gs-header-root ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.rc-app footer li,
.gs-header-root li { list-style: none; }

/* ---------- Nav link style ---------- */
.gs-nav-link {
  position: relative;
  height: 100%;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  white-space: nowrap;
  font-weight: 500;
  color: #111;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .3s ease;
}
@media (min-width: 1536px) { .gs-nav-link { font-size: 15px; } }
.gs-nav-link:hover { color: #bd3538; }
.gs-nav-link.is-active { color: #bd3538; }
.gs-nav-under {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 17px;
  height: 2px;
  background: #bd3538;
  border-radius: 999px;
  width: 0;
  opacity: 0;
  transition: all .3s ease;
}
.gs-nav-link:hover .gs-nav-under,
.gs-nav-link.is-active .gs-nav-under { width: 100%; opacity: 1; }

/* ---------- Topbar collapse on scroll ---------- */
.gs-topbar.scrolled-hidden { height: 0; opacity: 0; overflow: hidden; }
.gs-nav-spacer.is-visible   { display: block; }
.gs-navbar.is-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* ---------- Mobile menu ---------- */
.gs-mobile-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.gs-mobile-panel.is-open   { transform: translateY(0); opacity: 1; visibility: visible; }
.gs-mobile-courses-sub.is-open { max-height: 220px; opacity: 1; padding-bottom: .5rem; }
.gs-mobile-courses-btn.is-open svg { transform: rotate(180deg); }

/* ---------- Modals ---------- */
#applyModal.is-open, #searchModal.is-open { opacity: 1; visibility: visible; }

/* ---------- Floating call button when at footer ---------- */
.gs-float-call.at-footer {
  bottom: 80px;
  right: auto;
  left: 1.5rem;
}
@media (min-width: 640px) {
  .gs-float-call.at-footer { bottom: 88px; }
}

/* ---------- Fade-in on scroll ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp .6s ease forwards; }

/* ---------- Marquee ---------- */
@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-marquee-x { animation: marquee-x 40s linear infinite; display: flex; width: max-content; }
.animate-marquee-x:hover { animation-play-state: paused; }

/* ---------- Hero slider ---------- */
.gs-hero-slide { opacity: 0; transition: opacity 1s ease; }
.gs-hero-slide.is-active { opacity: 1; }

/* ---------- Accordion ---------- */
.gs-accordion-item .gs-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.gs-accordion-item.is-open .gs-accordion-body { max-height: 500px; }
.gs-accordion-item .gs-accordion-icon { transition: transform .3s ease; }
.gs-accordion-item.is-open .gs-accordion-icon { transform: rotate(45deg); }

/* ---------- Tabs ---------- */
.gs-tab { cursor: pointer; }
.gs-tab-panel { display: none; }
.gs-tab-panel.is-active { display: block; }
.gs-tab.is-active { color: #fff; background: #bd3538; }

/* ===========================================================
   RESPONSIVE POLISH — site-wide fixes for mobile + tablet
   =========================================================== */

/* ── Global: never allow horizontal scroll ── */
.rc-app, .rc-app > * { max-width: 100vw; }

/* ── Layout: adjust topbar offset based on viewport ──
   Desktop (≥1024px): topbar visible = 48px + navbar 76px = 124px
   Below 1024px: topbar hidden = navbar only (70-76px) */
@media (min-width: 1024px) {
    .rc-app > main { padding-top: 124px !important; }
}
@media (max-width: 1023.98px) {
    .rc-app > main { padding-top: 76px !important; }
}
@media (max-width: 639.98px) {
    .rc-app > main { padding-top: 70px !important; }
}

/* ── Hero slider: shorter height on tablet / mobile ── */
@media (max-width: 1023.98px) {
    .gs-hero { min-height: 580px !important; }
    .gs-hero h1 { font-size: 28px !important; }
}
@media (max-width: 639.98px) {
    .gs-hero { min-height: 500px !important; }
    .gs-hero h1 { font-size: 24px !important; line-height: 1.2 !important; }
    .gs-hero p { font-size: 12px !important; }
}

/* ── Section padding: tighten on mobile ── */
@media (max-width: 639.98px) {
    .rc-app section { padding-left: 16px; padding-right: 16px; }
}

/* ── Images: responsive by default so a stray big image never
     bursts out of its grid cell on mobile ── */
.rc-app img:not([class]) { max-width: 100%; height: auto; }

/* ── iframes (map, embeds): never exceed container ── */
.rc-app iframe { max-width: 100%; }

/* ── Floating buttons spacing on mobile ── */
@media (max-width: 639.98px) {
    .float-btn, .rc-app .float-btn { width: 48px !important; height: 48px !important; }
    .float-btn--whatsapp { bottom: 16px !important; left: 16px !important; }
    .float-btn--call { bottom: 16px !important; right: 16px !important; }
    /* give pages extra bottom clearance so content never sits under the floating pills */
    .rc-app > main { padding-bottom: 90px; }
}

/* ── Mobile menu overlay: must sit above everything, and the panel
     needs to scroll inside the viewport so long nav menus work ── */
.gs-mobile-overlay {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s ease;
}
.gs-mobile-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.gs-mobile-panel {
    opacity: 0; visibility: hidden;
    transform: translateY(-16px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.gs-mobile-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* ── Footer: on mobile the brand logo should scale down ── */
@media (max-width: 639.98px) {
    .rc-app footer .w-\[200px\],
    .rc-app footer img[alt*="Academy"] { max-width: 180px !important; }
}

/* ── Contact page: form card must not overflow on narrow screens ── */
@media (max-width: 639.98px) {
    .rc-app input, .rc-app select, .rc-app textarea { max-width: 100%; box-sizing: border-box; }
}

/* ── Login page stacks on tablet + mobile ── */
@media (max-width: 900px) {
    .hj-auth-page { grid-template-columns: 1fr !important; min-height: 0 !important; }
    .hj-auth-brand { padding: 40px 20px 32px !important; }
    .hj-auth-brand__inner { max-width: 100% !important; }
    .hj-auth-logo-plate { padding: 14px 24px !important; }
    .hj-auth-logo-plate .hj-auth-logo { height: 56px !important; }
    .hj-auth-stats { max-width: 360px !important; }
    .hj-auth-formside { padding: 32px 16px 90px !important; }
    .hj-auth-card { max-width: 100% !important; padding: 28px 22px !important; }
    .hj-auth-deco { display: none; }
}
@media (max-width: 480px) {
    .hj-auth-brand__title { font-size: 24px !important; }
    .hj-auth-brand__sub { font-size: 13px !important; }
    .hj-auth-trust { font-size: 10px !important; gap: 8px !important; }
    .hj-auth-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; padding-top: 16px !important; }
    .hj-auth-stat__num { font-size: 18px !important; }
    .hj-auth-stat__label { font-size: 9.5px !important; }
    .hj-auth-logo-plate { padding: 12px 20px !important; }
    .hj-auth-logo-plate .hj-auth-logo { height: 48px !important; }
}

/* ── Prevent long emails / URLs from breaking the layout ── */
.rc-app a { word-wrap: break-word; overflow-wrap: break-word; }

/* ── Tables on mobile: horizontal scroll inside their wrapper only ── */
@media (max-width: 767.98px) {
    .rc-app table { display: block; overflow-x: auto; max-width: 100%; }
}

/* ── Make the YouTube demo card thumbnails always 16:9 ── */
.group\/lecture .relative.h-\[190px\] { aspect-ratio: 16/9; height: auto !important; min-height: 180px; }

/* ── Contact hero: tighten the breadcrumb spacing on mobile ── */
@media (max-width: 639.98px) {
    .rc-app section h1.tracking-wider { letter-spacing: 0.05em !important; }
}

/* ── Dropdowns on mobile: hover-only dropdowns from the desktop nav
     must never render on mobile (they live behind xl:hidden anyway,
     but belt-and-braces: hide any group hover panel below xl) ── */
@media (max-width: 1279.98px) {
    .gs-header-root .hidden.xl\:flex { display: none !important; }
}

/* ── Image containers in course cards never exceed their width ── */
.rc-app .object-cover,
.rc-app .object-contain { max-width: 100%; max-height: 100%; }

/* ── Marquee on mobile: shorter cards + slower speed ── */
@media (max-width: 639.98px) {
    .animate-marquee-x { animation-duration: 50s; }
}

/* ── Admin area is NEVER touched by this file ── */
.admin-shell, .admin-shell * { font-family: inherit; }