/* =========================================================
   Caray College International - Site Theme
   Palette derived from the school uniform:
   maroon cardigan, gold tie stripes, navy plaid, white shirt
   ========================================================= */
:root{
  --maroon:#7A1F2B;
  --maroon-dark:#59151E;
  --maroon-light:#9C3242;
  --gold:#C9A227;
  --gold-light:#E9CE6C;
  --navy:#14213D;
  --cream:#FBF7EE;
  --white:#FFFFFF;
  --ink:#241A1D;
  --gray:#6b6167;
  --radius:14px;
  --shadow:0 10px 30px rgba(36,26,29,.10);
  --font-heading:"Poppins",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
}
h1,h2,h3,h4,h5,.font-heading{font-family:var(--font-heading);font-weight:700;}
a{text-decoration:none;}

.text-maroon{color:var(--maroon)!important;}
.text-gold{color:var(--gold)!important;}
.text-navy{color:var(--navy)!important;}
.bg-maroon{background:var(--maroon)!important;}
.bg-navy{background:var(--navy)!important;}
.bg-cream{background:var(--cream)!important;}
.bg-gold{background:var(--gold)!important;}

/* ---- Buttons ---- */
.btn-caray{
  background:var(--maroon);
  color:#fff;
  border:2px solid var(--maroon);
  border-radius:50px;
  padding:.7rem 1.6rem;
  font-weight:600;
  transition:.2s ease;
  display:inline-block;
}
.btn-caray:hover{background:var(--maroon-dark);border-color:var(--maroon-dark);color:#fff;}
.btn-caray-outline{
  background:transparent;
  color:var(--white);
  border:2px solid var(--gold);
  border-radius:50px;
  padding:.7rem 1.6rem;
  font-weight:600;
  transition:.2s ease;
  display:inline-block;
}
.btn-caray-outline:hover{background:var(--gold);color:var(--navy);}
.btn-gold{
  background:var(--gold);
  color:var(--navy);
  border:2px solid var(--gold);
  border-radius:50px;
  padding:.7rem 1.6rem;
  font-weight:600;
  display:inline-block;
}
.btn-gold:hover{background:var(--gold-light);color:var(--navy);}

/* ---- Top bar & nav ---- */
.topbar{background:var(--navy);color:#eae7df;font-size:.85rem;}
.topbar a{color:#eae7df;}
.topbar a:hover{color:var(--gold);}

.navbar-caray{background:var(--white);box-shadow:0 2px 12px rgba(0,0,0,.06);}
.navbar-caray .navbar-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-heading);font-weight:700;color:var(--maroon);font-size:1.15rem;}
.navbar-caray .navbar-brand img{height:46px;width:46px;object-fit:contain;}
.navbar-caray .nav-link{color:var(--ink)!important;font-weight:600;margin:0 .35rem;}
.navbar-caray .nav-link:hover,.navbar-caray .nav-link.active{color:var(--maroon)!important;}

/* ---- Hero (carousel) ---- */
.hero-carousel{
  position:relative;
  min-height:82vh;
  overflow:hidden;
  color:#fff;
}
.hero-carousel,.hero-carousel .carousel,.hero-carousel .carousel-inner,.hero-carousel .carousel-item{
  height:82vh;
}
.hero-slide-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center 25%; /* biases toward the upper part of the photo so heads/faces in group shots aren't cut off as harshly */
  background-color:var(--navy);
}
.hero-slide-caption{
  position:absolute;
  left:1.5rem;
  bottom:1.5rem;
  z-index:2;
  background:rgba(20,33,61,.55);
  color:#fff;
  font-size:.8rem;
  letter-spacing:.03em;
  padding:.4rem .9rem;
  border-radius:50px;
  border:1px solid rgba(255,255,255,.25);
}
/* A gradient that's always strong enough behind the text/buttons,
   regardless of how bright, busy, or light-coloured the underlying
   photo is (light blue graduation gowns, white shirts, etc. were
   washing out the previous lighter version). Concentrated bottom-left,
   where the text sits, fading out toward the top-right so most of the
   photo still reads clearly. */
.hero-carousel .carousel-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(6,10,20,.95) 0%,rgba(6,10,20,.88) 22%,rgba(6,10,20,.6) 42%,rgba(6,10,20,.25) 60%,rgba(6,10,20,.05) 74%),
    linear-gradient(0deg,rgba(6,10,20,.9) 0%,rgba(6,10,20,.5) 32%,rgba(6,10,20,0) 55%);
  z-index:1;
  pointer-events:none;
}
/* Per-slide text + CTAs sit above both image layers and the gradient. */
.hero-slide-content{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:flex-end;
  padding-bottom:4.5rem;
}
.hero-text-block h1{
  font-size:clamp(2.1rem,4.4vw,3.6rem);
  line-height:1.12;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.65), 0 10px 30px rgba(0,0,0,.5);
}
.hero-text-block p.lead{
  color:#f2efe8;
  max-width:520px;
  font-size:1.05rem;
  text-shadow:0 1px 4px rgba(0,0,0,.65);
}
/* Overline label: solid gold with a heavy shadow so it reads over any
   photo, including light backgrounds — the earlier lighter gold text
   with a faint line was disappearing over light-coloured photos. */
