/*=====================================================
ST ANNE — SHARED COMPONENTS

Many sections referenced stylesheets that were never
created (about.css, academics.css, contact.css,
gallery.css, pre-primary.css, primary.css), so their
components rendered unstyled and every page looked
slightly different.

This file gives them ONE consistent system:
  - the same card (white, hairline border, soft shadow)
  - the same icon treatment (navy disc, amber glyph)
  - the same section rhythm and heading colour
=====================================================*/

:root{
    --c-navy:#0B2E6B;
    --c-navy-soft:#123f8c;
    --c-amber:#F5A623;
    --c-ink:#5a6474;
    --c-line:#e8ecf2;
    --c-card-radius:14px;
    --c-shadow:0 2px 14px rgba(11,46,107,.06);
    --c-shadow-hover:0 10px 28px rgba(11,46,107,.12);
}

/*--------------------------------------------
 1. SECTION RHYTHM
--------------------------------------------*/

.about-school,
.statistics,
.transport-intro,
.programme-intro,
.primary-intro,
.gallery-intro,
.gallery-grid,
.highlights,
.benefits-section,
.activities-section,
.boarding-intro,
.boarding-highlights,
.boarding-gallery,
.boarding-promise,
.fee-section,
.other-fees,
.admission-process,
.contact-cards,
.social-media,
.office-hours,
.why-stanne,
.looking-ahead,
.academic-philosophy,
.learning-journey{

    padding:var(--space-lg) 0;

}

.about-school h2,
.transport-intro h2,
.programme-intro h2,
.gallery-intro h2,
.highlights h2,
.benefits-section h2,
.boarding-intro h2,
.fee-section h2,
.contact-info h2,
.why-stanne h2,
.looking-ahead h2,
.academic-philosophy h2{

    color:var(--c-navy);

}

/*--------------------------------------------
 2. THE SHARED CARD
--------------------------------------------*/

.benefit-card,
.boarding-box,
.charge-card,
.fee-card,
.contact-card,
.location-card,
.map-card,
.social-card,
.highlight-card,
.stat-card,
.info-item{

    background:#fff;
    border:1px solid var(--c-line);
    border-radius:var(--c-card-radius);
    box-shadow:var(--c-shadow);
    padding:26px 24px;
    height:100%;
    display:flex;
    flex-direction:column;
    transition:transform .25s ease, box-shadow .25s ease;

}

.benefit-card:hover,
.boarding-box:hover,
.charge-card:hover,
.fee-card:hover,
.contact-card:hover,
.social-card:hover,
.stat-card:hover{

    transform:translateY(-4px);
    box-shadow:var(--c-shadow-hover);

}

.benefit-card h3, .benefit-card h4,
.boarding-box h3, .boarding-box h4,
.charge-card h4, .fee-card h4,
.contact-card h4, .location-card h4,
.social-card h4, .info-item h4{

    color:var(--c-navy);
    margin:0 0 10px;

}

.benefit-card p, .boarding-box p, .charge-card p,
.fee-card p, .contact-card p, .location-card p,
.social-card p, .info-item p{

    color:var(--c-ink);
    margin-bottom:0;

}

/*  .info-item's markup is <i> followed by a <div><h5>+<p></div> - a glyph
    BESIDE a text block, not above it. It was swept into the generic card group
    above, whose flex-direction:column stacked the icon on top of the heading
    and left it at default body size and colour, so it rendered as a tiny grey
    mark jammed against the title. Restore the intended row and give the glyph
    the same navy disc / amber icon treatment used everywhere else. */
.info-item{

    flex-direction:row;
    align-items:flex-start;
    gap:16px;

}

.info-item>i{

    flex:0 0 44px;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--c-navy);
    color:var(--c-amber);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    margin-top:2px;

}

/* The headings inside .info-item are <h5>, which the h4 rule above never hit. */
.info-item h5{

    color:var(--c-navy);
    font-weight:700;
    margin:0 0 8px;

}

/*  .contact-info is a plain wrapper <div> inside the left column, but it was
    listed with the page SECTIONS above and so inherited `padding: var(--space-lg) 0`.
    That injected ~100px of empty space between the "Contact Information"
    heading and the first card, and again below the last one. It only needs a
    normal gap. */
