/*
 * Cristy's Pizza main navigation (inc/nav.php). Loaded only while the new nav is active,
 * scoped under body.cp-nav. Palette on :root because the drawer sits outside every wrapper.
 */
:root {
	--cp-nav-red: #e22726;
	--cp-nav-red-dk: #b3161f;
	--cp-nav-green: #35c27a;
	--cp-nav-ink: #121212;
	--cp-nav-panel: #1b1b1b;
	--cp-nav-line: rgba(255, 255, 255, 0.09);
	--cp-nav-font: "obelixproregular", Arial, sans-serif;
	--cp-nav-body: Roboto, Arial, sans-serif;
}

/* Desktop bar: the data is title case (so the drawer reads naturally), the bar shouts. */
.cp-nav .et_pb_menu .et-menu > li > a {
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.cp-nav .et_pb_menu .et-menu > li > a[href="#"] {
	cursor: default;
}
/* Desktop dropdowns. Divi opens the sub-menu 4px below a 22px-tall link, so the cursor lost
   the hover crossing that gap and the menu snapped shut. An invisible bridge on the sub-menu
   spans the gap (it is part of the sub-menu, so hovering it keeps the parent hovered). */
.cp-nav .et_pb_menu .et-menu > li > ul {
	width: auto;
	min-width: 240px;
}
.cp-nav .et_pb_menu .et-menu > li > ul::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}
/* Size sub-items to their text instead of Divi's fixed 200px, so nothing wraps mid-label. */
.cp-nav .et_pb_menu .et-menu li li a {
	width: auto;
	white-space: nowrap;
}

/* Desktop header layout. The menu row carries the class cp-header-row (set on the row in the
   Theme Builder header, Advanced > CSS Class). The Order button and the nav travel TOGETHER as
   one right-justified cluster: the button stays beside the first nav item at its original 35px
   spacing, and the pair sits against the right edge. Divi's 1/4 + 3/4 columns are collapsed to
   their content so the cluster can do that. The row's left margin only keeps the cluster clear
   of the logo (pinned 25px from the left edge, scaling at 7vw) when space runs short. */
@media (min-width: 981px) {
	.cp-nav .et_pb_row.cp-header-row {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: auto !important;
		max-width: none !important;
		margin-left: calc(7vw + 56px) !important;
		margin-right: 56px !important;
	}
	.cp-nav .cp-header-row > .et_pb_column {
		flex: 0 1 auto;
		width: auto !important;
		min-width: 0;
		margin-right: 0 !important;
	}
	/* Spacing lives on the second column, not in a flex gap: the row's clearfix pseudo-element
	   is a flex item too, and a gap would add phantom space after the nav. */
	.cp-nav .cp-header-row > .et_pb_column + .et_pb_column {
		margin-left: 35px !important;
	}
	/* The last item sits near the edge, so its dropdown anchors right instead of centering
	   (centered, it ran off-screen and was clipped). The arrow still points at the label. */
	.cp-nav .cp-header-row .et-menu > li:last-child > ul {
		left: auto !important;
		right: 0 !important;
		transform: translate(0, 5px) !important;
	}
	.cp-nav .cp-header-row .et-menu > li:last-child > ul::before {
		left: auto;
		right: 36px;
		margin-left: 0;
	}
}

/* Laptop widths: tighten the cluster so the button and six items hold one row. */
@media (min-width: 981px) and (max-width: 1149px) {
	.cp-nav .et_pb_row.cp-header-row {
		margin-left: calc(7vw + 36px) !important;
		margin-right: 32px !important;
	}
	.cp-nav .cp-header-row > .et_pb_column + .et_pb_column {
		margin-left: 22px !important;
	}
	.cp-nav .et_pb_menu .et-menu > li {
		padding-right: 14px;
	}
	.cp-nav .et_pb_menu .et-menu > li > a {
		font-size: 15px;
	}
}

/* Retire Divi's stock mobile list. Its hamburger stays and js/nav.js takes over the click. */
.cp-nav .et_mobile_menu {
	display: none !important;
}
.cp-nav .mobile_menu_bar {
	cursor: pointer;
}
.cp-nav .mobile_menu_bar:focus-visible {
	outline: 3px solid var(--cp-nav-green);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Drawer shell */
.cp-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
	z-index: 999998;
}
.cp-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--cp-nav-ink);
	color: #fff;
	border-top: 3px solid var(--cp-nav-red);
	box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45);
	transform: translateX(102%);
	visibility: hidden;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	font-family: var(--cp-nav-body);
	z-index: 999999;
}
.cp-drawer * {
	box-sizing: border-box;
}
html.cp-drawer-open .cp-drawer {
	transform: none;
	visibility: visible;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.cp-drawer-open .cp-drawer-backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease;
}
html.cp-drawer-open {
	overflow: hidden !important;
}
/* The chat bubble pins itself at the maximum z-index; keep it off the drawer while open. */
html.cp-drawer-open [id^="chtl-"] {
	visibility: hidden !important;
}
@media (prefers-reduced-motion: reduce) {
	.cp-drawer,
	.cp-drawer-backdrop,
	.cp-acc-btn svg {
		transition: none !important;
	}
}
@media (min-width: 981px) {
	.cp-drawer,
	.cp-drawer-backdrop {
		display: none;
	}
}

