/**
 * Theme Name:  AOM Child Theme
 * Theme URI:   https://aom.org
 * Description: Safe extension theme for AOM Theme. Inherits all parent templates and functionality.
 * Author:      AOM
 * Author URI:  https://aom.org
 * Template:    aom
 * Version:     1.2.5
 * Text Domain: aom-child
 * Requires PHP: 8.0
 */

/*
 * Match the production theme's saved Global Styles link setting.
 * WordPress stores Site Editor styles separately for parent and child themes,
 * so this rule must also exist in the child theme.
 */
a:where(:not(.wp-element-button)) {
	text-decoration: none !important;
}

/* Match production for the header Search control and search-result titles. */
.header-search-profile a,
.header-search-profile a:hover,
.header-search-profile a:focus,
.fuse .fuse-result__link,
.fuse .fuse-result__link:hover,
.fuse .fuse-result__link:focus {
	text-decoration: none !important;
	text-decoration-line: none !important;
	border-bottom: 0 !important;
}

/**
 * Venue Details block (aom-child/venue-details).
 * Mirrors the single-event sidebar info box (gradient-05, 40px radius)
 * so the venue page reads as part of the same design system.
 */
.wp-block-aom-child-venue-details {
	background: var( --wp--custom--gradients--cover--gradient-05 );
	border-radius: 40px;
	padding: var( --wp--custom--spacing--40 );
	display: flex;
    align-items: center;
	gap: 12px;
}

@media (max-width: 991px) {
	.wp-block-aom-child-venue-details {
		flex-direction: column;
	}

	.venue-details__info,
	.venue-details__map {
		width: 100%;
	}
}

.venue-details__empty {
	color: var( --wp--custom--color--foreground--subtle );
	font-style: italic;
	margin: 0;
}

.venue-details__info {
	display: flex;
	flex-direction: column;
	gap: var( --wp--custom--spacing--8 );
	flex: 1 1 60%;
}

.venue-details__address,
.venue-details__phone,
.venue-details__website {
	margin: 0;
	color: var( --wp--custom--color--foreground--strong );
	font-size: 1.125rem;
	line-height: 1.5;
}

.venue-details__website a {
	color: inherit;
	text-decoration: underline;
}

.venue-details__map {
	margin: 0;
	flex: 1 1 40%;
	min-height: 300px;
	aspect-ratio: 16 / 10;
	border-radius: 24px;
	overflow: hidden;
}

.venue-details__map iframe,
.venue-details__map > div {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}


.tribe-section-custom-fields input {
	width: 100%;
}

.aom-community-managed-fields {
	display: grid;
	gap: 24px;
	margin: 0 0 24px;
}

.aom-community-field-section {
	border: 1px solid #d9d9d9;
	background: #fff;
}

.aom-community-field-section h3 {
	margin: 0;
	padding: 16px 20px;
	border-bottom: 1px solid #d9d9d9;
	font-size: 1rem;
	line-height: 1.4;
	text-transform: uppercase;
}

.aom-community-field-section__body {
	display: grid;
	grid-template-columns: minmax( 180px, 24% ) minmax( 0, 1fr );
	align-items: center;
	gap: 18px 24px;
	padding: 28px 32px;
}

.aom-community-field-section__body label {
	margin: 0;
}

.aom-community-field-section__body input {
	width: 100%;
	min-height: 42px;
	box-sizing: border-box;
}

.aom-community-cost-options {
	display: grid;
	gap: 14px;
	margin-top: 16px;
}

.aom-community-cost-options__field {
	display: grid;
	gap: 6px;
}

.aom-community-cost-options__field label {
	font-weight: 600;
}

.aom-community-cost-options__field select {
	width: 100%;
	min-height: 42px;
}

.aom-community-cost-options__scholarship {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin: 0;
}

.aom-community-cost-options__scholarship input {
	width: auto;
	margin: 0;
}

.aom-community-native-currency-hidden {
	display: none !important;
}

/* Hide TEC's duplicate schedule cost; Cost is shown in Event Details. */
.tribe-events-schedule .tribe-events-cost {
	display: none !important;
}

.tribe-event-featured-image-link {
	display: block;
	cursor: pointer;
}

