/* ===============================
 * DOM Remodeling — Header Styles
 * Target via Customizer → Header Builder → give elements these classes:
 *   Top row container:     dom-header-top
 *   Main row container:    dom-header-main
 *   Phone link:            dom-phone-link
 *   Quote button:          dom-cta
 * =============================== */

:root {
  --dom-bg: #ffffff;
  --dom-text: #1e293b;     /* slate-800 */
  --dom-muted: #475569;    /* slate-600 */
  --dom-border: #e2e8f0;   /* slate-200 */
  --dom-primary: #0ea5e9;  /* sky-500 */
  --dom-primary-dark: #0284c7;
  --dom-accent: #f59e0b;   /* amber-500 */
}

/* ---------- Top header (utility) ---------- */
.dom-header-top {
  background: rgba(14,165,233,.05);
  border-bottom: 1px solid var(--dom-border);
  font-size: 0.85rem;
  color: var(--dom-muted);
  padding-block: 0.25rem;
}
.dom-header-top a {
  color: var(--dom-primary);
  text-decoration: none;
}
.dom-header-top a:hover { text-decoration: underline; }

/* small gaps between inline items */
.dom-header-top .dom-inline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Phone standout in top bar (optional) */
.dom-header-top .dom-phone-link {
  color: var(--dom-primary);
  font-weight: 600;
}

/* ---------- Primary header (brand/nav) ---------- */
.dom-header-main {
  background: var(--dom-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: box-shadow .2s ease, padding .2s ease;
}
/* Give the row comfortable vertical rhythm */
.dom-header-main .ct-container,
.dom-header-main .ct-header-row {
  min-height: 72px;
}

/* Navigation links */
.dom-header-main nav a,
.dom-header-main .menu > li > a {
  color: var(--dom-text);
  font-weight: 600;
  letter-spacing: .02em;
  padding: .75rem 1rem;
  text-decoration: none;
  transition: color .15s ease;
}
.dom-header-main nav a:hover,
.dom-header-main .menu > li > a:hover {
  color: var(--dom-primary);
}
.dom-header-main .menu > li.current-menu-item > a {
  color: var(--dom-primary);
}

/* CTA button on right */
.dom-header-main .dom-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dom-primary);
  color: #fff !important;
  padding: .5rem 1rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(14,165,233,.25);
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.dom-header-main .dom-cta:hover {
  background: var(--dom-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14,165,233,.28);
}

/* Logo sizing helper (apply class to the Logo element) */
.dom-logo img { max-height: 48px; height: auto; width: auto; }

/* Sticky behavior refinement (Blocksy adds sticky automatically if enabled) */
.ct-header-sticky .dom-header-main {
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.ct-header-sticky .dom-header-main .ct-container,
.ct-header-sticky .dom-header-main .ct-header-row {
  min-height: 64px;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 768px) {
  .dom-header-top { font-size: .8rem; }
  .dom-header-main .menu > li > a { padding: .6rem .75rem; }
  .dom-logo img { max-height: 40px; }
  /* Optionally hide top bar on very small screens */
  /* .dom-header-top { display: none; } */
}