/*
Theme Name:   Cycle Vita Low PRO
Theme URI:    https://cyclevitalow.pro
Description:  Divi child theme for Cycle Vita Low PRO. Holds all site-specific CSS -- previously kept in the Customizer's Additional CSS field -- so it is versioned and deploys with the rest of the codebase.
Author:       Think Digitally
Author URI:   https://thinkdigitally.com
Template:     Divi
Version:      1.3.8
Text Domain:  divi-cyclevita
*/

/* ==========================================================================
   Site CSS.

   This file replaces the Customizer > Additional CSS field. Edit it here and
   deploy; do not paste rules back into the Customizer, or the two sources
   will drift and fight each other -- that is the situation this theme was
   created to end. functions.php enqueues it last in the head, which is where
   the Customizer CSS used to load, so the cascade below is unchanged.
   ========================================================================== */

.darkLink {
	color:#ffffff;
}
.darkLink:hover {
	color:#fbbb00;
}
.darkLink:active {
	color:rgba(251, 187, 0, 0.5);
}

.lightLink {
	color:#000000;
}
.lightLink:hover {
	color:#8f003b;
}
.lightLink:active {
	color:#ef005f;
}



.et_pb_toggle_title:before {
	font-size:22px;
}

.et_pb_toggle_content {padding-top: 10px!important;
}
/* ---------------- Toggle title hover ----------------
   The hover colour has to follow whatever the toggle sits on: the magenta is
   effectively unreadable on the dark sections (e.g. /app/), where Divi already
   renders the resting title white.

   This cannot be detected automatically. CSS has no way to test how dark a
   background is, and Divi 5 gives the toggle no light/dark class and no custom
   property to read -- it writes the resting colour straight into a per-module
   rule. So dark areas are marked once by hand with a "cv-dark" class
   (Section / Row / Module > Advanced > CSS Class) and everything else keeps
   the magenta, which means every existing page is unaffected.

   The heading tag is deliberately left out of the selector: Divi renders the
   title as an h5 today, but the class is the part that is stable. */
:root {
	--cv-toggle-hover:      #8f003b;  /* on light backgrounds */
	--cv-toggle-hover-dark: #fbbb00;  /* on dark backgrounds  */
}

/* Only while the toggle is closed: an open toggle (Divi adds
   .et_pb_toggle_open) keeps its resting title colour under the pointer. */
#main-content .et_pb_toggle:not(.et_pb_toggle_open):hover .et_pb_toggle_title,
#main-content .et_pb_toggle:not(.et_pb_toggle_open):hover .et_pb_toggle_title:before {
	color: var(--cv-toggle-hover) !important;
}

/* Anything inside a marked dark area, or a toggle carrying the class itself.
   et_pb_bg_layout_dark is Divi's own legacy marker, honoured here so anything
   still using it works without being re-tagged. */
#main-content .cv-dark .et_pb_toggle:not(.et_pb_toggle_open):hover .et_pb_toggle_title,
#main-content .cv-dark .et_pb_toggle:not(.et_pb_toggle_open):hover .et_pb_toggle_title:before,
#main-content .et_pb_bg_layout_dark .et_pb_toggle:not(.et_pb_toggle_open):hover .et_pb_toggle_title,
#main-content .et_pb_bg_layout_dark .et_pb_toggle:not(.et_pb_toggle_open):hover .et_pb_toggle_title:before,
#main-content .et_pb_toggle.cv-dark:not(.et_pb_toggle_open):hover .et_pb_toggle_title,
#main-content .et_pb_toggle.cv-dark:not(.et_pb_toggle_open):hover .et_pb_toggle_title:before {
	color: var(--cv-toggle-hover-dark) !important;
}
/* ---------------- Global buttons ---------------- */
body .et_pb_button {
  padding: .7em 2em .7em 1.5em!important;
	padding-right: 50px !important;
}

/* Icon badge: the circle is a background-COLOUR, the arrow is a background-IMAGE.
   Keeping them as two separate layers means the circle can change colour per
   state without needing a new image. The arrow is an inline SVG rather than an
   uploaded PNG so there is no media-library URL to break when moving between
   environments, and it stays sharp on retina screens. */
