/*
 * drdavidlomeli.com — shared design tokens
 *
 * Layout, typography, heights, mid-breakpoint rules, and the print stylesheet
 * live here. Colors stay per-page in each page's inline <style> :root block,
 * because the homepage uses a blue --accent and procedure pages use teal.
 */

:root {
  /* Layout */
  --maxw: clamp(1200px, calc(900px + 25vw), 1480px);
  --maxw-narrow: 880px;
  --gutter: clamp(20px, 5vw, 96px);

  /* Section rhythm */
  --section-y: clamp(80px, 11vw, 160px);
  --section-y-tight: clamp(56px, 7vw, 96px);

  /* Type scale — single strategy: px floor, vw fluid, px ceiling */
  --fs-display: clamp(40px, min(8vw, 12dvh), 88px);
  --fs-h1: clamp(40px, 5vw, 72px);
  --fs-h2: clamp(28px, 3.6vw, 52px);
  --fs-h3: clamp(20px, 1.8vw, 24px);
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-cap: 12px;

  /* Heights */
  --header-h: 68px;
  --band-h: 88px;
  --fold-buffer: 16px;
  --hero-h: max(560px, calc(100vh - var(--header-h) - var(--band-h) - var(--fold-buffer)));
  --hero-h: max(560px, calc(100dvh - var(--header-h) - var(--band-h) - var(--fold-buffer)));
}

/* Mid breakpoint — the dead zone BETWEEN 880 (mobile stack) and comfortable desktop.
   Scoped to min-width: 881px so the existing 880-px single-column stack still wins below it. */
@media (min-width: 881px) and (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 64px);
  }
  .creds-grid,
  .about-grid,
  .cancun-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .proof-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Nav: hide desktop links earlier than the existing 980px rule.
   Hamburger should appear at the same boundary so the nav doesn't crack
   in the 880-980 band. */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Critical mobile grid fixes */
@media (max-width: 980px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .team-grid--3 {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 720px) {
  /* Procedure list rows: 2-col, icon + name+desc stack */
  .proc-row {
    grid-template-columns: 36px 1fr;
    gap: 8px 14px;
    padding: 18px 0;
    align-items: start;
  }
  .proc-row .proc-num,
  .proc-row .proc-arrow {
    display: none;
  }
  .proc-row .proc-icon {
    grid-column: 1;
    grid-row: 1;
    width: 36px;
    height: 36px;
  }
  .proc-row .proc-icon img {
    width: 36px;
    height: 36px;
  }
  .proc-row .proc-name {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(17px, 4.2vw, 20px);
    line-height: 1.2;
  }
  .proc-row .proc-name .alt {
    font-size: 12px;
  }
  .proc-row .proc-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 4px;
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .stories-grid {
    grid-template-columns: 1fr;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Hero photo: cap height on small phones so it doesn't push content below fold */
.hero-photo {
  max-height: min(72dvh, var(--hero-h));
}
@media (max-width: 600px) {
  .hero-photo {
    aspect-ratio: 4 / 3;
    max-height: 60dvh;
  }
}

/*
 * Keyboard focus — universal :focus-visible.
 * Homepage already had a similar rule inline; procedure pages had none.
 * Defining it here makes the outline consistent on every interactive element
 * (buttons, links, the FAQ toggle, the language toggle, procedure cards).
 */
:focus-visible {
  outline: 3px solid var(--accent, #2D7DD2);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Inputs/textareas would inherit a sensible focus by default; we don't have any today */

/* Sticky WhatsApp bar: respect notched-phone safe areas */
.sticky-wa {
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
}
@media (max-width: 880px) {
  .sticky-wa {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

/* Print stylesheet — for patient-facing printouts of a procedure page */
@media print {
  .nav,
  .sticky-wa,
  .mnav,
  .mnav-backdrop,
  .sticky-band {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
    padding-bottom: 0;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after {
    content: "";
  }
  .section,
  .hero,
  .faq-item {
    break-inside: avoid;
  }
  h1, h2, h3 {
    break-after: avoid;
  }
}