/*
Theme Name: NG15 C&C
Theme URI: https://ng15.co.uk
Description: Default Click and Collect starter child theme, built on Divi. Used as the base for new Click and Collect customer websites.
Author: NG15
Author URI: https://ng15.co.uk
Template: Divi
Version: 1.0.0
Text Domain: ng15-cc
*/

/* Divi doesn't add align-wide theme support, so alignfull blocks (e.g. NG15 C&C Blocks) are
   otherwise capped at Divi's .container width instead of reaching the viewport edge. */
.container .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
}

/* The header (containing the nav's dropdowns) is position:static by default,
   while the Banner block is position:relative (needed for its own internal
   absolutely-positioned slides). Per CSS stacking rules, ANY positioned
   element paints above a static sibling regardless of DOM order or z-index
   set on something inside that static element — so the banner was covering
   the nav's dropdowns no matter how high a z-index the dropdown itself had.
   Making the header positioned too lets it compete in the same stacking
   comparison, so its z-index here actually has something to win against. */
header.et-l--header {
	position: relative;
	z-index: 100;
}

/* Divi's page.php always prints the page title for plain (non-builder) pages, with no
   per-page toggle. The homepage is built entirely from NG15 C&C Blocks, so it doesn't
   need the "Homepage" title repeated above them. */
body.home .entry-title.main_title {
	display: none !important;
}

/* Divi's core CSS adds padding-top:58px to #main-content .container on every plain
   (non-builder) page, which shows as a gap above the homepage's Banner block. */
body.home #main-content .container {
	padding-top: 0 !important;
}

/* Divi's menu module (some variants hardcode white-space:nowrap, others just never
   constrain width — either way top-level items never wrap) forces long category
   names onto one line, limiting how many fit across the nav. Letting them wrap to
   2 lines within a fixed width fits more in the same horizontal space. Targets
   the top-level menu <a> generically (not tied to a specific --with-logo/
   --without-logo/fullwidth variant, since which one applies depends on the header's
   exact settings) via a direct-child selector, so dropdown submenu items — nested
   deeper — are unaffected. */
/* -webkit-box + line-clamp caps text at exactly 2 lines (anything longer gets
   an ellipsis rather than wrapping to a 3rd line). Overrides Divi's own
   display:flex with !important since some variants set it directly on this
   same element.
   Vertical centering is NOT done here via -webkit-box-align — modern Chrome
   now implements -webkit-line-clamp on an ordinary flow-root box rather than
   the old -webkit-box layout mode, so -webkit-box-align is silently a no-op
   and the text just sits at the top. It's centered instead by making the
   parent <li> a flex container below, since <a> has no other siblings in
   normal flow (the dropdown's .sub-menu is position:absolute, so it's
   unaffected either way). */
.et_pb_menu__menu > nav > ul > li > a {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal !important;
	max-width: 130px;
	text-align: center;
	line-height: 1.2;
}

/* Separate from the above — Divi also generates per-page inline CSS using an
   older class structure (.et-menu) that adds its own left/right padding per
   item, independent of the gap on the <ul>. Widened from the original 3px to
   give the vertical divider (below) breathing room from the item text on
   either side of it. */
.et_pb_menu .et-menu > li {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

/* Vertical divider between top-level items — a short centered line rather
   than a full-height border, via an absolutely-positioned pseudo-element so
   its height is independent of the (varying, 1- or 2-line) item height.
   :not(:first-child) skips the leading edge; hidden overflow items (see
   .ng15-cc-nav-overflow-hidden) have display:none, which also suppresses
   their own ::before, so no dangling divider appears at the visible edge.
   display:flex + align-items:center here is also what actually centers the
   <a> (see note above) — the <li> is already stretched to the row's full
   height by the <ul>'s own flex layout, so this centers <a>'s natural
   (1- or 2-line) height within that. */
.et_pb_menu__menu > nav > ul > li {
	position: relative;
	display: flex !important;
	align-items: center !important;
}

.et_pb_menu__menu > nav > ul > li:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY( -50% );
	width: 1px;
	height: 50%;
	background-color: #fff;
}

/* If the menu's alignment is set to "Justified" in Divi, it applies
   justify-content:space-between to the top-level <ul>, which stretches items to
   fill the full row width by inserting extra space between them — since item
   widths vary (short vs long category names), that extra space lands unevenly,
   showing as big gaps next to some items and not others. Forcing a tight,
   uniform gap instead keeps spacing consistent regardless of alignment style,
   and packs items closer together to help more of them fit on one row. */
