/* ============================================================
   MedBase — the clinic website template (server/site).

   One stylesheet for every clinic. The clinic's colours, font stack, corner
   radius and spacing arrive as custom properties from /site/theme.css, which
   is generated from the clinic's validated package; nothing in this file
   names a clinic or a brand colour.

   ARABIC FIRST
   ------------
   The template's first reader reads right to left. Every rule below uses
   logical properties (inline-start/end, block-start/end), so the Arabic page
   is the page as written and English is the same page mirrored by dir="ltr".
   Text sizes and line heights are set for Arabic script, which needs more
   height than Latin to stay legible, and the default font stacks put an Arabic
   face first. Phone numbers and times are isolated as left-to-right.

   Accessibility: 44px minimum targets, a visible focus ring, no information
   carried by colour alone, and no motion for readers who ask for none.
   ============================================================ */
:root{
  --site-bg:#f7f8f6; --site-card:#ffffff; --site-alt:#eef3f1;
  --site-ink:#16211d; --site-ink-2:#44524d; --site-muted:#5d6b66;
  --site-line:#dce4e0; --site-focus:#0b57d0;
  --site-warn-bg:#fff4e5; --site-warn-ink:#6b3a00; --site-warn-line:#f0c68a;
  --site-shadow:0 1px 2px rgba(16,24,20,.06),0 8px 24px -12px rgba(16,24,20,.18);
  /* defaults, replaced by /site/theme.css */
  --site-brand:#1c6f5a; --site-action:#b04a1f; --site-action-hover:#9b411b; --site-on-action:#fff;
  --site-font:"Noto Sans Arabic","Segoe UI",Tahoma,"Geeza Pro",Arial,sans-serif;
  --site-r-sm:10px; --site-r:14px; --site-section-pad:4.5rem;
  --site-max:72rem; --site-tap:44px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --site-bg:#0f1714; --site-card:#17211d; --site-alt:#131d19;
    --site-ink:#e7efeb; --site-ink-2:#b9c7c1; --site-muted:#9fb0a9;
    --site-line:#2a3833; --site-focus:#8ab4f8;
    --site-warn-bg:#33240f; --site-warn-ink:#f3cf98; --site-warn-line:#6d5220;
    --site-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme=dark]{
  --site-bg:#0f1714; --site-card:#17211d; --site-alt:#131d19;
  --site-ink:#e7efeb; --site-ink-2:#b9c7c1; --site-muted:#9fb0a9;
  --site-line:#2a3833; --site-focus:#8ab4f8;
  --site-warn-bg:#33240f; --site-warn-ink:#f3cf98; --site-warn-line:#6d5220;
  --site-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box;}
body.site{margin:0;background:var(--site-bg);color:var(--site-ink);font-family:var(--site-font);
  font-size:1.0625rem;line-height:1.75;-webkit-text-size-adjust:100%;overflow-x:hidden;}
html[lang=en] body.site{line-height:1.6;}
.site img{max-width:100%;height:auto;}
.site a{color:var(--site-brand);text-underline-offset:.2em;}
.site :focus-visible{outline:3px solid var(--site-focus);outline-offset:2px;border-radius:4px;}
.site h1,.site h2,.site h3{line-height:1.35;margin:0 0 .75rem;color:var(--site-ink);}
.site h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:800;letter-spacing:0;}
.site h2{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:750;}
.site h3{font-size:1.2rem;font-weight:700;}
.site p{margin:0 0 1rem;}
.site-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.site-container{max-width:var(--site-max);margin-inline:auto;padding-inline:1rem;}
@media (min-width:48rem){.site-container{padding-inline:2rem;}}
.site-ic{flex:none;vertical-align:-.2em;}
bdi[dir=ltr]{unicode-bidi:isolate;}

.site-skip{position:absolute;inset-inline-start:.5rem;top:-4rem;z-index:50;background:var(--site-card);color:var(--site-ink);
  padding:.75rem 1rem;border-radius:var(--site-r-sm);box-shadow:var(--site-shadow);font-weight:700;}
.site-skip:focus{top:.5rem;}

/* ---- draft banner: a preview is never mistaken for the published site ---- */
.site-draft{background:var(--site-warn-bg);color:var(--site-warn-ink);border-block-end:1px solid var(--site-warn-line);
  padding:.6rem 1rem;text-align:center;font-size:.95rem;}
.site-draft b{margin-inline-end:.4rem;}

/* ---- buttons ---- */
.site-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--site-tap);
  padding:.5rem 1.15rem;border-radius:var(--site-r-sm);font:inherit;font-weight:700;line-height:1.2;
  text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center;}
