/* ==========================================================================
   One Shot Events Calendar - front-end styles
   --------------------------------------------------------------------------
   Colors and type here are pulled directly from the live "Dodge County
   Pioneers" roster on oneshotathistory.com (navy header / gold accent /
   parchment cards / IBM Plex Sans + Mulish), so this widget matches the
   rest of the site out of the box.

   Want to change something? Every color used below comes from the
   variables in this ":root"-style ".osec-wrap" block - edit the values
   there and the whole widget updates.
   ========================================================================== */
.osec-wrap {
	--osec-navy:         #1f3a5f; /* header bars, nav-style buttons, event-date block */
	--osec-navy-dark:    #1d2327; /* darkest accents / focus rings */
	--osec-cream:        #f4efe2; /* card / calendar background (matches roster table bg) */
	--osec-cream-text:   #f0e8d4; /* text sitting on navy */
	--osec-text:         #2a2520; /* body text on cream (matches roster text color) */
	--osec-muted:        #7a7365; /* secondary/meta text */
	--osec-border:       #d9cdb0; /* soft borders on cream cards */
	--osec-gold:         #a4893b; /* accent color - "Unearth It" button gold */
	--osec-gold-tint:    rgba(168, 130, 63, .10); /* alternating-row / today tint */

	/* Badge pill colors, lifted from the roster's ENROLLMENT / OFFICIAL /
	   MEMORIAL tags */
	--osec-badge-gold-bg:   #ecdfc2;
	--osec-badge-gold-text: #6b4f17;
	--osec-badge-gray-bg:   #e2e2e2;
	--osec-badge-gray-text: #444444;
	--osec-badge-wine-bg:   #e4d2d2;
	--osec-badge-wine-text: #7a2d2d;

	--osec-font-heading: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--osec-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	max-width: 900px;
	margin: 2em auto;
	font-family: var(--osec-font-body);
	color: var(--osec-text);
	box-sizing: border-box;
}
.osec-wrap * { box-sizing: border-box; }

/* ---------------- Calendar grid ---------------- */
.osec-calendar {
	background: var(--osec-cream);
	border: 1px solid var(--osec-border);
	border-radius: 6px;
	padding: 20px;
	margin-bottom: 32px;
}
.osec-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.osec-header-center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}
.osec-month-label {
	margin: 0;
	font-family: var(--osec-font-heading);
	font-weight: 800;
	font-size: 1.25em;
	color: var(--osec-navy);
	text-align: center;
	letter-spacing: .01em;
}
/* The site seal - kept small so it reads as a brand mark next to the
   month name, not a banner. Hide with the shortcode's logo="no" attribute. */
.osec-brand-logo {
	height: 40px;
	width: 40px;
	object-fit: contain;
	border-radius: 50%;
	flex-shrink: 0;
}
.osec-nav {
	background: var(--osec-gold);
	color: #fff;
	border: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
	transition: opacity .15s ease;
}
.osec-nav:hover { opacity: .85; }

.osec-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	font-family: var(--osec-font-body);
	font-size: .78em;
	font-weight: 600;
	color: var(--osec-muted);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.osec-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.osec-day {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	font-family: var(--osec-font-body);
	font-size: .9em;
	color: var(--osec-text);
}
.osec-day.osec-empty { visibility: hidden; }
.osec-day.osec-today { background: var(--osec-gold-tint); font-weight: 700; color: var(--osec-navy); }
.osec-day.osec-has-event {
	background: var(--osec-navy);
	color: var(--osec-cream-text);
	font-weight: 700;
	cursor: pointer;
}
.osec-day.osec-has-event:hover { background: var(--osec-navy-dark); }
.osec-day.osec-has-event::after {
	content: "";
	position: absolute;
	bottom: 5px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--osec-gold);
}

/* ---------------- Event list ---------------- */
.osec-list { display: flex; flex-direction: column; gap: 18px; }
.osec-empty { color: var(--osec-muted); font-style: italic; }

.osec-event {
	display: flex;
	gap: 16px;
	background: var(--osec-cream);
	border: 1px solid var(--osec-border);
	border-radius: 6px;
	padding: 18px;
	transition: box-shadow .2s ease;
}
.osec-event.osec-highlight {
	box-shadow: 0 0 0 3px var(--osec-gold);
}

