/* Contact widget: fixed Chat / Email tabs on the right edge of the viewport
   on desktop, a two-button bar along the bottom on mobile (see the mobile
   section below).

   Markup: template-parts/contact-widget.php. Where it appears:
   inc/contact-widget.php. Shown by assets/js/contact-widget.js once the VWO
   split test switches it on and the cookie banner is off screen.

   Stacking: 9990 keeps it under the header (#inner-header, 10000), so the
   mega menu drops over it, and under the open chat window (99999), the chat
   overlay (99998) and the sitewide popup (100001), which cover it like the
   rest of the page.

   Styled like the site's red buttons so it stands out on white sections,
   dark sections and photography alike: Escoffier red #bb1133 with white
   icons and labels (about 6.5:1), inverting to white with red on hover, the
   10px radius of boxes with a shadow, Trade Gothic Bold Condensed caps for
   labels. The shadow is a step darker than the soft card shadow so the panel
   still lifts off red-toned photos. */

.escoffier-contact-widget {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 9990;
	transform: translateY(-50%);
}

/* Explicit because main.css sets aside { display: block }, which beats the
   browser's own [hidden] rule. */
.escoffier-contact-widget[hidden] {
	display: none;
}

/* Played once, when the widget appears because the visitor has just answered
   the cookie banner; on later page loads it is simply there. Only the
   animation hangs on this JS-added class, never the resting position, so if
   the class is ever stripped (e.g. WP Rocket's Remove Unused CSS) the widget
   still shows, just without the slide. */
.escoffier-contact-widget.is-sliding-in {
	animation: escoffier-contact-widget-slide-in 0.3s ease;
}

@keyframes escoffier-contact-widget-slide-in {
	from {
		transform: translate(100%, -50%);
	}
	to {
		transform: translate(0, -50%);
	}
}

.escoffier-contact-widget__list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: #bb1133;
	border-radius: 10px 0 0 10px;
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.escoffier-contact-widget__entry {
	margin: 0;
	padding: 0;
	list-style: none;
}

