/**
 * ShareCARD theme — supplemental CSS.
 * Everything expressible through theme.json presets/block supports lives there;
 * this file only covers hover/focus states, the sticky/mega-menu chrome, and the
 * three small interactive widgets (cookie bar, chat launcher, remarketing popup)
 * that core blocks and theme.json can't express on their own.
 */

/* ---------- Kill WordPress's default sibling block-gap at the page-landmark level ---------- */
/* Every direct child of .wp-site-blocks that isn't :first-child gets a default
   margin-block-start (from blockGap) -- this pushes <main> down from <header>
   and <footer> down from <main>, adding space the source design doesn't have.
   Each section's own spacing is already explicit (padding/margin matching the
   source), so these page-landmark siblings should sit flush against each other. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0 !important;
}

/* ---------- Reset default browser margin on paragraphs/headings ---------- */
/* Neither WP core nor theme.json ever sets margin on .wp-block-paragraph/.wp-block-heading --
   WP's blockGap mechanism only zeroes+re-applies margin for DIRECT CHILDREN of a container
   that has blockGap explicitly configured. Any <p>/<h*> nested inside a plain column or group
   with no blockGap setting (e.g. ported "div" pairs like an icon + label) falls through to the
   browser's default ~1em margin, silently inflating spacing/height wherever the source used a
   plain <div>/<span> (which has no default margin). Zeroing here and relying on explicit
   inline margins or blockGap everywhere else avoids that class of misalignment site-wide. */
.wp-block-paragraph,
.wp-block-heading {
	margin: 0;
}

/* ---------- Kill WP core's forced padding on any <p> with a background color ---------- */
/* WP core ships `:root :where(p.has-background) { padding: 1.25em 2.375em; }` -- meant for
   highlighted text passages, but it silently applies to EVERY paragraph given a background
   color, including fixed-size badges/pills/circles ported from source <span>/<div> elements
   (which have no such padding). Since it's added on top of an explicit width/height, it
   inflates a source's compact 34px circle badge into a much larger box with overlapping text.
   Zero it here; any badge that source actually wants padded already sets its own inline
   padding, which (having no !important) already wins over this reset. */
:root :where(p.has-background) {
	padding: 0;
}

/* ---------- Fix card grids: WordPress core always uses auto-fill, source uses auto-fit ---------- */
/* Every "layout":{"type":"grid","minimumColumnWidth":...} group in this theme
   (persona grid, feature grids, crop grid, etc.) generates
   grid-template-columns: repeat(auto-fill, minmax(...)) via WP core -- always
   auto-fill, never auto-fit, regardless of block attributes. When a row has
   fewer cards than the container is wide enough to fit, auto-fill still
   reserves empty trailing column tracks (visible in DevTools as a phantom
   extra column), leaving the real cards narrower than they should be and
   shoved toward one side instead of stretching to fill the row -- the
   source's own CSS uses auto-fit, which collapses empty tracks to 0 and
   lets the real items expand to fill the freed space.
   Each grid group carries a "sc-grid-{width}" className (added alongside its
   minimumColumnWidth attribute) so this can target the *exact* same minimum
   width WP already computed per instance -- a blanket auto-fit swap without
   matching that value would let cards shrink/grow to the wrong sizes. */
.sc-grid-300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important; }
.sc-grid-200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important; }
.sc-grid-240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important; }
.sc-grid-220 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important; }
.sc-grid-180 { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important; }
.sc-grid-280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; }
.sc-grid-440 { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)) !important; }
.sc-grid-380 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)) !important; }
.sc-grid-340 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)) !important; }
.sc-grid-260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important; }
.sc-grid-250 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)) !important; }
.sc-grid-230 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)) !important; }
.sc-grid-210 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important; }
.sc-grid-150 { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important; }
.sc-grid-140 { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)) !important; }
.sc-grid-108 { grid-template-columns: repeat(auto-fit, minmax(min(108px, 100%), 1fr)) !important; }
.sc-grid-104 { grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)) !important; }

