/* ============================================================
   Don Bosco High School, Hesag — landing page stylesheet
   ============================================================ */

:root{
  --blue:#1567C7;
  --blue-deep:#0F4F9C;
  --navy:#12294A;
  --cream:#FDF8ED;
  --cream-2:#FBF3DD;
  --yellow:#F7B93E;
  --yellow-deep:#E8A317;
  --red:#FF5A45;
  --red-deep:#E43F2B;
  --indigo:#332F63;
  --indigo-deep:#231F49;
  --line:rgba(18,41,74,.12);
  --shadow:0 14px 34px rgba(18,41,74,.14);
  --radius:20px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter', sans-serif;
  color:var(--navy);
  background:var(--cream);
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Poppins', sans-serif;
  margin:0 0 .45em 0;
  line-height:1.15;
}
p{margin:0 0 1em 0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}

:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- NAVBAR ---------- */
header{
  background:var(--blue);
  position:sticky; top:0; z-index:200;
}
.nav-wrap{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; gap:20px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:44px; height:44px; border-radius:10px; background:transparent;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden;
}
.brand-mark img{
  width:100%; height:100%; object-fit:contain; display:block;
}
nav.desktop-nav{display:flex; align-items:center; gap:6px;}
.nav-link{
  color:#fff; font-size:.92rem; font-weight:500; padding:9px 13px; border-radius:8px;
  transition:background .15s ease;
  white-space:nowrap;
}
.nav-link:hover, .nav-link.active{background:rgba(255,255,255,.16);}
.nav-login{
  display:flex; align-items:center; gap:6px; color:#fff; font-weight:600; font-size:.9rem;
  padding:9px 14px; border:1.5px solid rgba(255,255,255,.5); border-radius:999px; margin-left:6px;
}
.nav-login:hover{background:rgba(255,255,255,.12);}

