/* ==========================================================================
   HOSPITAL WEBSITE — STYLESHEET
   Plain CSS3. No frameworks, no build step.

   HOW THIS FILE IS ORGANISED
     1.  Design tokens (colours, spacing, fonts)  <- change colours here
     2.  Reset and base elements
     3.  Layout helpers
     4.  Buttons, pills, cards
     5.  Emergency bar
     6.  Header and navigation
     7.  Hero
     8.  Sections (about, doctor, treatments, timings)
     9.  Contact, map and form
    10.  Footer
    11.  Mobile bottom action bar
    12.  404 page
    13.  Accessibility and motion preferences
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS  —  EDIT COLOURS HERE
   ========================================================================== */
:root {
  /* ---- BRAND COLOURS -------------------------------------------------
     Measured from the hospital logo itself:
         heart green  #00A857
         hands red    #D92B1C
     The green is used as-is for decoration, but white text on it only
     reaches 3.1:1, so buttons and text use the darker shades below and
     stay readable (WCAG AA or better). Change these to restyle the site. */
  --c-logo-green:   #00A857;   /* the logo's own green, decoration only  */
  --c-logo-red:     #D92B1C;   /* the logo's own red                     */

  --c-brand:        #00843F;   /* buttons and fills, white text on top   */
  --c-brand-dark:   #046A38;   /* links and small text                   */
  --c-brand-darker: #04502B;   /* headings                               */
  --c-brand-soft:   #E4F3EA;   /* icon backgrounds, soft panels          */

  /* Emergency — the logo red, used only for urgent actions */
  --c-emergency:      #D92B1C;
  --c-emergency-dark: #A81217;
  --c-emergency-soft: #FDEBEC;

  /* Status */
  --c-ok:      #00843F;
  --c-ok-soft: #E4F3EA;

  /* Neutrals */
  --c-bg:     #FFFFFF;
  --c-tint:   #F4F9F6;
  --c-text:   #1B2620;
  --c-muted:  #4A5A50;
  --c-line:   #DCE8E0;
  --c-shadow: 15 45 30;

  /* Typography — system fonts, so nothing is downloaded.
     The Gurmukhi and Devanagari families keep Punjabi and Hindi readable. */
  --font-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Nirmala UI", "Noto Sans Gurmukhi", "Gurmukhi MN", "Raavi",
    "Noto Sans Devanagari", "Devanagari Sangam MN", "Mangal",
    sans-serif;

  /* Spacing and shape */
  --radius:    14px;
  --radius-lg: 20px;
  --radius-sm: 10px;
  --gap:       clamp(16px, 3vw, 28px);
  --section-y: clamp(48px, 7vw, 88px);

  /* Sticky header height.
     --header-h  is the offset used so section headings are never hidden behind
                 the header. js/script.js measures the real header and keeps
                 this value correct in every language.
     --header-min is the minimum height of the header bar itself. */
  --header-h:   68px;
  --header-min: 68px;

  --shadow-sm: 0 1px 2px rgba(15, 45, 30, .06), 0 2px 8px rgba(15, 45, 30, .05);
  --shadow-md: 0 2px 6px rgba(15, 45, 30, .07), 0 12px 28px rgba(15, 45, 30, .07);
}


/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links stop below the sticky header instead of under it */
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  /* Large, comfortable reading size for every visitor */
  font-size: clamp(1.0625rem, 1.02rem + 0.22vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* belt and braces against sideways scrolling */
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.25;
  font-weight: 700;
  color: var(--c-brand-darker);
  text-wrap: balance;
}
h1 { font-size: clamp(1.85rem, 1.35rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 1.06rem + .4vw, 1.35rem); }
h4 { font-size: clamp(1.05rem, 1rem + .25vw, 1.15rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-brand-dark); }
a:hover { color: var(--c-brand-darker); }

img, svg, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Anything given the hidden attribute must really disappear, even when a
   later rule sets display:flex or display:grid on it. */
