/* ============================================================
   Brandbox theme4 — Bright Classroom
   Purpose-built for schools, kids, and learning brands.
   Ultra-round surfaces, bouncy hover, Nunito letterforms,
   joyful pastel section bands, a bright solid-stripe navbar,
   colorful tinted card shadows, and pill CTAs with scale lift.
   Foundation provides layout and color contract.
   Admin palette drives every brand color via --color-* tokens.
   ============================================================ */

/* ============================================================
   1) Tokens — structural identity
   ============================================================ */
:root {
  /* Typography: ultra-rounded, highly legible for young readers */
  --font-serif: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-sans:  'Nunito', system-ui, -apple-system, sans-serif;
  --nav-link-size:    clamp(14px, 0.32vw + 13px, 16px);
  --nav-cta-size:     clamp(13px, 0.28vw + 12px, 15px);
  --nav-link-tracking: 0;

  /* Shape: maximum friendliness */
  --radius:    20px;
  --radius-lg: 32px;
  --transition:      all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy spring */
  --transition-slow: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Card shadow: colorful primary tint, not dark and moody */
  --shadow-card:
    0 8px 0 color-mix(in srgb, var(--color-primary) 22%, transparent),
    0 14px 32px color-mix(in srgb, var(--color-primary) 15%, transparent);

  /* Navbar: crisp white with a 4px primary stripe at the very top */
  --navbar-bg:          white;
  --navbar-bg-scrolled: white;
  --navbar-edge:        transparent;
  --navbar-shadow:          0 4px 0 color-mix(in srgb, var(--color-primary) 18%, transparent), 0 6px 20px color-mix(in srgb, var(--color-bg) 6%, transparent);
  --navbar-shadow-scrolled: 0 4px 0 color-mix(in srgb, var(--color-primary) 24%, transparent), 0 10px 28px color-mix(in srgb, var(--color-bg) 8%, transparent);

  --hero-top-clearance: clamp(88px, 10vh, 120px);
  --fab-quick-toggle-h: 56px;

  /* Elevated feature cards on dark sections (palette-driven contrast) */
  --feature-card-bg: var(--feature-card-bg-elevated);
  --feature-card-title: var(--feature-card-title-elevated);
  --feature-card-desc: var(--feature-card-desc-elevated);
  --feature-card-hover-bg: var(--feature-card-hover-bg-elevated);
  --feature-card-icon-bg: var(--feature-card-icon-bg-elevated);
  --feature-card-icon-fg: var(--feature-card-icon-fg-elevated);
  --feature-card-icon-hover-bg: var(--feature-card-icon-hover-bg-elevated);
  --feature-card-icon-hover-fg: var(--feature-card-icon-hover-fg-elevated);
}

/* ============================================================
   2) Body & global
   ============================================================ */
body {
  background: color-mix(in srgb, white 97%, var(--color-primary));
  color: color-mix(in srgb, var(--color-bg) 82%, var(--color-text));
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* All headings: Nunito heavy, upbeat */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-bg);
  line-height: 1.15;
}

a:hover { color: var(--color-primary); }

/* ============================================================
   3) Section header — centered, badge tag, chunky wavy underline
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: 56px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Eyebrow: filled colorful badge, emoji-friendly */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-text);
  background: var(--color-primary);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.section-tag::before,
.section-tag::after { display: none; }

.section-title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 50px);
  letter-spacing: -0.02em;
  color: var(--color-bg);
  margin-bottom: 16px;
}
.section-title-light { color: white; }

.section-subtitle {
  font-size: 17px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-bg) 58%, var(--color-text));
  max-width: 580px;
  margin: 0 auto;
  font-weight: 500;
}

/* Underline: wide chunky bar — playful */
.title-underline {
  width: 80px;
  height: 8px;
  border-radius: 999px;
  margin: 20px auto 0;
  background: var(--color-primary);
}

/* ============================================================
   4) Buttons — super-round pill with spring-bounce hover
   ============================================================ */
