/* CSS for Events pages */
/* Dark Pink Events Page */
.h-scroll__section.has-darkpink-background-color {
	background-color: #833D57 !important;
	color: #fff !important
}

.h-scroll__section.has-darkpink-background-color .heading,
.h-scroll__section.has-darkpink-background-color .copy,
.h-scroll__section.has-darkpink-background-color .btn {
	color: #fff !important
}

.h-scroll__section.has-darkpink-background-color .heading a,
.h-scroll__section.has-darkpink-background-color .copy a,
.h-scroll__section.has-darkpink-background-color .btn a {
	color: #fff !important
}

.h-scroll__section.has-darkpink-background-color .btn::before {
	background-color: #fff !important
}

.h-scroll__section.has-darkpink-background-color .copy ul li::marker {
	color: #fff !important
}

.h-scroll__section.has-darkpink-background-color .copy ol li::before {
	background-color: #fff;
	color: #dc5773
}

.h-scroll__section.has-darkpink-background-color .single-link {
	border-color: rgba(255, 255, 255, 0.3) !important
}

.h-scroll__section.has-darkpink-background-color .single-link:hover {
	border-color: #fff !important
}

.h-scroll__section.has-darkpink-background-color .single-link h3 {
	color: #fff !important
}

/* Magenta Events Page */
.h-scroll__section.has-magenta-background-color {
	background-color: #3F131F !important;
	color: #fff !important
}

.h-scroll__section.has-magenta-background-color .heading,
.h-scroll__section.has-magenta-background-color .copy,
.h-scroll__section.has-magenta-background-color .btn {
	color: #fff !important
}

.h-scroll__section.has-magenta-background-color .heading a,
.h-scroll__section.has-magenta-background-color .copy a,
.h-scroll__section.has-magenta-background-color .btn a {
	color: #fff !important
}

.h-scroll__section.has-magenta-background-color .btn::before {
	background-color: #fff !important
}

.h-scroll__section.has-magenta-background-color .copy ul li::marker {
	color: #fff !important
}

.h-scroll__section.has-magenta-background-color .copy ol li::before {
	background-color: #fff;
	color: #dc5773
}


/* Restaurant page css */
.h-scroll__section.has-restaurant-background-color {
	background-color: #EBD9C4 !important;
	color: #BDA877 !important
}

.h-scroll__section.has-restaurant-background-color .heading {
	color: #ffffff !important
}

.h-scroll__section.has-restaurant-background-color .copy,
.h-scroll__section.has-restaurant-background-color .btn {
	color: #BDA877 !important
}

/* Restaurant Penn page css */
.h-scroll__section.has-penn-background-color {
	background-color: #597E53 !important;
	color: #fff !important
}

.h-scroll__section.has-penn-background-color .heading,
.h-scroll__section.has-penn-background-color .copy,
.h-scroll__section.has-penn-background-color .btn {
	color: #fff !important
}

.h-scroll__section.has-penn-background-color .heading a,
.h-scroll__section.has-penn-background-color .copy a,
.h-scroll__section.has-penn-background-color .btn a {
	color: #fff !important
}

.h-scroll__section.has-penn-background-color .btn::before {
	background-color: #fff !important
}

.h-scroll__section.has-penn-background-color .copy ul li::marker {
	color: #fff !important
}

.h-scroll__section.has-penn-background-color .copy ol li::before {
	background-color: #fff;
	color: #dc5773
}

.h-scroll__section.has-penn-background-color .single-link {
	border-color: rgba(255, 255, 255, 0.3) !important
}

.h-scroll__section.has-penn-background-color .single-link:hover {
	border-color: #fff !important
}

.h-scroll__section.has-penn-background-color .single-link h3 {
	color: #fff !important
}

/* Tea Room page css */
.h-scroll__section.has-tearoom-background-color {
	background-color: #ADC9B7 !important;
	color: #fff !important
}