body .et_pb_button:after,
body .et_pb_button:hover:after {
	content: "" !important;
	display: block !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 100px !important;
	right: 5px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	background-color: #FBBB00 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14'/%3E%3Cpath d='M12 5.5 18.5 12 12 18.5'/%3E%3C/svg%3E") !important;
	background-size: 21px 21px !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* Hover */
body .et_pb_button:hover {
	background-color: #F5D165 !important;
}
body .et_pb_button:hover:after {
	background-color: #FFFFFF !important;
}

/* Click / active */
body .et_pb_button:active {
	background-color: #F1BE40 !important;
}
body .et_pb_button:active:after {
	background-color: #FFFFFF !important;
}

header#main-header {
    background: linear-gradient(180deg,rgba(0, 18, 30, 1) 0%, rgba(0, 18, 30, 1) 75%, rgba(0, 18, 30, 0) 75%, rgba(0, 18, 30, 0) 100%);
}

.container.clearfix.et_menu_container {
    background: #fff;
    border-radius: 100px;
}

header#main-header:before {
    content: "This page is intended for people living in the US";
    width: 80%;
    max-width: 1370px;
    margin: 0 auto;
    position: relative;
    display: block;
    padding: 10px 0px;
    color: #fff;
    font-size: 12px;
    text-align: left;
	box-sizing: border-box;
}

header#main-header.us:before {
    content: "This page is intended for people living in the US";
    width: 80%;
    max-width: 1370px;
    margin: 0 auto;
    position: relative;
    display: block;
    padding: 10px 0px;
    color: #fff;
    font-size: 12px;
    text-align: left;
		box-sizing: border-box;
}

header#main-header.uk:before {
    content: "This page is intended for people living in the UK";
    width: 80%;
    max-width: 1370px;
    margin: 0 auto;
    position: relative;
    display: block;
    padding: 10px 0px;
    color: #fff;
    font-size: 12px;
    text-align: left;
	box-sizing: border-box;
}

#top-menu li a { color: #000 !important; }

/* ---------------- Nav pills (Download / Sign up) ----------------
   Same two-layer icon as the page buttons: the disc is a background-COLOUR
   and the arrow a background-IMAGE, so each recolours independently. This
   replaces the old ETmodules glyph (U+E03C), where a single `color` drove
   both disc and arrow -- which is why the arrow could only ever be negative
   space rather than the black arrow in the design.

   Tune colours and sizing in the custom properties below, not in the rules. */
:root {
	--cv-nav-h: 92px;            /* height of the white nav bar */
	--cv-nav-active: #8F003B;    /* current-page link colour */
	--cv-nav-hover:  #E5005F;    /* link + underline on hover */
	--cv-nav-pill-h: 44px;
	--cv-nav-disc: 36px;

	/* gap between the last pill and the right edge of the white nav.
	   For this to match the gap above/below the pills, it should equal
	   (nav height - pill height) / 2 -- i.e. 24px at a 92px nav and 44px pill. */
	--cv-nav-edge-gap: 20px;

	--cv-yellow-rest:  #F9E5A2;
	--cv-yellow-hover: #F5D165;
	--cv-yellow-click: #F1BE40;
	--cv-yellow-disc:  #FBBB00;

	/* teal hover/click are estimated from the design screenshot -- swap in the
	   exact brand values when available; nothing else needs to change */
	--cv-teal-rest:  #B4E1DF;
	--cv-teal-hover: #7FD3CD;
	--cv-teal-click: #35BDB3;
	--cv-teal-disc:  #00B4AA;

	--cv-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14'/%3E%3Cpath d='M12 5.5 18.5 12 12 18.5'/%3E%3C/svg%3E");
}

#top-menu > li:last-child,
#top-menu > li:nth-last-child(2) {
	border-radius: 100px !important;
	margin: 0 4px !important;
	padding-right: 0 !important;
	position: relative !important;
}

/* the last pill's own margin is dropped so the gap to the nav edge is
   controlled solely by --cv-nav-edge-gap (applied as nav padding-right) */
#top-menu > li:last-child {
	margin-right: 0 !important;
}

/* extra breathing room between the text links and the first pill */
#top-menu > li:nth-last-child(2) {
	background: var(--cv-teal-rest) !important;
	margin-left: 16px !important;
}

#top-menu > li:last-child {
	background: var(--cv-yellow-rest) !important;
}

/* the link sets the pill height; right padding clears the disc */
.et_header_style_left #et-top-navigation nav > ul > li:last-child a,
.et_header_style_left #et-top-navigation nav > ul > li:nth-last-child(2) a,
#top-menu > li:last-child a,
#top-menu > li:nth-last-child(2) a {
	color: #000 !important;
	text-align: center !important;
	display: block !important;
	padding: 0 calc(var(--cv-nav-disc) + 14px) 0 24px !important;
	height: var(--cv-nav-pill-h) !important;
	line-height: var(--cv-nav-pill-h) !important;
}