.tribe-event-featured-image-link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/**
 * Restore The Events Calendar's page gutter on every TEC view.
 *
 * The site's saved Additional CSS contains
 * `.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container
 * { padding: 0 !important; }`. WordPress stores Additional CSS per theme
 * slug, so that rule only loads while this child theme is active — which is
 * why the calendar and Upcoming Events lists sit wider here than on a site
 * running the parent theme, where the rule does not exist.
 *
 * Reinstate the gutter the parent-theme sites render (40px top/bottom,
 * 42px left/right). The leading `body` raises specificity above the saved
 * single-class rule, so this wins regardless of stylesheet order. Only the
 * medium breakpoint is targeted, because that is the only place the saved
 * rule applies; narrow screens already keep TEC's own smaller gutter.
 */
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container {
	padding: 40px var( --tec-grid-gutter-page, 42px ) !important;
}

/**
 * Photo view cards.
 *
 * The same saved Additional CSS adds
 * `.tribe-events-pro-photo ul li article { padding: 20px; border-radius:
 * 20px; min-height: 420px; background-color: #fff !important; }`. The
 * 420px floor leaves 40-69px of empty space under the shorter cards and the
 * 20px inset shrinks every thumbnail from 351px to 311px wide.
 *
 * Restore the values a parent-theme site computes for this element, so the
 * cards size to their own content. On a site without that saved rule these
 * declarations are what the element already resolves to, so this changes
 * nothing there.
 */
body .tribe-events-pro-photo ul li article {
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
}

body.single-tribe_events .tribe-events-event-meta.primary,
body.single-tribe_events .tribe-events-event-meta.secondary {
	width: 50%;
}
body.single-tribe_events .tribe-events-single.tribe-blocks-editor .tribe-events-event-meta.primary {
	width: 100%;
}
body.single-tribe_events .tribe-events-event-meta.primary, body.single-tribe_events .tribe-events-event-meta.secondary {
	width: 100% !important;
}

/**
 * Single event "Details" box (tribe-events/modules/meta/details.php override).
 * Keep every Event Details row in a consistently aligned bullet list.
 */
body.single-tribe_events .tribe-events-meta-group-details .aom-event-details-list {
	margin: 0;
	padding-left: 1.25rem;
	list-style: none !important;
	font-size: 1.125rem;
	line-height: 1.5;
	color: inherit;
}

body.single-tribe_events .tribe-events-meta-group-details .aom-event-details-list .tribe-events-meta-item {
	position: relative;
	display: block !important;
	list-style: none !important;
	margin: 0 0 4px;
}

body.single-tribe_events .tribe-events-meta-group-details .aom-event-details-list .tribe-events-meta-item::before {
	content: "•";
	position: absolute;
	left: -1rem;
	color: currentColor;
	font-size: 0.8em;
}

body.single-tribe_events .tribe-events-meta-group-details .aom-event-details-list .tribe-events-meta-value {
	margin-left: 4px;
}
.tribe-events-meta-label {
	font-weight: 600;
}

.aom-scholarship-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 5px 0 0;
	padding: 4px 8px;
	border-radius: 999px;
	color: #246b2d;
	background: #e8f5ea;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.tribe-events-event-cost .aom-scholarship-badge {
	display: flex;
}

/*
 * The site's saved Additional CSS (Site Editor > Styles) hides
 * `.wp-container-8`, a legacy auto-generated class still baked into the
 * saved Single Event template's sticky infobox group. The theme strips the
 * class at render time; this rule keeps the infobox visible even where a
 * cached or otherwise unfiltered render still carries it.
 */
.single-event-content-grid aside .is-position-sticky[class*="wp-container-"] {
	display: block !important;
}

/*
 * Single Event venue card (address + Google Map).
 *
 * The same saved Additional CSS collapses TEC's venue block into a
 * "pin icon + venue name" line: it hides `.tribe-block__venue__map`,
 * `.tribe-events-gmap`, the address, phone and website with
 * `display: none !important`, strips the card border/padding, and turns
 * `.tribe-block__venue__meta` into a flex row with a `::before` icon.
 * Google Maps then initialises into a hidden 0x0 box and never paints.
 * Restore TEC's own card layout on event pages. These selectors out-rank
 * the saved single-class rules, so they win regardless of load order.
 */