[hidden] { display: none !important; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

hr { border: 0; border-top: 1px solid var(--c-line); margin: 2rem 0; }

/* Small inline SVG icons */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.15em;
}


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: clamp(16px, 4.5vw, 32px);
  padding-right: clamp(16px, 4.5vw, 32px);
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  /* Keeps headings clear of the sticky header when jumping to a section */
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.section--tint { background: var(--c-tint); }

.section__head { max-width: 62ch; margin-bottom: clamp(24px, 4vw, 40px); }
.section__title { margin-bottom: .35em; }
.section__lead { color: var(--c-muted); margin: 0; }

.eyebrow {
  margin: 0 0 .4em;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  /* the darker green, so this small text keeps a comfortable contrast margin */
  color: var(--c-brand-dark);
}

.prose { max-width: 68ch; color: var(--c-muted); }

.note {
  margin-top: 1.5rem;
  font-size: .95rem;
  color: var(--c-muted);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 200;
  background: var(--c-brand-dark);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 0; color: #fff; }


/* ==========================================================================
   4. BUTTONS, PILLS, CARDS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 52px;              /* comfortable touch target */
  padding: .75em 1.35em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}
.btn--primary:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); color: #fff; }

.btn--emergency {
  background: var(--c-emergency);
  border-color: var(--c-emergency);
  color: #fff;
}
.btn--emergency:hover { background: var(--c-emergency-dark); border-color: var(--c-emergency-dark); color: #fff; }

.btn--outline {
  background: #fff;
  border-color: var(--c-brand);
  color: var(--c-brand-dark);
}
.btn--outline:hover { background: var(--c-brand-soft); color: var(--c-brand-darker); }

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5rem;
}
.btn-row .btn { flex: 1 1 220px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 1rem;
  padding: .5em 1em;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
}
.pill--emergency {
  background: var(--c-emergency-soft);
  color: var(--c-emergency-dark);
  border: 1px solid #F6D2D4;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
/* Set here so a card heading looks the same whether it is an h3 or an h4 */
.card__title {
  margin-bottom: .35em;
  font-size: clamp(1.1rem, 1.04rem + .3vw, 1.25rem);
}
.card__text { margin: 0; color: var(--c-muted); font-size: .98rem; }

/* Sub-heading above a group of cards */
.group-title {
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--c-brand-soft);
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  color: var(--c-brand-dark);
}
.cards + .group-title { margin-top: clamp(32px, 5vw, 52px); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--c-brand-soft);
  color: var(--c-brand-dark);
}
.card__icon svg { width: 26px; height: 26px; fill: currentColor; }

.card--service:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}


/* ==========================================================================
   5. EMERGENCY BAR
   ========================================================================== */
.emergency-bar {
  background: var(--c-emergency);
  color: #fff;
  font-size: .95rem;
}
.emergency-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
}
.emergency-bar__text {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: 0;
  font-weight: 700;
}
.emergency-bar__call {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.emergency-bar__call:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.emergency-bar__num { display: none; }


/* ==========================================================================
   6. HEADER AND NAVIGATION
   ========================================================================== */
/* A solid background rather than a blurred one: backdrop-filter would make
   this element the containing block for the fixed-position menu drawer. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-min);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.brand__logo {
  width: auto;
  height: 42px;
  flex: 0 0 auto;
}
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--c-brand-darker);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* On phones only the hospital name is shown, so the sticky header stays
   compact. The longer "& Heart Care Centre…" line appears from 600px up. */
.brand__tag {
  display: none;
  font-size: .78rem;
  color: var(--c-muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand--footer .brand__tag { display: block; white-space: normal; }

.header-tools { display: flex; align-items: center; gap: 8px; }

/* The language selector only works with JavaScript, so it is shown only then.
   On phones it lives inside the menu drawer instead of the header, which
   leaves room for the hospital name and keeps the header uncluttered. */
.lang { display: none; }
.has-js .lang { position: relative; display: inline-flex; align-items: center; }
.has-js .site-header .lang { display: none; }
.lang__icon {
  position: absolute;
  left: 10px;
  width: 18px;
  height: 18px;
  color: var(--c-brand-dark);
  pointer-events: none;
}
.lang__select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 6px 30px 6px 34px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-brand-dark) 50%),
    linear-gradient(135deg, var(--c-brand-dark) 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  font-size: .95rem;
  font-weight: 600;
  color: var(--c-brand-darker);
  cursor: pointer;
  max-width: 128px;
}
@media (min-width: 600px) { .lang__select { max-width: 160px; } }
.lang--footer .lang__select { padding-left: 14px; max-width: 200px; }

/* The hamburger button needs JavaScript, so without it the menu is simply
   shown as a plain list under the header instead.
   It carries a visible "Menu" label beside the icon, and is 48px tall so it
   meets the minimum touch-target size in the WCAG and platform guidelines. */
.nav-toggle { display: none; }
.has-js .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #fff;
  color: var(--c-brand-darker);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.has-js .nav-toggle:hover { background: var(--c-brand-soft); border-color: var(--c-brand); }
.nav-toggle__label { line-height: 1; }
.nav-toggle__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--c-brand-darker);
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6.75px; }
.nav-toggle__bars span:nth-child(3) { top: 13.5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6.75px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6.75px; transform: rotate(-45deg); }

