/* =============================================================================
   IMPACT Bible Club RSVP Manager — public styles
   =============================================================================
   Design language: black/white/grey for primary content and structure, with
   IMPACT's four brand accent colors (#56bcdc, #92c158, #e28550, #DD5F4B)
   used *only* for club-type coding — the icon badge, the map pin, the
   "Directions" link, and the RSVP progress bar. Every place that color
   shows up reinforces the same type→color association, so a family can
   match a colored pin on the map to a colored icon on a card at a glance.

   One deliberate constraint worth knowing about before changing button
   colors here: none of the four brand colors reach WCAG AA contrast
   (4.5:1) against white text — the best of the four is ~3.6:1. All four
   pass comfortably against near-black text instead. That's why the RSVP
   button below is a neutral dark fill rather than a colored one, and why
   the brand colors are used as backgrounds only in *light, low-opacity*
   form (the icon badge tint) rather than as solid fills behind text.

   Use Settings → Custom CSS to restyle further without editing this file
   directly (it's overwritten on every plugin update).

   Sections: variables, layout containers, map + custom pin markers, club
   cards (header/badge, tally+progress bar, address, button), RSVP modal +
   manage-RSVP page, responsive breakpoint.
   ========================================================================= */

.ibcrm-container {
	max-width: 100%;
	box-sizing: border-box;
	--ibcrm-ink: #1a1a1a;
	--ibcrm-muted: #6b7280;
	--ibcrm-border: #e5e5e8;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ibcrm-container * {
	box-sizing: border-box;
}

.ibcrm-slot-group {
	margin-bottom: 2em;
}

/* --- Map --- */
.ibcrm-map {
	width: 100%;
	height: 260px;
	border-radius: 14px;
	margin-bottom: 1.1em;
	background: #f4f4f5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ibcrm-muted);
	font-size: 0.9em;
	text-align: center;
	padding: 1em;
	overflow: hidden;
}
.ibcrm-map-empty {
	height: auto;
	min-height: 100px;
}

/* Custom colored dot marker (replaces Leaflet's default teardrop pin — see
   typeMarkerIcon() in public.js). A flat colored circle with a white ring
   and a soft shadow reads as a clean, modern point-of-interest marker and
   lets every pin carry the same type color as its card's icon badge. */
.ibcrm-map-pin span {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

/* Leaflet's default zoom control and attribution strip both read as a bit
   boxy/dated out of the box — softened here without touching Leaflet's own
   CSS file. Attribution text itself is required by OpenStreetMap's usage
   policy and is kept fully visible, just visually quieter. */
.leaflet-control-zoom {
	border: none !important;
	border-radius: 10px !important;
	overflow: hidden;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18) !important;
}
.leaflet-control-zoom a {
	color: var(--ibcrm-ink) !important;
	font-weight: 500 !important;
}
.leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.75) !important;
	font-size: 10px !important;
	color: var(--ibcrm-muted) !important;
}
.leaflet-popup-content-wrapper {
	border-radius: 10px;
}
.leaflet-popup-content {
	margin: 10px 14px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--ibcrm-ink, #1a1a1a);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Club cards --- */
.ibcrm-club-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0.85em;
}

.ibcrm-club-card {
	border: 1px solid var(--ibcrm-border);
	border-radius: 14px;
	padding: 1em 1.1em;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ibcrm-club-card:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.ibcrm-club-header {
	display: flex;
	align-items: center;
	gap: 0.65em;
	margin-bottom: 0.75em;
}

/* Icon badge: a light tint of the type color behind a full-saturation
   colored icon. Built with a ::before at low opacity rather than a
   semi-transparent background shorthand, so the tint works with any hex
   value from ibcrm_club_type_color() without relying on newer CSS color
   functions. */
.ibcrm-type-badge {
	position: relative;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ibcrm-type-badge::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--ibcrm-type-color, #999);
	opacity: 0.14;
}
.ibcrm-type-badge svg {
	position: relative;
	width: 18px;
	height: 18px;
	color: var(--ibcrm-type-color, #999);
}

.ibcrm-club-heading-text {
	min-width: 0;
}
.ibcrm-club-name {
	margin: 0;
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ibcrm-ink);
}
/* Higher specificity than a bare class selector, needed because some
   themes style headings via a compound selector like ".entry-content h4"
   (1 class + 1 element = higher specificity than ".ibcrm-club-name" alone)
   which otherwise wins the cascade and reintroduces bottom margin here. */
.ibcrm-club-card .ibcrm-club-name {
	margin-bottom: 0;
}
.ibcrm-club-city {
	display: block;
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ibcrm-muted);
	margin-top: 0.1em;
}

/* Tally: the number is large, bold, and simply black — it doesn't need a
   colored background to draw the eye, since size and weight alone do that
   job while keeping to black/white/grey for primary content. The fill bar
   is the one place in this block where the type color reappears, doubling
   as an at-a-glance "how full is this one" read. */