.hamburger{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.hamburger span{display:block; width:24px; height:2.5px; background:#fff; margin:5px 0; border-radius:2px;}
.mobile-menu{display:none; flex-direction:column; background:var(--blue-deep); padding:6px 24px 16px;}
.mobile-menu.open{display:flex;}
.mobile-menu .nav-link{color:#fff; padding:11px 6px; border-bottom:1px solid rgba(255,255,255,.12);}

@media (max-width:980px){
  nav.desktop-nav, .nav-login{display:none;}
  .hamburger{display:block;}
}

.tagline-bar{background:var(--blue-deep); color:#eaf2fd; text-align:center; font-size:.86rem; padding:9px 20px;}

/* ---------- HERO PHOTO BANNER ---------- */
.hero-photo {
  position: relative;
  width: 100%;
  /* Locks dimensions strictly to the 16:9 photo proportion */
  aspect-ratio: 16 / 9;
  /* Remove fixed height clamps so it scales naturally */
  height: auto;
  min-height: unset;
  max-height: 85vh; /* Prevents it from overflowing extremely tall screens */

  background-size: contain; /* or cover; with 16:9 both display 100% of the image */
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #0b1d3a;
  transition: background-image 0.6s ease-in-out;
}
.chat-fab{
  position:absolute; right:28px; bottom:24px;
  background:var(--yellow); color:var(--navy); border:none; cursor:pointer;
  font-weight:700; font-size:.92rem; padding:13px 22px; border-radius:999px;
  display:flex; align-items:center; gap:8px; box-shadow:var(--shadow);
}

/* ---------- SECOND HERO (dark, illustrated) ---------- */
.hero-illustrated{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #26262b 0%, #26262b 62%, var(--yellow) 62%, var(--yellow-deep) 100%);
  padding:90px 32px 70px;
  text-align:center;
}
.hero-illustrated .inner{max-width:760px; margin:0 auto; position:relative; z-index:3;}
.hero-illustrated h1{color:#fff; font-size:2.7rem; font-weight:700;}
.hero-illustrated p{color:#cfd2d8; font-size:1.1rem;}
.supply-row/* Animated Flying Letters */
#animatedTitle {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.05em;
  min-height: 1.2em;
  overflow: visible;
}

.scatter-letter {
  display: inline-block;
  opacity: 0;
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
  will-change: transform, opacity;
}

.scatter-letter.assembled {
  opacity: 1;
  transform: translate(0px, 0px) rotate(0deg) scale(1);
}

.scatter-space {
  display: inline-block;
  width: 0.35em;
}
.supply{
  width:76px; height:76px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:2.1rem; box-shadow:0 16px 26px rgba(0,0,0,.28);
  transform:rotate(var(--r, 0deg));
}
.s1{background:#8fd14f; transform:rotate(-8deg);}
.s2{background:#f4f4f4; transform:rotate(4deg);}
.s3{background:#3a3a40; transform:rotate(-3deg);}
.s4{background:var(--red); transform:rotate(7deg);}
.s5{background:#fbd971; transform:rotate(-5deg);}

/* ---------- WELCOME SPLIT (GREETING) ---------- */
.welcome-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1220px;
  margin: 40px auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.welcome-text {
  background: var(--yellow);
  padding: 64px 56px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.welcome-text h2 {
  font-size: 1.9rem;
  color: var(--navy);
}

.welcome-text p {
  font-size: 1rem;
  max-width: 46ch;
  color: var(--navy);
}

/* Photo with warm, gentle ambient tint */
.welcome-photo {
  min-height: 380px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.welcome-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(247, 185, 62, 0.15) 0%, rgba(18, 41, 74, 0.2) 100%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .welcome-split {
    grid-template-columns: 1fr;
    margin: 20px 16px;
  }
}

/* ---------- HIGHLIGHTS BANNER ---------- */
/* Highlights Banner with Moving Animated Gradient */
.highlights{
  background: linear-gradient(-45deg, #1567C7, #0F4F9C, #183059, #12294A) !important;
  background-size: 300% 300% !important;
  animation: bgGradientMove 12s ease infinite !important;
  color:#fff; text-align:center; padding:70px 32px;
  position: relative; overflow: hidden;
}

@keyframes bgGradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Auto-Scrolling Notice Board Container */
.notice-board-container {
  max-width: 680px;
  height: 140px;
  margin: 24px auto;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.notice-ticker {
  display: flex;
  flex-direction: column;
  animation: autoScrollNotices 12s linear infinite;
}

.notice-board-container:hover .notice-ticker {
  animation-play-state: paused;
}

.notice-item {
  padding: 14px 20px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}

.notice-item strong {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 4px;
  margin-right: 8px;
  font-weight: 700;
}

@keyframes autoScrollNotices {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* ---------- SCHEDULE ---------- */
.schedule-head{
  max-width:1220px; margin:0 auto; padding:70px 32px 30px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
}
.schedule-head h2{color:var(--blue); font-size:2rem; max-width:26ch;}
.schedule-head p{max-width:48ch; color:#4a5a72;}
.btn-blue{
  background:var(--blue); color:#fff; font-weight:700; padding:14px 26px; border-radius:999px;
  border:none; cursor:pointer; font-size:.94rem; white-space:nowrap;
}
.schedule-grid{
  max-width:1220px; margin:0 auto; padding:0 32px 80px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
}
.day-card{
  padding:34px 20px; text-align:center; color:var(--navy);
}
.day-card:nth-child(odd){background:var(--yellow);}
.day-card:nth-child(even){background:var(--red); color:#fff;}
.day-badge{
  width:42px; height:42px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 16px;
  font-family:'Poppins';
}
.day-card h3{font-size:1.15rem; margin-bottom:12px;}
.day-card .slot{font-size:.82rem; margin-bottom:5px; opacity:.95;}
@media (max-width:900px){ .schedule-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .schedule-grid{grid-template-columns:1fr;} }

/* ---------- LEARNING RESOURCES ---------- */
.resources{max-width:1220px; margin:0 auto; padding:20px 32px 80px;}
.resources h2{color:var(--blue); font-size:1.9rem;}
.resources p{max-width:56ch; color:#4a5a72;}
.resource-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:30px;
}
.resource-tile{
  background:#eef1f4; border-radius:14px; height:110px;
  display:flex; align-items:center; justify-content:center;
  color:#9aa4b0; font-weight:700; font-size:.9rem; text-align:center; padding:12px;
}
@media (max-width:760px){ .resource-row{grid-template-columns:1fr 1fr;} }

/* ---------- CONTACT SPLIT (GET IN TOUCH) ---------- */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1220px;
  margin: 60px auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Photo with soothing indigo twilight tint */
/* CONTACT SPLIT PHOTO FIX */
.contact-photo {
  min-height: 520px;
  background-size: contain !important; /* Shows 100% of the width and height */
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #1c1842; /* Fills empty top/bottom space with indigo */
  position: relative;
}

.contact-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(51, 47, 99, 0.25) 0%, rgba(35, 31, 73, 0.6) 100%);
  pointer-events: none;
}

.contact-panel {
  background: linear-gradient(155deg, var(--indigo), var(--indigo-deep));
  color: #fff;
  padding: 64px 56px;
}

.contact-panel .badge {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 22px;
}

.contact-panel h2 {
  color: #fff;
  font-size: 1.7rem;
  max-width: 18ch;
}

.contact-panel > p {
  color: #c6c4de;
  max-width: 44ch;
}

.contact-panel h4 {
  color: #fff;
  font-size: 1.05rem;
  margin-top: 26px;
}

.contact-panel .reach {
  color: #c6c4de;
  font-size: 0.92rem;
}

.contact-form {
  margin-top: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 0.92rem;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #a9a7c4;
}

.contact-form textarea {
  min-height: 100px;
  resize: vertical;
  margin-bottom: 16px;
  width: 100%;
}

.btn-submit {
  background: #fff;
  color: var(--indigo-deep);
  font-weight: 700;
  padding: 12px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.94rem;
}

@media (max-width: 900px) {
  .contact-split {
    grid-template-columns: 1fr;
    margin: 20px 16px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- EVENT PHOTO GALLERY ---------- */
.gallery-featured {
  margin-top: 28px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  height: min(46vw, 420px);
  min-height: 260px;
  /* Dark backdrop so images with different aspect ratios sit cleanly */
  background: #0b1d3a; 
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-featured img {
  width: 100%;
  height: 100%;
  /* Fix: 'contain' fits the entire photo without cropping any part */
  object-fit: contain; 
  transition: opacity .5s ease;
}

.custom-file-upload {
  display: inline-block;
  padding: 10px 22px;
  cursor: pointer;
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.2s;
}

.custom-file-upload:hover {
  background: var(--blue-deep);
}

#galleryFileInput {
  display: none;
}

.gallery-thumbs{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:14px;
}
.gallery-thumbs button{
  padding:0; border:2px solid transparent; border-radius:12px; overflow:hidden;
  cursor:pointer; background:#e7ebef; aspect-ratio:1/1;
}
.gallery-thumbs button.active{border-color:var(--blue);}
.gallery-thumbs img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:760px){ .gallery-thumbs{grid-template-columns:repeat(3,1fr);} }

/* ---------- PRINCIPAL'S MESSAGE ---------- */
.principal-section{background:var(--cream-2); padding:80px 32px;}
.principal-inner{
  max-width:1100px; margin:0 auto; display:grid; grid-template-columns:280px 1fr; gap:46px; align-items:center;
}
.principal-photo{
  width:100%; aspect-ratio:1/1; border-radius:50%; object-fit:cover;
  box-shadow:var(--shadow); border:6px solid #fff;
  background:#dfe4e9;
}
.principal-photo-fallback{
  width:100%; aspect-ratio:1/1; border-radius:50%; background:linear-gradient(155deg,var(--blue),var(--blue-deep));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:3rem;
  box-shadow:var(--shadow); border:6px solid #fff; font-family:'Poppins'; font-weight:700;
}
.principal-text .eyebrow{
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
  font-weight:700; display:block; margin-bottom:8px;
}
.principal-text h2{font-size:1.9rem; color:var(--navy);}
.principal-text p{color:#4a5a72; font-size:1.02rem;}
.principal-text .signoff{font-family:'Poppins'; font-weight:700; color:var(--navy); margin-top:18px;}
@media (max-width:760px){
  .principal-inner{grid-template-columns:1fr; text-align:center;}
  .principal-photo, .principal-photo-fallback{max-width:220px; margin:0 auto;}
}

/* ---------- STAFF SECTION ---------- */
.staff-section{max-width:1220px; margin:0 auto; padding:80px 32px;}
.staff-section h2{color:var(--blue); font-size:1.9rem;}
.staff-section > p{max-width:56ch; color:#4a5a72;}
.staff-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:30px;
}
.staff-card{
  background:#fff; border-radius:var(--radius); padding:26px 20px; text-align:center;
  border:1px solid var(--line);
}
.staff-photo{
  width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 14px; background:#e7ebef;
}
.staff-photo-fallback{
  width:88px; height:88px; border-radius:50%; margin:0 auto 14px;
  background:linear-gradient(155deg,var(--yellow),var(--yellow-deep));
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Poppins'; font-weight:700; font-size:1.3rem;
}
.staff-card h4{font-size:1.02rem; margin-bottom:2px;}
.staff-role{color:var(--blue); font-weight:600; font-size:.86rem; margin-bottom:2px;}
.staff-dept{color:#8a97a6; font-size:.78rem;}
.staff-empty{
  grid-column:1/-1; text-align:center; color:#8a97a6; padding:30px; font-size:.94rem;
  background:#f2f4f6; border-radius:16px;
}
@media (max-width:900px){ .staff-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .staff-grid{grid-template-columns:1fr;} }

/* ---------- FOOTER ---------- */
footer{background:var(--blue-deep); color:#dbe8fb; text-align:center; padding:22px; font-size:.84rem;}