/* demo-page.css — Styles for the demo page; built so the a11y plugin
   can override fonts, sizes, colors, motion via attributes on .dp-page. */

.dp-page {
  --dp-bg:        #FFFFFF;
  --dp-bg-muted:  #F5F5F5;
  --dp-border:    #D9D9D9;
  --dp-ink:       #1E1E1E;
  --dp-ink-soft:  #303030;
  --dp-muted:     #757575;
  --dp-primary:   #2C2C2C;
  --dp-primary-fg:#F5F5F5;
  --dp-link:      #2C2C2C;

  --dp-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --dp-scale: 1;
  --dp-lh: 1.5;
  --dp-ls: 0;
  --dp-para: 1;

  background: var(--dp-bg);
  color: var(--dp-ink);
  font-family: var(--dp-font);
  font-size: calc(16px * var(--dp-scale));
  line-height: var(--dp-lh);
  letter-spacing: var(--dp-ls);
  min-height: 100%;
}

.dp-section { padding: 48px 64px; }

/* Header */
.dp-header {
  display: flex; align-items: center; gap: 24px;
  padding: 20px 64px;
  border-bottom: 1px solid var(--dp-border);
  background: var(--dp-bg);
  position: sticky; top: 0; z-index: 2;
}
.dp-logo { width: 28px; height: 32px; border: 3px solid var(--dp-ink); flex-shrink: 0; }
.dp-nav { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.dp-auth { display: flex; gap: 10px; }

/* Hero */
.dp-hero {
  background: var(--dp-bg-muted);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding: 88px 64px;
}
.dp-hero-title {
  margin: 0;
  font-family: var(--dp-font);
  font-weight: 700;
  font-size: calc(64px * var(--dp-scale));
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--dp-ink);
  max-width: 14ch;
}
.dp-hero-sub {
  margin: 0;
  max-width: 56ch;
  font-size: calc(20px * var(--dp-scale));
  line-height: 1.5;
  color: var(--dp-muted);
}
.dp-hero-cta { display: flex; gap: 12px; margin-top: 8px; }

/* Image strip */
.dp-image-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  padding: 24px 64px 0;
}

/* Section heads */
.dp-section-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.dp-section-title {
  margin: 0;
  font-family: var(--dp-font); font-weight: 700;
  font-size: calc(32px * var(--dp-scale));
  letter-spacing: -0.02em;
  color: var(--dp-ink);
}
.dp-section-sub {
  margin: 0;
  font-size: calc(18px * var(--dp-scale));
  color: var(--dp-muted);
  line-height: 1.4;
}

/* Card list */
.dp-card-list-items { display: flex; flex-direction: column; gap: 20px; }
.dp-list-card {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 24px; padding: 24px;
  background: var(--dp-bg);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
}
.dp-list-card-body {
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start;
}
.dp-list-card-title {
  margin: 0;
  font-family: var(--dp-font); font-weight: 700;
  font-size: calc(22px * var(--dp-scale));
  color: var(--dp-ink);
}
.dp-list-card-text {
  margin: 0;
  font-size: calc(16px * var(--dp-scale));
  line-height: 1.5;
  color: var(--dp-muted);
}

/* Card grid */
.dp-card-grid-items {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.dp-grid-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: var(--dp-bg);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
}
.dp-grid-card-title {
  margin: 0;
  font-family: var(--dp-font); font-weight: 700;
  font-size: calc(18px * var(--dp-scale));
  color: var(--dp-ink);
}
.dp-grid-card-text {
  margin: 0;
  font-size: calc(14px * var(--dp-scale));
  line-height: 1.5;
  color: var(--dp-muted);
}

