/**
 * Demo Days — Phase 6 frontend functional CSS ONLY (instruction §4).
 * Deliberately NOT a recreation of the full Demo Days visual design —
 * that belongs to the Page Pack (Phase 7). Every rule below exists for
 * a functional reason: hiding the honeypot, loading/disabled mechanics,
 * accessibility helpers, or a Full-badge color this phase's markup needs
 * that the Page Pack CSS doesn't define yet (instruction §19).
 */

/* Honeypot: hidden from sighted users AND screen readers, but still a
   real, tabbable-avoided input a bot's DOM-fill script can still find
   and populate (instruction §34). */
.mdd-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Disabled-CTA mechanics (instruction §12/§18 FULL state) — the Page
   Pack's own button classes define color/fill but no disabled treatment. */
.mdd-cta:disabled,
.pp-dd-form button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Full-badge color fallback (instruction §19 — "no dedicated Full badge
   style... use the nearest existing badge treatment"). Reuses the same
   badge shape/padding the Page Pack already defines on .pp-dd-card__badge;
   this only supplies a Full-appropriate fill when no inline style was
   set by an admin-configured badge variant. */
.mdd-badge--full {
	background: #27272c;
	color: #fff;
}

/* Loading-state mechanics: submit button shows resolved copy, no spinner
   asset — keep functional-only per instruction §4. */
.pp-dd-form button[disabled] {
	pointer-events: none;
}

/* Error/live-region baseline (instruction §65 aria-live regions must be
   perceivable, not just present in the DOM). */
.mdd-form-error {
	color: #b3261e;
	font-size: 0.9em;
	margin: 0.5em 0;
}
.mdd-form-error[hidden] {
	display: none;
}

/* Keep both form variants and the success/unselected states from ever
   visually overlapping before JS decides which is active — a functional
   layout guard, not a design opinion. */
.mdd-registration-selected[hidden],
.mdd-registration-unselected[hidden],
.mdd-registration-success[hidden],
.pp-dd-form[hidden] {
	display: none;
}

/* Editor-only preview affordance (instruction §58/§59) — never shipped
   on the frontend, since these classes only ever render inside the
   block editor's ServerSideRender/static-preview markup. */
.mdd-editor-preview {
	border: 1px dashed #8a8a8a;
	padding: 1em;
}
.mdd-editor-preview__label {
	font-weight: 600;
	margin: 0 0 0.75em;
}
.mdd-editor-preview__form input[disabled] {
	background: #f0f0f0;
}

/* Focus visibility — functional accessibility, not brand styling
   (instruction §65/§66). Phase 7.1 (round 9): was `.mdd-form__heading`,
   the element demo-days-registration-view.js's focusFormSummary() (renamed
   from focusHeading()) used to move focus to — that heading no longer
   exists in render.php's markup (the source design never had one), so the
   selector follows the same JS change to the element focus now actually
   lands on, `[data-mdd-form-summary]`. */
[data-mdd-form-summary]:focus-visible,
.mdd-registration-success:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* Responsive functional guard (instruction §87): the plugin's own
   markup must never introduce horizontal overflow at narrow widths,
   independent of whatever container the Page Pack later wraps it in. */
.mdd-events-block,
.mdd-registration-block {
	max-width: 100%;
	box-sizing: border-box;
}
.mdd-events-block img,
.mdd-registration-block img {
	max-width: 100%;
	height: auto;
}

/**
 * Partner card image-area enhancement (focused round, post-Phase-9).
 * Unlike .mdd-badge--full above, these elements (availability-pill icon
 * layout, partner pill, partner logo badge) never existed in the DOM
 * before that round, so — unlike the Full-badge fallback, which only
 * tops up one property the Page Pack didn't cover — there was no Page
 * Pack rule for any of them to interact with at all. Every rule below is
 * therefore fully self-contained on purpose: it does not assume or
 * depend on any Page Pack selector beyond the pre-existing,
 * already-relied-upon fact that .pp-dd-card__media is the positioning
 * container the existing status/availability pills already anchor into
 * (re-declared defensively below, not overridden — a no-op if the Page
 * Pack already sets it).
 *
 * Round 2 correction (exact-match pass): the first round's colors/
 * typography were a best-effort visual guess made without live access
 * to the Page Pack's own values. This round instead reads the REAL
 * values directly from the shipped Page Pack source —
 * incoming-page-packs/demo-days-page-pack-v2.zip → frontend.css, the
 * actual stylesheet ".pp-dd-card__badge.pp-dd-card__badge--new" (the
 * live "GAIDĀMS PASĀKUMS" / status-pill "open" state) and its --pp-*
 * design tokens come from:
 *   --pp-ink:          #27272C  (status-pill text color)
 *   --pp-bone:         #FFFFFF  (counter-pill text color)
 *   --pp-accent-soft:  #CDCBFF  (status-pill "open" background)
 *   --pp-r-pill:       999px
 *   padding: 6px 11px; font-size: 11px; font-weight: 400;
 *   letter-spacing: .1em; text-transform: uppercase; (all from the
 *   Page Pack's own .pp-dd-card__badge base rule)
 * These custom properties are declared scoped to `.pp-demo-days` (not
 * :root) by the Page Pack itself; every card this block renders is a
 * real descendant of that wrapper on the live page (confirmed in the
 * Page Pack's own content.html), so `var(--pp-ink, #27272C)` below
 * resolves to the live token at runtime on the front end, and only
 * falls back to the literal hex in a context with no such ancestor
 * (e.g. the block editor's ServerSideRender preview, wrapped in
 * `.mdd-editor-preview`, not `.pp-demo-days`) — reuse the real design
 * system where it's actually present, without a hard runtime dependency
 * on it always being there. No font-family/line-height is set below,
 * for the same reason the Page Pack's own .pp-dd-card__badge doesn't set
 * either — both inherit the identical ambient body value this way,
 * which is a more exact match than guessing the theme's font stack.
 *
 * The Page Pack also defines a *global* `.pp-dd-icon { color:
 * var(--pp-ink-56); }` rule (a muted, partly-transparent ink) that
 * applies to any icon carrying that class — this is why the
 * availability people-icon previously rendered darker than its own
 * (white) text. Both icon-color overrides below use a 3-class-deep
 * selector specifically so they win regardless of the two stylesheets'
 * load order — a tied 2-class specificity would leave the outcome to
 * source order, which this plugin does not control.
 */
.pp-dd-card__media {
	position: relative;
}

.pp-dd-card__counter {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.pp-dd-card__counter .pp-dd-icon {
	flex: none;
}
/* Round 2: exact match to the counter pill's own text color (--pp-bone),
   overriding the Page Pack's global muted .pp-dd-icon color above. */
.pp-dd-card__media .pp-dd-card__counter .pp-dd-icon {
	color: #FFFFFF;
	opacity: 1;
}

/* Shared pill foundation — the partner pill below composes this so its
   shape/density/typography is derived from the SAME values as the
   status pill's own base rule, not a second hand-copied approximation. */
.pp-dd-card__image-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	height: auto;
	padding: 6px 11px;
	border-radius: var(--pp-r-pill, 999px);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.pp-dd-card__partner-pill {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 1;
	max-width: calc(100% - 32px);
	background: var(--pp-accent-soft, #CDCBFF);
	color: var(--pp-ink, #27272C);
}
.pp-dd-card__partner-pill .pp-dd-icon {
	flex: none;
}
/* Round 2: exact match to the pill's own text color, overriding the
   Page Pack's global muted .pp-dd-icon color (see comment above). */
.pp-dd-card__media .pp-dd-card__partner-pill .pp-dd-icon {
	color: var(--pp-ink, #27272C);
}
.pp-dd-card__partner-pill span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pp-dd-card__partner-logo-badge {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	box-sizing: border-box;
	padding: 8px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(20, 16, 40, 0.18);
}
.pp-dd-card__partner-logo-badge .pp-dd-card__partner-logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Narrow cards: keep the partner pill from colliding with the logo badge —
   truncate rather than overlap or overflow the media box (instruction:
   "long localized partner text must not destroy the layout"). Round 2:
   no longer shrinks padding/font-size here — those already exactly match
   the status pill's own values at every width, and the exact-match
   instruction is explicit that the partner pill's typography must never
   go smaller than the status pill's, even to fit longer localized text. */
@media (max-width: 480px) {
	.pp-dd-card__partner-pill {
		max-width: calc(100% - 96px);
	}
	.pp-dd-card__partner-logo-badge {
		width: 52px;
		height: 52px;
		padding: 6px;
		border-radius: 11px;
	}
}