/*
Theme Name: Scoop Calendar
Theme URI: https://calendar.scoopempire.com/
Author: Scoop Empire
Description: Lightweight theme for Scoop Calendar, styled to match the ScoopEmpire brand layout.
Version: 2.7
Text Domain: scoop-calendar-theme
*/

:root {
	--se-black: #000000;
	--se-white: #ffffff;
	--se-red: #fd0000;
	--se-blue: #0000ff;
	--se-text: #444444;
	--se-border: #e5e5e5;
	--se-font-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--se-font-nav: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--se-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--se-text);
	background: var(--se-white);
	overflow-x: clip;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 800;
	color: var(--se-black);
	line-height: 1.2;
	margin: 0 0 16px;
}

.se-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Compact header (all non-homepage pages) ---------- */

.se-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.se-header-top {
	background: var(--se-white);
	border-bottom: 3px solid transparent;
	border-image: linear-gradient(90deg, var(--se-red) 50%, var(--se-blue) 50%) 1;
}

.se-header-top .se-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	font-size: 13px;
}

.se-topbar-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
}

.se-topbar-menu a {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--se-black);
}

.se-topbar-menu a:hover {
	color: var(--se-red);
}

.se-social {
	display: flex;
	gap: 14px;
}

.se-social a {
	color: var(--se-black);
}

.se-header-logo {
	background: var(--se-black);
	padding: 14px 0;
}

.se-header-logo-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.se-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.se-header-logo-row .se-logo-crop {
	background-image: url("https://cdn.scoopempire.com/wp-content/uploads/2026/07/scoop-calendar-logo-white.png");
}

.se-header-logo-row .se-primary-menu {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.se-header-logo-row .se-primary-menu::-webkit-scrollbar {
	display: none;
}

.se-header-logo-row .se-primary-menu > ul {
	flex-wrap: nowrap;
	gap: 4px;
}

.se-header-logo-row .se-primary-menu > ul > li > a {
	width: 76px;
	padding: 8px 6px;
	gap: 4px;
	font-size: 12px;
	color: var(--se-white);
	transition: color 0.15s ease, background 0.15s ease;
}

.se-header-logo-row .se-primary-menu > ul > li > a:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--se-red);
}

.se-header-logo-row .se-menu-icon {
	width: 26px;
	height: 26px;
}

.se-header-logo-row .se-menu-icon svg {
	width: 24px;
	height: 24px;
}



/* Real logo assets (black wordmark for light backgrounds, white for dark),
   uploaded to the media library and verified byte-for-byte after upload —
   an earlier attempt at this same asset got silently corrupted in transit,
   so integrity was re-checked before wiring these in. Default/base case is
   the compact header on a white background, hence black here; the hero and
   footer override to the white variant since they sit on dark backgrounds. */
.se-logo-crop {
	display: block;
	width: 210px;
	height: 81px;
	background-image: url("https://cdn.scoopempire.com/wp-content/uploads/2026/07/scoop-calendar-logo-black.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.se-header-logo .se-site-title {
	color: var(--se-black);
	font-size: 32px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.se-header-cta {
	flex-shrink: 0;
}

/* ---------- Icon menu (webook.com style: icon stacked above a small
   label). Shared by both the compact header and the video hero. ---------- */

.se-primary-menu ul {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.se-primary-menu li {
	position: relative;
}

.se-primary-menu li.se-cities-item {
	display: none;
}

.se-primary-menu > ul > li > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	width: 108px;
	border-radius: 8px;
	font-family: var(--se-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--se-black);
	text-align: center;
}

.se-primary-menu > ul > li > a:hover {
	background: rgba(0, 0, 0, 0.05);
}

.se-menu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
}

.se-menu-icon svg {
	width: 32px;
	height: 32px;
}

.se-menu-label {
	line-height: 1.2;
	white-space: nowrap;
}

/* "Locations" gets a colored icon circle so it still reads as the one
   distinct utility item among an otherwise uniform icon set. */
.se-primary-menu li.se-cities-item .se-menu-icon {
	background: var(--se-blue);
	color: var(--se-white);
	border-radius: 50%;
	padding: 6px;
	width: 34px;
	height: 34px;
	box-sizing: content-box;
}

.se-primary-menu li.se-cities-item:hover .se-menu-icon,
.se-primary-menu li.se-cities-item.se-open .se-menu-icon {
	background: var(--se-red);
}

.se-primary-menu .se-caret-toggle {
	position: absolute;
	top: 8px;
	right: 2px;
	width: 18px;
	height: 18px;
}

.se-primary-menu .se-caret-toggle::after {
	border-left-width: 3px;
	border-right-width: 3px;
	border-top-width: 4px;
}

/* Dropdown (locations list) */

.se-primary-menu ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--se-white);
	border: 1px solid var(--se-border);
	border-radius: 4px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	padding: 8px 0;
	min-width: 180px;
	max-height: 320px;
	overflow-y: auto;
	z-index: 100;
	gap: 0;
}

