:root{--primary:#1e3a8a;--accent:#f97316;--light:#f8fafc;--dark:#0f172a}
*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Arial,sans-serif}
body{background:var(--light);color:var(--dark)}
header{background:linear-gradient(rgba(30,58,138,.45),rgba(30,58,138,.45)), url('wpimages/pool2.jpg') center/cover;color:#fff;text-align:center;padding:4rem 1rem}
header h1{font-size:2.8rem}
header p{margin-top:.5rem;font-size:1.1rem}
nav{background:#fff;display:flex;justify-content:center;gap:1.2rem;padding:1rem;flex-wrap:wrap;box-shadow:0 2px 6px rgba(0,0,0,.1)}
nav a{color:var(--primary);text-decoration:none;font-weight:600}
.container{max-width:1100px;margin:auto;padding:2rem 1rem; }
.hero{background:#fff;padding:2rem;border-radius:12px;margin-bottom:1.5rem;text-align:center;box-shadow:0 10px 14px rgba(0,0,0,.14)}
.hero h2{font-size:1.8rem;margin-bottom:.5rem}

.grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}


.card{background:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.card h3{margin-bottom:.5rem}
.btn{display:inline-block;margin-top:.7rem;padding:.6rem 1.2rem;background:var(--accent);color:#fff;border-radius:6px;text-decoration:none;font-weight:bold}
.btn:hover{opacity:.9}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.gallery img{width:100%;border-radius:10px}
.highlight{background:var(--primary);color:#fff;padding:1.5rem;border-radius:10px;margin-bottom:1.5rem;text-align:center}
footer{text-align:center;padding:1.5rem;margin-top:2rem;border-top:1px solid #ddd;font-size:.9rem}
@media(max-width:600px){header h1{font-size:2rem}}
@media (max-width: 768px){.grid{grid-template-columns:1fr}}


.private-hire {grid-column: 1 / -1;  max-width: 400px;    margin: 0 auto; }


.featured {grid-column: 1 / -1; /* spans full width */
    max-width: 500px;
    margin: 0 auto; /* centre it */
    text-align: center;
    background: linear-gradient(135deg, #5b21b6, #3b0fd1);
    border: 3px solid #f97316;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    transform: scale(1.05);
}

.featured h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.featured p {
    font-size: 1.1rem;
}

/* Optional badge */
.featured::before {
    content: "POPULAR";
    display: inline-block;
    background: #f97316;
    color: #fff;
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 5px;
    margin-bottom: 10px;}

.times-section { margin-bottom: 2rem; }
.times-section h2 { text-align: center; margin-bottom: 1rem; }
.times-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.times-card { background:#fff; padding:1.5rem; border-radius:10px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.notice { background:#fff3cd; padding:1rem; margin-top:1rem; border-radius:8px; text-align:center; }
.warning { background:#fdecea; padding:1rem; margin-top:1rem; border-radius:8px; text-align:center; font-weight:bold; }






/* Updated box colour */
.panel, .card {
  background: #2d4a9c !important;
  color: #ffffff;
}

.panel p, .panel h3, .card {
  color: #ffffff;
}


/* Updated box colour from image */
.panel, .card {
  background: #3a55a4 !important;
  color: #ffffff;
}

.panel h3, .panel p, .card h2, .card p {
  color: #ffffff;
}


/* Match Opening Times cards to Admission panels */
.times-card {
  background: #3a55a4 !important;
  color: #ffffff;
}

.times-card strong,
.times-card {
  color: #ffffff;
}

/* Optional consistency for all cards */
.card {
  background: #3a55a4 !important;
  color: #ffffff;

}


/* Updated highlight banner with orange border */
.highlight2 {
  background: #3a55a4;
  color: #ffffff;
  border: 4px solid #f97316;

}

.highlight strong {
  color: #ffffff;
}


/* Lightbox styling */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90%;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}

.gallery img {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}
input, textarea {
 width: 100%;
 padding: 10px;
 border-radius: 6px;
 border: none;
 margin-top: 5px;
}

.socials {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 margin-top: 10px;
}

.socials .btn i {
 margin-right: 6px;
}


/* form */
input, textarea {
 width: 100%;
 padding: 10px;
 border-radius: 6px;
 border: none;
 margin-top: 5px;
}

/* socials */
.socials {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 margin-top: 10px;
}
.socials .btn i { margin-right: 6px; }

/* full width map */
.map-full {
 grid-column: 1 / -1;
}