/* Wiltz Dermatology — site additions on top of compiled Tailwind (index.css).
   These cover the few interactive/static bits the React bundle handled at runtime:
   the rotating hero, the sticky-nav color states, the mobile menu, and a couple
   of design tokens the Tailwind utilities reference (--radius, hsl vars).

   The "DESIGN POLISH" block at the bottom is a refinement layer (2026-06-30):
   vertical rhythm, type hierarchy, equal-height cards, tasteful motion, the
   house page-load loader. It does NOT change the blue brand identity — it tunes
   spacing, type, and motion so the site reads as a premium, intentional practice
   site. All motion degrades gracefully (content visible with no JS) and is
   disabled entirely under prefers-reduced-motion. */

:root {
  --radius: 0.5rem;
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --accent: 210 40% 96%;
  --accent-foreground: 222 47% 11%;
  --ring: 221 83% 53%;
  --input: 214 32% 91%;

  /* polish tokens */
  --wd-blue: #2563eb;       /* blue-600  — primary */
  --wd-navy: #1e3a8a;       /* blue-900  — headings / dark bands */
  --wd-ink: #1f2937;        /* gray-800  — body */
  --wd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wd-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .14);
  --wd-shadow-card-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 26px 48px -20px rgba(30, 58, 138, .32);
}

html { scroll-behavior: smooth; }

