/* ==========================================================
   Sundaria — dynamic header & footer
   Scoped under #sd-header / #sd-footer / #sd-announce so Hello
   Elementor resets and Elementor kit styles don't override it.
   Colours come from Customizer (CSS variables below).
   ========================================================== */

:root {
	--sd-header-bg: #0b0b0c;
	--sd-header-text: #f7f2e8;
	--sd-footer-bg: #0b0b0c;
	--sd-footer-text: #a6a29b;
	--sd-gold: #c9a55c;
	--sd-gold-lt: #e0c58a;
	--sd-ember: #8b1538;
	--sd-announce-bg: #8b1538;
	--sd-cream: #f7f2e8;
	--sd-ink: #0b0b0c;
	--sd-ink-3: #2b2823;
	--sd-logo-h: 44px;
	--sd-flogo-h: 52px;
	--sd-maxw: 1240px;
	--sd-gutter: 22px;
	--sd-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sd-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

#sd-header, #sd-footer, #sd-announce { font-family: var(--sd-sans); -webkit-font-smoothing: antialiased; box-sizing: border-box; }
#sd-header *, #sd-footer *, #sd-announce *,
#sd-header *::before, #sd-footer *::before,
#sd-header *::after, #sd-footer *::after { box-sizing: border-box; }
#sd-header a, #sd-footer a, #sd-announce a { text-decoration: none; }
#sd-header .sd-wrap, #sd-footer .sd-wrap { max-width: var(--sd-maxw); margin: 0 auto; padding: 0 var(--sd-gutter); }

/* ---------- Logo ---------- */
#sd-header .sd-brand, #sd-footer .sd-brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
#sd-header .sd-lockup, #sd-footer .sd-lockup { display: block; width: auto; aspect-ratio: 296 / 105; color: var(--sd-gold); }
#sd-header .sd-lockup, #sd-header .sd-logo-img { height: var(--sd-logo-h); }
#sd-footer .sd-lockup, #sd-footer .sd-logo-img { height: var(--sd-flogo-h); }
#sd-header .sd-logo-img, #sd-footer .sd-logo-img { display: block; width: auto; max-width: 100%; }
.sd-brand-label { font-family: var(--sd-serif); font-size: 22px; font-weight: 500; color: var(--sd-gold); letter-spacing: .02em; line-height: 1; }

/* ---------- Buttons ---------- */
#sd-header .sd-btn, #sd-footer .sd-btn {
	display: inline-flex; align-items: center; gap: 11px; padding: 13px 16px 13px 24px;
	border-radius: 999px; border: 1px solid transparent; font-family: var(--sd-sans);
	font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; white-space: nowrap;
	transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
#sd-header .sd-btn:hover { transform: translateY(-2px); }
#sd-header .sd-dot { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 23px; transition: transform .18s ease; }
#sd-header .sd-btn:hover .sd-dot { transform: translateX(3px); }
#sd-header .sd-dot svg { width: 11px; height: 11px; }
#sd-header .sd-btn-sm { padding: 10px 12px 10px 19px; font-size: 14px; }
#sd-header .sd-btn-sm .sd-dot { width: 21px; height: 21px; flex: 0 0 21px; }

#sd-header .sd-btn-ember { background: var(--sd-ember); color: #fff; border-color: var(--sd-gold); }
#sd-header .sd-btn-ember:hover { background: color-mix(in srgb, var(--sd-ember) 85%, #fff); color: #fff; }
#sd-header .sd-btn-ember .sd-dot { background: rgba(255,255,255,.22); }

#sd-header .sd-btn-gold { background: var(--sd-gold); color: var(--sd-ink); border-color: var(--sd-gold); }
#sd-header .sd-btn-gold:hover { background: var(--sd-gold-lt); border-color: var(--sd-gold-lt); color: var(--sd-ink); }
#sd-header .sd-btn-gold .sd-dot { background: rgba(11,11,12,.16); }

#sd-header .sd-btn-line-gold { background: transparent; color: var(--sd-header-text); border-color: var(--sd-gold); }
#sd-header .sd-btn-line-gold:hover { background: rgba(201,165,92,.16); color: #fff; }
#sd-header .sd-btn-line-gold .sd-dot { background: rgba(201,165,92,.22); }

#sd-header .sd-btn-cream { background: #fff; color: var(--sd-ink); border-color: #e0d6c2; }
#sd-header .sd-btn-cream:hover { border-color: var(--sd-gold); color: var(--sd-ink); }
#sd-header .sd-btn-cream .sd-dot { background: var(--sd-cream); }

/* ---------- Announcement bar ---------- */
#sd-announce { background: var(--sd-announce-bg); color: rgba(255,255,255,.88); font-size: 13px; line-height: 1.5; text-align: center; padding: 11px var(--sd-gutter); }
#sd-announce[hidden] { display: none; }
#sd-announce strong, #sd-announce b { color: #fff; font-weight: 600; }
#sd-announce a { color: var(--sd-gold-lt); border-bottom: 1px solid rgba(224,197,138,.7); margin-left: 9px; padding-bottom: 1px; }
#sd-announce a:hover { color: #fff; }

/* ---------- Header ---------- */
#sd-header { position: relative; z-index: 70; background: var(--sd-header-bg); border-bottom: 1px solid rgba(201,165,92,.3); --logo-knockout: var(--sd-header-bg); }
#sd-header.is-sticky { position: sticky; top: 0; }
.admin-bar #sd-header.is-sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar #sd-header.is-sticky { top: 46px; } }
@media (max-width: 600px) { .admin-bar #sd-header.is-sticky { top: 0; } }

#sd-header .sd-nav-shell { display: flex; align-items: center; height: 78px; gap: clamp(18px, 3vw, 50px); }
#sd-header .sd-nav-links { display: flex; align-items: center; gap: clamp(4px, 1.1vw, 13px); flex: 1 1 auto; justify-content: center; }
#sd-header .sd-nav-links a {
	font-size: 14.5px; font-weight: 500; line-height: 1.4;
	color: color-mix(in srgb, var(--sd-header-text) 74%, transparent);
	padding: 9px 6px; position: relative; white-space: nowrap; transition: color .16s;
}
#sd-header .sd-nav-links a::after {
	content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px; height: 1px;
	background: var(--sd-gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
#sd-header .sd-nav-links a:hover,
#sd-header .sd-nav-links a.active { color: var(--sd-header-text); }
#sd-header .sd-nav-links a:hover::after,
#sd-header .sd-nav-links a.active::after { transform: scaleX(1); }
#sd-header .sd-nav-links a.life,
#sd-header .sd-nav-links a.highlight { color: var(--sd-gold); font-weight: 600; }

#sd-header .sd-nav-cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Burger — fully reset Hello Elementor's default <button> styles */
#sd-header .sd-burger,
#sd-header .sd-burger:hover,
#sd-header .sd-burger:focus {
	display: none; background: none; color: var(--sd-header-text);
	border: 1px solid rgba(201,165,92,.45); border-radius: 3px; padding: 10px 11px;
	cursor: pointer; line-height: 0; box-shadow: none; min-height: 0;
}
#sd-header .sd-burger:focus-visible { outline: 2px solid var(--sd-gold); outline-offset: 2px; }
#sd-header .sd-burger span { display: block; width: 18px; height: 1.5px; background: var(--sd-header-text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
#sd-header .sd-burger span + span { margin-top: 4.5px; }
#sd-header .sd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#sd-header .sd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#sd-header .sd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav */
#sd-header .sd-mobile-nav { display: none; border-top: 1px solid rgba(201,165,92,.25); background: var(--sd-header-bg); padding: 10px 0 22px; max-height: calc(100vh - 70px); overflow-y: auto; }
#sd-header .sd-mobile-nav.is-open { display: block; }
#sd-header .sd-mobile-nav a:not(.sd-btn) {
	display: block; padding: 13px 2px; font-size: 16px; font-weight: 500; line-height: 1.4;
	color: var(--sd-header-text); border-bottom: 1px solid rgba(247,242,232,.12);
}
#sd-header .sd-mobile-nav a.active { color: var(--sd-gold); }
#sd-header .sd-mobile-nav .sd-btn { display: flex; margin-top: 16px; width: 100%; padding: 14px 16px 14px 24px; justify-content: space-between; }