/* Fallback for any grid instance still using the generic centering approach
   (belt-and-suspenders in case a future grid is added without a matching
   sc-grid-{width} rule above). */
.is-layout-grid {
	justify-content: center;
}

/* ---------- Mobile side gutters for wide / card sections ---------- */
/* With useRootPaddingAwareAlignments, .alignwide stretches to the viewport
   edges so card grids (Resources steps, guides query, home module grids,
   etc.) sit flush unless the section itself sets left/right padding.
   .alignfull sections in this theme already use 24px inline padding;
   only pad top-level .alignwide (and archive mains) so nested .alignwide
   inside a padded .alignfull is not double-guttered. */
@media (max-width: 782px) {
	.wp-block-post-content > .alignwide,
	.wp-block-post-content > .wp-block-columns.alignwide,
	.wp-block-post-content > .wp-block-query.alignwide,
	main.wp-block-group.alignwide,
	main > .alignwide {
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}
}

/* ---------- Utility bar + sticky main nav (ported from SiteNav.dc.html) ---------- */

.sc-utility-bar a {
	transition: color var(--wp--custom--duration--micro, 150ms) ease;
}

.sc-utility-bar a:hover {
	color: var(--wp--preset--color--neutral-0) !important;
}

.sc-main-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(1.4) blur(8px);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

/* Hover mega-menu, ported directly from SiteNav.dc.html's .scn-* classes.
   Core's wp:navigation-submenu can't render rich mega-menu content (icons,
   descriptions, multi-column grids), so the header part uses raw HTML for
   these dropdowns and relies entirely on this hover CSS -- exact same
   technique the source itself uses (desktop hover-only, no mobile toggle
   in the source to replicate either). */
.sc-nav-item {
	position: relative;
}

.sc-nav-link {
	cursor: pointer;
	transition: color var(--wp--custom--duration--micro, 150ms) ease;
}

.sc-nav-item:hover .sc-nav-link {
	color: var(--wp--preset--color--mint-600);
}

.sc-nav-panel {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wp--custom--duration--standard, 160ms) ease, transform var(--wp--custom--duration--standard, 160ms) ease;
	z-index: 60;
	padding-top: 14px;
}

.sc-nav-item:hover .sc-nav-panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.sc-nav-mega {
	transition: background var(--wp--custom--duration--micro, 150ms) ease;
}

.sc-nav-mega:hover {
	background: var(--wp--preset--color--mint-50);
}

.sc-util:hover {
	color: #fff !important;
}

.sc-notif {
	position: relative;
}

.sc-notif-panel {
	position: absolute;
	top: 100%;
	right: 0;
	transform: translateY(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wp--custom--duration--standard, 160ms) ease, transform var(--wp--custom--duration--standard, 160ms) ease;
	z-index: 61;
	padding-top: 12px;
}

.sc-notif:hover .sc-notif-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sc-bell:hover {
	background: var(--wp--preset--color--mint-50);
}

.sc-noti-row:hover {
	background: var(--wp--preset--color--mint-50);
}

/* Footer links, ported from SiteFooter.dc.html's .scf-link -- neutral/muted
   at rest (per-link inline color set to match the source exactly), mint on
   hover. Needed because theme.json's global link color (mint-600) would
   otherwise override the footer's intentionally muted link color. */
.sc-footer-link {
	transition: color var(--wp--custom--duration--micro, 150ms) ease;
}

.sc-footer-link:hover {
	color: var(--wp--preset--color--mint-300) !important;
}

/* ---------- Card recipe (post-card / hp-card / res-card / mod-card) ---------- */
/* Recipe from Welcome.dc.html / Resources.dc.html: white surface, subtle border,
   radius-lg, shadow-sm at rest, lift + shadow-lg on hover, ~220-250ms ease. */

.sc-card {
	background: var(--wp--preset--color--neutral-0);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--lg, 14px);
	box-shadow: var(--wp--custom--shadow--sm);
	overflow: hidden;
	transition:
		transform var(--wp--custom--duration--standard, 250ms) var(--wp--custom--ease--in-out),
		box-shadow var(--wp--custom--duration--standard, 250ms) var(--wp--custom--ease--in-out);
}

