/*
 * K.I.S.S. Social Collective — brand foundation
 * Phase 3 design system (brief §1, §5). Tokens only; component CSS lives elsewhere.
 */

/* ---------------------------------------------------------------- *
 * Self-hosted fonts (variable axes; one file covers all weights)
 * ---------------------------------------------------------------- */

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/playfair-display-variable.woff2") format("woff2-variations"),
	     url("../fonts/playfair-display-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-variable.woff2") format("woff2-variations"),
	     url("../fonts/montserrat-variable.woff2") format("woff2");
}

/* ---------------------------------------------------------------- *
 * Brand tokens (CSS custom properties; matches Elementor kit values)
 * ---------------------------------------------------------------- */

:root {
	/* Colors — brief §1 */
	--kiss-midnight: #0D0D0F;
	--kiss-ivory:    #F4F0E6;
	--kiss-burgundy: #4A1F2D;
	--kiss-gold:     #FFD700;
	--kiss-steel:    #8A8F98;

	/* Font stacks — brief §1 */
	--kiss-font-serif: "Playfair Display", Didot, "DM Serif Display", Georgia, serif;
	--kiss-font-sans:  "Montserrat", "Proxima Nova", Inter, "Helvetica Neue", system-ui, sans-serif;
}

/* ---------------------------------------------------------------- *
 * Foundation defaults (body + headings get the right family even
 * before Elementor's kit-frontend.css loads — minimizes FOUT)
 * ---------------------------------------------------------------- */

body {
	background-color: var(--kiss-midnight);
	color: var(--kiss-ivory);
	font-family: var(--kiss-font-sans);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kiss-font-serif);
	color: var(--kiss-ivory);
}

/* H4 is sans (accent) per brief §1 type scale */
h4 {
	font-family: var(--kiss-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Link defaults — gold accent, ivory on hover */
a {
	color: var(--kiss-gold);
	text-decoration: none;
	transition: color 160ms ease;
}

a:hover,
a:focus-visible {
	color: var(--kiss-ivory);
}

a:focus-visible {
	outline: 2px solid var(--kiss-gold);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- *
 * Accessibility — Phase 9 (brief §11)
 *
 * Keyboard focus indicators on all interactive elements that don't
 * already have explicit styling (forms, generic buttons, summary).
 * Skip-link visible-on-focus styling (Hello Elementor ships the
 * markup; we make it visually-appearing on keyboard focus).
 * prefers-reduced-motion handling at the bottom of this file.
 * ---------------------------------------------------------------- */

/* Skip-to-content — hidden until keyboard focuses it */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
	background-color: var(--kiss-gold);
	color: var(--kiss-midnight);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-size: 14px;
	font-weight: 600;
	font-family: var(--kiss-font-sans);
	height: auto;
	left: 12px;
	line-height: 1;
	padding: 12px 18px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	top: 12px;
	width: auto;
	z-index: 100000;
	outline: 2px solid var(--kiss-midnight);
	outline-offset: 2px;
}

/* Generic button focus — covers Elementor buttons that aren't .kiss-btn-solid */
button:focus-visible,
.elementor-button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--kiss-gold);
	outline-offset: 3px;
}

/* Form inputs — focus ring matches the link/button style */
input:not([type="hidden"]):focus,
input:not([type="hidden"]):focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
	outline: 2px solid var(--kiss-gold);
	outline-offset: 2px;
	border-color: var(--kiss-gold);
}

/* ---------------------------------------------------------------- *
 * Header — center the logo to the viewport regardless of nav widths
 * (left + right cells expand equally, middle is logo's natural size)
 * ---------------------------------------------------------------- */

#kiss-header.e-con {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}

/* Side nav cells: keep menus flush to their outer edges */
#kiss-header.e-con > .elementor-element:nth-child(1) {
	justify-self: start;
}
#kiss-header.e-con > .elementor-element:nth-child(3) {
	justify-self: end;
}

