/* ===== Global & Reset ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#0f2b44;
  background-color:#f7fbff;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

/* Container */
.container{width:90%;max-width:1200px;margin:0 auto;padding:28px 0;text-align:center}

/* Header */
.site-header{background:#0b63b7;color:#fff;padding:18px 0;position:sticky;top:0;z-index:80;box-shadow:0 6px 20px rgba(11,99,183,0.12)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-weight:800;color:#fff;text-decoration:none;font-size:1.15rem}
.topnav ul{list-style:none;display:flex;gap:16px;align-items:center}
.topnav a{color:#fff;text-decoration:none;font-weight:700;padding:8px 12px;border-radius:8px;transition:background .18s}
.topnav a:hover{background:rgba(255,255,255,0.08)}
.menu-toggle{display:none;background:transparent;border:none;color:#fff;font-size:20px}

/* Dropdown */
.dropdown{position:relative;display:inline-block}
.dropbtn{cursor:pointer;color:#fff;text-decoration:none;font-weight:700;padding:8px 12px;border-radius:8px;display:inline-block}
.dropdown-content{display:none;position:absolute;left:0;top:100%;background:#ffffff;color:#0f2b44;min-width:200px;border-radius:8px;box-shadow:0 8px 30px rgba(3,45,90,0.12);overflow:hidden}
.dropdown-content a{display:block;padding:10px 14px;color:#0f2b44;text-decoration:none}
.dropdown-content a:hover{background:#f3f8ff}
.dropdown:hover .dropdown-content{display:block}

/* Hero */
.hero-inner{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:32px 0}
.hero-copy{flex:1 1 420px;max-width:620px;text-align:left}
.hero-copy h1{font-size:2.2rem;color:#052a4f;margin-bottom:8px}
.subtitle{color:#5f768e;margin-bottom:16px}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 18px;border-radius:8px;text-decoration:none;cursor:pointer;font-weight:700}
.btn-primary{background:#0b63b7;color:#fff;border:2px solid #0b63b7}
.btn-primary:hover{background:#0b78e0}
.btn-ghost{background:transparent;color:#0b63b7;border:2px solid rgba(11,99,183,0.12)}
.hero-media{flex:0 1 420px;display:flex;justify-content:center}
.hero-photo{width:100%;max-width:420px;height:280px;object-fit:cover;border-radius:14px;box-shadow:0 18px 40px rgba(3,45,90,0.08);border:8px solid #fff}

/* Features */
.section-title{font-size:1.4rem;color:#052a4f;margin-bottom:18px}
.feature-grid{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.feature-card{background:#fff;padding:18px;border-radius:10px;min-width:220px;max-width:300px;box-shadow:0 12px 30px rgba(3,45,90,0.04);text-align:left}
.feature-card h3{margin-bottom:8px}

/* About / CTA / Cards */
.lead{color:#5f768e;max-width:760px;margin:0 auto 12px auto}
.cta-card{background:#eaf5ff;padding:20px;border-radius:12px;box-shadow:0 12px 30px rgba(11,99,183,0.06)}

/* Forms & contact */
.form{max-width:700px;margin:14px auto 40px;display:grid;gap:10px;text-align:left}
.form label{font-weight:700;color:#0b63b7;display:block}
.form input,.form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #dbeafc;margin-top:6px}
.form-actions{text-align:center;margin-top:8px}
.flash-wrap{margin:12px auto;max-width:900px}
.flash{padding:10px 14px;border-radius:8px;background:#eafaf0;color:#064f2a;box-shadow:0 8px 20px rgba(2,120,80,0.04);}

/* Social list */
.social-list{list-style:none;display:flex;gap:12px;justify-content:center;padding-top:8px}
.social-list a{color:#0b63b7;text-decoration:none;font-weight:700}

/* Footer */
.site-footer{background:#0b63b7;color:#fff;padding:18px 0;margin-top:40px}

/* Modal */
.modal{display:none;position:fixed;inset:0;background:rgba(2,16,33,0.55);align-items:center;justify-content:center;z-index:200}
.modal.show{display:flex}
.modal-content{background:#fff;padding:18px;border-radius:8px;max-width:420px;width:90%;box-shadow:0 18px 50px rgba(3,45,90,0.12)}
.close-btn{position:absolute;right:12px;top:8px;background:transparent;border:none;font-size:18px}

/* Responsive */
@media (max-width:900px){
  .header-row{flex-wrap:wrap}
  .topnav{display:none}
  .menu-toggle{display:block}
  .hero-inner{flex-direction:column;align-items:center;text-align:center}
  .hero-copy{text-align:center}
  .dropdown-content{left:auto;right:0}
}
@media (max-width:520px){
  .hero-photo{height:220px}
  .hero-copy h1{font-size:1.6rem}
}

/* ---- header: logo left, title right of logo, nav from left ---- */
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.left-group { display:flex; align-items:center; gap:18px; flex:1; }
.logo { height:56px; width:auto; display:block; border-radius:8px; }
.title-and-nav { display:flex; align-items:center; gap:28px; }
.site-title { color:#fff; font-weight:800; font-size:1.2rem; text-decoration:none; white-space:nowrap; }
.main-nav ul { list-style:none; display:flex; gap:32px; align-items:center; margin:0; padding:0; }
.main-nav a { color:rgba(255,255,255,0.95); text-decoration:none; font-weight:700; padding:8px 12px; border-radius:8px; transition:background .16s; }
.main-nav a:hover { background:rgba(255,255,255,0.08); transform:translateY(-2px); }

/* right-group keeps header balanced */
.right-group { min-width:48px; }

/* ---- Slider Fix (Option 1: contain) ---- */
.hero-slider {
  width: 100%;
  margin-top: 10px;
}

.slider {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #eaf5ff; /* fallback color for empty space */
}

.slides {
  position: relative;
  height: 420px; /* container height, adjust as needed */
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: scale(0.995);
  background-color: #eaf5ff; /* fallback to prevent grey */
  z-index: 1; /* slides below buttons */
}

.slide.active {
  opacity: 1;
  transform: none;
  z-index: 1; /* keep slides below buttons */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* <-- keep full image visible */
  display: block;
  background-color: #eaf5ff; /* optional: fills empty space */
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(2,16,33,0.55);
  border: none;
  color: #fff;
  font-size: 28px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 10; /* ensure buttons are above slides */
}

.slider-btn:hover {
  background: rgba(2,16,33,0.75);
}

.slider-btn.prev {
  left: 14px;
}

.slider-btn.next {
  right: 14px;
}

.indicators {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display: flex;
  gap: 8px;
  z-index: 10; /* ensure indicators are above slides */
}

.indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: transform 0.12s;
}

.indicators button.active {
  background: #0b63b7;
  transform: scale(1.15);
}



/* responsive */
@media (max-width:980px) { .slides { height:320px; } .slide img { height:320px; } }
@media (max-width:520px) { .logo { height:48px; } .site-title { font-size:1rem; } .slides { height:220px; } .slide img { height:220px; } }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* items stay left */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  gap: 12px;
}

.left-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  transform: translateX(-3vw); /* dynamic left shift */
}

.right-group {
  margin-left: auto; /* keeps right-group at far right */
  min-width: 48px;
}

/* Reduce shift on smaller screens */
@media (max-width: 720px) {
  .left-group {
    transform: translateX(-1.5vw);
  }
  .title-and-nav { gap: 14px; }
}

/* ---- calendar (updated) ---- */
.calendar {
  max-width: 640px;        /* increased width */
  margin: 0.5rem auto 2rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  padding: 16px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.calendar-header button {
  border: none;
  background: #0b63b7;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
}
.calendar-header button[disabled]{
  opacity: 0.45;
  cursor: not-allowed;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 1.05rem;     /* slightly larger */
}
.calendar-table th, .calendar-table td {
  text-align: center;
  padding: 10px 8px;
  border: 1px solid #f0f4f8;
  vertical-align: middle;
  height: 64px;           /* taller cells */
}

.calendar-table th { font-weight:700; color:#334155; background:#f7fbff; }

.calendar-table .empty { background: #fafafa; }

/* day cells */
.calendar-day {
  cursor: pointer;
  user-select: none;
  transition: background .12s, transform .06s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.calendar-day:hover {
  background: #f1f5f9;
  transform: translateY(-3px);
}
.calendar-day:focus {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

/* Highlight today's date cell instead of using a dot */
.calendar-day.today {
  background-color: #e6d7d7fa;   /* light red background */
  border: 2px solid #0c0808cd;   /* darker red border */
  border-radius: 6px;          /* optional: rounded corners */
  color: #000;                 /* text color stays readable */
}


/* small event indicator */
.calendar-day.has-event{
  background-color: #b9a5e7;   
  border: 2px solid #4e13d8;   
  border-radius: 6px;          
  color: #000;                
}

/* modal updates */
.modal.open { display:block; }
.modal-content { padding: 18px; max-width: 640px; }
.event-list { margin: 10px 0; list-style:none; padding:0; display:block; }
.event-item { border:1px solid #eef5ff; padding:10px; border-radius:8px; margin-bottom:8px; text-align:left; }
.event-item small { display:block; color:#5f768e; margin-top:6px; font-size:0.9rem; }

/* form in modal */
.event-form { display:grid; gap:8px; margin-top:8px; }
.event-form input[type="text"], .event-form input[type="time"], .event-form textarea {
  width:100%; padding:8px; border-radius:8px; border:1px solid #e6f0ff;
}
.event-form .row { display:flex; gap:8px; }
.event-form .row > * { flex:1; }

/* responsive: keep calendar readable on small screens */
@media (max-width: 640px) {
  .calendar { max-width: 94%; padding: 12px; }
  .calendar-table th, .calendar-table td { height:56px; }
  .modal-content { margin: 6% 8px; width: auto; }
}

/* Force the calendar to render as a proper table (override any accidental resets) */
.calendar-table {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

/* Make sure header/body/rows/cells are displayed as table elements */
.calendar-table thead,
.calendar-table tbody { display: table-row-group !important; }
.calendar-table tr                   { display: table-row !important; }
.calendar-table th,
.calendar-table td                  { display: table-cell !important; vertical-align: middle !important; }

/* If your CSS reset accidentally made th/td block-level, this forces layout back */
.calendar-table th,
.calendar-table td { width: auto; }

/* ===== Modal styling ===== */

/* The backdrop covers the whole screen */
.modal {
  display: none;              /* hidden by default */
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.modal.open {
  display: flex;              /* use flexbox to center content */
  align-items: center;        /* vertical center */
  justify-content: center;    /* horizontal center */
}

/* Dark transparent background */
.modal-backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* semi-transparent black */
  z-index: 1;
}

/* The actual modal box */
.modal-content {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 20px;
  max-width: 400px;
  width: 90%;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  animation: fadeIn 0.2s ease-in-out;
}

/* Close button in top right */
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

/* Small fade animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===== Mobile-specific tweaks ===== */
@media (max-width: 480px) {
  /* Header */
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  /* Hero */
  .hero-inner { flex-direction: column; padding: 20px; }
  .hero-copy { text-align: center; max-width: 100%; }
  .hero-copy h1 { font-size: 1.4rem; }
  .hero-photo { height: 180px; max-width: 90%; }

  /* Features */
  .feature-grid { flex-direction: column; gap: 14px; }
  .feature-card { min-width: 100%; max-width: 100%; }

  /* Buttons */
  .hero-buttons { flex-direction: column; gap: 10px; }
  .btn { width: 100%; text-align: center; }

  /* Calendar */
  .calendar { max-width: 96%; padding: 10px; }
  .calendar-table th, .calendar-table td { font-size: 0.9rem; height: 48px; }

  /* Slider */
  .slides { height: 180px; }
  .slide img { height: 180px; }

  /* Modals */
  .modal-content { width: 95%; max-width: 340px; padding: 16px; }

  /* Footer */
  .site-footer { font-size: 0.85rem; text-align: center; }
}

/* ----- Mobile Nav (hamburger) ----- */
.menu-toggle {
  display: none; /* hidden by default */
  background: transparent;
  border: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

/* Hide nav by default on mobile screens <=720px */
@media (max-width: 720px) {
  .main-nav {
    display: none;      /* hide nav by default */
    flex-direction: column;
    background: #0b63b7; /* same color as header */
    width: 100%;
    position: absolute;
    top: 100%;          /* appear below header */
    left: 0;
    padding: 12px 0;
    border-radius: 0 0 12px 12px;
    z-index: 90;        /* above other content */
  }

  .main-nav.open {
    display: flex;      /* shown when hamburger is clicked */
  }

  .main-nav ul {
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
  }

  .menu-toggle {
    display: block;     /* show hamburger */
    margin-left: auto;
  }

  .title-and-nav {
    width: 100%;
    gap: 12px;          /* smaller gap for mobile */
  }
}
/* Popup styling 
.popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: #ff9494;
  padding: 20px 30px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 80%;
}

.popup-content h2 {
  margin-bottom: 10px;
}

.popup-content button {
  margin-top: 15px;
  padding: 8px 16px;
  background-color: #ff0000;
  color: rgb(239, 239, 239);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.popup-content button:hover {
  background-color: #e62323;
}
*/