/* === THEME: Velvet Black / Gold / Red === */
:root {
  --color-primary: #1C1C1F;
  --color-primary-strong: #1C1C1F;
  --color-on-primary: #F6F4EF;
  --color-secondary: #C2A66B;
  --color-on-secondary: #1C1C1F;
  --color-accent: #8A3C3A;
  --color-on-accent: #F6F4EF;
  --color-surface: #ffffff;
  --color-surface-2: rgba(255, 255, 255, 0.85);
  --color-surface-3: #E2DDD5;
  --color-on-surface: #3A3A3E;
  --color-border: #D8D3C8;
  --color-link: #1C1C1F;
  --color-link-hover: #C2A66B;
  --button-primary-bg: #C2A66B;
  --button-primary-text: #1C1C1F;
  --button-secondary-bg: #1C1C1F;
  --button-secondary-text: #C2A66B;
  /* New: golden text mix for nav/buttons/boxes */
  --color-text-gold: color-mix(in srgb, var(--color-secondary) 70%, var(--color-on-primary));
  }
/* ===== GLOBAL FONT: INTER ===== */
html,
body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #111;
}

/* Force all elements to use Inter */
h1, h2, h3, h4, h5, h6,
p, li, a, span, button,
input, textarea,
.accordion-button,
.accordion-body {
  font-family: inherit;
}
/* Font weight tuning for Inter */
body {
  font-weight: 350;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 600;
}

h2 {
  font-size: 1.6rem;
  font-weight: 450;
}

h3 {
  font-size: 1.35rem;
  font-weight: 450;
}

h4 {
  font-size: 1.15rem;
  font-weight: 450;
}

h5,
h6 {
  font-size: 1rem;
  font-weight: 450;
}



/* =========================================================
   PART 1 — ROOT VARIABLES & GLOBAL BASE STYLES
   ========================================================= */
:root {
    --bs-body-bg: var(--color-surface);
    --bs-body-color: var(--color-primary);
    --bs-font-sans-serif: "Inter", "Segoe UI", Arial, sans-serif;
    --brand-dark: var(--color-primary);
    --brand-bg: var(--color-surface);
    --brand-text: var(--color-primary);
    --surface-1: #fff;
    --surface-2: #eae8e0;
    --surface-3: #dcd9d0;
    --border-color: var(--color-primary);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-hover-bg: var(--surface-3);
}

/* =========================================================
   BODY & SCROLLING
   ========================================================= */
body,
html {
    margin: 0;
    padding: 0;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    overflow-x: hidden; /* prevents horizontal scrolling */
}

body {
    padding-top: 150px; /* spacing below fixed header */
    scroll-behavior: smooth;
}

/* =========================================================
   CONTAINERS & GLOBAL LAYOUT
   ========================================================= */
.container {
    background-color: transparent;
    padding: 0;
}

.main-content {
    padding: 1rem;
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.8;
}

.row.g-0 {
    --bs-gutter-x: 0;
}

/* =========================================================
   LINKS & BUTTONS
   ========================================================= */
a:link,
a:visited,
a:hover,
a:active {
    color: var(--color-primary);
    font-weight: bold;
    text-decoration: none;
}

.bold-underline {
    font-size: 15px;
    text-decoration: underline;
    color: var(--bs-body-color);
}

.bold-underline:hover {
    text-decoration: none;
    color: #555;
}

.btn {
    background-color: var(--color-primary);
    color: gainsboro;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--bs-body-bg);
}
/* =========================================================
   PART 2 — FIXED HEADER, NAVIGATION & DROPDOWNS
   ========================================================= */

/* =========================================================
   NAVBAR — FINAL CLEAN VERSION
   ========================================================= */

/* ---------- BASE NAVBAR ---------- */

.navbar {
  background-color: var(--color-primary);
  z-index: 3000;
}

.navbar-brand img {
  height: 50px;
  width: auto;
}

.navbar .nav-link {
  color: var(--color-text-gold) !important;
  font-weight: bold;
  white-space: nowrap;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--color-secondary) !important;
}

/* ---------- DESKTOP (≥ 992px) ---------- */

@media (min-width: 992px) {

  /* Keep nav items in a row */
  .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .nav-item {
    position: relative;
  }

  /* Dropdowns hidden by default */
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;

    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;

    background-color: rgba(28, 28, 31, 0.9);
    backdrop-filter: blur(4px);
    padding: 20px 30px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);

    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 4000;
  }

  /* Hover opens dropdown */
  .nav-item:hover > .dropdown-menu,
  .nav-item:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Mega menu layout */
  .mega-dropdown {
    display: flex;
    gap: 40px;
    min-width: 550px;
  }

  .dropdown-column {
    width: 50%;
    display: flex;
    flex-direction: column;
  }

  .dropdown-item {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    color: var(--color-on-primary) !important;
  }

  .dropdown-item:last-child {
    border-bottom: none;
  }

  .dropdown-item:hover {
    color: var(--color-secondary) !important;
  }
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: transparent !important; /* removes cream */
}


/* ---------- MOBILE (< 992px) ---------- */

