/**
 * Header menu runtime styles.
 *
 * The hover reveal for desktop submenus, the accordion panel transition for the
 * drawer, and the megamenu featured photo are CSS because Tailwind utilities
 * cannot express the parent-hover-reveals-child relationship cleanly. The
 * .curel-group-photo frame itself ships in sliders.css; here we only set the
 * megamenu aspect and the dark-on-light hover.
 */

/* Desktop submenu: reveal on hover/focus of the parent. */
.cur-nav-has-submenu:hover > .cur-submenu,
.cur-nav-has-submenu:focus-within > .cur-submenu {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* Nested submenu: reveal on hover/focus of its list item. */
.cur-submenu-item:hover > .cur-submenu,
.cur-submenu-item:focus-within > .cur-submenu {
	opacity: 1;
	pointer-events: auto;
	transform: translate(0, 0);
}

/* Keep a small hover bridge so the pointer can cross the gap to the panel. */
.cur-nav-has-submenu > .cur-submenu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

/* Megamenu featured photo: the staging card is 4:3, slightly tighter than the
   slider 5:6. The frame visuals (warm bg + logo placeholder) come from
   .curel-group-photo in sliders.css. */
.cur-mega-photo {
	border-radius: 2px;
}

/* No-image candidate: the <img> stays in the DOM (hidden) so the JS can swap it
   in for another pick, so the .curel-group-photo :not(:has(img)) logo placeholder
   never triggers here. Hide the <img> and draw the centred Curel logo ourselves,
   matching the slider placeholder. */
.cur-mega-photo img.hidden {
	display: none;
}
.cur-mega-photo:has(img.hidden)::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/curel-logo.svg") center / 28% no-repeat;
	opacity: 0.12;
	filter: grayscale(1);
	pointer-events: none;
}

/* Megamenu featured image: fit the whole product inside the 4:3 frame, centered
   (object-fit:contain, no cropping). Oxygen's global img rule (height:auto)
   overrides the Tailwind h-full utility, so without this the image flowed at its
   natural height; re-assert the box + contain here (unlayered + !important beats
   Oxygen). */
.cur-mega-photo img:not(.hidden) {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain;
	object-position: center;
}
/* The dedicated megamenu image fills the frame as a cover; the product-image
   fallback keeps the contain above. */
.cur-mega-photo img.cur-mega-cover:not(.hidden) {
	object-fit: cover;
}

/* Main nav links: the whole block is the hover target (not only the text),
   with an animated underline like the staging nav. The invisible ::before
   extends the hit area to fill the nav height and bridge down to the megamenu
   panel, so the pointer reaches it without the menu closing. The ::after is the
   underline (scales in on hover, and stays while the megamenu is open). */
.cur-nav-link {
	position: relative;
}
.cur-nav-link::before {
	content: "";
	position: absolute;
	left: -10px;
	right: -10px;
	top: -22px;
	bottom: -22px;
}
.cur-nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	pointer-events: none;
}
.cur-nav-link:hover::after,
.cur-nav-has-submenu:hover .cur-nav-link::after,
[data-curel-mega-trigger][data-active="true"]::after {
	transform: scaleX(1);
}

/* Secondary "see all" nav link ("Ver todos os produtos"): smaller and in a lighter
   tone than the main nav items. The Oxygen menu element does not pass the WP menu
   item's CSS-class field through to the output, so we also target the shop link by
   href (it is the only nav link pointing at /loja/, in any language). The cur-nav-all
   class selectors keep it reusable if the class is applied directly in the builder.
   All selectors require .cur-nav-link, so the burger-menu copy (own classes) is
   never affected. */
.cur-nav-link.cur-nav-all,
.cur-nav-all .cur-nav-link,
.cur-nav-link[href$="/loja/"] {
	font-size: 12px;
	font-weight: 400;
	color: rgba( 10, 10, 10, 0.55 );
}

/* Current page: the nav / megamenu link that points at the page being viewed
   turns brand red, as a selected state. initNavCurrent (menus.js) adds
   .cur-link-current on an exact path match. !important so it wins over the
   inherited link colour (incl. WooCommerce's '.woocommerce a' on category pages)
   and the muted "see all" rule. */
.cur-nav-link.cur-link-current,
.cur-nav-link.cur-link-current:hover,
.cur-mega-panel a.cur-link-current,
.cur-mega-panel a.cur-link-current:hover {
	color: #E01E26 !important;
}

/* Catalog mode (Curel -> Geral): hide every price, the cart and the account/
   login. The body gets .curel-catalog (see includes/catalog-mode.php); prices are
   already emptied server-side, this removes their now-empty boxes, the header cart
   + account icons and the PDP sticky buy bar. The main add-to-cart row is gated in
   PHP and the cart/checkout/account pages are redirected to the shop. */
