/* ===================================================================
   SONG GIFT STORY - custom site header (child theme code header)
   Replaces the old Elementor Pro header (#76). Loaded site-wide EXCEPT
   on private gift pages (which are intentionally headerless / full-bleed).

   ONE OFFSET, no doubling:
   The header is position:fixed (out of normal flow), so we reserve its
   height once with body { padding-top: var(--sgs-header-h) }. The header
   is opaque navy at top:0, so it covers that reserved band. Each page's
   own top padding then supplies any visual gap. Nothing is doubled and no
   page content can hide under the header.
   =================================================================== */

:root {
	--sgs-header-h: 84px;   /* desktop */
	--sgs-navy: #1E2A4A;
	--sgs-gold: #BD9A52;
	--sgs-gold-deep: #a9863f;
	--sgs-cream: #FBF6EE;
}

/* Reserve exactly the header height on every page that loads this file. */
body {
	padding-top: var(--sgs-header-h);
}

/* ---- The bar ---- */
.sgs-siteheader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--sgs-header-h);
	display: flex;
	align-items: center;
	background: var(--sgs-navy);
	border-bottom: 1px solid rgba(189, 154, 82, 0.18);
	transition: box-shadow 0.3s ease, background 0.3s ease;
}
.sgs-siteheader.sgs-scrolled {
	box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.55);
}

/* WordPress admin bar (logged-in): the fixed header must sit below it. */
body.admin-bar .sgs-siteheader { top: 32px; }

.sgs-head-inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp(18px, 4vw, 44px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* ---- Logo (slightly larger, still balanced in the bar) ---- */
.sgs-logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	line-height: 0;
	text-decoration: none;
}
.sgs-logo-svg {
	height: 42px;          /* desktop; was 34 */
	width: auto;
	display: block;
}

/* ---- Desktop nav ---- */
.sgs-nav {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3vw, 42px);   /* more breathing room; was 16-32 */
}
.sgs-nav > a {
	position: relative;
	font-family: 'Mulish', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--sgs-cream);
	text-decoration: none;
	padding: 6px 0;
	transition: color 0.2s ease;
	white-space: nowrap;
}
.sgs-nav > a:not(.sgs-cta)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1.5px;
	width: 0;
	background: var(--sgs-gold);
	transition: width 0.25s ease;
}
.sgs-nav > a:not(.sgs-cta):hover { color: var(--sgs-gold); }
.sgs-nav > a:not(.sgs-cta):hover::after { width: 100%; }

/* Gold Order Now button - kept clearly separated + rightmost. */
.sgs-cta {
	background: var(--sgs-gold) !important;
	color: var(--sgs-navy) !important;
	font-weight: 800 !important;
	padding: 11px 24px !important;
	border-radius: 12px;
	margin-left: 8px;               /* extra breathing room before the CTA */
	box-shadow: 0 12px 24px -12px rgba(189, 154, 82, 0.7);
	transition: background 0.2s ease, transform 0.2s ease;
}
.sgs-cta:hover {
	background: var(--sgs-gold-deep) !important;
	color: var(--sgs-navy) !important;
	transform: translateY(-1px);
}
.sgs-cta::after { display: none !important; }

