/* =====================================================================
   CiviCRM UI Boost – CiviCRM event pages for the Kadence theme.
   The full event page (Register Now buttons, description, date, fees,
   calendar links), the "Help spread the word" box and the admin
   toolbar (logged-in staff), and the registration review (confirm) page.
   Setting: CiviCRM → UI Boost → Event page styling.
   ===================================================================== */

/* ---------- Full event page ---------- */

.crm-event-info-form-block {
	--cub-ev-accent: var(--global-palette1, #2b6cb0);
	--cub-ev-accent-dark: var(--global-palette2, #215387);
	--cub-ev-text: var(--global-palette3, #1a202c);
	--cub-ev-muted: var(--global-palette5, #4a5568);
	--cub-ev-line: var(--global-palette7, #e2e8f0);
	--cub-ev-soft: var(--global-palette8, #f7fafc);

	/* Buttons (same shape and type as the site's Kadence buttons) */
	--cub-btn-radius: 3px;
	--cub-btn-font-size: var(--global-kb-font-size-sm, 0.9rem);
	--cub-btn-padding: var(--global-kb-spacing-xs, 1rem) var(--global-kb-spacing-sm, 1.5rem);

	color: var(--cub-ev-text);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.crm-event-info-form-block .clear {
	display: none;
}

/* Summary: a slightly larger lead-in paragraph */
#crm-container.crm-public .crm-event-info-form-block .event_summary-section {
	margin: 0 0 1.5rem;
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--cub-ev-muted);
}

/* Description (text typed in CiviCRM's editor) */
#crm-container.crm-public .crm-event-info-form-block .event_description-section {
	margin: 0 0 2rem;
}

.crm-event-info-form-block .event_description-section p {
	margin: 0 0 1em;
}

.crm-event-info-form-block .event_description-section :is(h2, h3, h4) {
	margin: 1.5em 0 0.5em;
	font-family: var(--global-heading-font-family, inherit);
	line-height: 1.3;
}

.crm-event-info-form-block .event_description-section :is(ul, ol) {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.crm-event-info-form-block .event_description-section li {
	margin: 0 0 0.35em;
}

.crm-event-info-form-block .event_description-section a {
	color: var(--cub-ev-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Images keep their proportions and never overflow on phones */
.crm-event-info-form-block .event_description-section img {
	max-width: 100%;
	height: auto !important; /* Overrides the fixed height CiviCRM's editor adds. */
	border-radius: 8px;
}

/* ---------- When / Fees: a details card ---------- */

#crm-container.crm-public .crm-event-info-form-block :is(.event_date_time-section, .event_fees-section, .event_location-section) {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 1rem 1.5rem;
	background: #fff;
	border: 1px solid var(--cub-ev-line);
	border-top-width: 0;
}

/* The first detail row opens the card... */
.crm-event-info-form-block .event_date_time-section {
	border-top-width: 1px;
	border-radius: 12px 12px 0 0;
}

/* ...the last one closes it */
.crm-event-info-form-block .event_fees-section {
	border-radius: 0 0 12px 12px;
}

/* A single row on its own gets all four corners */
.crm-event-info-form-block .event_date_time-section:not(:has(~ .event_fees-section)) {
	border-radius: 12px;
}

.crm-event-info-form-block :is(.event_date_time-section, .event_fees-section, .event_location-section) > .label {
	font-weight: 700;
	color: var(--cub-ev-text);
}

.crm-event-info-form-block .event_date_time-section > .content {
	font-weight: 600;
}

/* Fee table: name on the left, price on the right, light dividers */
.crm-event-info-form-block .fee_block-table {
	width: 100%;
	max-width: 24rem;
	margin: 0;
	border-collapse: collapse;
	border: 0;
}

.crm-event-info-form-block .fee_block-table td {
	padding: 0.35rem 0;
	border: 0;
	border-bottom: 1px dashed var(--cub-ev-line);
	background: none;
}

.crm-event-info-form-block .fee_block-table tr:last-child td {
	border-bottom: 0;
}

.crm-event-info-form-block .fee_block-table .fee_amount-value {
	text-align: right;
	font-weight: 700;
	color: var(--cub-ev-accent);
	white-space: nowrap;
}

/* ---------- Register Now buttons ---------- */

.crm-event-info-form-block .crm-actionlinks-top {
	margin: 0 0 1.75rem;
}

.crm-event-info-form-block .crm-actionlinks-bottom {
	margin: 2rem 0 1.5rem;
}

#crm-container.crm-public .crm-event-info-form-block .register_link-section {
	margin: 0;
}

/* Buttons match the site's Kadence buttons: square-ish corners (3px),
   small uppercase text with letter spacing, generous padding.
   Hover = the same colour, darkened, plus the site's hard offset shadow. */
#crm-container.crm-public .crm-event-info-form-block a.crm-register-button {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	padding: var(--cub-btn-padding);
	background: var(--cub-ev-accent);
	border: 0;
	border-radius: var(--cub-btn-radius);
	box-shadow: none;
	color: #fff;
	font-family: inherit;
	font-size: var(--cub-btn-font-size);
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.6;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.2s ease;
}

/* Arrow after the text */
#crm-container.crm-public .crm-event-info-form-block a.crm-register-button::after {
	content: "→";
	font-size: 1.15em;
	line-height: 1;
	transition: transform 0.15s ease;
}

#crm-container.crm-public .crm-event-info-form-block a.crm-register-button:hover,
#crm-container.crm-public .crm-event-info-form-block a.crm-register-button:focus-visible {
	background: color-mix(in srgb, var(--cub-ev-accent) 80%, #000); /* Darker accent */
	box-shadow: 8px 8px 0 0 var(--global-palette4, #2D3748); /* Hard shadow, as on the site's buttons */
	color: #fff;
}

#crm-container.crm-public .crm-event-info-form-block a.crm-register-button:hover::after {
	transform: translateX(4px);
}

#crm-container.crm-public .crm-event-info-form-block a.crm-register-button:focus-visible {
	outline: 2px solid var(--cub-ev-accent);
	outline-offset: 2px;
}

/* ---------- Calendar links ---------- */

.crm-event-info-form-block .iCal_links-section {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

#crm-container.crm-public .crm-event-info-form-block a.crm-event-feed-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	padding: 0.5em 1em;
	background: #fff;
	border: 1px solid var(--cub-ev-line);
	border-radius: var(--cub-btn-radius);
	color: var(--cub-ev-muted);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.2s ease;
}

#crm-container.crm-public .crm-event-info-form-block a.crm-event-feed-link:hover,
#crm-container.crm-public .crm-event-info-form-block a.crm-event-feed-link:focus-visible {
	border-color: var(--cub-ev-accent);
	color: var(--cub-ev-accent);
}

/* The stacked icons need CiviCRM's icon font, which may not load with
   the unstyled theme; a simple calendar symbol is used instead. */
.crm-event-info-form-block .crm-event-feed-link .fa-stack {
	display: none;
}

.crm-event-info-form-block .crm-event-feed-link::before {
	content: "📅";
	font-size: 1em;
}

.crm-event-info-form-block .crm-event-feed-link .label {
	font-weight: inherit;
}

/* ---------- Phones ---------- */

@media (max-width: 600px) {
	#crm-container.crm-public .crm-event-info-form-block :is(.event_date_time-section, .event_fees-section, .event_location-section) {
		grid-template-columns: 1fr;
		padding: 0.9rem 1rem;
	}

	#crm-container.crm-public .crm-event-info-form-block a.crm-register-button {
		box-sizing: border-box;
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Event registration: review (confirm) page ---------- */
/* Shown after the registration form, before "Register" is clicked. */

.crm-event-confirm-form-block {
	--cub-ev-accent: var(--global-palette1, #2b6cb0);
	--cub-ev-text: var(--global-palette3, #1a202c);
	--cub-ev-muted: var(--global-palette5, #4a5568);
	--cub-ev-line: var(--global-palette7, #e2e8f0);
	--cub-ev-soft: var(--global-palette8, #f7fafc);

	color: var(--cub-ev-text);
}

#crm-container.crm-public .crm-event-confirm-form-block :is(.clear, .spacer) {
	display: none;
}

/* "Please verify your information…": a calm note, not a warning */
#crm-container.crm-public .crm-event-confirm-form-block .messages.status.continue_message-section {
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	background: var(--cub-ev-soft);
	border: 0;
	border-left: 4px solid var(--cub-ev-accent);
	border-radius: 0 8px 8px 0;
	font-size: 1rem;
}

#crm-container.crm-public .crm-event-confirm-form-block .continue_message-section p {
	margin: 0;
}

/* Pay-later instructions (e.g. "You will receive an email with the bank details.") */
#crm-container.crm-public .crm-event-confirm-form-block .pay-later-receipt-instructions {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border: 2px dashed #6b7280;
	border-radius: 8px;
	font-weight: 600;
}

#crm-container.crm-public .crm-event-confirm-form-block .pay-later-receipt-instructions p {
	margin: 0;
}

/* The buttons appear above and below the summary; keep only the bottom pair */
#crm-container.crm-public .crm-event-confirm-form-block > .crm-submit-buttons:not(:last-child) {
	display: none;
}