#top-menu > li:last-child:after,
#top-menu > li:nth-last-child(2):after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	width: var(--cv-nav-disc) !important;
	height: var(--cv-nav-disc) !important;
	border-radius: 100px !important;
	right: 4px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 0 !important;
	background-image: var(--cv-arrow) !important;
	background-size: 19px 19px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

#top-menu > li:nth-last-child(2):after { background-color: var(--cv-teal-disc) !important; }
#top-menu > li:last-child:after       { background-color: var(--cv-yellow-disc) !important; }

/* Hover */
#top-menu > li:nth-last-child(2):hover { background: var(--cv-teal-hover) !important; }
#top-menu > li:last-child:hover        { background: var(--cv-yellow-hover) !important; }

/* Keep the pill labels solid black on hover. The colour was never the problem
   -- Divi fades every nav link with
   `#top-menu-nav > ul > li > a:hover { opacity: .7; transition: .4s }`, which
   washed the black out to grey over the coloured pill. Resetting opacity is
   what actually fixes it; the colour is restated only so the intent is obvious.
   No !important needed on opacity: this selector is (1,2,2) against Divi's
   (1,1,3), so it already wins. */
#top-menu > li:nth-last-child(2):hover > a,
#top-menu > li:last-child:hover > a {
	color: #000 !important;
	opacity: 1;
}

/* Click / active */
#top-menu > li:nth-last-child(2):active { background: var(--cv-teal-click) !important; }
#top-menu > li:last-child:active        { background: var(--cv-yellow-click) !important; }

/* disc inverts to white on both hover and click */
#top-menu > li:nth-last-child(2):hover:after,
#top-menu > li:last-child:hover:after,
#top-menu > li:nth-last-child(2):active:after,
#top-menu > li:last-child:active:after {
	background-color: #FFFFFF !important;
}

.et_header_style_left #et-top-navigation {
    padding-top: 13px;
    padding-right: 13px;
}

/* Fix: Prevent header movement on scroll */
header#main-header,
header#main-header.et-fixed-header {
    padding: 0 !important;
    transition: none !important;
    animation: none !important;
}

.et_header_style_left #et-top-navigation,
.et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 13px !important;
    padding-right: 13px !important;
    padding-bottom: 0 !important;
    transition: none !important;
}

.container.clearfix.et_menu_container {
    transition: none !important;
}

#logo,
.et-fixed-header #logo {
    transition: none !important;
    max-height: 65px !important;
}

.et-menu li,
.et-fixed-header .et-menu li {
    transition: none !important;
}


/* Fix: nav link padding-bottom */
.et_header_style_left #et-top-navigation nav>ul>li>a {
    padding-bottom: 24px !important;
}


/* Fix: button padding-bottom override */
.et_header_style_left #et-top-navigation nav>ul>li:last-child a,
.et_header_style_left #et-top-navigation nav>ul>li:nth-last-child(2) a {
    padding-bottom: 10px !important;
}

.et_header_style_left #et-top-navigation .mobile_menu_bar {
    padding-bottom: 10px;
}
#main-header {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0);}


@media (max-width: 1280px) {

.et_menu_container {
    border-radius: 0px!important;
    width: 100%!important;
    padding-bottom: 10px!important;
    padding-top: 0px!important;
}

}

/* ---------------- Nav links: size + active state ----------------
   The "underline" in the design is not a text-decoration -- it is an indicator
   bar pinned to the bottom edge of the white nav bar. It is positioned from the
   item's own centre, which coincides with the bar's centre because everything
   in the nav is vertically centred, so it stays put if the font size changes. */

/* every navigation label, including the two pills */
#top-menu > li > a {
	font-size: 16px !important;
}

/* Only the actual current page is highlighted. WordPress also tags the parent
   with current-page-ancestor on child pages; that is deliberately left alone so
   just one item is ever magenta. The :not() pair excludes the two pills. */
#top-menu > li.current-menu-item:not(:last-child):not(:nth-last-child(2)) > a,
#top-menu > li.current_page_item:not(:last-child):not(:nth-last-child(2)) > a {
	color: var(--cv-nav-active) !important;
}

#top-menu > li.current-menu-item:not(:last-child):not(:nth-last-child(2)),
#top-menu > li.current_page_item:not(:last-child):not(:nth-last-child(2)) {
	position: relative;
}

/* Anchored to the link rather than the list item. The <li> carries 22px of
   right padding (the gap to the next item), and an absolutely positioned box
   spans its parent's *padding* box -- so left:0/right:0 on the li drew a bar
   22px wider than the word. The <a> is exactly the text box and shares the
   li's vertical centre, so the same offsets now track the text. */
