/* =========================================================
   Okafor Memorial Hospital — Design System
   ========================================================= */

/* Legacy token names, now carrying the Figma palette ("sky" is the brand
   green, "gold" the story-divider gold) so every older rule follows it. */
:root {
  --ok-font-sans: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ok-font-display: 'Roboto Serif', Georgia, 'Times New Roman', serif;
  --ok-sky-950: #022720;
  --ok-sky-900: #03664f;
  --ok-sky-800: #047760;
  --ok-sky-700: #047760;
  --ok-sky-600: #0a8468;
  --ok-sky-500: #3fa487;
  --ok-sky-100: #d5ede5;
  --ok-sky-50: #eef7f4;
  --ok-green-950: #022720;
  --ok-green-900: #03664f;
  --ok-green-800: #047760;
  --ok-green-700: #047760;
  --ok-green-500: #3fa487;
  --ok-green-100: #eef7f4;
  --ok-gold-600: #9b8a55;
  --ok-gold-400: #bbad84;
  --ok-coral-600: #ab6038;
  --ok-coral-100: #faf0e6;
  --ok-ink: #1a1a1a;
  --ok-muted: #525252;
  --ok-paper: #ffffff;
  --ok-line: #ece5d0;
  --ok-control-radius: 0;
  --ok-shadow-sm: 0 10px 30px rgba(26, 26, 26, 0.06);
  --ok-shadow-md: 0 24px 60px rgba(26, 26, 26, 0.1);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ok-font-sans);
  -webkit-font-smoothing: antialiased;
  background-color: var(--ok-paper);
  color: var(--ok-ink);
}

.skip-link {
  background: #ffffff;
  border: 2px solid var(--ok-sky-700);
  border-radius: var(--ok-control-radius);
  color: var(--ok-sky-950);
  font-size: 0.82rem;
  font-weight: 800;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: 1rem;
  transform: translateY(-180%);
  transition: transform 0.15s ease;
  z-index: 2000;
}

.skip-link:focus {
  transform: translateY(0);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ok-font-display);
  font-weight: 400;
  letter-spacing: -0.035em;
}

a {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

/* ---- Focus styles ---- */
*:focus-visible {
  outline: 2px solid var(--ok-sky-700);
  outline-offset: 2px;
}

/* ---- Selection ---- */
::selection {
  background-color: var(--ok-gold-400);
  color: var(--ok-sky-950);
}

/* ---- Images ---- */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inline icons without an explicit size otherwise fall back to the browser's
   300x150 SVG viewport. Keep the default bounded while allowing component
   selectors and Tailwind utilities to set intentional icon dimensions. */
:where(svg:not([class]):not([width]):not([height])) {
  display: block;
  height: 1em;
  max-width: 100%;
  width: 1em;
}

/* ---- Shared public helpers ---- */
.doctor-thumbnail {
  object-fit: cover;
}

.card-action-row {
  margin-top: auto;
  padding-top: 1rem;
}

@media (max-width: 767.98px) {
  h1,
  .h1 {
    font-size: 2rem;
    line-height: 1.12;
  }

  h2,
  .h2 {
    font-size: 1.625rem;
    line-height: 1.18;
  }

  input,
  select,
  textarea {
    font-size: 16px;
    width: 100%;
  }
}

/* ---- Prevent layout shift on nav sticky ---- */
header {
  backface-visibility: hidden;
}

/* ---- Shared interactions ---- */
[x-cloak] {
  display: none !important;
}

/* =========================================================
   Site chrome: utility bar, header, mobile menu, footer and the
   WhatsApp button. Sizes are pixel values from the Figma
   "Boniface - Paulina" file: desktop frame 121:1970 (1252px content
   column) and mobile frame 125:602 (362px content column). Below
   1024px the chrome switches to the mobile frame.
   ========================================================= */

:root {
  --bp-green: #047760;
  --bp-cream: #f5f0e1;
  --bp-night: #022720;
  --bp-night-bar: #032720;
  --bp-mint: #76fadf;
  --bp-mint-deep: #5fdec4;
  --bp-mint-bright: #6af3d7;
  --bp-silver: #dfdfdf;
  --bp-ink: #1a1a1a;
  --bp-ink-strong: #171717;
  --bp-body: #525252;
  --bp-nav-muted: #9b937a;
  --bp-card-line: #f2f2f2;
  --bp-gold-line: #bbad84;
  --bp-grey: #eaeaea;
  --bp-lime: #a2ea3c;
  --bp-olive: #3e4415;
  --bp-font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bp-font-serif: "Roboto Serif", Georgia, "Times New Roman", serif;
  --bp-font-condensed: "Roboto Condensed", "Roboto", sans-serif;
}

.bp-wrap {
  margin-inline: auto;
  width: min(100% - 64px, 1252px);
}

/* Brand lockup: mark + "BAPOM" + "Hospital". Every size in the design is the
   same lockup scaled, so everything derives from the mark size. The per-letter
   spacing is the designer's kerning, in fixed px at every size. */
.brand-lockup {
  --brand-size: 44px;
  color: var(--bp-green);
  display: inline-grid;
  flex: 0 0 auto;
  grid-template: max-content / max-content;
  line-height: 1;
  place-items: start;
  text-decoration: none;
}

.brand-lockup > * {
  grid-area: 1 / 1;
}

.brand-lockup .brand-lockup__mark {
  height: var(--brand-size);
  width: var(--brand-size);
}

.brand-lockup__bapom {
  font-family: var(--bp-font-condensed);
  font-size: calc(var(--brand-size) * 0.71995);
  font-weight: 900;
  letter-spacing: -0.05em;
  margin: calc(var(--brand-size) * 0.23409) 0 0 var(--brand-size);
  white-space: nowrap;
}

.brand-lockup__hospital {
  font-family: var(--bp-font-serif);
  font-size: calc(var(--brand-size) * 0.73761);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: calc(var(--brand-size) * 0.22) 0 0 calc(var(--brand-size) * 3.12591);
  white-space: nowrap;
}

.brand-kern-a { letter-spacing: -0.32px; }
.brand-kern-p { letter-spacing: -0.64px; }
.brand-kern-h { letter-spacing: -1.12px; }
.brand-kern-o,
.brand-kern-pi { letter-spacing: -0.8px; }
.brand-kern-s { letter-spacing: -0.96px; }
.brand-kern-t { letter-spacing: -0.64px; }
.brand-kern-a2 { letter-spacing: -0.16px; }

/* ---- Utility bar ---- */
.site-utility {
  background: var(--bp-night-bar);
  font-family: var(--bp-font-sans);
}

.site-utility__inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding-block: 12px;
}