.btn {
  border-radius: 999px;
  padding: 14px 32px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  transition: var(--transition);
}
.btn-lg { padding: 18px 42px; font-size: 16px; }
.btn-sm { padding: 10px 24px; font-size: 14px; }

.btn-gold {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: 0;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--color-primary) 55%, var(--color-bg));
}
.btn-gold:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 9px 0 color-mix(in srgb, var(--color-primary) 55%, var(--color-bg));
}
.btn-gold:active { transform: scale(0.97) translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--color-primary) 55%, var(--color-bg)); }

.btn-outline-gold {
  background: white;
  color: var(--color-primary);
  border: 2.5px solid var(--color-primary);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.btn-outline-gold:hover {
  transform: scale(1.05) translateY(-2px);
  background: color-mix(in srgb, var(--color-primary) 8%, white);
}

.btn-outline-white {
  background: transparent;
  color: white;
  border: 2.5px solid color-mix(in srgb, white 75%, transparent);
}
.btn-outline-white:hover { background: white; color: var(--color-primary); transform: scale(1.04); }

.btn-dark {
  background: var(--color-bg);
  color: white;
  border: 0;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--color-bg) 80%, transparent);
}
.btn-dark:hover { transform: scale(1.05) translateY(-2px); }

/* ============================================================
   5) Navbar — bright white with a painted primary stripe on top
   ============================================================ */
.navbar {
  padding: 16px 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  border-top: 4px solid var(--color-primary);
}
.navbar::before { display: none; }
.navbar.scrolled { border-top-color: var(--color-primary); }

.logo-name {
  color: var(--color-bg);
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.logo-tagline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, white);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
}
.logo-icon {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: 16px;
  width: 44px;
  height: 44px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--color-primary) 45%, var(--color-bg));
  font-size: 20px;
}

.navbar-nav { gap: 4px; }
.navbar-nav > li > .nav-link {
  color: color-mix(in srgb, var(--color-bg) 75%, transparent);
  text-shadow: none;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.navbar-nav > li > .nav-link::after { display: none; }
.navbar-nav > li > .nav-link:hover,
.navbar-nav > li > .nav-link.active {
  color: var(--color-primary-text);
  background: var(--color-primary);
}

.hamburger span {
  background: var(--color-bg);
  height: 3px;
  border-radius: 4px;
}

.navbar-cta .btn,
.navbar-cta .navbar-cta__btn {
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 800;
  font-size: 14px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: 0;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--color-primary) 55%, var(--color-bg));
}
.navbar-cta .btn:hover,
.navbar-cta .navbar-cta__btn:hover { transform: scale(1.05) translateY(-2px); }

/* Submenu — bubbly rounded panel */
.navbar-submenu {
  background: white;
  border: 2px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--color-primary) 18%, transparent), 0 16px 36px color-mix(in srgb, var(--color-primary) 12%, transparent);
  padding: 10px;
}
.navbar-submenu .navbar-submenu__link {
  color: color-mix(in srgb, var(--color-bg) 72%, transparent);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
}
.navbar-submenu .navbar-submenu__link:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, white);
  color: var(--color-primary);
}

/* Mobile nav — bright full-screen overlay */
.mobile-nav { background: color-mix(in srgb, white 97%, var(--color-primary)); }
.mobile-nav .nav-link {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-bg);
  padding: 16px 0;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.mobile-nav .nav-link:hover { color: var(--color-primary); }
.mobile-nav .mobile-nav__cta-btn {
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 800;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--color-primary) 55%, var(--color-bg));
}

/* ============================================================
   6) Hero — big cheerful, bright headline
   ============================================================ */