@media (max-width: 991.98px) {

  /* Collapsed panel should scroll */
  .navbar-collapse {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  /* Stack nav vertically */
  .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .navbar-nav > .nav-item {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  /* Top‑level links */
  .navbar-nav .nav-link {
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* ❌ NO hover behaviour on mobile */
  .nav-item:hover > .dropdown-menu,
  .nav-item:focus-within > .dropdown-menu {
    display: none;
  }

  /* Dropdowns inline and closed by default */
  .dropdown-menu {
    position: static !important;
    display: none;
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
  }

  /* ✅ Bootstrap controls opening */
  .dropdown-menu.show {
    display: block;
  }

  /* Remove mega layout */
  .mega-dropdown {
    display: block;
    min-width: 100%;
  }

  .dropdown-column {
    width: 100%;
  }

  /* Dropdown links */
  .dropdown-item {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    color: var(--color-on-primary) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: normal;
  }

  .dropdown-item:last-child {
    border-bottom: none;
  }
}

/* ---------- HAMBURGER ICON ---------- */

.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* =========================================================
   PART 3 — TYPOGRAPHY & UTILITY CLASSES
   ========================================================= */

/* Text colours */
.text-smoke {
    color: var(--color-surface);
}

/* Underline styles */
.bold-underline {
    font-size: 15px;
    color: var(--color-primary);
    text-decoration: underline;
}

.bold-underline:hover {
    text-decoration: none;
    color: #555;
}

/* Responsive headings */
.page-heading {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.5em;
}

/* Hover links (light) */
.light-link,
.light-link:visited,
.light-link:hover,
.light-link:active {
    color: var(--color-surface) !important;
    text-decoration: none;
}

.light-link:hover {
    color: #E0DFC9 !important;
}

/* =========================================================
   PART 3B — IMAGE UTILITIES
   ========================================================= */

/* Full-width responsive image */
img.fullwidth {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

/* Float-right image with margin */
img.float-img-right {
    float: right;
    margin: 0 0 20px 20px;
    height: 200px;
    object-fit: cover;
}

/* Smaller images */
.small-img {
    max-width: 60%;
    height: auto;
}

/* Uniform-card images */
.uniform-image {
    width: 100%;
    height: 200px; /* consistent tile height */
    object-fit: cover;
    border-radius: 8px;
}

/* =========================================================
   PART 3C — IMAGE CONTAINER HELPERS
   ========================================================= */

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 1rem;
}

/* Image cards */
.image-box {
    flex: 1 1 300px;
    max-width: 100%;
    min-width: 250px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

/* Base image (Version A) – used for logo-style images */
.image-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   PART 3D — OVERLAY / HOVER TEXT PANELS
   ========================================================= */

.hover-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(247, 245, 237, 0.9);
    color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    font-size: 1rem;   /* ✅ match site body text */
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.hover-overlay p {
    font-size: 1.05rem;
    line-height: 1.6;
     align-items: center;
      justify-content: center;
      text-align: center;
}



/* Show overlay on hover */
.image-box:hover .hover-overlay {
    opacity: 1;
}

/* Image heading under gallery tiles */
.image-heading {
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    background-color: var(--color-surface);
    color: var(--color-primary);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .image-heading {
        font-size: 1rem;
    }
    .hover-overlay h3 {
        font-size: 1.1rem;
    }
    .hover-overlay p {
        font-size: 0.9rem;
    }
}
/* =========================================================
   PART 4 — HEADER BACKGROUND IMAGES (BG‑1)
   ========================================================= */

/* Shared layout for all header backgrounds */
.header-background,
.header-background-art,
.header-background-bio,
.header-background-chem,
.header-background-business,
.header-background-dance,
.header-background-dt,
.header-background-drama,
.header-background-economics,
.header-background-film,
.header-background-food,
.header-background-english,
.header-background-english2,
.header-background-french,
.header-background-geog,
.header-background-german,
.header-background-history,
.header-background-it,
.header-background-mathsfurther,
.header-background-maths,
.header-background-media,
.header-background-music,
.header-background-physics,
.header-background-pe,
.header-background-pshe,
.header-background-politics,
.header-background-product,
.header-background-psy,
.header-background-resmat,
.header-background-rs,
.header-background-science,
.header-background-soc,
.header-background-spanish,
.header-background-textiles,
.header-background-travel {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================
   SUBJECT BACKGROUND IMAGES
   ================================ */

.header-background {
    background-image: url('/Photos/header/Front-of-School-1-scaled.jpg');
}

/* Subjects */
.header-background-art {
    background-image: url('/Photos/Subjects/Art.jpg');
}

.header-background-bio {
    background-image: url('/Photos/Subjects/Bio.jpg');
}

.header-background-chem {
    background-image: url('/Photos/Subjects/Chem.jpg');
}

.header-background-business {
    background-image: url('/Photos/Subjects/Business.jpg');
}

.header-background-dance {
    background-image: url('/Photos/Subjects/Dance.jpg');
}

.header-background-dt {
    background-image: url('/Photos/Subjects/DTKS3.jpg');
}

.header-background-drama {
    background-image: url('/Photos/Subjects/Drama.jpg');
}

.header-background-economics {
    background-image: url('/Photos/Subjects/Economics.jpg');
}

.header-background-film {
    background-image: url('/Photos/Subjects/Film.jpg');
}

.header-background-food {
    background-image: url('/Photos/Subjects/Food.jpg');
}

.header-background-english {
    background-image: url('/Photos/Subjects/English.jpg');
}

.header-background-english2 {
    background-image: url('/Photos/Subjects/English 2.jpg');
}

.header-background-french {
    background-image: url('/Photos/Subjects/French.jpg');
}

.header-background-geog {
    background-image: url('/Photos/Subjects/Geography.jpg');
}

.header-background-german {
    background-image: url('/Photos/Subjects/German.jpg');
}

.header-background-history {
    background-image: url('/Photos/Subjects/History-Cloud.jpg');
}

.header-background-it {
    background-image: url('/Photos/Subjects/Computer Science.jpg');
}

.header-background-mathsfurther {
    background-image: url('/Photos/Subjects/Further Maths.jpg');
}

.header-background-maths {
    background-image: url('/Photos/Subjects/Mathematics.jpg');
}

.header-background-media {
    background-image: url('/Photos/Subjects/Media.jpg');
}

.header-background-music {
    background-image: url('/Photos/Subjects/Music.jpg');
}

.header-background-physics {
    background-image: url('/Photos/Subjects/Physics.jpg');
}

.header-background-pe {
    background-image: url('/Photos/Subjects/PE2.jpg');
}

.header-background-pshe {
    background-image: url('/Photos/Subjects/PSHE.jpg');
}

.header-background-politics {
    background-image: url('/Photos/Subjects/Politics.jpeg');
}

.header-background-product {
    background-image: url('/Photos/Subjects/D.T2.jpg');
}

.header-background-psy {
    background-image: url('/Photos/Subjects/Psychology.jpg');
}

.header-background-resmat {
    background-image: url('/Photos/Subjects/Resistant.jpg');
}

.header-background-rs {
    background-image: url('/Photos/Subjects/RS.jpg');
}

.header-background-science {
    background-image: url('/Photos/Subjects/Science1.jpg');
}

.header-background-soc {
    background-image: url('/Photos/Subjects/Sociology.jpg');
}

.header-background-spanish {
    background-image: url('/Photos/Subjects/Spanish.jpg');
}

.header-background-textiles {
    background-image: url('/Photos/Subjects/Textiles.jpg');
}

.header-background-travel {
    background-image: url('/Photos/Subjects/Travel.jpg');
}

/* Multi-image rotating background */
.header-backgroundmulti {
    background-image:
        url('/Photos/Header/assembly-15.jpg'),
        url('/Photos/Header/Front-of-School-1-scaled.jpg'),
        url('/Photos/Header/Students-24.jpg'),
        url('/Photos/Header/Students-22.jpg'),
        url('/Photos/Header/Students-36-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================================
   PART 5 — IMAGE COMPONENT SYSTEM
   ========================================================= */

/* ---------------------------------------------------------
   5A — BASE IMAGE RULES (used across site)
   --------------------------------------------------------- */

img.fullwidth {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

img.float-img-right {
    float: right;
    margin: 0 0 20px 20px;
    height: 200px;
    object-fit: cover;
}

.small-img {
    max-width: 60%;
    height: auto;
}

.uniform-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* ---------------------------------------------------------
   5B — IMAGE-BOX (Galleries, departments, tiles)
   --------------------------------------------------------- */

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 1rem;
}

.image-box {
    flex: 1 1 300px;
    max-width: 100%;
    min-width: 250px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

/* Version 1 — Responsive full-width images (default) */
.image-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* Version 2 — Fixed tile-style images (when height is manually set elsewhere) */
.image-box.fixed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------
   5C — IMAGE HEADING (beneath tiles)
   --------------------------------------------------------- */

.image-heading {
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    background-color: var(--color-surface);
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .image-heading {
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------
   5D — HOVER OVERLAY (smooth fade-in text)
   --------------------------------------------------------- */

.hover-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(247, 245, 237, 0.9);
    color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    font-size: 1rem;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.image-box:hover .hover-overlay {
    opacity: 1;
}

@media (max-width: 768px) {
    .hover-overlay h3 {
        font-size: 1.1rem;
    }
    .hover-overlay p {
        font-size: 0.9rem;
    }
}


/* Small text ONLY for Sixth Form image overlays */
.sixth-form-overlay .hover-overlay p,
.sixth-form-overlay .hover-overlay li {
  font-size: 0.6rem;     /* slightly smaller than body text */
  line-height: 1.4;
}


/* ---------------------------------------------------------
   5E — AWARD BOX SYSTEM (fixed broken code, cleaned)
   --------------------------------------------------------- */

.award-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.award-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* important for logos */
    padding: 0.5rem;
    z-index: 2;            /* image on top initially */
    opacity: 1;
    transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out;
    display: block;
}

.award-box .award-backtext {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    color: #000;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.95),
        rgba(255, 255, 255, 0.6)
    );
}

/* Hover/focus reveal */
.award-box:hover img,
.award-box:focus-within img {
    opacity: 0;
}

.award-box:hover .award-backtext,
.award-box:focus-within .award-backtext {
    opacity: 1;
}
/* =========================================================
   PART 6 — TABLE SYSTEM (CHARITY, SINGLE-HEADER, ROLES)
   ========================================================= */


/* ---------------------------------------------------------
   6A — BASE TABLE RESET
   --------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
}


/* ---------------------------------------------------------
   6B — CHARITY TABLE (Two-column layout)
   --------------------------------------------------------- */

.charity-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.charity-table th,
.charity-table td {
    padding: 10px;
    border: 1px solid var(--color-border);
}

.charity-table th {
    background-color: #f5f5f5;
    text-align: left;
}


/* ---------------------------------------------------------
   6C — SINGLE-HEADER TABLE (One header spanning 2 columns)
   --------------------------------------------------------- */

/* Full outer border + controlled styling */
.single-header-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.single-header-table thead > tr:first-child th {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
}

/* Cell styling */
.single-header-table td {
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    vertical-align: top;
}

/* Optional row stripes (kept for consistency) */
.single-header-table tbody tr:nth-child(odd) td {
    background: transparent;
}

/* First column width tweak on larger screens */
@media (min-width: 900px) {
    .single-header-table td:first-child {
        width: 35%;
        white-space: nowrap;
    }
}


/* ---------------------------------------------------------
   6D — ROLES TABLE (Your “Roles Required” table)
   --------------------------------------------------------- */

.roles-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.roles-heading {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.roles-table td {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    background: transparent;
}

.roles-table tbody tr:first-child td {
    border-top: none;
}


/* ---------------------------------------------------------
   6E — TABLE WRAPPER (adds margins to tables under text)
   --------------------------------------------------------- */

.under-text-table {
    margin: 20px 0 30px;
    padding: 0 40px; /* left/right margin */
}

.roles-heading {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 12px 0;

  background-color: var(--color-accent); /* ✅ your red */
  color: #fff; /* ✅ white text for contrast */
}

/* =========================================================
   PART 7 — SECTION DIVIDERS & VISUAL SEPARATORS
   ========================================================= */

/* Thick horizontal divider spanning full viewport width */
.section-divider {
    border: none;
    height: 5px;
    background-color: var(--color-primary);
    margin: 60px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Blank spacer bar (same colour as background) */
.Spacer {
    border: none;
    height: 5px;
    background-color: var(--color-surface);
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Divider with centered text */
.section-divider-text {
    text-align: center;
    margin: 60px auto;
    position: relative;
}

.section-divider-text span {
    background-color: var(--color-surface);
    padding: 0 20px;
    color: var(--color-primary);
    font-weight: bold;
    position: relative;
    z-index: 1;
}

.section-divider-text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 3px;
    background-color: var(--color-primary);
    z-index: 0;
}

/* =========================================================
   PART 7B — FOOTER STYLES
   ========================================================= */

.footer-bg {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

/* Light footer link styling */
.footer-bg a,
.footer-bg a:visited,
.footer-bg a:hover,
.footer-bg a:active {
    color: var(--color-surface) !important;
    text-decoration: underline;
}

/* Trust area */
.trusttext .bigger {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--color-surface);
}

.trusttext .smaller {
    font-size: 0.85rem;
    color: var(--color-surface);
}

.trustlogo img {
    max-width: 200px;
    width: 100%;
    height: auto;
}

/* Responsive footer layout */
@media (max-width: 768px) {
    .trustlogo {
        text-align: center;
        margin-bottom: 1rem;
    }

    .footer-bg {
        text-align: center;
        padding: 30px 15px;
    }

    .footer-bg .row {
        flex-direction: column;
        align-items: center;
    }

    .footer-bg .col-md-6 {
        width: 100%;
        margin-bottom: 20px;
    }

    .footer-contact {
        text-align: center;
    }

    .trust {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .trustlogo {
        margin-bottom: 15px;
    }

    .trusttext .bigger {
        font-size: 1rem;
    }

    .trusttext .smaller {
        font-size: 0.85rem;
    }
}


/* =========================================================
   PART 7C — BACK TO TOP BUTTON
   ========================================================= */

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--color-primary);
    color: var(--color-surface);

    padding: 8px 12px;          /* less bulk */
    border-radius: 999px;       /* softer pill/round shape */

    text-decoration: none;
    font-size: 16px;            /* reduced size */
    font-weight: 300;           /* normal weight */

    display: none;
    opacity: 0.85;              /* softer presence */
    transition: opacity 0.2s ease, transform 0.2s ease;
    
    z-index: 1000;
}

.back-to-top:hover {
    opacity: 1;
    transform: translateY(-2px); /* subtle feedback */
}

/* Show button when scrolling */
body.scrolled .back-to-top {
    display: block;
}



/* =========================================================
   PART 7D — PDF SLIDER LINKS & SWIPE BARS
   ========================================================= */

.pdf-slider-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 95%;
}

.pdf-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--color-surface);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: bold;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    transition: background-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Sliding overlay effect */
.pdf-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    z-index: 0;
}

.pdf-link:hover::before {
    transform: translateX(0);
}

.pdf-link span {
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.pdf-link:hover span {
    color: var(--color-surface);
}


/* =========================================================
   PART 7E — SIMPLE LINK GRID SYSTEM
   ========================================================= */

.simple-links-fullwidth {
    width: 100vw;
    margin: 0 !important;
    padding: 0 !important;
}

.simple-links-fullwidth .row {
    margin-right: 0;
    margin-left: 0;
    flex-wrap: wrap;
}

.simple-links-fullwidth [class*="col-"] {
    padding: 0;
}

.simple-link-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    color: var(--color-surface) !important;
    background-color: var(--color-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.simple-link-box:hover {
    background-color: var(--color-surface);
    color: var(--color-primary) !important;
}

/* Auto-fit responsive link grid */
.simple-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
}

/* Optional colour variants */
.variant-1 { background-color: var(--color-primary); }
.variant-2 { background-color: rgba(61, 50, 40, 0.9); }
.variant-3 { background-color: rgba(81, 67, 55, 0.9); }
.variant-4 { background-color: rgba(91, 75, 60, 0.9); }
.variant-5 { background-color: rgba(101, 83, 65, 0.9); 
}
/* =========================================================
   PART 8 — SIDEBARS, LAYOUT WRAPPERS & CARDS
   ========================================================= */


/* ---------------------------------------------------------
   8A — SIDEBAR COMPONENT
   --------------------------------------------------------- */

.sidebar {
    width: 260px;
    background-color: rgba(71, 59, 48, 0.1);
    padding: 15px;
    border: 2px solid rgba(71, 59, 48, 0.5);
    border-radius: 0;
    margin-right: 20px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

.sidebar h3 {
    margin-top: 0;
    color: var(--color-primary);
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(71, 59, 48, 0.2);
}

.sidebar a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: bold;
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
}

/* Arrow hover effect */
.sidebar a::after {
    content: '';
    position: absolute;
    right: -15px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar a:hover {
    text-decoration: underline;
    color: #555;
}

.sidebar a:hover::after {
    content: '>';
    opacity: 1;
    color: #555;
}


/* ---------------------------------------------------------
   8B — CONTENT WRAPPER (MAIN CONTENT + SIDEBAR)
   --------------------------------------------------------- */

.content-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.main-content {
    flex: 1;
    padding: 15px;
}

.curriculum-intent,
.curriculum-vision,
.year-vision,
.curriculum-content {
    flex: 1;
    padding: 15px;
    font-size: 18px;
    text-align: justify;
    background-color: var(--color-surface);
    border: 0;
}

.curriculum-layout {
    display: flex;
    align-items: flex-start;
}


/* ---------------------------------------------------------
   8C — EVENT CARD COMPONENT
   --------------------------------------------------------- */

.event-card {
    background-color: var(--color-primary) !important;
    color: var(--color-surface);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: 5px;
    transition: transform 0.2s ease;
}

.event-card:hover {
    transform: scale(1.02);
}

.event-card .card-title,
.event-card .card-subtitle,
.event-card .card-text {
    color: var(--color-surface);
}


/* ---------------------------------------------------------
   8D — FLIP CARD (STAFF VACANCIES)
   --------------------------------------------------------- */

.flip-card {
    width: 250px;
    height: 250px;
    perspective: 1000px;
    margin: 20px auto;
}

/* Inner container rotates */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}

/* Flip from bottom on hover */
.flip-card:hover .flip-card-inner {
    transform: rotateX(180deg);
}

/* Front + back faces */
.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
}

.flip-card-front {
    background-color: #f8f9fa;
    border: 1px solid var(--color-border);
}

.flip-card-back {
    background-color: var(--color-primary);
    color: #fff;
    transform: rotateX(180deg);
}

.flip-card-back a {
    color: #fff;
    text-decoration: underline;
    margin-top: 10px;
    display: inline-block;
}
/* =========================================================
   PART 9 — CURRICULUM TABLES & TIMELINE SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   9A — CUSTOM CURRICULUM TABLE
   --------------------------------------------------------- */

.custom-curriculum-table {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    width: 100%;
    border-collapse: collapse;
}

.custom-curriculum-table th,
.custom-curriculum-table td {
    border: 1px solid var(--color-primary) !important;
    padding: 0.75rem;
    vertical-align: top;
    text-align: left;
}

.custom-curriculum-table th {
    background-color: var(--color-primary);
    color: var(--color-surface);
    text-align: center;
}

.custom-curriculum-table ul {
    padding-left: 1.2rem;
    margin: 0;
}


/* ---------------------------------------------------------
   9B — TIMELINE LAYOUT (VERTICAL CENTRE-LINE)
   --------------------------------------------------------- */

.timeline {
    position: relative;
    padding: 2rem 0;
}

/* vertical line */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background-color: #dee2e6;
}


/* ---------------------------------------------------------
   9C — TIMELINE ITEM BOXES
   --------------------------------------------------------- */

.timeline-item {
    position: relative;
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Dots / connectors */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 20px;
    width: 30px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 50%;
    z-index: 1;
}


/* ---------------------------------------------------------
   9D — LEFT & RIGHT ITEM PLACEMENT
   --------------------------------------------------------- */

/* LEFT column */
.timeline-left .timeline-item {
    text-align: left;
}

.timeline-left .timeline-item::before {
    right: -40px;
}

/* RIGHT column */
.timeline-right .timeline-item::before {
    left: -40px;
}


/* ---------------------------------------------------------
   9E — RESPONSIVE TIMELINE FIXES
   --------------------------------------------------------- */

@media (max-width: 768px) {

    /* vertical line moves slightly left */
    .timeline::before {
        left: 8px;
        transform: none;
    }

    /* both sides become left-aligned for mobile */
    .timeline-left .timeline-item,
    .timeline-right .timeline-item {
        text-align: left;
    }

    /* timeline dots unify position */
    .timeline-left .timeline-item::before,
    .timeline-right .timeline-item::before {
        left: -30px;
        right: auto;
    }
}
/* =========================================================
   PART 10 — CHARITY LAYOUTS, IMAGE ROWS & ROLES TABLE
   ========================================================= */


/* ---------------------------------------------------------
   10A — TWO‑COLUMN CHARITY SPLIT (TABLE + IMAGE)
   --------------------------------------------------------- */

.charity-split {
    display: flex;
    gap: 40px;         /* space between columns */
    padding: 20px 0;
}

/* LEFT SIDE: Table */
.left-column-table {
    flex: 1;
    padding: 0 40px;   /* left & right spacing */
}

/* RIGHT SIDE: Image Column */
.right-column {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 40px;
}

.right-column img {
    width: 50%;        /* smaller & responsive */
    height: auto;
    border-radius: 6px;
    display: block;
}

/* Mobile stacking */
@media (max-width: 768px) {
    .charity-split {
        flex-direction: column;
    }
}


/* ---------------------------------------------------------
   10B — THREE‑COLUMN LAYOUT (Images — Table — Images)
   --------------------------------------------------------- */

/* === THREE COLUMN CHARITY LAYOUT (FINAL FIX) === */

.charity-three-columns {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 20px 0;
}

/* LEFT column images stacked */
.left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* CENTRE column table */
.centre-column {
    flex: 1;
}

/* RIGHT column images stacked */
.right-column {
    flex: 1;
    display: flex;
    flex-direction: column;   /* ← THIS IS THE FIX */
    gap: 15px;                /* spacing between images */
}

/* Make images behave consistently */
.left-column img,
.right-column img {
    width: 100%;      /* auto‑scale inside column */
    height: auto;
    border-radius: 6px;
    display: block;
}
@media (max-width: 900px) {
    .charity-three-columns {
        flex-direction: column;
    }
    .left-column img,
    .right-column img {
        width: 100%;
    }
}
/* Add margin to left column images */
.left-column img {
    margin-left: 20px;   /* adjust to taste: 10px / 15px / 30px */
}
/* Add left + right margins INSIDE the centre column */
.centre-column {
    padding-left: 40px;      /* adjust to taste: 10px, 20px, 30px */
    padding-right: px;
}
/* Add left + right spacing to the RIGHT column */
.right-column {
    padding-left: 20px;     /* space between table and right images */
    padding-right: 20px;    /* space between images and screen edge */
}

/* ---------------------------------------------------------
   10C — THREE IMAGE ROW (beneath divider)
   --------------------------------------------------------- */

.three-image-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 30px 0;
    align-items: stretch; /* ✅ important for grid row height */
}

.image-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Images inside three-image row */

.three-image-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    row-gap: 48px;
    margin: 30px 0;

    place-items: center; /* ✅ centres content */
}

.image-col {
    display: flex;
    justify-content: center;
}

.three-image-row img {
    width: 100%;
    max-width: 420px;
    height: auto;

    aspect-ratio: 4 / 3;
    object-fit: contain;

    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    display: block;
}

/* Responsive */
@media (max-width: 900px) {
    .three-image-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .three-image-row {
        grid-template-columns: 1fr;
    }
}



/* Captions */
.caption {
    margin-top: 8px;
    font-size: 0.95rem;
    color: #555;
    text-align: center;
}



/* ---------------------------------------------------------
   10D — ROLES TABLE (Used under section text)
   --------------------------------------------------------- */

.under-text-table {
    margin: 20px 0 30px;
    padding: 0 40px;
}

.roles-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

/* Centered heading */
.roles-heading {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.roles-table td {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    background: transparent;
}

/* Remove top border on first row */
.roles-table tbody tr:first-child td {
    border-top: none;
}
/* =========================================================
   PART 11 — GLOBAL FIXES & FINAL CONSISTENCY CLEANUP
   ========================================================= */

/* Ensure smooth scrolling across all pages */
html {
    scroll-behavior: smooth;
}

/* Prevent horizontal scrollbars caused by full-width components */
body, html {
    overflow-x: hidden;
}

/* Trust logo responsiveness (already defined once but fixed) */
.trustlogo img {
    max-width: 200px;
    width: 100%;
    height: auto;
}

/* Chrome bug fix: remove blue outline on clickable elements while preserving accessibility */
* {
    outline-offset: 2px;
}

/* Remove accidental whitespace below images */
img {
    display: block;
}

/* Default box sizing for predictable layout behaviour */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Ensure tables do not overflow on small screens */
table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

/* Normalize heading spacing (your previous CSS had variations) */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-weight: inherit;
}

/* Reset UL/OL padding inconsistencies */
ul, ol {
    padding-left: 1.2rem;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* General paragraph consistency */
p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Fix inconsistent spacing in flex containers */
.flex {
    display: flex;
    gap: 1rem;
}

/* Default grid helper */
.grid {
    display: grid;
    gap: 1rem;
}

/* Prevent long words from breaking layouts */
body {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Guarantee consistent link behaviour site-wide */
a {
    color: inherit;
    text-decoration-color: currentColor;
}

/* Centered content helper */
.centered {
    text-align: center;
}

/* Generic padding helper */
.padded {
    padding: 1rem;
}

/* Generic margin helper */
.spaced {
    margin: 1rem 0;
}

/* Clean up any float-clearing issues */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
/* ---------------------------------------------
   FIXED NAVBAR – FINAL CORRECT SETTINGS
   --------------------------------------------- */

/* 1) Navbar stays fixed at the top */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;      /* ensures it sits above everything */
    background-color: var(--color-primary); /* your school theme */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    margin: 0;
}

/* 2) Push page content down by exact header height */
:root {
    --header-height: 5px;   /* ADJUST THIS if your navbar is taller or shorter */
}

body {
    padding-top: var(--header-height) !important;
}

/* 3) Remove accidental margin from the block under the navbar */
.header-container {
    margin-top: 0 !important;
}

/* ---------------------------------------------
   NAV ITEM SPACING – EVEN DISTRIBUTION
   --------------------------------------------- */
.navbar-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    width: 100%;
}

/* Prevent logo from stretching the bar */
.navbar-brand img {
    height: 50px;
    width: auto;
    display: block;
}

/* Fix spacing between nav links */
.nav-item {
    padding: 0 .75rem;
}
/* === NAVBAR STABILITY PATCH === */

/* 1) Ensure navbar/fixed header are the top-most layer */
.fixed-header,
.navbar {
  position: relative;         /* create stacking context */
  z-index: 3000;              /* above header image and page content */
}

/* 2) Prevent layout shifts: keep nav items on one line and aligned */
.navbar-nav {
  display: flex !important;
  flex-wrap: nowrap;          /* avoid wrapping that causes jumps */
  align-items: center;
  justify-content: space-between; /* or 'center' + gap: 2rem; */
  width: 100%;
}

/* 3) Normalize link height/spacing so hover states don't change layout */
.navbar .nav-link {
  display: inline-flex;       /* stable inline size, centers text vertically */
  align-items: center;
  line-height: 1.2;           /* fixed line-height */
  padding: 0.75rem 0.9rem;    /* consistent hit-area */
  border-bottom: 2px solid transparent; /* reserve space for hover underline */
  white-space: nowrap;        /* avoid wrapping long labels */
}

/* Optional: if you underline or add border on hover, do it without reflow */
.navbar .nav-link:hover {
  border-bottom-color: rgba(255,255,255,0.35); /* subtle, no layout shift */
}

/* 4) Dropdowns: use visibility/opacity instead of display none/block
      so there’s no reflow and no “hover gap” that causes flicker */
.nav-item { position: relative; } /* anchor for absolute menu */

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;              /* remove gaps above the dropdown */
  /* show/hide without reflow */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px); /* slight offset for nicer feel */
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 4000;              /* above everything in header */
  pointer-events: none;       /* avoid capturing hover while hidden */
}

/* Reveal on hover (or keep your JS toggler if you have one) */
.nav-item:hover > .dropdown-menu,
.nav-item:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;       /* interactive when visible */
}