.site a.site-btn-action,.site-btn-action{background:var(--site-action);color:var(--site-on-action);}
.site a.site-btn-action:hover,.site-btn-action:hover{background:var(--site-action-hover);}
.site a.site-btn-quiet,.site-btn-quiet{background:var(--site-card);color:var(--site-brand);border-color:var(--site-line);}
.site a.site-btn-quiet:hover{border-color:var(--site-brand);}
.site-btn-lg{min-height:52px;padding-inline:1.5rem;font-size:1.05rem;}
.site-link{display:inline-flex;align-items:center;gap:.4rem;min-height:var(--site-tap);font-weight:650;}

/* ---- header ---- */
.site-header{background:var(--site-card);border-block-end:1px solid var(--site-line);position:sticky;top:0;z-index:20;}
.site-bar{display:flex;align-items:center;gap:1rem;min-height:4.25rem;}
.site-brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--site-ink)!important;margin-inline-end:auto;min-height:var(--site-tap);}
.site-logo{width:44px;height:44px;border-radius:var(--site-r-sm);object-fit:contain;}
.site-name{font-weight:800;font-size:1.1rem;line-height:1.3;}
.site-nav{display:none;}
.site-nav ul,.site-menu ul{list-style:none;margin:0;padding:0;}
.site-nav ul{display:flex;gap:.25rem;}
.site-nav a,.site-menu nav a:not(.site-btn){display:inline-flex;align-items:center;min-height:var(--site-tap);padding-inline:.75rem;
  border-radius:var(--site-r-sm);color:var(--site-ink-2);text-decoration:none;font-weight:600;}
.site-nav a:hover{background:var(--site-alt);color:var(--site-ink);}
.site-tools{display:none;align-items:center;gap:.5rem;}
.site-lang{display:inline-flex;align-items:center;min-height:var(--site-tap);padding-inline:.75rem;border-radius:var(--site-r-sm);
  border:1px solid var(--site-line);color:var(--site-ink)!important;text-decoration:none;font-weight:650;}
.site-menu{position:static;}
.site-menu summary{display:inline-flex;align-items:center;gap:.4rem;min-height:var(--site-tap);min-width:var(--site-tap);
  padding-inline:.75rem;border:1px solid var(--site-line);border-radius:var(--site-r-sm);cursor:pointer;font-weight:650;list-style:none;}
.site-menu summary::-webkit-details-marker{display:none;}
.site-menu[open] summary{background:var(--site-alt);}
.site-menu nav{position:absolute;inset-inline:0;top:100%;background:var(--site-card);border-block-end:1px solid var(--site-line);
  box-shadow:var(--site-shadow);padding:.5rem 1rem 1rem;}
.site-menu nav li a{width:100%;font-size:1.05rem;}
.site-menu-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.5rem;}
@media (min-width:60rem){
  .site-nav,.site-tools{display:flex;}
  .site-menu{display:none;}
}
.site-hide-sm{display:none;}
@media (min-width:60rem){.site-hide-sm{display:inline-flex;}}

/* ---- hero ---- */
.site-hero{padding-block:2.5rem 3rem;background:linear-gradient(180deg,var(--site-card),var(--site-bg));}
.site-hero-grid{display:grid;gap:2rem;align-items:center;}
@media (min-width:56rem){.site-hero-grid{grid-template-columns:1.1fr 1fr;gap:3rem;}.site-hero{padding-block:4rem 4.5rem;}}
.site-eyebrow{color:var(--site-brand);font-weight:750;margin-block-end:.5rem;}
.site-lead{font-size:1.15rem;color:var(--site-ink-2);max-width:36rem;}
.site-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block:1.5rem;}
.site-trust{list-style:none;padding:0;margin:0;display:grid;gap:.4rem;color:var(--site-ink-2);}
.site-trust li,.site-ticks li{display:flex;gap:.5rem;align-items:flex-start;}
.site-trust .site-ic,.site-ticks .site-ic{color:var(--site-brand);margin-block-start:.3em;}
.site-hero-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--site-r);box-shadow:var(--site-shadow);background:var(--site-alt);}

/* ---- sections ---- */
.site-section{padding-block:calc(var(--site-section-pad) * .7);}
@media (min-width:48rem){.site-section{padding-block:var(--site-section-pad);}}
.site-alt{background:var(--site-alt);}
.site-intro{color:var(--site-ink-2);max-width:44rem;margin-block-end:1.5rem;}
.site-muted{color:var(--site-muted);font-size:.95rem;}
.site-notice{background:var(--site-card);border:1px dashed var(--site-line);border-radius:var(--site-r-sm);padding:1rem 1.25rem;color:var(--site-ink-2);}
.site-cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));}
.site-card{background:var(--site-card);border:1px solid var(--site-line);border-radius:var(--site-r);padding:1.25rem;box-shadow:var(--site-shadow);
  display:flex;flex-direction:column;gap:.25rem;}