.se-primary-menu li:hover > ul,
.se-primary-menu li.se-open > ul {
	display: block;
}

.se-primary-menu ul ul li {
	width: 100%;
}

.se-primary-menu ul ul a {
	display: block;
	padding: 10px 18px;
	width: auto;
	white-space: nowrap;
	font-weight: 600;
	font-size: 14px;
	color: var(--se-black);
	background: none;
	border-radius: 0;
	text-align: left;
}

.se-primary-menu ul ul a:hover {
	background: var(--se-border);
	color: var(--se-red);
}

/* Real, tappable caret (injected by JS) instead of a ::after pseudo-element,
   so mobile taps can toggle the dropdown instead of just following the link. */
.se-caret-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
}

.se-caret-toggle::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

/* ---------- Buttons ---------- */

.se-btn, a.se-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--se-red);
	color: var(--se-white) !important;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 3px;
	font-size: 14px;
	font-family: var(--se-font-body);
	white-space: nowrap;
}

.se-btn svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex-shrink: 0;
}

.se-btn:hover {
	opacity: 0.9;
}

/* Style the plain "Add Your Event" style links generated by page content, without needing extra classes */
.se-content a[href*="add-event"] {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--se-red);
	color: var(--se-white) !important;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 3px;
	font-size: 14px;
	margin-bottom: 24px;
}

.se-content a[href*="add-event"] svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ---------- Video hero (homepage only) ---------- */

.se-hero {
	position: relative;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	background: var(--se-black);
}

.se-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.se-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.65) 100%);
}

.se-hero-cta {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 3;
}

.se-hero-center {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 24px 24px;
}

/* Logo now sits directly on the video with a transparent background; a
   drop-shadow (which hugs the PNG's real alpha shape) keeps it legible
   instead of the old white card. */
.se-hero-logo-card {
	display: block;
}

.se-hero-logo-card .se-logo-crop {
	width: 190px;
	height: 73px;
	background-image: url("https://cdn.scoopempire.com/wp-content/uploads/2026/07/scoop-calendar-logo-white.png");
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}

.se-hero-menu-row {
	position: relative;
	z-index: 2;
	padding-bottom: 18px;
}

.se-hero-nav-menu > ul {
	gap: 4px;
}

.se-hero-nav-menu > ul > li > a {
	color: var(--se-white);
}

.se-hero-nav-menu > ul > li > a:hover {
	background: rgba(255, 255, 255, 0.15);
}

.se-hero-nav-menu li.se-cities-item .se-menu-icon {
	background: var(--se-blue);
	color: var(--se-white);
}

/* ---------- Content ---------- */

.se-main {
	min-height: 60vh;
	padding: 40px 0 60px;
}

.se-content h2 {
	text-transform: uppercase;
	font-size: 22px;
	letter-spacing: 0.02em;
}

/* ---------- Blog / archive cards ---------- */

.se-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

.se-post-card {
	border: 1px solid var(--se-border);
	border-radius: 4px;
	overflow: hidden;
}

.se-post-card .se-post-thumb img {
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
}

.se-post-card .se-post-body {
	padding: 16px;
}

.se-post-card h2 {
	font-size: 17px;
	margin-bottom: 8px;
}

.se-post-card p {
	font-size: 14px;
	color: var(--se-text);
}

