/*
 * Front-end compensation sheet.
 *
 * `aps-club.css` already styles every class this plugin emits — .events-row,
 * .event .date, .event .ph img, .event h3 em, .form-card, .field and so on —
 * so this file is deliberately small. It only covers three things:
 *
 *   1. Undoing the Elementor wrapper divs that sit between a shortcode widget
 *      and its output, which would otherwise break the events grid.
 *   2. States the static mock never had: an empty event list, sold-out
 *      evenings, form errors, optgroups, the honeypot.
 *   3. Accessibility affordances the mock lacked.
 *
 * Everything is scoped under .ct-page so it is inert on any other page, the
 * same discipline aps-typography-fix uses.
 */

/* ------------------------------------------------------------------ *
 * 1. Elementor shortcode-widget wrappers
 *
 * A shortcode widget renders as
 *   .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode
 * Those three divs would become the only child of any flex/grid parent,
 * collapsing four event cards into one cell. display:contents removes them
 * from the box tree so .event stays a direct grid item, whichever way the
 * widget ends up being placed.
 * ------------------------------------------------------------------ */

.ct-page .elementor-widget-shortcode {
	width: 100%;
}

.ct-page .events-row > .elementor-widget-shortcode,
.ct-page .events-row > .elementor-widget-shortcode > .elementor-widget-container,
.ct-page .events-row .elementor-shortcode,
.ct-page .form-card > .elementor-widget-shortcode,
.ct-page .form-card > .elementor-widget-shortcode > .elementor-widget-container,
.ct-page .form-card .elementor-shortcode {
	display: contents;
}

/* ------------------------------------------------------------------ *
 * 2. Event list states
 * ------------------------------------------------------------------ */

/* No upcoming evenings. Borrows the .event-extra treatment so an empty
   state still looks designed rather than broken. */
.ct-page.page-club .aps-events-empty {
	padding: 28px;
	border: 1px dashed rgba(232, 200, 140, 0.3);
	background: rgba(251, 248, 242, 0.02);
	text-align: center;
}

.ct-page.page-club .aps-events-empty p {
	margin: 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(251, 248, 242, 0.6);
}

/* ------------------------------------------------------------------ *
 * Event card header: month stamp above a two-column list of evenings
 *
 * The wrapper keeps aps-club.css's .event .date rule for its mono / uppercase
 * / letter-spaced / gold micro-typography, and only the layout is replaced —
 * that rule is display:flex with space-between, which laid the old single-line
 * version out and has to become a block here.
 * ------------------------------------------------------------------ */

.ct-page.page-club .event .date.aps-when {
	display: block;
}

/* The month reads as a date stamp: same mono voice as the rest of the card's
   micro-type, just much larger and widely tracked, so it carries the top of
   the card without competing with the serif event title below it. */
.ct-page.page-club .aps-month {
	display: block;
	text-align: center;
	font-size: clamp(15px, 1.4vw, 19px);
	letter-spacing: 0.22em;
	line-height: 1.2;
	color: var(--gold-soft);
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(232, 200, 140, 0.18);
	margin-bottom: 12px;
}

/* Two columns: the evening on the left, what is left of it on the right.
   A grid rather than per-row flex so the counts align down the whole card
   regardless of how wide any single date label happens to be. */
.ct-page.page-club .aps-nights {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	row-gap: 7px;
	margin: 0;
	align-items: baseline;
}

.ct-page.page-club .aps-nights .aps-night {
	text-align: left;
	color: var(--gold-soft);
	white-space: nowrap;
}

.ct-page.page-club .aps-nights .aps-free {
	margin: 0;                 /* dd carries a default indent */
	text-align: right;
	white-space: nowrap;
}

/* A full evening is a fact, not an error. Muted rather than alarming, and
   dimmed as a pair so the eye skips the whole row. */
.ct-page.page-club .aps-nights .aps-free[data-aps-soldout] {
	color: rgba(251, 248, 242, 0.38);
}

/* Card footer: the call to action alone.
   .event .meta is display:flex with space-between, which parked a lone child
   hard left. Centring it mirrors the month stamp at the top of the card, so
   the two rules top and bottom now bracket the content symmetrically. */
.ct-page.page-club .event .meta.aps-meta--cta {
	justify-content: center;
}

/* Same size as the month, so the two ends of the card answer each other.
   inline-block plus padding is purely a tap target — at 11px the old link was
   a small thing to hit on a phone. */
/* The brand's italic voice is the serif, not the mono — it is how `salt` is set
   in the wordmark and `España.` in the card titles. The theme's @import asks
   for Cormorant Garamond's real italic (ital,wght 1,300 and 1,400), so this is
   a drawn italic rather than a browser-slanted fake.

   Two adjustments come with the face rather than being separate decisions:

   - text-transform is cleared. .meta uppercases everything, and uppercase
     Cormorant italic is neither the brand's voice nor a combination the face
     is drawn for. Every italic on this site is sentence case.
   - letter-spacing drops from the inherited 0.16em to almost nothing. That
     tracking exists to open up 10px uppercase mono; applied to a connected
     italic serif it just pulls the letterforms apart. */