/* ---------------------------------------------------------------- *
 * Button polish — gradient + shadow on solid gold buttons sitewide.
 *
 * Tagging strategy: each solid-gold button widget in the page JSONs
 * has `_css_classes: "kiss-btn-solid"` in its settings (Elementor's
 * Advanced > CSS Classes field). Elementor renders the class on the
 * widget wrapper (.elementor-widget), so the selector is `.kiss-btn-solid
 * .elementor-button`. Ghost / transparent buttons don't get the class
 * and are therefore unaffected.
 *
 * `!important` is required to override Elementor's per-element rules
 * which carry (0,4,0) specificity from the auto-generated chain
 * `.elementor-NN .elementor-element.elementor-element-XX .elementor-button`.
 * ---------------------------------------------------------------- */

.kiss-btn-solid .elementor-button {
	background-image: linear-gradient(180deg, #FFEE6E 0%, var(--kiss-gold) 50%, #C9A800 100%) !important;
	box-shadow:
		0 6px 18px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
	text-shadow: none !important;
	transition: background-image 200ms ease, box-shadow 200ms ease, transform 200ms ease, color 200ms ease, background-color 200ms ease !important;
}

.kiss-btn-solid .elementor-button:hover,
.kiss-btn-solid .elementor-button:focus,
.kiss-btn-solid .elementor-button:focus-visible {
	background-image: linear-gradient(180deg, #FFF2A8 0%, #FFEE6E 50%, var(--kiss-gold) 100%) !important;
	background-color: var(--kiss-gold) !important;
	color: var(--kiss-midnight) !important;
	box-shadow:
		0 10px 26px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
	transform: translateY(-1px);
}

.kiss-btn-solid .elementor-button:active {
	transform: translateY(0);
	box-shadow:
		0 3px 10px rgba(0, 0, 0, 0.5),
		inset 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* ---------------------------------------------------------------- *
 * Team grid — used by [kiss_team_grid] on /about/ §kissAB30
 * ---------------------------------------------------------------- */

.kiss-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
	width: 100%;
}

@media (min-width: 768px) {
	.kiss-team-grid:has(> .kiss-team-card:only-child) {
		display: flex;
		justify-content: center;
	}
	.kiss-team-grid:has(> .kiss-team-card:only-child) .kiss-team-card {
		max-width: 360px;
	}
}

.kiss-team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

.kiss-team-photo {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #131316;
	border: 1px solid #1f1f23;
}

.kiss-team-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.kiss-team-name {
	font-family: var(--kiss-font-serif);
	font-weight: 700;
	font-size: 32px;
	color: var(--kiss-gold);
	margin: 8px 0 0;
	letter-spacing: 1px;
}

.kiss-team-role {
	font-family: var(--kiss-font-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--kiss-ivory);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
}

.kiss-team-socials {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
}

.kiss-team-socials li {
	margin: 0;
	padding: 0;
}

.kiss-team-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--kiss-gold);
	color: #000000;
	text-decoration: none;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.kiss-team-social:hover,
.kiss-team-social:focus-visible {
	background: #FFEE6E;
	color: #000000;
	transform: translateY(-2px);
	box-shadow:
		0 8px 18px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
	outline: none;
}

.kiss-team-social svg {
	width: 22px;
	height: 22px;
	display: block;
	fill: #000000;
}

/* Force the glyph fill regardless of Elementor's link-color cascade.
 * `fill="currentColor"` on the inline SVG paths resolves to the <a>'s
 * computed `color`, and Elementor's widget CSS can override our color
 * rule. Pinning fill directly on the path element wins unconditionally. */
.kiss-team-social svg path {
	fill: #000000;
}

/* Visually hidden label — kept for screen readers + future tooltips */
.kiss-team-social__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- *
 * Footer Contact Us column — used by [kiss_brand_contact] and the
 * brand socials row — used by [kiss_brand_socials]. Both render in
 * the K.I.S.S. Footer Theme Builder template (post 48).
 * ---------------------------------------------------------------- */

.kiss-brand-contact {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kiss-brand-contact li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
}

.kiss-brand-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	color: var(--kiss-gold);
}

.kiss-brand-contact__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

