/*
Theme Name: Newspack Community Theme
Theme URI: https://github.com/wil-gerken/newspack-community-theme
Description: FSE templates for the Newspack Community listings plugin (events, locations, and other entity types). Child of newspack-block-theme. Inherits parent's design system; overrides only what entity pages require.
Author: Wil Gerken
Author URI: https://automattic.com
Template: newspack-block-theme
Version: 0.3.2
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newspack-community-theme
Tags: block-theme, child-theme, news, full-site-editing
*/

/* ----------------------------------------------------------------------
 * Directory layout shell + adapt-block style hooks
 *
 * Two-column shell for Location and Event Directory templates. The
 * conversion-critical blocks (Location: entity-action-buttons; Event:
 * event-quick-info card + event-ticket-button) live in a
 * .directory-shell__conversion wrapper between entity-meta-row and the
 * columns shell. On mobile they appear above the main column in DOM
 * order — that's the correct a11y reading order. On desktop the
 * page-level grid relocates them into the rail column position above
 * the rest of the rail content.
 *
 * Visual hooks for the block variants composed by the Directory
 * templates (vertical contact stack, compact venue card, card-styled
 * event-quick-info, etc.).
 * ---------------------------------------------------------------------- */

/* Mobile: directory-body children stack in source order (conversion → main → rail). */

@media (min-width: 900px) {
	/* Desktop: 2-col grid. Main spans every row in col 1; col 2 stacks
	 * conversion + rail blocks. Row tracks use min-content with a final
	 * `1fr` so that main (spanning all rows) doesn't inflate the
	 * min-content tracks — spec: items spanning a flexible track are
	 * excluded from intrinsic sizing of inflexible tracks they also span.
	 * align-self: start keeps each rail/conv block compact at the top of
	 * its cell. */
	.directory-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		column-gap: var(--wp--preset--spacing--50, 2rem);
		row-gap: var(--wp--preset--spacing--40, 1.5rem);
	}

	/* Neutralize WP block-gap flow margins on direct grid items. The
	 * `wp:group` with layout:default normally injects margin-block-start
	 * on `> * + *`; on grid items that margin adds to row-gap and shifts
	 * content inside the grid cell. row-gap owns vertical spacing here. */
	.directory-body > * {
		margin-block: 0;
	}

	.directory-body > .directory-shell__main {
		grid-area: main;
	}

	.directory-body > .directory-shell__conversion,
	.directory-body > .directory-shell__rail,
	.directory-body > .directory-shell__rail--top,
	.directory-body > .directory-shell__rail--bottom {
		align-self: start;
	}

	/* Default layout (single-rail templates, e.g. Event):
	 *   col 2 stack: conversion → rail
	 * Used when the original rail already had conversion at the top. */
	.directory-body {
		grid-template-rows: min-content 1fr;
		grid-template-areas:
			"main conversion"
			"main rail";
	}

	.directory-body > .directory-shell__conversion { grid-area: conversion; }
	.directory-body > .directory-shell__rail { grid-area: rail; }

	/* Split-rail layout (e.g. Location): preserves original rail visual
	 * order by interleaving conversion between rail-top and rail-bottom.
	 *   col 2 stack: rail-top → conversion → rail-bottom */
	.directory-body--rail-split {
		grid-template-rows: min-content min-content 1fr;
		grid-template-areas:
			"main rail-top"
			"main conversion"
			"main rail-bottom";
	}

	.directory-body--rail-split > .directory-shell__rail--top { grid-area: rail-top; }
	.directory-body--rail-split > .directory-shell__conversion { grid-area: conversion; }
	.directory-body--rail-split > .directory-shell__rail--bottom { grid-area: rail-bottom; }

	/* Wide-rail layout (Film): no narrow conversion column. Rail is wider
	 * to host visual content (portrait poster + 16:9 trailer placeholder)
	 * plus action affordances (showtimes-jump, share). Single row, main +
	 * rail side-by-side. */
	.directory-body--rail-wide {
		grid-template-columns: minmax(0, 1fr) 380px;
		grid-template-rows: auto;
		grid-template-areas: "main rail";
	}
}

