/*
 * assets/css/components.css · Out & Down theme
 *
 * Phase 12.4 extraction. These five components were built once in
 * event.css (Phase 12.1) under generic, unprefixed names -- price pill,
 * sold-out chip, the Save/Share actions row, the share menu, the toast
 * and the organiser avatar/name -- because nothing about them is
 * event-specific. The guide page (Phase 12.4) needed the actions row,
 * share menu and organiser avatar unchanged, which would otherwise have
 * meant a second byte-identical copy (the same duplication Phase 12.3
 * found and fixed for the poster card in poster.css). This file is now
 * their one source, enqueued wherever any of them can appear: the single
 * event page and the guide page today.
 *
 * `.oad-actions-btns` is the shared wrapper class for a full-width
 * Ground-at-rest/Ink-hover button row -- applied to both the single event
 * page's aside actions group and the guide page's actions group, so
 * GeoDirectory's own `.geodir-addtofav` output (the [gd_post_fav]
 * shortcode) and `.oad-share__toggle` pick up identical styling in both
 * places without a second selector.
 */

.oad-actions-btns .geodir-addtofav,
.oad-share__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 44px;
	width: 100%;
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

/* GeoDirectory wraps the button in .gd-fav-info-wrap > .gd-list-favorite (with a stray <br>);
   left inline they sat off-axis beside Share on mobile. */
.oad-actions-btns .gd-fav-info-wrap,
.oad-actions-btns .gd-list-favorite {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

.oad-actions-btns .gd-list-favorite br {
	display: none;
}

/* Save icon: outline when unfavorited, filled when favorited, always Ink --
   never GeoDirectory's own grey/red. Sitewide (event page, guide page,
   profile, wherever [gd_post_fav] renders), not just the actions row above:
   selectors are on .geodir-addtofav itself, not .oad-actions-btns.
   GeoDirectory sends the same icon param for both states (post-functions.php
   sets $favourite_icon = $unfavourite_icon to one value) -- only its own
   link class toggles (geodir-addtofav-icon = unfavorited,
   geodir-removetofav-icon = favorited) -- so getting a real outline/filled
   swap, not just a colour swap, means replacing the glyph rather than
   recolouring it: GD's own <i>/<svg> is collapsed to nothing and a Ink-only
   bookmark is drawn from these rules instead, matching the pencil-icon mask
   technique used for Sell Tickets above. */
.geodir-addtofav .geodir-addtofav-icon,
.geodir-addtofav .geodir-removetofav-icon {
	color: inherit !important;
}

/* The icon and its (often visually-hidden) text sit inside one <a>, which
   is inline by default -- baseline-aligns the icon against the text's
   line box instead of centering it. Flexing the link itself, not just
   its .geodir-addtofav wrapper, centers icon and text on the same line. */
.geodir-addtofav-icon,
.geodir-removetofav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
}

/* With the text hidden, the gap still sits before the zero-width label and
   pushes the icon 4px off-centre. */
.gd-fav-hide-text .geodir-addtofav-icon,
.gd-fav-hide-text .geodir-removetofav-icon {
	gap: 0;
}

.geodir-addtofav .geodir-addtofav-icon i,
.geodir-addtofav .geodir-addtofav-icon svg,
.geodir-addtofav .geodir-removetofav-icon i,
.geodir-addtofav .geodir-removetofav-icon svg {
	display: inline-block;
	width: 16px;
	height: 16px;
	font-size: 0;
	color: inherit !important;
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.geodir-addtofav .geodir-removetofav-icon i,
.geodir-addtofav .geodir-removetofav-icon svg {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.oad-actions-btns .geodir-addtofav:hover,
.oad-share__toggle:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-share {
	position: relative;
}

.oad-share__menu {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 5;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--ground);
	border: 2px solid var(--wp--preset--color--ink);
}

/* display:flex above beats the UA's [hidden]{display:none}, which left the
   menu open on every page load. */
.oad-share__menu[hidden] {
	display: none;
}

.oad-share__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--16);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 0;
	border-top: 2px solid var(--wp--preset--color--ink);
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-share__row:first-child {
	border-top: 0;
}

.oad-share__row:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------ */
/* Button · blueprint Section 06's .btn / .btn.secondary / disabled     */
/* ------------------------------------------------------------------ */

/*
 * Phase 13.4. One rule set, joined onto every button this theme has to
 * put a blueprint face on: its own .oad-btn/.oad-btn--secondary markup
 * (none yet -- reserved for a future non-GD use) plus GeoDirectory's own
 * widget-rendered buttons, which carry no hook to add a class to. GD's
 * aui()->button() always emits Bootstrap's own .btn/.btn-primary/
 * .btn-outline-* -- these selector lists override that, at the same
 * specificity level Bootstrap's own utility classes sit at, hence the
 * !important (same reasoning as the pre-13.4 event.css rules this
 * replaces).
 */
.oad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 44px;
	box-sizing: border-box;
	width: 100%;
	padding: 0 var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-ev-tickets .geodir-sell-tickets-btn,
.oad-ev-tickets .geodir-buy-tickets-btn,
.oad-ev-tickets .oad-ev-teaser-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 44px;
	box-sizing: border-box;
	width: 100%;
	padding: 0 var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-btn:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

.oad-ev-tickets .geodir-sell-tickets-btn:hover,
.oad-ev-tickets .geodir-buy-tickets-btn:hover,
.oad-ev-tickets .oad-ev-teaser-btn:hover {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--ink) !important;
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: -2px !important;
}