.kiss-brand-contact__text {
	font-family: var(--kiss-font-sans);
	font-size: 15px;
	font-weight: 400;
	color: var(--kiss-ivory);
	line-height: 1.5;
}

a.kiss-brand-contact__text {
	transition: color 160ms ease;
}

a.kiss-brand-contact__text:hover,
a.kiss-brand-contact__text:focus-visible {
	color: var(--kiss-gold);
	outline: none;
}

/* Brand socials reuse .kiss-team-socials styling — but center alignment
 * via the parent footer container's flex_justify_content is good. */
.kiss-brand-socials {
	margin: 0;
}

/* ---------------------------------------------------------------- *
 * Event Recaps masonry — used by [kiss_recap_archive_grid] on
 * /event-recaps/ archive page
 * ---------------------------------------------------------------- */

/* CSS Grid (not CSS Columns) for clean hover behavior. Earlier
 * implementation used `columns: 3 280px` which gave true masonry
 * packing but Safari/WebKit has rendering quirks with transform +
 * box-shadow across column boundaries (z-index doesn't always fix it
 * because each column gets its own paint layer). Grid gives each
 * tile its own well-defined cell so hover lift + gold border + shadow
 * stay contained. Trade-off: uniform tile heights instead of true
 * masonry — but image aspect ratios still vary visually inside each
 * cell because of `object-fit: cover` on the img. */
.kiss-recap-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* fixed 3 columns desktop */
	gap: 24px;
	isolation: isolate; /* single stacking context for child z-index */
}

/* Tablet: drop to 2 columns so tiles don't get cramped */
@media (max-width: 900px) {
	.kiss-recap-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: single column for full-width photos */
@media (max-width: 580px) {
	.kiss-recap-grid {
		grid-template-columns: 1fr;
	}
}

.kiss-recap-grid > .kiss-recap-tile {
	display: block;
	position: relative;
	z-index: 1; /* baseline for hover z-index bump */
	overflow: hidden;
	border: 1px solid #1f1f23;
	background: #131316;
	text-decoration: none;
	color: var(--kiss-ivory);
	transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

/* Hover state: lift + gold border + tighter shadow. z-index bump
 * pops the tile above its neighbors so neither border NOR shadow
 * get visually clipped by adjacent column items.
 *
 * Shadow tightened (vertical offset + blur reduced) so the soft halo
 * doesn't leak across the CSS-columns gap and look like a separate
 * tile is appearing in an empty slot. */
.kiss-recap-tile:hover,
.kiss-recap-tile:focus-visible {
	z-index: 2;
	border-color: var(--kiss-gold);
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
	outline: none;
}

/* Tile photo gets a uniform 4:3 aspect ratio so every tile in a row
 * matches height. object-fit: cover scales any source aspect ratio
 * to fill the slot cleanly (no letterboxing). */
.kiss-recap-tile__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.kiss-recap-tile__placeholder {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #131316 0%, var(--kiss-burgundy) 100%);
}

.kiss-recap-tile__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 28px 20px 18px;
	background: linear-gradient(
		to top,
		rgba(13, 13, 15, 0.95) 0%,
		rgba(13, 13, 15, 0.6) 55%,
		transparent 100%
	);
}

/* Recap archive tile — title on top, date below on its own line. Wraps
 * to multiple lines for long event names so the full title is always
 * readable (no ellipsis). Date sits underneath the wrapped title.
 *
 * !important + parent-class chain to defeat Elementor kit's global
 * `h2 { font-size: 48px }` rule which would otherwise inflate the tile
 * title to header-banner size. */
.kiss-recap-grid .kiss-recap-tile .kiss-recap-tile__title {
	margin: 0 !important;
	font-family: var(--kiss-font-serif) !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	line-height: 1.3 !important;
	color: var(--kiss-ivory) !important;
}

.kiss-recap-tile__date {
	display: block;
	margin-top: 4px;
	font-family: var(--kiss-font-sans);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--kiss-gold);
}