/* Without JavaScript: a plain list on its own row under the header.
   Wrapping is enabled only in that case — with JavaScript the menu is
   positioned over the page instead, and a wrapping header would make the
   sticky bar unnecessarily tall on a phone. */
html:not(.has-js) .site-header__inner { flex-wrap: wrap; }

/* A header carrying the whole menu is too tall to stick to the top of a phone */
html:not(.has-js) .site-header { position: static; }

/* The drawer's own header, footer and backdrop are meaningless without
   JavaScript, so they are removed along with the drawer behaviour. */
html:not(.has-js) .primary-nav__head,
html:not(.has-js) .primary-nav__foot,
html:not(.has-js) .nav-scrim { display: none; }

/* Stops the page behind the drawer from scrolling while it is open */
body.nav-open { overflow: hidden; }

.primary-nav {
  flex: 1 0 100%;
  border-top: 1px solid var(--c-line);
}

/* ---------------------------------------------------------------------------
   With JavaScript: a slide-in drawer from the right with a dimmed backdrop.
   This is the pattern people already know from mobile apps: it keeps the
   whole menu in the thumb zone, the links are large, and nothing is hidden
   behind a tiny hit area.
   --------------------------------------------------------------------------- */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(10, 30, 20, .55);
  opacity: 0;
  visibility: hidden;          /* also stops it swallowing taps when closed */
  transition: opacity .22s ease, visibility .22s;
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; }

/* The logo and the hamburger stay above the backdrop */
.brand, .header-tools { position: relative; z-index: 3; }

.has-js .primary-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(330px, 86vw);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border: 0;
  box-shadow: -8px 0 30px rgba(10, 30, 20, .18);
  transform: translateX(100%);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform .24s ease, visibility .24s;
}
.has-js .primary-nav.is-open { transform: translateX(0); visibility: visible; }

.primary-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 14px 20px;
  border-bottom: 1px solid var(--c-line);
}
.primary-nav__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-brand-darker);
}
.nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #fff;
  color: var(--c-brand-darker);
  cursor: pointer;
}
.nav-close:hover { background: var(--c-brand-soft); border-color: var(--c-brand); }
.nav-close svg { width: 22px; height: 22px; fill: currentColor; }

.primary-nav__list { padding: 8px 0; }
.primary-nav__list a {
  display: flex;
  align-items: center;
  min-height: 56px;               /* generous, easy to hit while walking */
  padding: 12px 20px;
  color: var(--c-text);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #F0F5F2;
}
.primary-nav__list a:hover,
.primary-nav__list a:active { background: var(--c-brand-soft); color: var(--c-brand-darker); }

.primary-nav__foot {
  margin-top: auto;
  padding: 18px 20px 22px;
  border-top: 1px solid var(--c-line);
  background: var(--c-tint);
}
.primary-nav__langlabel {
  display: block;
  margin-bottom: 6px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-muted);
}
.lang__select--menu { width: 100%; max-width: none; margin-bottom: 14px; }


