/* ==========================================================================
   Design Controls Panel (shared by every page version)
   See design-panel.js for how to add control groups.
   ========================================================================== */

/* ==========================================================================
   Variations
   ========================================================================== */

/* ---------- Navigation layout (desktop only; mobile keeps the burger menu) ---------- */
@media (min-width: 960px) {
  html[data-nav-layout] [data-dc="group"] { display: contents; }

  html[data-nav-layout] [data-dc="logo"],
  html[data-nav-layout] [data-dc="menu"],
  html[data-nav-layout] [data-dc="cta"] { flex: none; margin: 0; }

  /* 1. Logo + menu left, CTA right */
  html[data-nav-layout="left"] [data-dc="header"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(32px, 4vw, 64px);
  }
  html[data-nav-layout="left"] [data-dc="cta"] { margin-left: auto; }

  /* 2. Logo left, menu centred, CTA right */
  html[data-nav-layout="center"] [data-dc="header"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 32px;
  }
  html[data-nav-layout="center"] [data-dc="logo"] { grid-column: 1; justify-self: start; }
  html[data-nav-layout="center"] [data-dc="menu"] { grid-column: 2; justify-self: center; }
  html[data-nav-layout="center"] [data-dc="cta"] { grid-column: 3; justify-self: end; }
}

