/* ============================================================================
   Core Imports (Shared across all modern pages)
   ============================================================================ */

@import url('core/_variables.css');
@import url('core/_gradients.css');
@import url('core/_animations.css');
@import url('core/_utilities.css');

/* ============================================================================
   Component Imports
   ============================================================================ */

@import url('components/_navigation.css');
@import url('components/_analytics-consent.css');

/* ============================================================================
   Base page + shared chrome (every other page-specific stylesheet
   defines its own copy of this — see hire-me.css/blog.css/landing.css.
   This file only ever had .privacy-page and .privacy-choice rules, so
   without a body/site-footer/theme-toggle block, this page fell back to
   completely unstyled browser defaults for everything else: no
   font-family (serif), no background/color (plain white), and totally
   unstyled <button>/<footer> markup rendering as raw, misaligned boxes.
   ============================================================================ */

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--border);
}

.footer-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-sm);
}

.footer-links a:hover {
  color: var(--primary);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 2.625rem;
  height: 2.625rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.35);
  color: var(--text-secondary);
  cursor: pointer;
}

html[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, 0.8);
}

.theme-toggle:hover {
  color: var(--text-primary);
  border-color: rgba(16, 185, 129, 0.3);
}

.theme-toggle-icon {
  display: inline-flex;
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
}

.theme-toggle-icon svg {
  position: absolute;
  inset: 0;
  width: 1.125rem;
  height: 1.125rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-toggle-icon .icon-sun {
  opacity: 0;
  transform: rotate(-90deg);
}

html[data-theme="light"] .theme-toggle-icon .icon-sun {
  opacity: 1;
  transform: rotate(0deg);
}

html[data-theme="light"] .theme-toggle-icon .icon-moon {
  opacity: 0;
  transform: rotate(90deg);
}

.theme-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer-meta {
  text-align: center;
}

.footer-copy {
  color: var(--text-muted);
  font-size: var(--font-xs);
  margin: 0;
}

/* ============================================================================
   Page content
   ============================================================================ */

/* nav-toggle.js measures the real nav height on load/resize and writes
   --nav-shell-height as an inline style on <html> — that always wins
   over any stylesheet rule for the SAME element, but only if nothing
   *closer* (a descendant) redeclares the property itself, since a
   direct declaration on a descendant overrides whatever it would have
   inherited regardless of how the ancestor set its value. The other
   pages using this variable (prehog.css, login.css, port.css) declare
   it at :root — same element JS targets — so JS's live measurement
   always wins; this fallback does the same, purely for the brief
   window before JS runs (avoiding a flash of no clearance at all). */
:root {
  --nav-shell-height: clamp(4.9rem, calc(4rem + 2.4vh), 5.75rem);
}

/* nav is `position: fixed` site-wide (_navigation.css) and starts fully
   TRANSPARENT (no background at all) until scrolled past 80px
   (nav-toggle.js's scrollThreshold), when it morphs into an opaque
   "pill". --nav-shell-height alone only covers the *resting* gap
   between this page's content and nav — it doesn't account for the
   large "Privacy" h1 immediately following it. Scrolling by even a
   little (40px+) was enough to push that tall heading up into nav's
   still-fully-transparent bounding box, so both the heading and nav's
   own link text rendered simultaneously with nothing hiding either —
   a real, sustained visual overlap across most of the transition
   window (~40-180px of scroll), not a one-frame flicker. The extra
   4rem buffer keeps the heading clear of nav's box for scroll amounts
   past the 80px threshold too, by which point nav has already turned
   opaque and any further overlap is properly hidden behind it. */
.privacy-page {
  padding-top: calc(var(--nav-shell-height) + 4rem);
  padding-bottom: clamp(2rem, 6vw, 4rem);
}

.privacy-page-inner {
  max-width: 42rem;
  margin-inline: auto;
}

.privacy-page-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-block-end: var(--space-sm);
}

.privacy-page-lede {
  color: var(--text-secondary);
  font-size: var(--font-lg, 1.125rem);
  margin-block-end: var(--space-lg, 2rem);
}

.privacy-page-section {
  margin-block-end: var(--space-lg, 2rem);
}

.privacy-page-section h2 {
  font-size: 1.25rem;
  margin-block-end: var(--space-sm);
}

.privacy-page-section p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.privacy-page-section a {
  color: var(--primary);
}

.privacy-page-deflist dt {
  font-weight: 600;
  color: var(--text-primary);
  margin-block-start: var(--space-sm);
}

.privacy-page-deflist dd {
  color: var(--text-secondary);
  margin-inline-start: 0;
  margin-block-end: var(--space-sm);
  line-height: 1.6;
}

.privacy-choice-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.privacy-choice-status {
  font-weight: 600;
  color: var(--text-primary);
}

.privacy-choice-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
  font-size: var(--font-sm);
  cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast);
  min-block-size: var(--touch-target-min);
}

.privacy-choice-toggle:hover,
.privacy-choice-toggle:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

.privacy-page-footnote {
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
}

.privacy-page-footnote small {
  color: var(--text-secondary);
}
