/* ═══════════════════════════════════════════════════════════════════════
   DSYNTEC shared page chrome — header/nav, footer, legal modals, cookie
   banner. Used by content pages that don't hand-roll their own (knowledge
   base, blog). landing-page/index.html keeps its own equivalent inline —
   don't duplicate changes here into it, they're independent by design.
   Pair with design-system/dsyntec-chrome.js for the matching behavior.
   ═══════════════════════════════════════════════════════════════════════ */

.dc-icon-sun { display: none; }
[data-theme="dark"] .dc-icon-moon { display: none; }
[data-theme="dark"] .dc-icon-sun { display: block; }

/* ── Header / nav ─────────────────────────────────────────────────────── */
.dc-header {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-sticky);
  background: var(--ds-surface-raised);
  border-bottom: var(--ds-line) solid var(--ds-border);
}
.dc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding-block: var(--ds-space-4);
}
.dc-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* auto margin absorbs the free space so the links sit against the actions
     group on the right rather than being centred by space-between */
  margin-left: auto;
  gap: var(--ds-space-2) clamp(var(--ds-space-3), 2.5vw, var(--ds-space-6));
  font-size: var(--ds-text-base);
}
.dc-nav-links a {
  color: var(--ds-text-secondary);
  transition: color var(--ds-dur-fast) var(--ds-ease);
}
.dc-nav-links a:hover { color: var(--ds-text); text-decoration: none; }
.dc-nav-links a[aria-current="page"] { color: var(--ds-text); }
.dc-nav-actions { display: flex; align-items: center; gap: var(--ds-space-2); }
.dc-nav-toggle { display: none; }
.dc-icon-close { display: none; }
.dc-nav-toggle[aria-expanded="true"] .dc-icon-burger { display: none; }
.dc-nav-toggle[aria-expanded="true"] .dc-icon-close { display: block; }

/* Collapsed nav — matches the landing page. Below 840px the links move into a
   panel that drops out of the header bar. */
@media (max-width: 840px) {
  .dc-nav-toggle { display: inline-flex; }
  .dc-nav-links {
    margin-left: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--ds-space-5) var(--ds-space-3);
    background: var(--ds-surface-raised);
    border-bottom: var(--ds-line) solid var(--ds-border);
    box-shadow: var(--ds-shadow-md);
    /* visibility, not just opacity, so the closed panel leaves the tab order */
    visibility: hidden;
    opacity: 0;
    transform: translateY(calc(-1 * var(--ds-space-2)));
    transition: opacity var(--ds-dur-fast) var(--ds-ease),
                transform var(--ds-dur-fast) var(--ds-ease),
                visibility var(--ds-dur-fast) var(--ds-ease);
  }
  .dc-nav-links.is-open { visibility: visible; opacity: 1; transform: none; }
  .dc-nav-links a {
    padding-block: var(--ds-space-3);
    border-bottom: var(--ds-line) solid var(--ds-border);
  }
  .dc-nav-links a:last-child { border-bottom: none; }
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.dc-footer {
  border-top: var(--ds-line) solid var(--ds-border);
  padding-block: var(--ds-space-5) var(--ds-space-7);
}
.dc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}
.dc-foot nav { display: flex; gap: var(--ds-space-5); flex-wrap: wrap; }
.dc-foot a { color: var(--ds-text-muted); transition: color var(--ds-dur-fast) var(--ds-ease); }
.dc-foot a:hover { color: var(--ds-text); text-decoration: none; }
.dc-foot-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--ds-text-muted); font-size: var(--ds-text-xs);
  font-family: inherit;
  transition: color var(--ds-dur-fast) var(--ds-ease);
}
.dc-foot-btn:hover { color: var(--ds-text); }

/* ── Legal modals ──────────────────────────────────────────────────────── */
.dc-modal-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(12,26,43,0.55);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.dc-modal-backdrop[hidden] { display: none; }
.dc-modal {
  width: 100%; max-width: 660px; max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-border-strong);
  border-top: 3px solid var(--ds-brand);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-lg);
  overflow: hidden;
}
.dc-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
  flex-shrink: 0;
}
.dc-modal__head h2 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
  margin: 0;
}
.dc-modal__close {
  background: none; border: none; cursor: pointer;
  color: var(--ds-text-muted); padding: 4px; border-radius: var(--ds-radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--ds-dur-fast) var(--ds-ease);
}
.dc-modal__close:hover { color: var(--ds-text); }
.dc-modal__body {
  overflow-y: auto; padding: var(--ds-space-5);
  background: var(--ds-surface);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  line-height: var(--ds-leading-relaxed);
}
.dc-modal__body h3 {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text);
  margin: var(--ds-space-4) 0 var(--ds-space-1);
}
.dc-modal__body h3:first-child { margin-top: 0; }
.dc-modal__body p { margin: 0 0 var(--ds-space-2); }
.dc-modal__body a { color: var(--ds-brand); }
.dc-modal__body a:hover { text-decoration: underline; }
.dc-modal__updated {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-space-4);
}

/* ── Cookie consent banner ────────────────────────────────────────────── */
.dc-cookie {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 8000;
  background: var(--ds-surface-raised);
  border-top: 1px solid var(--ds-border-strong);
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-space-3) 0;
}
.dc-cookie[hidden] { display: none; }
.dc-cookie__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-space-5); flex-wrap: wrap;
}
.dc-cookie__text {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  margin: 0;
}
.dc-cookie__text button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--ds-brand); font-size: inherit;
  text-decoration: underline;
}
.dc-cookie__btns { display: flex; gap: var(--ds-space-2); flex-shrink: 0; }