/**
 * Single Event Template – Allegory
 * Stylesheet for Studio Allegory custom event pages.
 *
 * Follows Corporate Design Guideline v1.0
 * Defers all typography to Kadence theme defaults.
 *
 * Place in: /wp-content/themes/kadence-child/tribe-events/single-event-allegory.css
 *
 * @version 2.2.0
 */

/* ══════════════════════════════════════════════
   CSS VARIABLES (from Corporate Guideline)
   ══════════════════════════════════════════════ */

.allegory-single-event {
	--teal-main:    #005555;
	--teal-mid:     #007070;
	--teal-light:   #249ea0;
	--orange-main:  #fd5901;
	--orange-mid:   #f78104;
	--orange-light: #faab36;
	--near-black:   #1a1a1a;
	--dark-grey:    #333333;
	--mid-grey:     #666666;
	--border-grey:  #cccccc;
	--section-bg:   #edf5f5;
	--white:        #ffffff;
	--radius:       6px;
	--max-width:    1400px;
	--content-width: 1000px;
}


/* ══════════════════════════════════════════════
   LAYOUT – Article Container
   ══════════════════════════════════════════════ */

.allegory-single-event {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 0 60px;
}


/* ══════════════════════════════════════════════
   CONTENT CONTAINER – Shared text block width
   All text sections use this for consistent width
   ══════════════════════════════════════════════ */

.allegory-event-header,
.allegory-shortie,
.allegory-event-columns,
.allegory-event-description,
.allegory-facilitator,
.allegory-fineprint {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
}


/* ══════════════════════════════════════════════
   HERO IMAGE
   ══════════════════════════════════════════════ */

.allegory-event-hero {
	margin: 0 20px 32px;
	padding: 0;
	overflow: hidden;
	border-radius: 0 0 var(--radius) var(--radius);
	max-width: var(--max-width);
	max-height: 480px;
}

.allegory-event-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* ══════════════════════════════════════════════
   EVENT TITLE (H1) – Theme handles styling
   ══════════════════════════════════════════════ */

.allegory-event-header {
	margin-bottom: 32px;
}

.allegory-event-title {
	margin: 0;
}

.allegory-single-event .allegory-event-header .allegory-event-title {
	margin-top: 20px !important;
	font-size: 3rem !important;
}

#primary .allegory-single-event h1.allegory-event-title {
	font-size: 3rem !important;
}


/* ══════════════════════════════════════════════
   SECTION HEADINGS (H2) – Theme handles styling
   ══════════════════════════════════════════════ */

.allegory-section-heading {
	margin: 0 0 16px 0 !important;
	padding: 0 !important;
}


/* ══════════════════════════════════════════════
   TWO-COLUMN LAYOUT (60/40)
   ══════════════════════════════════════════════ */

.allegory-event-columns {
	display: grid;
	grid-template-columns: 1fr 40%;
	gap: 40px;
	align-items: start;
	margin-bottom: 48px;
}

.allegory-event-columns__left {
	min-width: 0;
}

.allegory-event-columns__right {
	min-width: 0;
}


/* ══════════════════════════════════════════════
   SHORT DESCRIPTION
   ══════════════════════════════════════════════ */

.allegory-shortie {
	margin-bottom: 48px;
}

.allegory-shortie p {
	margin: 0 0 12px 0;
}

.allegory-single-event .allegory-shortie p {
	font-size: 1.375rem !important;
	color: #007070 !important;
}

#primary .allegory-single-event .allegory-shortie p {
	font-size: 1.375rem !important;
	color: #007070 !important;
}

.allegory-shortie p:last-child {
	margin-bottom: 0;
}


/* ══════════════════════════════════════════════
   DETAILS LIST
   ══════════════════════════════════════════════ */

.allegory-details {
	margin-bottom: 32px;
}

.allegory-details__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.allegory-details__list li {
	padding: 10px 0;
	border-bottom: 1px solid var(--border-grey);
}

.allegory-details__list li:first-child {
	border-top: 1px solid var(--border-grey);
}