.escoffier-contact-widget__entry + .escoffier-contact-widget__entry {
	border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* Doubled class: outranks the theme's global a / button / a:hover rules. */
.escoffier-contact-widget .escoffier-contact-widget__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	/* No fixed width: the fixed-position widget shrinks to its widest label,
	   and both tabs stretch to match, so "CHAT NOW" and "EMAIL US" line up. */
	width: 100%;
	min-width: 72px;
	min-height: 72px;
	margin: 0;
	padding: 12px 12px 10px;
	border: 0;
	border-radius: 0;
	background: #bb1133;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	color: #fff;
	font-family: TradeGothic, "Arial Narrow", sans-serif;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover darkens to #710b1b, like the header's Request Info button, which
   reads best over the site's mostly white pages. Over a dark section it
   inverts instead (.is-over-dark below). The icon follows through
   currentColor. */
.escoffier-contact-widget .escoffier-contact-widget__item:hover {
	background: #710b1b;
	color: #fff;
	text-decoration: none;
}

/* Keyboard focus only: main.css gives every a:focus a dotted outline, which
   would flash on mouse clicks. The ring is inset because the widget is flush
   with the viewport edge, where an outer ring would be clipped on the right. */
.escoffier-contact-widget .escoffier-contact-widget__item:focus:not(:focus-visible) {
	outline: none;
}

/* Same look as hover, plus a ring so focus still shows while the pointer is
   over the tab too. */
.escoffier-contact-widget .escoffier-contact-widget__item:focus-visible {
	background: #710b1b;
	color: #fff;
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* Over a dark section (the black footer, the homepage hero video) a dark-red
   hover would sink into the background, so the tab inverts to white with red
   text instead, like the red buttons in the homepage hero. contact-widget.js
   sets is-over-dark while one of those sections is behind the widget; the
   --dark-page modifier (template-parts/contact-widget.php) applies it for the
   whole of a black-background page such as /highschool/. */
.escoffier-contact-widget.is-over-dark .escoffier-contact-widget__item:hover,
.escoffier-contact-widget.is-over-dark .escoffier-contact-widget__item:focus-visible,
.escoffier-contact-widget.escoffier-contact-widget--dark-page .escoffier-contact-widget__item:hover,
.escoffier-contact-widget.escoffier-contact-widget--dark-page .escoffier-contact-widget__item:focus-visible {
	background: #fff;
	color: #bb1133;
}

.escoffier-contact-widget.is-over-dark .escoffier-contact-widget__item:focus-visible,
.escoffier-contact-widget.escoffier-contact-widget--dark-page .escoffier-contact-widget__item:focus-visible {
	outline-color: #bb1133;
}

.escoffier-contact-widget__icon {
	display: block;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
}

/* Labels stay on one line; the tab widens to fit the longer one. */
.escoffier-contact-widget__label {
	white-space: nowrap;
}

/* The widget follows the chat bubble. Pages where the bubble is switched off
   in PHP never get the markup (inc/contact-widget.php); these are the pages
   where the bubble still loads but CSS hides it. Each rule mirrors the one
   that hides #embedded-messaging:
   - Boost landing pages: sass/standalone/page-templates/page-boost-landing.scss
   - /optout/ (page 47921) once the reCAPTCHA badge is up: assets/css/main.css */
.page-template-page-boost-landing .escoffier-contact-widget,
.page-id-47921.recaptcha-badge .escoffier-contact-widget {
	display: none !important;
}

/* Mobile (below 992px): a black two-button bar pinned to the bottom of the
   screen, with the black quiz banner (.mobile-sticky-trigger) docking on top
   of it when that slides in. Black, so the quiz banner's red button stays
   the one red thing down there.

   Everything the bottom bar pushes out of the way is adjusted here, keyed off
   escoffier-contact-widget-visible on <body> (set by contact-widget.js when
   the widget shows), so all of it lives in one place:
     - the quiz banner sits on top of the bar instead of at bottom: 0;
     - the Salesforce chat launcher, and the bubble a minimised conversation
       turns into, are hidden, because Chat Now replaces them and they would
       otherwise float over the bar. Chat Now also reopens a minimised
       conversation;
     - the open chat window, the reCAPTCHA badge, CookieYes's revisit button
       and the page end move up by the bar's height, on top of the offsets
       cta-forms.css / main.css already apply for the quiz banner
       (--escoffier-bottom-bar-h). */
@media (max-width: 991px) {
	body.escoffier-contact-widget-visible {
		--escoffier-contact-bar-h: calc(52px + env(safe-area-inset-bottom, 0px));
		/* Room after the footer so the bar never covers the end of the page. */
		padding-bottom: var(--escoffier-contact-bar-h);
	}

	.escoffier-contact-widget {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		transform: none;
	}

	.escoffier-contact-widget.is-sliding-in {
		animation-name: escoffier-contact-bar-slide-up;
	}

	.escoffier-contact-widget__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 0;
		background: #000;
		box-shadow: none;
	}

	.escoffier-contact-widget__entry + .escoffier-contact-widget__entry {
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.25);
	}

	.escoffier-contact-widget .escoffier-contact-widget__item {
		flex-direction: row;
		gap: 8px;
		min-width: 0;
		min-height: 52px;
		padding: 0 12px;
		background: #000;
		font-size: 16px;
	}

	/* Brand red on black is about 3.2:1, enough for an icon (3:1). */
	.escoffier-contact-widget__icon {
		width: 22px;
		height: 22px;
		color: #bb1133;
	}

	/* Touch screens keep :hover on whatever was last tapped, so the desktop
	   hover colours are cancelled here; a tap gets :active feedback instead. */
	.escoffier-contact-widget .escoffier-contact-widget__item:hover,
	.escoffier-contact-widget.is-over-dark .escoffier-contact-widget__item:hover,
	.escoffier-contact-widget.escoffier-contact-widget--dark-page .escoffier-contact-widget__item:hover {
		background: #000;
		color: #fff;
	}

	.escoffier-contact-widget .escoffier-contact-widget__item:active,
	.escoffier-contact-widget .escoffier-contact-widget__item:focus-visible,
	.escoffier-contact-widget.is-over-dark .escoffier-contact-widget__item:focus-visible,
	.escoffier-contact-widget.escoffier-contact-widget--dark-page .escoffier-contact-widget__item:focus-visible {
		background: #252525;
		color: #fff;
	}

	.escoffier-contact-widget .escoffier-contact-widget__item:focus-visible,
	.escoffier-contact-widget.is-over-dark .escoffier-contact-widget__item:focus-visible,
	.escoffier-contact-widget.escoffier-contact-widget--dark-page .escoffier-contact-widget__item:focus-visible {
		outline-color: #fff;
	}

	/* The quiz banner docks on top of the bar. */
	body.escoffier-contact-widget-visible .mobile-sticky-trigger {
		bottom: var(--escoffier-contact-bar-h);
	}

	body.escoffier-contact-widget-visible .embeddedMessagingConversationButtonWrapper {
		display: none !important;
	}

	/* Minimising a conversation turns the window into Salesforce's own 62px
	   bubble (.embeddedMessagingFrame.isMinimized), pinned bottom right on top
	   of Email Us. It is the launcher by another name, so it goes as well, and
	   Chat Now brings the conversation back. Hidden with visibility, not
	   display, so the iframe keeps its layout and state while out of sight. */
	body.escoffier-contact-widget-visible .embeddedMessagingFrame[class~="isMinimized"] {
		visibility: hidden !important;
		pointer-events: none !important;
	}

	/* CookieYes's "revisit consent" button is pinned to the bottom-left corner
	   (8px inset, z-index 999999), on top of Chat Now. It is switched off on
	   www.escoffier.edu but on for staging (2026-10-01), and the CookieYes
	   dashboard can turn it on anywhere, so it rides above the bar, and above
	   the quiz banner when that is docked on the bar too. */
	body.escoffier-contact-widget-visible .cky-btn-revisit-wrapper {
		bottom: calc(var(--escoffier-contact-bar-h) + 8px) !important;
	}

	body.escoffier-contact-widget-visible.mobile-sticky-bar .cky-btn-revisit-wrapper {
		bottom: calc(var(--escoffier-contact-bar-h) + var(--escoffier-bottom-bar-h) + 8px) !important;
	}

	/* Open chat window: above the bar, or above bar + quiz banner. */
	body.escoffier-contact-widget-visible .embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"] {
		bottom: var(--escoffier-contact-bar-h) !important;
		max-height: calc(100dvh - var(--escoffier-contact-bar-h) - 2em) !important;
	}

	body.escoffier-contact-widget-visible.mobile-sticky-bar .embedded-messaging > .embeddedMessagingFrame[class~="isMaximized"] {
		bottom: calc(var(--escoffier-contact-bar-h) + var(--escoffier-bottom-bar-h)) !important;
		max-height: calc(100dvh - var(--escoffier-contact-bar-h) - var(--escoffier-bottom-bar-h) - 2em) !important;
	}

	/* reCAPTCHA badge: its usual 14px inset (125px with the quiz banner, per
	   main.css), plus the bar. */
	body.escoffier-contact-widget-visible .grecaptcha-badge {
		bottom: calc(var(--escoffier-contact-bar-h) + 14px) !important;
	}

	body.escoffier-contact-widget-visible.mobile-sticky-bar .grecaptcha-badge {
		bottom: calc(var(--escoffier-contact-bar-h) + 125px) !important;
	}

	/* While a form field has focus, scripts.js sets chat-quiz-banner-hidden to
	   take the quiz banner and chat off screen, so they don't ride up over the
	   inputs with the phone keyboard. The bar goes with them. */
	.chat-quiz-banner-hidden .escoffier-contact-widget {
		display: none !important;
	}
}

@keyframes escoffier-contact-bar-slide-up {
	from {
		transform: translateY(100%);
	}
	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.escoffier-contact-widget.is-sliding-in {
		animation: none;
	}

	.escoffier-contact-widget .escoffier-contact-widget__item {
		transition: none;
	}
}

@media print {
	.escoffier-contact-widget {
		display: none !important;
	}
}