/* 5) Make sure the big header image can’t overlap menus */
.header-background,
.header-bg {
  position: relative;
  z-index: 1;                 /* BELOW navbar & dropdown */
}

/* Navbar + dropdown background always above */
.fixed-header,
.navbar,
.dropdown-menu {
  z-index: 3000;
}

/* 6) Avoid hover-induced bolding or font swapping that shifts width.
      (You already use bold by default; ensure hover doesn’t change weight) */
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  font-weight: bold;
}

/* 7) If you add borders on hover anywhere in navbar, reserve the space now */
.navbar .nav-item {
  border-bottom: 2px solid transparent; /* prevents height jump if used later */
}
/* Keep navbar & dropdowns above the header image */
.fixed-header, .navbar, .dropdown-menu { z-index: 3000; position: relative; }

/* Smooth show/hide without reflow (prevents hover gaps/flicker) */
.nav-item { position: relative; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0;
  margin-top: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none;
}
.nav-item:hover > .dropdown-menu,
.nav-item:focus-within > .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  pointer-events: auto;
}

/* Even spacing of items */
.navbar-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; }
.navbar .nav-link { display: inline-flex; align-items: center; padding: .75rem .9rem; line-height: 1.2; white-space: nowrap; border-bottom: 2px solid transparent; }
.navbar .nav-link:hover { border-bottom-color: rgba(255,255,255,.35); }