/* event-quick-info card style — bordered card with accent stripe. */
.event-quick-info--card {
	border: 1px solid var(--wp--preset--color--base-3, #e5e5e5);
	border-radius: 0.5rem;
	padding: 1rem;
	position: relative;
}

.event-quick-info--card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--wp--preset--color--primary-400, currentColor);
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

/* event-venue-details compact density — minimal styling, rail-fit. */
.newspack-community-event-venue-details--compact .newspack-community-event-venue-details__name {
	font-size: 1rem;
	margin: 0 0 0.25rem;
}

.newspack-community-event-venue-details--compact .newspack-community-event-venue-details__address-line,
.newspack-community-event-venue-details--compact .newspack-community-event-venue-details__phone-line {
	font-size: 0.875rem;
	margin: 0;
	color: var(--wp--preset--color--neutral-600, #555);
}

/* entity-photo — scale to container, cap hero height with cover-fit. */
.newspack-community__entity-photo {
	margin: 0;
	max-width: 100%;
}

.newspack-community__entity-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.newspack-community__entity-photo--hero img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
	max-height: 480px;
}

/* Main-column section headings — small caps, full contrast, ruled border-bottom.
 * Scoped to h2-level block headings — BEM `__heading` suffix (most blocks),
 * BEM `__label` suffix (event-venue-details full-mode renders its "Venue"
 * h2 with a `__label` class because the venue name h3 below is the block's
 * primary heading), or legacy `section-heading` (location-hours,
 * location-meta-data) — so publisher-inserted h2s inside content blocks
 * don't inherit the directory section-heading chrome. h2-only scope is
 * required — a bare attribute selector would also match nested
 * `__heading-link` / `__heading-arrow` elements (see location-showtimes). */
.directory-shell__main h2[class*="__heading"],
.directory-shell__main h2[class*="__label"],
.directory-shell__main h2.section-heading {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast, #1a1a1a);
	margin: var(--wp--preset--spacing--40, 1.5rem) 0 0.75rem;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wp--preset--color--base-3, #e5e5e5);
}

/* Note: no `:first-child` reset — every section heading is the first child of
 * its own block wrapper (e.g. h2 inside `<section class="...entity-photo--strip">`),
 * so :first-child would zero the top margin on every heading instead of just
 * the column's first. The 1.5rem top margin on the column's first heading is
 * visually fine — it just means the column content starts 1.5rem below the
 * column top edge. */

/* Rail + conversion section headings — small caps, muted, no border-bottom.
 * Covers both h3 (rail blocks: CONTACT, ACTIONS, MAP, SHARE) and h2 (the
 * Event "When" card lives in conversion above main, so semantically it's
 * top-level on the page and uses h2; the rail-style visual still applies).
 * Only `margin-bottom` is declared so WP's block-gap rule can apply
 * `margin-top` where the heading is a top-level sibling (e.g. the SHARE
 * heading). Headings nested inside blocks don't receive block-gap and stay
 * flush with their block's top edge. */
.directory-shell__rail h3,
.directory-shell__conversion h2,
.directory-shell__conversion h3 {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3, #6b6b6b);
	margin-bottom: 0.75rem;
	line-height: 1.4;
}

/* Explicit reset for in-block headings — defends against UA / theme default
 * top margin on heading elements that WP block-gap doesn't touch (block-gap
 * applies between top-level column siblings only, not inside dynamic block
 * wrappers). The top-level SHARE h3 is not matched by this selector. */
.directory-shell__rail > * h3,
.directory-shell__conversion > * h2,
.directory-shell__conversion > * h3 {
	margin-top: 0;
}

/* entity-action-buttons — render the .button / .button-secondary / .button-primary
 * anchor classes the block emits as actual buttons. */
.newspack-community-entity-action-buttons {
	display: flex;
	gap: 0.5rem;
}

.newspack-community-entity-action-buttons--vertical {
	flex-direction: column;
}

