/* ==========================================================================
   Abode & Bloom — Theme UI layer
   Dark palette + theme toggle + subtle, reduced-motion-aware animations.
   Loaded site-wide. Layers on top of homepage.css WITHOUT changing the
   approved light-mode layout or spacing.
   ========================================================================== */

:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* Smooth in-page scrolling (disabled for reduced-motion below). */
html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   1) DARK PALETTE
   The homepage design consumes CSS variables that homepage.css declares on
   .ab-home. We override those variables (higher specificity) in dark mode,
   plus add two surface tokens for elements that were hard-coded white.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .ab-home {
	--ink:            #E9EEE7;
	--moss:           #8FBF9A;
	--fern:           #A9C49A;
	--sage:           #7E9A81;
	--sage-soft:      #1E2A22;
	--canvas:         #0E1512;
	--cream:          #151E19;
	--marigold:       #E6B457;
	--marigold-deep:  #F0C36B;
	--muted:          #9DB0A3;
	--line:           rgba(255,255,255,.10);
	--line-strong:    rgba(255,255,255,.17);
	--surface:        #18211C;
	--surface-2:      #202B24;
	--shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.38);
	--shadow-md: 0 12px 36px rgba(0,0,0,.55);
}

/* Elements that used a literal #fff — re-home them onto the dark surface. */
html[data-theme="dark"] .ab-home .story,
html[data-theme="dark"] .ab-home .story-sec,
html[data-theme="dark"] .ab-home .chip,
html[data-theme="dark"] .ab-home .news-form input,
html[data-theme="dark"] .ab-home .pillars .tag {
	background: var(--surface);
	border-color: var(--line);
}
html[data-theme="dark"] .ab-home .btn--ghost:hover { background: var(--surface-2); }

