/*
Theme Name: Peppi's Lounge
Theme URI: https://www.instagram.com/peppislounge/
Description: Neon-night child theme for Peppi's Lounge & Bar, built on Twenty Twenty-Five. One-page homepage with weekly lineup, bottle service booth booking (Jotform), drinks, gallery and visit info. Everything is editable in the Site Editor.
Author: Allure Creative
Author URI: https://allurecreative.ca
Template: twentytwentyfive
Version: 1.2.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peppis-lounge
*/

/* ------------------------------------------------------------------
   Base
------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
:where(section, div)[id] { scroll-margin-top: 90px; }

body {
	background-color: var(--wp--preset--color--base);
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--wp--preset--color--accent-1); color: #fff; }

/* ------------------------------------------------------------------
   Neon type
------------------------------------------------------------------ */
.neon-script {
	font-family: var(--wp--preset--font-family--yellowtail) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
	color: #FFE3F2;
	text-shadow:
		0 0 4px #fff,
		0 0 10px #FF4FB3,
		0 0 22px #FF4FB3,
		0 0 42px #E6007E,
		0 0 80px #E6007E;
	line-height: 1.05 !important;
}
.neon-script--hero {
	font-size: clamp(5.5rem, 19vw, 13rem) !important;
	animation: peppis-flicker 7s infinite;
	padding: 0 0.15em;
	margin-bottom: 0 !important;
}
.hero-sub {
	font-family: var(--wp--preset--font-family--bebas-neue);
	font-size: clamp(1.7rem, 5.2vw, 3.6rem) !important;
	letter-spacing: clamp(0.16em, 1.4vw, 0.42em);
	line-height: 1.1;
	margin-top: clamp(0.6rem, 1.8vw, 1.2rem) !important;
}
.neon-script--sm { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; }

.neon-violet {
	color: #F1E6FF;
	text-shadow: 0 0 4px #fff, 0 0 12px #9B5CFF, 0 0 28px #9B5CFF, 0 0 60px #6A2BD9;
}

.eyebrow {
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.32em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}
.eyebrow--pink { color: var(--wp--preset--color--accent-2); }

@keyframes peppis-flicker {
	0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
	20%, 24%, 55% { opacity: 0.55; }
}

/* ------------------------------------------------------------------
   Brick wall + haze (pure CSS, no images needed)
------------------------------------------------------------------ */
.has-brick {
	position: relative;
	isolation: isolate;
}
.has-brick::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(11, 7, 16, 0.55), rgba(11, 7, 16, 0.55)),
		linear-gradient(0deg, rgba(0,0,0,0.65) 2px, transparent 2px),
		linear-gradient(90deg, rgba(0,0,0,0.65) 2px, transparent 2px),
		linear-gradient(90deg, rgba(0,0,0,0.65) 2px, transparent 2px);
	background-size: 100% 100%, 120px 48px, 120px 96px, 120px 96px;
	background-position: 0 0, 0 0, 0 0, 60px 48px;
	-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 30%, transparent 100%);
	mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 30%, transparent 100%);
	opacity: 0.9;
}
.has-brick::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(40% 35% at 22% 30%, rgba(230, 0, 126, 0.35), transparent 70%),
		radial-gradient(38% 40% at 80% 70%, rgba(155, 92, 255, 0.30), transparent 70%);
	filter: blur(10px);
}
.has-brick > * { position: relative; z-index: 1; }
/* Cover block keeps its own inner container stacking */
.wp-block-cover.has-brick > .wp-block-cover__inner-container { z-index: 2; }

/* ------------------------------------------------------------------
   Header
------------------------------------------------------------------ */
.peppis-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(11, 7, 16, 0.78);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid rgba(255, 79, 179, 0.18);
}
.admin-bar .peppis-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .peppis-header { top: 0; } }

.peppis-logo {
	font-family: var(--wp--preset--font-family--yellowtail);
	font-size: 2.3rem !important;
	line-height: 1 !important;
	margin: 0 !important;
}
.peppis-logo a {
	text-decoration: none !important;
	color: #FFE3F2 !important;
	text-shadow: 0 0 4px #fff, 0 0 10px #FF4FB3, 0 0 24px #E6007E;
}
.peppis-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent-2); }
.peppis-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}
.peppis-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.6rem;
	font-size: 1.6rem;
}
.peppis-header .wp-block-button__link { padding: 0.75rem 1.3rem !important; font-size: 0.75rem !important; }
@media (max-width: 480px) {
	.peppis-header .peppis-header-cta { display: none; }
}

