/* =========================================================
   brand.css  -  Raatapur Basic School colours
   Taken from the school building: deep navy (doors, railings,
   sign lettering), pale cream-yellow (walls), plus a warm gold
   accent made from the wall colour.
   Load this AFTER index.css and pages.css.
========================================================= */

:root {
    --navy: #0B2955;        /* doors, railings, water drums   */
    --blue: #1B4085;        /* lettering on the school sign   */
    --cream: #F4E9B8;      /* building walls                 */
    --cream-light: #FBF6DD;
    --gold: #E3B93C;        /* accent: buttons and highlights */
    --gold-dark: #CFA52A;
}

/* ---------- header and navigation ---------- */
.header {
    border-bottom: 4px solid var(--gold);
}

.school-name h1 {
    color: var(--blue);
}

.navbar {
    background: linear-gradient(90deg, var(--navy), var(--blue));
}

.nav-container a:hover {
    color: var(--navy);
}

.nav-container a::after {
    background: var(--gold);
}

/* ---------- hero ---------- */
.hero-button {
    background: var(--gold);
    color: var(--navy);
}

.hero-button:hover {
    background: var(--gold-dark);
}

/* ---------- sections ---------- */
.section-title h2 {
    color: var(--navy);
}

.notice-card {
    border-left-color: var(--blue);
}

.notice-date {
    background: var(--cream);
    color: var(--navy);
}

.notice-card a {
    color: var(--blue);
}

.about-section,
.why-section {
    background: var(--cream-light);
}

.small-title {
    color: var(--blue);
}

.about-content h2,
.feature-card h3,
.contact-box h3 {
    color: var(--navy);
}

.read-more {
    background: var(--blue);
    color: #ffffff;
}

.read-more:hover {
    background: var(--navy);
}

.event-date {
    background: var(--navy);
}

.contact-box {
    background: var(--cream-light);
}

/* ---------- footer ---------- */
.footer {
    background: var(--navy);
}

.copyright {
    background: #071c3d;
}

.footer-links a:hover {
    color: var(--gold);
}