/* Go Back on the left, Register on the right */
#crm-container.crm-public .crm-event-confirm-form-block .crm-submit-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

/* Summary cards: fees, participant, event */
#crm-container.crm-public .crm-event-confirm-form-block > .crm-group {
	margin: 0 0 1.5rem;
	padding: 1.5rem 1.75rem;
	background: #fff;
	border: 1px solid var(--cub-ev-line);
	border-radius: 12px;
}

#crm-container.crm-public .crm-event-confirm-form-block .header-dark {
	margin: 0 0 0.9rem;
	padding: 0;
	background: none;
	border: 0; /* No underline from the dashboard styles */
	font-family: var(--global-heading-font-family, inherit);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cub-ev-text);
}

/* Fees: each line, then the total */
#crm-container.crm-public .crm-event-confirm-form-block .amount-item-section {
	margin: 0;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--cub-ev-line);
}

#crm-container.crm-public .crm-event-confirm-form-block .total-amount-section {
	margin: 0;
	padding: 0.75rem 0 0;
}

#crm-container.crm-public .crm-event-confirm-form-block .total-amount-section .content {
	font-family: var(--global-heading-font-family, inherit);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--cub-ev-accent);
}

/* Participant information: label on the left, answer on the right */
#crm-container.crm-public .crm-event-confirm-form-block .participant_info-group fieldset {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