/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  padding-top: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(40px, 6vw, 72px);
  background:
    radial-gradient(1100px 420px at 88% -12%, var(--c-brand-soft), transparent 62%),
    #fff;
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.hero__title { margin-bottom: .4em; }
.hero__text {
  max-width: 56ch;
  color: var(--c-muted);
  font-size: 1.08rem;
}
.hero__note {
  margin-top: 1.25rem;
  font-size: .9rem;
  color: var(--c-muted);
}
.hero__media { order: -1; }        /* image first on phones */
.hero__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Live availability status ------------------------------------------------ */
.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 1.25rem;
  padding: 14px 18px;
  border: 1px solid var(--c-line);
  /* Default state = the 24/7 emergency message, marked in the emergency red
     so it is clearly a different state from the green OPD message below. */
  border-left: 5px solid var(--c-emergency);
  border-radius: var(--radius-sm);
  background: var(--c-emergency-soft);
  font-weight: 600;
  color: var(--c-text);
}
.status--panel { margin-top: 1.5rem; }
.status__dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-emergency);
}
.status__text { flex: 1 1 220px; min-width: 0; }
.status__badge {
  padding: 3px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #04502B;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid #A8D8BB;
}
.status__badge[hidden] { display: none; }

/* Sits on its own line under the status message: how long the current OPD
   session still has to run, or how long until the next one starts. */
.status__countdown {
  flex: 1 0 100%;
  margin-top: 2px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--c-muted);
}
.status__countdown:empty { display: none; }

/* Green treatment while the doctor is available for OPD.
   The wording also changes, so colour is never the only signal. */
.status.is-available {
  border-left-color: var(--c-ok);
  background: var(--c-ok-soft);
}
.status.is-available .status__dot { background: var(--c-ok); }


/* ==========================================================================
   8. SECTIONS
   ========================================================================== */

/* Doctor ------------------------------------------------------------------ */
.doctor {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
}
/* 4:5, matching the supplied photograph exactly, so the frame neither crops
   the picture nor leaves empty bands around it. */
.doctor__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--c-tint);
}
.doctor__name { margin-bottom: .5em; }
.doctor__subhead { margin: 1.5rem 0 .6em; color: var(--c-brand-darker); }

.deflist { margin: 0; }
.deflist__row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-line);
}
.deflist__row:last-child { border-bottom: 0; }
.deflist dt {
  flex: 0 0 190px;
  font-weight: 700;
  color: var(--c-muted);
  font-size: .95rem;
}
.deflist dd { margin: 0; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }

/* Every row reads the same way, at every width and in all three languages:
   the label, then the time on the line below it. This used to be a wrapping
   flex row, which decided per row whether to break — so "Morning OPD" went
   onto two lines and "Evening OPD" stayed on one, purely because M is a few
   pixels wider than E. */
.timelist li {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--c-tint);
  margin-bottom: 8px;
}
.timelist__label {
  display: block;
  font-weight: 700;
  color: var(--c-brand-darker);
}
.timelist__value {
  display: block;
  margin-top: 2px;
  color: var(--c-muted);
}