/* ---------------------------------------------------------------- *
 * Reduced-motion — Phase 9 (brief §11)
 *
 * Honors the user's OS-level "Reduce Motion" preference (System
 * Settings > Accessibility > Display on macOS, similar on iOS/Android).
 * Disables transforms + transitions + animations across all the brand
 * components that have them, so vestibular-disorder users + folks with
 * motion sensitivity get a static experience.
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/* Specifically disable our hover lift / parallax effects */
	.kiss-btn-solid .elementor-button:hover,
	.kiss-team-social:hover,
	.kiss-recap-tile:hover {
		transform: none !important;
	}

	/* Disable fixed-attachment hero parallax (causes motion on scroll) */
	#kissH010,
	.elementor-element-kissH010 {
		background-attachment: scroll !important;
	}
}

/* ---------------------------------------------------------------- *
 * Event recap credits — photographer + videographer attribution
 * rendered below the gallery via [kiss_recap_gallery] (Phase 11).
 * ---------------------------------------------------------------- */

.kiss-recap-credits {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 18px 0 0;
	padding: 14px 16px;
	border-top: 1px solid #1f1f23;
	font-family: var(--kiss-font-sans);
	font-size: 12px;
	color: var(--kiss-steel);
	text-transform: uppercase;
	letter-spacing: 2px;
}

.kiss-recap-credit {
	white-space: nowrap;
}

.kiss-recap-credit strong {
	color: var(--kiss-gold);
	margin-right: 6px;
	font-weight: 600;
}

/* ---------------------------------------------------------------- *
 * Event recap single-post gallery — masonry layout with Elementor
 * lightbox integration. Used by [kiss_recap_gallery] in the Single
 * Event Recap Theme Builder template.
 * ---------------------------------------------------------------- */

.kiss-recap-gallery {
	columns: 4 240px;
	column-gap: 16px;
	margin: 0 0 24px;
}

@media (max-width: 1200px) {
	.kiss-recap-gallery { columns: 3 240px; }
}

@media (max-width: 900px) {
	.kiss-recap-gallery { columns: 2 220px; }
}

@media (max-width: 580px) {
	.kiss-recap-gallery { columns: 1; }
}

.kiss-recap-gallery__item {
	display: block;
	margin: 0 0 16px;
	break-inside: avoid;
	overflow: hidden;
	background: #131316;
	border: 1px solid #1f1f23;
	transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.kiss-recap-gallery__item:hover,
.kiss-recap-gallery__item:focus-visible {
	border-color: var(--kiss-gold);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
	outline: none;
}

.kiss-recap-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 240ms ease;
}

.kiss-recap-gallery__item:hover .kiss-recap-gallery__img {
	opacity: 0.92;
}

/* Venue + Photographer + Videographer meta row — sits in the Single
 * Event Recap hero just below the title. Tight margin so it visually
 * groups with the title (no perceived divider between them). */
.kiss-recap-credits {
	margin: 0;
	font-family: var(--kiss-font-sans);
	font-size: 12px;
	color: var(--kiss-steel);
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: left;
	border: 0;
}

/* Belt-and-suspenders: kill any inherited border on credit links so
 * there's no underline-ish artifact that could read as a divider line. */
.kiss-recap-credits a {
	border: 0;
	text-decoration: none;
}

.kiss-recap-credits a:hover,
.kiss-recap-credits a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--kiss-gold);
	text-underline-offset: 3px;
}

.kiss-recap-credit {
	display: inline-block;
	margin: 0 12px;
}

.kiss-recap-credit strong {
	color: var(--kiss-gold);
	font-weight: 600;
	margin-right: 4px;
}

/* ---------------------------------------------------------------- *
 * Date pill on the Single Event Recap hero — the date widget has
 * .kiss-date-pill class + gold _background_color. Default text color
 * (ivory, inherited from body) on gold fails contrast. Pin to midnight
 * black + tighter weight so it reads cleanly.
 * ---------------------------------------------------------------- */