/* ---------- "Coming Up" simple grid (kept for [scoop_coming_up] if used
   elsewhere; the homepage no longer uses this — see the tile carousels
   below). ---------- */

.scoop-event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	margin: 0 0 40px;
}

.scoop-event-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border: 1px solid var(--se-border);
	border-radius: 4px;
	transition: border-color 0.15s ease;
}

.scoop-event-card:hover {
	border-color: var(--se-red);
}

.scoop-event-date {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--se-red);
}

.scoop-event-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--se-black);
}

.scoop-event-venue {
	font-size: 13px;
	color: var(--se-text);
}

.scoop-no-events {
	font-size: 14px;
	color: var(--se-text);
	margin: 0 0 40px;
}

.scoop-view-full-calendar {
	margin: 0 0 48px;
}

/* ---------- "This Week in ..." color-tile carousels (homepage) ----------
   Measured directly off the real EventON tile (.eventon_list_event /
   .desc_trig_outter) via computed styles, not eyeballed from a
   screenshot: border-radius 20px + overflow hidden on the tile itself;
   a date badge (Poppins) sitting in a flex ROW next to a content column
   (Noto Sans for city/venue, Poppins for the title); solid per-event
   background color from evcal_event_color (set on 1421 of 1424 published
   events — the same source EventON's own tiles use).

   Tile width: sized so ~3 tiles are fully visible with a 4th peeking at
   the edge. Nav (prev/next) renders as its own row ABOVE the track, not
   absolutely positioned over the tile edges — that used to visually
   collide with the tile's rounded corners. scoop-calendar-nav.js moves
   that nav row into the immediately preceding <h2> so it reads as part
   of the section title, with vector chevron icons (matching the site's
   existing nav-menu icon language) instead of the generic ‹ › text
   glyphs that didn't fit the Poppins-driven look. */

.scoop-carousel {
	position: relative;
	margin: 0 0 48px;
}

.scoop-carousel-nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 12px;
}

.scoop-carousel-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.scoop-carousel-heading .scoop-carousel-nav {
	margin-bottom: 0;
}

.scoop-carousel-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 16px;
}

.scoop-carousel-track::-webkit-scrollbar {
	display: none;
}

.scoop-tile {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - 48px) / 3.4);
	min-height: 180px;
	border-radius: 20px;
	overflow: hidden;
	padding: 22px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	color: var(--se-white);
	transition: transform 0.15s ease;
}

.scoop-tile:hover {
	transform: translateY(-3px);
}

.scoop-tile-date {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	flex-shrink: 0;
	font-family: "Poppins", sans-serif;
}

.scoop-tile-dow,
.scoop-tile-mon {
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
}

.scoop-tile-day {
	font-size: 26px;
	font-weight: 700;
}

.scoop-tile-content {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.scoop-tile-city {
	font-family: "Noto Sans", arial;
	font-size: 11px;
	font-weight: 400;
}

.scoop-tile-title {
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.2;
}

.scoop-tile-venue {
	font-family: "Noto Sans", arial;
	font-size: 11px;
	font-weight: 400;
	margin-top: auto;
}

.scoop-carousel-arrow {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--se-black);
	color: var(--se-white);
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease;
}

.scoop-carousel-arrow svg {
	width: 16px;
	height: 16px;
}

.scoop-carousel-arrow:hover {
	background: var(--se-red);
}

@media (max-width: 900px) {
	.scoop-tile {
		flex: 0 0 calc((100% - 32px) / 2.3);
	}
}

@media (max-width: 600px) {
	.scoop-carousel-nav {
		display: none;
	}
	.scoop-tile {
		flex: 0 0 78%;
	}
}

/* ---------- Category page: top-locations pill row + carousels ----------
   .seelp-top-cities / .seelp-city-btn measured directly from the
   [seelp_top_cities] shortcode's own rendered output (it ships its own
   inline <style> block on the homepage) so the category-page version
   matches pixel-for-pixel instead of approximating. */

.seelp-top-cities {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
	gap: 10px;
	padding: 4px 0 20px;
}