@media (max-width: 1100px) {
	#sd-header .sd-nav-links { display: none; }
	#sd-header .sd-nav-cta .sd-cta-1 { display: none; }
	#sd-header .sd-burger, #sd-header .sd-burger:hover, #sd-header .sd-burger:focus { display: block; }
	#sd-header .sd-nav-shell { height: 70px; justify-content: space-between; }
}
@media (max-width: 360px) {
	#sd-header .sd-nav-cta .sd-cta-2 { display: none; }
	#sd-header .sd-lockup, #sd-header .sd-logo-img { height: min(var(--sd-logo-h), 36px); }
}

/* ---------- Footer ---------- */
#sd-footer { background: var(--sd-footer-bg); color: var(--sd-footer-text); padding: 64px 0 30px; font-size: 14.5px; line-height: 1.65; --logo-knockout: var(--sd-footer-bg); }
#sd-footer .sd-foot-grid { display: grid; grid-template-columns: 1.8fr repeat(var(--sd-cols, 3), 1fr); gap: 32px; }
#sd-footer .sd-foot-brand .sd-brand { margin-bottom: 20px; }
#sd-footer .sd-foot-brand p { font-size: 14.5px; line-height: 1.7; max-width: 34ch; margin: 0 0 24px; color: var(--sd-footer-text); }