.h-scroll__section.has-tearoom-background-color .heading,
.h-scroll__section.has-tearoom-background-color .copy,
.h-scroll__section.has-tearoom-background-color .btn {
	color: #fff !important
}

.h-scroll__section.has-tearoom-background-color .heading a,
.h-scroll__section.has-tearoom-background-color .copy a,
.h-scroll__section.has-tearoom-background-color .btn a {
	color: #fff !important
}

.h-scroll__section.has-tearoom-background-color .btn::before {
	background-color: #fff !important
}

.h-scroll__section.has-tearoom-background-color .copy ul li::marker {
	color: #fff !important
}

.h-scroll__section.has-tearoom-background-color .copy ol li::before {
	background-color: #fff;
	color: #dc5773
}

.h-scroll__section.has-tearoom-background-color .single-link {
	border-color: rgba(255, 255, 255, 0.3) !important
}

.h-scroll__section.has-tearoom-background-color .single-link:hover {
	border-color: #fff !important
}

.h-scroll__section.has-tearoom-background-color .single-link h3 {
	color: #fff !important
}

/* header variant logos — present-restaurant.html (js/header-variant-logos.js)
   Tune --header-penn-logo-* / --header-tea-logo-* to size each variant independently.
   !important overrides critical.css (.header-logo img { width: 98px }). */
body[data-header-variant-logos] {
	--header-penn-logo-width: 68px;
	--header-penn-logo-height: auto;
	--header-tea-logo-width: 68px;
	--header-tea-logo-height: auto
}

@media(min-width: 576px) {
	body[data-header-variant-logos] {
		--header-penn-logo-width: 78px;
		--header-tea-logo-width: 78px
	}
}

@media(min-width: 1025px) {
	body[data-header-variant-logos] {
		--header-penn-logo-width: 185px;
		--header-tea-logo-width: 185px
	}
}

body[data-header-variant-logos] .site-header__logo .header-logo .light-penn-logo,
body[data-header-variant-logos] .site-header__logo .header-logo .light-tea-logo {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	max-width: none;
	opacity: 0
}

body[data-header-variant-logos] .site-header__logo .header-logo .light-penn-logo {
	width: var(--header-penn-logo-width) !important;
	height: var(--header-penn-logo-height)
}

body[data-header-variant-logos] .site-header__logo .header-logo .light-tea-logo {
	width: var(--header-tea-logo-width) !important;
	height: var(--header-tea-logo-height)
}

/* Expand logo link box when a variant is active (primary-logo no longer sets width). */
body[data-header-variant-logos] .site-header__logo.penn-logo-mode .header-logo {
	width: var(--header-penn-logo-width) !important;
	max-width: none
}

body[data-header-variant-logos] .site-header__logo.tea-logo-mode .header-logo {
	width: var(--header-tea-logo-width) !important;
	max-width: none
}

body[data-header-variant-logos] .site-header__logo.penn-logo-mode .header-logo .primary-logo,
body[data-header-variant-logos] .site-header__logo.penn-logo-mode .header-logo .light-logo,
body[data-header-variant-logos] .site-header__logo.penn-logo-mode .header-logo .light-tea-logo {
	opacity: 0;
	pointer-events: none
}

body[data-header-variant-logos] .site-header__logo.penn-logo-mode .header-logo .light-penn-logo {
	opacity: 1
}

body[data-header-variant-logos] .site-header__logo.tea-logo-mode .header-logo .primary-logo,
body[data-header-variant-logos] .site-header__logo.tea-logo-mode .header-logo .light-logo,
body[data-header-variant-logos] .site-header__logo.tea-logo-mode .header-logo .light-penn-logo {
	opacity: 0;
	pointer-events: none
}

body[data-header-variant-logos] .site-header__logo.tea-logo-mode .header-logo .light-tea-logo {
	opacity: 1
}