.seelp-city-btn {
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 13px 22px;
	text-decoration: none;
	white-space: nowrap;
	text-align: center;
	box-sizing: border-box;
	transition: filter 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.seelp-city-btn:hover,
.seelp-city-btn:focus {
	filter: brightness(1.12);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.seelp-city-btn:active {
	transform: translateY(0);
	filter: brightness(0.96);
}

.scoop-category-sections {
	padding-top: 24px;
}

.scoop-category-sections h2 {
	text-transform: uppercase;
	font-size: 22px;
	letter-spacing: 0.02em;
}

@media (max-width: 782px) {
	.seelp-top-cities {
		gap: 8px;
	}
	.seelp-city-btn {
		flex: 1 1 calc(50% - 8px);
		padding: 11px 14px;
	}
}

/* ---------- Single event page: region link section ---------- */

.scoop-event-region-section {
	text-align: right;
	margin: 32px 0;
	padding-top: 24px;
	border-top: 1px solid var(--se-border);
}

.scoop-event-region-section .scoop-region-link {
	margin: 0 0 8px 8px;
}

/* ---------- Footer ---------- */

.se-footer {
	background: #1a1a1a;
	color: #cccccc;
	padding: 0 0 30px;
	margin-top: 40px;
}

.se-footer-top {
	padding: 30px 0;
}

.se-footer-top .se-container {
	display: flex;
	justify-content: center;
}

.se-footer-logo .se-logo-crop {
	width: 200px;
	height: 77px;
	background-image: url("https://cdn.scoopempire.com/wp-content/uploads/2026/07/scoop-calendar-logo-white.png");
}

.se-footer-rule {
	border: none;
	border-top: 1px solid #333;
	margin: 28px 0;
}

.se-footer-utility {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	font-size: 14px;
	padding-top: 30px;
}

.se-footer-utility a:hover {
	color: var(--se-white);
}

.se-footer-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.se-footer-col {
	flex: 1 1 200px;
	min-width: 200px;
}

.se-footer-col h3 {
	color: var(--se-white);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.se-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.se-footer-col a {
	display: inline-block;
	color: #cccccc;
	font-size: 14px;
	line-height: 2.1;
}

.se-footer-col a:hover {
	color: var(--se-red);
}

.se-footer-bottom {
	border-top: 1px solid #333;
	margin: 30px 24px 0;
	padding-top: 20px;
	text-align: center;
	font-size: 13px;
	color: #888;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
	.se-header-top .se-container {
		font-size: 12px;
	}
	.se-topbar-menu ul {
		gap: 12px;
	}
	.se-header-logo {
		padding: 10px 0;
	}
	.se-header-logo-row {
		flex-wrap: wrap;
		gap: 10px;
	}
	.se-header-logo-row .se-primary-menu {
		order: 3;
		flex: 1 1 100%;
	}
	.se-logo-crop {
		width: 150px;
		height: 58px;
	}
	.se-header-cta {
		padding: 8px 12px;
		font-size: 12px;
	}
	.se-header-cta svg {
		width: 12px;
		height: 12px;
	}
	.se-primary-menu > ul > li > a {
		width: 86px;
		padding: 10px 8px;
		font-size: 12px;
	}
	.se-primary-menu ul ul {
		position: static;
		transform: none;
		box-shadow: none;
		border: none;
		display: none;
		max-height: none;
	}
	.se-primary-menu li:hover > ul,
	.se-primary-menu li.se-open > ul {
		display: block;
	}
	.se-footer-columns {
		gap: 28px;
	}
	.se-hero {
		min-height: 300px;
	}
	.se-hero-cta {
		top: 14px;
		right: 14px;
		padding: 8px 14px;
		font-size: 12px;
	}
	.se-hero-cta svg {
		width: 12px;
		height: 12px;
	}
	.se-hero-logo-card .se-logo-crop {
		width: 130px;
		height: 50px;
	}
	.se-hero-center {
		padding: 44px 20px 20px;
	}
}

/* Icon menu row is too wide to wrap gracefully on narrow phones (an odd
   number of items strands the last one alone on its own line), so below
   this width it becomes a single horizontally-scrollable strip instead. */
@media (max-width: 700px) {
	.se-primary-menu > ul {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.se-primary-menu > ul::-webkit-scrollbar {
		display: none;
	}
	.se-primary-menu > ul > li {
		flex-shrink: 0;
	}
}