/* Eternal Excellence Christian Academy - main stylesheet.
   BRAND COLOURS: change the values below to update the whole site. */
:root {
   --blue: #0B3D91;
   --blue-d: #072a66;
   --blue-l: #eaf1fc;
   --red: #D62839;
   --ink: #1b2437;
   --muted: #5b6579
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 76px
}

body {
   font-family: Inter, system-ui, sans-serif;
   color: var(--ink);
   line-height: 1.7;
   padding-top: 0
}

h1,
h2,
h3,
.brand {
   font-family: 'Playfair Display', Georgia, serif;
   color: var(--blue-d)
}

a {
   color: var(--blue)
}

.text-muted {
   color: var(--muted) !important
}

.skip {
   position: absolute;
   left: -999px;
   top: 0;
   background: #fff;
   padding: .5rem 1rem;
   z-index: 2000
}

.skip:focus {
   left: 8px;
   top: 8px
}

.navbar {
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(8px);
   box-shadow: 0 1px 0 #e3e9f4
}

.brand {
   font-weight: 700;
   font-size: 1.15rem;
   color: var(--blue-d);
   text-decoration: none;
   line-height: 1.2
}

.brand small {
   display: block;
   font: 500 .68rem Inter, sans-serif;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--muted)
}

.brand i {
   color: var(--red);
   font-style: normal
}

.nav-link {
   font-weight: 500;
   color: var(--ink)
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
   color: var(--blue)
}

.nav-link.active {
   box-shadow: inset 0 -2px 0 var(--red)
}

.btn-primary {
   --bs-btn-bg: var(--blue);
   --bs-btn-border-color: var(--blue);
   --bs-btn-hover-bg: var(--blue-d);
   --bs-btn-hover-border-color: var(--blue-d);
   --bs-btn-active-bg: var(--blue-d);
   border-radius: 50rem;
   padding: .7rem 1.6rem;
   font-weight: 600
}

.btn-sm {
   padding: .4rem 1.1rem
}

.btn-outline-primary {
   --bs-btn-color: var(--blue);
   --bs-btn-border-color: var(--blue);
   --bs-btn-hover-bg: var(--blue);
   --bs-btn-hover-border-color: var(--blue)
}

.btn-outline-light {
   border-radius: 50rem;
   padding: .7rem 1.6rem;
   font-weight: 600
}

.hero {
   background: linear-gradient(135deg, var(--blue-d), var(--blue) 70%);
   color: #fff;
   padding: 9rem 0 6rem;
   position: relative;
   overflow: hidden;
   background-image: linear-gradient(135deg, rgba(7, 42, 102, .88), rgba(11, 61, 145, .75)), url("../images/hero2.jpg");
   background-size: cover;
}

.hero:after {
   content: "";
   position: absolute;
   right: -120px;
   top: -120px;
   width: 420px;
   height: 420px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .06)
}

.hero h1 {
   color: #fff;
   font-size: clamp(2.2rem, 5vw, 3.4rem);
   line-height: 1.15
}

.hero .lead {
   color: #dbe6fb
}

.page-hero {
   background: linear-gradient(135deg, var(--blue-d), var(--blue));
   padding: 8rem 0 3.5rem;
   color: #fff
}

.page-hero h1 {
   color: #fff;
   font-size: clamp(1.9rem, 4vw, 2.8rem)
}

.eyebrow {
   display: inline-block;
   font-size: .78rem;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--blue)
}

.hero .eyebrow,
.page-hero .eyebrow {
   color: #cfe0ff
}

.eyebrow:before {
   content: "";
   display: inline-block;
   width: 22px;
   height: 3px;
   background: var(--red);
   margin-right: .6rem;
   vertical-align: middle
}

section {
   padding: 5rem 0
}

.bg-soft {
   background: var(--blue-l)
}

.card-x {
   background: #fff;
   border: 1px solid #e3e9f4;
   border-radius: 1rem;
   padding: 1.8rem;
   height: 100%;
   transition: transform .25s, box-shadow .25s
}

