/* ==========================================================================
   BOULDERS PRE-SCHOOL DESIGN THEME FOR SMARTSCHOOLHUB PUBLIC SITE
   Safe Theme Extension Layer - Easy 1-Click Rollback
   ========================================================================== */

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

:root {
  --boulders-amber: #F59E0B;
  --boulders-amber-dark: #D97706;
  --boulders-amber-light: #FEF3C7;
  --boulders-navy: #0F172A;
  --boulders-navy-light: #1E3A8A;
  --boulders-emerald: #059669;
  --boulders-emerald-light: #D1FAE5;
  --boulders-warm-bg: #FAF8F5;
  --boulders-card-bg: #FFFFFF;
  --boulders-text: #0F172A;
  --boulders-text-muted: #475569;
  --boulders-border: #E2E8F0;
  --boulders-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --boulders-radius: 16px;
}

body {
  background-color: var(--boulders-warm-bg) !important;
  color: var(--boulders-text) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

h1, h2, h3, h4, h5, h6, .site-title {
  font-family: 'Nunito', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--boulders-navy) !important;
}

/* --------------------------------------------------------------------------
   1. TOP CONTACT & HOURS BAR
   -------------------------------------------------------------------------- */
.top-bar {
  background-color: var(--boulders-navy) !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar a {
  color: #FFFFFF !important;
  transition: color 150ms ease;
}

.top-bar a:hover {
  color: var(--boulders-amber) !important;
  text-decoration: none;
}

.top-bar i {
  color: var(--boulders-amber) !important;
  margin-right: 6px;
}

/* --------------------------------------------------------------------------
   2. STICKY NAVIGATION HEADER & VISIBLE MENU LINKS
   -------------------------------------------------------------------------- */
.main-header .stricky, .stricky {
  background-color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.06) !important;
  border-bottom: 3px solid var(--boulders-amber) !important;
}

.navbar-nav .nav-item a,
.navbar-nav .nav-item .nav-link,
.navbar-style3 .nav-item .nav-link,
.navbar-style3 li a,
.header .navbar .navbar-nav .nav-item a,
.sticky .navbar .navbar-nav .nav-item a,
#mainNav ul li a,
#navbarSupportedContent ul li a {
  color: #0F172A !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 10px 16px !important;
  transition: color 150ms ease !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.navbar-nav .nav-item a:hover,
.navbar-nav .nav-item .nav-link:hover,
.navbar-style3 .nav-item .nav-link:hover,
.navbar-style3 li a:hover,
.header .navbar .navbar-nav .nav-item a:hover,
.sticky .navbar .navbar-nav .nav-item a:hover,
#mainNav ul li a:hover,
#navbarSupportedContent ul li a:hover,
.navbar-style3 .nav-item.active .nav-link {
  color: var(--boulders-amber) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.navbar-style3 .btn-black, .btn-theme {
  background-color: var(--boulders-amber) !important;
  border-color: var(--boulders-amber) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 50px !important;
  padding: 8px 24px !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
  transition: all 200ms ease !important;
}

.navbar-style3 .btn-black:hover, .btn-theme:hover {
  background-color: var(--boulders-amber-dark) !important;
  border-color: var(--boulders-amber-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4) !important;
}

/* --------------------------------------------------------------------------
   3. LATEST NEWS TICKER BAR
   -------------------------------------------------------------------------- */
.latest--news {
  background: linear-gradient(90deg, var(--boulders-navy-light) 0%, var(--boulders-navy) 100%) !important;
  padding: 8px 0 !important;
}

.latest-title {
  background-color: var(--boulders-amber) !important;
  border-radius: 30px !important;
  padding: 4px 16px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* --------------------------------------------------------------------------
   4. FEATURE CARDS & SERVICES GRID
   -------------------------------------------------------------------------- */
.card, .service-box, .feature-box, .box-item, .panel-group .panel {
  background-color: var(--boulders-card-bg) !important;
  border: 1px solid var(--boulders-border) !important;
  border-radius: var(--boulders-radius) !important;
  box-shadow: var(--boulders-shadow) !important;
  transition: transform 200ms ease, box-shadow 200ms ease !important;
  margin-bottom: 24px;
}

.card:hover, .service-box:hover, .feature-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 30px -5px rgba(15, 23, 42, 0.12) !important;
}

.icon-box, .service-icon {
  background-color: var(--boulders-amber-light) !important;
  color: var(--boulders-amber-dark) !important;
  border-radius: 12px !important;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   5. FOOTER & COPYRIGHT
   -------------------------------------------------------------------------- */
footer, .footer {
  background-color: var(--boulders-navy) !important;
  color: #CBD5E1 !important;
  padding-top: 60px !important;
  border-top: 4px solid var(--boulders-amber) !important;
}

footer h4, footer h5, .footer-title {
  color: #FFFFFF !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  position: relative;
}

footer h4::after, footer h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 40px;
  height: 3px;
  background-color: var(--boulders-amber);
  border-radius: 2px;
}

footer a {
  color: #CBD5E1 !important;
  transition: color 150ms ease;
}

footer a:hover {
  color: var(--boulders-amber) !important;
  text-decoration: none;
}

.copyright {
  background-color: #0B0F19 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 20px 0 !important;
  color: #94A3B8 !important;
  font-size: 14px !important;
}