#crm-container.crm-public .crm-event-confirm-form-block .crm-profile-view-title {
	margin: 0 0 0.25rem;
	font-weight: 600;
	color: var(--cub-ev-muted);
}

#crm-container.crm-public .crm-event-confirm-form-block .participant_info-group .crm-section {
	display: grid;
	grid-template-columns: minmax(9rem, 38%) 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--cub-ev-line);
}

#crm-container.crm-public .crm-event-confirm-form-block .participant_info-group .crm-section:last-of-type {
	border-bottom: 0;
}

#crm-container.crm-public .crm-event-confirm-form-block .participant_info-group .crm-section > .label {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
	color: var(--cub-ev-muted);
}

#crm-container.crm-public .crm-event-confirm-form-block .participant_info-group .crm-section > .content {
	font-weight: 600;
	word-break: break-word;
}

/* Event information table */
#crm-container.crm-public .crm-event-confirm-form-block .event_info-group table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

#crm-container.crm-public .crm-event-confirm-form-block .event_info-group td {
	padding: 0.4rem 0;
	border: 0;
	background: none;
	vertical-align: top;
}

#crm-container.crm-public .crm-event-confirm-form-block .event_info-group td:first-child:not([colspan]) {
	width: 9rem;
	padding-right: 1rem;
	color: var(--cub-ev-muted);
}

#crm-container.crm-public .crm-event-confirm-form-block .event_info-group td[colspan] strong {
	font-size: 1.1rem;
}

@media (max-width: 600px) {
	#crm-container.crm-public .crm-event-confirm-form-block > .crm-group {
		padding: 1.25rem 1rem;
	}

	#crm-container.crm-public .crm-event-confirm-form-block .participant_info-group .crm-section {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	/* Register above Go Back on phones */
	#crm-container.crm-public .crm-event-confirm-form-block .crm-submit-buttons .crm-button-type-back {
		order: 1;
	}
}

/* ---------- "Help spread the word" box ---------- */