#top-menu > li.current-menu-item:not(:last-child):not(:nth-last-child(2)) > a::after,
#top-menu > li.current_page_item:not(:last-child):not(:nth-last-child(2)) > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + (var(--cv-nav-h) / 2) - 4px);
	height: 4px;
	background: var(--cv-nav-active);
}

/* Hover mirrors the current-page treatment in the brighter magenta: the label
   and the same 4px bar both take --cv-nav-hover. The :not() pair keeps the two
   pills out of it, since they have their own background hover.

   Deliberately placed after the current-page rules above: the two selectors
   have identical specificity, so source order is what lets hover win when you
   hover the page you are already on.

   Divi's own `#top-menu-nav > ul > li > a:hover { opacity: .7 }` would mute the
   colour, so opacity is reset to 1 here. */
#top-menu > li:not(:last-child):not(:nth-last-child(2)),
#top-menu > li:not(:last-child):not(:nth-last-child(2)) > a {
	position: relative;
}

#top-menu > li:not(:last-child):not(:nth-last-child(2)):hover > a {
	color: var(--cv-nav-hover) !important;
	opacity: 1;
}

#top-menu > li:not(:last-child):not(:nth-last-child(2)):hover > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + (var(--cv-nav-h) / 2) - 4px);
	height: 4px;
	background: var(--cv-nav-hover);
}

/* ---------------- Mobile menu ----------------
   Below 981px Divi swaps the desktop bar for the hamburger panel: a separate
   <ul id="mobile_menu" class="et_mobile_menu"> inside #mobile_menu, which none
   of the #top-menu rules reach -- hence its own block, inside the breakpoint
   Divi itself uses. Selectors carry the #mobile_menu id so they outrank Divi's
   class-based defaults (.et_mobile_menu li a is (0,1,2)) without !important.

   Sizes come from the designer's mock, which is a 375px phone at 1.2x: pill
   height, disc and arrow all land on the desktop tokens, so those are reused
   rather than duplicated. The rule under the header measures #E21061 in the
   mock; --cv-nav-hover (#E5005F) is visually identical, so that token is used
   rather than adding a fourth near-identical pink. */

@media ( max-width: 980px ) {

	/* The panel: pink rule in place of Divi's accent-coloured one, a tighter
	   gutter (Divi pads 5% then indents each link 5% again), rounded foot with
	   overflow clipped so a pill background cannot square the corners off. */
	#mobile_menu.et_mobile_menu {
		/* Divi positions the panel just under the toggle -- its top is derived
		   from the toggle's offset and height (it tracked the toggle when that
		   shrank), which puts the rule 10px up inside the white bar. The mock
		   hangs it from the bar's bottom edge; .container is the positioning
		   context, so 100% of it is exactly that edge. Kept !important as a
		   guard against however Divi applies its own value. */
		top: 100% !important;
		border-top: 5px solid var(--cv-nav-hover);
		padding: 20px 16px 24px;
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
		overflow: hidden;
	}

	/* Plain links: black, bold, no dividers, ~60px pitch. */
	#mobile_menu > li > a {
		color: #000;
		font-size: 17px;
		font-weight: 700;
		line-height: 1.3;
		padding: 18px 0;
		border-bottom: 0;
	}

	/* Current page keeps the desktop magenta. The two pills are excluded now
	   that they are pills again -- same as desktop, where a pill never takes
	   the active colour. */
	#mobile_menu > li.current-menu-item:not(:last-child):not(:nth-last-child(2)) > a,
	#mobile_menu > li.current_page_item:not(:last-child):not(:nth-last-child(2)) > a {
		color: var(--cv-nav-active);
	}

	/* ---- Toggle ----
	   Divi leaves the hamburger glyph in place while the panel is open. Once
	   .mobile_nav gains .opened it is swapped for ETmodules' close glyph.

	   The first version drew a 24px SVG instead, and that was a mistake: the
	   pseudo-element is what gives the toggle its size, so the box shrank from
	   32x42 to 24x34, the header reflowed (logo moved up 4px, header lost 8px)
	   and Divi's JS -- which pins the panel to the toggle's bottom -- pulled the
	   rule up into the logo. Same font, same size, different glyph keeps the
	   box identical in both states (both glyphs advance exactly 32px), so
	   nothing else on the bar moves. The stroke thickens the cross to the
	   weight in the mock without touching its metrics. */
	.mobile_nav .mobile_menu_bar:before {
		/* solid in both states so the icon does not also change colour on open */
		color: #000;
	}

	.mobile_nav.opened .mobile_menu_bar:before {
		content: "\4d";
		-webkit-text-stroke: 1.5px #000;
	}

	/* ---- The two pills, mirroring the desktop treatment ----
	   Same two-layer icon: the disc is a background-colour on ::after, the
	   arrow a background-image, so each recolours independently. */
	#mobile_menu > li:last-child,
	#mobile_menu > li:nth-last-child(2) {
		position: relative;
		width: max-content;
		max-width: 100%;
		border-radius: 100px;
		margin-top: 16px;
	}

	/* a little more air between the last text link and the first pill */
	#mobile_menu > li:nth-last-child(2) {
		margin-top: 14px;
		background: var(--cv-teal-rest);
	}

	#mobile_menu > li:last-child {
		background: var(--cv-yellow-rest);
	}

	#mobile_menu > li:last-child > a,
	#mobile_menu > li:nth-last-child(2) > a {
		display: block;
		color: #000;
		font-size: 16px;
		font-weight: 700;
		padding: 0 calc(var(--cv-nav-disc) + 14px) 0 24px;
		height: var(--cv-nav-pill-h);
		line-height: var(--cv-nav-pill-h);
		border-bottom: 0;
	}

	#mobile_menu > li:last-child:after,
	#mobile_menu > li:nth-last-child(2):after {
		content: "";
		position: absolute;
		width: var(--cv-nav-disc);
		height: var(--cv-nav-disc);
		border-radius: 100px;
		right: 4px;
		top: 50%;
		transform: translateY(-50%);
		background-image: var(--cv-arrow);
		background-size: 19px 19px;
		background-position: center;
		background-repeat: no-repeat;
	}

	#mobile_menu > li:nth-last-child(2):after { background-color: var(--cv-teal-disc); }
	#mobile_menu > li:last-child:after       { background-color: var(--cv-yellow-disc); }

	/* touch feedback: the desktop click colours */
	#mobile_menu > li:nth-last-child(2):active { background: var(--cv-teal-click); }
	#mobile_menu > li:last-child:active        { background: var(--cv-yellow-click); }
}