.hero { color: white; }
.hero-badge {
  border-radius: 999px;
  background: color-mix(in srgb, white 22%, transparent);
  border: 2px solid color-mix(in srgb, white 45%, transparent);
  color: white;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 18px;
}
.hero-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(38px, 6vw, 80px);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.hero-title span {
  color: var(--color-primary);
  display: inline;
}
.hero-body {
  font-size: 18px;
  font-weight: 500;
  color: color-mix(in srgb, white 88%, transparent);
  line-height: 1.65;
}
.hero-search {
  border-radius: var(--radius-lg);
  background: white;
  border: 3px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--color-primary) 28%, transparent);
}

/* ============================================================
   7) Sections — alternating pastel bands
   ============================================================ */
.section { padding: 100px 0; }
.section-dark   { background: var(--color-bg); }
.section-darker { background: color-mix(in srgb, var(--color-bg) 94%, black); }
.section-cream  { background: color-mix(in srgb, white 93%, var(--color-primary)); }
.section-light  { background: color-mix(in srgb, white 96%, var(--color-primary)); }
.about-section,
.testimonials-section { background: white; }
.properties-section   { background: color-mix(in srgb, white 93%, var(--color-primary)); }

/* ============================================================
   8) Stats — playful big numbers on a tinted band
   ============================================================ */
.stats-strip {
  background: var(--color-primary);
  border: 0;
  padding: 72px 0;
}
.stat-number {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(48px, 5.5vw, 72px);
  color: var(--color-primary-text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-label {
  color: color-mix(in srgb, var(--color-primary-text) 70%, transparent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 10px;
}

/* ============================================================
   9) Cards — super-round, colorful tinted shadow, scale hover
   ============================================================ */
.property-card,
.feature-card,
.testimonial-card,
.flyer-card,
.blog-card__link {
  border-radius: var(--radius-lg);
  background: white;
  border: 2px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.property-card:hover,
.feature-card:hover,
.testimonial-card:hover,
.flyer-card:hover,
.blog-card__link:hover {
  transform: scale(1.03) translateY(-4px);
  border-color: var(--color-primary);
  box-shadow:
    0 10px 0 color-mix(in srgb, var(--color-primary) 28%, transparent),
    0 20px 44px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.property-image { border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0; overflow: hidden; }
.property-image img { border-radius: 0; }
.property-card:hover .property-image img { transform: scale(1.04); }

.property-info { padding: 22px 24px 24px; }
.property-title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 19px;
  color: var(--color-bg);
  margin-bottom: 8px;
}
.property-price {
  color: var(--color-primary);
  font-weight: 800;
  font-size: 20px;
}

/* Feature card: big colorful icon circle */
.feature-card {
  padding: 32px 28px;
  text-align: center;
}
.feature-card::before {
  display: none;
}
.feature-card:hover {
  background: var(--feature-card-bg);
}
.feature-title {
  color: var(--feature-card-title);
}
.feature-desc {
  color: var(--feature-card-desc);
}
.feature-icon {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: var(--feature-card-icon-bg);
  color: var(--feature-card-icon-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 18px;
  border: 2px solid color-mix(in srgb, var(--feature-card-icon-fg) 28%, transparent);
  transition: var(--transition);
}
.feature-card:hover .feature-icon {
  background: var(--feature-card-icon-hover-bg);
  color: var(--feature-card-icon-hover-fg);
  transform: scale(1.12) rotate(-6deg);
}

/* Testimonial */
.testimonial-card { padding: 30px 26px; }
.author-initials {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: 999px;
  font-family: var(--font-serif);
  font-weight: 800;
}

/* Blog */
.blog-card__link { padding: 0; overflow: hidden; }
.blog-card__title {
  font-family: var(--font-serif);
  font-weight: 800;
}

/* ============================================================
   10) About / CTA
   ============================================================ */
.about-section .about-image,
.why-section .about-image {
  border-radius: var(--radius-lg);
  border: 3px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  box-shadow: var(--shadow-card);
}

.cta-section {
  background: var(--color-primary);
  padding: 90px 0;
}
.cta-section .section-title { color: var(--color-primary-text); }
.cta-section .section-subtitle { color: color-mix(in srgb, var(--color-primary-text) 75%, transparent); }
.cta-section .title-underline { background: var(--color-primary-text); opacity: 0.5; }

/* ============================================================
   11) Contact / Enquire
   ============================================================ */
.contact-section { background: color-mix(in srgb, white 93%, var(--color-primary)); }
.enquire-card,
.contact-card {
  background: white;
  border: 2px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
}
.contact-form input,
.contact-form select,
.contact-form textarea,
.enquire-form input,
.enquire-form select,
.enquire-form textarea {
  border: 2px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: 999px;
  padding: 12px 18px;
  background: white;
  font-family: var(--font-sans);
  font-weight: 600;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.contact-form textarea,
.enquire-form textarea {
  border-radius: var(--radius);
}
.contact-form input:focus,
.contact-form textarea:focus,
.enquire-form input:focus,
.enquire-form textarea:focus {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* ============================================================
   12) Footer — bright palette-surface, friendly columns
   ============================================================ */
.footer {
  background: color-mix(in srgb, var(--color-bg) 94%, var(--color-primary));
  color: color-mix(in srgb, white 70%, transparent);
  border-top: 0;
  padding-top: 72px;
}
.footer-col h4,
.footer-col__title {
  color: white;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.footer a {
  color: color-mix(in srgb, white 65%, transparent);
  font-weight: 500;
  transition: color 0.22s ease;
}
.footer a:hover { color: var(--color-primary); }
.footer .footer-bottom,
.footer .footer__bottom {
  border-top: 1px solid color-mix(in srgb, white 8%, transparent);
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 13px;
}

/* ============================================================
   13) Floating UI — bubbly, rounded, colorful
   ============================================================ */
.scroll-top {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--color-primary) 55%, var(--color-bg));
  transition: var(--transition);
}
.scroll-top:hover { transform: scale(1.1) translateY(-3px); }

.pub-quick-menu .themes-overlay-menu__toggle {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: 999px;
  border: 0;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--color-primary) 55%, var(--color-bg));
}
.pub-quick-menu .themes-overlay-menu__toggle:hover { transform: scale(1.08); }
.pub-quick-menu .themes-overlay-menu__panel {
  background: white;
  border: 2px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--color-primary) 20%, transparent), 0 16px 40px color-mix(in srgb, var(--color-primary) 15%, transparent);
  padding: 10px;
}
.pub-quick-menu .themes-overlay-menu__item {
  border-radius: 12px;
  color: color-mix(in srgb, var(--color-bg) 75%, transparent);
  font-weight: 700;
}
.pub-quick-menu .themes-overlay-menu__item:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, white);
  color: var(--color-primary);
  transform: none;
}

