/* Clue Dental base styles (Lane A): reset, typography, links, buttons, focus,
   skip link, reduced motion and the layout container. Values come from
   tokens.css. The skip link, focus and reduced-motion rules are adapted from
   ../complete_template_2026/src/css/clue.css (see docs/template-imports.md). */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* In-page jumps land below the sticky header. */
  scroll-padding-top: calc(var(--cd-header-h) + var(--cd-space-4));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The footer sits at the bottom of the window on short pages: the body is a
   column and <main> takes the spare height. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--cd-surface);
  /* Running text in the body role; headings take --cd-heading below. Both are
     roles, so inside .cd-theme-dark they invert. */
  color: var(--cd-ink-2);
  font-family: var(--cd-font-sans);
  font-size: var(--cd-text-base);
  line-height: var(--cd-leading-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: var(--cd-leading-tight);
  letter-spacing: var(--cd-tracking-tight);
  font-weight: var(--cd-weight-bold);
  color: var(--cd-heading);
  text-wrap: balance;
}
h1 { font-size: var(--cd-text-h1); }
h2 { font-size: var(--cd-text-h2); }
h3 { font-size: var(--cd-text-h3); font-weight: var(--cd-weight-semibold); line-height: var(--cd-leading-snug); letter-spacing: 0; }
p { margin: 0 0 1em; }
strong, b { font-weight: var(--cd-weight-semibold); }

/* ── Links ─────────────────────────────────────────────────────────────── */
a {
  color: var(--cd-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--cd-teal-strong); text-decoration-thickness: 2px; }

/* Arrow links (the → after a section's link, sections markup): the arrow
   nudges 2px toward the link's target on hover and keyboard focus. */
.cd-links-arrow {
  display: inline-block;
  transition: transform var(--cd-duration-fast) var(--cd-ease-out);
}
a:hover + .cd-links-arrow,
a:focus-visible + .cd-links-arrow { transform: translateX(var(--cd-nudge)); }

/* ── Focus (never removed) ─────────────────────────────────────────────── */
:focus-visible {
  outline: var(--cd-focus-width) solid var(--cd-focus);
  outline-offset: var(--cd-focus-offset);
}

/* ── Skip link: visible only on keyboard focus (from the template's clue.css) */
.skip-link {
  position: absolute;
  top: -100%;
  /* PHYSICAL ON PURPOSE: centring with translateX(-50%). */
  left: 50%;
  transform: translateX(-50%);
  background: var(--cd-teal);
  color: var(--cd-on-dark);
  padding: 0.75em 1.5em;
  border-radius: 0 0 var(--cd-radius-sm) var(--cd-radius-sm);
  z-index: 100000;
  font-weight: var(--cd-weight-semibold);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  color: var(--cd-on-dark);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* .cd-button is a link or a <button>. Primary: white on the bright aqua fill
   (#00A2B9, 3.06:1), no visible outline, with a large-text label (19px, 700)
   so the label passes WCAG 2.1 AA at 3:1. Secondary: --cd-teal (#007282) text
   and border on white (5.63:1). Both are at least 44px tall, the
   primary-action target size. */
.cd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.75rem;
  padding: 0.625em 1.25em;
  border: 2px solid transparent;
  border-radius: var(--cd-radius-pill);
  font-family: inherit;
  font-size: var(--cd-text-base);
  font-weight: var(--cd-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cd-duration-fast) var(--cd-ease-out), color var(--cd-duration-fast) var(--cd-ease-out), border-color var(--cd-duration-fast) var(--cd-ease-out);
}
.cd-button--primary {
  background: var(--cd-button);
  border-color: var(--cd-button);
  color: var(--cd-on-dark);
  font-size: var(--cd-button-label);
  font-weight: var(--cd-weight-bold);
}
.cd-button--primary:hover {
  background: var(--cd-button-hover);
  border-color: var(--cd-button-hover);
  color: var(--cd-on-dark);
  text-decoration: none;
}
.cd-button--secondary {
  background: var(--cd-surface);
  border-color: var(--cd-teal);
  color: var(--cd-teal);
}
.cd-button--secondary:hover {
  background: var(--cd-teal-soft);
  border-color: var(--cd-teal-strong);
  color: var(--cd-teal-strong);
  text-decoration: none;
}
.cd-button--block { display: flex; width: 100%; }

/* ── Layout container ──────────────────────────────────────────────────── */
.cd-wrap {
  width: 100%;
  max-width: calc(var(--cd-max) + 2 * var(--cd-gutter));
  margin-inline: auto;
  padding-inline: var(--cd-gutter);
}

/* Visually hidden, still read by screen readers. */
.cd-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body > main { flex: 1 0 auto; }

/* ── Not-found page ────────────────────────────────────────────────────── */
.cd-notfound { padding-block: var(--cd-section-y); }
.cd-notfound p { max-width: var(--cd-measure); color: var(--cd-ink-2); font-size: var(--cd-text-lg); }
.cd-notfound-actions { display: flex; flex-wrap: wrap; gap: var(--cd-space-3); margin-top: var(--cd-space-6); }

/* ── Footer (design pass item 8) ───────────────────────────────────────
   Wordmark and sentence, the nav, the action; then the © line, centered so the
   fixed Sienna and chat buttons in the bottom corners never cover it. 44px of
   vertical padding, aligned to the content grid, stacked on phones. */
.cd-site-footer {
  flex-shrink: 0;
  padding-block: 2.75rem;
  background: var(--cd-surface-dark);
  color: var(--cd-on-dark);
}
.cd-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--cd-space-5) var(--cd-space-7);
}
.cd-footer-brand { display: grid; gap: var(--cd-space-3); justify-items: start; }
.cd-footer-logo { width: auto; height: 2.25rem; }
.cd-footer-note { margin: 0; max-width: 24rem; color: var(--cd-on-dark-muted); font-size: var(--cd-text-sm); line-height: var(--cd-leading-snug); }
.cd-footer-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--cd-space-2); margin: 0; padding: 0; list-style: none; }
.cd-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--cd-space-3);
  border-radius: var(--cd-radius-control);
  color: var(--cd-on-dark);
  font-weight: var(--cd-weight-medium);
  text-decoration: none;
  transition: background-color var(--cd-duration-fast) var(--cd-ease-out);
}
.cd-footer-nav a:hover { background-color: var(--cd-footer-hover); color: var(--cd-on-dark); }
.cd-footer-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.cd-footer-action { margin: 0; }
.cd-footer-bottom {
  margin-top: var(--cd-space-6);
  padding-top: var(--cd-space-5);
  border-top: 1px solid var(--cd-footer-line);
  text-align: center;
}
.cd-footer-name { margin: 0; color: var(--cd-on-dark-muted); font-size: var(--cd-text-sm); }

/* Phones and narrow tablets: one column, left-aligned with the content. */
@media (max-width: 56em) {
  .cd-footer-main { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .cd-footer-nav ul { flex-direction: column; margin-inline-start: calc(-1 * var(--cd-space-3)); }
}

/* ── Reduced motion (from the template's clue.css) and the stored motion
   pause (html.clue-motion-paused, the hero's pause control): no decorative
   transitions and no smooth scrolling. Hero motion and the reveal and
   draw-on scripts handle their own end states (Lane B). ─────────────── */
html.clue-motion-paused { scroll-behavior: auto; }
html.clue-motion-paused *,
html.clue-motion-paused *::before,
html.clue-motion-paused *::after {
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}