/* ---------- Hero title position (3x3 grid inside the hero stage) ---------- */
html[data-hero-position] [data-dc="hero-stage"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

html[data-hero-position] [data-dc="hero-block"] { min-width: 0; }

html[data-hero-position^="top-"] [data-dc="hero-block"] { align-self: start; margin-top: var(--dc-hero-top-gap, 0px); }
html[data-hero-position^="middle-"] [data-dc="hero-block"] { align-self: center; }
html[data-hero-position^="bottom-"] [data-dc="hero-block"] { align-self: end; }

html[data-hero-position$="-left"] [data-dc="hero-block"] { justify-self: start; align-items: flex-start; text-align: left; }
html[data-hero-position$="-center"] [data-dc="hero-block"] { justify-self: center; align-items: center; text-align: center; }
html[data-hero-position$="-right"] [data-dc="hero-block"] { justify-self: end; align-items: flex-end; text-align: right; }

html[data-hero-position$="-left"] [data-dc="hero-actions"] { justify-content: flex-start; }
html[data-hero-position$="-center"] [data-dc="hero-actions"] { justify-content: center; }
html[data-hero-position$="-right"] [data-dc="hero-actions"] { justify-content: flex-end; }

/* ---------- Top bar (inserted at the top of the site header) ---------- */
/* Registered so the height can animate; pages use it to offset fixed/full-height elements */
@property --dc-topbar-h {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

html { --dc-topbar-h: 0px; }
html[data-top-bar="show"] { --dc-topbar-h: 38px; }
html.dc-ready { transition: --dc-topbar-h .35s cubic-bezier(.2, .7, .2, 1); }

.dc-topbar {
  position: relative;
  height: var(--dc-topbar-h);
  overflow: hidden;
  background: #374B4D;
  color: #EEE8DC;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: none;
}

.dc-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 38px;
  margin: 0 auto;
  padding: 0 var(--gutter, 20px);
}

.dc-topbar__group {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.dc-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
a.dc-topbar__link:hover { color: #95BAB2; }
a.dc-topbar__link:focus-visible { outline: 1px solid #95BAB2; outline-offset: 3px; }

.dc-topbar__icon { flex: none; width: 14px; height: 14px; color: #95BAB2; }
.dc-topbar__social .dc-topbar__icon { color: inherit; }

.dc-topbar__divider { width: 1px; height: 14px; background: rgba(238, 232, 220, .25); }

@media (max-width: 639px) {
  html[data-top-bar="show"] { --dc-topbar-h: 34px; }
  .dc-topbar__inner { height: 34px; }
  .dc-topbar__secondary { display: none; }
}

/* ---------- Font pairing ---------- */
html[data-font-pair="chakra-inter"] { --dc-font-head: "Chakra Petch", system-ui, sans-serif; --dc-font-body: "Inter", system-ui, sans-serif; }
html[data-font-pair="barlow"] { --dc-font-head: "Barlow Semi Condensed", system-ui, sans-serif; --dc-font-body: "Barlow", system-ui, sans-serif; }
html[data-font-pair="montserrat-source"] { --dc-font-head: "Montserrat", system-ui, sans-serif; --dc-font-body: "Source Sans 3", system-ui, sans-serif; }

/* Body font: everything on the page (the panel keeps its own UI font) */
html[data-font-pair]:not([data-font-pair="original"]) body,
html[data-font-pair]:not([data-font-pair="original"]) body *:not(.dc, .dc *) {
  font-family: var(--dc-font-body);
}

/* Heading font: h1–h4, nav links, buttons, small uppercase labels (and anything inside them) */
html[data-font-pair]:not([data-font-pair="original"]) :is(h1, h2, h3, h4, nav a, nav button, .btn, button, .dc-label):not(.dc, .dc *),
html[data-font-pair]:not([data-font-pair="original"]) :is(h1, h2, h3, h4, nav a, nav button, .btn, button, .dc-label) *:not(.dc *) {
  font-family: var(--dc-font-head);
}

/* Small uppercase labels get the wide tracking of the logo's "ENGINEERING GROUP" */
html[data-font-pair]:not([data-font-pair="original"]) .dc-label:not(.dc *) { letter-spacing: .15em; }

/* ==========================================================================
   Panel
   ========================================================================== */
.dc {
  --dc-width: 256px;
  --dc-bg: #FFFFFF;
  --dc-surface: #F6F4EF;
  --dc-line: #E2DED5;
  --dc-text: #22302F;
  --dc-muted: #6B7675;
  --dc-accent: #960000;

  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  color: var(--dc-text);
  font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: normal;
  text-transform: none;
  transform: translate(calc(-1 * var(--dc-width)), -50%);
}
.dc.is-open { transform: translate(0, -50%); }
.dc.is-ready { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }

.menu-open .dc { display: none; }

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

.dc__panel {
  width: var(--dc-width);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--dc-bg);
  border: 1px solid var(--dc-line);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 12px 40px rgba(20, 28, 29, .16);
}

.dc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--dc-line);
}

.dc__title { font-size: 13px; font-weight: 600; }

.dc__groups { display: flex; flex-direction: column; }

/* ---------- Control group ---------- */
.dc__group {
  margin: 0;
  padding: 14px 16px 16px;
  border: 0;
  border-bottom: 1px solid var(--dc-line);
}
.dc__group:last-child { border-bottom: 0; }

.dc__legend {
  float: left; /* keeps the legend inside the padding box */
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
  color: var(--dc-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dc__options { clear: both; display: flex; flex-direction: column; gap: 6px; }

.dc__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--dc-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.dc__option:hover { background: var(--dc-surface); }
.dc__option:has(.dc__input:checked) { border-color: var(--dc-accent); background: var(--dc-surface); }
.dc__option:has(.dc__input:focus-visible) { outline: 2px solid var(--dc-accent); outline-offset: 2px; }

.dc__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dc__option-text { display: flex; flex-direction: column; min-width: 0; }
.dc__option-label { font-weight: 500; }
.dc__option-hint { color: var(--dc-muted); font-size: 12px; }

.dc__note { margin: 10px 0 0; color: var(--dc-muted); font-size: 12px; }

/* ---------- Grid picker (e.g. hero title position) ---------- */
.dc__options--grid {
  display: grid;
  grid-template-columns: repeat(var(--dc-columns, 3), 1fr);
  gap: 4px;
  width: 132px;
  padding: 4px;
  border: 1px solid var(--dc-line);
  border-radius: 8px;
  background: var(--dc-surface);
}

.dc__option.dc__cell {
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 0;
  border-color: transparent;
  border-radius: 5px;
  background: var(--dc-bg);
}
.dc__option.dc__cell:hover { border-color: var(--dc-line); }
.dc__option.dc__cell:has(.dc__input:checked) { border-color: var(--dc-accent); background: var(--dc-bg); }

.dc__cell-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dc-line);
  transition: background-color .2s ease, transform .2s ease;
}
.dc__cell:hover .dc__cell-dot { background: var(--dc-muted); }
.dc__cell:has(.dc__input:checked) .dc__cell-dot { background: var(--dc-accent); transform: scale(1.5); }

.dc__current { margin: 8px 0 0; font-weight: 500; }

/* ---------- Segmented toggle (e.g. top bar on/off) ---------- */
.dc__options--segmented {
  flex-direction: row;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--dc-line);
  border-radius: 8px;
  background: var(--dc-surface);
}
.dc__options--segmented .dc__option {
  flex: 1;
  justify-content: center;
  padding: 7px 8px;
  border-color: transparent;
  border-radius: 5px;
}
.dc__options--segmented .dc__option:has(.dc__input:checked) { border-color: var(--dc-accent); background: var(--dc-bg); }

/* ---------- Current selection summary ---------- */
.dc__summary {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--dc-line);
  background: var(--dc-surface);
}
.dc__summary .dc__legend { float: none; }

