/* =====================================================================
   ACES Nursery, Primary & Secondary School
   Site-specific overrides layered on top of style.css
   Palette taken from the school website content document:
     navy   #14365C   teal   #1B7A6E   gold  #D4A017
     blue   #3D7CC9   purple #7B68C4
   ===================================================================== */

:root {
    --aces-navy: #14365C;
    --aces-navy-dark: #0E2743;
    --aces-teal: #1B7A6E;
    --aces-gold: #D4A017;
    --aces-blue: #3D7CC9;
    --aces-purple: #7B68C4;
    --aces-ink: #4a5568;
    --aces-line: #e4e9f0;
}

/* ---------- Logo lockup ------------------------------------------- */
.aces-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* The crest sits in generous whitespace, so let it overflow the header
       band rather than shrinking it to fit. */
    margin: -18px 0;
}

.aces-logo-mark {
    width: auto;
    height: 108px;
    max-width: 100%;
    flex: 0 0 auto;
}

@media (max-width: 991px) {
    .aces-logo { margin: -10px 0; }
    .aces-logo-mark { height: 78px; }
}

@media (max-width: 575px) {
    .aces-logo-mark { height: 64px; }
}

/* ---------- Navbar fit ---------------------------------------------- */
/* The template was built for a 5-item menu; ACES has 7 plus the Apply Now
   button. At the stock 25px side margins and 16px links the row needs roughly
   930px but only has about 760px, so Contact and the button wrapped. Tighten
   the spacing and forbid wrapping outright, desktop only — the mobile menu is
   a stacked dropdown and must keep the template's own rules. */
@media (min-width: 992px) {
    .navbar-nav {
        flex-wrap: nowrap;
    }

    .navbar-nav li {
        margin: 0 13px;
    }

    .navbar-nav > li > a {
        font-size: 15px;
        white-space: nowrap;
    }

    /* Dropdown children are stacked, so they keep their own width. */
    .navbar-nav li ul li a {
        white-space: normal;
    }

    .nav-btn .def-btn {
        padding: 0 24px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* Between 992px and 1199px the container loses ~180px, so tighten further. */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-nav li {
        margin: 0 8px;
    }

    .navbar-nav > li > a {
        font-size: 13px;
        letter-spacing: -0.2px;
    }

    .nav-btn .def-btn {
        padding: 0 15px;
        font-size: 12px;
    }
}

/* ---------- Eyebrow label above section titles --------------------- */
.aces-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--aces-gold);
    margin-bottom: 14px;
}

.aces-eyebrow.on-dark { color: #F0C75E; }

/* ---------- Fact strip (Est. / accreditation quick facts) ---------- */
.aces-facts {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(20, 54, 92, 0.12);
    overflow: hidden;
}

.aces-fact {
    padding: 34px 26px;
    text-align: center;
    border-right: 1px solid var(--aces-line);
    height: 100%;
}

.aces-fact:last-child { border-right: 0; }

.aces-fact-value {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: var(--aces-navy);
    display: block;
    margin-bottom: 6px;
}

.aces-fact-label {
    font-size: 14px;
    color: var(--aces-ink);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .aces-fact { border-right: 0; border-bottom: 1px solid var(--aces-line); }
}

/* ---------- Core values row ---------------------------------------- */
.aces-value {
    padding: 42px 18px;
    text-align: center;
    color: #fff;
    height: 100%;
    transition: transform 0.3s ease;
}

.aces-value:hover { transform: translateY(-6px); }

.aces-value i {
    font-size: 34px;
    display: block;
    margin-bottom: 16px;
}

.aces-value h4 {
    color: #fff;
    font-size: 19px;
    margin: 0 0 8px;
}

.aces-value p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

.aces-value-1 { background: var(--aces-navy); }
.aces-value-2 { background: var(--aces-teal); }
.aces-value-3 { background: var(--aces-gold); }
.aces-value-3 h4, .aces-value-3 i { color: var(--aces-navy); }
.aces-value-3 p { color: rgba(20, 54, 92, 0.8); }
.aces-value-4 { background: var(--aces-blue); }
.aces-value-5 { background: var(--aces-purple); }

/* ---------- School section cards (Creche / Nursery / ...) ---------- */
.aces-stage {
    position: relative;
    display: block;
    padding: 40px 30px;
    border-radius: 12px;
    color: #fff;
    height: 100%;
    text-decoration: none;
    overflow: hidden;
}

.aces-stage span {
    display: block;
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.aces-stage h3 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 12px;
}

.aces-stage p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    margin: 0;
    line-height: 1.65;
}

.aces-stage-1 { background: var(--aces-navy); }
.aces-stage-2 { background: var(--aces-teal); }
.aces-stage-3 { background: var(--aces-gold); }
.aces-stage-3 h3, .aces-stage-3 span { color: var(--aces-navy); }
.aces-stage-3 p { color: rgba(20, 54, 92, 0.82); }
.aces-stage-4 { background: var(--aces-blue); }

