/*
 * Components: burger navigation, CTA button, event card, past-CSDs accordion,
 * external text links. Classes are prefixed rq- and assigned in Divi via the
 * CSS-class field of the module (see tools/import.md).
 */

/* --- Burger navigation --------------------------------------------------
 * Divi renders and animates its own mobile menu; these rules only enforce
 * touch-target size and a visible open state. Behavior (aria-expanded, Esc,
 * focus trap) lives in assets/js/nav.js.
 */

.rq-header [aria-expanded],
.rq-nav-toggle {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.rq-header [aria-expanded='true'],
.rq-nav-toggle[aria-expanded='true'] {
	color: var(--rq-accent-strong);
}

/* Divi keeps the mobile menu up to 980px, so the touch targets must too.
   Block-level flex fills the list item; inline-flex would shrink to the text. */
@media (max-width: 980px) {
	.rq-header nav a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* --- CTA button ---------------------------------------------------------
 * Assign rq-cta to the Divi button module (or rq-button to a plain link).
 * One CTA per page; accent surfaces are reserved for it.
 *
 * Divi puts a button module's CSS class on the <a> itself, while a class set
 * on a wrapping section lands on an ancestor — both spellings are matched so
 * the CTA styles survive either placement.
 */

a.et_pb_button.rq-cta,
.rq-cta a.et_pb_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--rq-space-m);
	background: var(--rq-accent-strong);
	color: var(--rq-accent-ink);
	border: 0;
	border-radius: var(--rq-radius);
	font-weight: 600;
	text-decoration: none;
}

a.et_pb_button.rq-cta:hover,
.rq-cta a.et_pb_button:hover {
	background: var(--rq-ink);
	color: var(--rq-accent-ink);
}

/* --- Event card (output of [rq_next_event], inc/events.php) ------------- */

/*
 * Surface, not surface-2: this card sits inside a sand-coloured section on the
 * homepage, where a sand card would be invisible against its own background.
 */
.rq-event-card {
	max-width: var(--rq-measure);
	background: var(--rq-surface);
	border: 1px solid var(--rq-border);
	border-radius: var(--rq-radius);
	padding: var(--rq-space-m);
}

.rq-event-card__date {
	margin: 0 0 var(--rq-space-xs);
	color: var(--rq-text-muted);
	font-size: var(--rq-step--1);
}

.rq-event-card__title {
	margin: 0;
	font-family: var(--rq-font-display);
	font-size: var(--rq-step-1);
}

.rq-event-card__all {
	margin: var(--rq-space-s) 0 0;
}

/* --- Accordion "Vergangene CSDs" ----------------------------------------
 * Native <details>/<summary>, no JavaScript. Markup per year, newest first:
 *
 *   <div class="rq-accordion">
 *     <details>
 *       <summary>CSD 2025</summary>
 *       <div class="rq-accordion__body">…2–3 Sätze, Galerielink…</div>
 *     </details>
 *   </div>
 */

.rq-accordion {
	max-width: var(--rq-measure);
	margin-inline: auto;
}

.rq-accordion details {
	background: var(--rq-surface-2);
	border: 1px solid var(--rq-border);
	border-radius: var(--rq-radius);
	margin-bottom: var(--rq-space-s);
}

.rq-accordion summary h2 {
	display: inline;
	font-size: inherit;
	margin: 0;
}

.rq-accordion summary {
	cursor: pointer;
	min-height: 44px;
	padding: var(--rq-space-s) var(--rq-space-m);
	font-family: var(--rq-font-display);
	font-size: var(--rq-step-1);
	color: var(--rq-ink);
}

.rq-accordion details[open] > summary {
	border-bottom: 1px solid var(--rq-border);
}

.rq-accordion .rq-accordion__body {
	padding: var(--rq-space-s) var(--rq-space-m) var(--rq-space-m);
}

/* --- External text links (social) ---------------------------------------
 * Visible hint that the link leaves the site. Pair with hidden text in the
 * layout: <span class="rq-visually-hidden">(externer Link)</span>.
 */

/* The empty alt text after the slash keeps screen readers from announcing the
   arrow — the link text already says it leaves the site. */
.rq-external::after {
	content: ' \2197' / '';
}

/* --- Section bands -------------------------------------------------------
 * The layouts used to carry background_color="#F2EEDD" inline, which put the
 * colour outside the token system: changing the token would have left six
 * layouts on the old sand. Assign rq-band in the layout instead.
 */

.rq-band {
	background: var(--rq-surface-2);
}

/* --- Hero ----------------------------------------------------------------
 * Divi collapses columns to full width at 980px, but the spec wants text and
 * image side by side from 768px, so the tablet range needs its own rule.
 */

.rq-hero .et_pb_row {
	align-items: center;
}

@media (min-width: 768px) and (max-width: 980px) {
	.rq-hero .et_pb_row {
		display: flex;
		gap: 3%;
	}

	.rq-hero .et_pb_row > .et_pb_column {
		width: auto !important;
		margin: 0 !important;
	}

	.rq-hero .et_pb_row > .et_pb_column:first-child {
		flex: 3 1 0;
	}

	.rq-hero .et_pb_row > .et_pb_column:last-child {
		flex: 2 1 0;
	}
}

/* --- The Events Calendar --------------------------------------------------
 * The plugin's views are driven by custom properties, so pointing those at the
 * design tokens is enough to stop the calendar arriving in its stock blue.
 */

.tribe-common,
.tribe-events {
	--tec-color-accent-primary: var(--rq-accent-strong);
	--tec-color-accent-primary-hover: var(--rq-ink);
	--tec-color-background: var(--rq-surface);
	--tec-color-text-primary: var(--rq-text);
	--tec-color-text-secondary: var(--rq-text-muted);
	--tec-color-border-default: var(--rq-border);
	--tec-font-family-sans-serif: var(--rq-font-body);
}

/* Divi reveals a hover arrow on buttons and widens the padding for it. The CTA
   pins its own padding, so the arrow would appear with no room — and a
   decorative animation is out of scope for this design anyway. */
.rq-cta .et_pb_button::after,
a.et_pb_button.rq-cta::after {
	display: none !important;
}