.dc__summary-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 12px;
}
.dc__summary-list dt { margin: 0; color: var(--dc-muted); }
.dc__summary-list dd { margin: 0; font-weight: 500; }

/* ---------- Footer actions (always visible at the bottom of the panel) ---------- */
.dc__foot {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--dc-line);
  background: var(--dc-bg);
}

.dc__btn {
  padding: 8px 10px;
  border: 1px solid var(--dc-line);
  border-radius: 6px;
  background: var(--dc-bg);
  color: var(--dc-text);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.dc__btn:hover { border-color: var(--dc-text); }
.dc__btn:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 2px; }

.dc__btn--primary {
  border-color: var(--dc-accent);
  background: var(--dc-accent);
  color: #FFFFFF;
}
.dc__btn--primary:hover { border-color: #400205; background: #400205; }

.dc__btn--quiet { color: var(--dc-muted); }

.dc__status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--dc-accent);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.dc__foot:not(.has-status) .dc__status { display: none; }

/* ---------- Header schematic thumbnail ---------- */
.dc__preview {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  width: 64px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--dc-line);
  border-radius: 4px;
  background: var(--dc-bg);
}
.dc__preview-logo { width: 8px; height: 8px; border-radius: 2px; background: var(--dc-text); }
.dc__preview-menu { width: 18px; height: 3px; border-radius: 2px; background: var(--dc-muted); }
.dc__preview-cta { width: 11px; height: 7px; border-radius: 1px; background: var(--dc-accent); }
.dc__preview-gap { flex: 1; }

/* ---------- Toggle tab ---------- */
.dc__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 8px;
  border: 1px solid var(--dc-line);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--dc-bg);
  color: var(--dc-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 4px 6px 20px rgba(20, 28, 29, .12);
  cursor: pointer;
}
.dc__tab:hover { color: var(--dc-accent); }
.dc__tab:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 2px; }

.dc__tab-label { writing-mode: vertical-rl; transform: rotate(180deg); }

/* Sliders icon */
.dc__tab-icon {
  position: relative;
  width: 14px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 1px / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 9px / 100% 1.5px no-repeat;
}
.dc__tab-icon::before,
.dc__tab-icon::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: var(--dc-bg);
}
.dc__tab-icon::before { top: -0.5px; left: 2px; }
.dc__tab-icon::after { top: 7.5px; right: 2px; }

@media (prefers-reduced-motion: reduce) {
  .dc.is-ready, .dc__option, .dc__cell-dot, .dc__btn, html.dc-ready { transition: none; }
}