/*
 * Site themes — the shared header (includes/header_nav.php) and footer (includes/footer.php) on
 * themed pages. Their markup is shared with ~100 legacy pages and paints colours with Tailwind
 * classes and inline styles, so on themed pages (body.zt) this sheet re-points them at the tokens:
 * --z-header-*, --z-footer-*, --z-surface/text/muted/border for the dropdown panels. Inline styles
 * need !important. Never loaded on legacy pages.
 */

/* ---- Header bar ------------------------------------------------------------------------- */
body.zt nav.glass-effect { background: var(--z-header-bg) !important; color: var(--z-header-text); border-bottom: 1px solid var(--z-header-border); box-shadow: none; }
body.zt nav.glass-effect .nav-link,
body.zt nav.glass-effect .zn-locnav-btn { color: var(--z-header-link) !important; }
body.zt nav.glass-effect .nav-link:hover,
body.zt nav.glass-effect .nav-link:focus-visible,
body.zt nav.glass-effect .zn-locnav-item:hover { color: var(--z-header-link-hover) !important; }
body.zt nav.glass-effect .nav-link::after { background: var(--z-header-link-hover) !important; }
body.zt nav.glass-effect .logo-container [style*="color"],
body.zt nav.glass-effect .site-name-fit { color: var(--z-header-text) !important; }
body.zt nav.glass-effect .logo-container img { background: var(--z-logo-bg, transparent); border-radius: 10px; }
body.zt nav.glass-effect #mobile-menu-button { color: var(--z-header-text) !important; }

/* ---- Dropdown panels + mobile menu (cart, notifications, account, locations) ------------- */
body.zt nav.glass-effect .bg-white,
body.zt #mobile-menu,
body.zt #mobile-menu .bg-white { background-color: var(--z-surface) !important; }
body.zt nav.glass-effect :is(.bg-gray-50, .bg-gray-100, .bg-gray-200) { background-color: var(--z-surface-2) !important; }
body.zt nav.glass-effect :is(.hover\:bg-gray-50, .hover\:bg-gray-100):hover { background-color: var(--z-surface-2) !important; }
body.zt nav.glass-effect :is([class*="bg-gray-50/"], [class*="bg-gray-100/"], [class*="bg-white/"]) { background-color: var(--z-surface-2) !important; }
body.zt nav.glass-effect :is([class*="bg-indigo-50"], [class*="bg-indigo-100"], [class*="bg-blue-50"], [class*="bg-blue-100"]) { background-color: var(--z-accent-soft) !important; color: var(--z-accent-text) !important; }
body.zt nav.glass-effect :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--z-text) !important; }
body.zt nav.glass-effect :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-gray-300) { color: var(--z-muted) !important; }
body.zt nav.glass-effect :is(.border-gray-100, .border-gray-200, .border-gray-300) { border-color: var(--z-border) !important; }
body.zt nav.glass-effect .hover\:text-gray-900:hover { color: var(--z-text) !important; }
body.zt nav.glass-effect [style*="color"]:not(.bg-tenant-primary):not([style*="background"]) { color: var(--z-text) !important; }
/* The site name sits on the bar itself, not on a panel: it must out-rank the rule above (0,5,2),
   or a header whose colours differ from the page's (custom colours, dark bars) gets page-text names. */
body.zt nav.glass-effect .logo-container [style*="color"]:not(.bg-tenant-primary):not([style*="background"]) { color: var(--z-header-text) !important; }
/* The signed-in name sits on the bar itself: --z-header-name (custom header colours, else the header text). */
body.zt nav.glass-effect #user-menu-button p[style*="color"] { color: var(--z-header-name, var(--z-header-text)) !important; }

/* ---- Floating header (includes/header-2.php; Customize Website › Site-wide › Header › Floating) --
   The bar floats inside a transparent nav, so the nav loses its fill and border here and the
   floating bar's own variables are re-pointed at the header tokens (light, dark and custom). */
body.zt nav.glass-effect.zh-float {
    background: transparent !important; border-bottom: 0 !important; box-shadow: none !important;
    --zh-bg: var(--z-header-bg);
    --zh-line: var(--z-header-border);
    --zh-hover: var(--z-header-link-hover);
    --zh-primary: var(--z-header-link-hover);
    --zh-tint: color-mix(in srgb, var(--z-header-link-hover) 14%, transparent);
    --zh-tint-hi: color-mix(in srgb, var(--z-header-link-hover) 22%, transparent);
    --zh-hover-bg: color-mix(in srgb, var(--z-header-link) 10%, transparent);
}
body.zt nav.glass-effect.zh-float .nav-link.is-current { color: var(--z-header-link-hover) !important; }
/* The pills carry their own padding: a template's wider gaps between links (Market Day) would push
   the floating bar into its ☰ menu on ordinary laptop widths. */
body.zt nav.glass-effect.zh-float .zn-nav-links > :not([hidden]) ~ :not([hidden]) { margin-left: 2px !important; margin-right: 0 !important; }

/* ---- Footer ----------------------------------------------------------------------------- */
body.zt .zt-site-footer { background: var(--z-footer-bg) !important; color: var(--z-footer-text) !important; border-top: 1px solid var(--z-footer-border); }
body.zt .zt-site-footer .blur-3xl { display: none; }
body.zt .zt-site-footer [style*="color"]:not([style*="background"]) { color: var(--z-footer-muted) !important; }
body.zt .zt-site-footer h4,
body.zt .zt-site-footer h4 *:not(span.rounded-full),
body.zt .zt-site-footer #footer-fallback-name { color: var(--z-footer-text) !important; }
body.zt .zt-site-footer a:hover,
body.zt .zt-site-footer a:hover span,
body.zt .zt-site-footer .group:hover span { color: var(--z-footer-link) !important; }
body.zt .zt-site-footer span.rounded-full[style*="background"] { background-color: var(--z-accent) !important; }
/* Icons (social, email/phone, link arrows) already sit in their own tiles: never a fill behind the glyph
   (their colour comes from the [style*="color"] rule above). */
body.zt .zt-site-footer i[style*="color"] { background: none !important; }
body.zt .zt-site-footer .volunteer-btn,
body.zt .zt-site-footer button[type="submit"] { background: var(--z-accent) !important; color: var(--z-accent-ink) !important; }
body.zt .zt-site-footer input { background: rgba(var(--z-bg-rgb), .08) !important; color: var(--z-footer-text) !important; border-color: var(--z-footer-border) !important; }
body.zt .zt-site-footer input::placeholder { color: var(--z-footer-muted); opacity: .8; }
body.zt .zt-site-footer :is(.border-t, .border-gray-700, .border-gray-800) { border-color: var(--z-footer-border) !important; }
body.zt #backToTop { background: var(--z-accent) !important; color: var(--z-accent-ink) !important; }

/* ---- Staff / vendor quick-nav rail (includes/admin-floating-nav.php, floating-nav-styles.php) -- */
body.zt :is(.admin-float-nav, .admin-float-nav__toggle, .admin-float-nav__show) { background: var(--z-surface) !important; color: var(--z-muted) !important; box-shadow: var(--z-shadow), 0 0 0 1px var(--z-border) !important; border-color: var(--z-border) !important; }
body.zt .admin-float-nav__item { color: var(--z-muted) !important; }
body.zt :is(.admin-float-nav__item:hover, .admin-float-nav__item.--active, .admin-float-nav__show:hover) { background: var(--z-surface-2) !important; color: var(--z-text) !important; }
body.zt .admin-float-nav__divider { background: var(--z-border) !important; }