.newspack-community-entity-action-buttons .button {
	align-items: center;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	box-sizing: border-box;
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	padding: 0.625rem 1rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.newspack-community-entity-action-buttons .button-primary {
	background-color: var(--wp--preset--color--accent, #2563eb);
	border-color: var(--wp--preset--color--accent, #2563eb);
	color: var(--wp--preset--color--base, #fff);
}

.newspack-community-entity-action-buttons .button-primary:hover,
.newspack-community-entity-action-buttons .button-primary:focus {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent, #1d4ed8) 85%, black);
	color: var(--wp--preset--color--base, #fff);
}

.newspack-community-entity-action-buttons .button-secondary {
	background-color: transparent;
	border-color: var(--wp--preset--color--base-3, #d4d4d4);
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.newspack-community-entity-action-buttons .button-secondary:hover,
.newspack-community-entity-action-buttons .button-secondary:focus {
	background-color: var(--wp--preset--color--base-2, #f7f7f7);
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

/* Lead-action visual hierarchy — the first button in entity-action-buttons
 * (typically "Get Directions") gets primary-button treatment regardless of
 * the block's overall style attribute. Matches the wireframe pattern where
 * the lead action stands out and supporting actions read as secondary.
 *
 * `:first-of-type` (not `:first-child`) so the optional `showHeading` <h3>
 * sibling doesn't displace the button from the matching slot. */
.newspack-community-entity-action-buttons .button:first-of-type {
	background-color: var(--wp--preset--color--accent, #2563eb);
	border-color: var(--wp--preset--color--accent, #2563eb);
	color: var(--wp--preset--color--base, #fff);
}

.newspack-community-entity-action-buttons .button:first-of-type:hover,
.newspack-community-entity-action-buttons .button:first-of-type:focus {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent, #1d4ed8) 85%, black);
	color: var(--wp--preset--color--base, #fff);
}

/* event-ticket-button — primary CTA when present. The block emits its own
 * wrapper; style anchor descendants without assuming a specific inner class. */
.wp-block-newspack-community-event-ticket-button a,
.newspack-community-event-ticket-button a {
	align-items: center;
	background-color: var(--wp--preset--color--accent, #2563eb);
	border: 1px solid var(--wp--preset--color--accent, #2563eb);
	border-radius: 0.5rem;
	box-sizing: border-box;
	color: var(--wp--preset--color--base, #fff);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	padding: 0.625rem 1rem;
	text-decoration: none;
	width: 100%;
}

.wp-block-newspack-community-event-ticket-button a:hover,
.wp-block-newspack-community-event-ticket-button a:focus,
.newspack-community-event-ticket-button a:hover,
.newspack-community-event-ticket-button a:focus {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent, #1d4ed8) 85%, black);
	color: var(--wp--preset--color--base, #fff);
}

/* event-ticket-button price caption — small muted text under the CTA. */
.newspack-community-event-ticket-button .ticket-caption {
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast-3, #6b6b6b);
	margin-top: 0.5rem;
	text-align: center;
	line-height: 1.4;
}

/* location-quick-info vertical layout — rail-stacked rows.
 * Wireframe target: icon-prefixed stack, links inherit body text color
 * (accent only on hover), tight row padding. */
.wp-block-newspack-community-location-quick-info--vertical {
	font-style: normal;
	line-height: 1.5;
}

.wp-block-newspack-community-location-quick-info--vertical .wp-block-newspack-community-location-quick-info__rows {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wp-block-newspack-community-location-quick-info--vertical .wp-block-newspack-community-location-quick-info__row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.25rem 0;
	font-size: 0.875rem;
}

.wp-block-newspack-community-location-quick-info--vertical .wp-block-newspack-community-location-quick-info__icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--wp--preset--color--contrast-3, #6b6b6b);
	margin-top: 0.125rem;
}

/* Links use body text color so the rail reads as a calm contact card,
 * but keep a persistent underline so they remain discoverable for touch
 * and non-hovering users (a11y baseline — visual cue must not depend on
 * hover/focus alone). Hover/focus emphasize via accent color. */
.wp-block-newspack-community-location-quick-info--vertical .wp-block-newspack-community-location-quick-info__link {
	color: var(--wp--preset--color--contrast, #1a1a1a);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--base-3, #d4d4d4);
	text-underline-offset: 0.15em;
}

.wp-block-newspack-community-location-quick-info--vertical .wp-block-newspack-community-location-quick-info__link:hover,
.wp-block-newspack-community-location-quick-info--vertical .wp-block-newspack-community-location-quick-info__link:focus {
	color: var(--wp--preset--color--accent, #2563eb);
	text-decoration-color: currentColor;
}

/* event-contact rail card — mirrors location-quick-info vertical's wireframe
 * treatment (calm body-color text with subtle persistent underline, accent
 * on hover/focus). Same design role on Event detail pages as the location-
 * quick-info vertical rail card serves on Location detail pages. */
.newspack-community-event-contact {
	font-style: normal;
	line-height: 1.5;
}

.newspack-community-event-contact .newspack-community-event-contact__rows {
	gap: 0.5rem;
}

.newspack-community-event-contact .newspack-community-event-contact__row {
	padding: 0.25rem 0;
	font-size: 0.875rem;
}

.newspack-community-event-contact .newspack-community-event-contact__icon {
	width: 1rem;
	height: 1rem;
	color: var(--wp--preset--color--contrast-3, #6b6b6b);
	margin-top: 0.125rem;
}

.newspack-community-event-contact .newspack-community-event-contact__link {
	color: var(--wp--preset--color--contrast, #1a1a1a);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--base-3, #d4d4d4);
	text-underline-offset: 0.15em;
}

.newspack-community-event-contact .newspack-community-event-contact__link:hover,
.newspack-community-event-contact .newspack-community-event-contact__link:focus {
	color: var(--wp--preset--color--accent, #2563eb);
	text-decoration-color: currentColor;
}

/* entity-meta-row pills — category/tag chips emitted as <span class="pill">
 * by the entity-meta-row block. Scoped to avoid colliding with any upstream
 * .pill utilities. Background uses base-2 (light wash), pill radius (999px)
 * for full rounding, small body text size. */
.newspack-community__entity-meta-row .pill {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: var(--wp--preset--color--base-2, #f0f0f0);
	border-radius: 999px;
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast, #1a1a1a);
	line-height: 1.4;
}

/* entity-photo strip variant — horizontal scroll row of thumbnails.
 * Thumbs flex at ~200px wide (clamp to 160–260px) so ~3 are visible at
 * the typical ~800px main-column desktop width. scroll-snap keeps swipe
 * gestures crisp on touch. A thin styled scrollbar serves as the scroll
 * affordance on both mouse + touch surfaces — the WP default browser
 * scrollbar is too heavy here. */
.newspack-community__entity-photo--strip .thumbs {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--base-3, #d4d4d4) transparent;
}

.newspack-community__entity-photo--strip .thumbs::-webkit-scrollbar {
	height: 6px;
}

.newspack-community__entity-photo--strip .thumbs::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--base-3, #d4d4d4);
	border-radius: 3px;
}

.newspack-community__entity-photo--strip .thumbs::-webkit-scrollbar-track {
	background: transparent;
}

.newspack-community__entity-photo--strip .thumbs > a {
	flex: 0 0 auto;
	width: clamp(160px, 30%, 260px);
	aspect-ratio: 16 / 9;
	scroll-snap-align: start;
	border-radius: 0.5rem;
	overflow: hidden;
	display: block;
}

.newspack-community__entity-photo--strip .thumbs > a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ----------------------------------------------------------------------
 * Community header
 *
 * A white bar ruled off below: the publication's logo, then its community
 * menu, inverted on hover.
 * ---------------------------------------------------------------------- */

.community-header {
	margin-bottom: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--base-3);
	background: var(--wp--preset--color--base);
}

.community-header .community-navigation {
	gap: 0;
}

.community-header .community-navigation .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast);
}

.community-header .community-navigation .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	padding-right: 0;
}

/* The toggle continues its link's box, so the two invert as one. */
.community-header .community-navigation .wp-block-navigation-submenu__toggle {
	align-self: stretch;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--20);
}

.community-header .community-navigation .wp-block-navigation-submenu__toggle svg {
	width: 0.6em;
	height: 0.6em;
	margin-top: 0;
}

.community-header .community-navigation :is(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle):is(:hover, :focus-visible),
.community-header .community-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible) + .wp-block-navigation-submenu__toggle,
.community-header .community-navigation .wp-block-navigation-item__content:has(+ .wp-block-navigation-submenu__toggle:is(:hover, :focus-visible)) {
	background: var(--wp--preset--color--contrast);
	/* Outranks the parent theme.json's !important link-hover fade. */
	color: var(--wp--preset--color--base) !important;
}

/* A short page's footer sits at the foot of the window. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
	min-width: 0;
}