/**
 * Camp Session Manager -- front-end card, grid, and table styles.
 *
 * Portability approach: every color/spacing value uses a theme.json custom
 * property WITH a fallback (the current site's own values), so this still
 * looks right dropped into a theme that doesn't define matching preset
 * slugs. Decorative rules (colors, borders, shadows -- not layout) are
 * wrapped in :where() to drop their specificity to zero, and buttons/groups/
 * tables use WordPress's own standard classes (wp-element-button,
 * wp-block-group, wp-block-table). That means a theme's own styling for
 * those classes wins automatically with no plugin CSS changes needed --
 * these rules only kick in as a fallback when the theme has nothing to say
 * about them.
 */

.camp-session-grid {
	display: grid;
	grid-template-columns: repeat( var( --camp-session-columns, 2 ), 1fr );
	gap: var( --wp--preset--spacing--50, 1.5rem );
}

@media ( max-width: 600px ) {
	.camp-session-grid {
		grid-template-columns: 1fr;
	}
}

.camp-session-card {
	position: relative;
	display: block;
	height: 100%;
	border-radius: var( --wp--custom--border-radius, 10px );
}

:where( .camp-session-card ) {
	background-color: var( --wp--preset--color--white, #fff );
	border: 2px solid var( --wp--preset--color--primary, #115927 );
}

.camp-session-card.camp-session-open {
	transition-duration: 0.3s;
	transition-property: transform;
	transition-timing-function: ease-out;
}

.camp-session-card.camp-session-open:hover,
.camp-session-card.camp-session-open:focus-within {
	transform: translateY( -8px );
}

.camp-session-info-grid {
	display: grid;
	grid-template-columns: 0.2fr 1fr;
	grid-template-rows: 1fr 0.95fr repeat( 2, 0.5fr ) 1fr;
	grid-column-gap: 13px;
	grid-row-gap: 10px;
	padding: var( --wp--preset--spacing--20, 0.44rem ) var( --wp--preset--spacing--60, 2.25rem );
}

.camp-session-info-grid p {
	margin-top: 0;
	padding: 0;
	margin: 0;
}

.camp-session-header-row {
	grid-area: 1 / 1 / 2 / 3;
	text-align: center;
}

.camp-session-title {
	text-align: center;
	margin: 0;
}

.camp-session-full-badge {
	display: inline-block;
	font-size: var( --wp--preset--font-size--small, 1.125rem );
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 20px;
	margin-bottom: 4px;
}

:where( .camp-session-full-badge ) {
	color: var( --wp--preset--color--secondary, #d6f0d5 );
	background-color: var( --wp--preset--color--primary, #115927 );
}

.camp-session-icon-dates { grid-area: 2 / 1 / 3 / 2; }
.camp-session-dates {
	grid-area: 2 / 2 / 3 / 3;
	font-size: calc( var( --wp--preset--font-size--medium, 1.5rem ) * 1.12 );
}
.camp-session-dates p { margin: 0; }

.camp-session-duration {
	font-size: calc( var( --wp--preset--font-size--small, 1.125rem ) * 1.2 );
	padding-top: 0.25em;
    padding-left: calc(0.25rem + 20px);
}

.camp-session-icon-agerange { grid-area: 3 / 1 / 4 / 2; }
.camp-session-agerange { grid-area: 3 / 2 / 4 / 3; }

.camp-session-icon-cost { grid-area: 4 / 1 / 5 / 2; padding-top: 0.25em; }
.camp-session-cost { grid-area: 4 / 2 / 5 / 3; }
.camp-session-cost p {
	font-size: var( --wp--preset--font-size--large, 2.25rem );
	font-weight: 800;
}

.camp-session-tier-validity {
	font-size: 0.6em;
	font-weight: 400;
	opacity: 0.75;
}

/* A tier showing a message (e.g. "These vary greatly...") instead of a
   price shouldn't inherit the bold, large price styling. A <div>, not a
   <p> -- the message can contain its own paragraphs/links. */
.camp-session-cost .camp-session-tier-message {
	font-size: var( --wp--preset--font-size--small, 1.125rem );
	font-weight: 400;
}

.camp-session-cost .camp-session-tier-message p,
.camp-session-table-message p {
	margin: 0 0 0.5em;
}

.camp-session-cost .camp-session-tier-message p:last-child,
.camp-session-table-message p:last-child {
	margin-bottom: 0;
}

.camp-session-tier-message a,
.camp-session-table-message a {
	color: var( --wp--preset--color--primary, #115927 );
	text-decoration: underline;
}

/* Pricing tier description tooltip (card/grid view) -- pure CSS, no JS. */
.camp-session-tier-info {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-left: 4px;
	border-radius: 50%;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	cursor: help;
	vertical-align: middle;
}

:where( .camp-session-tier-info ) {
	background: var( --wp--preset--color--primary, #115927 );
	color: var( --wp--preset--color--white, #fff );
}

.camp-session-tier-tooltip {
	position: absolute;
	bottom: 130%;
	left: 50%;
	transform: translateX( -50% );
	width: max-content;
	max-width: 220px;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	z-index: 5;
}

:where( .camp-session-tier-tooltip ) {
	background: #1e1e1e;
	color: #fff;
}

.camp-session-tier-info:hover .camp-session-tier-tooltip,
.camp-session-tier-info:focus .camp-session-tier-tooltip,
.camp-session-tier-info:focus-within .camp-session-tier-tooltip {
	opacity: 1;
	visibility: visible;
}

.camp-session-bottom-row {
	grid-area: 5 / 1 / 6 / 3;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.camp-session-registration-closed {
	padding: var( --wp--preset--spacing--50, 1.5rem );
	border-radius: var( --wp--custom--border-radius, 10px );
	text-align: center;
	line-height: 1.25em;
}

:where( .camp-session-registration-closed ) {
	background-color: var( --wp--preset--color--secondary, #d6f0d5 );
}

.camp-session-waitlist-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var( --wp--preset--font-size--small, 1.125rem );
	padding: var( --wp--preset--spacing--30, 0.67rem );
	border-radius: var( --wp--custom--border-radius, 10px );
}

:where( .camp-session-waitlist-banner ) {
	background-color: var( --wp--preset--color--secondary, #d6f0d5 );
}

.camp-session-waitlist-text p {
	margin: 0;
}

.camp-inline-icon {
	border-radius: 0 !important;
	width: 30px;
	height: 30px;
}

/*
 * Register / More Info / Form buttons use WordPress's own wp-element-button
 * class, so if the active theme styles buttons via theme.json ("elements" >
 * "button"), that styling is what actually renders -- the rules below only
 * apply as a fallback when the theme has no button styling of its own.
 */
.camp-session-register-button,
.camp-session-info-button,
.camp-session-form-link {
	position: relative;
	z-index: 2;
	display: block;
	text-align: center;
	text-decoration: none !important;
	padding: var( --wp--preset--spacing--30, 0.67rem ) var( --wp--preset--spacing--50, 1.5rem );
	font-size: var( --wp--preset--font-size--standard, 1.25rem );
	font-weight: 700;
    margin-top:1.5rem;
}

:where( .camp-session-register-button, .camp-session-info-button, .camp-session-form-link ) {
	background-color: var( --wp--preset--color--primary, #115927 );
	color: var( --wp--preset--color--white, #fff );
	border: 2px solid var( --wp--preset--color--primary, #115927 );
	border-radius: 10px;
}

:where( .camp-session-register-button:hover, .camp-session-register-button:active,
.camp-session-info-button:hover, .camp-session-info-button:active,
.camp-session-form-link:hover, .camp-session-form-link:active ) {
	background-color: var( --wp--preset--color--secondary, #d6f0d5 );
	color: var( --wp--preset--color--primary, #115927 );
}

/*
 * "Stretched link": the register button's ::after covers the whole card, so
 * clicking anywhere on the card activates registration, while the More Info
 * and Form links stay independently clickable above it (z-index: 2 above).
 * This avoids nesting an <a> around the whole card (invalid HTML).
 */
.camp-session-register-button::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.camp-session-placeholder {
	padding: 1em;
	border: 1px dashed #999;
	font-size: 0.9em;
}

:where( .camp-session-placeholder ) {
	background: #f0f0f1;
	color: #555;
}

/*
 * Table display mode (session-list block, "Display as: Table"). Wrapped in
 * the same figure/table markup WordPress's core Table block uses, so a
 * theme's own table styling (borders, striping, cell padding) applies
 * automatically -- the rules here are only presentational specifics the
 * theme wouldn't otherwise know about.
 */
.camp-session-table table {
	/*
	 * Needed for the row-separator border below to actually render: per the
	 * CSS table spec, border-related properties only apply to cells in the
	 * default "separate" border model. A border set on a <tr> is valid CSS
	 * but is simply never painted -- collapse mode is what allows a row's
	 * cell borders to merge into one clean line across the row.
	 */
	border-collapse: collapse;
	/*
	 * Fixed layout so column widths come only from the <colgroup> PHP
	 * computes (see camp_session_manager_render_sessions_table()), not from
	 * cell content -- with the default "auto" layout, hiding the tier
	 * description once the sticky header kicks in removed each price
	 * column's widest content, so the browser re-shrank the columns. Fixed
	 * widths stay constant regardless of what's shown/hidden.
	 */
	table-layout: fixed;
	width: 100%;
}

/*
 * Sticky column headers: with many session rows, the header can scroll out
 * of view, making it hard to tell which price column is which. Pinning it
 * to the top of the viewport as you scroll keeps that context without
 * repeating the column name in every row (that repetition happens instead
 * in the responsive stacked layout below, where there's no shared header
 * row left once the table collapses to per-session blocks).
 *
 * The background/shadow only apply once the header is actually stuck (the
 * .is-stuck class, toggled by assets/js/session-table.js via an
 * IntersectionObserver on the sentinel below) -- while scrolled to the top
 * of the page, the header sits inline with no special treatment.
 */
.camp-session-table-sticky-sentinel {
	height: 1px;
	margin-bottom: -1px;
}

.camp-session-table thead th {
	position: sticky;
	top: 0;
	/* Comfortably above the register/info buttons (z-index: 2) and the
	   stretched-link overlay (z-index: 1) elsewhere in the table body. */
	z-index: 10;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

:where( .camp-session-table thead.is-stuck th ) {
	/* A soft tint rather than stark white, which stood out too hard
	   against a patterned page background. */
	background-color: var( --wp--preset--color--secondary, #d6f0d5 );
	box-shadow: 0 1px 0 var( --wp--preset--color--primary, #115927 );
}

.camp-session-table th,
.camp-session-table td {
	vertical-align: top;
	text-align: left;
    padding-top:20px;
    padding-bottom:20px;
}

/*
 * Row separator: applied to the cells of each session's data row (the
 * second of the two rows per session -- see camp_session_manager_
 * render_sessions_table()), not to the <tr> itself, since border-bottom on
 * a <tr> is invisible under the default border-collapse: separate. Putting
 * it only on the data row (not the title row) means each session gets one
 * separator line, after its price cells, instead of a line splitting the
 * title from its own data.
 */
.camp-session-table-data-row > td {
	border-bottom: 2px solid var( --wp--preset--color--secondary, #d6f0d5 );
}

.camp-session-table-title-row > td {
	padding-bottom: 4px;
}

.camp-session-table-data-row > td {
	padding-top: 4px;
}

.camp-session-table-tier-name {
	/* Adjust this to control the gap to the description below. */
	margin-bottom: 0.25em;
    font-weight: 900;
    font-size: calc(var(--wp--preset--font-size--medium, 1.5rem) * 1.12);
    color: var(--wp--preset--color--primary);
}

.camp-session-table-tier-description {
	font-size: var( --wp--preset--font-size--standard, 1.25rem );
    line-height: 1.35em;
	opacity: 0.8;
    margin: 4px 0.75em 0 0;
    text-wrap: pretty;
}

.camp-session-table-tier-description p {
    margin:0;
    font-weight: 900 !important;
}

.camp-session-table-info p {
	margin: 0.25em 0;
}

.camp-session-table-info .camp-session-daterange{
    font-weight: 900;
    font-size:calc( var( --wp--preset--font-size--medium, 1.5rem ) * 1.12 )
}

/*
 * Icon + first line as a two-column flex row: everything -- a wrapped
 * second/third line of that same text, or a separate line like the
 * duration below -- lives in its own column to the right of the icon, so
 * wrapped content stays aligned under the text rather than sliding
 * underneath/around the icon. Top-aligned (not centered): centering against
 * a multi-line wrapped block put the icon in the middle of the text, which
 * looks off once something actually wraps.
 */
.camp-session-table-info .camp-session-icon-dates {
	/* Sized in em, so the icon below (1em x 1em) matches the height of
	   whatever text it's paired with -- .camp-session-daterange uses a
	   boosted font-size, so this row's icon needs the same boost to match;
	   age-range's icon uses the ambient/base size, so it needs no override. */
	font-size: calc( var( --wp--preset--font-size--medium, 1.5rem ) * 1.12 );
}

.camp-session-table-info .camp-inline-icon {
	width: 1em;
	height: 1em;
	margin-right: 0.6rem;
	/* Nudges the icon down from the em-box's top to roughly where the
	   adjacent text's glyphs actually start (line-height adds leading
	   above the glyphs that the icon doesn't have) -- adjust to taste. */
	margin-top: 0.2em;
}

.camp-session-table-info .camp-session-table-row {
	margin-bottom: 0.5em;
}

.camp-session-table-info .camp-session-table-row-head {
	display: flex;
	align-items: flex-start;
}

.camp-session-table-info .camp-session-table-row-head .camp-inline-icon {
	flex-shrink: 0;
}

.camp-session-table-info .camp-session-daterange,
.camp-session-table-info .camp-session-agerange {
	margin: 0;
}

.camp-session-table-info .camp-session-agerange{
    text-wrap: balance;
    line-height: 1.25em;
}

/* Left-aligns with the date range text (icon width + row-head gap), not
   with the icon -- per the "which one it should hang off of" question. */
.camp-session-table-info .camp-session-duration {
	margin: 0;
    font-size: 1.2rem;
    opacity: 0.8;
}

.camp-session-table-title{
    color: var(--wp--preset--color--primary);
    text-wrap-style: pretty;
    font-size: var(--wp--preset--font-size--large);
    display: inline-block;
    margin: 0;
    margin-right: 0.75rem;
    font-family:var(--wp--preset--font-family--coustard);
}

.camp-session-table-waitlist,
.camp-session-table-closed {
	font-size: 0.85em;
}

td.camp-session-table-price-cell {
    /*
     * No white-space: nowrap here -- a plain "$500.00" never wraps anyway
     * (no spaces to break on), but a variable-pricing tier can show a full
     * message paragraph instead (see .camp-session-table-message below),
     * and nowrap would force that onto one very long horizontally-
     * overflowing line.
     */
    text-align: center;
    font-size: calc( var( --wp--preset--font-size--medium, 1.5rem ) * 1.12 );
}

/* A message-mode price cell (e.g. "These vary greatly...") reads better as
   left-aligned body text than centered, large, price-style digits. */
.camp-session-table-message {
	text-align: left;
	font-size: var( --wp--preset--font-size--standard, 1.25rem );
	font-weight: 400;
}

/*
 * Full/waitlisted session rows: dim everything except the full badge and
 * the waitlist banner. This is deliberately applied to specific content
 * elements rather than opacity/filter on the whole <tr> or a shared
 * wrapper -- opacity and filter both apply to an element's entire
 * rendered subtree as one composited unit, so a child (the badge/banner)
 * can't "undo" a dimmed ancestor's opacity to look normal again. Targeting
 * only the title text, the date/age-range rows, and the price cells (all
 * siblings of the badge/banner, not their ancestors) keeps those two
 * fully visible while everything else dims.
 */
.camp-session-table-row-unavailable .camp-session-table-title,
.camp-session-table-row-unavailable .camp-session-table-row,
.camp-session-table-row-unavailable .camp-session-table-price-cell {
	opacity: 0.5;
	filter: grayscale( 1 );
}

/*
 * .camp-session-table-row is reused for the date/age-range rows only (see
 * camp_session_manager_render_table_info_cell()) -- the waitlist banner and
 * "This session is full." fallback are separate siblings after it inside
 * .camp-session-table-info, so they're untouched by the rule above without
 * needing an explicit override.
 */

/*
 * Responsive: below 600px (matching the grid view's own breakpoint), the
 * table becomes a stacked label/value list per session instead of a wide
 * grid you have to scroll horizontally to compare. The column headers
 * (tier name + description) stay visible above each session's list, rather
 * than repeating per row via data-label -- so the description text isn't
 * duplicated for every session, just shown once per column at the top.
 * They're taken out of sticky positioning here (position: relative
 * overriding the desktop rule's position: sticky below), since a sticky
 * header pinned to the top of the viewport would eat a lot of the limited
 * mobile screen real estate as you scroll.
 */
@media ( max-width: 600px ) {
	.camp-session-table table,
	.camp-session-table tbody,
	.camp-session-table tr,
	.camp-session-table th,
	.camp-session-table td {
		display: block;
		width: auto !important;
	}

	.camp-session-table thead {
		display: block;
	}

	.camp-session-table thead th {
		display: block !important;
		position: relative !important;
	}

	/* The first header cell is always the blank corner cell above the info
	   column (see camp_session_manager_render_sessions_table()) -- with
	   headers no longer hidden wholesale, it would otherwise show up as a
	   stray empty block above the tier names. */
	.camp-session-table thead th:first-child {
		display: none !important;
	}

	.camp-session-table-title-row > td {
		border-bottom: none;
	}

	.camp-session-table-data-row > td {
		border-bottom: none;
		padding: 6px 0;
	}

	.camp-session-table-data-row > td:last-child {
		border-bottom: 2px solid var( --wp--preset--color--secondary, #d6f0d5 );
		padding-bottom: 20px;
		margin-bottom: 12px;
	}

	.camp-session-table-price-cell {
		text-align: left;
	}

	.camp-session-table-price-cell::before {
		content: attr( data-label );
		display: block;
		font-weight: 700;
		font-size: var( --wp--preset--font-size--small, 1.125rem );
		margin-bottom: 2px;
	}
}