/* FutureBeef Events Calendar — brand styling for FullCalendar + details popup. */

:root {
	--fb-navy:   #1e2b50;
	--fb-navy-d: #16203c;
	--fb-red:    #8c0c05;
	--fb-border: #e7e9ef;
	--fb-muted:  #6b7280;
}

/* Fill the container it's placed in — no outer width cap or centring. */
#fb-calendar {
	width: 100%;
	font-size: 14px;
	color: #1d2327;
}

/* ---- Toolbar ---- */
#fb-calendar .fc-header-toolbar {
	margin-bottom: 1.25em;
	align-items: center;
}
#fb-calendar .fc-toolbar-title {
	color: var(--fb-navy);
	font-size: 1.5em;
	font-weight: 700;
	letter-spacing: .01em;
}
#fb-calendar .fc .fc-button {
	border-radius: 6px;
	font-weight: 600;
	text-transform: capitalize;
	padding: .4em .8em;
	box-shadow: none;
}
#fb-calendar .fc .fc-button-primary {
	background: var(--fb-navy);
	border-color: var(--fb-navy);
}
#fb-calendar .fc .fc-button-primary:hover,
#fb-calendar .fc .fc-button-primary:not(:disabled):active,
#fb-calendar .fc .fc-button-primary:not(:disabled).fc-button-active {
	background: var(--fb-navy-d);
	border-color: var(--fb-navy-d);
}
#fb-calendar .fc .fc-button-primary:focus,
#fb-calendar .fc .fc-button-primary:focus-visible {
	box-shadow: 0 0 0 3px rgba(30, 43, 80, .25);
}
#fb-calendar .fc .fc-button-primary:disabled {
	background: #aeb4c2;
	border-color: #aeb4c2;
}
/* prev/next as an attached pill */
#fb-calendar .fc .fc-button-group .fc-button { border-radius: 0; }
#fb-calendar .fc .fc-button-group .fc-button:first-child { border-radius: 6px 0 0 6px; }
#fb-calendar .fc .fc-button-group .fc-button:last-child  { border-radius: 0 6px 6px 0; }

/* ---- Grid frame ---- */
#fb-calendar .fc-scrollgrid {
	border: 1px solid var(--fb-border);
	border-radius: 10px;
	overflow: hidden;
}
#fb-calendar .fc-scrollgrid td,
#fb-calendar .fc-scrollgrid th,
#fb-calendar .fc-theme-standard td,
#fb-calendar .fc-theme-standard th {
	border-color: var(--fb-border);
}

/* ---- Column headers (Mon…Sun) ---- */
#fb-calendar .fc-col-header-cell {
	background: #f5f7fb;
	padding: 10px 6px;
}
#fb-calendar .fc-col-header-cell-cushion {
	color: var(--fb-navy);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-decoration: none;
	padding: 0;
}

/* ---- Month + year pickers (injected into the toolbar) ---- */
#fb-calendar.fb-has-pickers .fc-toolbar-title { display: none; }
.fb-cal-pickers { display: inline-flex; gap: 8px; align-items: center; }
.fb-cal-select {
	appearance: none;
	-webkit-appearance: none;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%231e2b50' d='M2 4l4 4 4-4z'/></svg>") no-repeat right 10px center;
	border: 1px solid var(--fb-border);
	border-radius: 6px;
	color: var(--fb-navy);
	font-size: 1.05em;
	font-weight: 700;
	padding: 6px 30px 6px 12px;
	cursor: pointer;
	line-height: 1.2;
}
.fb-cal-select:hover { border-color: #c7ccd8; }
.fb-cal-select:focus-visible { outline: 2px solid var(--fb-navy); outline-offset: 1px; }

/* ---- Day cells (square minimum, grow taller with events) ---- */
#fb-calendar .fc-daygrid-day-frame {
	aspect-ratio: 1 / 1;   /* square by default */
	min-height: 84px;      /* floor so narrow screens don't collapse */
}
#fb-calendar .fc-daygrid-day-top { padding: 6px 8px 2px; }
#fb-calendar .fc-daygrid-day-number {
	color: var(--fb-muted);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
#fb-calendar .fc-day-other .fc-daygrid-day-frame { background: #fafbfc; }
#fb-calendar .fc-day-other .fc-daygrid-day-number { color: #c3c6cc; }

/* Today: subtle wash + navy circle on the number */
#fb-calendar .fc-day-today { background: #eef2fb !important; }
#fb-calendar .fc-day-today .fc-daygrid-day-number {
	background: var(--fb-navy);
	color: #fff;
	min-width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 50%;
	padding: 0 6px;
}

/* ---- Event bars (spanning) ---- */
#fb-calendar .fc-daygrid-event {
	background: var(--fb-navy);
	border: none;
	border-radius: 5px;
	padding: 3px 9px;
	margin: 2px 4px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .18);
	cursor: pointer;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
#fb-calendar .fc-daygrid-event .fc-event-title {
	color: #fff;
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.35;
	white-space: normal;
	padding: 0;
}
#fb-calendar .fc-daygrid-event:hover {
	background: var(--fb-navy-d);
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(16, 24, 40, .28);
}
#fb-calendar .fc-daygrid-event:focus-visible {
	outline: 2px solid var(--fb-red);
	outline-offset: 1px;
}
/* keep spanning bars flush at the segment joins so a multi-day event reads as one bar */
#fb-calendar .fc-daygrid-block-event.fc-event-start   { margin-left: 4px; }
#fb-calendar .fc-daygrid-block-event.fc-event-end     { margin-right: 4px; }
#fb-calendar .fc-daygrid-block-event:not(.fc-event-start) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
#fb-calendar .fc-daygrid-block-event:not(.fc-event-end)   { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* "+N more" link */
#fb-calendar .fc-daygrid-more-link {
	color: var(--fb-red);
	font-weight: 700;
	font-size: 12px;
}