.allegory-details__list li a {
	color: var(--teal-main);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.allegory-details__list li a:hover {
	color: var(--teal-mid);
}

.allegory-details__note {
	color: var(--mid-grey);
}


/* ══════════════════════════════════════════════
   TICKET BOX (Right Column)
   ══════════════════════════════════════════════ */

.allegory-ticket-box {
	background: var(--white);
	border: 1px solid var(--border-grey);
	border-radius: var(--radius);
	padding: 24px;
	position: sticky;
	top: 100px;
}

.allegory-ticket-box .allegory-section-heading {
	margin-bottom: 16px !important;
}

.allegory-event-columns__right > .allegory-section-heading {
	margin-bottom: 16px !important;
}

/* ── Ticket Embeds (Shopify Buy Buttons) ── */

.allegory-ticket-box__links {
	margin-bottom: 20px;
}

.allegory-ticket-box__embed {
	margin-bottom: 12px;
}

.allegory-ticket-box__embed:last-child {
	margin-bottom: 0;
}

/* Override Shopify Buy Button styles to match CI */
.allegory-ticket-box__embed .shopify-buy__btn {
	font-family: 'Nunito Sans', sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	border-radius: var(--radius) !important;
	background-color: var(--orange-main) !important;
}

.allegory-ticket-box__embed .shopify-buy__btn:hover {
	background-color: var(--orange-mid) !important;
}

/* ── Ticket Info Text ── */

.allegory-ticket-box__info {
	padding-top: 16px;
	border-top: 1px solid var(--border-grey);
}

.allegory-ticket-box__info p {
	color: var(--mid-grey);
	margin: 0 0 8px 0;
}

.allegory-ticket-box__info p:last-child {
	margin-bottom: 0;
}

.allegory-ticket-box__info a {
	color: var(--teal-main);
	text-decoration: underline;
}

.allegory-ticket-box__info a:hover {
	color: var(--teal-mid);
}


/* ══════════════════════════════════════════════
   EVENT DESCRIPTION (Full Width within content)
   ══════════════════════════════════════════════ */

.allegory-event-description {
	margin-bottom: 48px;
	padding-top: 32px;
}

.allegory-event-description a {
	color: var(--teal-main);
	text-decoration: underline;
}

.allegory-event-description a:hover {
	color: var(--teal-mid);
}

.allegory-event-description img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}


/* ══════════════════════════════════════════════
   FACILITATOR SECTION
   ══════════════════════════════════════════════ */

.allegory-facilitator {
	margin-bottom: 48px;
	padding-top: 32px;
}

.allegory-facilitator__content {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.allegory-facilitator__image {
	flex-shrink: 0;
	width: 200px;
	border-radius: var(--radius);
	overflow: hidden;
}

.allegory-facilitator__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

.allegory-facilitator__bio {
	flex: 1;
	min-width: 0;
}

#primary .allegory-facilitator__name {
	margin: -2px 0 8px 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

.allegory-facilitator__name a {
	color: var(--teal-main);
	text-decoration: none;
}

.allegory-facilitator__name a:hover {
	color: var(--teal-mid);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.allegory-facilitator__text p {
	margin: 0 0 12px 0;
	color: #007070 !important;
}

.allegory-facilitator__text p:last-child {
	margin-bottom: 0;
}

.allegory-facilitator__text a {
	color: var(--teal-main);
	text-decoration: underline;
}


/* ══════════════════════════════════════════════
   FINE PRINT (Accordion)
   ══════════════════════════════════════════════ */

.allegory-fineprint {
	margin-bottom: 48px;
	padding-top: 32px;
}

/* Fine Print accordion styles removed in v2.2.0
   Now handled globally by allegory-accordion mu-plugin (v2.0.2) */


/* ══════════════════════════════════════════════
   RESPONSIVE – Tablet (< 900px)
   ══════════════════════════════════════════════ */

@media (max-width: 900px) {

	.allegory-event-columns {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.allegory-ticket-box {
		position: static;
	}

	.allegory-single-event .allegory-event-header .allegory-event-title {
		font-size: 2.625rem !important;
	}
}


/* ══════════════════════════════════════════════
   RESPONSIVE – Mobile (< 600px)
   ══════════════════════════════════════════════ */

@media (max-width: 600px) {

	/* Text containers: 15px padding on mobile */
	.allegory-event-header,
	.allegory-shortie,
	.allegory-event-columns,
	.allegory-event-description,
	.allegory-facilitator,
	.allegory-fineprint {
		padding-left: 15px;
		padding-right: 15px;
	}

	.allegory-event-hero {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		border-radius: 0;
		max-height: 300px;
	}

	.allegory-single-event .allegory-event-header .allegory-event-title {
		font-size: 2rem !important;
	}

	.allegory-facilitator__content {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.allegory-facilitator__image {
		width: 50%;
		height: auto;
	}

	.allegory-facilitator__photo {
		aspect-ratio: 1 / 1;
	}

	.allegory-ticket-box {
		padding: 20px;
	}
}


/* ══════════════════════════════════════════════
   ACCESSIBILITY – Focus States
   ══════════════════════════════════════════════ */

.allegory-single-event a:focus-visible {
	outline: 2px solid var(--teal-main);
	outline-offset: 2px;
	border-radius: 2px;
}

.allegory-single-event *:focus:not(:focus-visible) {
	outline: none;
}


/* ══════════════════════════════════════════════
   PRINT STYLES
   ══════════════════════════════════════════════ */

@media print {

	.allegory-ticket-box {
		position: static;
		background: none;
		border: 1px solid #ccc;
	}

	.allegory-ticket-box__embed {
		display: none;
	}

	.allegory-event-hero {
		max-height: none;
	}

}