.ibcrm-tally-block {
	margin-bottom: 0.6em;
}
.ibcrm-tally-numbers {
	line-height: 1;
}
.ibcrm-tally-count {
	font-size: 1.7em;
	font-weight: 800;
	color: var(--ibcrm-ink);
}
.ibcrm-tally-of {
	font-size: 1.1em;
	font-weight: 600;
	color: var(--ibcrm-muted);
}
.ibcrm-tally-label {
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ibcrm-muted);
	margin-top: 0.15em;
}
.ibcrm-tally-bar {
	margin-top: 0.4em;
	height: 5px;
	border-radius: 4px;
	background: #eeeeef;
	overflow: hidden;
}
.ibcrm-tally-bar-fill {
	height: 100%;
	border-radius: 4px;
	background: var(--ibcrm-type-color, #999);
}
.ibcrm-tally-full .ibcrm-tally-bar-fill {
	background: var(--ibcrm-ink);
}

.ibcrm-address-line {
	margin: 0 0 0.85em;
	padding-bottom: 0.1em;
	font-size: 0.85em;
	color: var(--ibcrm-muted);
	line-height: 1.4;
}
.ibcrm-address-text {
	margin-right: 0.4em;
}
.ibcrm-directions-link {
	font-size: 0.85em;
	font-weight: 600;
	color: var(--ibcrm-type-color, #2b6cb0);
	text-decoration: none;
	white-space: nowrap;
}
.ibcrm-directions-link:hover {
	text-decoration: underline;
}

.ibcrm-tally-full {
	opacity: 0.9;
}
.ibcrm-full-notice {
	margin: 0;
	font-size: 0.85em;
	font-style: italic;
	color: var(--ibcrm-muted);
	text-align: center;
	padding: 0.55em 0;
}

.ibcrm-rsvp-btn,
.ibcrm-rsvp-submit,
.ibcrm-cancel-btn {
	display: inline-block;
	width: 100%;
	padding: 0.6em 0.9em;
	border: none;
	border-radius: 10px;
	background: var(--ibcrm-ink);
	color: #fff;
	font-size: 0.9em;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ibcrm-rsvp-btn:hover,
.ibcrm-rsvp-submit:hover {
	background: #333;
}
.ibcrm-cancel-btn {
	background: transparent;
	color: #b3402f;
	border: 1px solid #b3402f;
	width: auto;
	margin-left: 0.5em;
}
.ibcrm-cancel-btn:hover {
	background: #fdf1ef;
}

.ibcrm-required {
	color: #b3402f;
	font-weight: 700;
}
.ibcrm-required-note {
	font-size: 0.82em;
	color: var(--ibcrm-muted);
	margin: 0.25em 0 0.75em;
}

/* --- Modal (RSVP form + manage page use the same base) ---
   z-index is intentionally very high (999999) as a first line of defense
   against theme content rendering on top of it. The more reliable fix —
   moving the modal to be a direct child of <body> at runtime, so it can
   never get trapped inside an ancestor's own CSS stacking context — is
   handled in JS (see bringToFront() in public/js/public.js); this z-index
   is a backstop for that, not a substitute. */
.ibcrm-modal {
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 20, 0.55);
	z-index: 999999;
	align-items: center;
	justify-content: center;
	padding: 1em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ibcrm-modal-inner {
	background: #fff;
	border-radius: 14px;
	padding: 1.6em;
	max-width: 420px;
	width: 100%;
	position: relative;
	max-height: 90vh;
	overflow-y: auto;
}
.ibcrm-modal-inner h3 {
	margin-top: 0;
	margin-bottom: 0.15em;
	font-size: 2em;
	line-height: 1em;
	color: var(--ibcrm-ink, #1a1a1a);
}
.ibcrm-modal-club-time {
	margin: 0 0 1.1em;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--ibcrm-muted, #6b7280);
}
.ibcrm-modal-close {
	position: absolute;
	top: 0.5em;
	right: 0.75em;
	background: none;
	border: none;
	font-size: 1.4em;
	cursor: pointer;
	line-height: 1;
	color: #999;
}
.ibcrm-modal-inner label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
	font-size: 0.9em;
	color: #333;
}
.ibcrm-modal-inner input[type="text"],
.ibcrm-modal-inner input[type="email"],
.ibcrm-modal-inner input[type="number"] {
	width: 100%;
	padding: 0.55em 0.6em;
	border: 1px solid #d6d6d9;
	border-radius: 8px;
	margin-bottom: 0.75em;
	font-size: 0.95em;
}
.ibcrm-modal-inner input:focus {
	outline: 2px solid #56bcdc;
	outline-offset: 1px;
}

.ibcrm-form-message {
	font-size: 0.9em;
	min-height: 1.2em;
}
.ibcrm-form-message.ibcrm-success {
	color: #2f7d32;
}
.ibcrm-form-message.ibcrm-error {
	color: #b3402f;
}

.ibcrm-manage {
	max-width: 480px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (max-width: 480px) {
	.ibcrm-club-list {
		grid-template-columns: 1fr;
	}
}