.et_pb_menu__menu > nav > ul {
	justify-content: flex-start !important;
	gap: 0;
}

/* Desktop dropdown items (any depth): larger, lighter text with tight (2px) vertical
   padding between items. Scoped to .et_pb_menu__menu so the separate mobile
   menu (.et_mobile_menu) is untouched. */
.et_pb_menu__menu .sub-menu li {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.et_pb_menu__menu .sub-menu li a {
	font-size: 15px !important;
	font-weight: 400 !important;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

/* VAT toggle: both price variants are always rendered in the markup (see
   ng15_cc_dual_vat_price_html() in functions.php); this shows only the one
   matching the current body class, which the toggle switch flips. */
body.ng15-vat-inc .ng15-cc-price--exc,
body.ng15-vat-exc .ng15-cc-price--inc {
	display: none;
}

.ng15-cc-vat-label {
	font-size: 0.75em;
	font-weight: normal;
	opacity: 0.7;
}

.ng15-cc-vat-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	user-select: none;
}

.ng15-cc-vat-toggle__switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	flex: 0 0 auto;
}

.ng15-cc-vat-toggle__input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
	z-index: 1;
}

.ng15-cc-vat-toggle__track {
	position: absolute;
	inset: 0;
	background: #ccc;
	border-radius: 10px;
	transition: background 0.2s ease;
}

.ng15-cc-vat-toggle__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s ease;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 );
}

.ng15-cc-vat-toggle__input:checked ~ .ng15-cc-vat-toggle__track {
	background: #db4624;
}

.ng15-cc-vat-toggle__input:checked ~ .ng15-cc-vat-toggle__track .ng15-cc-vat-toggle__thumb {
	transform: translateX( 16px );
}

.ng15-cc-vat-toggle__label {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

body.ng15-vat-inc .ng15-cc-vat-toggle__label--inc,
body.ng15-vat-exc .ng15-cc-vat-toggle__label--exc {
	opacity: 1;
	font-weight: 600;
}

.ng15-cc-cart-summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-size: 14pt !important;
	color: #747272;
}

/* Only the label/total text — the count badge below keeps its own fixed
   white-on-orange styling regardless (it's a notification badge, not text). */
.ng15-cc-cart-summary:hover {
	color: #000000 !important;
}

.ng15-cc-cart-summary__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #db4624;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.ng15-cc-cart-summary__total {
	font-size: 0.9em;
	opacity: 0.8;
}

/* Mobile menu: Divi's .et_mobile_menu shows the full category tree always
   expanded (not a click-to-open accordion), forcing every nested <ul> visible
   with its own !important. With hundreds of real products spread across a
   4-level-deep category tree, that's an unreasonably long scroll on a
   phone — so mobile shows ONLY the 12 top-level categories, no
   subcategories at all. Matches Divi's own selector pattern (2 classes) so
   it wins on specificity rather than relying on source order. */
.et_pb_menu .et_mobile_menu li ul,
.et_pb_fullwidth_menu .et_mobile_menu li ul {
	display: none !important;
}

/* Divi builds .et_mobile_menu by cloning the desktop menu's live DOM — which
   by this point includes the "More" item priority-nav (see
   ng15_cc_priority_nav_script() in functions.php) injects for the desktop
   row. That item is meaningless on mobile (nothing to overflow when the menu
   just scrolls) and, worse, duplicates categories already listed above it in
   the same flat list — so it's hidden outright here rather than just its
   submenu. */
.et_mobile_menu .ng15-cc-more-item {
	display: none !important;
}

/* Priority navigation: top-level items that don't fit on one row get moved
   into a "More" dropdown by JS (see ng15_cc_priority_nav_script() in
   functions.php) instead of wrapping to a second row. Scoped to the exact
   desktop menu path so it never touches Divi's separate .et_mobile_menu. */
.et_pb_menu__menu > nav > ul > li.ng15-cc-nav-overflow-hidden {
	display: none !important;
}

/* Footer text links (Terms & Conditions, Privacy Policy, etc.) go solid
   black on hover. Excludes the social icon links (.et_pb_social_network_link)
   — those are icon glyphs, not text, and already have their own hover
   treatment. */
footer a:not( .et_pb_social_network_link ):hover {
	color: #000000 !important;
}

/* Header "My Account" link — scoped to its specific module rather than a
   blanket "header a", since the header also has the nav menu and other
   links that already have their own distinct styling. */
.et_pb_text_1_tb_header a {
	font-size: 14pt !important;
	color: #747272;
}

.et_pb_text_1_tb_header a:hover {
	color: #000000 !important;
}