/* ---------------- Nav bar height (desktop) ----------------
   White nav bar fixed at 92px, with logo, links and pills all
   vertically centred on the same line.

   Scoped to min-width:981px (Divi's desktop breakpoint) on purpose --
   below that the desktop menu is hidden behind the hamburger, and forcing
   flex/height there makes the hidden menu reappear and overflow the viewport.

   The old `padding-bottom:24px` on nav links was only ever a vertical-
   alignment hack (this menu has no dropdowns, so it was not a hover bridge).
   Flex centring replaces it, which is why it is zeroed out below. */
@media (min-width: 981px) {

	.container.clearfix.et_menu_container {
		height: var(--cv-nav-h) !important;
	}

	.et_header_style_left #et-top-navigation,
	.et_header_style_left .et-fixed-header #et-top-navigation {
		display: flex !important;
		align-items: center !important;
		height: var(--cv-nav-h) !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-right: var(--cv-nav-edge-gap) !important;
	}

	#top-menu-nav,
	#top-menu {
		display: flex !important;
		align-items: center !important;
	}

	.et_header_style_left #et-top-navigation nav > ul > li > a {
		padding-bottom: 0 !important;
	}

}

/* ---------------- Nav drop shadow ----------------
   X 0, Y 5, blur 10, spread 0, #000000 at 10%.
   Deliberately outside the desktop media query so the bar keeps its shadow
   at mobile widths too. Applied to .et_menu_container (the white bar) rather
   than #main-header, so it follows the bar's rounded corners. */
.container.clearfix.et_menu_container {
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}


/* ---------------- Transparent header: no jump while the page loads ----------------
   The primary nav is Divi's "transparent" style: #main-header is absolutely
   positioned over the first section, and Divi's JS (theme-scripts-library-
   transparent-menu.js, run after load) pushes that section's content down by
   the header's height -- it adds the height to the section's padding-top, or,
   when the section holds a Fullwidth Header module, zeroes the section padding
   and adds the height to the module instead. Until that script runs the page
   is laid out WITHOUT the offset, so on every page the hero text visibly jumps
   (135px on desktop) a second or so after it first appears.

   CSS cannot add to the padding Divi already defines, and pre-adding the height
   there would be counted twice once the script measures it. So the offset is
   provided by a ::before spacer of exactly the header's height instead, and
   the spacer is switched off at the very moment the script takes over: Divi
   adds .et_pb_section_first to the section in the same synchronous step as it
   writes the padding, so the swap happens inside one layout and nothing moves.
   The header's height is fixed by design (nav bar + US notice), so it is a
   token here; keep it in step with --cv-nav-h / the notice's padding. */
:root {
	--cv-header-h: 135px; /* 92px nav bar + 43px US notice */
}

@media (max-width: 980px) {
	:root {
		--cv-header-h: 108px;
	}
}