.sc-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow--lg);
}

/* Mint accent bar used on the "New in v2.0" style post cards */
.sc-card-accent {
	height: 8px;
	background: var(--wp--preset--color--mint-500);
}

/* Crop-card mini tiles (Welcome.dc.html value-chain grid) — smaller radius/shadow.
   Source's .crop-card:hover lifts -3px with shadow-md; missing the transform
   here meant these had no hover effect at all. */
.sc-crop-card {
	background: var(--wp--preset--color--neutral-0);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--md, 10px);
	text-align: center;
	transition:
		transform var(--wp--custom--duration--standard, 250ms) var(--wp--custom--ease--out),
		box-shadow var(--wp--custom--duration--standard, 250ms) var(--wp--custom--ease--out);
}

.sc-crop-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow--md);
}

/* Market Linkages.dc.html's own crop grid (.ml-crop) wants a slightly
   stronger lift/shadow than the shared recipe above -- same missing-transform
   bug, plus its own exact values. */
.sc-crop-card--lg:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow--lg);
}

/* ---------- Cookie consent bar (ported from SiteFooter.dc.html) ---------- */

#sc-cookie-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--neutral-0);
	box-shadow: 0 -6px 30px rgba(15, 27, 31, 0.22);
	display: none;
}

#sc-cookie-bar.is-visible {
	display: block;
}

#sc-cookie-panel {
	display: none;
	border-top: 1px solid var(--wp--preset--color--neutral-700);
}

#sc-cookie-panel.is-open {
	display: block;
}

.sc-cookie-btn {
	font-family: inherit;
	font-weight: 700;
	font-size: 13.5px;
	padding: 11px 18px;
	border-radius: var(--wp--custom--radius--md, 10px);
	cursor: pointer;
}

.sc-cookie-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--neutral-0);
	border: 1.5px solid var(--wp--preset--color--neutral-600);
}

.sc-cookie-btn--accept {
	background: var(--wp--preset--color--mint-500);
	color: var(--wp--preset--color--neutral-900);
	border: none;
}

/* ---------- Chat launcher + panel (ported from ChatBot.dc.html) ---------- */

@keyframes sc-chat-pop {
	0% { transform: scale(0.6); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes sc-chat-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(1, 177, 138, 0.5); }
	50% { box-shadow: 0 0 0 10px rgba(1, 177, 138, 0); }
}

#sc-chat-launcher {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--neutral-900);
	border: none;
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 8px 8px 8px 18px;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(15, 27, 31, 0.3);
	animation: sc-chat-pulse 2.6s infinite;
}

#sc-chat-launcher-label {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.sc-chat-launcher-avatar-wrap {
	position: relative;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: block;
}

.sc-chat-launcher-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	background: #fff;
	border: 2px solid var(--wp--preset--color--mint-300);
	display: block;
}

.sc-chat-status-dot {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #2fd07a;
	border: 2px solid var(--wp--preset--color--neutral-900);
	right: -1px;
	bottom: -1px;
}

.sc-chat-status-dot--launcher {
	width: 11px;
	height: 11px;
	right: 0;
	top: 1px;
	bottom: auto;
}

#sc-chat-panel {
	position: fixed;
	right: 22px;
	bottom: 92px;
	z-index: 9999;
	width: 340px;
	max-width: calc(100vw - 44px);
	background: var(--wp--preset--color--neutral-0);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 20px;
	box-shadow: 0 18px 50px rgba(15, 27, 31, 0.28);
	overflow: hidden;
	display: none;
	flex-direction: column;
}

#sc-chat-panel.is-open {
	display: flex;
	animation: sc-chat-pop 0.18s ease;
}

.sc-chat-header {
	background: var(--wp--preset--color--neutral-900);
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.sc-chat-avatar-wrap {
	position: relative;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
}

.sc-chat-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	background: #fff;
	display: block;
}

.sc-chat-header-text {
	flex: 1;
	min-width: 0;
}