body.curel-catalog .cur-pdp-price,
body.curel-catalog [data-curel-pdp-price],
body.curel-catalog .cur-price,
body.curel-catalog .cur-account,
body.curel-catalog .cur-cart,
body.curel-catalog .cur-pdp-stickybar,
body.curel-catalog [data-curel-facet="price"],
body.curel-catalog a[href*="/minha-conta"],
body.curel-catalog a[href*="/carrinho"],
body.curel-catalog a[href*="/finalizar-compra"],
body.curel-catalog .cur-footer-payments-label,
body.curel-catalog .cur-footer-payments-list {
	display: none !important;
}

/* Footer funding bar (the PRR/EU SVG). Oxygen's .oxy-image forces
   max-inline-size:100% and Winden does not compile an arbitrary max-w-[..], so the
   bar rendered full width. Cap it here (!important to beat .oxy-image); height:auto
   keeps its ~10:1 aspect. It is the only <img> in the payments row. Change 400px
   to resize. */
.cur-footer-payments img {
	max-width: 400px !important;
	max-inline-size: 400px !important;
	height: auto !important;
}

/* Footer payments alignment: from the breakpoint where the row turns horizontal
   (Tailwind sm, the funding bar left / payments right), align the "Pagamentos
   aceites" label and the icon row to the right edge. Stacked mobile stays natural
   (left). */
@media (min-width: 640px) {
	.cur-footer-payments-label {
		text-align: right;
	}
	.cur-footer-payments-list {
		justify-content: flex-end;
	}
}

/* Drawer header logo (the Curel SVG, like the staging burger menu). */
.cur-drawer-logo {
	display: block;
	height: 22px;
	width: auto;
}

/* Root-level drawer accordion toggle (e.g. Profissional) is a <button>, which
   Oxygen forces to the mono font + a 16px reset, making it smaller than the
   sibling root links (Linhas, Canivetes, ...). Re-assert the root link look.
   Deeper submenu toggles are left at their own (smaller) size. */
.cur-drawer-nav > .cur-drawer-acc > [data-curel-accordion-toggle] {
	font-family: var(--font-sans) !important;
	font-size: 1.5rem !important;
	line-height: 2rem !important;
}

/* [curel_search] header button: desktop only. Below this the search lives inside
   the drawer (burger), matching the staging header. The drawer's own search row
   is a different element, so it is unaffected.
   Tracks the lg: breakpoint the header switches on (menus.php); at md the desktop
   nav does not fit an iPad mini in portrait, and a half-switched header would show
   this icon next to a burger that already carries search inside it. */
.cur-search {
	display: none;
}
@media (min-width: 1024px) {
	.cur-search {
		display: inline-flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cur-nav-link::after { transition: none; }
	.cur-submenu,
	.cur-drawer-acc-panel,
	.cur-mega-panel {
		transition: none !important;
	}
}

/* Smart sticky header (the data-hidden toggle is wired in menus.js): hide on
   scroll down, show on scroll up. Re-asserted here so the slide transform does
   not depend on the arbitrary Tailwind data-variant being compiled by Winden. */
#siteHeader,
.cur-site-header {
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;
}
#siteHeader[data-hidden="true"],
.cur-site-header[data-hidden="true"] {
	transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
	#siteHeader,
	.cur-site-header {
		transition: none;
	}
}

/* Language switcher trigger is a <button>, which Oxygen resets to the default
   cursor; show the pointer (hand) like the menu links. */
[data-lang-trigger] {
	cursor: pointer;
}

/* Inline language switcher (burger + footer): its own inline-flex so the gap
   between PT/EN/ES survives Oxygen wrapping the shortcode output in a single
   .oxy-shortcode flex item (which otherwise swallows the container's gap). */
.cur-lang-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}

/* Header dropdown options sit on the dark bg-fg menu, but inherit the page
   header's text colour, which is dark on the archive/product templates, and the
   WooCommerce '.woocommerce a' colour wins there too (so the names render black
   on black). The menu is always dark, so force a light colour with !important to
   beat the WooCommerce link rule on every page. */
.cur-lang-menu a,
.cur-lang-menu a:link,
.cur-lang-menu a:visited {
	color: rgba(255, 255, 255, 0.8) !important;
}
.cur-lang-menu a:hover {
	color: #fff !important;
}

/* Footer language switcher (.cur-lang-switch--footer, [curel_lang_switcher style="footer"]): the
   same dropdown as the header, but a light surface opening UPWARD, in the footer's tone. Position
   the menu above the trigger and give it the light background/border; and override the dark-menu
   colour above (it is !important) so the option names are the dark footer text, not white. */
