/* Hammond Events Calendar - Frontend Styles
   Primary:   #0F1E2E (navy)
   Secondary: #C6A23A (gold)
*/

.he-calendar, .he-list, .he-single-wrap, .he-press-list {
	--he-primary: #0F1E2E;
	--he-secondary: #C6A23A;
	font-family: inherit;
	color: var(--he-primary);
	box-sizing: border-box;
}
.he-calendar *, .he-list *, .he-single-wrap * { box-sizing: border-box; }

/* ---------- Subtle Pills (shared) ---------- */
.he-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	padding: 3px 9px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	background: color-mix(in srgb, var(--pill-color, #C6A23A) 12%, white);
	color: color-mix(in srgb, var(--pill-color, #C6A23A) 55%, #0F1E2E);
	border: 1px solid color-mix(in srgb, var(--pill-color, #C6A23A) 35%, white);
	transition: background 0.15s ease, transform 0.1s ease;
}
.he-pill:hover {
	background: color-mix(in srgb, var(--pill-color, #C6A23A) 20%, white);
	transform: translateY(-1px);
	color: color-mix(in srgb, var(--pill-color, #C6A23A) 55%, #0F1E2E);
}
.he-pill-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--pill-color, #C6A23A);
	flex: 0 0 auto;
}
.he-pill-static { cursor: default; }
.he-pill-lg { font-size: 13px; padding: 5px 14px; margin-bottom: 12px; }

/* ---------- View Hub (Calendar / Agenda / Grid toggle) ---------- */
.he-hub { }
.he-tabs {
	display: inline-flex;
	gap: 3px;
	padding: 4px;
	background: #f1f2f4;
	border-radius: 11px;
	margin-bottom: 20px;
}
.he-tab {
	appearance: none;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: #6b7280;
	padding: 8px 18px;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.he-tab:hover { color: var(--he-primary, #0F1E2E); }
.he-tabs .he-tab:hover {
	background: var(--he-primary, #0F1E2E) !important;
	color: #fff !important;
	box-shadow: none !important;
}
.he-tab[aria-selected="true"] {
	background: #fff;
	color: var(--he-primary, #0F1E2E);
	box-shadow: 0 1px 3px rgba(15, 30, 46, 0.12);
}
.he-tabs .he-tab[aria-selected="true"]:hover {
	background: var(--he-primary, #0F1E2E) !important;
	color: #fff !important;
}
.he-panel { display: none; }
.he-hub[data-active="calendar"] .he-panel[data-view="calendar"] { display: block; }
.he-hub[data-active="agenda"] .he-panel[data-view="agenda"] { display: block; }
.he-hub[data-active="grid"] .he-panel[data-view="grid"] { display: block; }

/* ---------- Calendar Grid ---------- */
.he-calendar {
	border: 1px solid #eceef1;
	border-radius: 16px;
	padding: 26px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(15, 30, 46, 0.06);
	transition: opacity 0.15s ease;
}
.he-calendar.he-cal-loading {
	opacity: 0.45;
	pointer-events: none;
}
.he-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.he-cal-title-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.he-cal-title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--he-primary);
	letter-spacing: 0.2px;
}
.he-cal-today-link {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--he-secondary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.he-cal-today-link:hover { border-bottom-color: var(--he-secondary); }
.he-cal-nav {
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: #f4f5f7;
	color: var(--he-primary);
	text-decoration: none;
	font-size: 21px;
	line-height: 1;
	flex: 0 0 auto;
	transition: background 0.15s ease, transform 0.1s ease;
}
.he-cal-nav:hover { background: color-mix(in srgb, var(--he-secondary) 22%, #f4f5f7); transform: scale(1.06); color: var(--he-primary); }

.he-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 7px;
}
.he-cal-grid-head { margin-bottom: 8px; }
.he-cal-daylabel {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #9aa0a8;
	padding-bottom: 4px;
}
.he-cal-daylabel:first-child, .he-cal-daylabel:last-child { color: #c2c6cc; }

.he-cal-cell {
	min-height: 76px;
	border-radius: 11px;
	background: #fafbfc;
	border: 1.5px solid transparent;
	padding: 9px 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.he-cal-empty { background: transparent; }
.he-cal-has-events { background: #fff; border-color: #eef0f2; box-shadow: 0 1px 3px rgba(15,30,46,0.03); }
.he-cal-has-events:hover { border-color: color-mix(in srgb, var(--he-secondary) 40%, #eef0f2); box-shadow: 0 5px 14px rgba(15,30,46,0.08); }

/* Today: border only, no fill change, so it stays readable no matter what's inside */
.he-cal-today {
	border-color: var(--he-secondary);
	border-width: 1.5px;
}

.he-cal-daynum {
	font-size: 12.5px;
	font-weight: 700;
	color: #8a8f98;
	display: flex;
	align-items: center;
	gap: 6px;
}
.he-cal-today .he-cal-daynum { color: var(--he-primary); }
.he-cal-today-badge {
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--he-secondary) 65%, var(--he-primary));
	background: color-mix(in srgb, var(--he-secondary) 16%, white);
	border-radius: 5px;
	padding: 2px 5px;
	line-height: 1.4;
}

.he-cal-pills { display: flex; flex-direction: column; gap: 5px; }

/* Event mini-cards inside a day cell: time + title + location, address on hover via title tooltip */
.he-evt {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 5px 7px 6px 8px;
	border-radius: 7px;
	text-decoration: none;
	background: color-mix(in srgb, var(--pill-color, #C6A23A) 10%, white);
	border-left: 2.5px solid var(--pill-color, #C6A23A);
	transition: background 0.15s ease, transform 0.1s ease;
}
.he-evt:hover {
	background: color-mix(in srgb, var(--pill-color, #C6A23A) 18%, white);
	transform: translateX(1px);
}
.he-evt-top { display: flex; align-items: center; gap: 5px; }
.he-evt-dot {
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--pill-color, #C6A23A);
	flex: 0 0 auto;
}
.he-evt-time {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--pill-color, #C6A23A) 62%, var(--he-primary, #0F1E2E));
	text-transform: uppercase;
}
.he-evt-title {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.28;
	color: var(--he-primary, #0F1E2E);
}
.he-evt-loc {
	font-size: 10px;
	font-weight: 500;
	color: #767b85;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.he-cal-more {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--he-primary);
	text-decoration: none;
	padding: 2px 2px 0;
	opacity: 0.75;
}
.he-cal-more:hover { opacity: 1; text-decoration: underline; }

/* Mobile compact view: colored dots instead of full event cards */
.he-cal-dots {
	display: none;
	gap: 4px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: auto;
}
.he-cal-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--pill-color, #C6A23A);
	flex: 0 0 auto;
}

/* Tap-to-expand day detail panel (mobile) */
.he-cal-daypanel { display: none; }
.he-cal-daypanel.is-open {
	display: block;
	margin-top: 14px;
	border: 1px solid #eceef1;
	border-radius: 13px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 8px 22px rgba(15, 30, 46, 0.1);
	animation: he-panel-in 0.16s ease;
}
@keyframes he-panel-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}
.he-cal-daypanel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--he-primary, #0F1E2E);
	color: #fff;
	padding: 13px 16px;
}
.he-cal-daypanel-date { font-weight: 800; font-size: 14px; letter-spacing: 0.1px; }
.he-cal-daypanel-close {
	appearance: none;
	border: none;
	background: rgba(255,255,255,0.12);
	color: #fff;
	width: 26px; height: 26px;
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.15s ease;
}
.he-cal-daypanel-close:hover { background: rgba(255,255,255,0.22); }
.he-cal-daypanel-list {
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.he-cal-daypanel-item {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
	padding: 11px 12px;
	background: #fafbfc;
	border-left: 3px solid var(--pill-color, #C6A23A);
	transition: background 0.15s ease;
}
.he-cal-daypanel-item:hover { background: #f2f4f6; }
.he-cal-daypanel-cat {
	display: inline-block;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pill-color, #C6A23A);
	margin-bottom: 4px;
}
.he-cal-daypanel-title { font-size: 14px; font-weight: 700; color: var(--he-primary, #0F1E2E); line-height: 1.3; margin-bottom: 4px; }
.he-cal-daypanel-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #6b7280; }
.he-cal-daypanel-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* Custom hover popup for calendar event cards (replaces native browser tooltip) */
.he-tooltip {
	position: absolute;
	z-index: 99999;
	display: none;
	width: 240px;
	max-width: calc(100vw - 24px);
	background: #fff;
	border-radius: 12px;
	border: 1px solid #eceef1;
	box-shadow: 0 14px 34px rgba(15, 30, 46, 0.18), 0 2px 8px rgba(15, 30, 46, 0.08);
	padding: 13px 15px;
	pointer-events: none;
	font-family: inherit;
}
.he-tooltip-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.he-tooltip-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.he-tooltip-cat { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.he-tooltip-title { font-size: 14px; font-weight: 800; color: #0F1E2E; line-height: 1.3; margin-bottom: 7px; }
.he-tooltip-row { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: #4b5563; margin-bottom: 3px; line-height: 1.4; }
.he-tooltip-icon { flex: 0 0 auto; font-size: 12px; line-height: 1.4; }
.he-tooltip-address { font-size: 11.5px; color: #9aa0a8; padding-left: 19px; line-height: 1.4; margin-top: 1px; }

.he-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid #f0f0f0;
}
.he-legend-item { font-size: 12.5px; color: #555; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.he-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

@media (max-width: 640px) {
	.he-calendar { padding: 14px; border-radius: 12px; }
	.he-cal-cell { min-height: 46px; padding: 6px 4px; gap: 4px; }
	.he-cal-cell.he-cal-has-events { cursor: pointer; }
	.he-cal-cell.he-cal-has-events:active { background: #f2f4f6; }
	.he-cal-daylabel { font-size: 9px; }
	.he-cal-title { font-size: 17px; }
	.he-cal-pills-desktop { display: none; }
	.he-cal-dots { display: flex; }
	.he-tabs { width: 100%; }
	.he-tab { flex: 1; text-align: center; padding: 8px 6px; }
}

/* ---------- Upcoming Events List ---------- */
.he-list-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}
.he-list-list { display: flex; flex-direction: column; gap: 10px; }

.he-list-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	border: 1px solid #ebebeb;
	border-radius: 12px;
	padding: 14px;
	background: #fff;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.he-list-item:hover {
	box-shadow: 0 6px 18px rgba(15, 30, 46, 0.08);
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--he-secondary) 40%, #ebebeb);
}
.he-list-date {
	flex: 0 0 auto;
	width: 52px;
	text-align: center;
	border-radius: 10px;
	background: color-mix(in srgb, var(--pill-color, var(--he-secondary)) 12%, white);
	border: 1px solid color-mix(in srgb, var(--pill-color, var(--he-secondary)) 30%, white);
	padding: 8px 0;
}
.he-list-date-day { display: block; font-size: 19px; font-weight: 800; color: var(--he-primary); line-height: 1; }
.he-list-date-month { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: color-mix(in srgb, var(--pill-color, var(--he-secondary)) 60%, var(--he-primary)); margin-top: 3px; }

.he-list-body { flex: 1; min-width: 0; }
.he-list-title { margin: 6px 0 4px; font-size: 15.5px; font-weight: 700; color: var(--he-primary); line-height: 1.3; }
.he-list-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #6b7280; }

.he-empty { color: #888; font-style: italic; }

/* ---------- Single Event Page ---------- */
.he-single-hero {
	background: var(--he-primary);
	color: #fff;
	padding: 56px 24px;
}
.he-single-hero-inner { max-width: 900px; margin: 0 auto; }
.he-single-hero .he-pill-lg {
	background: color-mix(in srgb, var(--he-secondary) 22%, transparent);
	border-color: color-mix(in srgb, var(--he-secondary) 55%, transparent);
	color: #fff;
}
.he-single-title { font-size: 32px; font-weight: 800; margin: 6px 0 10px; line-height: 1.2; }
.he-single-date { font-size: 15px; color: color-mix(in srgb, var(--he-secondary) 70%, white); font-weight: 600; }

.he-single-body {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 24px 60px;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
}
.he-single-main h2 { font-size: 18px; color: var(--he-primary); margin-top: 0; }
.he-single-content { color: #333; line-height: 1.7; }
.he-recurrence-note { margin-top: 18px; padding: 10px 14px; background: #f7f7f8; border-left: 3px solid var(--he-secondary); border-radius: 6px; font-size: 13.5px; }

.he-sidebar-card {
	border: 1px solid #ebebeb;
	border-radius: 12px;
	padding: 20px;
	background: #fafbfc;
	position: sticky;
	top: 20px;
}
.he-sidebar-card h3 { margin-top: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: #8a8f98; }
.he-detail-row { margin-bottom: 14px; }
.he-detail-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: #9aa0a8; margin-bottom: 3px; }
.he-detail-value { font-size: 14px; color: var(--he-primary); }
.he-detail-value a { color: var(--he-primary); text-decoration: underline; }

.he-btn {
	display: block;
	text-align: center;
	padding: 11px 16px;
	border-radius: 8px;
	background: var(--he-secondary);
	color: #0F1E2E;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
	margin-top: 14px;
	transition: filter 0.15s ease;
}
.he-btn:hover { filter: brightness(0.93); color: #0F1E2E; }
.he-btn-outline {
	background: transparent;
	border: 1px solid #d8d8d8;
	color: var(--he-primary);
}
.he-btn-outline:hover { background: #f2f2f2; filter: none; }

@media (max-width: 720px) {
	.he-single-body { grid-template-columns: 1fr; }
	.he-single-title { font-size: 24px; }
}

/* ---------- Press Releases List ---------- */
.he-press-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.he-press-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid #ebebeb;
	border-radius: 12px;
	padding: 18px 20px;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.he-press-card:hover {
	box-shadow: 0 8px 22px rgba(15, 30, 46, 0.08);
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--he-secondary, #C6A23A) 35%, #ebebeb);
}
.he-press-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.he-press-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #8a8f98;
}
.he-press-date svg { flex: 0 0 auto; opacity: 0.8; }
.he-press-badge {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--he-primary, #0F1E2E);
	padding: 4px 10px;
	border-radius: 6px;
	white-space: nowrap;
}
.he-press-title {
	font-size: 17px;
	font-weight: 800;
	color: var(--he-primary, #0F1E2E);
	line-height: 1.35;
	margin: 0 0 8px;
}
.he-press-excerpt {
	font-size: 13.5px;
	color: #6b7280;
	line-height: 1.6;
	margin: 0 0 12px;
}
.he-press-readmore {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 700;
	color: var(--he-secondary, #C6A23A);
}
.he-press-arrow { transition: transform 0.15s ease; }
.he-press-card:hover .he-press-arrow { transform: translateX(3px); }

@media (max-width: 480px) {
	.he-press-top { flex-wrap: wrap; }
	.he-press-title { font-size: 15.5px; }
}