/* The card */
.crm-section.crm-socialnetwork {
	margin: 3rem 0 1rem;
	padding: 1.75rem 2rem;
	background: var(--global-palette8, #f7f7f5);
	border: 1px solid var(--global-palette7, #e5e5e0);
	border-radius: 12px;
	text-align: center;
}

/* Heading */
.crm-section.crm-socialnetwork h2,
.crm-section.crm-socialnetwork h3 {
	margin: 0 0 1.1rem;
	font-family: var(--global-heading-font-family, inherit);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--global-palette3, #1a202c);
}

/* Button row */
.crm-section.crm-socialnetwork .crm-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	background: none;
	border: 0;
	padding: 0;
}

/* Text in the box */
.crm-section.crm-socialnetwork p {
	margin: 0 0 1rem;
	color: var(--global-palette4, #2d3748);
}

/* The "You can also share the below link…" paragraph with the long raw
   address stays hidden (CiviCRM marks it "clear", which the form styles
   hide); the share buttons cover the same need more tidily. */

/* Buttons. The #crm-container prefix keeps these compact share buttons
   from picking up the larger general CiviCRM button style. */
#crm-container .crm-socialnetwork button,
#crm-container .crm-socialnetwork a.button,
#crm-container .crm-socialnetwork .crm-button {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0 0.2rem 0.5rem;
	padding: 0.6em 1.2em;
	border: 0;
	border-radius: 3px;
	background: var(--global-palette1, #2b6cb0);
	color: #fff;
	font-family: inherit;
	font-size: var(--global-kb-font-size-sm, 0.85rem);
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: none;
	transition: all 0.2s ease;
}

#crm-container .crm-socialnetwork button:hover,
#crm-container .crm-socialnetwork button:focus-visible,
#crm-container .crm-socialnetwork .crm-button:hover {
	filter: brightness(0.82); /* Each network's own colour, darkened */
	box-shadow: 5px 5px 0 0 var(--global-palette4, #2D3748); /* Smaller hard shadow for the smaller buttons */
}

.crm-socialnetwork .crm-socialnetwork-label {
	display: inline;
}

/* Network colours */
#crm-container .crm-socialnetwork #crm-fb,
#crm-container .crm-socialnetwork button[onclick*="facebook"] { background: #1877f2; }

#crm-container .crm-socialnetwork #crm-tw,
#crm-container .crm-socialnetwork button[onclick*="twitter"],
#crm-container .crm-socialnetwork button[onclick*="x.com"]    { background: #111; }

#crm-container .crm-socialnetwork #crm-li,
#crm-container .crm-socialnetwork button[onclick*="linkedin"] { background: #0a66c2; }

#crm-container .crm-socialnetwork #crm-email,
#crm-container .crm-socialnetwork button[onclick*="mailto"]   { background: var(--global-palette4, #4a5568); }

/* Optional "share this link" text box */
.crm-socialnetwork input[type="text"] {
	width: 100%;
	max-width: 28rem;
	margin-top: 1rem;
	padding: 0.5em 0.75em;
	border: 1px solid var(--global-palette7, #e5e5e0);
	border-radius: 6px;
	font-size: 0.85rem;
	text-align: center;
}

@media (max-width: 480px) {
	.crm-section.crm-socialnetwork { padding: 1.5rem 1rem; }
	#crm-container .crm-socialnetwork button,
	#crm-container .crm-socialnetwork .crm-button { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Admin toolbar on event pages (logged-in staff only) ---------- */

.crm-actionlinks-top {
	margin: 0 0 1.75rem;
}

.crm-actions-ribbon #actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 0.75rem;
	list-style: none;
	background: var(--global-palette8, #f7f7f5);
	border: 1px dashed var(--global-palette6, #cbd2d9);
	border-radius: 8px;
}

/* "Admin" tag, so it's obvious visitors don't see this */
.crm-actions-ribbon #actions::before {
	content: "Admin";
	margin-right: 0.25rem;
	padding: 0.2em 0.6em;
	border-radius: 4px;
	background: var(--global-palette4, #4a5568);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.crm-actions-ribbon #actions > li {
	position: relative;
	margin: 0;
	list-style: none;
}

#crm-event-configure-link,
#crm-participant-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.9em;
	background: #fff;
	border: 1px solid var(--global-palette7, #e5e5e0);
	border-radius: 3px;
	color: var(--global-palette3, #1a202c);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#crm-event-configure-link:hover,
#crm-participant-link:hover {
	border-color: var(--global-palette1, #2b6cb0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Text labels next to (or instead of) the icons */
#crm-event-configure-link::after { content: "Configure event"; }
#crm-participant-link::after     { content: "Participants"; }

/* Dropdown menus */
.crm-actions-ribbon .ac_results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 1000;
	min-width: 15rem;
	padding: 0.4rem 0;
	background: #fff;
	border: 1px solid var(--global-palette7, #e5e5e0);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.crm-actions-ribbon .ac_results ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.crm-actions-ribbon .ac_results li {
	margin: 0;
}

.crm-actions-ribbon .ac_results a {
	display: block;
	padding: 0.45em 1rem;
	color: var(--global-palette3, #1a202c);
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}

.crm-actions-ribbon .ac_results a:hover,
.crm-actions-ribbon .ac_results a:focus {
	background: var(--global-palette8, #f7f7f5);
	color: var(--global-palette1, #2b6cb0);
}