.sc-chat-name {
	font-size: 14.5px;
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
}

.sc-chat-subtitle {
	font-size: 11.5px;
	color: var(--wp--preset--color--mint-300);
	font-weight: 600;
}

.sc-chat-close {
	cursor: pointer;
	color: var(--wp--preset--color--neutral-400);
	background: none;
	border: none;
	display: flex;
	padding: 4px;
}

.sc-chat-messages {
	padding: 18px;
	background: var(--wp--preset--color--mint-50);
	max-height: 300px;
	overflow-y: auto;
}

.sc-chat-message-row {
	display: flex;
	gap: 9px;
	align-items: flex-end;
	margin-bottom: 14px;
}

.sc-chat-message-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	background: #fff;
	flex-shrink: 0;
	display: block;
}

.sc-chat-bubble {
	background: var(--wp--preset--color--neutral-0);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 4px 16px 16px 16px;
	padding: 12px 14px;
	font-size: 13.5px;
	color: var(--wp--preset--color--ink);
	line-height: 1.55;
	max-width: 250px;
}

.sc-chat-bubble--reply {
	background: var(--wp--preset--color--mint-50);
	border-color: var(--wp--preset--color--mint-100);
}

.sc-chat-sent-row {
	margin-top: 14px;
	margin-bottom: 0;
}

.sc-chat-chips {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sc-chat-chip {
	background: var(--wp--preset--color--neutral-0);
	border: 1.5px solid var(--wp--preset--color--mint-200);
	color: var(--wp--preset--color--mint-700);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 10px 15px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	transition: background var(--wp--custom--duration--micro, 150ms) ease, color var(--wp--custom--duration--micro, 150ms) ease, border-color var(--wp--custom--duration--micro, 150ms) ease;
}

.sc-chat-chip:hover {
	background: var(--wp--preset--color--mint-500);
	color: #fff;
	border-color: var(--wp--preset--color--mint-500);
}

.sc-chat-chip--primary {
	background: var(--wp--preset--color--mint-500);
	border-color: var(--wp--preset--color--mint-500);
	color: #fff;
}

.sc-chat-input-row {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	background: var(--wp--preset--color--neutral-0);
}

.sc-chat-input {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: 13.5px;
	padding: 11px 13px;
	border: 1.5px solid var(--wp--preset--color--neutral-300);
	border-radius: var(--wp--custom--radius--pill, 999px);
	outline: none;
	color: var(--wp--preset--color--ink);
}

.sc-chat-send {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--mint-500);
	border: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Remarketing / exit-intent popup ---------- */

@keyframes sc-popup-in {
	0% { transform: scale(0.94); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

#sc-remarketing-popup {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(15, 27, 31, 0.6);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

#sc-remarketing-popup.is-open {
	display: flex;
}

#sc-remarketing-popup .sc-popup-card {
	background: var(--wp--preset--color--neutral-0);
	border-radius: var(--wp--custom--radius--xl, 20px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	max-width: 420px;
	width: 100%;
	padding: 34px;
	position: relative;
	animation: sc-popup-in 0.18s ease;
}

#sc-remarketing-popup .sc-popup-close {
	position: absolute;
	top: 16px;
	right: 18px;
	color: var(--wp--preset--color--neutral-400);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

#sc-remarketing-popup .sc-popup-eyebrow {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mint-600);
	margin-bottom: 10px;
}

#sc-remarketing-popup .sc-popup-headline {
	font-size: 22px;
	font-weight: 800;
	color: var(--wp--preset--color--ink);
	line-height: 1.25;
	margin: 0 0 10px;
}

#sc-remarketing-popup .sc-popup-headline--center {
	font-size: 19px;
	text-align: center;
}

#sc-remarketing-popup .sc-popup-body {
	font-size: 14.5px;
	color: var(--wp--preset--color--neutral-600);
	line-height: 1.6;
	margin: 0 0 18px;
}

#sc-remarketing-popup .sc-popup-body--center {
	font-size: 14px;
	text-align: center;
	margin-bottom: 0;
}