/* Header image below navbar */
.header-background, .header-bg { position: relative; z-index: 1;
 }
 /* === FIX DROPDOWN HIDING BEHIND HEADER IMAGE === */

/* 1. Navbar must sit ABOVE all content */
.navbar,
.fixed-header {
    position: relative !important;
    z-index: 999999 !important;
}

/* 2. Dropdown menus must float above EVERYTHING */
.dropdown-menu {
    position: absolute !important;
    z-index: 1000000 !important;
}

/* 3. Remove stacking context from the header block */
.header-container,
.header-bg,
.header-background {
    position: static !important;      /* the crucial fix */
    z-index: auto !important;
    overflow: visible !important;
}
/* Force right column images to stack vertically */
.right-column-images {
    display: flex;
    flex-direction: column;
    gap: 15px;           /* space between images */
}

/* Make sure images resize correctly */
.right-column-images img {
    width: 100%;         /* or set a % if smaller images are needed */
    height: auto;
    border-radius: 6px;
    display: block;
}



/* Link bar greyscale variants (Option A) */
.variant-1 { background-color: #1C1C1F; }
.variant-2 { background-color: #2A2A2D; }
.variant-3 { background-color: #3A3A3E; }
.variant-4 { background-color: #4A4A4F; }
.variant-5 { background-color: #5A5A60; }
.variant-6 { background-color: #6A6A70; }


/* Golden text overrides */
.navbar .nav-link,
.navbar .nav-link:visited { color: var(--color-text-gold) !important; }
.btn { color: var(--color-text-gold) !important; }
.btn-secondary { color: var(--color-text-gold) !important; }
.simple-link-box { color: var(--color-text-gold) !important; }
.navbar .nav-link:hover,
.simple-link-box:hover,
.btn:hover,
.btn:focus-visible { color: var(--color-secondary) !important; }


/* White hamburger icon for dark navbar */
.navbar-toggler { border-color: transparent !important; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}



/* === Footer: Golden Text === */
.footer-bg,
.footer-bg p,
.footer-bg a,
.footer-bg .trusttext .bigger,
.footer-bg .trusttext .smaller {
    color: var(--color-text-gold) !important;
}

.footer-bg a:hover {
    color: var(--color-secondary) !important;
    text-decoration-color: var(--color-secondary) !important;
}

/* === PDF Slider: Gold on Hover === */
.pdf-link:hover span {
    color: var(--color-secondary) !important;
}

.pdf-link:hover {
    border-color: var(--color-secondary) !important;
}



/* === Event Cards: Golden Text === */
.event-card,
.event-card .card-title,
.event-card .card-subtitle,
.event-card .card-text {
    color: var(--color-text-gold) !important;
}

/* Optional subtle hover enhancement */
.event-card:hover .card-title,
.event-card:hover .card-subtitle,
.event-card:hover .card-text {
    color: var(--color-secondary) !important;
}
/* Short red underline for headings */

.heading-underline {
    position: relative;
    padding-bottom: 0.4rem;
}

.heading-underline::after {
    content: "";
    display: block;
    height: 4px;
    width: clamp(40px, 8vw, 70px); /* responsive width */
    background-color: var(--color-accent);
    margin-top: 6px;
}
/* Darrick Wood - Important Notice Banner */
.dw-notice-banner {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #f7e7a0;
    color: #4a2e00;
    border-bottom: 2px solid #c9a227;
    padding: 1.5rem 1rem;            /* increased height */
    text-align: center;
    font-family: system-ui, sans-serif;
    font-size: 1.25rem;              /* bigger text */
    font-weight: 600;                /* stronger presence */
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
/* Overlay background */
.dw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

/* Pop-up box */
.dw-modal {
    background: #fff;
    padding: 2rem;
    max-width: 50rem; /* ~800px */
    width: 90%;
    border-radius: 12px;
    text-align: center;
    border: 3px solid #c9a227; /* Darrick Wood gold */
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    position: relative;
    animation: fadeIn 0.25s ease-out;
}

/* Close button */
.dw-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #333;
    font-weight: bold;
}

.dw-modal h2 {
    margin-top: 0;
    color: #4a2e00; /* brown */
}

.hidden {
    display: none !important;
}


@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
/* ========================= TIMETABLE ========================= */

/* Section Header */
.dw-section-title {
    background: var(--color-on-surface);
    color: #C2A66B !important;
    text-align: center;
    padding: 0.7rem 1rem;
    margin: 1.8rem 0 0.6rem;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    border-radius: 8px 8px 0 0;
    margin-left: 40px;     /* ⬅⬅ new */
    margin-right: 40px;    /* ⬅⬅ new */
}

/* Grid container */

.dw-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 2px solid var(--color-on-surface);
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    margin-left: 40px;     /* ⬅⬅ new */
    margin-right: 40px;    /* ⬅⬅ new */
}

/* Each day column */
.dw-day {
    background: var(--color-soft-gold);
    padding: 1.2rem;
    border-right: 2px solid var(--color-accent);
    position: relative;
}

.dw-day:last-child {
    border-right: none;
}

/* DAY HEADING (now always visible) */
.dw-day h3 {
    background: var(--color-brown);
    color: #C2A66B !important;
    text-align: center;
    padding: 0.6rem 0.8rem;
    margin: 0 0 1rem 0; 
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;   /* looks cleaner */
}

/* List styling */
.dw-day ul {
    margin: 0;
    padding-left: 1.1rem;
}

.dw-day li {
    margin-bottom: 0.5rem;
}

.dw-day li::marker {
    color: var(--color-accent);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .dw-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media (max-width: 600px) {
    .dw-grid {
        grid-template-columns: 1fr;
        margin-left: 10px;
        margin-right: 10px;
    }
}
/* =======================================================
   FORCE DAY HEADINGS TO SHOW
   ======================================================= */

.dw-day h3 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    background: var(--color-on-surface);   /* or var(--color-brown) if you prefer */
    color: #C2A66B !important;
    text-align: center;
    padding: 0.7rem 0.8rem !important;

    margin: 0 0 1rem 0 !important;     /* remove any negative margin */

    font-size: 1.2rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    position: relative;
    z-index: 5;
}

/* =======================================================
   OLD TABLE SYSTEM (KEEPING FOR OTHER PAGES)
   ======================================================= */
.dw-grid {
    margin-left: 60px !important; 
    margin-right: 60px !important;
    border: 2px solid var(--color-on-surface);
    border-radius: 0 0 8px 8px;
}

.dw-day {
    overflow: visible !important;
}

/* =======================================================
   TWO-COLUMN LAYOUT (TABLE LEFT + IMAGES RIGHT)
   ======================================================= */
.dw-two-col {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-left: 40px;
    margin-right: 40px;
}

.dw-left { flex: 2.5; }
.dw-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dw-right img {
    width: 100%;
    max-height: 190px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--color-on-surface);
}

/* =======================================================
   INTRO TEXT ABOVE TABLE
   ======================================================= */
.dw-table-intro {
    color: var(--color-on-surface);
    margin-bottom: 12px;
    font-size: 1.05rem;
}

/* =======================================================
   SECTION TITLE (DARK BAR)
   ======================================================= */
.dw-section-title-dark {
    background: var(--color-on-surface);
    color: var(--color-secondary);
    padding: 0.8rem 1rem;
    margin-bottom: 8px;
    font-size: 1.25rem;
    text-align: center;
    border-radius: 6px;
}

/* =======================================================
   NEW TABLE SYSTEM — ISOLATED USING WRAPPER
   ======================================================= */

.dw-activity-wrapper .dw-activity-table {
    width: 100%;
    border-collapse: collapse !important;
    background: #ffffff;
    border: 2px solid var(--color-on-surface) !important;
    font-size: 0.95rem;
}

/* ----- HEADER ROW ----- */
.dw-activity-wrapper .dw-activity-table thead th {
    background: var(--color-on-surface) !important;
    color: var(--color-secondary) !important;
    padding: 12px;
    text-align: center;
    font-weight: 700;
    border: 1px solid var(--color-on-surface) !important;
}

/* ----- LEFT DAY COLUMN ----- */
.dw-activity-wrapper .dw-activity-table .day-col {
    background: var(--color-on-surface) !important;
    color: var(--color-secondary) !important;
    font-weight: 700;
    padding: 12px;
    width: 140px;
    border: 1px solid var(--color-on-surface) !important;
}

/* ----- BODY CELLS ----- */
.dw-activity-wrapper .dw-activity-table td {
    padding: 12px;
    vertical-align: top;
    color: var(--color-on-surface) !important;
    border: 1px solid var(--color-on-surface) !important; /* RESTORED GRID LINES */
}

/* =======================================================
   RESPONSIVE RULES
   ======================================================= */
@media (max-width: 992px) {
    .dw-two-col {
        flex-direction: column;
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media (max-width: 600px) {
    .dw-two-col {
        margin-left: 10px;
        margin-right: 10px;
    }
}
/* Base table styling */
.left-column-table {
  width: 100%;
  overflow-x: auto;
}

/* Desktop / default table styling */
.sports-timetable {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #555; /* outer border */
}

.sports-timetable th,
.sports-timetable td {
  border: 2px solid #555; /* bold grid lines */
  padding: 12px;
  vertical-align: top;
}

.sports-timetable th {
  background: #f5f5f5;
  font-weight: bold;
  text-align: left;
}

/* ---------- MOBILE VIEW ---------- */
@media (max-width: 768px) {

  .sports-timetable,
  .sports-timetable thead,
  .sports-timetable tbody,
  .sports-timetable th,
  .sports-timetable td,
  .sports-timetable tr {
    display: block;
  }

  .sports-timetable thead {
    display: none;
  }

  .sports-timetable tr {
    margin-bottom: 20px;
    border: 2px solid #555; /* card border stays bold */
    padding: 10px;
    background: #fff;
  }

  /* Remove inner borders so the card layout works */
  .sports-timetable td {
    border: none;
    position: relative;
    padding-left: 50%;
    min-height: 40px;
  }

  .sports-timetable td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 12px;
    font-weight: bold;
    width: 45%;
    white-space: normal;
  }
}
.timetable-heading {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 20px 0 15px;
}
.heading-center {
  text-align: center;
}

.heading-center::after {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.right-image {
  max-width: 500px;
  width: 100%;
  height: auto;
}

.right-column {
  text-align: center;   /* centres inline elements like images */
}

.right-column img {
  max-width: 100%;      /* keeps it responsive */
  width: 60%;           /* adjust this to control size */
  height: auto;         /* keeps proportions correct */
  display: inline-block;
}
/* === RESPONSIVE FIXES === */

@media (max-width: 992px) {
  .content-wrapper {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 576px) {
  .header-background {
    min-height: 250px;
  }
}

.simple-links-fullwidth {
  width: 100%;
}

@media (max-width: 400px) {
  .image-box {
    min-width: 100%;
  }
}
/* Mobile sidebar hidden by default */
@media (max-width: 992px) {
  #sidebar-placeholder {
    position: fixed;
    top: 0;
    left: -260px; /* hidden off-screen */
    width: 260px;
    height: 100vh;
    background-color: rgba(71, 59, 48, 0.95);
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 5000;
  }

  #sidebar-placeholder.active {
    left: 0; /* slide in */
  }

  .sidebar-toggle {
    background-color: var(--color-primary);
    color: var(--color-surface);
    border: none;
    padding: 10px 15px;
    font-size: 1.2rem;
    margin: 10px;
    border-radius: 4px;
  }
}
/* Desktop spacing improvements */
@media (min-width: 992px) {
  .content-wrapper {
    gap: 8px; /* tighter spacing */
  }

  .sidebar {
    width: 400px; /* fixed width but slimmer */
    margin-right: 0; /* remove extra gap */
  }

  .curriculum-content {
    padding: 12px; /* optional: slightly tighter content padding */
  }
}
/* Desktop layout tightening */
@media (min-width: 992px) {
  .content-wrapper {
    display: flex;
    gap: 8px; /* tighter spacing */
  }

  .sidebar {
    width: 350px; /* fixed width */
    margin-right: 0;
  }

  .curriculum-content {
    padding: 12px;
  }
}

/* Mobile sidebar behaviour */
@media (max-width: 992px) {
  #sidebar-placeholder {
    display: none; /* or use hamburger version */
  }
}
.curriculum-content p,
.curriculum-content li {
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.7;
}
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.read-more-box input {
  display: none;
}

.read-more-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.read-more-box input:checked ~ .read-more-content {
  max-height: 500px; /* enough to show content */
}

.read-more-btn {
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  color: var(--color-primary);
  text-decoration: underline;
}
/* ---------------------------------------------------------
   FOUR IMAGE ROW
   --------------------------------------------------------- */


.four-image-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 30px 0;
  align-items: start;
  justify-items: center; /* center the image boxes */
}

.four-image-row img {
  width: 80%;           /* was 70% */
  max-width: 420px;     /* was 420px */
  height: auto;         /* keep natural aspect ratio */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: transform 160ms ease;
}


.four-image-row img:hover {
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .four-image-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .four-image-row {
        grid-template-columns: 1fr;
    }
}
/* ---------------------------------------------------------
   FIVE IMAGE ROW
   --------------------------------------------------------- */

.five-image-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin: 30px 0;
    align-items: start;
}

.five-image-row img {
    width: 70%;
    max-width: 260px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 160ms ease;
}

.five-image-row img:hover {
    transform: translateY(-2px);
}

@media (max-width: 1100px) {
    .five-image-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .five-image-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .five-image-row {
        grid-template-columns: 1fr;
    }
}
.useful-websites {
  margin-left: 10px;
  margin-right: 10px;
}

/* Or shorthand: margin: 0 40px; */

/* YEAR 7 = RED */
.year7 .card-header {
    background-color: #cc0000 !important; /* Red */
    color: white !important;
}

/* YEAR 8 = ORANGE */
.year8 .card-header {
    background-color: #ff8800 !important; /* Orange */
    color: white !important;
}

/* YEAR 9 = YELLOW */
.year9 .card-header {
    background-color: #ffcc00 !important; /* Yellow */
    color: black !important;
}

/* ✅ YEAR 10 = DARK GREEN */
.year10 .card-header {
    background-color: #006400 !important; /* Dark Green */
    color: white !important;
}

/* ✅ YEAR 11 = ROYAL BLUE */
.year11 .card-header {
    background-color: #4169e1 !important; /* Royal Blue */
    color: white !important;
}

/* ✅ YEAR 12 = NAVY */
.year12 .card-header {
    background-color: #000080 !important; /* Navy */
    color: white !important;
}

/* ✅ YEAR 13 = PURPLE */
.year13 .card-header {
    background-color: #800080 !important; /* Purple */
    color: white !important;
}
#year7-all-subjects {
  max-width: 1200px;     /* keeps content readable on large screens */
  margin-left: auto;
  margin-right: auto;
}

table td ul {
  padding-left: 20px;     /* prettier bullets */
}

/* Extra small-screen improvements */
@media (max-width: 576px) {
  #year7-all-subjects {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.subject-section .card-header {
    background-color: #b22222 !important;
    color: white !important;
}


    /* Left column text alignment */
.content-left,
.content-left p,
.content-left ul,
.content-left li {
  text-align: left;
}

/* Bullet spacing */
.content-left ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.content-left li {
  margin-bottom: 0.5rem;
}

/* Improve table readability */
.table th,
.table td {
  vertical-align: top;
  white-space: normal;
}

/* Optional: slightly smaller text on small screens */
@media (max-width: 768px) {
  .table {
    font-size: 0.9rem;
  }
}
/* =========================================================
   IMAGE FEATURE SECTION (CONTAINER)
   ========================================================= */

.image-feature-section {
    margin: 60px 0;
    padding: 0 15px;
}

/* =========================================================
   TWO IMAGE ROW – FULLY RESPONSIVE
   ========================================================= */

.two-image-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tablet and up */
@media (min-width: 768px) {
    .two-image-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop and up – add breathing space */
@media (min-width: 992px) {
    .two-image-row {
        padding-left: 60px;
        padding-right: 60px;
    }
}

.two-image-row figure {
    margin: 0;
    text-align: center;
}

.two-image-row img {
    display: block;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.two-image-row img:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

.two-image-row figcaption {
    margin-top: 10px;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.4;
}
.event-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.event-date {
  text-align: center;
  font-weight: bold;
}

.event-day {
  font-size: 1.5rem;
  display: block;
}

.event-month {
  text-transform: uppercase;
  font-size: 0.8rem;
}
.event-card {
  padding: 0.75rem;
}

.event-card .event-title {
  font-size: 0.9rem;
  font-weight: 600;
}

.event-card .event-date {
  font-size: 0.75rem;
}

.event-card p {
  font-size: 0.75rem;
  line-height: 1.2;
}
/* ✅ Responsive FullCalendar tweaks */
@media (max-width: 767px) {

  .fc-toolbar-title {
    font-size: 1.2rem;
    text-align: center;
  }

  .fc-daygrid-day-number {
    font-size: 0.8rem;
  }

  .fc-event-title {
    font-size: 0.75rem;
    white-space: normal;
  }

  .fc {
    touch-action: pan-y;
  }
}
/* Section headings */
.section-heading {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #8A3C3A;
  padding-bottom: 0.25rem;
}

/* Contact section text spacing */
section p {
  margin-bottom: 0.5rem;
}

/* Map container */
.map-embed iframe {
  border-radius: 6px;
}
/* === Dark Site Footer (solid colour) === */

.site-footer {
  background-color: #121316;   /* matches nav bar */
  color: #E6D3A3;
  border-top: 4px solid #8A3C3A;
}

/* Spacing wrapper */
.footer-overlay {
  padding: 3rem 0;
}

/* Footer text */
.footer-text p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Impact logo */
.footer-logo {
  max-width: 220px;
  width: 100%;
  height: auto;
}

/* === FORCE FINAL FOOTER STYLING === */
footer.site-footer {
  background-color: #121316 !important;
  color: #E6D3A3 !important;
  border-top: 4px solid #8A3C3A;
}

footer.site-footer .footer-overlay {
  padding: 3rem 0;
}

footer.site-footer .footer-text p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

footer.site-footer .footer-logo {
  max-width: 220px;
  height: auto;
}
/* ---------------------------------------------------------
   THREE IMAGE ROW
   --------------------------------------------------------- */

.three-image-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 30px 0;
  align-items: start;
  justify-items: center; /* center the image boxes */
}

.three-image-row img {
  width: 80%;
  max-width: 420px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: transform 160ms ease;
}

.three-image-row img:hover {
  transform: translateY(-2px); 
} 

/* Tablet */
@media (max-width: 900px) {
  .three-image-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .three-image-row {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   AWARD / LOGO IMAGE GRID – CONSISTENT SIZING
   --------------------------------------------------------- */

.image-col {
  width: 100%;
  max-width: 240px;
  height: 180px;               /* ✅ fixed height for all logos */
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-col img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;         /* ✅ preserves logo proportions */
  height: 100%;
  width: auto;
}
/* ---------------------------------------------------------
   IMAGE INFO MODAL
--------------------------------------------------------- */

.image-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.image-modal.show {
  display: flex;
}

.modal-content {
  background: #121316;
  color: #E6D3A3;
  padding: 1.5rem;
  border-radius: 8px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  position: relative;
}

.modal-content h3 {
  margin-top: 0;
  border-bottom: 2px solid #8A3C3A;
  padding-bottom: 0.25rem;
  font-size: 1.1rem;
}

.modal-content p {
  font-size: 0.9rem;
}

/* Close button */
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  background: none;
  border: none;
  color: #E6D3A3;
  font-size: 1.5rem;
  cursor: pointer;
}

.image-col a {
  cursor: pointer;
}
/* Make images larger ONLY in the three-image-row section */
.three-image-row .image-col img {
  max-width: 400px;   /* adjust as needed */
  width: 150%;

}
/* Change open accordion background + text colour */
.accordion-button:not(.collapsed) {
  background-color: #f6efef; /* light red / neutral background */
  color: #7a1e1e;            /* dark red text */
  box-shadow: none;
}

/* Remove blue focus outline */
.accordion-button:focus {
  box-shadow: none;
  border-color: #ddd;
}

/* Change arrow / chevron colour */
.accordion-button::after {
  filter: brightness(0);
}

/* Ensure Dress Code section uses same font as Subjects */
.dress-code-section {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.6;
}
.dress-code-section h2,
.dress-code-section h3,
.dress-code-section h4 {
  font-weight: 500;
}
/* Match heading weight across page */

h1 { font-weight: 600; }
h2, h3, h4 { font-weight: 500; }
h5, h6 { font-weight: 400; }

/* Match list text styling */
ul li {
  font-size: 1rem;
  line-height: 1.6;
}
/* ========== FIX BOLD TEXT IN DRESS CODE SECTION ========== */

/* Keep headings bold */
.dress-code-section h3,
.dress-code-section h4 {
  font-weight: 500;
}

/* Reset body text to normal */
.dress-code-section p,
.dress-code-section ul,
.dress-code-section li {
  font-weight: 400;
}

p,
li,
td,
th {
  font-size: 1rem;
  line-height: 1.6;
}
/* =======================================================
   TWO‑COLUMN TABLE SECTION (THEME SAFE)
   ======================================================= */

.dw-two-table-section {
  margin: 3rem 40px;
}

/* Two-column layout */
.dw-two-table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* Individual table panel */
.dw-table-panel {
  background: var(--color-surface);
}

/* Small title above each table */
.dw-table-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-on-surface);
  border-bottom: 3px solid var(--color-accent);
  padding-bottom: 4px;
  width: fit-content;
}

/* Table styling using existing theme */
.dw-simple-table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid var(--color-on-surface);
}