.site-utility__emergency {
  align-items: baseline;
  display: inline-flex;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}

.site-utility__emergency-label {
  color: var(--bp-mint);
  font-size: 16px;
  line-height: 24px;
}

.site-utility__emergency-number {
  color: var(--bp-silver);
  font-family: var(--bp-font-serif);
  font-size: 30.333px;
  letter-spacing: -0.07em;
  line-height: 1.25;
}

.site-utility__actions {
  align-items: center;
  display: flex;
  gap: 32px;
}

.site-utility__form {
  display: contents;
}

.site-utility__link {
  background: none;
  border: 0;
  color: var(--bp-mint-deep);
  cursor: pointer;
  font: 600 16px/24px var(--bp-font-sans);
  padding: 0;
  text-decoration: none;
}

.site-utility__link:hover {
  color: var(--bp-mint);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-utility__buttons {
  align-items: center;
  display: flex;
  gap: 16px;
}

.site-utility__donate,
.site-utility__login {
  font: 600 16px/24px var(--bp-font-sans);
  opacity: 0.9;
  padding: 6px 16px;
  text-decoration: none;
}

.site-utility__donate {
  background: var(--bp-mint-bright);
  color: var(--bp-night);
}

.site-utility__login {
  border: 1px solid var(--bp-mint-deep);
  color: var(--bp-mint-deep);
}

.site-utility__donate:hover,
.site-utility__login:hover {
  opacity: 1;
}

.site-utility :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--bp-mint);
}

/* ---- Header ---- */
.site-header {
  background: var(--bp-cream);
  font-family: var(--bp-font-sans);
  isolation: isolate;
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding-block: 12px;
}

.site-nav {
  align-items: center;
  display: flex;
  gap: 32px;
}