.hero-text-block .hero-eyebrow{
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--gold);
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-size:.82rem;
  text-shadow:0 1px 3px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.6);
  margin-bottom:1rem!important;
}
.hero-text-block .hero-eyebrow::after{
  content:"";
  display:block;
  width:50px;
  height:2px;
  background:var(--gold);
  box-shadow:0 1px 3px rgba(0,0,0,.6);
}
/* Buttons: refined rectangles (not pills), uppercase, letter-spaced —
   scoped to the hero only, so the rest of the site keeps its rounded
   button style. The outline button gets a real semi-opaque fill (not
   just a border) so it stays legible over any photo, not just dark
   ones — a transparent outline was disappearing over light photos. */
.hero-text-block{margin-top:1.5rem;}
.hero-text-block .btn-caray,
.hero-text-block .btn-caray-outline{
  border-radius:6px;
  text-transform:uppercase;
  font-size:.82rem;
  letter-spacing:.06em;
  font-weight:700;
  padding:.85rem 1.75rem;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.hero-text-block .btn-caray-outline{
  background:rgba(6,10,20,.75);
  border:1.5px solid rgba(255,255,255,.9);
  color:#fff;
}
.hero-text-block .btn-caray-outline:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy);
}
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{
  z-index:3;
  width:8%;
  opacity:.7;
}
.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover{opacity:1;}
.hero-carousel .carousel-indicators{z-index:3;margin-bottom:1.5rem;justify-content:flex-start;margin-left:1rem;}
.hero-carousel .carousel-indicators [data-bs-target]{
  background-color:rgba(255,255,255,.5);
  width:8px;height:8px;border-radius:50%;
  opacity:1;
}
.hero-carousel .carousel-indicators .active{
  background-color:var(--gold);
  width:24px;
  border-radius:4px;
}

/* ---- Sections ---- */
.section{padding:5rem 0;}
.section-title-eyebrow{
  color:var(--maroon);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.85rem;
}
.section-title{font-size:clamp(1.6rem,3vw,2.4rem);color:var(--navy);}
.divider-gold{width:64px;height:4px;background:var(--gold);border-radius:2px;}
.badge-motto{
  display:inline-block;
  border:1px solid var(--gold);
  border-radius:50px;
  padding:.35rem 1rem;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* ---- Cards ---- */
.card-caray{
  background:#fff;
  border:1px solid rgba(20,33,61,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:.25s ease;
  height:100%;
}
.card-caray:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(36,26,29,.16);}
.icon-badge{
  width:54px;height:54px;border-radius:14px;
  background:linear-gradient(135deg,var(--maroon),var(--maroon-light));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.stat-card{border-top:4px solid var(--gold);}
.stat-value{font-family:var(--font-heading);font-size:2.2rem;color:var(--maroon);font-weight:700;}

/* ---- Facility cards: photo-forward, caption revealed as an overlay ---- */
.facility-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  aspect-ratio:4/3;
  transition:.3s ease;
}
.facility-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(36,26,29,.18);}
.facility-card-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.facility-card-img--icon{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--maroon),var(--navy));
  color:var(--gold-light);
  font-size:2.6rem;
}
.facility-card-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.2rem;
  background:linear-gradient(0deg,rgba(20,33,61,.92) 0%,rgba(20,33,61,.55) 45%,rgba(20,33,61,0) 80%);
  color:#fff;
}
.facility-card-overlay p{color:#eae7df;}

/* ---- Principal ---- */
.principal-photo{
  border-radius:var(--radius);
  border:6px solid #fff;
  box-shadow:var(--shadow);
  width:280px;
  height:280px;
  object-fit:cover;
  object-position:top center;
}
.quote-mark{font-size:3.5rem;color:var(--gold);line-height:1;font-family:Georgia,serif;}

/* ---- Gallery ---- */
.gallery-thumb{
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius);
  width:100%;
}
.gallery-card{position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);}
.gallery-card .overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(20,33,61,.85),rgba(20,33,61,0) 55%);
  display:flex;align-items:flex-end;padding:1.2rem;color:#fff;
}
.lightbox-backdrop{
  position:fixed;inset:0;background:rgba(20,33,61,.94);z-index:1090;
  display:none;align-items:center;justify-content:center;flex-direction:column;
}
.lightbox-backdrop img{max-height:82vh;max-width:90vw;border-radius:8px;}

/* ---- Testimonials ---- */
.testimonial-card{border-left:5px solid var(--gold);}