.cur-lang-switch--footer .cur-lang-menu {
	bottom: 100%;
	margin-bottom: 0.5rem;
	background: var( --color-bg, #fff );
	border: 1px solid var( --color-hair, #e5e5e5 );
}
.cur-lang-switch--footer .cur-lang-menu a,
.cur-lang-switch--footer .cur-lang-menu a:link,
.cur-lang-switch--footer .cur-lang-menu a:visited {
	color: var( --color-fg, #0a0a0a ) !important;
}
.cur-lang-switch--footer .cur-lang-menu a:hover {
	color: var( --color-fg, #0a0a0a ) !important;
	background-color: rgba( 10, 10, 10, 0.05 );
}

/* Keep the footer language trigger vertically centred in the meta row. The trigger is a ~14px
   inline-flex button (the globe sets the height), which otherwise baseline-aligns to the top of
   the 18px line box that the wrapper + Oxygen's block .oxy-shortcode create — so it reads as
   top-aligned even though .cur-footer-meta centres the block. Flatten the wrappers to centred
   inline-flex boxes so the trigger sits on the row's centre line. */
.cur-footer-lang,
.cur-footer-lang .oxy-shortcode,
.cur-lang-switch--footer {
	display: inline-flex;
	align-items: center;
}

/* Footer nav-column links (.cur-footer-menu) and copy links (.cur-footer-legal): muted by default,
   darkening to the foreground on hover, matching the social / payments / language-switcher rows.
   This inverts the Oxygen default (darker base that fades out via hover:opacity-55). !important so
   it also beats the '.woocommerce a' link colour on the archive/product templates. */
.cur-footer-menu a,
.cur-footer-menu a:link,
.cur-footer-menu a:visited,
.cur-footer-legal a,
.cur-footer-legal a:link,
.cur-footer-legal a:visited {
	color: var( --color-muted, #9a9a9a ) !important;
	opacity: 1 !important;
	transition: color 0.2s ease;
}
.cur-footer-menu a:hover,
.cur-footer-legal a:hover {
	color: var( --color-fg, #0a0a0a ) !important;
	opacity: 1 !important;
}

/* Footer legal row: a middle-dot between the copyright / privacy / terms items, on sm+ only (the
   row layout). Hidden on mobile, where .cur-footer-legal stacks the items (flex-col). The dot is
   enlarged (font-size) with line-height:0 so it reads as a bullet without growing the line box. */
@media ( min-width: 640px ) {
	.cur-footer-legal > * + *::before {
		content: "\00B7";
		display: inline-block;
		margin-left: -0.55rem;
		margin-right: 0.5rem;
		font-size: 2em;
		line-height: 0;
		vertical-align: -0.06em;
		color: var( --color-muted, #9a9a9a );
	}

	/* Footer meta row: a thin vertical bar between the social icons and the language block
	   (.cur-footer-meta has exactly those two children). Hidden on mobile, where they stack. */
	.cur-footer-meta > * + *::before {
		content: "|";
		display: inline-block;
		margin-left: -1rem;
		margin-right: 0.5rem;
		color: var( --color-muted, #9a9a9a );
		opacity: 0.6;
	}
}

/* Same fix for the topbar secondary menu ([curel_menu menu="secundario"
   style="topbar"]): it sits on the dark bg-fg topbar, but on the archive/product
   (WooCommerce) templates '.woocommerce a' repaints its links dark, so they go
   black-on-black and look like the menu vanished. Force the light topbar colour. */
.cur-topbar-menu a,
.cur-topbar-menu a:link,
.cur-topbar-menu a:visited {
	color: rgba(255, 255, 255, 0.7) !important;
}
.cur-topbar-menu a:hover {
	color: #fff !important;
}

/* Search overlay input: a borderless line input. A form reset (Oxygen / Woo /
   forms plugin) adds a blue border + focus ring to inputs; strip it so the big
   search field stays clean like the staging (the caret signals focus). */
[data-curel-search-input],
[data-curel-search-input]:focus,
[data-curel-search-input]:focus-visible {
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Search autocomplete (Nuvem Search addon): give each suggestion thumbnail the
   same warm frame as the product cards. The addon already contains + centers the
   (tall) product image; here we set the warm tint and, when a product has no
   image, the faded Curel logo placeholder — exactly like .curel-group-photo. */
#curel-search-panel .nuvem-ac-thumb {
	--nuvem-ac-thumb-bg: #F4F2EE;
}
#curel-search-panel .nuvem-ac-thumb.is-empty::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/curel-logo.svg") center / 58% no-repeat;
	opacity: 0.12;
	filter: grayscale(1);
	pointer-events: none;
}

/* Header logo hover: move the INNER logo, not the <a> itself, so the link's hit
   area stays put and the hover no longer flickers (the <a> sliding up used to move
   out from under the cursor, dropping :hover). The reveal pseudo-element stays on
   the stationary .cur-logo. The transform:none is belt-and-suspenders in case the
   Tailwind hover:-translate-y class lingers on the <a>. */
.cur-logo:hover,
.cur-logo:focus-visible {
	transform: none !important;
}
.cur-logo .oxy-html-code {
	transition: transform 0.3s ease;
}
.cur-logo:hover .oxy-html-code,
.cur-logo:focus-visible .oxy-html-code {
	transform: translateY(-9px);
}
/* The badge (.cur-logo-badge) is absolute + top-full and lifts WITH the logo so it
   accompanies it. It uses translateY for its own reveal (group-hover/logo animates
   -translate-y-1 -> translate-y-0), so override the revealed position to -9px to
   match the logo lift; !important beats the Tailwind group-hover/logo:translate-y-0.
   The opacity fade is left untouched, and its own transition animates the move. */
.cur-logo:hover .cur-logo-badge,
.cur-logo:focus-visible .cur-logo-badge {
	transform: translateY(-9px) !important;
}