/*
 * Design tokens and base components shared by every page.
 * See specs/design/ for the direction, palette rationale and component
 * states this file implements. A page stylesheet should reach for these
 * custom properties and classes rather than writing its own colour, size,
 * spacing or radius.
 */

:root {
  /* Colour — one fixed dark palette, not a light/dark pair (see
     specs/design/direction.md, "Premium clinical dark"). */
  --color-surface: #0b132b;
  --color-surface-alt: #1c2541;
  --color-surface-raised: #1c2541;
  --color-border: #1c2541;
  --color-ink: #ffffff;
  --color-ink-muted: #8d99ae;
  --color-accent: #00b4d8;
  --color-accent-hover: #33c3e0;
  --color-accent-ink: #0b132b;
  --color-focus-ring: #00b4d8;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --leading-tight: 1.25;
  --leading-normal: 1.6;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii & elevation */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);

  /* Motion */
  --motion-fast: 150ms ease;

  /* Layout — header height and the z-index scale (see specs/design/system.md) */
  --header-height: 4rem;
  --z-header: 100;
  --z-dropdown: 110;
  --z-floating: 120;
  --z-modal: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
  }
}

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

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

/* Headline type — the one serif accent (see specs/design/direction.md).
   Body copy, nav and buttons stay on --font-sans. */
h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Button — a sharp, cyan-outlined primary action, never a large flat fill,
   so the accent colour stays reserved for actions and not decoration. */
.btn {
  display: inline-block;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}

.btn-primary {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.btn[aria-disabled="true"] {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

/* Callout */
.callout {
  background: var(--color-surface-alt);
  border-left: var(--space-1) solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.callout p {
  margin: 0;
  color: var(--color-ink);
}

/* Section label — see specs/design/direction.md for why this exists */
.section-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: var(--space-6) 0 var(--space-2);
}

/* Visually hidden but available to screen readers (e.g. mobile menu label) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Site header / nav — R-06. See specs/design/system.md for the z-index scale. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(11, 19, 43, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  min-height: var(--header-height);
}

.site-nav__logo {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.site-nav__logo:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.site-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  padding: var(--space-2);
  cursor: pointer;
}

.site-nav__toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__links > li > a {
  color: var(--color-ink-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-1);
  border-bottom: 2px solid transparent;
}

.site-nav__links > li > a:hover {
  color: var(--color-accent);
}

.site-nav__links > li > a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.site-nav__links > li > a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.site-nav__dropdown {
  position: relative;
}

.site-nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-muted);
  padding: var(--space-2) var(--space-1);
  cursor: pointer;
}

.site-nav__dropdown-toggle:hover {
  color: var(--color-accent);
}

.site-nav__dropdown-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.site-nav__dropdown-menu {
  display: none;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 16rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-dropdown);
}

.site-nav__dropdown-menu.is-open {
  display: flex;
}

.site-nav__dropdown-menu a {
  display: block;
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.site-nav__dropdown-menu a:hover {
  background: rgba(0, 180, 216, 0.12);
  color: var(--color-accent);
}

.site-nav__dropdown-menu a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.site-nav__dropdown-menu a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
}

@media (max-width: 48rem) {
  .site-nav__toggle {
    display: inline-flex;
  }

  .site-nav__menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-5);
  }

  .site-nav__menu.is-open {
    display: flex;
  }

  .site-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  /* The link is a plain inline element; .site-nav__links > li > a's
     padding/border-bottom (desktop underline) only paints past the line
     box on an inline element instead of being included in layout, so
     mobile's stacked list left the underline floating low enough to run
     into the next item below it. Block + tighter padding puts it right
     under the text, in flow. */
  .site-nav__links > li > a {
    display: block;
    padding: var(--space-1) var(--space-1);
  }

  .site-nav__dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding-left: var(--space-4);
  }

  .site-nav__cta {
    text-align: center;
  }
}

/* Site footer — R-06, four columns since R-11-1 */
.site-footer {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  padding: var(--space-7) var(--space-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  max-width: 75rem;
  margin: 0 auto;
}

@media (max-width: 48rem) {
  .site-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30rem) {
  .site-footer {
    grid-template-columns: 1fr;
  }
}

.site-footer__heading {
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}

.site-footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__contact-list a {
  color: var(--color-ink-muted);
}

.site-footer__contact-list a:hover {
  color: var(--color-accent);
}

.site-footer__contact-list a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.site-footer__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__links a {
  color: var(--color-ink-muted);
  text-decoration: none;
  font-size: var(--text-sm);
}

.site-footer__links a:hover {
  color: var(--color-accent);
}

.site-footer__links a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.site-footer__copyright {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

/* Floating WhatsApp button — R-06 */
.whatsapp-fab {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-floating);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--motion-fast);
}

.whatsapp-fab:hover {
  background: var(--color-accent-hover);
}

.whatsapp-fab:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Reserve space below the footer, on every page, so this fixed button never
   sits on top of real footer content once the page is scrolled all the way
   down — see specs/design/components.md. */
body {
  padding-bottom: calc(var(--space-8) + var(--space-5));
}

.site-footer__logo {
  display: block;
}