.contact-info{

    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:26px;

}

/*  height:100% comes from the shared card rule and made each stacked item
    fight for the container height; in a flex column they should size to
    their own content. */
.contact-info>.info-item{

    height:auto;

}

/*  Every card type below writes its glyph as a bare <i> as the card's first
    child. Nothing styled it, so it inherited body text - a ~14px grey mark
    squashed against the heading with no spacing (visible on the fees page
    "Application Form" / "Admission Fee" / "Payment Options" cards). These are
    the SAME cards whose wrapped-icon variants elsewhere get a navy disc, so
    the page looked half-finished. One rule gives the bare form the identical
    treatment, so a card renders correctly whether or not the author wrapped
    the icon. */
.benefit-card>i:first-child,
.boarding-box>i:first-child,
.charge-card>i:first-child,
.fee-card>i:first-child,
.contact-card>i:first-child,
.location-card>i:first-child,
.social-card>i:first-child,
.highlight-card>i:first-child,
.stat-card>i:first-child{

    flex:0 0 auto;
    align-self:flex-start;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--c-navy);
    color:var(--c-amber);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    line-height:1;
    margin:0 0 18px;

}

/*  Centred card variants need the disc centred too, otherwise it hangs left
    of text that is centred. */
.text-center .benefit-card>i:first-child,
.text-center .charge-card>i:first-child,
.text-center .stat-card>i:first-child,
.benefit-card.text-center>i:first-child,
.charge-card.text-center>i:first-child,
.stat-card.text-center>i:first-child{

    align-self:center;

}

/*  Same problem on section headings that lead with a loose icon (the fees
    page "Download the Official Fee Structure" block). Give it real size and
    the brand amber instead of leaving it as a stray grey speck. */
.fee-download>.container>i,
.fee-download .container>i:first-child{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    border-radius:50%;
    background:var(--c-navy);
    color:var(--c-amber);
    font-size:22px;
    margin-bottom:16px;

}

/*--------------------------------------------
 3. ICONS — navy disc, amber glyph
--------------------------------------------*/

.benefit-card i,
.boarding-box > i,
.contact-card i,
.social-card i,
.highlight-icon,
.journey-icon,
.office-clock{

    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--c-navy);
    color:var(--c-amber);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-bottom:16px;
    flex:0 0 auto;

}

/*--------------------------------------------
 4. ABOUT SECTION  (redesigned)
--------------------------------------------*/

.about-school .about-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;

}

.about-image img{

    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:16px;
    display:block;
    box-shadow:0 14px 34px rgba(11,46,107,.16);

}

.about-content h1,
.about-content h2{

    color:var(--c-navy);
    margin:12px 0 18px;

}

.about-content p{

    color:var(--c-ink);
    max-width:60ch;

}

/* the tick list */

.about-features{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 24px;
    margin:26px 0 30px;

}

.about-features .feature,
.feature{

    display:flex;
    align-items:flex-start;
    gap:10px;
    font-weight:600;
    color:var(--c-navy);
    font-size:15px;
    line-height:1.5;

}

.about-features .feature i,
.feature i{

    color:var(--c-amber);
    font-size:16px;
    margin-top:3px;
    flex:0 0 16px;

}

/*--------------------------------------------
 5. STATISTICS BAND
--------------------------------------------*/

.statistics{

    background:var(--c-navy);

}

.statistics .stats-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;

}

.statistics .stat-card{

    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:none;
    text-align:center;
    align-items:center;
    justify-content:center;

}

.statistics .stat-card:hover{

    background:rgba(255,255,255,.1);
    transform:none;
    box-shadow:none;

}

.statistics .stat-card h2{

    color:var(--c-amber);
    margin:0 0 4px;
    font-size:clamp(28px, 2.6vw + 18px, 40px);

}

.statistics .stat-card p{

    color:rgba(255,255,255,.8);
    margin:0;
    font-size:15px;

}

/*--------------------------------------------
 6. GALLERY CARDS  (gallery + boarding)
--------------------------------------------*/

.gallery-card{

    position:relative;
    border-radius:var(--c-card-radius);
    overflow:hidden;
    height:100%;
    box-shadow:var(--c-shadow);

}