.site-card p{color:var(--site-ink-2);}
.site-card-actions{margin-block-start:auto;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;padding-block-start:.5rem;}
.site-spec h3{color:var(--site-brand);}
.site-doc-head{display:flex;gap:.9rem;align-items:center;margin-block-end:.5rem;}
.site-doc-head h3{margin:0;}
.site-doc-title{margin:0;font-weight:600;color:var(--site-ink-2);font-size:.95rem;line-height:1.4;}
.site-doc-spec{margin:0;color:var(--site-brand);font-weight:650;font-size:.95rem;}
.site-doc-langs{font-size:.95rem;}
.site-avatar{width:72px;height:72px;flex:none;border-radius:50%;object-fit:cover;display:grid;place-items:center;
  background:var(--site-alt);color:var(--site-brand);font-weight:800;font-size:1.4rem;border:2px solid var(--site-line);}
.site-about{display:grid;gap:2rem;}
@media (min-width:56rem){.site-about{grid-template-columns:1.4fr 1fr;align-items:start;}}
.site-about > div > p{color:var(--site-ink-2);max-width:42rem;}
.site-ticks{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.4rem;}

/* ---- contact ---- */
.site-contact{display:grid;gap:1rem;margin-block-end:1.5rem;}
@media (min-width:48rem){.site-contact{grid-template-columns:1fr 1fr;}}
.site-contact h3{display:flex;align-items:center;gap:.5rem;margin-block-start:.5rem;}
.site-hours{width:100%;border-collapse:collapse;}
.site-hours th,.site-hours td{text-align:start;padding:.5rem 0;border-block-end:1px solid var(--site-line);vertical-align:top;}
.site-hours th{font-weight:650;width:45%;}
.site-emergency{display:flex;gap:.6rem;align-items:flex-start;background:var(--site-warn-bg);color:var(--site-warn-ink);
  border:1px solid var(--site-warn-line);border-inline-start-width:5px;border-radius:var(--site-r-sm);padding:.9rem 1.1rem;margin:0;}
.site-emergency .site-ic{margin-block-start:.3em;}

/* ---- booking band ---- */
.site-band{background:var(--site-brand-fill,var(--site-brand));color:#fff;}
.site-band h2,.site-band p{color:#fff;}
.site-band-inner{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;justify-content:space-between;}
.site-band p{margin:0;opacity:.95;max-width:40rem;}
.site-band .site-btn-action{box-shadow:0 0 0 2px #fff;}

/* ---- footer ---- */
.site-footer{background:var(--site-card);border-block-start:1px solid var(--site-line);padding-block:2.5rem 6rem;font-size:.97rem;}
@media (min-width:60rem){.site-footer{padding-block-end:2.5rem;}}
.site-footer-grid{display:grid;gap:1.5rem;margin-block-end:1.5rem;}
@media (min-width:48rem){.site-footer-grid{grid-template-columns:1fr 1fr 1.3fr;}}
.site-footer h2{font-size:1.05rem;margin-block-end:.5rem;}
.site-footer p{color:var(--site-ink-2);display:flex;gap:.5rem;align-items:flex-start;}
.site-footer .site-ic{margin-block-start:.35em;color:var(--site-brand);}
.site-footer-name{font-size:1.2rem!important;}
.site-copy{margin-block-start:1rem!important;color:var(--site-muted)!important;font-size:.9rem;}

/* ---- the sticky booking button on phones ---- */
.site-sticky{position:fixed;inset-inline:1rem;bottom:max(1rem,env(safe-area-inset-bottom));z-index:30;
  min-height:52px;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);}
@media (min-width:60rem){.site-sticky{display:none;}}

/* ---- /book inside the website ---- */
.site-booking .site-crumb{margin:0 0 1rem;}
.site-booking .site-crumb a{display:inline-flex;align-items:center;min-height:var(--site-tap);font-weight:650;}
.site-booking .wrap{padding-block-start:1.5rem;}
.site-booking .site-footer{padding-block-end:2.5rem;}

@media (prefers-reduced-motion: reduce){
  .site *,.site *::before,.site *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}
@media (forced-colors: active){
  .site-btn{border-color:ButtonText;}
  .site-emergency{border-color:CanvasText;}
}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
/* the sticky header must not cover an anchored heading */
.site [id]{scroll-margin-top:5rem;}
/* a heading focused by script (the booking steps) is a reading position, not a control */
.site [tabindex="-1"]:focus{outline:none;}
/* the footer repeats the emergency line in one quiet sentence; the boxed notice is in Contact */
.site-footer .site-emergency{background:transparent;border:0;padding:0;color:var(--site-ink-2);}
.site-footer .site-emergency .site-ic{color:var(--site-warn-ink);}

/* ==== retouch: materials, type, and a little motion ========================================
   Only transform and opacity move. Every animation is short, ends in the normal state, and is
   switched off by prefers-reduced-motion above. Hover effects only where hover exists. */
:root{--site-ease:cubic-bezier(.23,1,.32,1);}

/* header: a translucent layer the page scrolls under; solid where the browser or the user prefers */
.site-header{background:var(--site-card);}
@supports (backdrop-filter:blur(1px)){
  .site-header{background:color-mix(in srgb,var(--site-card) 82%,transparent);
    backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);}
}
@media (prefers-reduced-transparency:reduce){.site-header{background:var(--site-card);backdrop-filter:none;-webkit-backdrop-filter:none;}}

/* type: Arabic is never letter-spaced (it is a joined script); Latin headings tighten as they grow */
html[lang=en] .site h1{letter-spacing:-.02em;line-height:1.1;}
html[lang=en] .site h2{letter-spacing:-.012em;line-height:1.2;}
html[lang=ar] .site h1{line-height:1.3;}
.site-eyebrow{letter-spacing:0;}

/* hero: a photograph, framed, with a soft wash of the brand behind it */
.site-hero{background:radial-gradient(60rem 28rem at 85% -10%,var(--primary-soft,var(--site-alt)),transparent 70%),linear-gradient(180deg,var(--site-card),var(--site-bg));}
.site-hero-media{position:relative;}
.site-hero-media img{aspect-ratio:4/3;border-radius:calc(var(--site-r) * 1.5);box-shadow:0 2px 6px rgba(0,0,0,.06),0 28px 60px -24px rgba(16,42,48,.45);}
.site-hero-media::after{content:"";position:absolute;inset:0;border-radius:calc(var(--site-r) * 1.5);pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);}