/* ---------- Facility card grid ------------------------------------- */
.aces-facility {
    background: #fff;
    border: 1px solid var(--aces-line);
    border-radius: 12px;
    padding: 34px 30px;
    height: 100%;
    transition: all 0.3s ease;
}

.aces-facility:hover {
    border-color: transparent;
    box-shadow: 0 20px 45px rgba(20, 54, 92, 0.13);
    transform: translateY(-5px);
}

.aces-facility-icon {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    margin-bottom: 22px;
    background: var(--aces-teal);
}

/* Each card is the only child of its Bootstrap column, so the cycle has to be
   driven from the column, not the card. */
.row > [class*="col-"]:nth-child(4n+1) .aces-facility-icon { background: var(--aces-navy); }
.row > [class*="col-"]:nth-child(4n+2) .aces-facility-icon { background: var(--aces-teal); }
.row > [class*="col-"]:nth-child(4n+3) .aces-facility-icon { background: var(--aces-gold); color: var(--aces-navy); }
.row > [class*="col-"]:nth-child(4n+4) .aces-facility-icon { background: var(--aces-blue); }

.aces-facility h3 {
    font-size: 19px;
    margin: 0 0 12px;
    color: var(--aces-navy);
}

.aces-facility p {
    font-size: 15px;
    margin: 0;
    line-height: 1.7;
}

/* ---------- Numbered admission steps -------------------------------- */
.aces-step {
    display: flex;
    gap: 24px;
    padding: 30px 0;
    border-bottom: 1px solid var(--aces-line);
}

/* A trailing note follows the fifth step, so :last-child would miss it. */
.aces-step:last-child,
.aces-step:nth-child(5) { border-bottom: 0; }

.aces-step-no {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--aces-navy);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aces-step:nth-child(2) .aces-step-no { background: var(--aces-teal); }
.aces-step:nth-child(3) .aces-step-no { background: var(--aces-gold); color: var(--aces-navy); }
.aces-step:nth-child(4) .aces-step-no { background: var(--aces-blue); }
.aces-step:nth-child(5) .aces-step-no { background: var(--aces-purple); }

.aces-step h3 {
    font-size: 20px;
    margin: 6px 0 10px;
    color: var(--aces-navy);
}

.aces-step p { margin: 0; line-height: 1.75; }

/* ---------- Data table (board, management, contact) ---------------- */
.aces-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--aces-line);
    border-radius: 10px;
    overflow: hidden;
}

.aces-table thead th {
    background: var(--aces-navy);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 16px 22px;
    text-align: left;
}

.aces-table.teal thead th { background: var(--aces-teal); }

.aces-table td {
    padding: 16px 22px;
    border-top: 1px solid var(--aces-line);
    font-size: 15px;
    color: var(--aces-ink);
    vertical-align: top;
}

.aces-table tbody tr:nth-child(odd) { background: #f7f9fc; }

.aces-table td:first-child {
    font-weight: 600;
    color: var(--aces-navy);
    white-space: nowrap;
}

.aces-table-scroll { overflow-x: auto; }

/* ---------- FAQ accordion ------------------------------------------ */
.aces-faq .accordion-item {
    border: 1px solid var(--aces-line);
    border-radius: 10px !important;
    margin-bottom: 16px;
    overflow: hidden;
    background: #fff;
}

.aces-faq .accordion-button {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--aces-navy);
    padding: 22px 26px;
    background: #fff;
    box-shadow: none;
    line-height: 1.5;
}

.aces-faq .accordion-button:not(.collapsed) {
    background: #f4f8fb;
    color: var(--aces-teal);
}

.aces-faq .accordion-button:focus {
    box-shadow: none;
    border-color: var(--aces-line);
}

.aces-faq .accordion-button::after {
    background-image: none;
    content: "\efc2"; /* icofont-plus */
    font-family: 'IcoFont';
    font-size: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--aces-gold);
    color: var(--aces-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    flex: 0 0 30px;
}

.aces-faq .accordion-button:not(.collapsed)::after {
    content: "\ef9a"; /* icofont-minus */
    background: var(--aces-teal);
    color: #fff;
    transform: none;
}

.aces-faq .accordion-number {
    display: inline-block;
    min-width: 34px;
    color: var(--aces-gold);
    font-weight: 700;
}

.aces-faq .accordion-body {
    padding: 4px 26px 26px 60px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--aces-ink);
}

@media (max-width: 575px) {
    .aces-faq .accordion-body { padding-left: 26px; }
}

/* ---------- Achievement highlight tiles ---------------------------- */
.aces-result {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 32px 26px;
    height: 100%;
}

