/* ==========================================================================
   theme.css — Clear Vision Eye Hospital
   Design system. Derived from the hospital's existing "Clinical Premium"
   palette (rc-theme.css) so the public site and the patient software read
   as one brand: Outfit + Cormorant Garamond, brand blue #1a5fb4, gold #c8860a.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Brand — carried over from the hospital's software theme */
  --brand-300:#7db1ea;
  --brand-400:#4a90e2;
  --brand-500:#2472d6;
  --brand-600:#1a5fb4;   /* primary */
  --brand-700:#144a8a;
  --brand-800:#0f3a6d;
  --brand-900:#0a2a50;

  --gold-300:#f0cd7c;
  --gold-400:#e0ad3a;
  --gold-500:#c8860a;    /* accent */
  --gold-600:#a06c05;

  --aqua-400:#2fb8c6;
  --aqua-500:#0e9aab;

  --ink:#141f2b;
  --ink-2:#1c2b3a;

  /* Neutrals */
  --text:#22323f;
  --text-2:#5d7183;
  --text-3:#8698a8;
  --line:#e4eaf1;
  --line-soft:#eef2f7;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --surface-3:#eef3f9;

  --success:#1a7f4b;
  --success-bg:#e8f6ee;

  /* Type */
  --font-sans:'Outfit','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  /* Fluid type scale */
  --fs-xs:.78rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-lg:clamp(1.05rem,.99rem + .3vw,1.19rem);
  --fs-xl:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --fs-2xl:clamp(1.5rem,1.3rem + 1vw,2rem);
  --fs-3xl:clamp(1.9rem,1.55rem + 1.7vw,2.85rem);
  --fs-4xl:clamp(2.3rem,1.7rem + 2.9vw,4rem);

  /* Space */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;
  --section-y:clamp(3.5rem,2.2rem + 5.5vw,6.5rem);

  /* Radii */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  /* Elevation */
  --e1:0 1px 2px rgba(16,32,52,.06), 0 2px 6px -2px rgba(16,32,52,.09);
  --e2:0 1px 2px rgba(16,32,52,.05), 0 10px 24px -10px rgba(16,32,52,.20);
  --e3:0 2px 4px rgba(16,32,52,.06), 0 24px 48px -18px rgba(16,32,52,.28);
  --e4:0 4px 8px rgba(16,32,52,.07), 0 40px 80px -28px rgba(10,40,80,.38);

  /* Motion */
  --ease:cubic-bezier(.4,.16,.2,1);
  --fast:.16s var(--ease);
  --slow:.34s var(--ease);

  --wrap:1200px;
  --wrap-narrow:820px;
  --header-h:76px;
}

/* --------------------------------------------------------------------------
   2. RESET / FOUNDATION
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

body{
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--text);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* The browser's own [hidden]{display:none} rule and an author class rule like
   .branch{display:flex} have EQUAL CSS specificity (0,1,0 each) — one
   attribute selector, one class selector. Author CSS always wins that tie
   over the UA stylesheet, so on any element that both has `hidden` set AND
   is styled with display:flex/grid/inline-flex by a class, `hidden` silently
   does nothing. This single !important rule is the standard fix and makes
   `hidden` reliable everywhere on the site, including future additions —
   this is what the branch search filter, the FAQ empty-state message and
   the form status line all depend on. */
[hidden]{ display:none !important; }

img,svg,video{ display:block; max-width:100%; height:auto; }
img{ background:var(--surface-3); }
a{ color:var(--brand-600); text-decoration:none; transition:color var(--fast); }
a:hover{ color:var(--brand-800); }
ul,ol{ padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }

::selection{ background:rgba(26,95,180,.18); }

:focus-visible{
  outline:3px solid var(--brand-400);
  outline-offset:3px;
  border-radius:4px;
}

/* Scrollbar */
*{ scrollbar-width:thin; scrollbar-color:rgba(26,95,180,.32) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:rgba(26,95,180,.28); border-radius:var(--r-pill);
  border:2px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(26,95,180,.5); background-clip:content-box; }

/* Accessibility helpers */
.sr-only{
  position:absolute; 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; left:8px; top:-60px; z-index:2000;
  background:var(--brand-700); color:#fff; padding:.7rem 1.1rem;
  border-radius:var(--r-sm); font-weight:600; transition:top var(--fast);
}
.skip-link:focus{ top:8px; color:#fff; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-sans);
  line-height:1.18;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
}
h1{ font-size:var(--fs-4xl); letter-spacing:-.033em; }
h2{ font-size:var(--fs-3xl); letter-spacing:-.028em; }
h3{ font-size:var(--fs-xl); }
h4{ font-size:var(--fs-lg); }

p{ text-wrap:pretty; }
.lead{ font-size:var(--fs-lg); color:var(--text-2); line-height:1.72; }
.muted{ color:var(--text-2); }
.small{ font-size:var(--fs-sm); }