.et_transparent_nav .et-l:not(.et-l--footer) .et_builder_inner_content > .et_pb_section:first-child:not(:has(.et_pb_fullwidth_header))::before {
	content: "";
	display: block;
	width: 100%;
	height: var(--cv-header-h);
	/* flex sections put a row gap after every item, the spacer included */
	margin-bottom: calc(-1 * var(--vertical-gap, 0px));
}

/* A section built around a Fullwidth Header module (the homepage hero): the
   script zeroes the section's own padding and moves the offset into the
   module, so the spacer goes inside the module and the section starts at 0
   from the first paint -- otherwise the column (and its background) would
   sit 135px lower until the script ran. */
.et_transparent_nav .et-l:not(.et-l--footer) .et_builder_inner_content > .et_pb_section:first-child:has(.et_pb_fullwidth_header) {
	padding-top: 0 !important;
}

.et_transparent_nav .et-l:not(.et-l--footer) .et_builder_inner_content > .et_pb_section:first-child:has(.et_pb_fullwidth_header) .et_pb_fullwidth_header::before {
	content: "";
	display: block;
	width: 100%;
	height: var(--cv-header-h);
	/* the module is a flex column with Divi's 30px item gap; cancel the one the spacer adds */
	margin-bottom: calc(-1 * var(--vertical-gap, 0px));
}

/* Divi's script has taken over (it sets the padding and this class together).
   !important because the spacer selectors above carry :has()/:not() weight. */
.et_transparent_nav .et_pb_section_first::before,
.et_transparent_nav .et_pb_section_first .et_pb_fullwidth_header::before {
	display: none !important;
}

/* ---------------- Footer: top rows (desktop) ----------------
   The Theme Builder tucks the disclaimer row under the link/contact row with a
   fixed `margin-top: -48px !important` on the disclaimer row. That number only
   works while the links sit on one line: the first row is 84px tall because
   of the Cycle Pharma logo, the links are a 27px line, and 84 - 48 leaves the
   disclaimer 9px under them. Below ~1380px the three links need more width
   than their 10/24 column offers, "Recipes" wraps to a second line, and the
   disclaimer is drawn straight over it.

   Fix, in two parts:
   1. Take the logo out of the row's height. Its image is positioned
      absolutely inside its column, so the row is only as tall as the links
      or the contact/social column (32px, the icons) -- 27px links + 5px --
      and the disclaimer follows it with a normal 4px margin (same 36px from
      the links' top as before, so nothing moves in the single-line case).
      When the links do wrap, the row grows and the disclaimer moves down
      with it. The logo (84px) still spans both rows visually, as designed.
   2. Let the links breathe instead of wrapping needlessly: the 52px gaps
      baked into the content as inline margins are replaced by a flex gap
      that eases down to 24px on narrower desktops.
   3. Keep the disclaimer row the same width as every other footer row. The
      Theme Builder caps it at 1600px where the rest stop at 1360px, so on
      wide screens it starts 120px further left and its 17% text indent no
      longer lands under the links; at 1360px the indent equals the logo
      column plus gutter, which is what lines the two up. */
@media (min-width: 981px) {
	/* On custom-post-type pages (single recipes) Divi wraps the Theme Builder
	   layouts in `.et-db #et-boc` and prefixes every design rule with it, so
	   its `margin-top: -48px !important` arrives at ID-level specificity and
	   beat the plain class selectors used here -- the footer overlapped on
	   recipe pages only. `:not(#cvlp-specificity)` matches everything and
	   adds one ID's worth of weight, keeping a single rule for both cases. */
	.et-l.et-l--footer:not(#cvlp-specificity) .et_pb_section .et_pb_row_2_tb_footer {
		max-width: 1360px !important;
	}
	.et-l--footer .et_pb_column_0_tb_footer {
		position: relative;
	}
	.et-l--footer .et_pb_column_0_tb_footer > .et_pb_image {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
	}
	.et-l.et-l--footer:not(#cvlp-specificity) .et_pb_section .et_pb_row_2_tb_footer.et_pb_row {
		margin-top: 4px !important;
	}
	.et-l--footer .cv-footer-linklist {
		display: flex;
		flex-wrap: wrap;
		column-gap: clamp(24px, 3.5vw, 52px);
		row-gap: 0;
	}
	.et-l--footer .cv-footer-linklist a {
		margin-right: 0 !important;
	}
}

/* ---------------- Footer: mobile layout ----------------
   The footer uses ONE set of content modules for every breakpoint rather than
   duplicated mobile-only / desktop-only copies, so each link exists in exactly
   one place. These rules restructure that single set for the mobile design.
   The cv-footer-* hooks are set on the modules in the Theme Builder. */