/* Timetable --------------------------------------------------------------- */
.timetable {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
/* From 600px up: label on the left, time on the right, always one line.
   flex-wrap is off on purpose — with it, one row would wrap and the next
   would not, purely because of how long the words happened to be. */
.timetable__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding: 16px clamp(16px, 3vw, 24px);
  border-bottom: 1px solid var(--c-line);
}
.timetable__row:last-child { border-bottom: 0; }
.timetable__row--emergency { background: var(--c-emergency-soft); }
.timetable__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--c-brand-darker);
}
.timetable__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--c-brand-soft);
  color: var(--c-brand-dark);
}
.timetable__icon svg { width: 20px; height: 20px; fill: currentColor; }
.timetable__row--emergency .timetable__icon { background: #F8D8DA; color: var(--c-emergency-dark); }
.timetable__row--emergency .timetable__label { color: var(--c-emergency-dark); }
.timetable__value { color: var(--c-muted); font-weight: 600; text-align: right; }
.timetable__value--strong { color: var(--c-emergency-dark); }

/* On phones every row reads the same way: the label with its icon, then the
   time on the line below, lined up under the label text. */
@media (max-width: 599px) {
  .timetable__row { display: block; padding: 14px 16px; }
  .timetable__value {
    margin-top: 5px;
    margin-left: 50px;          /* 38px icon + 12px gap */
    text-align: left;
    font-size: 1.02rem;
  }
}


/* ==========================================================================
   9. CONTACT, MAP AND FORM
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.contact-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.contact-card__title { margin-bottom: .75em; }

.map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-tint);
  border: 1px solid var(--c-line);
}
.map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}
.map__pin { width: 46px; height: 46px; fill: var(--c-brand); opacity: .55; }
.map__text { margin: 0; color: var(--c-muted); font-size: .95rem; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Form --------------------------------------------------------------------
   The form prepares a WhatsApp or email message with JavaScript, so without
   JavaScript we hide it and show a phone number instead (see the <noscript>
   block in index.html). */
.form { display: none; }
.has-js .form { display: block; margin-top: 1.25rem; }

.noscript-note {
  margin-top: 1.25rem;
  padding: 14px 18px;
  border: 1px solid var(--c-line);
  border-left: 5px solid var(--c-brand);
  border-radius: var(--radius-sm);
  background: var(--c-tint);
  font-weight: 600;
}
.form__field { margin-bottom: 1.1rem; }
.form__label {
  display: block;
  margin-bottom: .35em;
  font-weight: 700;
  font-size: .98rem;
}
.form__req { color: var(--c-emergency); margin-left: 2px; }
.form__input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #C2D6C9;
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 1rem;
}
.form__input:hover { border-color: var(--c-brand); }
.form__textarea { min-height: 120px; resize: vertical; }
.form__input[aria-invalid="true"] { border-color: var(--c-emergency); background: var(--c-emergency-soft); }

.form__field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: start;
}
.form__check {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--c-brand);
  flex: 0 0 auto;
}
.form__checklabel { font-size: .96rem; color: var(--c-muted); }
.form__field--check .form__error { grid-column: 1 / -1; }

.form__error {
  margin: .4em 0 0;
  color: var(--c-emergency-dark);
  font-size: .9rem;
  font-weight: 600;
}
.form__error[hidden] { display: none; }

.form__status {
  margin: 1rem 0 0;
  padding: 0;
  font-size: .96rem;
  font-weight: 600;
  color: var(--c-brand-darker);
}
.form__status:empty { display: none; }
.form__status.is-warning { color: var(--c-emergency-dark); }