/* Serif display accent — used for the emphasised half of headlines */
.display-serif{
  font-family:var(--font-display);
  font-weight:600;
  font-style:italic;
  letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--gold-500),var(--gold-400) 55%,var(--gold-300));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold-500);
}
.on-dark .display-serif,
.display-serif.on-dark{
  background:linear-gradient(100deg,var(--gold-300),#ffe6ac 60%,var(--gold-300));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{
  width:min(100% - 2.5rem,var(--wrap));
  margin-inline:auto;
}
@media (max-width:640px){ .wrap{ width:min(100% - 2rem,var(--wrap)); } }

.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:calc(var(--section-y) * .62); }
.section--alt{ background:var(--surface-2); }
.section--ink{
  background:
    radial-gradient(900px 520px at 8% 0%,rgba(36,114,214,.30),transparent 62%),
    radial-gradient(760px 480px at 96% 100%,rgba(200,134,10,.20),transparent 60%),
    linear-gradient(160deg,var(--ink) 0%,#0f2438 55%,var(--brand-900) 100%);
  color:#dce7f2;
}
.section--ink h2,.section--ink h3,.section--ink h4{ color:#fff; }
.section--ink .lead,.section--ink .muted{ color:#a9c1d8; }

/* The min() in each minmax() is deliberate. A bare minmax(300px,1fr) sets a
   hard 300px floor, so on a 280–320px phone the track is wider than its
   container and the page overflows sideways. min(300px,100%) lets the track
   collapse to the container width once there is less room than that. */
.grid{ display:grid; gap:var(--sp-5); }
.g-2{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.g-3{ grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr)); }
.g-4{ grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }

.stack{ display:flex; flex-direction:column; gap:var(--sp-4); }
.row{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }

/* Section heading block */
.sec-head{ max-width:760px; margin-bottom:var(--sp-6); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head p{ margin-top:var(--sp-3); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-600);
  margin-bottom:var(--sp-3);
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--brand-500));
}
.section--ink .eyebrow{ color:var(--gold-300); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.86rem 1.5rem;
  border-radius:var(--r-pill);
  font-weight:600; font-size:.97rem; letter-spacing:.005em;
  line-height:1.2; text-align:center;
  border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform var(--fast),box-shadow var(--fast),background var(--fast),color var(--fast),border-color var(--fast);
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:18px; height:18px; flex:none; }

.btn--primary{
  background:linear-gradient(135deg,var(--brand-500),var(--brand-600) 55%,var(--brand-700));
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 22px -10px rgba(26,95,180,.75);
}
.btn--primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 16px 30px -12px rgba(26,95,180,.85); }