#sd-footer h5 {
	font-family: var(--sd-sans); font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--sd-gold);
	letter-spacing: .18em; text-transform: uppercase; margin: 0 0 16px;
}
#sd-footer ul { list-style: none; margin: 0; padding: 0; }
#sd-footer li { margin: 0 0 10px; padding: 0; }
#sd-footer li a, #sd-footer .sd-legal a, #sd-footer .sd-copyright a { color: var(--sd-footer-text); font-size: 14.5px; transition: color .15s; }
#sd-footer li a:hover, #sd-footer .sd-legal a:hover, #sd-footer .sd-copyright a:hover,
#sd-footer li.current-menu-item > a { color: var(--sd-gold); }

#sd-footer .sd-socials { display: flex; gap: 10px; flex-wrap: wrap; }
#sd-footer .sd-socials a {
	width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
	border: 1px solid var(--sd-ink-3); color: var(--sd-cream); transition: border-color .15s, color .15s;
}
#sd-footer .sd-socials a:hover { border-color: var(--sd-gold); color: var(--sd-gold); }
#sd-footer .sd-socials svg { width: 17px; height: 17px; }

#sd-footer .sd-foot-bottom {
	border-top: 1px solid var(--sd-ink-3); margin-top: 50px; padding-top: 24px;
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px;
}
#sd-footer .sd-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
#sd-footer .sd-legal a { font-size: 13.5px; }

@media (max-width: 1024px) {
	#sd-footer .sd-foot-grid { grid-template-columns: 1fr 1fr; }
	#sd-footer .sd-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	#sd-footer { padding-top: 52px; }
	#sd-footer .sd-foot-grid { grid-template-columns: 1fr; }
	#sd-footer .sd-lockup, #sd-footer .sd-logo-img { height: min(var(--sd-flogo-h), 44px); }
}

@media (prefers-reduced-motion: reduce) {
	#sd-header *, #sd-footer * { transition: none !important; }
}
