/* =============================================================================
   MAI PHYSIOTHERAPY CLINIC: BASE STYLES (loaded first on every page)

   WHAT LIVES HERE   design tokens, reset, typography, and the components every page shares:
                     .wrap (content column), .back (back link), .lang (EN/AR button), .btn (buttons)
   WHAT DOES NOT     page layouts: css/home.css, css/service.css, css/page.css (exercises, tips, privacy)
                     the booking popup: css/booking.css

   HOW TO CHANGE THE LOOK
     Colours:  edit the tokens in :root below (light) and in the dark-mode block. Never hard-code a
               colour in a page file when a token exists.
     Fonts:    Bricolage Grotesque (headings), Source Sans 3 (text), Cairo (Arabic). They are loaded by the
               single Google Fonts <link> in each page <head>.
   ============================================================================= */

/* ---- 1. Design tokens ------------------------------------------------------- */
:root {
  --bg: #F2F5F3;        /* page background */
  --surface: #E4ECE8;   /* soft panels, chips */
  --card: #fff;         /* cards, form fields */
  --ink: #10241F;       /* main text */
  --muted: #4A5F59;     /* secondary text */
  --pine: #1F5A4D;      /* brand green */
  --accent: #E8A33D;    /* brand amber: Book buttons, highlights */
  --on-pine: #F2F5F3;   /* text on green */
  --line: #C5D3CD;      /* borders and dividers */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1B18; --surface: #17282A; --card: #1B2E2B; --ink: #E8F0EC;
    --muted: #9DB3AC; --pine: #7FCBB5; --on-pine: #0F1B18; --line: #2A403B;
  }
}

/* ---- 2. Reset and typography ------------------------------------------------ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px);overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 "Source Sans 3","Cairo",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:"Bricolage Grotesque","Cairo","Trebuchet MS",sans-serif;line-height:1.2;margin:0}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0;margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}

/* ---- 3. Layout helper ------------------------------------------------------- */
.wrap{max-width:720px;margin:0 auto;padding:0 1.25rem}   /* centred content column */

/* ---- 4. Shared components --------------------------------------------------- */
/* Back link (arrow flips automatically in Arabic) */
.back{font-weight:600;color:var(--muted);font-size:.95rem}
.back:hover{color:var(--ink)}
.back::before{content:"\2190\00a0"}
html[lang="ar"] .back::before{content:"\2192\00a0"}

/* English / Arabic switch button */
.lang{margin-inline-start:auto;border:2px solid var(--pine);background:transparent;color:var(--ink);padding:.15rem .85rem;border-radius:999px;font:600 .9rem "Source Sans 3","Cairo",system-ui,sans-serif;cursor:pointer}
.lang:hover{background:var(--pine);color:var(--on-pine)}

/* Buttons: .btn (green) + .accent (amber) + .ghost (outline). Works on <a> and <button>. */
.btn{display:inline-block;background:var(--pine);color:var(--on-pine);padding:.85rem 1.5rem;border:0;border-radius:999px;font-family:inherit;font-weight:600;font-size:1rem;cursor:pointer;touch-action:manipulation;transition:transform .2s}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.btn.accent{background:var(--accent);color:#10241F}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--pine)}

/* Gentle attention pulse used on the main Book button */
.pulse{animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,163,61,.6)}100%{box-shadow:0 0 0 18px rgba(232,163,61,0)}}

/* ---- 5. Arabic ---------------------------------------------------------------- */
html[lang="ar"] body,html[lang="ar"] .lang{font-family:"Cairo","Source Sans 3",system-ui,sans-serif}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-family:"Cairo",sans-serif}
html[lang="ar"] *{letter-spacing:0!important}   /* negative tracking breaks Arabic letter joining */

/* ---- 6. Accessibility --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}