.gallery-card img{

    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    display:block;
    transition:transform .45s ease;

}

.gallery-card:hover img{ transform:scale(1.06); }

.gallery-overlay{

    position:absolute;
    inset:auto 0 0 0;
    padding:34px 18px 16px;
    background:linear-gradient(to top, rgba(11,46,107,.88), transparent);
    color:#fff;

}

.gallery-overlay h5{

    margin:0;
    color:#fff;
    font-size:16px;
    font-weight:600;

}

/*--------------------------------------------
 7. SIMPLE INTRO SECTIONS
    (clubs, sports, transport, programmes)
--------------------------------------------*/

.transport-intro h1,
.programme-intro h1,
.primary-intro h1,
.transport-intro h2,
.programme-intro h2{

    color:var(--c-navy);

}

.transport-intro p,
.programme-intro p,
.primary-intro p{

    color:var(--c-ink);
    max-width:68ch;

}

/*--------------------------------------------
 8. NUMBERED PROCESS / JOURNEY
--------------------------------------------*/

.process-number,
.journey-number{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--c-amber);
    color:var(--c-navy);
    font-weight:700;
    margin-bottom:14px;

}

/*--------------------------------------------
 9. CALL TO ACTION BANDS
--------------------------------------------*/

.cta-section,
.boarding-cta,
.fee-cta,
.contact-cta,
.story-cta{

    background:var(--c-navy);
    color:#fff;
    padding:var(--space-lg) 0;
    text-align:center;

}

.cta-section h2, .boarding-cta h2, .fee-cta h2,
.contact-cta h2, .story-cta h2{

    color:#fff;

}

.cta-section p, .boarding-cta p, .fee-cta p,
.contact-cta p, .story-cta p{

    color:rgba(255,255,255,.82);
    max-width:60ch;
    margin-inline:auto;

}

/*--------------------------------------------
 10. TABLES (fees, office hours)
--------------------------------------------*/

.fee-table,
.hours-table{

    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:var(--c-card-radius);
    overflow:hidden;
    box-shadow:var(--c-shadow);

}

.fee-table th, .hours-table th{

    background:var(--c-navy);
    color:#fff;
    text-align:left;
    padding:14px 16px;
    font-size:14px;
    letter-spacing:.04em;
    text-transform:uppercase;

}

.fee-table td, .hours-table td{

    padding:13px 16px;
    border-bottom:1px solid var(--c-line);
    color:var(--c-ink);

}

.fee-table tr:last-child td,
.hours-table tr:last-child td{ border-bottom:0; }

/*--------------------------------------------
 11. RESPONSIVE
--------------------------------------------*/

@media (max-width:991px){

    .about-school .about-grid{

        grid-template-columns:1fr;
        gap:32px;

    }

    .statistics .stats-grid{ grid-template-columns:repeat(2,1fr); }

}

@media (max-width:575px){

    .about-features{ grid-template-columns:1fr; }

    .statistics .stats-grid{ grid-template-columns:1fr; }

}

/*--------------------------------------------
 12. BARE .btn
 Bootstrap's .btn on its own has padding but no
 colour, so links written as class="btn" rendered
 as plain bold text. Give them the school button.
 Variant classes (.btn-primary, .btn-outline-light,
 .btn-warning) are untouched.
--------------------------------------------*/

.btn:not([class*="btn-"]){

    background:var(--c-amber);
    color:var(--c-navy);
    font-weight:700;
    border:0;
    border-radius:30px;
    padding:12px 30px;
    display:inline-block;
    transition:background .25s ease, transform .2s ease;

}

.btn:not([class*="btn-"]):hover{

    background:var(--c-navy);
    color:#fff;
    transform:translateY(-2px);

}

/*  .btn-outline is not a Bootstrap class (only .btn-outline-* are),
    so links using it were unstyled too. */

.btn-outline{

    background:transparent;
    color:var(--c-navy);
    border:2px solid var(--c-navy);
    font-weight:700;
    border-radius:30px;
    padding:10px 28px;
    display:inline-block;
    transition:.25s ease;

}

.btn-outline:hover{

    background:var(--c-navy);
    color:#fff;

}

