/* ==========================================================================
   styles.css — reorganized & heavily commented
   - Keep this file at project root and reference from index.html
   - Top: variables you will likely edit. Below: grouped sections.
   ========================================================================== */

/* -------------------------
   Root variables / quick-tweaks
   ------------------------- */
/* Edit these to adjust color / sizing globally */
:root{
  /* Color accents */
  --accent: #0b5bd7;                 /* main accent color */
  --muted:  #f5f7fb;                 /* page background */
  --text:   #1b1b1f;                 /* primary text color */

  /* Hero / header */
  --hero-overlay: rgba(10,10,10,0.45); /* overlay on top of hero image (readability)
                                          - set to 0 to remove overlay
                                          - try rgba(0,0,0,0.12) for a lighter dim */
  --hero-height: 200px;               /* hero/banner height */

  /* Shadows & layout */
  --card-shadow: 0 6px 18px rgba(10,20,40,0.06);
  --max-width: 1200px;

  /* Logo / title sizing (easy knobs) */
  --logo-left-height: 84px;          /* left badge / hospital seal */
  --logo-right-height: 60px;         /* right emblem */
  --title-size: 33px;                /* hospital title size */
}

/* -------------------------
   Base reset + typography
   ------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--muted);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page container */
.page-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px;
}

/* Small utilities */
.hidden { display: none !important; }

/* ==========================================================================
   HERO / HEADER section
   ========================================================================== */

/* Hero wrapper */
.hero {
  position: relative;
  height: var(--hero-height);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  background-size: cover;
  background-position: center;
}

/* Hero overlay — helps title readability on any background */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay); /* tweak in :root */
  pointer-events: none;
}

/* Hero inner row (logos / title) */
/* - Left-aligned so title starts after left logo by default */
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
}

/* Columns (left/logo, center/title, right/logo) */
/* These are flexible — center will take remaining space */
.hero-left,
.hero-center,
.hero-right {
  display: flex;
  align-items: center;
}

/* By default we allow logos to size themselves (avoid fixed % widths) */
.hero-left,
.hero-right {
  flex: 0 0 auto;
  justify-content: center;
  padding: 4px;
}

/* Center column takes the remaining space and aligns left */
.hero-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  min-width: 0; /* prevents overflow */
}

/* SITE TITLE - tweak --title-size in :root */
.site-title {
  color: white; /* if your hero is light, change to var(--text) */
  font-size: var(--title-size);
  font-weight: 900;
  margin: 0;
  line-height: 1.05;
  letter-spacing: 0.2px;
  text-shadow: 0 3px 10px rgba(0,0,0,0.45); /* aids readability */
}