.dw-simple-table th {
  background: var(--color-on-surface);
  color: var(--color-secondary);
  padding: 12px;
  text-align: left;
  font-weight: 700;
  border: 1px solid var(--color-on-surface);
}

.dw-simple-table td {
  padding: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-on-surface);
}

/* Mobile stacking */
@media (max-width: 900px) {
  .dw-two-table-section {
    margin-left: 20px;
    margin-right: 20px;
  }

  .dw-two-table-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .dw-two-table-section {
    margin-left: 10px;
    margin-right: 10px;
  }
}
/* =======================================================
   RESPONSIVE TABLE FIX (STACKED CARDS)
   ======================================================= */
@media (max-width: 768px) {

  .dw-responsive-table,
  .dw-responsive-table thead,
  .dw-responsive-table tbody,
  .dw-responsive-table th,
  .dw-responsive-table td,
  .dw-responsive-table tr {
    display: block;
    width: 100%;
  }

  /* Hide table header */
  .dw-responsive-table thead {
    display: none;
  }

  /* Each row becomes a card */
  .dw-responsive-table tbody tr {
    margin-bottom: 1rem;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    padding: 0.5rem;
    background: var(--color-surface);
  }

  /* Standard cells */
  .dw-responsive-table td {
    position: relative;
    padding-left: 50%;
    border: none;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
  }

  /* Labels appear on the left */
  .dw-responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0.6rem;
    top: 0.6rem;
    width: 45%;
    font-weight: 700;
    color: var(--color-on-surface);
  }

  /* ✅ FULL-WIDTH COLSPAN ROW FIX */
  .dw-responsive-table .dw-full-row td {
    padding-left: 0.75rem;
    border-bottom: none;
    background: var(--color-surface-3);
    font-weight: 500;
  }

  .dw-responsive-table .dw-full-row td::before {
    display: none;
  }
}
/* Header search styling */
.site-search .form-control {
  width: 140px;
  border-radius: 4px;
}