/*--------------------------------------------
 13. REMAINING PAGE-SPECIFIC PIECES
 Found by auditing each page for classes used in
 markup that had no rule anywhere.
--------------------------------------------*/

/* our-story: banner over a photo */

.story-banner{

    position:relative;
    border-radius:16px;
    overflow:hidden;
    min-height:320px;
    display:flex;
    align-items:center;

}

.story-banner img{

    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;

}

.banner-overlay{

    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(11,46,107,.9), rgba(11,46,107,.45));

}

.banner-content{

    position:relative;
    z-index:2;
    color:#fff;
    padding:44px;
    max-width:60ch;

}

.banner-content h2,
.banner-content h3{ color:#fff; }

.banner-content p{ color:rgba(255,255,255,.88); margin-bottom:0; }

/* contact page */

/*  .contact-details is the <section> wrapping BOTH columns, not a card. Giving
    it the card treatment painted a giant white slab around the whole block, so
    the natural height difference between the info column and the shorter form
    read as a huge empty void inside a panel. Only the real cards get card
    styling; the section is just a section. */
.contact-form,
.school-map{

    background:#fff;
    border:1px solid var(--c-line);
    border-radius:var(--c-card-radius);
    box-shadow:var(--c-shadow);
    padding:28px;

}

/*  The info column runs ~700px tall while the form card is ~490px, so with the
    default stretch alignment the form sat at the top of its column and left a
    ~500px dead void beneath it. Centring the form against the taller column
    splits that space evenly above and below, so the two columns read as a
    balanced pair instead of one short block with a hole under it.
    (Scoped to this row only - the global .row stretch stays as-is, since that
    is what keeps every card grid on the site equal-height.) */
@media(min-width:992px){

    .contact-details>.container>.row{

        align-items:center;

    }

}

.contact-form .form-control,
.contact-form textarea{

    border:1px solid #d7dde7;
    border-radius:10px;
    padding:12px 14px;
    margin-bottom:14px;
    width:100%;

}

.contact-form .form-control:focus{

    border-color:var(--c-navy);
    outline:none;
    box-shadow:0 0 0 3px rgba(11,46,107,.10);

}

.school-map iframe{

    width:100%;
    min-height:320px;
    border:0;
    border-radius:10px;
    display:block;

}

/* social brand accents (icons come from Font Awesome) */

.whatsapp{ color:#25D366; }
.instagram{ color:#E1306C; }

.social-card .whatsapp,
.social-card .instagram{

    background:var(--c-navy);
    color:var(--c-amber);

}

/* fees */

.fee-intro,
.fee-download{

    background:#fff;
    border:1px solid var(--c-line);
    border-radius:var(--c-card-radius);
    box-shadow:var(--c-shadow);
    padding:26px;

}

.fee-image img{

    width:100%;
    border-radius:var(--c-card-radius);
    display:block;

}

/* co-curricular */

.activity-row{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:44px;
    align-items:center;
    margin-bottom:52px;

}

.activity-row img{

    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:var(--c-card-radius);
    display:block;

}

.activity-row h3{ color:var(--c-navy); }

/* pre-primary learning journey */

.journey-wrapper{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:26px;
    position:relative;

}

.journey-badge{

    display:inline-block;
    background:var(--c-amber);
    color:var(--c-navy);
    font-weight:700;
    font-size:13px;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:20px;
    margin-bottom:12px;

}

.journey-line{ display:none; }   /* decorative connector, hidden on small grids */

.featured{ position:relative; }

/* transport / generic CTA content */

.cta-content{

    max-width:60ch;
    margin-inline:auto;

}

/* calendar tab panels */

.tab-content{ padding-top:18px; }

/* homepage counters */

.counter{ text-align:center; }

.counter h2,
.counter .counter-number{

    color:var(--c-amber);
    margin-bottom:2px;

}

/*  The gold divider is a block element with no horizontal margin, so it
    left-aligned even inside centre-aligned cards. Centre it wherever its
    container centres its text; left-aligned contexts are unaffected. */

.text-center .gold-line,
.why-card .gold-line,
.vm-card .gold-line,
.benefit-card .gold-line,
.stat-card .gold-line{

    margin-inline:auto;

}