/* Subtitle under the title */
.site-sub {
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  margin-top: 6px;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* --------------------------------------------------------------------------------
   Logos — image classes
   - You can use either the existing .logo-img or the more specific .logo-left/.logo-right
   - If your markup uses <img class="logo-img"> keep using it. For per-logo control:
       <img class="logo-left"> and <img class="logo-right">
   -------------------------------------------------------------------------------- */

/* Generic logo image (default) */
.logo-img {
  /* Default max size; use the per-logo overrides below if you want different sizes */
  max-height: 140px;
  max-width: 140px;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
}

/* Specific left logo (hospital badge) */
.logo-left {
  display: block;
  height: var(--logo-left-height);
  width: auto;
  object-fit: contain;
  background: rgba(255,255,255,0.92); /* optional badge background (keeps dark logos visible) */
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(8,20,40,0.06);
}

/* Specific right logo (government emblem) — usually smaller */
/* make the right logo explicitly able to grow */
.logo-right {
  height: 100px;       /* whatever you want */
  max-height: none;    /* remove any limiting max-height */
  width: auto;
  display: block;
  object-fit: contain;
}


/* Optional wrapper for the right logo (white rounded background) */
.logo-wrapper {
  background: rgba(255,255,255,0.9);
  padding: 6px 8px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(8,20,40,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   NAVIGATION RIBBON
   ========================================================================== */
.nav-ribbon {
  margin-top: 12px;
  background: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.08);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Menu buttons - simple pills */
.nav-ribbon .menu-btn {
  padding: 10px 14px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  color: #333;
  text-decoration: none;
}
.nav-ribbon .menu-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ==========================================================================
   PAGE / CONTENT layout
   ========================================================================== */

/* content container */
#content {
  margin-top: 18px;
}

/* Simple about card layout (used by sections/about.html) */
.about-block {
  width: 100%;
  min-height: var(--hero-height);
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: flex-start;      /* top alignment */
  justify-content: flex-start;  /* left alignment for inner content */
  padding: 24px;
  box-sizing: border-box;
}

/* Inner about card wrapper (constrain width for readability) */
.about-card {
  width: 100%;
  max-width: 1100px;
  border-radius: 8px;
  padding: 0;
  box-sizing: border-box;
}
.about-card--padded { padding: 24px; }
.about-card h2 { margin-top: 0; font-size: 22px; }
.about-card p { line-height: 1.6; color: #333; }

/* ==========================================================================
   HOME layout: updates (left) + main (right)
   ========================================================================== */
.main {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}

/* UPDATES box (left column) */
.updates {
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--card-shadow);
  height: 420px;               /* fixed visual height to match message card */
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.updates h3 { margin: 0 0 8px 0; font-size: 18px; }

/* news-list acts as a viewport for the ticker */
.news-list {
  flex: 1;
  overflow: hidden;            /* we control vertical scroll via JS */
  position: relative;
  height: calc(100% - 0px);
}

/* individual news item style */
/* clickable + accessible (role="button" etc. set in markup) */
.news-item {
  cursor: pointer;
  position: relative;
  padding: 10px 6px;
  border-bottom: 1px dashed #eee;
  font-size: 14px;
  transition: background .18s ease, transform .12s ease;
  background: transparent;
}
.news-item:hover, .news-item:focus {
  background: rgba(11,91,215,0.03);
  transform: translateY(-1px);
  outline: none;
}

/* sparkle highlight — apply .sparkle to the .news-item you want highlighted */
/* Notes:
   - Can be toggled via JS by adding/removing .sparkle
   - Accessible: uses pointer-events: none so clicks still work */
.news-item.sparkle {
  z-index: 1;
}
.news-item.sparkle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  box-shadow:
    0 0 6px 2px rgba(255, 215, 0, 0.8),
    0 0 12px 4px rgba(255, 200, 0, 0.6);
  animation: sparklePulse 1.5s infinite ease-in-out;
  pointer-events: none;
}
@keyframes sparklePulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

/* small indicator for page-type news items (that open a full page) */
.news-item[data-type="page"]::after {
  content: "↗";
  float: right;
  color: #6b7280;
  font-size: 14px;
  margin-left: 6px;
}

/* Modal overlay for quick details (JS will toggle #newsModalOverlay display) */
#newsModalOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,12,0.5);
  z-index: 9999;
  padding: 20px;
}
#newsModalOverlay .modal-card {
  max-width: 760px;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(3,10,25,0.3);
  padding: 20px;
  max-height: 80vh;
  overflow: auto;
}
#newsModalOverlay .modal-card h4 { margin-top: 0; color: #0b3d91; }
#newsModalOverlay .modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  font-size: 18px;
  cursor: pointer;
}

/* ==========================================================================
   MESSAGE CARD (right column) — head messages
   - Keeps same vertical height as updates
   - Carousel / slides scroll internally if content is long
   ========================================================================== */
.message-card {
  height: 420px; /* keep same as updates for alignment */
  display: flex;
  align-items: stretch;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  box-sizing: border-box;
  overflow: hidden;
}

/* grid inside message card: left thumb + meta, right messages */
.person-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: stretch;
  height: 100%;
}