#sc-remarketing-popup .sc-popup-signup-form {
	margin: 0 0 16px;
}

#sc-remarketing-popup .sc-popup-signup-row {
	display: flex;
	gap: 8px;
}

#sc-remarketing-popup .sc-popup-signup-input {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	border-radius: var(--wp--custom--radius--md, 10px);
	border: 1.5px solid var(--wp--preset--color--neutral-300);
	font-size: 14px;
	font-family: inherit;
	color: var(--wp--preset--color--ink);
}

#sc-remarketing-popup .sc-popup-signup-send {
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 0 18px;
	border-radius: var(--wp--custom--radius--md, 10px);
	border: none;
	cursor: pointer;
}

#sc-remarketing-popup .sc-popup-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

#sc-remarketing-popup .sc-popup-divider span {
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--neutral-200);
}

#sc-remarketing-popup .sc-popup-divider em {
	font-style: normal;
	font-size: 11px;
	color: var(--wp--preset--color--neutral-400);
	font-weight: 700;
}

#sc-remarketing-popup .sc-popup-ctas {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#sc-remarketing-popup .sc-popup-cta {
	font-weight: 700;
	font-size: 14px;
	padding: 12px;
	border-radius: var(--wp--custom--radius--md, 10px);
	text-decoration: none;
	text-align: center;
}

#sc-remarketing-popup .sc-popup-cta--primary {
	background: var(--wp--preset--color--mint-500);
	color: #fff;
}

#sc-remarketing-popup .sc-popup-cta--secondary {
	background: var(--wp--preset--color--neutral-0);
	color: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--neutral-300);
}

#sc-remarketing-popup .sc-popup-success-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--mint-50);
	color: var(--wp--preset--color--mint-600);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

#sc-remarketing-popup .sc-popup-state--success {
	text-align: center;
	padding: 14px 0 4px;
}

#sc-remarketing-popup .sc-popup-hidden-iframe {
	display: none;
	width: 0;
	height: 0;
	border: 0;
}

/* ---------- Responsive images ---------- */

/* Some content images were resized via the block editor's drag-handle,
   which bakes a fixed pixel `width` into the inline style/attribute with no
   fallback -- harmless on desktop but causes horizontal overflow on any
   viewport narrower than that width. max-width doesn't fight the inline
   width (different property), so this simply caps it. */
.wp-block-image.is-resized img {
	max-width: 100%;
	height: auto;
}

/* ---------- Mobile navigation (hamburger + off-canvas menu) ---------- */

.sc-hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	padding: 0;
}

.sc-hamburger-close {
	display: none;
}

.sc-hamburger.is-open .sc-hamburger-icon {
	display: none;
}

.sc-hamburger.is-open .sc-hamburger-close {
	display: flex;
}

/* The off-canvas panel below sits fully off-screen (translateX(100%)) when
   closed, but as a `position:fixed` element with no clipping ancestor its
   off-screen box still counts toward the document's scrollable overflow,
   producing a phantom horizontal scrollbar/swipe region on every page even
   though nothing is visibly wrong. html/body need overflow-x:hidden to
   contain it -- the standard fix for this well-known off-canvas-nav gotcha. */
html,
body {
	overflow-x: hidden;
}

/* Wraps the existing desktop nav-links row + bell/login/CTA row without
   affecting their layout at desktop widths -- `display:contents` makes
   this wrapper transparent to the outer flex row's `justifyContent:
   space-between`, so nothing changes above 782px. Below 782px it becomes
   a real off-canvas panel (see media query). */
.sc-mobile-menu {
	display: contents;
}

.sc-mobile-backdrop {
	display: none;
}