/* Primary solid button: keep an accessible bright green with dark text. */
html[data-theme="dark"] .ab-home .btn--solid { background: #2FA36B; color: #08120C; }
html[data-theme="dark"] .ab-home .btn--solid:hover { background: #37B778; }

/* Trending band stays a dark surface (its own --moss would otherwise lighten). */
html[data-theme="dark"] .ab-home .trend-band { background: var(--surface-2); }
html[data-theme="dark"] .ab-home .trend-band .eyebrow { color: var(--fern); }
html[data-theme="dark"] .ab-home .trend-card { background: rgba(255,255,255,.05); border-color: var(--line); }
html[data-theme="dark"] .ab-home .trend-card:hover { background: rgba(255,255,255,.10); }

/* Dim the gradient FALLBACK tiles only (never real images). */
html[data-theme="dark"] .ab-home .ph:not(.has-img) { filter: brightness(.82) saturate(.9); }

/* --------------------------------------------------------------------------
   2) GLOBAL PALETTE TOKENS + document chrome
   Tokens live on :root so the header, footer and body theme correctly. The
   homepage/single content (.ab-home) carries its own copies (see homepage.css)
   which are overridden for dark mode in section 1 above.
   -------------------------------------------------------------------------- */
:root {
	--ink:#1B2A21; --moss:#34553F; --fern:#5B7F5C; --sage:#9CB18C; --sage-soft:#E7EDE0;
	--canvas:#F4F6F1; --cream:#FBFAF6; --marigold:#E2A23B; --marigold-deep:#C9871F;
	--muted:#6B7166; --line:#E2E6DC; --line-strong:#D2D8C8;
	--f-display:"Fraunces",Georgia,serif; --f-body:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
html[data-theme="dark"] {
	--ink:#E9EEE7; --moss:#8FBF9A; --fern:#A9C49A; --sage:#7E9A81; --sage-soft:#1E2A22;
	--canvas:#0E1512; --cream:#151E19; --marigold:#E6B457; --marigold-deep:#F0C36B;
	--muted:#9DB0A3; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.17);
}
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--f-body); }
#content { background: var(--canvas); padding: 0; width: 100%; max-width: none; }
@media (prefers-reduced-motion: no-preference) { body { transition: background-color .3s ease, color .3s ease; } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 100; background: #fff; color: #1B2A21; padding: 8px 14px; border-radius: 8px; }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.ab-head { position: sticky; top: 0; z-index: 60; background: rgba(251,250,246,.92); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .ab-head { background: rgba(18,25,21,.92); }
.ab-head-in { max-width: 1180px; margin: 0 auto; padding: 0 20px; min-height: 64px; display: flex; align-items: center; gap: 16px; }
.ab-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-family: var(--f-display); font-weight: 600; font-size: 20px; color: var(--ink); text-decoration: none; }
.ab-brand .amp, .ab-brand span em { color: var(--fern); font-style: italic; }
.ab-brand .brand-mark { width: 34px; height: 34px; flex: none; }
.ab-brand-logo img { max-height: 40px; width: auto; height: auto; display: block; }
.ab-nav { display: none; }
@media (min-width: 900px) { .ab-nav { display: block; } }
.ab-nav .ab-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.ab-nav .ab-menu a { display: inline-flex; align-items: center; padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.ab-nav .ab-menu a:hover, .ab-nav .ab-menu .current-menu-item > a { background: var(--sage-soft); color: var(--moss); }

/* --------------------------------------------------------------------------
   DROPDOWN SUB-MENUS (desktop)
   Single, unambiguous implementation (a previous version of this file had
   three overlapping/duplicated rule sets here, which made the dropdown
   fragile). The sub-menu is always `display:block` and is shown/hidden with
   opacity + visibility + pointer-events only — no !important needed, no
   specificity fights. It sits flush against its parent (no gap), so moving
   the pointer from the link into the dropdown never breaks the hover chain.
   Keyboard users get the same experience via :focus-within.
   -------------------------------------------------------------------------- */
.ab-nav .ab-menu li { position: relative; }
.ab-nav .ab-menu .menu-item-has-children > a::after {
	content: ""; display: inline-block; flex: none; width: 6px; height: 6px; margin-left: 7px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px); opacity: .6;
}
.ab-nav .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 70;
	min-width: 220px; margin: 0; padding: 8px; list-style: none;
	display: block;
	background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: 0 18px 40px rgba(27,42,33,.14);
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.ab-nav .menu-item-has-children:hover > .sub-menu,
.ab-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.ab-nav .sub-menu li { position: relative; }
.ab-nav .sub-menu a { display: block; white-space: nowrap; padding: 9px 12px; border-radius: 9px; font-size: 14.5px; font-weight: 500; }
.ab-nav .sub-menu a:hover { background: var(--sage-soft); color: var(--moss); }
.ab-nav .sub-menu .menu-item-has-children > a::after { transform: rotate(-45deg) translateY(1px); margin-left: auto; }
.ab-nav .sub-menu .sub-menu { top: -8px; left: calc(100% + 6px); }
.ab-cta { display: none; align-items: center; padding: 11px 18px; border-radius: 999px; background: var(--marigold); color: #3a2a06; font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .18s ease; }
@media (min-width: 900px) { .ab-cta { display: inline-flex; } }
.ab-cta:hover { background: var(--marigold-deep); color: #fff; transform: translateY(-1px); }
.ab-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--line-strong); border-radius: 11px; background: transparent; cursor: pointer; }
@media (min-width: 900px) { .ab-burger { display: none; margin-left: 0; } }
.ab-burger span { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.ab-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ab-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ab-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.ab-mobile-nav { border-top: 1px solid var(--line); background: var(--cream); padding: 10px 16px 18px; }
@media (min-width: 900px) { .ab-mobile-nav { display: none !important; } }
.ab-mobile-nav .ab-menu { list-style: none; margin: 0; padding: 0; }
.ab-mobile-nav .ab-menu a { display: block; padding: 12px 8px; font-weight: 600; font-size: 16px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.ab-mobile-nav .ab-menu a:hover { color: var(--moss); }
.ab-mobile-nav .sub-menu { list-style: none; margin: 0; padding: 0 0 0 16px; }
.ab-mobile-nav .sub-menu a { font-size: 15px; font-weight: 500; color: var(--muted); }
.ab-mobile-nav .menu-item-has-children > a::after { content: ""; }
.ab-mobile-nav .ab-cta { display: inline-flex; margin-top: 14px; }

/* --------------------------------------------------------------------------
   3) THEME TOGGLE BUTTON
   Injected into the primary menu (falls back to a fixed control if no menu).
   -------------------------------------------------------------------------- */
.ab-theme-toggle {
	--tg: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	width: var(--tg); height: var(--tg);
	margin: 0; padding: 0; cursor: pointer;
	background: transparent;
	border: 1px solid rgba(120,130,115,.35);
	border-radius: 50%;
	color: currentColor;
	line-height: 0;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.ab-theme-toggle:hover { background: rgba(120,130,115,.14); transform: translateY(-1px); }
.ab-theme-toggle:active { transform: translateY(0); }
.ab-theme-toggle svg { width: 19px; height: 19px; display: block; transition: transform .35s ease, opacity .25s ease; }
.ab-theme-toggle .ab-icon-sun { display: none; }
html[data-theme="dark"] .ab-theme-toggle .ab-icon-moon { display: none; }
html[data-theme="dark"] .ab-theme-toggle .ab-icon-sun  { display: block; }
html[data-theme="dark"] .ab-theme-toggle { border-color: rgba(255,255,255,.22); }

/* Toggle sitting inside the primary nav as a menu item. */

/* --------------------------------------------------------------------------
   4) SUBTLE ANIMATIONS  (only when the user hasn't asked to reduce motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

	/* Smooth theme colour transition on toggle (curated set, not global). */
	.ab-home .story,
	.ab-home .story-sec,
	.ab-home .showcase,
	.ab-home .news,
	.ab-home .trend-band,
	.ab-home .trend-card,
	.ab-home .chip,
	.ab-home .news-form input,
	.ab-home .tag,
	.ab-home .btn,
	.ab-home .card h3 {
		transition-property: background-color, color, border-color, box-shadow, transform;
		transition-duration: .3s;
		transition-timing-function: ease;
	}

	/* Card & story hover lift + image zoom. */
	.ab-home .card .ph img,
	.ab-home .trend-card .ph img,
	.ab-home .story-lead .ph img { transition: transform .55s cubic-bezier(.2,.6,.2,1); will-change: transform; }
	.ab-home .card:hover .ph img,
	.ab-home .trend-card:hover .ph img,
	.ab-home .story-lead:hover .ph img { transform: scale(1.05); }

	.ab-home .story { transition: transform .25s ease, box-shadow .25s ease, background-color .3s ease; }
	.ab-home .story:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
	.ab-home .card { transition: transform .2s ease; }
	.ab-home .card:hover { transform: translateY(-2px); }
	.ab-home .mr-item { transition: background-color .2s ease; border-radius: 12px; }
	.ab-home .mr-item:hover { background: color-mix(in srgb, var(--sage-soft) 55%, transparent); }

	/* Section reveal-on-scroll (JS adds .reveal, then .in when visible). */
	.ab-home .section.reveal { opacity: 0; transform: translateY(16px); }
	.ab-home .section.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1); }

	/* Toggle icon spin on theme change. */
	html[data-theme="dark"] .ab-theme-toggle .ab-icon-sun { animation: ab-pop .4s ease; }
	@keyframes ab-pop { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Respect reduced-motion everywhere. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ab-home .section.reveal { opacity: 1 !important; transform: none !important; }
}

/* Keep focus rings crisp in both themes. */
html[data-theme="dark"] .ab-home :focus-visible { outline-color: var(--marigold); }

/* ==========================================================================
   SITE FOOTER — complete navigation, strong hierarchy, mobile-first.
   ========================================================================== */

.ab-site-footer {
	margin-top: 0;
	background: #0F1B14;
	color: #B9C7BC;
	font-family: var(--f-body, "DM Sans", system-ui, sans-serif);
	border-top: 1px solid rgba(255,255,255,.08);
}
.ab-site-footer a { color: #B9C7BC; text-decoration: none; transition: color .18s ease, opacity .18s ease; }
.ab-site-footer a:hover { color: #fff; }
.ab-foot-inner { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.ab-foot-intro {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
	padding: 38px 0 32px; border-bottom: 1px solid rgba(255,255,255,.10);
}
.ab-foot-eyebrow { display: block; margin-bottom: 9px; color: #9CB18C; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ab-foot-intro h2 { max-width: 520px; margin: 0; color: #F4F7F2; font-family: var(--f-display, Georgia, serif); font-size: clamp(25px, 4vw, 38px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.ab-foot-top-link { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #DCE7DB !important; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.ab-foot-top-link:hover { border-color: #9CB18C; background: rgba(156,177,140,.10); }
.ab-foot-top-link svg { width: 15px; height: 15px; transform: rotate(-90deg); }
.ab-foot-cols { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 34px; padding: 42px 0 48px; }
.ab-foot-brand-link { display: inline-flex; align-items: center; gap: 10px; color: #F4F7F2 !important; }
.ab-foot-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(156,177,140,.7); border-radius: 50%; color: #DDEAD8; font-family: var(--f-display, Georgia, serif); font-size: 13px; font-weight: 700; letter-spacing: -.05em; }
.ab-foot-name { color: #F4F7F2; font-family: var(--f-display, Georgia, serif); font-size: 23px; font-weight: 600; line-height: 1; }
.ab-foot-logo { display: inline-flex; }
.ab-foot-logo img { display: block; width: auto; max-width: 190px; max-height: 52px; height: auto; }
.ab-foot-about { max-width: 34ch; margin: 18px 0 22px; color: #9DB0A3; font-size: 14px; line-height: 1.7; }
.ab-foot-social-label { margin-bottom: 10px; color: #778A7C; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ab-foot-social { display: flex; gap: 9px; }
.ab-foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; color: #D4E0D5; }
.ab-foot-social a:hover { transform: translateY(-2px); border-color: transparent; background: #34553F; color: #fff; }
.ab-foot-social svg { width: 17px; height: 17px; }
.ab-foot-hint { max-width: 26ch; margin: 0; color: #778A7C; font-size: 12px; line-height: 1.5; }
.ab-foot-col h3 { margin: 3px 0 18px; color: #F4F7F2; font-family: var(--f-body, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ab-foot-menu { list-style: none; margin: 0; padding: 0; }
.ab-foot-menu li { margin: 0; }
.ab-foot-menu a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 0; color: #AEBDB1; font-size: 14px; line-height: 1.35; }
.ab-foot-menu a:hover { color: #fff; }
.ab-foot-menu a svg { width: 13px; height: 13px; opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.ab-foot-menu a:hover svg { opacity: .9; transform: translateX(0); }
.ab-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 20px 0 24px; border-top: 1px solid rgba(255,255,255,.10); }
.ab-foot-copy { margin: 0; color: #7F9083; font-size: 12px; line-height: 1.5; }
.ab-foot-bottom-links { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: #657569; font-size: 12px; }
.ab-foot-bottom-links a { color: #AEBDB1; }
.ab-foot-bottom-links a:hover { color: #fff; }
.ab-foot-col .widget { margin: 0; }
.ab-foot-col ul { list-style: none; margin: 0; padding: 0; }
.ab-foot-col select { max-width: 100%; }

html[data-theme="dark"] .ab-site-footer { background: #09110C; }
@media (min-width: 900px) { .ab-foot-inner { padding-inline: 32px; } }
@media (max-width: 760px) {
	.ab-foot-intro { align-items: flex-start; flex-direction: column; padding-block: 32px 26px; }
	.ab-foot-top-link { margin-top: 2px; }
	.ab-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; padding-block: 34px 38px; }
	.ab-foot-brand { grid-column: 1 / -1; padding-bottom: 8px; }
}
@media (max-width: 480px) {
	.ab-foot-inner { padding-inline: 18px; }
	.ab-foot-cols { grid-template-columns: 1fr; gap: 25px; }
	.ab-foot-brand { grid-column: auto; padding-bottom: 5px; }
	.ab-foot-col h3 { margin-bottom: 10px; }
	.ab-foot-bottom { align-items: flex-start; flex-direction: column; padding-block: 18px 22px; }
}
@media (prefers-reduced-motion: no-preference) {
	.ab-foot-menu a svg, .ab-foot-social a, .ab-foot-top-link { transition: color .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease, transform .18s ease; }
}

/* Responsive safeguards (mobile-first) */
img { max-width: 100%; height: auto; }
.ab-home, .ab-single { overflow-wrap: break-word; }