.osec-event-date {
	flex: 0 0 64px;
	text-align: center;
	background: var(--osec-navy);
	border-radius: 6px;
	padding: 8px 4px;
	height: fit-content;
	color: var(--osec-cream-text);
}
.osec-event-month { display: block; font-family: var(--osec-font-body); font-size: .72em; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.osec-event-day { display: block; font-family: var(--osec-font-heading); font-size: 1.6em; font-weight: 800; line-height: 1.1; }
.osec-event-year { display: block; font-family: var(--osec-font-body); font-size: .72em; opacity: .7; }

.osec-event-body { flex: 1; min-width: 0; }
.osec-event-title {
	margin: 0 0 4px;
	font-family: var(--osec-font-heading);
	font-weight: 800;
	font-size: 1.15em;
	color: var(--osec-navy);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.osec-badge {
	font-family: var(--osec-font-body);
	font-size: .62em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	background: var(--osec-badge-gold-bg);
	color: var(--osec-badge-gold-text);
	border: 1px solid var(--osec-badge-gold-text);
	padding: 3px 9px;
	border-radius: 999px;
}
.osec-event-meta { margin: 0 0 4px; color: var(--osec-muted); font-size: .95em; }
.osec-event-venue-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}
.osec-event-venue { font-weight: 600; color: var(--osec-text); }
/* Logo is intentionally kept small - a compact mark next to the host name,
   not a banner - so it never crowds the calendar or the event card. */
.osec-event-logo {
	max-height: 36px;
	max-width: 90px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	flex-shrink: 0;
}
.osec-event-desc { margin: 0 0 10px; color: var(--osec-text); line-height: 1.55; }
.osec-event-desc p:first-child { margin-top: 0; }
.osec-event-desc p:last-child { margin-bottom: 0; }

.osec-event-tags { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.osec-tag {
	display: inline-block;
	font-family: var(--osec-font-body);
	font-size: .76em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--osec-badge-gray-bg);
	color: var(--osec-badge-gray-text);
	border: 1px solid var(--osec-badge-gray-text);
}
/* Cost tag always reads as the gold "enrollment" style */
.osec-tag-cost {
	background: var(--osec-badge-gold-bg);
	color: var(--osec-badge-gold-text);
	border-color: var(--osec-badge-gold-text);
}
/* Audience tag color follows the same coding used on the roster page:
   gold = open/public, gray = members, wine = private/closed */
.osec-audience-public {
	background: var(--osec-badge-gold-bg);
	color: var(--osec-badge-gold-text);
	border-color: var(--osec-badge-gold-text);
}
.osec-audience-members {
	background: var(--osec-badge-gray-bg);
	color: var(--osec-badge-gray-text);
	border-color: var(--osec-badge-gray-text);
}
.osec-audience-private {
	background: var(--osec-badge-wine-bg);
	color: var(--osec-badge-wine-text);
	border-color: var(--osec-badge-wine-text);
}

.osec-event-link {
	display: inline-block;
	font-family: var(--osec-font-body);
	font-weight: 700;
	color: var(--osec-navy);
	text-decoration: none;
}
.osec-event-link:hover { color: var(--osec-gold); text-decoration: underline; }

/* ---------------- Popup (calendar-only pages) ---------------- */
/* Shown when a calendar day is clicked on a page that has no matching
   event in an on-page list to scroll to instead (see frontend.js). */
.osec-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 10, .6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
}
.osec-modal-overlay[hidden] { display: none; }

body.osec-modal-open { overflow: hidden; }

.osec-modal {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--osec-cream);
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	padding: 28px 24px 24px;
}
.osec-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--osec-navy);
	color: var(--osec-cream-text);
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
}
.osec-modal-close:hover { background: var(--osec-navy-dark); }

.osec-modal-body .osec-event.osec-modal-event {
	border: none;
	padding: 0;
	margin-top: 4px;
}
.osec-modal-body .osec-modal-event + .osec-modal-event {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--osec-border);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 520px) {
	.osec-event { flex-direction: column; }
	.osec-event-date { display: flex; align-items: baseline; gap: 6px; text-align: left; }
	.osec-event-day { font-size: 1.2em; }
	.osec-day { font-size: .8em; }
}