/* CSS changes for resolving content truncate issues on desktop devices */
@media(min-width: 1025px) and (max-width: 1600px) {
	.block-team-listing__single .copy {
        max-height: calc(100vh - 160px - 100px - 240px) !important;
    }
	.block-team-listing picture {
        max-height: 30vh !important;
    }
	.block-team-listing__single {
        max-width: 250px !important;
    }
	.site-header {
        padding: 20px 0 !important;
    }

	.block-page-links-block .site-container {
        padding-top: 8rem !important;
    }
}

@media(min-width: 1025px) and (max-height: 900px) {
    .block-history-block .inner-posts-container {
        padding-top: 100px !important;
    }

	.block-page-links-block__wrapper .copy,
	.block-image-text__wrapper .left-content .copy {
		max-width: 400px !important;
	}
}

.play-btn-container--hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Fallback: hide CookieHub UI if a legacy GTM tag still injects it */
#ch2-dialog,
#ch2-container,
.ch2-wrap {
    display: none !important;
}

/*
 * Complianz: fix banner stuck as a bottom sliver on page 2+.
 * The slide-up animation can fail to complete when CSS is cached.
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-hidden {
    display: none !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right {
    animation: none !important;
    -webkit-animation: none !important;
    bottom: 10px !important;
    right: 10px !important;
    transform: none !important;
    z-index: 999999 !important;
}

/* Hide manage-consent tab until the user has accepted/rejected */
#cmplz-manage-consent .cmplz-manage-consent:not(.cmplz-show) {
    display: none !important;
}

/*
* After consent: keep "Manage consent" fully visible
* and apply custom styling.
*/
#cmplz-manage-consent .cmplz-manage-consent {
    padding: 4px 8px !important;
    height: 40px !important;
    color: #a7832f !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    background-color: rgba(243, 241, 238, 0.9) !important;
    border: 1px solid #ac8b3c !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

#cmplz-manage-consent .cmplz-manage-consent.cmplz-show {
    bottom: 0 !important;
    right: 10px !important;
    left: auto !important;
    display: block !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    z-index: 999999 !important;
}

@media (max-width: 768px) {
    #cmplz-manage-consent .cmplz-manage-consent.cmplz-show {
        display: block !important;
        right: 10px !important;
        left: auto !important;
        bottom: 0 !important;
    }
}

/* Hide manage-consent tab until the user has accepted/rejected */
/*#cmplz-manage-consent .cmplz-manage-consent:not(.cmplz-show) {
    display: none !important;
}

/*
 * After consent: keep "Manage consent" fully visible (Complianz default hides it
 * off-screen until hover, and hides it entirely on mobile).
 */
/*#cmplz-manage-consent .cmplz-manage-consent.cmplz-show {
    bottom: 0 !important;
    animation: none !important;
    -webkit-animation: none !important;
    display: block !important;
    z-index: 999999 !important;
}

@media (max-width: 768px) {
    #cmplz-manage-consent .cmplz-manage-consent.cmplz-show {
        display: block !important;
        right: 10px !important;
        left: auto !important;
    }
}
*/

/* Brief confirmation after accept / deny / save preferences */
.cmplz-consent-toast {
    position: fixed;
    left: 50%;
    bottom: 70px;
    transform: translateX(-50%) translateY(12px);
    max-width: min(420px, calc(100vw - 32px));
    padding: 14px 20px;
    background: #ffffff;
    border: 1px solid #f2f2f2;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    color: #222222;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    z-index: 1000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.cmplz-consent-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
    .cmplz-consent-toast {
        bottom: 60px;
    }
}

/* Thank you page: footer shows links only, no form/image */
.site-footer--links-only {
	width: 100%;
}

.site-footer--links-only .form-container {
	width: 100%;
	max-width: none;
	padding: 40px 20px 49px;
}

@media only screen and (min-width: 1025px) {
	.site-footer--links-only .form-container {
		padding: 0 40px 0 32px;
	}

	.site-footer--links-only .right-container {
		display: flex;
		width: 100%;
	}
}

@media only screen and (min-width: 1600px) {
	.site-footer--links-only .form-container {
		padding: 0 80px 0 97px;
	}
}