/* ---- List / agenda view (used on mobile) ---- */
#fb-calendar .fc-list {
	border: 1px solid var(--fb-border);
	border-radius: 10px;
	overflow: hidden;
}
#fb-calendar .fc-list-day-cushion {
	background: #eef2f8;
	color: var(--fb-navy);
	font-weight: 700;
	font-size: 14px;
	padding: 12px 14px;
}
#fb-calendar .fc-list-event { cursor: pointer; }
#fb-calendar .fc-list-event td { padding: 14px; border-color: var(--fb-border); vertical-align: middle; }
#fb-calendar .fc-list-event:hover td { background: #f7f9fc; }
#fb-calendar .fc-list-event-title { color: #1d2327; font-weight: 600; font-size: 15px; line-height: 1.35; }
#fb-calendar .fc-list-event-graphic .fc-list-event-dot {
	border-color: var(--fb-navy);
	border-width: 6px;
}
/* Every event is all-day here, so the "all-day" time column is just noise */
#fb-calendar .fc-list-event-time { display: none; }
#fb-calendar .fc-list-empty { padding: 34px 16px; color: var(--fb-muted); font-size: 15px; }

/* ---- Details popup ---- */
.fb-cal-popup {
	position: fixed;
	inset: 0;
	background: rgba(16, 24, 40, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
}
.fb-cal-popup-inner {
	background: #fff;
	border-radius: 10px;
	max-width: 420px;
	width: 100%;
	padding: 26px 28px;
	position: relative;
	box-shadow: 0 16px 48px rgba(16, 24, 40, .38);
}
.fb-cal-popup-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: #9aa0aa;
	cursor: pointer;
}
.fb-cal-popup-close:hover { color: var(--fb-navy); }
.fb-cal-popup-title {
	color: var(--fb-navy);
	margin: 0 24px 10px 0;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
}
.fb-cal-popup-when {
	font-weight: 600;
	color: #1d2327;
	margin: 0 0 8px;
}
.fb-cal-popup-venue   { margin: 0 0 2px; color: var(--fb-muted); font-weight: 600; }
.fb-cal-popup-address { margin: 0 0 16px; color: var(--fb-muted); }
.fb-cal-popup-link {
	display: inline-block;
	color: var(--fb-red);
	font-weight: 700;
	text-decoration: none;
}
.fb-cal-popup-link:hover { text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 782px) {
	/* Stack the toolbar: nav row on top, month/year pickers below */
	#fb-calendar .fc-header-toolbar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 1em; }
	#fb-calendar .fc-toolbar-chunk { display: flex; justify-content: center; }
	.fb-cal-pickers { width: 100%; justify-content: center; }
	.fb-cal-select { flex: 1 1 0; min-width: 0; text-align: center; }
	#fb-calendar .fc .fc-button { padding: .5em 1em; }
	#fb-calendar .fc-toolbar-title { font-size: 1.2em; }
}
@media (max-width: 600px) {
	#fb-calendar { font-size: 12px; }
	#fb-calendar .fc-col-header-cell-cushion { font-size: 10px; letter-spacing: .03em; }
	#fb-calendar .fc-daygrid-event .fc-event-title { font-size: 11px; }
}

/* ---- iOS-style dot indicator + day popup ---- */
#fb-calendar .fb-day-dot { display: none; }

.fb-cal-day-title { color: var(--fb-navy); margin: 0 24px 12px 0; font-size: 18px; line-height: 1.3; }
.fb-cal-day-list { display: flex; flex-direction: column; gap: 12px; max-height: 62vh; overflow-y: auto; }
.fb-cal-day-event { border-left: 3px solid var(--fb-navy); background: #f7f9fc; border-radius: 6px; padding: 10px 12px; }
.fb-cal-day-event h4 { margin: 0 0 4px; color: var(--fb-navy); font-size: 15px; line-height: 1.3; }
.fb-cal-day-when { margin: 0 0 2px; font-weight: 600; font-size: 13px; color: #1d2327; }
.fb-cal-day-venue { margin: 0 0 6px; font-size: 13px; color: var(--fb-muted); }
.fb-cal-day-link { color: var(--fb-red); font-weight: 700; text-decoration: none; font-size: 13px; }
.fb-cal-day-link:hover { text-decoration: underline; }
.fb-cal-day-empty { color: var(--fb-muted); margin: 0; }

/* ---- Mobile: hide event bars, show a dot, make the day cell tappable ---- */
@media (max-width: 700px) {
	#fb-calendar .fc-daygrid-day-events { display: none !important; }
	#fb-calendar .fc-daygrid-day-frame {
		position: relative;
		cursor: pointer;
		aspect-ratio: 1 / 1;
		min-height: 48px;
	}
	#fb-calendar .fc-daygrid-day-frame:active { background: #eef2f8; }
	#fb-calendar .fb-day-dot {
		display: block;
		position: absolute;
		bottom: 7px; left: 50%;
		transform: translateX(-50%);
		width: 6px; height: 6px;
		border-radius: 50%;
		background: var(--fb-red);
	}
	#fb-calendar .fc-daygrid-day-number { font-size: 14px; }
}