/* ------------------------------------------------------------------
   Buttons
------------------------------------------------------------------ */
.wp-block-button__link {
	transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
	box-shadow: 0 0 0 rgba(255, 79, 179, 0);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	box-shadow: 0 0 18px rgba(255, 79, 179, 0.65), 0 0 42px rgba(230, 0, 126, 0.35);
	transform: translateY(-1px);
}
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 2px solid var(--wp--preset--color--accent-2) !important;
	padding: calc(0.95rem - 2px) calc(2rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: rgba(255, 79, 179, 0.12) !important;
}

/* ------------------------------------------------------------------
   Neon boxes, cards, pills
------------------------------------------------------------------ */
.neon-box {
	border: 2px solid var(--wp--preset--color--accent-2);
	box-shadow: 0 0 10px rgba(255, 79, 179, 0.55), inset 0 0 10px rgba(255, 79, 179, 0.35);
	border-radius: 6px;
}

.peppis-card {
	background: linear-gradient(180deg, rgba(42, 18, 52, 0.85), rgba(22, 11, 30, 0.95));
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 18px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
	height: 100%;
}
.peppis-card:hover {
	border-color: var(--wp--preset--color--accent-2);
	box-shadow: 0 0 24px rgba(255, 79, 179, 0.25);
	transform: translateY(-3px);
}
.peppis-card--featured {
	border-color: var(--wp--preset--color--accent-2);
	box-shadow: 0 0 22px rgba(255, 79, 179, 0.35), inset 0 0 22px rgba(255, 79, 179, 0.08);
}

.pill {
	display: inline-block;
	padding: 0.35rem 0.85rem !important;
	border: 1px solid var(--wp--preset--color--accent-2);
	border-radius: 999px;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
	line-height: 1.4 !important;
}

.day-number {
	font-family: var(--wp--preset--font-family--bebas-neue);
	font-size: 3.2rem !important;
	line-height: 0.9 !important;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--accent-2);
	letter-spacing: 0.04em;
	margin: 0 !important;
}

/* Columns hold equal height cards */
.peppis-equal > .wp-block-column { display: flex; flex-direction: column; }
.peppis-equal > .wp-block-column > .peppis-card { flex: 1; }

/* ------------------------------------------------------------------
   Marquee strip
------------------------------------------------------------------ */
.peppis-marquee {
	overflow: hidden;
	white-space: nowrap;
	text-wrap: nowrap;
	border-top: 1px solid rgba(255, 79, 179, 0.35);
	border-bottom: 1px solid rgba(255, 79, 179, 0.35);
	background: linear-gradient(90deg, #12061A, #24092C, #12061A);
}
.peppis-marquee p {
	display: inline-block;
	padding-left: 100%;
	margin: 0 !important;
	white-space: nowrap;
	text-wrap: nowrap;
	animation: peppis-marquee 32s linear infinite;
	font-family: var(--wp--preset--font-family--bebas-neue);
	font-size: clamp(1.4rem, 3vw, 2rem) !important;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--contrast);
}
.peppis-marquee p strong { color: var(--wp--preset--color--accent-2); font-weight: 400; }
@keyframes peppis-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

/* ------------------------------------------------------------------
   Booking steps + form
------------------------------------------------------------------ */
.step-num {
	font-family: var(--wp--preset--font-family--bebas-neue);
	font-size: 2.6rem !important;
	line-height: 1 !important;
	color: var(--wp--preset--color--accent-2);
	text-shadow: 0 0 14px rgba(255, 79, 179, 0.6);
	margin: 0 !important;
}

.peppis-form-shell {
	background: #000000;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent-2), 0 0 40px rgba(255, 79, 179, 0.35);
}
.peppis-form-shell iframe { display: block; width: 100%; min-height: 1500px; border: 0; }

.fine-print {
	font-size: 0.85rem !important;
	color: var(--wp--preset--color--accent-4);
}

/* ------------------------------------------------------------------
   Menu list
------------------------------------------------------------------ */
.menu-item-row {
	border-bottom: 1px dashed var(--wp--preset--color--accent-6);
	padding-bottom: 0.9rem;
}
.menu-item-row h4 { margin: 0 !important; }