.site-search .form-control:focus {
  box-shadow: none;
  border-color: #666;
}

.btn-search {
  background-color: #333;
  color: #fff;
  border: none;
}

.btn-search:hover {
  background-color: #555;
}

/* Visually hidden but accessible */
.visually-hidden {
  position: absolute;
  left: -9999px;
}
.footer-bg {
  background-color: #000; /* or whatever you're using */
}

.bigger {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.smaller {
  font-size: 0.875rem;
  line-height: 1.5;
}

.light-link {
  color: #fff;
  text-decoration: underline;
}

.light-link:hover {
  color: #ccc;
}
.back-to-top-link {
    font-size: 1rem;
    font-weight: 500;        /* slightly stronger than normal, not bold */
    color: #000;             /* or your text colour var */
    text-decoration: none;
}

.back-to-top-link:hover {
    text-decoration: underline;
}
.left-column img,
.right-column img {
    width: 100%;
    height: 300px;          /* ✅ forces same height */
    object-fit: cover;      /* ✅ fills box evenly */
    border-radius: 8px;
    display: block;
    margin-bottom: 20px;
}
.image-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.image-link img {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-link:hover img {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.image-caption {
    display: block;
    margin-top: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111; /* adjust to match your brand */
}

.governance-table-wrapper {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: none;     /* ✅ removes shadow */
}


/* Table structure */

custom-table {
    border-collapse: collapse; /* ✅ enables clean grid lines */
}

/* Header row */

custom-table thead th {
    background-color: #7a1f2b; /* your maroon */
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #6a1a24;
}


/* Table cells */

.custom-table th,
.custom-table td {
    border: 1px solid #e5e7eb;  /* ✅ faint grid lines */
    padding: 0.75rem 1rem;
    vertical-align: middle;
}


/* Hover feedback */
.custom-table tbody tr:hover {
    background-color: #f8f9fa;
}

.custom-table tbody tr:nth-child(even) {
    background-color: #fcfcfc;
}

.custom-table thead th {
    background-color: #7a1f2b; /* example */
    color: #ffffff;
}

.welcome-image {
  max-width: px;   /* controls size */
  width: 100%;
  margin-left: auto; /* pushes image towards text */
}
.gsc-control-cse {
  padding: 0;
  background-color: transparent;
  border: none;
}

.gsc-result-info {
  font-size: 0.9rem;
  color: #6c757d;
}
#google_translate_element select {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Clear keyboard focus */
#google_translate_element select:focus {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* Reduce Google visual clutter */
.goog-logo-link,
.goog-te-gadget span {
  display: none !important;
}

.goog-te-gadget {
  color: transparent;
}
.translate-wrapper {
  gap: 0.25rem;
}

.translate-label {
  font-size: 0.85rem;
  color: #ffffff; /* or your nav text colour */
  white-space: nowrap;
}
/* =====================================
   SUBJECT HEADER – MOBILE FIX
   ===================================== */

@media (max-width: 767px) {

  .header-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .page-heading {
    font-size: 2rem;
    padding: 0 1rem;
  }
}
/* =====================================
   SUBJECT TEXT – MOBILE READABILITY
   ===================================== */

@media (max-width: 767px) {

  .curriculum-content {
    padding: 1.25rem;
    max-width: 100%;
  }

  .curriculum-content p {
    font-size: 1rem;
    line-height: 1.6;
  }
}
/* =====================================
   KEY STAGE BUTTONS – MOBILE
   ===================================== */

@media (max-width: 767px) {

  .pdf-slider-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .pdf-link {
    width: 100%;
    text-align: center;
    padding: 1rem;
    font-size: 1rem;
  }
}
/* =====================================
   CARDS – MOBILE SPACING
   ===================================== */

@media (max-width: 767px) {

  .card {
    margin-bottom: 1rem;
  }

  .card-header {
    font-size: 1rem;
  }

  ul.small li {
    line-height: 1.6;
  }
}
/* =====================================
   NAVBAR – MOBILE VISIBILITY CONTROL
   ===================================== */

@media (max-width: 991.98px) {

  /* Disable hover + focus opening */
  .nav-item:hover > .dropdown-menu,
  .nav-item:focus-within > .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Bootstrap controls visibility via .show */
  .dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}
/* =====================================
   MOBILE NAV – FINAL ACCORDION CONTROL
===================================== */
@media (max-width: 991.98px) {
  .dropdown-menu {
    display: none;
    position: static !important;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  .mega-dropdown {
    display: block;
  }

  .dropdown-column {
    width: 100%;
  }
}
/* =====================================
   MOBILE NAV – FIX DROPDOWN TEXT COLOUR
===================================== */
@media (max-width: 991.98px) {
  .navbar .dropdown-item {
    color: var(--color-text-gold) !important;
  }

  .navbar .dropdown-item:hover,
  .navbar .dropdown-item:focus {
    color: var(--color-secondary) !important;
  }
}
/* =====================================
   MOBILE NAV – FINAL ACCORDION VISIBILITY
===================================== */
@media (max-width: 991.98px) {
  .nav-item.dropdown .dropdown-menu {
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: static !important;
    background: transparent;
  }

  .nav-item.dropdown .dropdown-menu[style*="block"] {
    display: block;
  }

  .mega-dropdown {
    display: block;
  }

  .dropdown-column {
    width: 100%;
  }

  .navbar .dropdown-item {
    color: var(--color-text-gold) !important;
  }
}



.life-learning-image {
  width: 100%;
  max-width: 450px;   /* controls size */
  height: auto;       /* keeps proportions */
  display: block;
  margin: 0 auto;     /* centres it */
}

.right-column img.life-learning-image {
  width: 100%;
  max-width: 450px;
  height: auto !important;   /* overrides the forced 300px height */
  object-fit: contain;       /* stops cropping */
  display: block;
  margin: 0 auto;
}

.accent-header {
  background-color: var(--color-accent) !important;
}



.header-background {
  background-image: 
    linear-gradient(
      rgba(28, 28, 31, 0.5),
      rgba(28, 28, 31, 0.15)
    ),
    url('/Photos/header/Front-of-School-1-scaled.jpg');

  background-size: cover;
  background-position: center;
}





/* Keep text above overlay */
.header-background .container {
  position: relative;
  z-index: 2;
}

.image-box img {
  width: 100%;
  height: 400px;           /* ✅ forces equal height */
  object-fit: cover;       /* ✅ crops without distortion */
  border-radius: 8px;
}

.image-box {
  flex: 1 1 300px;
  max-width: 100%;
}


.image-container {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}



/* ===== BOOK WRAPPER (main container) ===== */
.book-wrapper {
  display: block;
  max-width: 1300px;
  margin: 30px auto;   /* ✅ controls spacing */
}

/* ===== BOOK SIZE ===== */
#book {
  width: 100%;
  height: 800px;
}

/* ===== BOOK PAGE STYLING ===== */
.page {
  background: #fffdf5;
  padding: 30px;
  border: 1px solid #ddd;
  font-family: "Arial", serif;
}

.page h2 {
  border-bottom: 2px solid #ccc;
  padding-bottom: 10px;
}

/* ===== DESKTOP / MOBILE SWITCH ===== */
.timeline-mobile {
  display: none;
}

@media (max-width: 768px) {

  .book-wrapper {
    display: none;
  }

  .timeline-mobile {
    display: block;
    margin-top: 20px;  /* ✅ spacing for mobile */
  }

}

/* ===== MOBILE TIMELINE STYLING ===== */
.timeline-mobile .timeline-item {
  background: #F6F4EF;
  padding: 20px;
  margin-bottom: 15px;
  border-left: 4px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.timeline-mobile h5 {
  font-size: 18px;
  margin-bottom: 8px;
}



/* ===== BASE RESET (kills global styles) ===== */

.year-slider .pdf-link,
.year-slider .pdf-link span,
.year-slider .pdf-link::before,
.year-slider .pdf-link::after {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ===== BASE CARD ===== */

.year-slider .pdf-link {
  display: block;
  padding: 15px;
  background-color: white !important;

  border: 3px solid #ccc;
  color: black !important;
   text-decoration: none;
  font-weight: 600;

  position: relative;
  overflow: hidden;   /* ✅ hides sliding layer */

  transition: color 0.3s ease, transform 0.2s ease;
}

/* ===== TEXT FIX ===== */

.year-slider .pdf-link span {
  position: relative;
  z-index: 2;
  color: inherit !important;
}

/* ===== SLIDING COLOUR LAYER ===== */

.year-slider .pdf-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 0%;           /* ✅ starts hidden */
  height: 100%;

  z-index: 1;

  transition: width 0.35s ease;
}

/* ===== HOVER / ACTIVE / FOCUS ===== */

.year-slider .pdf-link:hover::before,
.year-slider .pdf-link:active::before,
.year-slider .pdf-link:focus::before {
  width: 100%;         /* ✅ SLIDE IN */
}

.year-slider .pdf-link:hover,
.year-slider .pdf-link:active,
.year-slider .pdf-link:focus {
  transform: translateY(-2px);
}


/* ===== YEAR COLOURS ===== */

/* YEAR 7 */
.year-slider .year7 { border-color: #cc0000; }
.year-slider .year7:hover,
.year-slider .year7:active,
.year-slider .year7:focus {
  background-color: #cc0000 !important;
  color: white !important;
  border-color: #cc0000 !important;
}

/* YEAR 8 */
.year-slider .year8 { border-color: #ff8800; }
.year-slider .year8:hover,
.year-slider .year8:active,
.year-slider .year8:focus {
  background-color: #ff8800 !important;
  color: white !important;
  border-color: #ff8800 !important;
}

/* YEAR 9 */
.year-slider .year9 { border-color: #ffcc00; }
.year-slider .year9:hover,
.year-slider .year9:active,
.year-slider .year9:focus {
  background-color: #ffcc00 !important;
  color: black !important;
  border-color: #ffcc00 !important;
}

/* YEAR 10 */
.year-slider .year10 { border-color: #006400; }
.year-slider .year10:hover,
.year-slider .year10:active,
.year-slider .year10:focus {
  background-color: #006400 !important;
  color: white !important;
  border-color: #006400 !important;
}

/* YEAR 11 */
.year-slider .year11 { border-color: #4169e1; }
.year-slider .year11:hover,
.year-slider .year11:active,
.year-slider .year11:focus {
  background-color: #4169e1 !important;
  color: white !important;
  border-color: #4169e1 !important;
}

/* YEAR 12 */
.year-slider .year12 { border-color: #000080; }
.year-slider .year12:hover,
.year-slider .year12:active,
.year-slider .year12:focus {
  background-color: #000080 !important;
  color: white !important;
  border-color: #000080 !important;
}

/* YEAR 13 */
.year-slider .year13 { border-color: #800080; }
.year-slider .year13:hover,
.year-slider .year13:active,
.year-slider .year13:focus {
  background-color: #800080 !important;
  color: white !important;
  border-color: #800080 !important;
}

/* ===== OPTIONAL POLISH ===== */

.year-slider .pdf-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.pillars-img {
    max-width: 100%;
    height: auto;   /* ✅ keeps correct proportions */
    display: block;
}

html, body {
    margin: 0;
    padding: 0;
    height: auto;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#footer-placeholder {
    margin-top: auto; /* ✅ pushes footer to bottom correctly */
}