@media (max-width: 782px) {
	.sc-hamburger {
		display: flex;
	}

	.sc-mobile-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(15, 27, 31, 0.5);
		z-index: 90;
	}

	.sc-mobile-backdrop.is-open {
		display: block;
	}

	/* .sc-main-nav's own backdrop-filter (the frosted-glass sticky-nav
	   effect) creates a new containing block for any position:fixed
	   descendant, per spec -- meaning the backdrop/menu below, despite
	   position:fixed, would otherwise be confined to .sc-main-nav's own
	   (much shorter) box instead of the viewport. mobile-nav.js toggles
	   this class on <body> for exactly as long as the menu is open, which
	   removes that trap so position:fixed anchors to the viewport again. */
	body.sc-mobile-menu-open .sc-main-nav {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.sc-mobile-menu {
		display: flex;
		flex-direction: column;
		gap: 4px;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(320px, 85vw);
		background: var(--wp--preset--color--neutral-0);
		box-shadow: var(--wp--custom--shadow--lg);
		z-index: 91;
		padding: 76px 20px 24px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform var(--wp--custom--duration--transition, 400ms) var(--wp--custom--ease--out, ease);
	}

	.sc-mobile-menu.is-open {
		transform: translateX(0);
	}

	/* The two rows that sit side-by-side on desktop (nav links, then
	   bell/login/CTA) stack vertically inside the panel instead. */
	.sc-mobile-menu > div {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		width: 100%;
	}

	.sc-mobile-menu .sc-nav-item {
		width: 100%;
		padding: 0;
	}

	.sc-mobile-menu .sc-nav-link {
		width: 100%;
		justify-content: space-between;
		padding: 12px 4px;
	}

	.sc-mobile-menu .sc-nav-item.is-open .sc-nav-link svg {
		transform: rotate(180deg);
	}

	/* Hover mega-menus become tap-toggled accordions: static position,
	   collapsed via max-height until the parent .sc-nav-item gets
	   .is-open from mobile-nav.js. !important is needed because the
	   desktop `.sc-nav-item:hover .sc-nav-panel` rule (3 classes) is
	   more specific than this 2-class selector and would otherwise win
	   whenever a tap briefly triggers :hover, as it does on some mobile
	   browsers -- reapplying the desktop translateX(-50%) positioning
	   and clipping the panel content off-screen. */
	.sc-mobile-menu .sc-nav-panel {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		padding-top: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--wp--custom--duration--standard, 250ms) ease;
	}

	.sc-mobile-menu .sc-nav-item.is-open .sc-nav-panel {
		max-height: 600px;
	}

	.sc-mobile-menu .sc-nav-panel > div {
		width: 100% !important;
		box-shadow: none !important;
		border: none !important;
		display: block !important;
		grid-template-columns: none !important;
		margin-top: 6px;
	}

	/* Some mega-menus (e.g. "Businesses We Serve") lay their links out via
	   the wrapper's own `display:grid;grid-template-columns:1fr 1fr`, with
	   the <a> tags themselves carrying no explicit display -- so once the
	   wrapper above is forced to display:block, those links fall back to
	   their browser default (inline) instead of stacking one per row.
	   Forcing flex here is a safe no-op for mega-menus whose links already
	   set display:flex or display:block inline (single text-node content
	   renders identically either way). */
	.sc-mobile-menu .sc-nav-panel a.sc-nav-mega {
		display: flex !important;
		width: 100% !important;
		box-sizing: border-box;
	}

	/* The notification bell's hover panel has no touch equivalent and
	   isn't essential for anonymous mobile visitors -- hide the whole
	   control on mobile rather than build a second nested accordion for
	   it inside the already-open menu. !important is needed since the
	   element carries its own inline `style="display:flex"`. */
	.sc-mobile-menu .sc-notif {
		display: none !important;
	}

	.sc-mobile-menu a.sc-nav-link,
	.sc-mobile-menu a[href*="dashboard.sharecardapp.com"] {
		width: 100%;
		text-align: left;
	}
}

/* ---------- Phone refinements ---------- */

@media (max-width: 480px) {
	.sc-utility-bar {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.sc-main-nav {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-card {
		transition-duration: 0ms !important;
	}
	#sc-chat-launcher,
	#sc-chat-panel.is-open,
	#sc-remarketing-popup .sc-popup-card {
		animation: none !important;
	}
	.sc-mobile-menu,
	.sc-mobile-menu .sc-nav-panel {
		transition-duration: 0ms !important;
	}
}