/* ---- Hamburger (premium: rounded gold-tinted container, cream bars) ---- */
.sgs-burger {
	display: none;                  /* actual show/hide is in the paired media queries below */
	width: 46px;
	height: 46px;
	padding: 0;
	flex: none;
	border: 1px solid rgba(189, 154, 82, 0.5);
	border-radius: 12px;
	background: rgba(189, 154, 82, 0.10);
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.sgs-burger::-moz-focus-inner { border: 0; padding: 0; }

/* FORCE the burger's colors in every state. Some other stylesheet was setting
   a pink/magenta background + border on :focus / :active / (open) - visible as
   a pink border when idle, a pink fill when tapped/open. High specificity
   (.sgs-siteheader button.sgs-burger) + !important guarantees the brand
   gold/navy wins. Only a gold ring shows for keyboard focus (:focus-visible). */
.sgs-siteheader button.sgs-burger,
.sgs-siteheader button.sgs-burger:hover,
.sgs-siteheader button.sgs-burger:focus,
.sgs-siteheader button.sgs-burger:focus-visible,
.sgs-siteheader button.sgs-burger:active,
body.sgs-menu-open .sgs-siteheader button.sgs-burger {
	background-color: rgba(189, 154, 82, 0.10) !important;
	background-image: none !important;
	border: 1px solid rgba(189, 154, 82, 0.5) !important;
	color: var(--sgs-cream) !important;
	outline: none !important;
	box-shadow: none !important;
}
.sgs-siteheader button.sgs-burger:hover,
body.sgs-menu-open .sgs-siteheader button.sgs-burger {
	background-color: rgba(189, 154, 82, 0.18) !important;
	border-color: var(--sgs-gold) !important;
}
/* Gold keyboard-focus ring only (no pink, no ring on mouse/touch). */
.sgs-siteheader button.sgs-burger:focus-visible {
	box-shadow: 0 0 0 3px rgba(189, 154, 82, 0.45) !important;
}
.sgs-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--sgs-cream);
	border-radius: 2px;
	transition: transform 0.28s ease, opacity 0.2s ease, background 0.2s ease;
}
.sgs-burger:hover span { background: var(--sgs-gold); }
/* Bars -> X when open. */
body.sgs-menu-open .sgs-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.sgs-menu-open .sgs-burger span:nth-child(2) { opacity: 0; }
body.sgs-menu-open .sgs-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile menu panel ---- */
.sgs-mobile-menu {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--sgs-header-h);
	z-index: 999;
	background: var(--sgs-navy);
	border-top: 1px solid rgba(189, 154, 82, 0.2);
	box-shadow: 0 26px 44px -22px rgba(0, 0, 0, 0.65);
	padding: 12px clamp(20px, 6vw, 34px) 26px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
}
body.admin-bar .sgs-mobile-menu { top: calc(var(--sgs-header-h) + 32px); }
body.sgs-menu-open .sgs-mobile-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.sgs-mobile-menu a {
	display: block;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 23px;
	font-weight: 500;
	letter-spacing: 0.3px;
	color: var(--sgs-cream);
	text-decoration: none;
	padding: 16px 4px;
	border-bottom: 1px solid rgba(189, 154, 82, 0.14);
	transition: color 0.2s ease;
}
.sgs-mobile-menu a:hover,
.sgs-mobile-menu a:active { color: var(--sgs-gold); }
.sgs-mobile-menu .sgs-cta {
	font-family: 'Mulish', sans-serif;
	font-size: 15px;
	text-align: center;
	margin-top: 20px;
	margin-left: 0;
	padding: 15px 22px !important;
	border-bottom: 0;
}

/* ===================================================================
   RESPONSIVE SWITCH - paired, mutually exclusive, !important so the
   desktop hide of the hamburger cannot be overridden by source order,
   a stray button UA/theme rule, or CSS-combine reordering.
   =================================================================== */

/* DESKTOP: full nav + Order Now, NO hamburger, no mobile panel. */
@media (min-width: 921px) {
	.sgs-nav { display: flex !important; }
	.sgs-burger,
	.sgs-mobile-menu { display: none !important; }
}

/* MOBILE / TABLET: hamburger only, desktop nav hidden. */
@media (max-width: 920px) {
	.sgs-nav { display: none !important; }
	.sgs-burger { display: inline-flex !important; }
}

/* Small screens: smaller header + matching offset (still ONE value), and a
   slightly larger-but-balanced logo. Reduced from 72 to 64 to remove the
   small gap under the fixed header on mobile. */
@media (max-width: 782px) {
	:root { --sgs-header-h: 64px; }
	.sgs-logo-svg { height: 36px; }        /* bigger than before (was 30) but fits 64 */
	.sgs-burger { width: 44px; height: 44px; }

	/* On mobile WordPress makes the admin bar position:absolute (it scrolls
	   away) and pushes the page down with html{margin-top:46px}. A viewport
	   fixed header at top:46 then leaves a gap at the very top once the admin
	   bar scrolls off. So on mobile we cancel that html margin and pin the
	   header to the very top: the admin bar just overlaps the header for
	   logged-in admins at scroll 0, then scrolls away. Public visitors have no
	   admin bar, so this is a no-op for them and the header is already top:0.
	   html:root beats WordPress's "html{margin-top:46px !important}". */
	html:root { margin-top: 0 !important; }
	body.admin-bar .sgs-siteheader { top: 0; }
	body.admin-bar .sgs-mobile-menu { top: var(--sgs-header-h); }
}