body.single-tribe_events .tribe-block__venue {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 580px !important;
	margin: var( --tec-spacer-6, 2rem ) 0 0 !important;
	padding: var( --tec-spacer-2, 0.75rem ) !important;
	border: 1px solid var( --tec-color-border-secondary, #d5d5d5 ) !important;
	border-radius: var( --tec-border-radius-default, 4px ) !important;
}

/* Keep the saved rule that hides the venue once an event has passed. */
body.single-tribe_events .tribe-event-is-past .tribe-block__venue {
	display: none !important;
}

/*
 * An event with no venue assigned still renders an empty venue block
 * (`<div class="tribe-block__venue tribe-clearfix"> </div>`). The card
 * styling above would otherwise draw a blank bordered box in its place,
 * so omit the block entirely unless it actually holds a venue name.
 */
body.single-tribe_events .tribe-block__venue:not(:has(.tribe-block__venue__name)) {
	display: none !important;
}

body.single-tribe_events .tribe-block__venue .tribe-block__venue__meta {
	display: block !important;
	width: 100% !important;
	gap: 0 !important;
}

body.single-tribe_events .tribe-block__venue .tribe-block__venue__meta::before {
	content: none !important;
	display: none !important;
}

body.single-tribe_events .tribe-block__venue .tribe-block__venue__address,
body.single-tribe_events .tribe-block__venue .tribe-block__venue__phone,
body.single-tribe_events .tribe-block__venue .tribe-block__venue__website,
body.single-tribe_events .tribe-block__venue .tribe-block__venue__address .tribe-events-gmap {
	display: block !important;
}

body.single-tribe_events .tribe-block__venue .tribe-block__venue__map {
	display: flex !important;
	width: 100% !important;
}

/* TEC hard-codes the map canvas to 310px inline; let it fill its column. */
body.single-tribe_events .tribe-block__venue__map > [id^="tribe-events-gmap"] {
	width: 100% !important;
	max-width: 100% !important;
}

/**
 * Venue section on the classic single-event template.
 *
 * TEC puts the venues in `.tribe-events-event-meta.tec-single__venue-container`,
 * which the "single event meta" rule above caps at 50% width so it sits beside
 * Event Details. Venues themselves are laid out by `.tec-single__venue-wrapper`
 * as a wrapping flex ROW, so two venues split that 50% again — ~180px a card,
 * wrapping each address one word per line, while Event Details is left with a
 * tall empty column.
 *
 * Give the venue section its own full-width row instead (the parent is a
 * wrapping flex row, so 100% drops it below Event Details), and let each card
 * keep the standard 580px address/map layout used everywhere else.
 */
body.single-tribe_events .tribe-events-event-meta.tec-single__venue-container {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

body.single-tribe_events .tec-single__venue-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 24px !important;
	width: 100% !important;
}

body.single-tribe_events .tec-single__venue-container .tribe-block__venue {
	flex: 1 1 340px !important;
	max-width: 580px !important;
	margin-top: 0 !important;
}

@media (min-width: 768px) {
	body.single-tribe_events .tribe-block__venue {
		flex-direction: row !important;
		padding: var( --tec-spacer-5, 1.5rem ) !important;
	}

	body.single-tribe_events .tribe-block__venue.tribe-block__venue--has-map .tribe-block__venue__meta {
		width: 47% !important;
		margin-right: var( --tec-spacer-1, 0.5rem ) !important;
	}

	body.single-tribe_events .tribe-block__venue.tribe-block__venue--has-map .tribe-block__venue__map {
		width: 53% !important;
	}
}

.aom-event-social__links {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	vertical-align: middle;
}

.aom-event-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #fff;
	background: #24578d;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.14 );
	text-decoration: none;
	transition: box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.aom-event-social__link:hover,
.aom-event-social__link:focus-visible {
	color: #fff;
	opacity: 0.9;
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.2 );
	transform: translateY( -2px );
}

.aom-event-social__link:focus-visible {
	outline: 3px solid #0b5d92;
	outline-offset: 3px;
}

.aom-event-social__link svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.aom-event-social__link--youtube_vimeo {
	background: #f00;
}

.aom-event-social__link--vimeo {
	background: #1ab7ea;
}

.aom-event-social__link--facebook {
	background: #1877f2;
}

.aom-event-social__link--linkedin {
	background: #0a66c2;
}

.aom-event-sidebar-social {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	margin-top: var( --wp--preset--spacing--24 );
	padding-top: var( --wp--preset--spacing--20, 20px );
	border-top: 1px solid rgba( 36, 87, 141, 0.16 );
}

.aom-event-sidebar-social .aom-event-social__links {
	margin: 0;
	justify-content: center;
}

.aom-event-social__hashtags {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	max-width: 100%;
}

.aom-event-social__hashtag {
	max-width: 100%;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	color: #24578d;
	background: rgba( 36, 87, 141, 0.09 );
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
	text-align: center;
}

@media (max-width: 767px) {
	.aom-community-field-section__body {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 20px;
	}

	.aom-community-field-section__body input + label {
		margin-top: 10px;
	}

	body.single-tribe_events .tribe-events-event-meta.primary,
	body.single-tribe_events .tribe-events-event-meta.secondary {
		width: 100% !important;
	}
}