.site-nav a {
  color: var(--bp-nav-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a.is-active {
  color: var(--bp-ink);
}

/* The Figma icon is 24px; the button around it keeps a 44px tap target
   without moving the icon off its designed position. */
.site-header__menu-button {
  background: none;
  border: 0;
  cursor: pointer;
  display: none;
  margin: -10px;
  padding: 10px;
}

.site-header__menu-button img {
  height: 24px;
  width: 24px;
}

/* ---- Mobile menu (not in the Figma file; styled to match it) ---- */
.site-mobile-menu {
  background: var(--bp-cream);
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  display: none;
}

.site-mobile-menu.is-open {
  display: block;
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-menu {
  display: grid;
  padding-block: 4px 24px;
}

.site-menu__link {
  align-items: center;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  color: var(--bp-ink);
  display: flex;
  font-size: 18px;
  font-weight: 500;
  min-height: 52px;
  text-decoration: none;
}

.site-menu__link.is-active {
  color: var(--bp-green);
}

.site-menu__actions {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.site-menu__button {
  align-items: center;
  background: none;
  border: 1px solid var(--bp-green);
  color: var(--bp-green);
  cursor: pointer;
  display: flex;
  font: 600 16px/24px var(--bp-font-sans);
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  text-decoration: none;
  width: 100%;
}

.site-menu__button--donate {
  background: var(--bp-mint-bright);
  border-color: var(--bp-mint-bright);
  color: var(--bp-night);
}

@media (min-width: 1024px) {
  .site-mobile-menu,
  .site-mobile-menu.is-open {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {
  .site-utility__actions,
  .site-nav {
    display: none;
  }

  .site-utility__emergency-label {
    font-size: 14px;
    line-height: 21px;
  }

  .site-utility__emergency-number {
    font-size: 28px;
  }

  .site-header__menu-button {
    display: inline-flex;
  }

  .brand-lockup {
    --brand-size: 32px;
  }
}

@media (max-width: 379.98px) {
  .site-utility__emergency-label {
    font-size: 12px;
  }

  .site-utility__emergency-number {
    font-size: 22px;
  }
}

@media (max-width: 719.98px) {
  .bp-wrap {
    width: min(100% - 40px, 1252px);
  }

  .site-header .bp-wrap {
    width: min(100% - 30px, 1252px);
  }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--bp-night);
  color: var(--bp-mint);
  font-family: var(--bp-font-sans);
  font-size: 16px;
  line-height: 1.5;
  padding-block: 48px;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer p {
  margin: 0;
}

.site-footer strong {
  font-weight: 600;
}

/* Centred over the divider between the two panels, as in the design. */
.site-footer__title {
  color: #ffffff;
  font-family: var(--bp-font-serif);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.3;
  margin: 0;
  padding-left: 32px;
  text-align: center;
}

.site-footer__panels {
  display: grid;
  grid-template-columns: minmax(0, 642fr) minmax(0, 610fr);
  margin-top: 40px;
}

.site-footer__panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 88px 84px;
  text-align: center;
}

.site-footer__panel + .site-footer__panel {
  border-left: 1px solid var(--bp-mint);
}

.site-footer__panel h3 {
  color: #ffffff;
  font-family: var(--bp-font-serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.3;
  margin: 0;
}

.site-footer__panel p {
  margin-top: 24px;
}

.site-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

.site-footer__panel--give p {
  margin-top: 13px;
}

.site-footer__panel--give .site-footer__actions {
  margin-top: 48px;
}

.site-footer .footer-button {
  align-items: flex-start;
  background: #ffffff;
  color: var(--bp-ink);
  display: inline-flex;
  font-weight: 600;
  gap: 10px;
  line-height: 24px;
  padding: 12px 8px 12px 16px;
  white-space: nowrap;
}

.site-footer .footer-button:hover {
  background: var(--bp-cream);
  text-decoration: none;
}

.footer-button__icon {
  color: var(--bp-body);
  flex: 0 0 auto;
  height: 24px;
  width: 24px;
}

.site-footer__stats {
  border-top: 1px solid var(--bp-mint);
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 32px 0 0;
}

.site-footer__stats li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__stats strong {
  color: #ffffff;
  font-family: var(--bp-font-serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.3;
}

.site-footer__bottom {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 84px;
}

.site-footer .site-footer__brand {
  --brand-size: 67.316px;
  color: #ffffff;
  grid-column: 1 / span 2;
}

.site-footer .site-footer__brand:hover {
  text-decoration: none;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__column ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__heading {
  color: #ffffff;
  font-family: var(--bp-font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
}

.site-footer__legal {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 106px;
}

@media (max-width: 1023.98px) {
  .site-footer__panel {
    padding: 56px 32px;
  }

  .site-footer__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer .site-footer__brand {
    --brand-size: 40px;
    grid-column: 1 / -1;
  }
}

@media (max-width: 719.98px) {
  .site-footer {
    padding-block: 48px 40px;
  }

  .site-footer__title {
    font-size: 28px;
    padding-left: 0;
    text-align: left;
  }

  .site-footer__panels {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .site-footer__panel {
    align-items: stretch;
    padding: 0;
    text-align: left;
  }

  .site-footer__panel + .site-footer__panel {
    border-left: 0;
    border-top: 1px solid var(--bp-mint);
    padding-top: 32px;
  }

  .site-footer__panel h3 {
    font-size: 20px;
    letter-spacing: -0.045em;
  }

  .site-footer__panel p,
  .site-footer__panel--give p {
    margin-top: 24px;
  }

  .site-footer__actions,
  .site-footer__panel--give .site-footer__actions {
    flex-direction: column;
    margin-top: 24px;
  }

  .site-footer .footer-button {
    justify-content: space-between;
    white-space: normal;
  }

  .site-footer__stats {
    gap: 24px;
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .site-footer__stats strong {
    font-size: 30px;
  }

  .site-footer__bottom {
    grid-template-columns: 1fr;
    margin-top: 72px;
  }

  .site-footer__legal {
    flex-direction: column;
    gap: 24px;
    margin-top: 48px;
  }
}

/* ---- WhatsApp button: sits just outside the content column on wide screens ---- */
.whatsapp-float {
  align-items: center;
  background: var(--bp-lime);
  border-radius: 32px;
  bottom: 24px;
  color: var(--bp-olive);
  display: inline-flex;
  justify-content: center;
  padding: 16px;
  position: fixed;
  right: max(16px, calc((100vw - 1252px) / 2 - 63px));
  z-index: 1000;
}

.whatsapp-float:hover {
  background: #b3f25a;
  color: var(--bp-olive);
}

.whatsapp-float__icon {
  height: 24px;
  width: 24px;
}

.whatsapp-float__text {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.form-field,
input,
select,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 12px 28px rgba(26, 58, 117, 0.12);
}

.field-is-filled {
  border-color: var(--ok-sky-500) !important;
  background-image: linear-gradient(90deg, rgba(247, 244, 236, 0.85), rgba(255, 255, 255, 1));
}

.is-submitting {
  cursor: progress;
  opacity: 0.76;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

.section-shell {
  background-color: #fffdf9;
}

.pwa-install-button {
    position: static;
    min-height: 44px;
    border: 0;
    border-radius: var(--ok-control-radius);
    background: var(--ok-green-800);
    color: #ffffff;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pwa-install-button:disabled {
    opacity: 0.65;
}

/* Verified medical-officer profile. All selectors stay within the public team page. */
.team-page .medical-officer-profile {
    background: #ffffff;
    margin-bottom: 3rem;
    overflow: hidden;
}

.team-page .team-feature-profile__media {
    min-height: 20rem;
}

.team-page .medical-officer-profile__feature {
    margin-bottom: 0;
}

.team-page .site-card {
    border: 0;
    box-shadow: none;
}

.team-page .medical-officer-profile__section-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin: 0;
    text-transform: uppercase;
}

.team-page .medical-officer-profile__body {
    border-top: 1px solid rgba(26, 26, 26, 0.08);
    padding: clamp(1.5rem, 5vw, 3.25rem);
}

.team-page .medical-officer-profile__section-label {
    color: #8c6b32;
}

.team-page .medical-officer-profile__body h3 {
    color: #1a1a1a;
    font-family: var(--ok-font-display, Georgia, serif);
    font-size: clamp(1.65rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.12;
    margin: 0.5rem 0 0;
}

.team-page .medical-officer-profile__qualifications ol {
    counter-reset: qualification;
    display: grid;
    gap: 0.65rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.team-page .medical-officer-profile__qualifications li {
    align-items: start;
    counter-increment: qualification;
    display: grid;
    gap: 0.3rem 1rem;
    grid-template-columns: 2rem minmax(0, 0.65fr) minmax(0, 1fr);
    padding: 1rem 0;
}

.team-page .medical-officer-profile__qualifications li::before {
    color: #8c6b32;
    content: counter(qualification, decimal-leading-zero);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding-top: 0.15rem;
}

.team-page .medical-officer-profile__qualifications strong {
    color: #1a1a1a;
    font-size: 0.9rem;
}

.team-page .medical-officer-profile__qualifications span {
    color: #57534e;
    font-size: 0.88rem;
    line-height: 1.55;
}

.team-page .medical-officer-profile__scope {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
}

.team-page .medical-officer-profile__scope-heading {
    display: grid;
    gap: 1rem 2.5rem;
}

.team-page .medical-officer-profile__scope-heading > p {
    color: #57534e;
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0;
    max-width: 38rem;
}

.team-page .medical-officer-profile__scope-grid {
    display: grid;
    gap: 2rem;
    margin-top: 1.75rem;
}

.team-page .medical-officer-scope-card {
    padding: 0;
}

.team-page .medical-officer-scope-card__heading {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.team-page .medical-officer-scope-card__heading span {
    color: #8c6b32;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    padding-top: 0.3rem;
}

.team-page .medical-officer-scope-card h4 {
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0;
}

.team-page .medical-officer-scope-card > p {
    color: #57534e;
    font-size: 0.84rem;
    line-height: 1.6;
    margin: 0.8rem 0 0;
}

.team-page .medical-officer-scope-card ul {
    display: grid;
    gap: 0.55rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.team-page .medical-officer-scope-card li {
    color: #44403c;
    font-size: 0.84rem;
    line-height: 1.5;
    padding-left: 1.05rem;
    position: relative;
}

.team-page .medical-officer-scope-card li::before {
    background: #2f6f57;
    border-radius: 50%;
    content: "";
    height: 0.38rem;
    left: 0;
    position: absolute;
    top: 0.48rem;
    width: 0.38rem;
}

@media (min-width: 720px) {
    .team-page .medical-officer-profile__scope-heading {
        align-items: end;
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr);
    }

    .team-page .medical-officer-profile__scope-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639.98px) {
    .team-page .medical-officer-profile__qualifications li {
        grid-template-columns: 1.75rem minmax(0, 1fr);
    }

    .team-page .medical-officer-profile__qualifications span {
        grid-column: 2;
    }
}

.offline-status-banner {
    background: #7a3413;
    color: #fff7ed;
    font-size: 0.84rem;
    font-weight: 750;
    letter-spacing: 0;
    left: 0;
    padding: 0.8rem 1rem;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 1000;
}

html.is-offline body {
    padding-top: 2.8rem;
}

.is-offline-disabled {
    cursor: not-allowed !important;
    filter: grayscale(0.25);
    opacity: 0.48;
    pointer-events: auto;
}

.is-offline-login-warning {
    color: #e0c592 !important;
    cursor: not-allowed !important;
    font-weight: 800;
}

.is-offline .booking-live-only {
    display: none !important;
}

@media (max-width: 640px) {
    .pwa-install-button {
        max-width: calc(100vw - 2rem);
    }
}

/* =========================================================
   Shared public component contract
   ========================================================= */

/* Buttons, page headers, cards and panels follow the homepage's Figma spec:
   square corners, 16px SemiBold Roboto, green primary, hairline cards. */
.site-button,
.ok-btn,
.public-search__button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  font: 600 16px/24px var(--bp-font-sans);
  gap: 10px;
  justify-content: center;
  letter-spacing: 0;
  min-height: 48px;
  padding: 12px 16px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.site-button:focus-visible,
.ok-btn:focus-visible,
.public-search__button:focus-visible {
  outline: 3px solid var(--bp-green);
  outline-offset: 3px;
}

.site-button:disabled,
.ok-btn:disabled,
.public-search__button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.site-button--primary,
.ok-btn-primary,
.public-search__button {
  background: var(--bp-green);
  border-color: var(--bp-green);
  color: #ffffff;
}

.site-button--primary:hover,
.ok-btn-primary:hover:not(:disabled),
.public-search__button:hover {
  background: #03664f;
  border-color: #03664f;
  color: #ffffff;
}

.site-button--secondary,
.ok-btn-secondary {
  background: transparent;
  border-color: var(--bp-green);
  color: var(--bp-green);
}

.site-button--secondary:hover,
.ok-btn-secondary:hover:not(:disabled) {
  background: rgba(4, 119, 96, 0.08);
  border-color: var(--bp-green);
  color: var(--bp-green);
}

.site-button--light {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--bp-ink);
}

.site-button--light:hover {
  background: var(--bp-cream);
  border-color: var(--bp-cream);
  color: var(--bp-ink);
}

.site-button--whatsapp,
.ok-whatsapp-btn {
  background: #128c7e;
  border-color: #128c7e;
  color: #ffffff;
}

.site-button--whatsapp:hover,
.ok-whatsapp-btn:hover {
  background: #075e54;
  border-color: #075e54;
  color: #ffffff;
}

.ok-summary-card dd,
.ok-summary-card [data-result-email],
.ok-summary-card [data-result-reference] {
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-action-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Inner-page top: cream band, left-aligned kicker, 44px serif title, 18px lead. */
.site-page-header,
.ok-page-header {
  background: var(--bp-cream);
  border: 0;
  padding-block: 80px;
}

.site-page-header__inner {
  margin-inline: auto;
  width: min(100% - 64px, 1252px);
}

.site-page-header__split {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.site-page-kicker,
.ok-kicker {
  color: var(--bp-green);
  font: 600 16px/1.5 var(--bp-font-sans);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.site-page-title,
.ok-page-title {
  color: var(--bp-ink);
  font-family: var(--bp-font-serif);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.3;
  max-width: 820px;
  text-wrap: balance;
}

.site-page-lede,
.ok-copy {
  color: var(--bp-ink);
  font-size: 18px;
  line-height: 1.5;
  max-width: 720px;
}

.site-page-surface,
.ok-page-band {
  background: #ffffff;
  padding-block: 80px;
}

.account-shell {
  align-items: center;
  background: var(--bp-cream);
  display: flex;
  min-height: 60vh;
  padding-block: 80px;
}

.account-card {
  background: #ffffff;
  border: 1px solid var(--bp-card-line);
  border-radius: 0;
  padding: 40px 32px;
}

.site-card,
.hub-panel,
.ok-panel,
.ok-sidebar-panel {
  background: #ffffff;
  border: 1px solid var(--bp-card-line);
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}

main {
  min-width: 0;
}

main :where(section, article, div)[id] {
  scroll-margin-top: 5rem;
}

main a,
footer a {
  overflow-wrap: anywhere;
}

@media (max-width: 719.98px) {
  .site-page-header,
  .ok-page-header,
  .site-page-surface,
  .ok-page-band,
  .account-shell {
    padding-block: 48px;
  }

  .site-page-header__inner {
    width: min(100% - 40px, 1252px);
  }

  .site-page-title,
  .ok-page-title {
    font-size: 28px;
  }

  .site-page-lede,
  .ok-copy {
    font-size: 16px;
  }

  .account-card {
    padding: 32px 20px;
  }
}

@media (max-width: 640px) {

  .site-page-header__split {
    display: grid;
  }

  .site-page-header__split > button {
    justify-self: start;
  }

  .site-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .site-action-row > .site-button,
  .site-action-row > .ok-btn {
    width: 100%;
  }

  .ok-summary-card .justify-between {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }
}

/* =========================================================
   Public forms — shared validation and readability rules
   ========================================================= */

/* Server-side model errors. Previously every form styled this inline with
   slightly different Tailwind utilities. */
.validation-summary-errors {
  border: 1px solid #e5b3ae;
  border-left: 4px solid #b3261e;
  border-radius: 0.5rem;
  background: #fdf3f2;
  color: #7d1f1a;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
}

.validation-summary-errors ul {
  list-style: disc;
  margin: 0;
  padding-left: 1.15rem;
}

.validation-summary-errors li + li {
  margin-top: 0.35rem;
}

.validation-summary-valid {
  display: none;
}

/* Body copy on form pages runs a step larger than marketing copy. */
.form-page-note {
  color: #4b4740;
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Larger, better-separated tap targets on phones. */
@media (max-width: 640px) {
  .ok-field {
    font-size: 1.0625rem;
    min-height: 3.4rem;
  }

  .ok-form-label {
    font-size: 1rem;
  }

  form .site-button,
  form .ok-btn {
    width: 100%;
  }
}

/* =========================================================
   Mobile readability
   The public site is mostly read on a phone by patients and relatives, many
   of them older. Raising the root size scales every rem-based size at once,
   so type, spacing and tap targets all grow together rather than type alone
   growing into cramped boxes.
   ========================================================= */
@media (max-width: 640px) {
  html {
    font-size: 106.25%; /* 17px base */
  }
}

/* Underline body links in running text so they are not identified by colour
   alone — this matters for older readers and anyone with colour blindness. */
main p a:not([class]),
main li a:not([class]),
.editorial-prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}