/* ---- Footer ---- */
.footer-caray{background:var(--navy);color:#cfd3dd;}
.footer-caray h5{color:#fff;}
.footer-caray a{color:#cfd3dd;}
.footer-caray a:hover{color:var(--gold);}
.footer-caray .social-icon{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  display:inline-flex;align-items:center;justify-content:center;
  margin-right:.4rem;
}
.footer-caray .social-icon:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);}
.footer-bottom{background:#0e1830;font-size:.85rem;}

/* ---- Admin ---- */
.admin-sidebar{
  background:var(--navy);
  min-height:100vh;
  color:#e7e9f0;
  width:250px;
  flex-shrink:0; /* never let flexbox squeeze the sidebar to make room for
                    wide content (e.g. a table) sitting beside it — this
                    was the "sidebar resizes when opening content" bug */
}
.admin-sidebar .brand{color:#fff;font-family:var(--font-heading);font-weight:700;padding:1.2rem;border-bottom:1px solid rgba(255,255,255,.08);}
.admin-sidebar a{color:#c7cbdc;display:block;padding:.65rem 1.2rem;border-left:3px solid transparent;font-size:.92rem;}
.admin-sidebar a:hover{background:rgba(255,255,255,.06);color:#fff;}
.admin-sidebar a.active{color:#fff;border-left-color:var(--gold);background:rgba(255,255,255,.08);}
.admin-sidebar .section-label{color:#8b90a8;text-transform:uppercase;font-size:.7rem;letter-spacing:.08em;padding:1rem 1.2rem .3rem;}
.admin-topbar{background:#fff;border-bottom:1px solid #eee;}
.admin-content{
  background:#f4f5f9;
  min-height:100vh;
  min-width:0; /* lets this flex item shrink below its content's natural
                  width so wide tables scroll within .table-responsive
                  instead of stretching the whole layout and squeezing
                  the sidebar */
  flex:1 1 auto;
}
.stat-tile{background:#fff;border-radius:12px;padding:1.2rem;box-shadow:0 4px 14px rgba(0,0,0,.05);border-top:3px solid var(--maroon);}
.table-caray thead{background:var(--navy);color:#fff;}
.thumb-sm{width:46px;height:46px;object-fit:cover;border-radius:6px;}
.thumb-md{width:90px;height:70px;object-fit:cover;border-radius:8px;}

@media(max-width:991px){
  .admin-sidebar{position:fixed;left:-260px;top:0;bottom:0;z-index:1050;transition:.25s;}
  .admin-sidebar.show{left:0;}
}

/* =========================================================
   Mobile responsiveness
   ========================================================= */
@media(max-width:768px){
  .section{padding:3rem 0;}
  .hero-carousel,
  .hero-carousel .carousel,
  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item{height:78vh;min-height:480px;}
  .hero-slide-content{padding-bottom:2.5rem;}
  .hero-text-block{text-align:center;}
  .hero-text-block h1{font-size:1.9rem;}
  .hero-text-block .hero-eyebrow{justify-content:center;}
  .hero-text-block .d-flex.flex-wrap{justify-content:center!important;}
  /* On narrow screens there's no room for a left-to-right gradient to
     read well, so darken evenly behind the whole slide instead. */
  .hero-carousel .carousel-inner::before{
    background:linear-gradient(180deg,rgba(6,10,20,.55) 0%,rgba(6,10,20,.7) 50%,rgba(6,10,20,.92) 100%);
  }
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next{width:12%;}
  .navbar-caray .navbar-brand{font-size:1rem;}
  .navbar-caray .navbar-brand img{height:36px;width:36px;}
  .topbar{font-size:.75rem;}
  .topbar .container{flex-direction:column;gap:.25rem;text-align:center;}
  .principal-photo{width:180px!important;height:180px!important;}
  .quote-mark{font-size:2.5rem;}
  .footer-caray{text-align:center;}
  .footer-caray .social-icon{margin:0 .25rem;}
  .stat-value{font-size:1.6rem;}
  .card-caray{padding:1.25rem!important;}
}

@media(max-width:576px){
  .btn-caray,.btn-caray-outline,.btn-gold{width:100%;text-align:center;}
  .hero-slide-content .d-flex.flex-wrap{flex-direction:column;}
  .hero-text-block .hero-eyebrow{font-size:.7rem;}
  .section-title{font-size:1.4rem;}
  .nav-pills .nav-link,.nav-tabs .nav-link{font-size:.85rem;padding:.5rem .75rem;}
  .lightbox-backdrop img{max-width:96vw;}
}

/* Admin: keep wide tables from breaking the page layout on phones —
   the table itself scrolls horizontally inside its own box instead of
   the whole page scrolling sideways. */
.table-responsive{-webkit-overflow-scrolling:touch;}

@media(max-width:576px){
  .admin-content .p-4{padding:1rem!important;}
  .admin-topbar{padding:.75rem 1rem!important;}
  .stat-tile{padding:.9rem;}
  .stat-tile .fs-3{font-size:1.4rem!important;}
  .table-caray{font-size:.85rem;}
  .modal-dialog{margin:.75rem;}
}