/**
 * Promo banner [promo_banner], promo variant: one stylesheet for every November phase.
 *
 * Loaded only where the November banner renders (ic-nov-promo-banner.php). Every rule is scoped
 * to the November banner's link, .ic-nov-promo-banner--promo, so it never touches the base banner.
 *
 * Contents:
 *   1.0 Shared - every phase
 *   2.0 Phase-specific - one or a few phases only
 */


/**
 * 1.0 Shared - every phase
 *
 * The banner sits in an Elementor widget whose custom CSS targets the same classes. Elementor
 * turns its "selector" into three classes (.elementor-{page} .elementor-element
 * .elementor-element-{id}), so every rule here starts with body + three classes
 * (body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo): one element more
 * than Elementor's rule for the same element, so ours wins. Where Elementor uses !important, the
 * rule here does too.
 */

body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo div.desktop-promo-banner {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	width: 100%;
	min-height: 240px;
	margin: 32px 0;
	padding: 40px !important;
	border-radius: 16px;
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: cover;
}

body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .promo-content-wrapper {
	z-index: 1;
	width: 100%;
}

body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .desktop-promo-banner p,
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .desktop-promo-banner h2 {
	z-index: 10000;
	text-transform: capitalize;
}

body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .desktop-promo-banner h2 {
	margin-top: 0 !important;
	margin-bottom: 16px;
	color: var(--nd-theme-white);
}

/* 20px at a 320px screen, growing to 36px at 1200px; !important beats Elementor's !important size. */
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .desktop-promo-banner .promo-content-wrapper h2.clamp-text-41-49 {
	padding-right: 0 !important;
	font-size: clamp(20px, 1.8vw + 14.25px, 36px) !important;
	line-height: normal !important;
}

/*
 * Description. line-height 1.5 replaces Elementor's fixed 15.385px (20px on .first-p-child),
 * which squeezed the 16px text; the .first-p-child / .second-p-child rule below repeats it
 * because Elementor's rule for those has one class more than this one.
 */
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .desktop-promo-banner p {
	max-width: 430px;
	color: var(--nd-theme-white);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .desktop-promo-banner p.first-p-child,
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .desktop-promo-banner p.second-p-child {
	margin-bottom: 16px;
	line-height: 1.5;
}

/* Button left-aligned under the text (Elementor stacks this wrapper as a column). */
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .view-deals-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

/*
 * Yellow pill button with dark text, as in the mega-menu banner, always on one line: Elementor's
 * fixed height (36px) and mobile max-width (160px) are lifted so "Shop All Products" never wraps.
 * !important on the colour beats Elementor's color: #fff !important and the theme's global
 * .new__design-btn colour.
 */
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .desktop-promo-banner .promo-content-wrapper span.new__design-btn {
	width: auto;
	max-width: none;
	height: auto;
	padding: 10px 22px;
	border-radius: 100px;
	background: #f9ad32;
	color: var(--nd-theme-dark) !important;
	font-family: var(--nd-secondary-font);
	font-size: clamp(14px, 0.23vw + 13.27px, 16px) !important; /* 14px at 320px, 16px at 1200px. */
	font-weight: 700;
	white-space: nowrap;
	text-transform: uppercase;
}


@media (max-width: 576px) {
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo div.desktop-promo-banner {
		padding: 40px 16px !important;
	}

	/* !important: Elementor sets the heading's margins with !important at this width. */
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .desktop-promo-banner h2 {
		margin-bottom: 16px !important;
	}

	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .desktop-promo-banner p:nth-child(2) {
		margin-bottom: 16px;
	}
}

@media (max-width: 374px) {
	/* Dark overlay keeps the white text readable on the narrowest screens. */
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo div.desktop-promo-banner::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 16px;
		background: var(--nd-theme-black);
		opacity: 0.2;
	}
}


/**
 * 2.0 Phase-specific - one or a few phases only
 *
 * The banner link carries the running phase as a modifier class: ic-nov-promo-banner--price-drop,
 * --veterans-stock-up, --soda-stock-up, --b2g1-early-bf, --early-bf, --black-friday,
 * --cyber-week (keys of IC_NOV_PHASES in bootstrap.php). Same pattern as the homepage hero
 * (ic-nov-hero--{phase}).
 *
 * How to use: copy the shared rule's selector and swap --promo for the phase, e.g.
 *   shared: body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--promo .desktop-promo-banner h2 { ... }
 *   phase:  body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--veterans-stock-up .desktop-promo-banner h2 { ... }
 * Same strength as the shared rule and later in the file, so the phase rule wins (and it beats
 * the Elementor widget CSS). Add !important only where the shared rule itself uses it.
 */

/*
 * Phase 2b - Soda Stock-Up (Nov 12-15) and phase 5 - Cyber Week (Nov 30 - Dec 4) only: black
 * heading and text. Elementor / Customizer CSS (stored in the database, not in the theme files)
 * still turned them white, so body + five classes and !important make sure black wins.
 */
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up .desktop-promo-banner .promo-content-wrapper h2,
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up .desktop-promo-banner .promo-content-wrapper p,
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--cyber-week .desktop-promo-banner .promo-content-wrapper h2,
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--cyber-week .desktop-promo-banner .promo-content-wrapper p {
	color: var(--nd-theme-black) !important;
}

/*
 * Phase 2 - Veterans Day, 400px and below: the description runs as one paragraph, without its
 * line break, and a 30% dark overlay keeps the white text readable.
 */
@media (max-width: 400px) {
	.ic-nov-promo-banner--veterans-stock-up .desktop-promo-banner p.first-p-child br {
		display: none;
	}

	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--veterans-stock-up div.desktop-promo-banner::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 16px;
		background: var(--nd-theme-black);
		opacity: 0.3;
	}
}