/* ---- Header / sticky nav ---- */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
/* Default (top of a page that has a dark hero behind it): transparent over hero */
.site-header.is-transparent { background: transparent; }
.site-header.is-transparent .nav-link,
.site-header.is-transparent .nav-brand-text { color: #fff; }
.site-header.is-transparent .nav-logo { filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
/* Scrolled / solid state */
.site-header.is-solid {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.site-header.is-solid .nav-link { color: #374151; }
.site-header.is-solid .nav-link:hover { color: #2563eb; }
.site-header.is-solid .nav-brand-text { color: #1e3a8a; }
.site-header.is-solid .nav-logo { filter: none; }
/* Pages without a dark hero (about/services/products/contact) just stay solid */

.nav-link { position: relative; font-size: .875rem; font-weight: 500; transition: color .15s; background: none; border: 0; cursor: pointer; }
.nav-link.is-active::after,
.nav-link:hover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.35rem; height: 2px; border-radius: 2px;
}
.site-header.is-solid .nav-link.is-active::after { background: #2563eb; }
.site-header.is-transparent .nav-link.is-active::after { background: #fff; }

/* ---- Mobile menu ---- */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }
.menu-toggle { background: none; border: 0; cursor: pointer; padding: .25rem; }
.site-header.is-transparent .menu-toggle { color: #fff; }
.site-header.is-solid .menu-toggle { color: #1e3a8a; }

/* ---- Rotating hero ---- */
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hero-slide.active { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }

/* page top padding so fixed header doesn't cover content on inner pages */
.page-top { padding-top: 5rem; }

/* checkmark badge used in About credentials list */
.check-badge {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  background: #dbeafe; color: #2563eb; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem;
}

/* =========================================================
   DESIGN POLISH (2026-06-30) — rhythm, type, motion, loader
   ========================================================= */

/* ---- Type & hierarchy ----------------------------------------------------
   Tighten the headline scale and leading so navy headings read as a clear,
   intentional system. Body copy gets a comfortable measure + leading.        */
h1, h2, h3 { text-wrap: balance; }
h1 { letter-spacing: -0.02em; line-height: 1.08; }
h2 { letter-spacing: -0.018em; line-height: 1.12; }
h3 { letter-spacing: -0.011em; }

/* Section eyebrow / lead paragraph (the centered intro line under a heading).
   Consistent measure + leading across every page. */
.wd-lead { line-height: 1.7; text-wrap: pretty; }

/* Constrain long body paragraphs to a readable measure without touching the
   Tailwind max-w utilities already on their wrappers. */
.wd-prose p { line-height: 1.75; text-wrap: pretty; }

/* ---- Buttons: refined press/lift -----------------------------------------
   The bundle already gives color + hover:bg. Add a subtle lift + shadow on the
   primary/solid CTAs and a clean focus ring for keyboard users.              */
a.inline-flex { transition: background-color .2s var(--wd-ease), color .2s var(--wd-ease),
  transform .2s var(--wd-ease), box-shadow .25s var(--wd-ease); }
a.inline-flex.bg-blue-600:hover,
a.inline-flex.bg-blue-800:hover,
a.inline-flex.bg-white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(30, 58, 138, .55); }
a.inline-flex:active { transform: translateY(0); }

/* Visible keyboard focus everywhere (never on mouse click). */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
  border-radius: 8px;
}
.site-header.is-transparent a:focus-visible,
.bg-blue-900 a:focus-visible,
.bg-blue-900 button:focus-visible { outline-color: #fff; }

/* ---- Cards: equal height + refined hover ---------------------------------
   .wd-card is added to every white card in the HTML. Flex column lets the
   icon/title/copy align consistently and the grid stretches cards to equal
   height (default align-items: stretch on CSS grid).                          */
.wd-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .28s var(--wd-ease), box-shadow .28s var(--wd-ease);
  box-shadow: var(--wd-shadow-card);
}
.wd-card:hover { transform: translateY(-4px); box-shadow: var(--wd-shadow-card-hover); }
/* Push a card's trailing content (e.g. the bullet list / link) to share a
   consistent baseline; the copy line above it can grow. */
.wd-card .wd-card-grow { flex: 1 1 auto; }

/* Service-overview icon chip (home): keep it from being squeezed in flex col */
.wd-card .bg-blue-100 { flex-shrink: 0; }

/* "Why choose" feature blocks on the home navy band — center column, equal feel */
.wd-feature { display: flex; flex-direction: column; align-items: center; height: 100%; }
.wd-feature .wd-card-grow { flex: 1 1 auto; }

/* ---- Home services section: fix the loose rhythm -------------------------
   The flagged section is the only one tagged .wd-services. We tighten the gap
   under the heading and over the button, and trim the section's bottom padding
   so it flows cleanly into the navy band instead of leaving a void.           */
.wd-services { padding-top: 4.5rem; padding-bottom: 4rem; }
.wd-services .wd-sec-head { margin-bottom: 2.75rem; }   /* was mb-16 (4rem) */
.wd-services .wd-cta-row { margin-top: 2.5rem; }        /* was mt-12 (3rem) */

/* ---- Scroll reveal -------------------------------------------------------
   Content is visible by default (no .reveal class needed for SEO/no-JS). JS
   adds .wd-reveal to opted-in elements only AFTER confirming motion is OK,
   so a no-JS or reduced-motion visitor never sees hidden content.            */
.wd-reveal { opacity: 0; transform: translateY(20px); will-change: opacity, transform; }
.wd-reveal.wd-in {
  opacity: 1; transform: none;
  transition: opacity .65s var(--wd-ease), transform .65s var(--wd-ease);
}

/* ===== House page-load loader (adapted to Wiltz blue) ===================== */
.wd-loader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  background: #f8fafc;                 /* slate-50, calm light field */
  transition: opacity .6s var(--wd-ease), visibility .6s var(--wd-ease);
}
.wd-loader.is-done { opacity: 0; visibility: hidden; }
/* CSS-only safety net: if JS never runs, the loader still fades itself out and
   stops intercepting the page (~4s) so it can never trap a no-JS visitor. JS
   normally clears it ~1.5s after load; this just guarantees it can't stick. */
.wd-loader { animation: wd-loader-safety 0s linear 4s forwards; }
@keyframes wd-loader-safety { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Brand-blue rounded tile with the practice monogram */
.wd-loader__tile {
  width: 96px; height: 96px; border-radius: 24px;
  background: linear-gradient(160deg, #2563eb 0%, #1e3a8a 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 44px -18px rgba(30, 58, 138, .6);
  animation: wd-tile-in .6s var(--wd-ease) both;
}
.wd-loader__mono {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800; font-size: 38px; letter-spacing: -0.04em; color: #fff;
  line-height: 1;
}
/* Sliding progress bar in blue */
.wd-loader__bar {
  width: 180px; height: 3px; border-radius: 999px; overflow: hidden;
  background: #dbeafe;                  /* blue-100 track */
}
.wd-loader__bar span {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #1e3a8a);
  animation: wd-slide 1.15s ease-in-out infinite;
}
.wd-loader__cap {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: #1e3a8a; opacity: 0; animation: wd-fade-up .5s var(--wd-ease) .35s forwards;
}
@keyframes wd-tile-in { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes wd-slide   { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
@keyframes wd-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Footer: Miami office map + legal links (2026-06-30) -----------------
   The map is the single intentional external request on the site (Google Maps
   embed). Styled to sit cleanly in the navy footer band. Responsive, rounded,
   with a visible text fallback link beneath it.                               */
/* Map now sits in its own footer column beside the others (shorter footer). */
.wd-footer-map iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 160px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55);
  /* subtle frame so the light map tiles don't clash with the navy column */
  outline: 1px solid rgba(255, 255, 255, .12);
  outline-offset: -1px;
}
.wd-footer-map__link {
  display: inline-flex;
  align-items: center;
  margin-top: .7rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #dbeafe;                          /* blue-100 */
  transition: color .15s;
}
.wd-footer-map__link:hover { color: #fff; }

/* Legal links row in the footer bottom bar */
.wd-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .65rem;
  font-size: .8125rem;
}
.wd-footer-legal__sep { color: #3b82f6; opacity: .7; }   /* blue-500 dot */

/* Contact page: map paired beside the office card. The card stretches to the
   office card's height on desktop; on mobile it falls to a sensible min height.
   .wd-card already sets display:flex/column + height:100%, so the iframe just
   needs to grow to fill it. */
.wd-contact-map { padding: 0; }
.wd-contact-map iframe {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 320px;
  border: 0;
}

/* ---- Legal pages (privacy / terms / HIPAA notice) ------------------------ */
/* DRAFT banner pinned at the very top of the legal pages */
.wd-draft-banner {
  background: #fef3c7;                 /* amber-100 */
  border-bottom: 1px solid #fcd34d;    /* amber-300 */
  color: #92400e;                      /* amber-800 */
  font-size: .875rem;
  line-height: 1.5;
  padding: .75rem 1rem;
  text-align: center;
}
.wd-draft-banner strong { font-weight: 700; }

/* Legal document body: readable measure + clear hierarchy on a white page. */
.wd-legal { max-width: 52rem; margin: 0 auto; padding: 0 1rem; }
.wd-legal h2 {
  font-size: 1.375rem; color: var(--wd-navy); font-weight: 700;
  margin-top: 2.5rem; margin-bottom: .75rem;
}
.wd-legal h2:first-of-type { margin-top: 0; }
.wd-legal h3 {
  font-size: 1.05rem; color: var(--wd-navy); font-weight: 600;
  margin-top: 1.5rem; margin-bottom: .5rem;
}
.wd-legal p, .wd-legal li { color: #374151; line-height: 1.75; }
.wd-legal p { margin-bottom: 1rem; }
.wd-legal ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.wd-legal li { margin-bottom: .4rem; }
.wd-legal a { color: var(--wd-blue); text-decoration: underline; }
.wd-legal a:hover { color: var(--wd-navy); }
.wd-legal .wd-legal-meta { color: #6b7280; font-size: .875rem; }
.wd-legal .wd-legal-placeholder {
  background: #f1f5f9; border-radius: 4px; padding: 0 .3rem;
  font-style: italic; color: #475569;
}

/* ---- Reduced motion: kill ALL motion + hide the loader entirely ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wd-reveal { opacity: 1 !important; transform: none !important; }
  .wd-loader { display: none !important; }
}