.whatsapp-float { border-radius: 999px; }
.pub-cart-float {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: 999px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--color-primary) 55%, var(--color-bg));
}

/* ============================================================
   14) Popups — rounded cheerful frame
   ============================================================ */
.popup-overlay { background: color-mix(in srgb, var(--color-bg) 65%, transparent); }
.popup-frame,
.popup__panel {
  background: white;
  border: 3px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 0 color-mix(in srgb, var(--color-primary) 25%, transparent), 0 20px 48px color-mix(in srgb, var(--color-bg) 18%, transparent);
}

/* ============================================================
   15) Cart
   ============================================================ */
.pub-cart-drawer,
.cart-drawer {
  background: white;
  border-left: 3px solid var(--color-primary);
}
.cart-item { border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent); }
.cart-item__title { font-family: var(--font-serif); font-weight: 800; }
.cart-item__price { color: var(--color-primary); font-weight: 800; }

/* ============================================================
   16) Responsive
   ============================================================ */
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .section-header { margin-bottom: 40px; }
  .section-title { font-size: clamp(26px, 7vw, 38px); }
  .hero-title    { font-size: clamp(34px, 9vw, 56px); }
  .stat-number   { font-size: clamp(38px, 9vw, 54px); }
  .property-card:hover,
  .feature-card:hover,
  .testimonial-card:hover { transform: scale(1.01); }
}