/* ============================================================
   dmoons — Astra Header & Footer Styling (Clean White Luxury)
   ------------------------------------------------------------
   WHERE TO PUT THIS (pick one):
   • BEST: paste at the end of your child theme's style.css
     (wp-content/themes/dmoons-astra-child/style.css) — version-safe.
   • OR: Appearance → Customize → Additional CSS → paste → Publish.

   Designed for Astra FREE Header/Footer Builder. Includes a CSS-only
   sticky header (no Pro needed). Pairs with the Customizer playbook
   (ASTRA-HEADER-FOOTER-SETUP.md) and the HTML snippets.

   Phone: (970) 970-0230 · Email: info@dmoons.com
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

:root{
  --dm-bg:#f9f8f5; --dm-cream:#f0ece5; --dm-cream-dark:#e8e2d9;
  --dm-text:#111110; --dm-muted:#8a867e; --dm-gold:#c5975a;
  --dm-gold-light:#f5ede0; --dm-border:rgba(0,0,0,0.08);
  --dm-footer:#0a0a09;
  --dm-font-h:'Cormorant Garamond',serif;
  --dm-font-b:'Plus Jakarta Sans',sans-serif;
  --dm-t:.35s ease;
}

/* ---------- 1. ABOVE HEADER — dark slim utility bar ---------- */
.ast-above-header-wrap,
.ast-above-header-bar{
  background:var(--dm-text) !important;
}
.ast-above-header-wrap .ast-above-header-bar{
  min-height:42px;
  font-family:var(--dm-font-b);
  font-size:.8rem;
}
/* phone/email HTML element */
.ast-above-header-wrap .dm-topbar{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  color:rgba(255,255,255,.72);font-size:.8rem;letter-spacing:.01em;
}
.ast-above-header-wrap .dm-topbar a{
  color:rgba(255,255,255,.72);text-decoration:none;transition:color var(--dm-t);
  display:inline-flex;align-items:center;gap:7px;
}
.ast-above-header-wrap .dm-topbar a:hover{color:var(--dm-gold);}
.ast-above-header-wrap .dm-topbar svg{width:14px;height:14px;fill:var(--dm-gold);flex:0 0 14px;}
.ast-above-header-wrap .dm-topbar .sep{color:rgba(255,255,255,.2);}

/* social icons in the top bar */
.ast-above-header-wrap .ast-social-icons-wrap{justify-content:flex-end;}
.ast-above-header-wrap .ast-social-icon-image,
.ast-above-header-wrap .ast-builder-social-element{
  color:rgba(255,255,255,.7) !important;
  transition:color var(--dm-t),transform var(--dm-t);
}
.ast-above-header-wrap .ast-builder-social-element:hover{
  color:var(--dm-gold) !important;transform:translateY(-2px);
}
.ast-above-header-wrap .ast-builder-social-element svg{width:16px;height:16px;}

/* ---------- 2. PRIMARY HEADER — main nav ---------- */
.ast-primary-header-bar,
.main-header-bar{
  background:rgba(249,248,245,.92) !important;
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border-bottom:1px solid var(--dm-border) !important;
}
.main-header-bar .main-header-bar-wrap{min-height:68px;}

/* logo */
.site-logo-img img,.custom-logo{max-height:36px !important;width:auto;}

/* quick-links menu */
.main-header-menu .menu-link,
.ast-builder-menu-1 .menu-link{
  font-family:var(--dm-font-b) !important;
  font-size:.875rem !important;font-weight:500 !important;
  color:var(--dm-muted) !important;letter-spacing:.01em;
  transition:color var(--dm-t);
}
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.ast-builder-menu-1 .menu-item:hover > .menu-link{
  color:var(--dm-text) !important;
}
/* subtle gold underline on hover */
.main-header-menu .menu-item > .menu-link{position:relative;}
.main-header-menu .menu-item > .menu-link::after{
  content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--dm-gold);transition:width var(--dm-t);
}
.main-header-menu .menu-item:hover > .menu-link::after{width:100%;}

/* dropdown submenus */
.main-header-menu .sub-menu{
  background:#fff !important;border:1px solid var(--dm-border);
  border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.08);padding:8px;
}
.main-header-menu .sub-menu .menu-link{border-radius:6px;}

/* CTA button (Astra "Button" element) */
.ast-header-button-1 .ast-custom-button,
.main-header-bar .ast-custom-button{
  background:var(--dm-text) !important;color:#fff !important;
  font-family:var(--dm-font-b) !important;font-weight:600 !important;
  font-size:.875rem !important;border:none !important;border-radius:4px !important;
  padding:10px 22px !important;transition:opacity var(--dm-t),transform var(--dm-t),box-shadow var(--dm-t);
}
.ast-header-button-1 .ast-custom-button:hover,
.main-header-bar .ast-custom-button:hover{
  opacity:.9;transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(17,17,16,.22);
}

/* ---------- 3. STICKY HEADER (free, CSS-only) ----------
   Keeps the primary header pinned on scroll. Comment this block
   out if you'd rather the header scroll away normally. */
#masthead.site-header{position:relative;}
.ast-primary-header-bar,
.main-header-bar{position:sticky;top:0;z-index:999;}
/* If you also want the dark top bar to stay, sticky the whole header instead:
   #masthead.site-header{position:sticky;top:0;z-index:999;} */

/* ---------- 4. FONTS for any Astra-rendered headings ---------- */
body,.ast-container{font-family:var(--dm-font-b);}
h1,h2,h3,h4,.entry-title,.widget-title,.ast-archive-title{font-family:var(--dm-font-h);}

/* ---------- 5. FOOTER — dark dmoons footer ---------- */
.site-primary-footer-wrap,
.ast-builder-grid-row-container.site-footer-focus-item,
.site-footer{background:var(--dm-footer) !important;}
.site-primary-footer-wrap{padding:64px 0 40px !important;}

.site-footer .widget-title,
.site-footer .ast-footer-widget-1 .widget-title{
  font-family:var(--dm-font-b) !important;
  font-size:.68rem !important;font-weight:700 !important;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.25) !important;margin-bottom:14px !important;
}
.site-footer,.site-footer p,.site-footer li,.site-footer a{
  color:rgba(255,255,255,.4) !important;font-size:.84rem;line-height:1.7;
}
.site-footer a{transition:color var(--dm-t);text-decoration:none;}
.site-footer a:hover{color:#fff !important;}
.site-footer .dm-foot-brand b{
  color:#fff;font-family:var(--dm-font-h);font-size:1.5rem;font-weight:700;
}
.site-footer .dm-foot-brand p{max-width:250px;color:rgba(255,255,255,.3) !important;}

/* footer social icons */
.site-footer .ast-builder-social-element{
  color:rgba(255,255,255,.45) !important;transition:color var(--dm-t),transform var(--dm-t);
}
.site-footer .ast-builder-social-element:hover{color:var(--dm-gold) !important;transform:translateY(-2px);}

/* below-footer copyright bar */
.ast-below-footer-wrap,.site-below-footer-wrap{
  background:var(--dm-footer) !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
}
.site-below-footer-wrap,.site-below-footer-wrap a{
  color:rgba(255,255,255,.16) !important;font-size:.76rem !important;
}
.site-below-footer-wrap a:hover{color:rgba(255,255,255,.45) !important;}

/* ---------- 6. RESPONSIVE ---------- */
@media(max-width:921px){
  .ast-above-header-wrap .dm-topbar{justify-content:center;gap:14px;font-size:.74rem;}
  /* keep CTA visible on mobile header */
  .ast-header-button-1{display:block;}
}