/*
 * global.css — CSS custom properties, resets, base typography
 * Shared by ALL pages
 * Dr Samir Contractor Website
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Clean clinical palette — white-first, brand-led */
  --bg: #FFFFFF;             /* main white background */
  --bg-soft: #F2F8FC;        /* very pale blue for alt sections */
  --paper: #FFFFFF;          /* cards */
  --brand-blue: #0672ba;     /* primary blue — sectional backgrounds */
  --brand-blue-deep: #045a99; /* hover / darker */
  --brand-blue-soft: #DCEAF6; /* very pale tint */
  --brand-green: #1cb171;    /* CTA & buttons */
  --brand-green-deep: #16935f;
  --ink: #0F2C3F;            /* near-black text with subtle blue */
  --ink-2: #345168;          /* secondary text */
  --ink-3: #5a7385;          /* muted text */
  --muted: #8895a3;          /* tertiary text */
  --rule: #E5E7EB;           /* dividers */
  --rule-strong: #CBD2D9;
  --accent: var(--brand-green); /* alias */
  --accent-deep: var(--brand-green-deep);
  --accent-soft: #C8EBDA;
  --whatsapp: #1cb171;       /* aligned to brand green per spec */
  --whatsapp-deep: #16935f;
  --success: #1cb171;

  /* Type — Poppins for H1/H2, Roboto for everything else */
  --display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --body: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing rhythm */
  --gap-1: 0.5rem;
  --gap-2: 1rem;
  --gap-3: 1.5rem;
  --gap-4: 2.5rem;
  --gap-5: 4rem;
  --gap-6: 6rem;

  /* Container */
  --max-w: 1240px;
  --pad-x: clamp(1.25rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--ink); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

.container { max-width: var(--max-w); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--brand-green-deep);
}

h1, h2, h3, h4 {
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* H1 and H2: Poppins */
h1, h2 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* H3 and H4: Roboto Bold */
h3, h4 {
  font-family: var(--body);
  font-weight: 700;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.05rem; }

h1 em, h2 em { font-style: normal; color: var(--brand-green-deep); font-weight: inherit; }

p { color: var(--ink-3); }
p strong { color: var(--ink); font-weight: 600; }

.captcha-row { display: flex; align-items: center; gap: 10px; }
.captcha-row img {display: block;}
.captcha-refresh {display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; text-decoration: none;}
@media screen and (min-width:992px){.captcha-row{margin-top:25px}}