.oad-btn--secondary {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--ink);
}

.oad-ev-tickets .geodir-manage-tickets-btn,
.oad-ev-tickets .geodir-view-tickets-btn {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
}

.oad-btn--secondary:hover,
.oad-btn--secondary:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-ev-tickets .geodir-manage-tickets-btn:hover,
.oad-ev-tickets .geodir-manage-tickets-btn:focus,
.oad-ev-tickets .geodir-view-tickets-btn:hover,
.oad-ev-tickets .geodir-view-tickets-btn:focus {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Disabled -- GD's own "Tickets Sold Out" state (kept for the owner/admin
   view; the public never reaches it, see blocks/event-tickets/render.php).
   Ground fill, Muted text and border, not-allowed cursor -- blueprint
   Section 34's .st-dis, never Bootstrap's outline-danger red. */
.oad-btn:disabled,
.oad-btn.disabled {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--muted);
	border: 2px solid var(--wp--preset--color--muted);
	cursor: not-allowed;
}

.oad-ev-tickets .geodir-buy-tickets-btn.disabled {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--muted) !important;
	border: 2px solid var(--wp--preset--color--muted) !important;
	cursor: not-allowed;
}

.oad-ev-tickets .geodir-buy-tickets-btn.disabled:hover,
.oad-ev-tickets .geodir-buy-tickets-btn.disabled:focus {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--muted) !important;
	border-color: var(--wp--preset--color--muted) !important;
}

/* Teaser note / admin-only note -- Ground, hairline, Speak. Replaces the
   dependency on snippet 246's Bootstrap-alert styling (Phase 14 retires
   that snippet; these two notes must not go unstyled the moment it does). */
.oad-ev-teaser-note,
.oad-ev-admin-note {
	margin-top: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ground);
	border: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/* Price pill · sold-out chip                                          */
/* ------------------------------------------------------------------ */

.oad-price-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.oad-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 44px;
	width: 100%;
	justify-content: center;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.oad-chip__dot {
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--warning);
	display: block;
}

/* Compact modifiers (Phase 13.4) -- the guide card's buy cell and the
   This-week row's price cell each already size and colour their own
   wrapper (.oad-gcard__price / .oad-row__price), so the badge inside them
   drops the full-size pill/chip's own min-height, padding and fill and
   just inherits. Kept as real modifier classes rather than a bare div, so
   outanddown_price_badge() (inc/event-data.php) can be the one function
   that decides pill vs. chip vs. nothing everywhere it's used. */
.oad-price-pill--compact,
.oad-chip--compact {
	display: inline-flex;
	min-height: 0;
	width: auto;
	padding: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* ------------------------------------------------------------------ */
/* Organiser · avatar + name                                           */
/* ------------------------------------------------------------------ */

.oad-organiser {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
}

.oad-organiser__avatar {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
}

.oad-organiser__info {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}

.oad-organiser__name {
	align-items: center;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: -0.008em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

a.oad-organiser__name {
	min-height: 44px;
}

.oad-organiser__handle {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------------ */
/* Toast · Section 32 (Copy link confirmation)                          */
/* ------------------------------------------------------------------ */

.oad-toast {
	position: fixed;
	left: var(--wp--preset--spacing--16);
	bottom: calc(var(--wp--preset--spacing--16) + env(safe-area-inset-bottom, 0px));
	z-index: 20;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Contact dialog                                                       */
/* ------------------------------------------------------------------ */

.oad-pf-contact__dialog {
	border: none;
	padding: 0;
	width: min(440px, calc(100vw - 32px));
	background: var(--wp--preset--color--ground);
}

.oad-pf-contact__dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.oad-pf-contact__form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--32);
}

.oad-pf-contact__close {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-pf-contact__close:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-pf-contact__close svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Below 1024 the dialog is the whole screen, like the Bootstrap modals. */
@media (max-width: 1023px) {
	.oad-pf-contact__dialog {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		margin: 0;
		overflow-y: auto;
	}

	.oad-pf-contact__form {
		min-height: 100%;
		padding: var(--wp--preset--spacing--24);
		padding-top: var(--wp--preset--spacing--48);
	}
}

.oad-pf-contact__form h2 {
	font-size: 20px;
	padding-right: var(--wp--preset--spacing--40);
}

.oad-pf-contact__form label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-pf-contact__form input,
.oad-pf-contact__form textarea {
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	padding: var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	text-transform: none;
	letter-spacing: normal;
}

.oad-pf-contact__form textarea {
	min-height: 96px;
	resize: vertical;
}

.oad-pf-contact__hp {
	position: absolute;
	left: -100vw;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.oad-pf-contact__foot {
	display: flex;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--16);
}

.oad-pf-contact__cancel,
.oad-pf-contact__send {
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--24);
	border: none;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.oad-pf-contact__cancel {
	background: transparent;
	border: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.oad-pf-contact__send {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	transition-property: background-color, color;
	transition-duration: 100ms;
}

.oad-pf-contact__send:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

.oad-pf-contact__status {
	font-family: var(--wp--preset--font-family--meter);
	font-size: 13px;
	color: var(--wp--preset--color--warning);
	min-height: 1em;
}

/* Contact button · shared by the profile foot and the event page. */
.oad-pf-contact__open {
	height: 44px;
	padding: 0 var(--wp--preset--spacing--24);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: 100ms;
}

.oad-pf-contact__open:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

.oad-pf-contact--event .oad-pf-contact__open {
	width: 100%;
	box-sizing: border-box;
}