/* Footer */
.dp-footer {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 56px 64px;
  border-top: 1px solid var(--dp-border);
  background: var(--dp-bg);
}
.dp-footer-brand { display: flex; flex-direction: column; gap: 16px; }
.dp-footer-tagline {
  margin: 0; max-width: 24ch;
  font-size: calc(14px * var(--dp-scale));
  color: var(--dp-muted);
  line-height: 1.5;
}
.dp-footer-social { display: flex; gap: 8px; }
.dp-footer-social-icon {
  width: 24px; height: 24px; border-radius: 4px;
  background: var(--dp-ink); color: var(--dp-primary-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(10px * var(--dp-scale)); font-weight: 700;
}
.dp-footer-col { display: flex; flex-direction: column; gap: 14px; }
.dp-footer-col-title {
  margin: 0;
  font-family: var(--dp-font); font-weight: 700;
  font-size: calc(15px * var(--dp-scale));
  color: var(--dp-ink);
}
.dp-footer-link {
  font-size: calc(14px * var(--dp-scale));
  color: var(--dp-ink-soft);
  text-decoration: none;
  line-height: 1.4;
}
.dp-footer-link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────
   ACCESSIBILITY OVERRIDES — driven by attributes set on .dp-page
   ───────────────────────────────────────────────────────────────────── */

/* Paragraph spacing */
.dp-page[data-ax-para="loose"] p,
.dp-page[data-ax-para="loose"] .dp-list-card-text,
.dp-page[data-ax-para="loose"] .dp-grid-card-text { margin-bottom: 1em; }
.dp-page[data-ax-para="extra"] p,
.dp-page[data-ax-para="extra"] .dp-list-card-text,
.dp-page[data-ax-para="extra"] .dp-grid-card-text { margin-bottom: 1.5em; }

/* Font family overrides */
.dp-page[data-ax-font="serif"] { --dp-font: Georgia, 'Times New Roman', serif; }
.dp-page[data-ax-font="dyslexic"] { --dp-font: 'Lexend', 'Inter', sans-serif; letter-spacing: 0.02em; }
.dp-page[data-ax-font="mono"] { --dp-font: 'JetBrains Mono', ui-monospace, monospace; }

/* Theme — Dark */
.dp-page[data-ax-theme="dark"] {
  --dp-bg: #1C1C1F;
  --dp-bg-muted: #26262A;
  --dp-border: #3A3A3F;
  --dp-ink: #E4E4E6;       /* ~13.6:1 on bg — comfortable, not harsh */
  --dp-ink-soft: #C9C9CD;  /* ~10.5:1 */
  --dp-muted: #A8A8AC;     /* ~7.2:1 — AAA */
  --dp-primary: #E4E4E6;
  --dp-primary-fg: #1C1C1F;
}
.dp-page[data-ax-theme="dark"] .dp-logo { border-color: #E4E4E6; }

/* Theme — High contrast (black on yellow) */
.dp-page[data-ax-theme="hc"] {
  --dp-bg: #000000;
  --dp-bg-muted: #000000;
  --dp-border: #FFEE00;
  --dp-ink: #FFEE00;
  --dp-ink-soft: #FFEE00;
  --dp-muted: #FFFF66;
  --dp-primary: #FFEE00;
  --dp-primary-fg: #000000;
}
.dp-page[data-ax-theme="hc"] .dp-logo { border-color: #FFEE00; }
.dp-page[data-ax-theme="hc"] * { font-weight: 600 !important; }
.dp-page[data-ax-theme="hc"] .dp-footer-social-icon { border: 2px solid #FFEE00; }

/* Theme — Sepia */
.dp-page[data-ax-theme="sepia"] {
  --dp-bg: #f4ecd8;
  --dp-bg-muted: #ece1c5;
  --dp-border: #d4c5a0;
  --dp-ink: #3d2f17;
  --dp-ink-soft: #5a4626;
  --dp-muted: #7a6a45;
  --dp-primary: #3d2f17;
  --dp-primary-fg: #f4ecd8;
}
.dp-page[data-ax-theme="sepia"] .dp-logo { border-color: #3d2f17; }

/* Underline + boost link visibility */
.dp-page[data-ax-links="highlight"] .dp-footer-link,
.dp-page[data-ax-links="highlight"] a {
  background: #FFF59D !important;
  color: #000 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  padding: 2px 4px;
  border-radius: 3px;
}
.dp-page[data-ax-theme="dark"][data-ax-links="highlight"] .dp-footer-link,
.dp-page[data-ax-theme="dark"][data-ax-links="highlight"] a {
  background: #5B7CBF !important; color: #fff !important;
}

/* Hide images (replace with caption) */
.dp-page[data-ax-images="off"] svg,
.dp-page[data-ax-images="off"] .dp-footer-social-icon { display: none !important; }
.dp-page[data-ax-images="off"] .dp-list-card { grid-template-columns: 1fr; }
.dp-page[data-ax-images="off"] .dp-list-card > :first-child,
.dp-page[data-ax-images="off"] .dp-grid-card > :first-child,
.dp-page[data-ax-images="off"] .dp-image-strip > * { display: none; }

/* Pause animations / transitions */
.dp-page[data-ax-motion="paused"] *,
.dp-page[data-ax-motion="paused"] *::before,
.dp-page[data-ax-motion="paused"] *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* Big cursor */
.dp-page[data-ax-cursor="big"],
.dp-page[data-ax-cursor="big"] * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M2 2 L2 30 L10 22 L14 32 L20 30 L16 20 L26 20 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='round'/></svg>") 2 2, auto !important;
}
.dp-page[data-ax-cursor="big"] a,
.dp-page[data-ax-cursor="big"] button {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M14 4 L14 22 L10 18 L8 20 L16 32 L18 32 L26 20 L24 18 L20 22 L20 4 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>") 14 4, pointer !important;
}

/* Underline headings (for screen-reader-like skim) */
.dp-page[data-ax-headings="emph"] .dp-hero-title,
.dp-page[data-ax-headings="emph"] .dp-section-title,
.dp-page[data-ax-headings="emph"] .dp-list-card-title,
.dp-page[data-ax-headings="emph"] .dp-grid-card-title,
.dp-page[data-ax-headings="emph"] .dp-footer-col-title {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* Focus visible boost */
.dp-page[data-ax-focus="strong"] :focus-visible {
  outline: 4px solid #2563eb !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}