.aces-result strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    line-height: 1;
    color: #F0C75E;
    margin-bottom: 12px;
}

.aces-result span {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 6px;
}

.aces-result p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    margin: 0;
}

/* ---------- Photo panels ------------------------------------------- */
.aces-photo {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(20, 54, 92, 0.16);
}

.aces-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.aces-photo-tall { aspect-ratio: 3 / 4; }
.aces-photo-wide { aspect-ratio: 4 / 3; }

/* ---------- Section backgrounds ------------------------------------ */
.aces-bg-navy { background: var(--aces-navy); }
.aces-bg-tint { background: #f5f8fb; }

.aces-bg-navy .section-title,
.aces-bg-navy h2,
.aces-bg-navy h3 { color: #fff; }

.aces-bg-navy p { color: rgba(255, 255, 255, 0.8); }

/* ---------- Checklist ---------------------------------------------- */
.aces-check {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aces-check li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 15px;
    line-height: 1.75;
    color: var(--aces-ink);
}

.aces-check li:last-child { margin-bottom: 0; }

.aces-check li::before {
    content: "\eed6"; /* icofont-check-alt */
    font-family: 'IcoFont';
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--aces-teal);
    font-size: 18px;
}

.aces-bg-navy .aces-check li { color: rgba(255, 255, 255, 0.85); }
.aces-bg-navy .aces-check li::before { color: var(--aces-gold); }

/* ---------- Contact channel rows ------------------------------------ */
.aces-channel {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--aces-line);
}

.aces-channel:last-child { border-bottom: 0; }

.aces-channel i {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #f0f5fa;
    color: var(--aces-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.aces-channel h4 {
    font-size: 16px;
    margin: 0 0 5px;
    color: var(--aces-navy);
}

.aces-channel p, .aces-channel a {
    margin: 0;
    font-size: 15px;
    color: var(--aces-ink);
    line-height: 1.7;
    display: block;
    text-decoration: none;
}

.aces-channel a:hover { color: var(--aces-teal); }

/* ---------- Hero / page banner -------------------------------------- */
.aces-hero {
    position: relative;
    background: var(--aces-navy) center center / cover no-repeat;
    padding: 190px 0 170px;
    overflow: hidden;
}

.aces-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(14, 39, 67, 0.93) 0%, rgba(20, 54, 92, 0.82) 45%, rgba(27, 122, 110, 0.55) 100%);
}

.aces-hero .container { position: relative; z-index: 2; }

.aces-hero-title {
    color: #fff;
    font-size: 58px;
    line-height: 1.16;
    margin: 0 0 22px;
}

.aces-hero p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
    max-width: 620px;
}

.aces-hero .def-btn { margin-right: 14px; }

/* Inner-page banner: shorter version of the hero */
.aces-page-banner { padding: 150px 0 130px; }

.aces-page-banner .aces-hero-title { font-size: 46px; margin-bottom: 14px; }

.aces-crumb { color: rgba(255, 255, 255, 0.75); font-size: 15px; }
.aces-crumb a { color: #F0C75E; text-decoration: none; }
.aces-crumb a:hover { color: #fff; }
.aces-crumb i { font-size: 12px; margin: 0 8px; }

@media (max-width: 991px) {
    .aces-hero { padding: 140px 0 120px; }
    .aces-hero-title { font-size: 40px; }
    .aces-page-banner { padding: 120px 0 100px; }
    .aces-page-banner .aces-hero-title { font-size: 34px; }
}

@media (max-width: 575px) {
    .aces-hero-title { font-size: 32px; }
    .aces-hero p { font-size: 16px; }
}

/* ---------- Footer background ---------------------------------------- */
/* The template shipped its own footer-bg.jpg. Swap in the campus, but keep a
   heavy navy wash over it: the footer copy is white, and the source is a bright
   daylight photo. The wash deepens toward the bottom so the links stay legible
   where the text is densest. */
.footer {
    background:
        linear-gradient(rgba(20, 54, 92, 0.90) 0%, rgba(14, 39, 67, 0.96) 100%),
        url(../images/aces/campus-front.jpg) center 30% / cover no-repeat;
}

/* The source is a 720x1080 portrait phone shot, so on a wide viewport it is
   cropped to a band across the middle of the building. Anchoring at 30% keeps
   the building in frame rather than the empty pitch below it. */

/* ---------- Embedded map --------------------------------------------- */
.aces-map {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(20, 54, 92, 0.16);
    line-height: 0;
}

@media (max-width: 767px) {
    .aces-map iframe { height: 340px; }
}

/* ---------- Utility -------------------------------------------------- */
.aces-lead {
    font-size: 18px;
    line-height: 1.85;
}

.aces-rule {
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background: var(--aces-gold);
    margin-bottom: 26px;
}

.aces-rule.center { margin-left: auto; margin-right: auto; }