.kiss-date-pill .elementor-shortcode {
	color: var(--kiss-midnight);
	font-family: var(--kiss-font-sans);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* ---------------------------------------------------------------- *
 * Recap video player — used by [kiss_recap_video] in the Single
 * Event Recap hero. 16:9 aspect ratio with viewport-cap so the
 * video never exceeds visible space (controls always reachable
 * without scrolling). max-height kicks in on shorter viewports;
 * aspect-ratio then shrinks width to maintain proportions.
 * ---------------------------------------------------------------- */

/* .kiss-recap-video is now the <iframe> itself (no wrapper div) — the
 * shortcode emits the iframe directly with inline aspect-ratio + min-height,
 * which gives a replaced element its main-axis size reliably even inside
 * Elementor's e-flex column container. CSS rules here are intentionally
 * empty so they don't conflict with the inline styles; layout lives in the
 * shortcode output for guaranteed precedence. */

/* ---------------------------------------------------------------- *
 * Nav menu dropdown (Elementor Pro Nav Menu widget submenus) — used
 * by the Merch dropdown in the primary-right header menu (containing
 * Cart + My Account child items).
 *
 * Default positioning aligns dropdown LEFT to parent item, which
 * causes wide labels like "My Account" to extend rightward and
 * visually overlap with adjacent top-level items (About, FAQ,
 * Contact). Right-align so the dropdown extends LEFTWARD instead.
 *
 * Hover state defaults to gray/silver — override to brand gold.
 * ---------------------------------------------------------------- */

#kiss-header .elementor-nav-menu .sub-menu,
.elementor-nav-menu .sub-menu {
	left: auto !important;
	right: 0 !important;
}

/* Dropdown panel — white background, black text by default.
 * On hover/focus/active: black text on GOLD background. */
#kiss-header .elementor-nav-menu .sub-menu,
.elementor-nav-menu .sub-menu {
	background-color: var(--kiss-ivory) !important;
}

#kiss-header .elementor-nav-menu .sub-menu li a,
.elementor-nav-menu .sub-menu li a {
	color: var(--kiss-midnight) !important;
	background-color: transparent !important;
}

#kiss-header .elementor-nav-menu .sub-menu li a:hover,
#kiss-header .elementor-nav-menu .sub-menu li a:focus-visible,
#kiss-header .elementor-nav-menu .sub-menu li.current-menu-item > a,
.elementor-nav-menu .sub-menu li a:hover,
.elementor-nav-menu .sub-menu li a:focus-visible,
.elementor-nav-menu .sub-menu li.current-menu-item > a {
	color: var(--kiss-midnight) !important;
	background-color: var(--kiss-gold) !important;
}

/* ================================================================ *
 * A11y contrast fixes — 2026-05-24
 * ---------------------------------------------------------------- *
 * Pa11y / Lighthouse caught several contrast failures from widgets
 * that fell back to Hello Elementor default colors instead of our
 * brand palette. Each block below maps one finding to a specific fix.
 * ================================================================ */

/* -- Recent Recaps + More Recaps (Elementor Posts widget, cards skin)
 * The "cards" skin paints the post text area on a WHITE card background
 * by default. Coloring text alone wouldn't help because pa11y found
 * 1.14:1 (ivory on white). Flip both: the card text area gets a midnight
 * background, and the text inside gets the brand palette.
 *
 * Hierarchy on cards: title ivory, excerpt ivory, meta light-steel
 * (lifted from #aaa to a brighter neutral that clears 4.5:1 on midnight),
 * read-more gold. */
.elementor-widget-posts .elementor-post__card,
.elementor-widget-posts .elementor-post__text {
	background-color: var(--kiss-midnight) !important;
}
.elementor-widget-posts .elementor-post__card {
	border: 1px solid #1f1f23;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.elementor-widget-posts .elementor-post__text {
	padding: 20px 24px 24px !important;
}
.elementor-widget-posts .elementor-post__title,
.elementor-widget-posts .elementor-post__title a {
	color: var(--kiss-ivory) !important;
}
.elementor-widget-posts .elementor-post__title a:hover,
.elementor-widget-posts .elementor-post__title a:focus-visible {
	color: var(--kiss-gold) !important;
}
.elementor-widget-posts .elementor-post__excerpt,
.elementor-widget-posts .elementor-post__excerpt p {
	color: var(--kiss-ivory) !important;
}
/* Meta steel — bump to #b8bec6 which clears 4.5:1 on midnight (~9:1) */
.elementor-widget-posts .elementor-post__meta-data,
.elementor-widget-posts .elementor-post__meta-data span,
.elementor-widget-posts .elementor-post-date,
.elementor-widget-posts .elementor-post-avatar {
	color: #b8bec6 !important;
}
.elementor-widget-posts .elementor-post__read-more {
	color: var(--kiss-gold) !important;
	text-decoration: none;
	font-weight: 600;
}
.elementor-widget-posts .elementor-post__read-more:hover,
.elementor-widget-posts .elementor-post__read-more:focus-visible {
	color: var(--kiss-ivory) !important;
	text-decoration: underline;
}

/* -- Eventbrite "Book Now" button --------------------------------
 * The Eventbrite Events for Elementor plugin emits a button with class
 * .eee-btn / .eee-booknow-btn that defaults to white text on white bg
 * (1:1 contrast). Override to the brand gold-with-midnight-text treatment. */
.eee-btn,
.eee-btn.eee-booknow-btn,
.eee-btn.eee-checkout-trigger {
	background-color: var(--kiss-gold) !important;
	color: var(--kiss-midnight) !important;
	border: 2px solid var(--kiss-gold) !important;
	border-radius: 0 !important;
	font-family: var(--kiss-font-sans) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 2px !important;
	padding: 12px 24px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background 200ms ease, color 200ms ease;
}
.eee-btn:hover,
.eee-btn:focus-visible {
	background-color: var(--kiss-ivory) !important;
	color: var(--kiss-midnight) !important;
}

/* -- Newsletter "Join" form button --------------------------------
 * Elementor form submit button on the homepage newsletter widget was
 * defaulting to the kit accent gold for BOTH bg and text (1.4:1).
 * Force midnight text on gold bg — this is the same treatment as the
 * brand-wide kiss-btn-solid class, applied here without needing to
 * tag the form's button widget. */
.elementor-widget-form .elementor-button,
.elementor-widget-form .elementor-button .elementor-button-text {
	color: var(--kiss-midnight) !important;
}
.elementor-widget-form .elementor-button:hover,
.elementor-widget-form .elementor-button:focus-visible,
.elementor-widget-form .elementor-button:hover .elementor-button-text,
.elementor-widget-form .elementor-button:focus-visible .elementor-button-text {
	color: var(--kiss-midnight) !important;
}

/* ================================================================ *
 * Mobile fixes — 2026-05-24
 * ---------------------------------------------------------------- *
 * Tightening pass after real-device review. Each block addresses a
 * specific issue reported on the iPhone-size viewport. Keep these
 * grouped for traceability if any need to be reverted.
 * ================================================================ */

/* -- Mobile nav drawer item hover/active color -------------------
 * The mobile dropdown drawer (Elementor nav-menu collapsed form) uses
 * its own .elementor-item--main-anchor + dropdown-item styles that
 * fall through to Elementor's default "silver" highlight for the
 * active page when no widget-level dropdown_color is set. The desktop
 * menus already specify gold via color_link_hover/active, but those
 * apply to the inline menu, not the dropdown drawer. Force gold on
 * hover/focus/active so the brand color carries into the mobile drawer.
 * Use !important because Elementor's per-widget post-NN.css writes
 * the dropdown rules with the .elementor-NN .elementor-element-... prefix
 * — high specificity that we need to beat without rewriting JSON. */
.elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-nav-menu--dropdown a.elementor-item:focus,
.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown a.elementor-item.highlighted,
.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown a.elementor-sub-item:focus,
.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active,
.elementor-nav-menu--dropdown li.current-menu-item > a.elementor-item,
.elementor-nav-menu--dropdown li.current-menu-ancestor > a.elementor-item {
	background-color: var(--kiss-gold) !important;
	color: var(--kiss-midnight) !important;
}

/* -- Single Event Recap hero ------------------------------------- *
 * The video is a flex-column item with aspect-ratio: 16/9. Flex's
 * default min-height: auto can squish a child that has no intrinsic
 * height (the iframe is absolutely positioned, so the .kiss-recap-video
 * parent has zero content-height to fall back on). Pinning flex-shrink:0
 * forces the container to honor its computed aspect-ratio height instead
 * of collapsing under sibling pressure, which is what was making the
 * title visually overlap the video frame. */
.elementor-element-kissSR01 > .elementor-element-kissSR06 {
	flex-shrink: 0;
}
.kiss-recap-video {
	flex-shrink: 0;
}

/* The title widget has typography_line_height: 72px set at desktop
 * (paired with 64px font). On mobile, font-size drops to 36px but
 * Elementor doesn't generate a paired line-height override, so the
 * title renders at 36px text with 72px line boxes — twice the height
 * it needs. Compress to a sane ratio on phones so the hero doesn't
 * waste a screen of vertical space. */
@media (max-width: 767px) {
	.elementor-element-kissSR04 .elementor-heading-title {
		line-height: 1.15 !important;
	}
}

/* -- Team photos — circle mask ----------------------------------- *
 * Brief change: team cards use a circular photo crop across all
 * layouts (matches the live site's existing team card treatment).
 * The existing rule is aspect-ratio:1/1 square; flip to a circle. */
.kiss-team-photo {
	border-radius: 50%;
}
.kiss-team-photo img {
	object-position: center center;
}

/* -- Footer mobile centering + tighter section gap --------------- *
 * Footer is built with column containers (.kissf011, kissf030, kissf020)
 * that align their inner widgets flex-start (left) by default. On the
 * mobile breakpoint the columns stack and reading left-aligned blocks
 * against a centered logo feels off. Force center alignment across all
 * the footer text/heading widgets on phones. Also tighten the outer
 * container gap (56px is a lot on a narrow screen). */
@media (max-width: 767px) {
	#kiss-footer {
		gap: 32px !important;
	}
	#kiss-footer .e-con-inner,
	#kiss-footer > .elementor-element {
		row-gap: 24px;
	}
	#kiss-footer .elementor-element-kissf010 {
		row-gap: 24px;
	}
	/* Brand column: center logo + tagline */
	#kiss-footer .elementor-element-kissf011,
	#kiss-footer .elementor-element-kissf011 .elementor-widget-image,
	#kiss-footer .elementor-element-kissf011 .elementor-widget-text-editor {
		text-align: center !important;
		align-items: center !important;
	}
	#kiss-footer .elementor-element-kissf011 .elementor-widget-image img {
		margin-left: auto;
		margin-right: auto;
	}
	/* About + Contact columns: center their heading + body */
	#kiss-footer .elementor-element-kissf030,
	#kiss-footer .elementor-element-kissf020 {
		align-items: center !important;
		text-align: center !important;
	}
	#kiss-footer .elementor-element-kissf030 .elementor-widget,
	#kiss-footer .elementor-element-kissf020 .elementor-widget {
		text-align: center !important;
		width: 100%;
	}
	#kiss-footer .elementor-element-kissf030 .elementor-heading-title,
	#kiss-footer .elementor-element-kissf020 .elementor-heading-title {
		text-align: center !important;
	}
	/* Contact shortcode rows (address line, email) — center the
	 * icon+text pairs that kiss_brand_contact emits. */
	#kiss-footer .elementor-element-kissf020 .kiss-brand-contact,
	#kiss-footer .elementor-element-kissf020 .kiss-brand-contact-row {
		justify-content: center;
		text-align: center;
	}
	/* Bottom row (copyright + legal links): stack centered instead
	 * of space-between which collapses awkwardly on narrow screens. */
	#kiss-footer .elementor-element-kissf050 {
		justify-content: center !important;
		text-align: center !important;
	}
	#kiss-footer .elementor-element-kissf050 .elementor-widget-text-editor p {
		text-align: center !important;
	}
}