.ct-page.page-club .event .meta.aps-meta--cta .reserve {
	display: inline-block;
	padding: 2px 4px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	/* Larger in px than the month's 19px because Cormorant is light with a
	   small x-height and reads optically smaller — this is what makes the two
	   ends of the card feel the same weight. */
	font-size: clamp(19px, 1.8vw, 24px);
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1.2;
}

/* The arrow stays upright, and stays in the mono face it is already in.
   It is a glyph, not a word: slanting it makes it look like it is falling
   over, and Cormorant is not a face to rely on for an arrow glyph. */
.ct-page.page-club .event .meta.aps-meta--cta .reserve::after {
	font-family: var(--mono);
	font-style: normal;
	font-size: 0.7em;
	letter-spacing: 0;
}

/* The hydration swap must not flash. */
.ct-page.page-club .event .seats {
	transition: opacity .18s ease;
}

.ct-page.page-club .event .seats.is-updating {
	opacity: .45;
}

/* ------------------------------------------------------------------ *
 * 3. Form states (used from Phase 3 on)
 * ------------------------------------------------------------------ */

/* The events select groups evenings under their event. aps-club.css styles
   option but not optgroup, and browsers default optgroups to a light
   background that is unreadable on this dark card. */
.ct-page.page-club .field select optgroup {
	background: var(--moss-darkest);
	color: var(--gold-soft);
	font-family: var(--sans);
	font-style: normal;
	font-weight: 400;
}

.ct-page.page-club .field select option:disabled {
	color: rgba(251, 248, 242, 0.35);
}

/* Honeypot. Positioned off-screen from an external stylesheet rather than
   inline display:none or type=hidden — both of which bots read and skip. */
.ct-page .aps-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.ct-page .aps-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Result and error messaging, inside the existing .form-card frame. */
.ct-page.page-club .aps-message {
	margin: 0 0 28px;
	padding: 16px 18px;
	border-left: 2px solid var(--gold-soft);
	background: rgba(232, 200, 140, 0.07);
	font-size: 15px;
	line-height: 1.6;
	color: var(--paper);
}

.ct-page.page-club .aps-message--error {
	border-left-color: #d98b7a;
	background: rgba(217, 139, 122, 0.09);
}

.ct-page.page-club .aps-message h3 {
	margin: 0 0 .4em;
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 400;
	color: var(--paper);
}

.ct-page.page-club .aps-message ul {
	margin: .5em 0 0;
	padding-left: 1.2em;
}

.ct-page.page-club .aps-message p:last-child {
	margin-bottom: 0;
}

/* Per-field error, sitting under the input inside the flex column .field. */
.ct-page.page-club .field .aps-field-error {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #d98b7a;
}

.ct-page.page-club .field.has-error input,
.ct-page.page-club .field.has-error select,
.ct-page.page-club .field.has-error textarea {
	border-bottom-color: #d98b7a;
}

/* Live remaining-seat hint next to the evening picker. */
.ct-page.page-club .aps-hint-line {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(251, 248, 242, 0.55);
	min-height: 1.2em;
}

/* Keyboard focus must stay visible on a dark card — the design removes the
   default outline on inputs, so give focus its own unmistakable treatment. */
.ct-page.page-club .form-card :focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.ct-page.page-club .btn[aria-disabled="true"],
.ct-page.page-club .btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ *
 * 4. Chef's Table enquiry form
 *
 * The same states as section 3, in the opposite colour scheme. The Dining
 * Club form card is dark (moss, with paper text); the Chef's Table card is
 * light (--paper, with --ink text and --sage-deep labels). Reusing the rules
 * above would put paper-coloured text on a cream card — invisible exactly
 * when it matters, since these are error messages.
 *
 * .aps-hp and .aps-sr-only are already scoped to .ct-page and need nothing
 * here; only the things that carry a colour are repeated.
 * ------------------------------------------------------------------ */

.ct-page.page-chef .aps-message {
	margin: 0 0 28px;
	padding: 16px 18px;
	border-left: 2px solid var(--gold-dim);
	background: rgba(200, 168, 107, 0.16);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
}

.ct-page.page-chef .aps-message--error {
	border-left-color: #a8452f;
	background: rgba(168, 69, 47, 0.08);
}

.ct-page.page-chef .aps-message h3 {
	margin: 0 0 .4em;
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 400;
	color: var(--ink);
}

.ct-page.page-chef .aps-message ul {
	margin: .5em 0 0;
	padding-left: 1.2em;
}

.ct-page.page-chef .aps-message p:last-child,
.ct-page.page-chef .aps-message li:last-child {
	margin-bottom: 0;
}

/* Per-field error, under the control inside the flex column .field.
   Darker than the dark card's #d98b7a: that tint is chosen to glow on moss
   and fails contrast on cream. */
.ct-page.page-chef .field .aps-field-error {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #a8452f;
}

.ct-page.page-chef .field.has-error input,
.ct-page.page-chef .field.has-error select,
.ct-page.page-chef .field.has-error textarea {
	border-bottom-color: #a8452f;
}

/* The design removes the default outline on these inputs, so keyboard focus
   needs its own treatment. Sage rather than gold: gold on cream is close to
   invisible, which is the one thing a focus ring may not be. */
.ct-page.page-chef .form-card :focus-visible {
	outline: 2px solid var(--sage-deep);
	outline-offset: 3px;
}

.ct-page.page-chef .btn[aria-disabled="true"],
.ct-page.page-chef .btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}