/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--c-brand-darker);
  color: #DCEBE0;
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: 24px;
  font-size: .97rem;
}
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer a { color: #DCEBE0; }
.site-footer a:hover { color: #fff; }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 40px);
}
.footer-col__title {
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .9em;
}
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__tag  { color: #B6D4C0; }
.brand--footer .brand__logo {
  background: #fff;
  border-radius: 10px;
  padding: 4px;
}
.footer-text { color: #C4DCCC; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* Stacked for the same reason as .timelist above: the footer column is
   narrow, so a wrapping flex row broke on some rows and not others. */
.footer-times li {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  color: #C4DCCC;
}
.footer-times li span:first-child {
  display: block;
  font-weight: 600;
  color: #fff;
}
.footer-times li span + span { display: block; }
.footer-times li:last-child { border-bottom: 0; }

.footer-phone {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}
.footer-doctor { margin-top: 1rem; line-height: 1.6; }
.footer-doctor strong { color: #fff; }

.footer-disclaimer {
  margin-top: clamp(28px, 4vw, 44px);
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .05);
  font-size: .92rem;
  color: #C4DCCC;
}
.footer-disclaimer p { margin: 0; }

.footer-bottom {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: .9rem;
  color: #A8C7B4;
  text-align: center;
}
.footer-bottom p { margin: 0; }

.lang--footer { margin-top: 16px; }


/* ==========================================================================
   11. MOBILE BOTTOM ACTION BAR
   Phones only. Uses the iPhone safe area so it clears the home indicator.
   ========================================================================== */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-line);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 16px rgba(15, 45, 30, .10);
}
.mobile-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 58px;
  padding: 8px 10px;
  background: #fff;
  color: var(--c-brand-darker);
  font-weight: 700;
  font-size: .97rem;
  text-decoration: none;
  text-align: center;
}
.mobile-bar__btn--emergency { background: var(--c-emergency); color: #fff; }
.mobile-bar__btn--emergency:hover { background: var(--c-emergency-dark); color: #fff; }

/* Stops the fixed bar from covering the end of the page */
body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }


/* ==========================================================================
   12. 404 PAGE
   ========================================================================== */
.error-page {
  display: flex;
  align-items: center;
  min-height: 60vh;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  text-align: center;
}
.error-page__inner { max-width: 640px; margin: 0 auto; }
.error-page__code {
  font-size: clamp(3.5rem, 2rem + 9vw, 6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-brand);
  margin: 0 0 .2em;
}
.error-page .btn-row { justify-content: center; }
.error-page .btn { flex: 0 1 260px; }


/* ==========================================================================
   13. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Phones: trim the header furniture so the hospital name is never cut off */
@media (max-width: 599px) {
  .lang__icon { display: none; }
  .lang__select { padding-left: 12px; padding-right: 26px; max-width: 112px; }
  .brand__logo { height: 38px; }
  .brand__name { font-size: 1rem; }
}

/* Small tablets and up */
@media (min-width: 600px) {
  .emergency-bar__num { display: inline; }
  .brand__tag { display: block; }
  .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand__logo { height: 46px; }
}

/* Tablets */
@media (min-width: 768px) {
  /* The fixed bottom bar is only for phones */
  .mobile-bar { display: none; }
  body { padding-bottom: 0; }

  .emergency-bar__inner { justify-content: space-between; }
  .doctor { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-card--wide { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-row .btn { flex: 0 1 auto; }
}

/* Small laptops.
   The full horizontal menu starts at 1080px. Below that the hamburger is used,
   because the Punjabi, Hindi and English menu labels plus the language selector
   need the extra room to stay on one line. */
@media (min-width: 1080px) {
  :root { --header-h: 76px; --header-min: 76px; }

  /* Full horizontal navigation; the drawer, its header, its footer and the
     hamburger are all put away. */
  .nav-toggle,
  .has-js .nav-toggle,
  .primary-nav__head,
  .primary-nav__foot,
  .nav-scrim { display: none; }

  .has-js .site-header .lang { display: inline-flex; }

  .primary-nav,
  .has-js .primary-nav {
    display: block;
    position: static;
    flex: 0 1 auto;
    width: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    order: 2;
    margin-left: auto;
    transform: none;
    visibility: visible;
    overflow: visible;
    /* no sliding at this width — the drawer animation belongs to phones only */
    transition: none;
  }
  .primary-nav__list { display: flex; gap: 2px; padding: 0; }
  .primary-nav__list a {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .98rem;
  }
  .header-tools { order: 3; }

  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .hero__media { order: 0; }
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .doctor { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; }
  .brand__logo { height: 52px; }
  .brand__name { font-size: 1.15rem; }
}

/* Large desktops */
@media (min-width: 1200px) {
  .primary-nav__list a { padding: 10px 16px; }
}


/* ==========================================================================
   14. ACCESSIBILITY AND MOTION
   ========================================================================== */

/* A clearly visible focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 6px;
}
.emergency-bar a:focus-visible,
.mobile-bar__btn--emergency:focus-visible,
.btn--emergency:focus-visible,
.site-footer a:focus-visible {
  outline-color: #fff;
}

/* Respect the visitor's reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card--service:hover { transform: none; }
}

/* Higher contrast for visitors who ask for it */
@media (prefers-contrast: more) {
  :root { --c-muted: #2C3B33; --c-line: #9FBAA8; }
}

/* Sensible printing */
@media print {
  .emergency-bar, .nav-toggle, .primary-nav, .mobile-bar, .lang, .map { display: none !important; }
  .site-header { position: static; }
  body { padding-bottom: 0; color: #000; }
  .site-footer { background: #fff; color: #000; }
  .site-footer a, .site-footer h2, .footer-text, .footer-disclaimer { color: #000; }
}