.card-x:hover {
   transform: translateY(-4px);
   box-shadow: 0 14px 30px rgba(11, 61, 145, .1)
}

.ico {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: var(--blue-l);
   display: grid;
   place-items: center;
   font-size: 1.5rem;
   margin-bottom: 1rem
}

.stat {
   font: 700 2.2rem 'Playfair Display', serif;
   color: var(--blue)
}

.step {
   position: relative;
   padding-left: 4rem;
   margin-bottom: 2rem
}

.step b {
   position: absolute;
   left: 0;
   top: 0;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--blue);
   color: #fff;
   display: grid;
   place-items: center;
   font-weight: 600
}

.quote footer {
   font-size: .88rem;
   color: var(--muted);
   margin-top: 1rem
}

.accordion-button:not(.collapsed) {
   background: var(--blue-l);
   color: var(--blue-d)
}

.accordion-button:focus {
   box-shadow: 0 0 0 .2rem rgba(11, 61, 145, .25)
}

.cta {
   background: linear-gradient(135deg, var(--blue), var(--blue-d));
   color: #fff;
   text-align: center
}

.cta h2 {
   color: #fff
}

/* Image placeholder: disappears once you replace the slot with a real <img> */
.datebox {
   min-width: 58px;
   text-align: center;
   background: var(--blue);
   color: #fff;
   border-radius: .8rem;
   padding: .4rem .5rem;
   line-height: 1.2
}

.datebox strong {
   display: block;
   font: 700 1.4rem 'Playfair Display', serif
}

.datebox span {
   font-size: .7rem;
   letter-spacing: .1em;
   border-bottom: 2px solid var(--red)
}

.countdown {
   display: flex;
   gap: .6rem;
   flex-wrap: wrap
}

.countdown div {
   background: var(--blue-l);
   border-radius: .7rem;
   padding: .5rem .8rem;
   text-align: center;
   min-width: 64px
}

.countdown b {
   display: block;
   font: 700 1.4rem 'Playfair Display', serif;
   color: var(--blue)
}

.countdown small {
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--muted)
}

.img-slot {
   border: 2px dashed #9db6e3;
   border-radius: 1rem;
   background: #f4f8ff;
   color: var(--muted);
   overflow: hidden
}

.img-slot span {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: .9rem
}

.img-slot img {
   border-radius: 1rem
}

.hero .img-slot {
   background: rgba(255, 255, 255, .1);
   border-color: rgba(255, 255, 255, .5);
   color: #fff
}

footer.site {
   background: #06214f;
   color: #c5d3ef;
   padding: 3.5rem 0 1.5rem
}

footer.site a {
   color: #c5d3ef;
   text-decoration: none
}

footer.site a:hover {
   color: #fff;
   text-decoration: underline
}

footer.site h3 {
   color: #fff;
   font: 600 1rem Inter, sans-serif
}

:focus-visible {
   outline: 3px solid var(--red);
   outline-offset: 2px
}

@media(prefers-reduced-motion:reduce) {
   * {
      transition: none !important;
      scroll-behavior: auto !important
   }
}

/* Navbar dropdowns (About, Curriculum) — themed to match the site's blue/white/rounded look */
.navbar .dropdown-toggle::after {
   vertical-align: .14em;
   border-top-color: var(--ink);
   opacity: .6
}

.navbar .dropdown-toggle.active::after,
.navbar .dropdown-toggle:hover::after {
   border-top-color: var(--blue)
}

.navbar .dropdown-menu {
   border: 1px solid #e3e9f4;
   border-radius: .9rem;
   box-shadow: 0 14px 30px rgba(11, 61, 145, .14);
   padding: .5rem;
   margin-top: .5rem
}

.navbar .dropdown-item {
   border-radius: .6rem;
   padding: .55rem .9rem;
   font-weight: 500;
   color: var(--ink)
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
   background: var(--blue-l);
   color: var(--blue-d)
}

.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
   background: var(--blue);
   color: #fff
}

@media(min-width:992px) {
   .navbar .dropdown:hover>.dropdown-menu {
      display: block
   }
}