/* The legal line breaks after the reference number on mobile only; on desktop
   it runs as a single line. */
.et-l--footer .cv-footer-legal br {
	display: none;
}

/* Policy row spreads edge to edge on desktop, matching the design where the
   six links span the full content width with even gaps. space-between does
   this at any viewport, so no per-width gap tuning is needed. The inline
   margin-right on each link is zeroed out here and only used on mobile. */
@media (min-width: 981px) {
	.et-l--footer .cv-footer-policy {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: space-between !important;
		column-gap: 16px;
		row-gap: 8px;
	}
	.et-l--footer .cv-footer-policy a,
	.et-l--footer .cv-footer-policy span {
		margin-right: 0 !important;
	}
}

@media (max-width: 980px) {

	/* nav + policy links: inline on desktop, one per line on mobile */
	.et-l--footer .cv-footer-linklist a,
	.et-l--footer .cv-footer-linklist span {
		display: block !important;
		margin-right: 0 !important;
		line-height: 1.9em;
	}

	/* phone and email each onto their own line */
	.et-l--footer .cv-footer-contact > span {
		display: block !important;
		margin-right: 0 !important;
		line-height: 1.9em;
	}

	/* the design puts the social icons ABOVE the contact details, reversing
	   the desktop order. They sit in a flex row, so `order` handles it without
	   needing a duplicate mobile-only module. */
	.et-l--footer .cv-footer-social {
		order: -1;
	}

	/* disclaimer runs as one flowing paragraph on mobile */
	.et-l--footer .cv-footer-disclaimer br {
		display: none;
	}

	.et-l--footer .cv-footer-legal br {
		display: inline;
	}
header#main-header.us:before {
    padding: 10px 25px;
	width:100%;
	}
}



footer a:hover {
	color:#fbbb00!important;
}

/* ---------------- Footer social icons (brand SVGs) ----------------
   The footer's Social Media Follow module draws its icons with the ETmodules
   icon font (a glyph in the link's ::before). The brand wants its own artwork,
   so the glyph is swapped for an SVG *mask*: the pseudo-element keeps the same
   32x32 box, the SVG (images/social/*.svg) cuts the shape out of it, and the
   colour is simply the pseudo-element's background-color -- which is what makes
   the hover/active colours a one-line change each. A mask reads only the
   SVG's alpha, so the files are filled solid black: a fill of "none" would
   mask everything away and the icon would vanish.

   The module's own hover rule fades the glyph via `color`, which no longer
   affects anything, so it is harmlessly left in place. */
.et-l--footer .et_pb_social_media_follow .et-social-instagram a.icon:before,
.et-l--footer .et_pb_social_media_follow .et-social-youtube a.icon:before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	background-color: #ffffff;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: background-color 0.3s;
}

.et-l--footer .et_pb_social_media_follow .et-social-instagram a.icon:before {
	-webkit-mask-image: url(images/social/instagram.svg?v=1.2.0);
	mask-image: url(images/social/instagram.svg?v=1.2.0);
	-webkit-mask-size: 16px 16px;
	mask-size: 16px 16px;
}

.et-l--footer .et_pb_social_media_follow .et-social-youtube a.icon:before {
	-webkit-mask-image: url(images/social/youtube.svg?v=1.2.0);
	mask-image: url(images/social/youtube.svg?v=1.2.0);
	-webkit-mask-size: 20px 16px;
	mask-size: 20px 16px;
}

/* keyboard focus gets the same treatment as hover */
.et-l--footer .et_pb_social_media_follow .et-social-instagram a.icon:hover:before,
.et-l--footer .et_pb_social_media_follow .et-social-youtube a.icon:hover:before,
.et-l--footer .et_pb_social_media_follow .et-social-instagram a.icon:focus-visible:before,
.et-l--footer .et_pb_social_media_follow .et-social-youtube a.icon:focus-visible:before {
	background-color: #fbbb00;
}

.et-l--footer .et_pb_social_media_follow .et-social-instagram a.icon:active:before,
.et-l--footer .et_pb_social_media_follow .et-social-youtube a.icon:active:before {
	background-color: #fcdc7f;
}

/* ---------------- Header logo (SVG) ----------------
   The logo is an SVG shipped in this theme (images/logo.svg). Divi notices the
   .svg URL and adds body.et_pb_svg_logo, then -- below 981px only -- sizes the
   image with `height: 54%` of the logo container, its old default logo height,
   instead of the raster path (height:auto governed by max-width:50%). On a 65px
   container that is 35px tall: the logo shrank from 187x56 to 117x35 the moment
   the PNG was swapped out. Restoring height:auto puts the SVG back on exactly
   the path the PNG rendered by. Same selector as Divi's rule; this sheet loads
   later, so it wins without !important. Desktop is untouched: Divi's desktop
   rule is scoped to 981px+ and already renders the SVG at the PNG's 216x65. */