/* press and hover */
.site-btn{transition:background-color 160ms ease,border-color 160ms ease,transform 120ms var(--site-ease);}
.site-btn:active{transform:scale(.97);}
.site-card{transition:box-shadow 200ms ease,transform 200ms var(--site-ease),border-color 200ms ease;}
@media (hover:hover) and (pointer:fine){
  .site-card:hover{transform:translateY(-3px);border-color:var(--site-brand);
    box-shadow:0 2px 6px rgba(0,0,0,.06),0 22px 40px -22px rgba(16,42,48,.4);}
}

/* first view: the hero arrives once, in order (opacity and a few pixels only) */
@keyframes site-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes site-photo{from{opacity:0;transform:scale(.98);}to{opacity:1;transform:none;}}
.site-hero-text > *{animation:site-rise 420ms var(--site-ease) both;}
.site-hero-text > :nth-child(2){animation-delay:50ms;}
.site-hero-text > :nth-child(3){animation-delay:100ms;}
.site-hero-text > :nth-child(4){animation-delay:150ms;}
.site-hero-text > :nth-child(5){animation-delay:200ms;}
.site-hero-media img{animation:site-photo 520ms var(--site-ease) 80ms both;}

/* cards arrive as they scroll into view, where the browser can tie animation to scroll */
@supports (animation-timeline:view()){
  .site-cards > li,.site-contact > *{animation:site-rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%;}
}

/* ==== questions, and the booking button repeated after them ==== */
.site-section-cta{margin:2rem 0 0;}
.site-faq-wrap{max-width:52rem;}
.site-faq{display:grid;gap:.75rem;margin-block-start:1rem;}
.site-faq details{background:var(--site-card);border:1px solid var(--site-line);border-radius:var(--site-r-sm);}
.site-faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--site-tap);
  padding:.75rem 1.1rem;cursor:pointer;font-weight:700;list-style:none;}
.site-faq summary::-webkit-details-marker{display:none;}
.site-faq summary::after{content:"";flex:none;width:.6rem;height:.6rem;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;
  transform:rotate(45deg);transition:transform 160ms var(--site-ease);margin-block-end:.25rem;}
.site-faq details[open] summary::after{transform:rotate(-135deg);margin-block-end:-.1rem;}
.site-faq details p{margin:0;padding:0 1.1rem 1rem;color:var(--site-ink-2);}
@media (hover:hover) and (pointer:fine){.site-faq summary:hover{color:var(--site-brand);}}

/* a logo or drawing as the hero (brand.heroFit "contain"): shown whole on the
   page itself, no frame, no shadow, no crop */
.site-hero-media.is-art::after{display:none;}
.site-hero-media.is-art img{aspect-ratio:auto;height:auto;max-height:30rem;width:auto;max-width:100%;margin-inline:auto;object-fit:contain;border-radius:0;box-shadow:none;background:transparent;filter:drop-shadow(0 18px 30px rgba(16,42,48,.18));}