/* left column: top aligned */
.person-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding: 6px;
  box-sizing: border-box;
  height: 100%;
}

/* small avatar / thumb square */
.thumb {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: #ddd;
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  display: block;
  flex-shrink: 0;
  margin: 0;
}

/* meta text (name, role) */
.person-left .meta { width: 100%; padding-top: 6px; }
.person-left .meta .name { font-weight: 700; font-size: 18px; text-align: center; }
.person-left .meta .role { color: #666; font-size: 14px; text-align: center; }

/* right column (carousel) */
.person-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  box-sizing: border-box;
}
.person-right .carousel {
  height: calc(100% - 54px); /* reserve space for controls */
  border-radius: 6px;
  border: 1px solid #f0f0f2;
  padding: 12px;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}
.person-right .carousel .slide {
  display: none;
  flex-direction: column;
  position: relative;
  padding: 4px 6px;
  text-align: left;
  font-size: 15.5px;
  line-height: 1.7;
  color: #222;
  height: 100%;
  box-sizing: border-box;
  overflow: auto; /* slide content scrolls if long */
}
.person-right .carousel .slide.active { display: flex; }
.person-right .carousel .slide p { margin: 0 0 12px 0; color: #333; }
.person-right .carousel .slide .signature {
  margin-top: 10px;
  font-weight: 600;
  color: #0b3d91;
  text-align: left;
}

/* carousel-controls area */
.carousel-controls {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 8px;
}

/* ==========================================================================
   FOOTER: contact + interactive map card
   ========================================================================== */

/* contact + map container */
.contact-map {
  display: flex;
  gap: 18px;
  align-items: stretch;
  margin-top: 22px;
}

/* contact card */
.contact-card {
  flex: 1 1 42%;
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
  box-sizing: border-box;
}
.contact-head .contact-title {
  display: block;
  font-size: 18px;
  color: #0b3d91;
  margin-bottom: 6px;
}
.contact-sub { color: #4b5563; font-size: 14px; margin-bottom: 12px; }
.contact-row { margin: 6px 0; color: #263238; font-size: 14px; }
.contact-row a { color: var(--accent); text-decoration: none; }
.contact-row a:hover { text-decoration: underline; }
.contact-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; }

/* map card */
.map-card {
  flex: 1 1 58%;
  min-height: 160px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  position: relative;
}
.map-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-card .maps-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(20,20,28,0.6);
  color: white;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 5;
}

/* highlight helpers (useful to call attention to contact/map) */
.contact-card.highlight,
.map-card.highlight {
  box-shadow: 0 18px 50px rgba(11,91,215,0.12);
  border: 1px solid rgba(11,91,215,0.08);
}

/* ==========================================================================
   Reusable components & small helpers
   ========================================================================== */

/* small buttons used across admin controls */
.btn {
  padding: 8px 12px;
  border-radius: 6px;
  border: 0;
  background: var(--accent);
  color: white;
  cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid rgba(10,50,130,0.08); }

/* simple rounded white logo placeholder (if needed) */
.logo {
  width: 72px;
  height: 72px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #444;
  box-shadow: var(--card-shadow);
}

/* ==========================================================================
   About page small UI helpers (features / mission)
   ========================================================================== */
.about-card--padded { padding: 24px; }
.about-header h2 { font-size: 24px; margin: 0 0 8px; color: #0b3d91; letter-spacing: 0.2px; }
.lead { margin: 0 0 16px; font-size: 15px; color: #374151; line-height: 1.5; font-weight: 500; }
.about-content p { margin: 12px 0; color: #333; line-height: 1.7; }
.about-content h3 { margin-top: 18px; font-size: 18px; color: #0b3d91; }

/* Features grid */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { padding: 8px 0; border-bottom: 1px dashed #eee; font-size: 14px; color: #333; }

/* mission box */
.mission-box {
  margin: 18px 0;
  padding: 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
  border: 1px solid rgba(11,61,145,0.06);
  box-shadow: 0 6px 18px rgba(11,61,145,0.04);
}
.mission-box h4 { margin: 0 0 6px; color: #0b3d91; }
.mission-box p { margin: 0; color: #334155; line-height: 1.6; }

/* choose list (check-like bullets) */
.choose-list { margin: 12px 0 20px 0; padding-left: 0; list-style: none; }
.choose-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: #333;
  line-height: 1.6;
}
.choose-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: #0b5bd7;
  background: rgba(11,91,215,0.06);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* ==========================================================================
   Responsive rules
   - Tweak breakpoints / sizes as needed
   ========================================================================== */
@media (max-width: 980px) {
  /* stack left column under main content */
  .main { grid-template-columns: 1fr; }

  /* hide right logo on narrow screens for space */
  .hero-right { display: none; }

  /* logos scale down */
  .logo-left { height: 56px; padding: 4px; }
  .logo-right { height: 1000px; }
  .logo-img { max-height: 72px; }

  /* title scales */
  .site-title { font-size: 20px; font-weight: 800; }
  .site-sub { font-size: 12px; }

  /* person layout stacks vertically */
  .person-layout { grid-template-columns: 1fr; }
  .thumb { max-width: 160px; margin-bottom: 8px; }
  .person-right .carousel { min-height: 120px; }
  .map-card { min-height: 200px; }
  .about-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   NOTES / quick-edit guide (in-code)
   - To change hero dim: edit --hero-overlay at top
   - To change left logo size: edit --logo-left-height
   - To change title size: edit --title-size
   - To toggle white badge behind left logo: set background on .logo-left to transparent
   - To highlight a news item: add class "sparkle" to .news-item element (via JS)
   - To mark news that should open a separate page: set data-type="page" on .news-item
   ========================================================================== */
/* Ensure right logo sizing wins — put near end of styles.css */
.hero-right img.logo-right {
  height: 100px;
  max-height: none;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Modal overlay - centered transparent background */
#staffModalOverlay {
  position: fixed;
  inset: 0;
  display: none;               /* toggled by JS */
  align-items: center;
  justify-content: center;
  background: rgba(10,10,12,0.45);
  z-index: 9999;
  padding: 18px;
}
#staffModalOverlay.show { display:flex; }

/* modal card */
#staffModalOverlay .modal-card {
  width: 100%;
  max-width: 720px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(3,10,25,0.35);
  padding: 18px;
  position: relative;
  max-height: 85vh;
  overflow:auto;
}

/* close */
.modal-close {
  position:absolute;
  top:10px;
  right:10px;
  background:transparent;
  border:0;
  font-size:18px;
  cursor:pointer;
}

/* staff tile (modal copy) */
.staff-tile {
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.staff-photo { width:110px; height:110px; object-fit:cover; border-radius:8px; }
.staff-meta .staff-name { font-size:20px; font-weight:800; color:#0b3d91; }
.staff-meta .staff-role { color:#565e66; margin-top:4px; font-weight:600; }
.staff-meta .staff-bio { margin-top:8px; color:#333; line-height:1.4; }

/* optional: make facility doctor links look like plain links */
.doctor-link { background:none; border:0; color:var(--accent); cursor:pointer; padding:0; font-weight:600; text-decoration:underline; }

/* ========== Facility & Staff styles (editable) ========== */

/* Section heading */
.section-heading { font-size:20px; color:#0b3d91; margin:8px 0 14px; }

/* Facility list wrapper */
.facility-list { display:block; }

/* Facility collapsed bar / toggle */
.facility-toggle {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  cursor:pointer;
  font-weight:700;
  color:#123;
  margin-bottom:10px;
  transition: all .18s ease;
}
.facility-toggle:focus { outline:3px solid rgba(11,91,215,0.12); }

/* Title inside toggle */
.facility-title { font-size:16px; }

/* arrow rotates when expanded */
.facility-toggle[aria-expanded="true"] .toggle-arrow { transform: rotate(180deg); }

/* Panel content (hidden by default) */
.facility-panel {
  margin:8px 0 18px 0;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(10,20,40,0.04);
  background:#fff;
  box-shadow: 0 6px 18px rgba(10,20,40,0.03);
}

/* table layout */
.facility-table {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.facility-table thead th {
  text-align:left;
  padding:8px 10px;
  font-weight:700;
  color:#0b3d91;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.facility-table tbody td {
  padding:10px;
  border-bottom:1px dashed rgba(0,0,0,0.04);
  vertical-align:top;
}

/* doctor link button appearance - accessible */
.doctor-link {
  background: transparent;
  border: 0;
  color: var(--accent);
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  font-weight:600;
  font-size:14px;
}
.doctor-link:focus { outline: 3px solid rgba(11,91,215,0.12); }

/* ===== staff grid (simple) ===== */
.staff-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:14px;
  margin-top:10px;
}
.staff-card {
  background:#fff;
  border-radius:8px;
  padding:12px;
  box-shadow: 0 6px 18px rgba(10,20,40,0.04);
  text-align:center;
}
.staff-photo {
  width:100%;
  height:140px;
  background-size:cover;
  background-position:center;
  border-radius:6px;
  margin-bottom:10px;
}
.staff-name { font-weight:700; margin:6px 0 2px; }
.staff-spec { color:#555; font-size:13px; }

/* ===== modal small styles (if not already present) ===== */
#staffModalOverlay {
  position: fixed;
  inset: 0;
  display: none; /* toggled by script */
  align-items: center;
  justify-content: center;
  background: rgba(10,10,12,0.5);
  z-index: 9999;
  padding: 18px;
}
#staffModalOverlay[aria-hidden="false"] { display:flex; }
#staffModalOverlay .modal-card {
  width: 100%;
  max-width: 720px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(3,10,25,0.3);
  padding: 18px;
  position: relative;
}
#staffModalOverlay .modal-close {
  position:absolute;
  top:10px;
  right:12px;
  background:transparent;
  border:0;
  font-size:20px;
  cursor:pointer;
}

/* ===== Facility accordion & table styles ===== */

/* Section heading */
.facility-page .page-heading {
  color: #0b3d91;
  font-size: 28px;
  margin: 8px 0 18px;
}

/* Accordion container */
.facility-accordion { display:flex; flex-direction:column; gap:18px; }

/* Accordion toggle (the bar) */
.accordion-item .accordion-toggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: linear-gradient(180deg,#fff,#fbfdff);
  border: 1px solid rgba(11,61,145,0.08);
  border-radius:10px;
  padding: 14px 18px;
  font-weight:700;
  color:#0b3d91;
  box-shadow: 0 6px 20px rgba(11,61,145,0.04);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.accordion-item .accordion-toggle:focus,
.accordion-item .accordion-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(11,61,145,0.08);
}
.accordion-toggle .acc-icon { font-size:18px; color:#334155; margin-left:12px; }

/* panel */
.accordion-panel {
  margin-top:8px;
  padding: 14px;                 /* inner padding for the table card */
  background: #fff;
  border-radius:10px;
  border: 1px solid rgba(11,61,145,0.04);
  box-shadow: 0 6px 18px rgba(11,61,145,0.04);
}

/* facility table: header + rows using grid -> consistent columns */
.facility-table { display:block; width:100%; }
.facility-table .fthead,
.facility-table .ftrow {
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1.6fr; /* adjust widths: Name | Days | Location | Doctors */
  gap: 18px;
  align-items:center;
  padding: 10px 12px;
  box-sizing:border-box;
}

/* header styles */
.facility-table .fthead {
  font-weight:700;
  color:#0b3d91;
  border-radius:8px;
  background: linear-gradient(180deg,#fbfdff,#ffffff);
  border:1px solid rgba(11,61,145,0.04);
  margin-bottom:10px;
}

/* rows */
.facility-table .ftrow {
  border-bottom: 1px dashed #eee;
  font-weight: 500;
  color:#263238;
  background: transparent;
}

/* spacing for row content */
.facility-table .ftrow > div, .facility-table .fthead > div {
  padding: 10px 6px;
  min-height: 36px;
}

/* doctors column special */
.doctors-cell {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

/* doctor links */
.doc-link {
  color:#0b5bd7;
  text-decoration:underline;
  font-weight:600;
}
.doc-link:hover { text-decoration:none; }

/* more button for overflowed doctors */
.more-docs {
  margin-left:6px;
  background:transparent;
  border:0;
  color:#0b5bd7;
  font-weight:700;
  cursor:pointer;
}

/* hide extra doctor links initially (JS toggles display) */
.extra-doc{ display:none; }

/* responsive: stack small screens */
@media (max-width:820px){
  .facility-table .fthead,
  .facility-table .ftrow {
    grid-template-columns: 1fr; /* become stacked rows on small screens */
    gap:8px;
  }
  .facility-table .fthead { display:block; padding:12px; }
  .doctors-cell { flex-wrap:wrap; gap:6px; }
}

/* ========================================================================== */
/* styles.css - final cleaned version (facility + hero + modal + staff)       */
/* Edit the :root variables for quick global changes.                        */
/* ========================================================================== */

:root{
  --accent:#0b5bd7;
  --muted:#f5f7fb;
  --text:#1b1b1f;
  --hero-overlay: rgba(10,10,10,0.45);
  --max-width:1200px;
  --card-shadow: 0 6px 18px rgba(10,20,40,0.06);
  --hero-height:200px;
  --logo-left-height:84px;
  --logo-right-height:100px;
  --title-size:33px;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--muted);color:var(--text);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial}
.page-wrap{max-width:var(--max-width);margin:0 auto;padding:18px}

/* HERO */
.hero{position:relative;height:var(--hero-height);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-top:12px;background-size:cover;background-position:center}
.hero::after{content:"";position:absolute;inset:0;background:var(--hero-overlay);pointer-events:none}
.hero-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-start;gap:18px;width:100%;padding:12px;box-sizing:border-box}
.hero-left,.hero-center,.hero-right{display:flex;align-items:center}
.hero-left,.hero-right{flex:0 0 auto;justify-content:center;padding:4px}
.hero-center{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;min-width:0}
.site-title{color:white;font-size:var(--title-size);font-weight:900;margin:0;line-height:1.05;letter-spacing:.2px;text-shadow:0 3px 10px rgba(0,0,0,0.45)}
.site-sub{color:rgba(255,255,255,0.9);font-size:13px;margin-top:6px;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,0.35)}
.logo-left{height:var(--logo-left-height);background:rgba(255,255,255,0.92);padding:6px;border-radius:8px;box-shadow:0 6px 16px rgba(8,20,40,0.06)}
.logo-right{height:var(--logo-right-height);max-height:none;width:auto;object-fit:contain;display:block}

/* NAV RIBBON */
.nav-ribbon{margin-top:12px;background:#fff;border-radius:8px;padding:6px 8px;box-shadow:0 6px 18px rgba(16,24,40,0.08);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav-ribbon .menu-btn{padding:10px 14px;border-radius:6px;background:transparent;border:0;cursor:pointer;font-weight:600;color:#333;text-decoration:none}
.nav-ribbon .menu-btn.active{background:var(--accent);color:#fff}

/* Page layout */
#content{margin-top:18px}

/* ================= Facility section ================= */

/* top page heading */
.facility-page .page-heading, .section-heading { font-size:28px;color:#0b3d91;margin:8px 0 18px; }

/* accordion container - full width */
.facility-accordion { display:flex;flex-direction:column;gap:12px;width:100%; }

/* the bar (toggle) - full width and identical look */
.facility-toggle {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-radius:10px;
  border:1px solid rgba(11,61,145,0.08);
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow:0 6px 20px rgba(11,61,145,0.04);
  font-weight:700;color:#0b3d91;
  cursor:pointer;
}
.facility-toggle:focus { outline:3px solid rgba(11,91,215,0.12); }
.facility-toggle .toggle-arrow { font-size:16px; color:#334155; transition: transform .18s ease; }
.facility-toggle[aria-expanded="true"] .toggle-arrow { transform: rotate(180deg); }

/* panel that holds the grid table (hidden by default) */
.facility-panel {
  width:100%;
  padding:12px;
  margin:6px 0 18px 0;
  border-radius:8px;
  background:#fff;
  border:1px solid rgba(11,61,145,0.04);
  box-shadow:0 6px 18px rgba(11,61,145,0.04);
}

/* facility table using CSS Grid so columns line up perfectly */
/* Using equal column strategy: 1fr 1fr 1fr 1fr gives equal width across viewport */
.facility-table { width:100%; display:block; }
.facility-table .fthead,
.facility-table .ftrow {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* equal width columns */
  gap: 18px;
  align-items:center;
  padding: 10px 12px;
  box-sizing:border-box;
}
.facility-table .fthead {
  font-weight:700;color:#0b3d91;background:linear-gradient(180deg,#fbfdff,#ffffff);border:1px solid rgba(11,61,145,0.04);border-radius:8px;margin-bottom:10px;
}
.facility-table .ftrow { border-bottom:1px dashed #eee;color:#263238;font-weight:500;background:transparent; }
.facility-table .ftrow > div, .facility-table .fthead > div { padding:6px; min-height:36px; }

/* doctors cell layout - make links wrap nicely on narrow widths */
.doctors-cell { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* doctor links and more button */
.doctor-link, .doc-link {
  background:transparent;border:0;color:var(--accent);text-decoration:underline;cursor:pointer;font-weight:600;padding:0;margin:0;font-size:14px;
}
.more-docs { background:transparent;border:0;color:var(--accent);font-weight:700;cursor:pointer;padding:0;margin-left:4px; }

/* hidden extra items: JS will add/remove .extra-doc */
.extra-doc { display:none; }

/* responsive: stack rows on small screens */
@media (max-width:820px){
  .facility-table .fthead, .facility-table .ftrow { grid-template-columns: 1fr; gap:8px; }
  .facility-table .fthead { display:block; padding:12px; }
}

/* ================= Modal (staff) ================= */
#staffModalOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,12,0.45);
  z-index: 9999;
  padding: 18px;
}
#staffModalOverlay[aria-hidden="false"] { display:flex; }
#staffModalOverlay .modal-card {
  width:100%;max-width:720px;background:#fff;border-radius:10px;box-shadow:0 18px 60px rgba(3,10,25,0.35);padding:18px;position:relative;max-height:85vh;overflow:auto;
}
.modal-close { position:absolute;top:10px;right:10px;background:transparent;border:0;font-size:18px;cursor:pointer; }

/* staff-card clone inside modal */
.modal-staff-clone { display:flex; gap:12px; align-items:flex-start; }
.modal-staff-clone .staff-photo { width:110px; height:110px; border-radius:8px; background-size:cover; background-position:center; }
.modal-staff-clone .staff-meta .staff-name { font-size:20px; font-weight:800; color:#0b3d91; }
.modal-staff-clone .staff-meta .staff-role { color:#565e66; margin-top:4px; font-weight:600; }

/* Staff grid (used by staff section) */
.staff-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:10px; }
.staff-card { background:#fff;border-radius:8px;padding:12px;box-shadow:0 6px 18px rgba(10,20,40,0.04);text-align:center; }
.staff-photo { width:100%; height:140px; background-size:cover; background-position:center; border-radius:6px; margin-bottom:10px; }
.staff-name { font-weight:700; margin:6px 0 2px; }
.staff-spec { color:#555; font-size:13px; }

/* little helpers */
.hidden { display:none!important; }