.btn--gold{
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
  color:#3a2803;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 22px -10px rgba(200,134,10,.75);
}
.btn--gold:hover{ color:#3a2803; transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 30px -12px rgba(200,134,10,.85); }

.btn--ghost{
  background:#fff; color:var(--brand-700); border-color:var(--line);
  box-shadow:var(--e1);
}
.btn--ghost:hover{ color:var(--brand-800); border-color:var(--brand-300); transform:translateY(-2px); box-shadow:var(--e2); }

.btn--outline-light{
  background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(6px);
}
.btn--outline-light:hover{ background:rgba(255,255,255,.16); color:#fff; border-color:#fff; transform:translateY(-2px); }

.btn--wa{ background:#25d366; color:#062e14; box-shadow:0 10px 22px -10px rgba(37,211,102,.8); }
.btn--wa:hover{ color:#062e14; transform:translateY(-2px); }

/* Google Maps action. Paired with .btn--wa on every branch card, so it uses
   Google's red rather than a brand colour — the point is instant recognition,
   the same reason the WhatsApp button is WhatsApp green. */
.btn--map{ background:#ea4335; color:#fff; box-shadow:0 10px 22px -10px rgba(234,67,53,.75); }
.btn--map:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(234,67,53,.85); }

.btn--lg{ padding:1.02rem 1.85rem; font-size:1.03rem; }
.btn--sm{ padding:.55rem 1rem; font-size:.86rem; }
.btn--block{ width:100%; }

/* nowrap keeps buttons tidy at normal sizes, but a long label such as
   "See all branches with contact numbers" is wider than a 320px phone and
   was overflowing the page. Below this width, let the label wrap onto a
   second line instead. */
@media (max-width:520px){
  .btn{ white-space:normal; max-width:100%; }
}

/* Text link with arrow */
.link-arrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.94rem; color:var(--brand-600);
}
.link-arrow svg{ width:16px; height:16px; transition:transform var(--fast); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* --------------------------------------------------------------------------
   6. CHIPS / BADGES / PILLS
   -------------------------------------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .85rem;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:500; color:var(--text-2);
}
.chip svg{ width:15px; height:15px; color:var(--brand-600); flex:none; }
.chip--light{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); color:#e6eef7;
  backdrop-filter:blur(8px);
}
.chip--light svg{ color:var(--gold-300); }
.chip--gold{ background:#fdf6e6; border-color:#f2e0b4; color:var(--gold-600); }
.chip--gold svg{ color:var(--gold-500); }

.badge{
  display:inline-block; padding:.22rem .6rem;
  border-radius:var(--r-sm); font-size:var(--fs-xs);
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.badge--gold{ background:#fdf1d6; color:var(--gold-600); }
.badge--blue{ background:#e7f0fc; color:var(--brand-700); }
.badge--green{ background:var(--success-bg); color:var(--success); }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  box-shadow:var(--e1);
  transition:transform var(--slow),box-shadow var(--slow),border-color var(--slow);
}
.card--hover:hover{ transform:translateY(-5px); box-shadow:var(--e3); border-color:var(--brand-300); }
.card--pad-lg{ padding:var(--sp-6); }

/* Icon tile used across service / feature cards */
.icon-tile{
  width:54px; height:54px; flex:none;
  display:grid; place-items:center;
  border-radius:15px;
  background:linear-gradient(140deg,#e9f1fd,#d8e7fa);
  color:var(--brand-600);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.icon-tile svg{ width:27px; height:27px; }
.icon-tile--gold{ background:linear-gradient(140deg,#fdf3de,#f8e6c0); color:var(--gold-500); }
.icon-tile--aqua{ background:linear-gradient(140deg,#dff5f7,#c8ecf0); color:var(--aqua-500); }
.icon-tile--dark{ background:rgba(255,255,255,.09); color:var(--gold-300); box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }

/* --------------------------------------------------------------------------
   8. FORMS
   -------------------------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:.36rem; }
.field label{ font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.field .req{ color:#c0392b; }

.input,.select,.textarea{
  width:100%;
  padding:.78rem .95rem;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  font-size:.96rem; color:var(--text);
  transition:border-color var(--fast),box-shadow var(--fast);
}
.input::placeholder,.textarea::placeholder{ color:var(--text-3); }
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--brand-500);
  box-shadow:0 0 0 4px rgba(26,95,180,.13);
}
.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7183' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:17px;
  padding-right:2.4rem;
}
.textarea{ min-height:110px; resize:vertical; }
.form-note{ font-size:var(--fs-xs); color:var(--text-3); line-height:1.55; }

/* Submission feedback ----------------------------------------------------- */
.form-status{
  display:flex; align-items:flex-start; gap:.5rem;
  margin-top:.2rem; padding:.7rem .9rem;
  border-radius:var(--r-md);
  font-size:var(--fs-sm); line-height:1.6;
  border:1px solid transparent;
}
.form-status.is-info{    background:#eaf2fd; border-color:#cfe0f8; color:var(--brand-800); }
.form-status.is-success{ background:var(--success-bg); border-color:#c6e6d4; color:#17603b; font-weight:500; }
.form-status.is-error{   background:#fdecea; border-color:#f6cfca; color:#a12b1c; }

/* Field-level validation returned by the server --------------------------- */
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea{
  border-color:#d9534f;
  box-shadow:0 0 0 3px rgba(217,83,79,.14);
}
.field-error{
  font-size:var(--fs-xs); color:#a12b1c; line-height:1.5; margin-top:.1rem;
}

/* The honeypot wrapper is positioned off-screen inline by the script; this is
   a second guard in case a stylesheet loads and the inline style is stripped. */
input[name="website"]{ position:absolute !important; left:-9999px !important; }

/* --------------------------------------------------------------------------
   9. UTILITIES
   -------------------------------------------------------------------------- */
/* Default size for a bare sprite icon; component rules override this. */
.ico{ width:20px; height:20px; flex:none; }
.ico--sm{ width:16px; height:16px; }
.ico--lg{ width:26px; height:26px; }

.center{ text-align:center; }
.mt-0{ margin-top:0; } .mt-2{ margin-top:var(--sp-2); }
.mt-3{ margin-top:var(--sp-3); } .mt-4{ margin-top:var(--sp-4); }
.mt-5{ margin-top:var(--sp-5); } .mt-6{ margin-top:var(--sp-6); }
.hide-mobile{ display:initial; }
.only-mobile{ display:none; }
@media (max-width:820px){
  .hide-mobile{ display:none !important; }
  .only-mobile{ display:initial; }
}

/* Reveal-on-scroll.
   Content is VISIBLE by default and is only hidden once site.js has actually
   created the IntersectionObserver and put `reveal-anim` on <html>. Hiding on
   the mere presence of `.js` was unsafe: if the observer never fired, every
   revealed section stayed at opacity 0 and the page rendered blank. site.js
   also force-reveals anything still hidden after a short timeout. */
.reveal{ opacity:1; }
.reveal-anim .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.reveal-anim .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal-anim .reveal{ opacity:1 !important; transform:none !important; }
}