@media ( max-width: 980px ) {
	.et_pb_svg_logo #logo {
		height: auto;
	}
}

/* ---------------- Content bullets ----------------
   Brand-orange dots at a fixed 10px, drawn as a pseudo-element rather than by
   restyling the native marker. `::marker` was tried first and abandoned: its
   size can only be driven by font-size, and Montserrat's bullet glyph is about
   0.15em, so reaching 10px needed a ~66px marker font and wrecked the line
   boxes. A circle drawn here is exactly 10px in any font, at any text size.

   Scoped to Divi Text modules on purpose. Plenty of lists on this site are
   deliberately bullet-free and are *also* plain class-less <ul>s -- the recipe
   ingredients most of all -- so a site-wide `ul li` rule would put dots back on
   them. Everything here sits inside .et_pb_text_inner; the ingredients list,
   breadcrumbs and both menus do not, so they are untouched.

   Same rule for desktop and mobile: the dot is a fixed px size and the offset
   is in em, so it tracks the text wherever the type scales down. */
#main-content .et_pb_text_inner ul {
	padding-left: 0;
}

#main-content .et_pb_text_inner ul > li {
	list-style: none;
	position: relative;
	/* gutter the dot sits in -- 10px dot plus a 10px gap to the text */
	padding-left: 20px;
}

#main-content .et_pb_text_inner ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	/* centred on the first line, so wrapped items keep the dot at the top */
	top: 0.8em;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #FC6530;
}

/* ---------------- Toggle spacing ----------------
   Toggle-to-toggle gap pinned to 20px on every page.

   It was inconsistent because two different things stack up. Divi 5 lays the
   column out as flex with a 30px row-gap, which is all the Support page had.
   The App page additionally carries a per-module `margin-bottom: 20px` that
   Divi writes with !important from the module's own design settings, so its
   toggles sat 50px apart. Hence the !important below -- without it the module
   rule wins.

   Rather than fight the row-gap with a negative margin, the gap is switched
   off for columns holding toggles and re-applied as explicit margins: 30px
   between everything (so a heading above the list keeps the spacing it had)
   and 20px between one toggle and the next. Nothing here depends on the
   row-gap value, so changing it in Divi later cannot pull the toggles out
   of alignment. Applies at every width. */
#main-content .et_pb_column:has( > .et_pb_toggle ) {
	row-gap: 0;
}

#main-content .et_pb_column:has( > .et_pb_toggle ) > * + * {
	margin-top: 30px;
}

#main-content .et_pb_toggle {
	margin-bottom: 0 !important;
}

#main-content .et_pb_toggle + .et_pb_toggle {
	margin-top: 20px;
}

/* ---------------- Content tramline below 1280px ----------------
   Above 1280px the content sits in Divi's proportional 80% tramline (capped
   at 1366px). Below that the client wants a fixed 25px gutter instead, the
   same at every narrower width, phones included (before this, phones also
   used 80%, i.e. a 38px gutter at 375px).

   Divi 5 does not hard-code 80% on the row: its dynamic stylesheet sets
   `--content-width: 80%` on :root and the row reads `width: var(--content-width)`.
   Redefining the variable on body wins by inheritance (body is nearer the
   rows than :root), so no specificity contest and no `!important`. Rows
   with their own builder width keep it and stay centred; rows with their
   own padding keep that too, which is why the width is shrunk rather than
   padding added -- per-row padding would otherwise cancel the gutter.

   Three things share the tramline but do not read the variable, so they get
   matching rules: the Fullwidth Header container (Divi sizes it 80%
   directly), the Theme Builder footer (its rows are 100% inside sections
   padded 120px, so the section padding is the gutter there), and the
   "intended for people living in..." banner text above the header, which
   this file sizes at 80% to line up with the rows. */
@media (max-width: 1279px) {
	body {
		--content-width: calc(100% - 50px);
	}

	.et_pb_fullwidth_header:not(#cvlp-specificity) .et_pb_fullwidth_header_container {
		width: calc(100% - 50px);
	}

	.et-l.et-l--footer:not(#cvlp-specificity) .et_pb_section {
		padding-left: 25px !important;
		padding-right: 25px !important;
	}

	header#main-header:before,
	header#main-header.us:before,
	header#main-header.uk:before {
		width: calc(100% - 50px);
	}
}