/* ============ SITE-WIDE HEADER / FOOTER / FEEDBACK ============
   Shared across every page (root + tool subfolders). No build step on this site,
   so each page links this file directly and pastes the matching header/footer/
   feedback markup — this stylesheet is the one place that styling gets edited so
   every page stays visually identical. Keep in sync with common.js.
   Pages are dark-themed at the root (index.html, privacy/, terms/) and light/dark
   toggle-themed inside tool pages (layoutgenerator, coolingcalculator) — this
   file uses its own fixed dark palette so the header/footer/modal look the same
   regardless of which theme system the page underneath is running. */

.dcdt-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 20px;
  background: rgba(10, 11, 13, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #24282f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.dcdt-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Real cross-page navigation, not just the homepage's card links — every page
   can reach every other page directly from the header. Hidden below 640px:
   the tool pages' own responsive layouts (mobile-result, etc.) already have
   their own back/forward affordances and don't have header room to spare. */
.dcdt-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid #24282f;
}
.dcdt-nav a {
  font-size: 0.85rem;
  font-weight: 600;
  color: #9aa4b2;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.dcdt-nav a:hover { color: #f3f5f7; background: #171a1f; }
.dcdt-nav a[aria-current="page"] { color: #f3f5f7; background: #1e2229; }
@media (max-width: 640px) {
  .dcdt-nav { display: none; }
}
.dcdt-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dcdt-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: #f3f5f7;
  text-decoration: none;
}
.dcdt-brand .dcdt-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: #4f8cff;
  box-shadow: 0 0 10px #4f8cff;
  flex-shrink: 0;
}
.dcdt-feedback-btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #f3f5f7;
  background: #171a1f;
  border: 1px solid #24282f;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dcdt-feedback-btn:hover { background: #1e2229; border-color: #33383f; }

.dcdt-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #171a1f;
  border: 1px solid #24282f;
  color: #f3f5f7;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dcdt-theme-toggle:hover { background: #1e2229; border-color: #33383f; }

/* ---- Footer ---- */
.dcdt-footer {
  border-top: 1px solid #24282f;
  padding: 22px 20px 32px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.dcdt-footer p {
  color: #667085;
  font-size: 0.8rem;
  margin: 0;
}
.dcdt-footer a {
  color: #9aa4b2;
  text-decoration: underline;
}
.dcdt-footer a:hover { color: #f3f5f7; }

/* ---- Feedback modal ---- */
.dcdt-feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5, 6, 8, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.dcdt-feedback-overlay[hidden] { display: none; }
.dcdt-feedback-modal {
  width: 100%;
  max-width: 420px;
  background: #121417;
  border: 1px solid #24282f;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.dcdt-feedback-modal h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #f3f5f7;
}
.dcdt-feedback-modal .dcdt-feedback-hint {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: #9aa4b2;
  line-height: 1.5;
}
.dcdt-feedback-modal .dcdt-field { margin-bottom: 12px; }
.dcdt-feedback-modal label {
  display: block;
  font-size: 0.78rem;
  color: #9aa4b2;
  margin-bottom: 5px;
}
.dcdt-feedback-modal input,
.dcdt-feedback-modal textarea {
  width: 100%;
  padding: 9px 10px;
  border-radius: 7px;
  border: 1px solid #24282f;
  background: #0a0b0d;
  color: #f3f5f7;
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
}
.dcdt-feedback-modal input:focus,
.dcdt-feedback-modal textarea:focus {
  outline: none;
  border-color: #4f8cff;
}
.dcdt-feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.dcdt-feedback-actions button {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}
.dcdt-feedback-cancel {
  background: transparent;
  color: #9aa4b2;
  border-color: #24282f;
}
.dcdt-feedback-cancel:hover { background: #171a1f; color: #f3f5f7; }
.dcdt-feedback-submit {
  background: #4f8cff;
  color: #fff;
}
.dcdt-feedback-submit:hover { background: #6ba0ff; }
.dcdt-feedback-status {
  margin: 10px 0 0;
  font-size: 0.8rem;
  min-height: 1em;
  color: #9aa4b2;
}
.dcdt-feedback-status.dcdt-ok { color: #2fd07a; }
.dcdt-feedback-status.dcdt-error { color: #ff6b6b; }
.dcdt-feedback-honeypot { position: absolute; left: -9999px; }