/* Head: logo + close */
.cp-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 12px 18px;
}
.cp-drawer-logo img {
	display: block;
	height: 54px;
	width: auto;
}
.cp-drawer-close {
	appearance: none;
	-webkit-appearance: none;
	width: 44px;
	height: 44px;
	padding: 0;
	display: grid;
	place-items: center;
	background: transparent;
	color: #fff;
	border: 2px solid var(--cp-nav-red);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease;
}
.cp-drawer-close:hover,
.cp-drawer-close:focus-visible {
	background: var(--cp-nav-red);
	outline: none;
}
.cp-drawer-close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
}

/* The money button, never more than one tap away */
.cp-drawer-order {
	display: block;
	margin: 4px 16px 14px;
	padding: 16px 12px 14px;
	background: var(--cp-nav-red);
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-family: var(--cp-nav-font);
	text-transform: uppercase;
	font-size: 22px;
	letter-spacing: 0.04em;
	line-height: 1;
	border-radius: 4px;
	transition: background 0.15s ease;
}
.cp-drawer-order:hover,
.cp-drawer-order:focus-visible {
	background: var(--cp-nav-red-dk);
	color: #fff;
	outline: none;
}

/* List */
.cp-drawer-list,
.cp-drawer-sub {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cp-drawer-list {
	border-top: 1px solid var(--cp-nav-line);
}
.cp-drawer-list > li {
	border-bottom: 1px solid var(--cp-nav-line);
}
.cp-drawer-list > li > a,
.cp-acc-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 17px 18px 15px 20px;
	color: #fff;
	text-decoration: none;
	font-family: var(--cp-nav-font);
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 0.03em;
	line-height: 1;
	text-align: left;
	background: transparent;
	border: 0;
	border-left: 4px solid transparent;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.cp-drawer-list > li > a:hover,
.cp-acc-btn:hover,
.cp-drawer-list > li > a:focus-visible,
.cp-acc-btn:focus-visible {
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	outline: none;
}
.cp-drawer-list > li.is-current > a {
	border-left-color: var(--cp-nav-red);
}
.cp-acc-btn svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	fill: none;
	stroke: var(--cp-nav-red);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}
.cp-acc-btn[aria-expanded="true"] {
	border-left-color: var(--cp-nav-red);
	background: var(--cp-nav-panel);
}
.cp-acc-btn[aria-expanded="true"] svg {
	transform: rotate(180deg);
}
.cp-drawer-sub {
	background: var(--cp-nav-panel);
	padding: 2px 0 10px;
}
.cp-drawer-sub[hidden] {
	display: none;
}
.cp-drawer-sub a {
	display: block;
	padding: 11px 20px 11px 36px;
	color: #e6e6e6;
	text-decoration: none;
	font-size: 17px;
	line-height: 1.25;
	border-left: 4px solid transparent;
	transition: color 0.15s ease, background 0.15s ease;
}
.cp-drawer-sub a:hover,
.cp-drawer-sub a:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
	outline: none;
}
.cp-drawer-sub li.is-current > a {
	color: var(--cp-nav-green);
	border-left-color: var(--cp-nav-green);
}
/* Small "opens elsewhere" mark on the PDF links */
.cp-drawer-sub a[target="_blank"]::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 8px;
	vertical-align: -1px;
	background: currentColor;
	opacity: 0.7;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/></svg>") center / contain no-repeat;
}

/* Connect block: app badges, socials, tagline. Sits right under the list, not pinned to the floor. */
.cp-drawer-connect {
	padding: 26px 20px 28px;
	text-align: center;
}
.cp-connect-label {
	margin: 0 0 14px;
	font-family: var(--cp-nav-font);
	color: var(--cp-nav-red);
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 0.05em;
	line-height: 1;
}
.cp-app-badges {
	display: flex;
	justify-content: center;
	gap: 12px;
}
.cp-app-badges a {
	display: block;
	line-height: 0;
	border-radius: 7px;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.cp-app-badges a:hover,
.cp-app-badges a:focus-visible {
	transform: translateY(-1px);
	opacity: 0.92;
	outline: none;
}
.cp-app-badges a:focus-visible {
	box-shadow: 0 0 0 3px var(--cp-nav-green);
}
.cp-app-badges img {
	display: block;
	height: 46px;
	width: auto;
	border-radius: 7px;
}
.cp-social {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 24px 0 20px;
}
.cp-social-btn {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	color: #fff;
	border: 2px solid var(--cp-nav-red);
	border-radius: 50%;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}
.cp-social-btn:hover,
.cp-social-btn:focus-visible {
	background: var(--cp-nav-red);
	color: #fff;
	transform: translateY(-1px);
	outline: none;
}
.cp-social-btn svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.cp-drawer-tag {
	margin: 0;
	color: #8f8f8f;
	font-size: 13px;
	line-height: 1.5;
}
.cp-drawer-tag strong {
	color: #cfcfcf;
	font-weight: 600;
}