/**
 * Blarney theme overrides.
 *
 * Small, intentional adjustments layered on top of the ported main.css. Fixes found
 * during live QA against a WooCommerce install (2026-07-04). main.css itself is left
 * untouched so it can be re-ported from the source design system cleanly.
 */

/* --- Hero -------------------------------------------------------------------
 * In the source, .homepage-bg-img is a mobile-only <picture> fallback with no
 * sizing; the desktop hero is a <video> with object-fit:cover. We omit the 25MB
 * video, so make the poster cover the fullscreen hero instead of sitting tiny and
 * behind the section (z-index:-2). */
.homepage-bg-video .homepage-bg-img {
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* --- WooCommerce prices ------------------------------------------------------
 * WooCommerce wraps prices in nested spans/bdi; keep the currency symbol and the
 * amount on one line inside the product card and price block. */
.price--new,
.price--old {
	display: inline-block;
	white-space: nowrap;
}
.product-price .woocommerce-Price-amount,
.product-price .amount,
.product-price bdi {
	white-space: nowrap;
}
.product-price .woocommerce-Price-amount,
.product-price .woocommerce-Price-currencySymbol {
	display: inline !important;
	float: none !important;
	position: static !important;
	white-space: nowrap !important;
}
.product-price .woocommerce-Price-currencySymbol::after,
.product-price .woocommerce-Price-amount::before {
	content: none !important;
}
.product-price__container .product-price {
	white-space: nowrap;
	text-align: left;
}
/* sale: keep old price beside new */
.product-price--sale .price--old {
	margin-left: 8px;
}

/* --- Header clearance --------------------------------------------------------
 * Give inner-page content breathing room below the header so the WooCommerce
 * breadcrumb / page title don't tuck up against the navbar. */
.shop-archive,
.product-detail-featured,
main.wp-block-group:not(.homepage-2023) {
	padding-top: 40px;
}
.woocommerce-breadcrumb {
	margin-bottom: 20px;
	font-size: 13px;
}

/* --- Header ------------------------------------------------------------------
 * Inner pages get a solid white navbar (the source keys this off a #home wrapper id
 * that a block theme doesn't emit). The homepage keeps the immersive treatment below. */
body:not(.home) .navbar--desktop,
body:not(.home) .topbar {
	background: #fff;
}
.navbar--desktop {
	position: relative;
	z-index: 20;
}

/* Logo: legible size (source caps it very small); dark variant by default. */
.navbar-brand {
	height: auto;
}
.logo-desktop {
	display: block;
	height: auto;
	max-height: 42px;
	width: auto;
}
.logo-desktop--inner {
	display: none;
	height: auto;
	max-height: 42px;
	width: auto;
}

/* --- Homepage: immersive transparent navbar over the hero --------------------
 * Floats over the full-bleed hero with white logo/menu, then flips to a solid white
 * bar with dark text once scrolled (blarney.js toggles .js-scroll on .navbar). */
@media (min-width: 992px) {
	body.home .wp-site-blocks > header.wp-block-template-part {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 50;
	}
	body.home .topbar {
		display: none;
	}
	body.home .navbar--desktop {
		background: transparent;
		transition: background 0.3s ease;
	}
	/* white logo + menu + icons over the hero */
	body.home .navbar--desktop .logo-desktop {
		display: none;
	}
	body.home .navbar--desktop .logo-desktop--inner {
		display: block;
	}
	body.home .navbar--desktop .modern-menu--desktop > li > a,
	body.home .navbar--desktop .modern-menu--desktop > li > a span {
		color: #fff;
	}
	body.home .navbar--desktop .actionbar__list img {
		filter: brightness(0) invert(1);
	}
	body.home .navbar-header__search form input[type="text"] {
		background: rgba(255, 255, 255, 0.18);
		color: #fff;
	}
	body.home .navbar-header__search form input::placeholder {
		color: rgba(255, 255, 255, 0.85);
	}

	/* scrolled: solid white bar, dark content */
	body.home .navbar--desktop.js-scroll {
		background: #fff;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	}
	body.home .navbar--desktop.js-scroll .logo-desktop {
		display: block;
	}
	body.home .navbar--desktop.js-scroll .logo-desktop--inner {
		display: none;
	}
	body.home .navbar--desktop.js-scroll .modern-menu--desktop > li > a,
	body.home .navbar--desktop.js-scroll .modern-menu--desktop > li > a span {
		color: #332f1a;
	}
	body.home .navbar--desktop.js-scroll .actionbar__list img {
		filter: none;
	}
	body.home .navbar--desktop.js-scroll .navbar-header__search form input[type="text"] {
		background: rgba(255, 255, 255, 0.5);
		color: #4f4f4f;
	}
}

/* Bigger, more confident hero heading (closer to the source's weight/scale). */
.homepage-2023 .banner-container--subtle-left h1,
.homepage-2023 .banner-container--subtle-right h1 {
	font-size: 48px;
	line-height: 1.1;
}

/* --- Content pages built from section patterns ------------------------------
 * These use Locomotive smooth-scroll (like the homepage), so the header must be fixed
 * above the scroll container on every smooth page, not just the front page. */
html.has-scroll-smooth .wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
}

/* NOTE: Faithful content pages inject the live page's real <main> markup WITH its own
 * page-scope classes (aran-experience-page, history-page, homepage-2023, …), so main.css
 * styles every section exactly as the live site does. Do NOT add .content-page layout
 * overrides here — they stamp different padding/widths on top and break the pixel match. */

/* --- Scroll-reveal choreography (blarney.js adds .is-visible) ---------------- */
.blarney-reveal {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	will-change: opacity, transform;
}
.blarney-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.blarney-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Primary menu: keep items evenly spaced at every desktop width (source only
 * flexes above a wide breakpoint, so mid widths bunch up). */
@media (min-width: 992px) {
	.modern-menu--desktop {
		display: flex !important;
		justify-content: center;
		gap: 2.5rem;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 15px;
		list-style: none;
	}
	.modern-menu--desktop > li {
		white-space: nowrap;
		position: relative !important;
	}

	/* --- Desktop mega-menu dropdowns ---------------------------------------- */
	.modern-menu--desktop > li.menu-item-has-children > a {
		padding-bottom: 18px; /* hover bridge into the panel */
	}
	.modern-menu--desktop > li.menu-item-has-children > a > span::after {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		vertical-align: middle;
		opacity: 0.65;
	}
	.modern-menu--desktop .sub-menu {
		display: none !important;
		position: absolute;
		top: 100% !important;
		left: 0 !important;
		right: auto !important;
		transform: none !important;
		width: max-content !important;
		min-width: 210px;
		max-width: none !important;
		margin: 0;
		padding: 14px 0;
		background: #fff;
		box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
		list-style: none;
		text-align: left;
		z-index: 100;
	}
	/* right-edge items open leftward so they don't overflow the viewport */
	.modern-menu--desktop > li:nth-last-child(-n + 2) .sub-menu {
		left: auto !important;
		right: 0 !important;
	}
	.modern-menu--desktop > li.menu-item-has-children:hover > .sub-menu {
		display: block !important;
	}
	.modern-menu--desktop .sub-menu > li {
		display: block;
		border: 0;
	}
	.modern-menu--desktop .sub-menu > li > a {
		display: block;
		padding: 9px 26px;
		font-size: 14px;
		letter-spacing: 0.02em;
		text-transform: none;
		color: #332f1a;
		white-space: nowrap;
	}
	.modern-menu--desktop .sub-menu > li > a:hover {
		color: #6d712e;
		background: #f6f6f3;
	}
}

/* --- Mobile off-canvas submenus (always expanded, indented) ------------------ */
.blarney-offcanvas .modern-menu--mobile .sub-menu {
	display: block !important;
	position: static !important;
	transform: none !important;
	width: auto !important;
	max-width: none !important;
	box-shadow: none;
	margin: 0;
	padding: 4px 0 10px 16px;
	list-style: none;
}
.blarney-offcanvas .modern-menu--mobile .sub-menu > li {
	border: 0;
}
.blarney-offcanvas .modern-menu--mobile .sub-menu > li > a {
	padding: 8px 4px;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	color: #4f4f4f;
}

/* Don't clip the mega-menu dropdowns. */
.navbar--desktop,
.navbar--desktop .container,
.navbar--desktop .menu,
.navbar--desktop .menu__container {
	overflow: visible;
}

/* --- Mega-menu panel: pin to the viewport so it can't run off either edge -----
 * The full-width `.modern-menu__submenu` panel is absolutely positioned against
 * `.menu`, which is `position:absolute` with NO explicit `left` — so it floats to a
 * variable flex offset (0/15/30px across widths, and negative on some layouts),
 * dragging the panel off-screen (reported: off the left edge for left-side items).
 * Anchor `.menu` to the header's left edge and clamp the panel to the viewport so it
 * always spans 0→100vw regardless of the flex maths. Desktop only. */
@media (min-width: 992px) {
	.navbar--desktop .menu {
		left: 0 !important;
		right: 0 !important;
		/* On some widths an ancestor sizes wider than the viewport, making `.menu`
		 * (width:100%) resolve to e.g. 1340px at a 1280 viewport and bleeding the
		 * anchored panel off the right edge. Hard-cap to the viewport. */
		width: 100% !important;
		max-width: 100vw !important;
	}
	/* keep the mega panel anchored to full-width `.menu`, never a narrow nav <li> */
	.modern-menu--desktop > li.level-0.haschildren {
		position: static !important;
	}
	.modern-menu--desktop .modern-menu__submenu {
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: 100vw !important;
	}
	/* the promo image column can otherwise force the panel wider than the viewport */
	.modern-menu--desktop .modern-menu__submenu .modern-menu__message,
	.modern-menu--desktop .modern-menu__submenu .modern-menu__message img {
		max-width: 100%;
	}
}

/* --- Newsletter: readable heading over the light landscape ------------------- */
.section--signup .sign-up h3 {
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.section--signup .sign-up h3 span {
	color: #fff;
}

/* --- Mobile off-canvas menu (self-contained) --------------------------------
 * blarney.js toggles .offcanvas__container--open-left and body.is-fixed. */
.blarney-offcanvas {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 320px;
	max-width: 86vw;
	background: #fff;
	z-index: 3000;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	padding: 24px 20px;
	box-shadow: 2px 0 24px rgba(0, 0, 0, 0.18);
}
.blarney-offcanvas.offcanvas__container--open-left {
	transform: translateX(0);
}
.blarney-offcanvas .modern-menu--mobile {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}
.blarney-offcanvas .modern-menu--mobile > li {
	border-bottom: 1px solid #eee;
}
.blarney-offcanvas .modern-menu--mobile > li > a {
	display: block;
	padding: 14px 4px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #332f1a;
	text-decoration: none;
}
.blarney-offcanvas__close {
	background: none;
	border: 0;
	font-size: 28px;
	line-height: 1;
	color: #332f1a;
	cursor: pointer;
	padding: 0;
}
body.is-fixed .blarney-offcanvas-backdrop {
	opacity: 1;
	visibility: visible;
}
.blarney-offcanvas-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 2999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}

/* Mobile navbar shown only below the desktop breakpoint. */
.navbar--mobile-blarney {
	display: none;
}
@media (max-width: 991px) {
	.navbar--desktop,
	.topbar {
		display: none !important;
	}
	.navbar--mobile-blarney {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 16px;
		background: #fff;
		border-bottom: 1px solid #eee;
		position: relative;
		z-index: 20;
	}
	.navbar--mobile-blarney .logo-mobile {
		height: 34px;
		width: auto;
	}
	.navbar--mobile-blarney .hamburger {
		background: none;
		border: 0;
		font-size: 24px;
		line-height: 1;
		color: #6d712e;
		cursor: pointer;
		padding: 4px 8px;
	}
	.navbar--mobile-blarney .menu-cart img {
		height: 24px;
		width: auto;
	}
}
@media (min-width: 992px) {
	.blarney-offcanvas,
	.blarney-offcanvas-backdrop {
		display: none;
	}
}

/* Inner-page header fix: the .navbar--desktop has an explicit height:190px for the
   homepage hero overlay. On block-template pages (shop/category) there is no hero,
   leaving ~84px of empty space above the content. Collapse it to its content there. */
header.wp-block-template-part .navbar--desktop,
.wp-block-template-part .navbar--desktop.navbar--home { height: auto !important; min-height: 0 !important; }

/* Inner-page logo: the desktop header stacks the dark logo + the white (home hero
   overlay) logo absolutely on top of each other. On block-template pages the white
   one covers the dark, so hide it and show the dark Blarney logo. */
header.wp-block-template-part .logo-desktop--inner,
header.wp-block-template-part .logo-desktop--white { display: none !important; }
header.wp-block-template-part .logo-desktop { display: block !important; }