/* ------------------------------------------------------------------
   Gallery tiles
------------------------------------------------------------------ */
.peppis-tile {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--accent-6);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.peppis-tile:hover {
	border-color: var(--wp--preset--color--accent-2);
	box-shadow: 0 0 26px rgba(255, 79, 179, 0.35);
}
.peppis-tile .wp-block-cover__image-background { transition: transform 0.6s ease; }
.peppis-tile:hover .wp-block-cover__image-background { transform: scale(1.05); }

/* ------------------------------------------------------------------
   Map
------------------------------------------------------------------ */
.peppis-map {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--accent-6);
	box-shadow: 0 0 30px rgba(155, 92, 255, 0.2);
	line-height: 0;
}
.peppis-map iframe {
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: 0;
	filter: invert(92%) hue-rotate(185deg) saturate(0.7) brightness(0.95);
}

.info-label {
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
	margin-bottom: 0.2rem !important;
}

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */
.peppis-footer { border-top: 1px solid rgba(255, 79, 179, 0.2); }
.peppis-footer a { text-decoration: none; }
.peppis-footer a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------
   Motion preferences
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.neon-script--hero, .peppis-marquee p { animation: none !important; }
	.peppis-marquee p { padding-left: 0; white-space: normal; }
	.peppis-card, .peppis-tile, .wp-block-button__link { transition: none !important; }
}

/* Editor tweaks */
.editor-styles-wrapper .peppis-header { position: relative; }

/* Push pills to the bottom of lineup cards */
.peppis-card > .pill:last-child { margin-top: auto !important; }

.peppis-footer .wp-block-button__link { white-space: nowrap; }
@media (max-width: 600px) {
	.peppis-tile { min-height: 200px !important; }
	.neon-script--hero { font-size: clamp(5rem, 24vw, 7rem) !important; }
}


/* ------------------------------------------------------------------
   Neon logo (SVG traced from the Peppi's sign) + animation
------------------------------------------------------------------ */
.peppis-neon { margin: 0 !important; line-height: 0; }
.peppis-neon a { display: inline-block; line-height: 0; }
.peppis-neon img {
	display: block;
	height: auto;
	max-width: 100%;
	filter:
		drop-shadow(0 0 1.5px #FFFFFF)
		drop-shadow(0 0 6px #FF4FB3)
		drop-shadow(0 0 16px #FF2E8F)
		drop-shadow(0 0 38px #E6007E);
	animation:
		peppis-power-on 1.9s steps(1, end) both,
		peppis-hum 11s ease-in-out 2.2s infinite;
	will-change: opacity, filter;
}
.peppis-neon--small img {
	filter:
		drop-shadow(0 0 1px #FFFFFF)
		drop-shadow(0 0 4px #FF4FB3)
		drop-shadow(0 0 10px #E6007E);
	animation: peppis-power-on 1.6s steps(1, end) both, peppis-hum 13s ease-in-out 4s infinite;
}
.peppis-neon--hero { margin-bottom: 0 !important; }
.peppis-neon--hero img { width: min(760px, 88vw) !important; }

/* Sign "switching on": stutters, then holds */
@keyframes peppis-power-on {
	0%   { opacity: 0.08; }
	8%   { opacity: 0.9; }
	12%  { opacity: 0.15; }
	22%  { opacity: 1; }
	26%  { opacity: 0.3; }
	30%  { opacity: 0.95; }
	46%  { opacity: 0.5; }
	50%  { opacity: 1; }
	100% { opacity: 1; }
}

/* Gentle breathing glow with the odd buzz */
@keyframes peppis-hum {
	0%, 100% { opacity: 1; }
	40%      { opacity: 0.94; }
	71%      { opacity: 1; }
	72%      { opacity: 0.45; }
	73%      { opacity: 1; }
	74.5%    { opacity: 0.6; }
	75.5%    { opacity: 1; }
}

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}

@media (prefers-reduced-motion: reduce) {
	.peppis-neon img { animation: none !important; }
}

/* Catering call-out */
.peppis-catering__text { flex: 1 1 26rem; min-width: 0; }
.peppis-catering__text > p:last-child { max-width: 58ch; }
.peppis-catering__actions .wp-block-button__link { white-space: nowrap; }