/* Phase 2b - Soda Stock-Up, 370px and below: the heading drops its line break after "100mg". */
@media (max-width: 370px) {
	.ic-nov-promo-banner--soda-stock-up .desktop-promo-banner h2 br {
		display: none;
	}
}

/*
 * Phase 2b - Soda Stock-Up: image anchored right, and centred at 1200px and below. Same strength
 * as the shared box rule (bottom), later in the file.
 */
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up div.desktop-promo-banner {
	background-position: right;
}

@media (max-width: 1200px) {
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up div.desktop-promo-banner {
		background-position: center;
	}
}

/*
 * Phase 2b - Soda Stock-Up: description 14px at a 320px screen, growing to 16px at 1200px.
 * !important: the homepage Elementor CSS (stored in the database) sets its size with !important.
 */
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up .desktop-promo-banner p.first-p-child {
	font-size: clamp(14px, 0.23vw + 13.27px, 16px) !important;
}

/*
 * Phase 2b - Soda Stock-Up, 576px and below: no dark overlay, and the heading is pulled up 20px.
 * The heading needs body + four classes and !important: the shared rule sets its
 * margin-top: 0 !important.
 *
 * Besides the shared black overlay (374px, this file), the homepage Elementor CSS (page 367923,
 * stored in the database) draws its own dark overlay on .desktop-promo-banner with four-class
 * selectors, which beat a two-class phase rule. body + four classes + div outranks it, and
 * !important covers an Elementor rule that uses it; both pseudo-elements are covered.
 */
@media (max-width: 576px) {
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up div.desktop-promo-banner::before,
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up div.desktop-promo-banner::after {
		display: none !important;
	}

	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up .desktop-promo-banner h2 {
		margin-top: -20px !important;
	}
}

/*
 * Phase 2b - Soda Stock-Up, 460px and below: image anchored to the top, and the description runs
 * as one paragraph (no line break) in a narrower 236px column with 40px below it.
 */
@media (max-width: 460px) {
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up div.desktop-promo-banner {
		background-position: top !important;
	}

	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up .desktop-promo-banner p.first-p-child {
		max-width: 236px;
		margin-bottom: 40px;
	}

	.ic-nov-promo-banner--soda-stock-up .desktop-promo-banner p.first-p-child br {
		display: none;
	}
}

/* Phase 2b - Soda Stock-Up, 430px and below: 32px below the description (instead of 40px). */
@media (max-width: 430px) {
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up .desktop-promo-banner p.first-p-child {
		margin-bottom: 32px;
	}
}

/*
 * Phase 2b - Soda Stock-Up, 390px and below: heading pulled up 36px with 6px below it, and a
 * 28px line height. Margins: same strength as the 576px heading rule and later in the file.
 * Line height: one class more than the shared heading size rule (line-height: normal !important).
 */
@media (max-width: 390px) {
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up .desktop-promo-banner h2 {
		margin-top: -36px !important;
		margin-bottom: 6px !important;
	}

	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--soda-stock-up .desktop-promo-banner .promo-content-wrapper h2.clamp-text-41-49 {
		line-height: 28px !important;
	}
}

/*
 * Phase 3 - B2G1 and 3b - Black Friday Early, 576px and below: 20% black overlay behind the text
 * (the content wrapper sits at z-index 1). body + four classes + div and !important outrank the
 * homepage Elementor CSS (stored in the database), which also draws on this pseudo-element.
 */
@media (max-width: 576px) {
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--b2g1-early-bf div.desktop-promo-banner::after,
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--early-bf div.desktop-promo-banner::after {
		display: block !important;
		content: "" !important;
		position: absolute;
		inset: 0;
		border-radius: 16px;
		background: var(--nd-theme-black) !important;
		opacity: 0.2 !important;
	}
}

/*
 * Phase 4 - Black Friday: no overlay at any width. Covers the shared 374px black overlay (this
 * file) and the homepage Elementor CSS overlay (stored in the database, four-class selectors):
 * body + four classes + div and !important outrank both, on both pseudo-elements.
 */
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--black-friday div.desktop-promo-banner::before,
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--black-friday div.desktop-promo-banner::after {
	display: none !important;
}

/*
 * Phase 5 - Cyber Week: no overlay at any width. Covers the shared 374px black overlay (this
 * file) and the homepage Elementor CSS overlay (stored in the database), whichever banner element
 * it is drawn on: the link, the image box or the content wrapper, both pseudo-elements each.
 * body + four classes and !important outrank Elementor's four-class selectors.
 */
body a.promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--cyber-week::before,
body a.promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--cyber-week::after,
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--cyber-week div.desktop-promo-banner::before,
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--cyber-week div.desktop-promo-banner::after,
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--cyber-week .desktop-promo-banner div.promo-content-wrapper::before,
body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--cyber-week .desktop-promo-banner div.promo-content-wrapper::after {
	display: none !important;
}

/* Phase 5 - Cyber Week, 430px to 576px: the description wraps in a narrower 200px column. */
@media (min-width: 430px) and (max-width: 576px) {
	.ic-nov-promo-banner--cyber-week .desktop-promo-banner p.first-p-child {
		max-width: 200px !important;
	}
}

/*
 * Phase 5 - Cyber Week, 429px and below: heading pulled up 22px with 8px below it, and the
 * description in a 240px column. The heading needs body + four classes and !important: the
 * shared rule sets its margin-top: 0 !important.
 */
@media (max-width: 429px) {
	body .promo-banner-link.ic-nov-promo-banner.ic-nov-promo-banner--cyber-week .desktop-promo-banner h2 {
		margin-top: -22px !important;
		margin-bottom: 8px !important;
	}

	.ic-nov-promo-banner--cyber-week .desktop-promo-banner p.first-p-child {
		max-width: 240px !important;
	}
}