/* =============================================================================
   ZZ Theme – Global Styles
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Custom properties (mirror theme.json tokens for use in custom CSS)
   --------------------------------------------------------------------------- */
:root {
	--zz-white:    #ffffff;
	--zz-black:    #000000;
	--zz-yellow:   #fac80e;
	--zz-red:      #f05100;
	--zz-gray-100: #f5f5f5;
	--zz-gray-200: #e0e0e0;
	--zz-gray-600: #555555;

	--zz-content-width: 780px;
	--zz-wide-width:    1200px;

	--zz-header-height: 100px; /* approx, used for sticky offset */

	/* Card border – change these two values to restyle all article cards at once */
	--zz-card-border-color: #e0e0e0;
	--zz-card-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Base resets / global
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


/* =============================================================================
   HEADER
   ============================================================================= */
/* Top bar */
.header-top {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

/* Utility buttons – outline style override */
.btn-utility .wp-block-button__link {
	background: transparent;
	color: var(--zz-black);
	border: 1.5px solid var(--zz-black);
	padding: 0.3rem 0.75rem;
	transition: background 0.15s, color 0.15s;
}
.btn-utility .wp-block-button__link:hover {
	background: var(--zz-black);
	color: var(--zz-white);
	text-decoration: none;
}

/* Support/Unterstützen button */
.btn-support .wp-block-button__link {
	padding: 0.3rem 0.75rem;
	transition: opacity 0.15s;
}
.btn-support .wp-block-button__link:hover {
	opacity: 0.85;
	text-decoration: none;
}

/* Search button icon */
.header-search .wp-block-search__button {
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--zz-black);
}

/* Weather widget */
.header-weather {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--zz-red);
	letter-spacing: 0.03em;
	white-space: nowrap;
	padding-right: 0.5rem;
	margin: 0;
	flex-shrink: 0;
}

/* Prevent the nav block from eating all flex space */
.header-nav .wp-block-navigation {
	flex: 0 1 auto;
}

/* Navigation bar */
.header-nav {
	padding-top: 0;
	padding-bottom: 0;
	border-top: 1px solid var(--zz-gray-200);
}

.main-navigation .wp-block-navigation__container {
	gap: 0;
}

.main-navigation .wp-block-navigation-item__content {
	padding: 0.75rem 1rem;
	color: var(--zz-black);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: color 0.15s, background 0.15s;
}

.main-navigation .wp-block-navigation-item__content:hover,
.main-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--zz-red);
	text-decoration: none;
}

/* Active indicator: yellow underline */
.main-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	box-shadow: inset 0 -3px 0 var(--zz-yellow);
}


/* =============================================================================
   ARTICLE CARDS – shared
   ============================================================================= */

.article-card {
	position: relative;
	background: var(--zz-white);
	border: 1px solid var(--zz-card-border-color);
	border-radius: var(--zz-card-radius);
	overflow: hidden;
	/* Reset Gutenberg's block gap so spacing is controlled via margin on category label */
	--wp--style--block-gap: 0;
}

/* Featured image wrapper */
.article-card .wp-block-post-featured-image {
	position: relative; /* anchor for category overlay and club badge */
	overflow: hidden;
	margin-bottom: 0;
}

/* Media format icons – bottom-right of featured image */
.article-card__media-icons {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	display: flex;
	gap: 0.25rem;
	z-index: 2;
}

.media-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	background: rgba(0, 0, 0, 0.65);
	color: var(--zz-white);
	border-radius: 2px;
}

.media-icon svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.article-card .wp-block-post-featured-image img {
	width: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.article-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* Card body */
.article-card__body {
	padding-top: 0;
}

/* Category tag – absolute overlay on featured image, top-left corner */
.article-card__category {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.label-kolumne {
	position: absolute;
	top: 2.75rem;
	left: 50.5rem;
}

.article-card__category a {
	display: inline-block;
	background: var(--zz-yellow);
	color: var(--zz-black);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 0.2rem 0.5rem;
	line-height: 1.4;
	text-decoration: none;
	transition: background 0.15s;
}

.article-card__category a:hover {
	background: var(--zz-black);
	color: var(--zz-white);
	text-decoration: none;
}

/* Title link */
.article-card__title a {
	color: var(--zz-black);
	text-decoration: none;
}

.article-card__title a:hover {
	color: var(--zz-red);
	text-decoration: none;
}

/* Excerpt */
.article-card__excerpt {
	color: var(--zz-gray-600);
	margin-top: 0.5rem;
}

/* Meta (author + date) */
.article-card__meta {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--zz-gray-600);
	gap: 0.25rem;
}

.article-card__meta .wp-block-post-author-name {
	font-weight: 600;
	color: var(--zz-black);
}

.article-card__meta .wp-block-post-author-name::after {
	content: "·";
	margin: 0 0.3rem;
	font-weight: 400;
	color: var(--zz-gray-600);
}


/* =============================================================================
   ARTICLE CARDS – size variants
   ============================================================================= */

/* --- Hero card --- */
.article-card--hero .article-card__title {
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
	margin-top: 0;
}

.article-card--hero .article-card__excerpt {
	font-size: 1.125rem;
	line-height: 1.5;
}

.article-card--hero .article-card__body {
	padding-top: 1rem;
}

/* Equal height: make card a flex column so body stretches to fill row height */
.article-card--hero,
.article-card--medium,
.article-card--grid {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.article-card--hero .article-card__body,
.article-card--medium .article-card__body,
.article-card--grid .article-card__body {
	flex: 1;
}

/* --- Medium card --- */
.article-card--medium .article-card__title {
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	margin-top: 0;
}

.article-card--medium .article-card__excerpt {
	font-size: 0.9375rem;
}

/* --- Small cards: horizontal layout (image left, text right) --- */
.article-card--small .wp-block-post-featured-image {
	flex-shrink: 0;
	width: 38%;
	align-self: stretch; /* override parent's align-items:flex-start so image fills card height */
}

.article-card--small .wp-block-post-featured-image img {
	object-fit: contain!important;
}

.article-card--small .article-card__body {
	flex: 1;
	min-width: 0;
}

.article-card--small .article-card__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 0;
}

.article-card--small .article-card__date {
	font-size: 0.8125rem;
	color: var(--zz-gray-600);
	margin-top: 0.35rem;
}

/* --- Generic grid card (archive) --- */
.article-card--grid .article-card__title {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 0;
}


/* =============================================================================
   OPINION / COLUMN CARDS  (categories: kolumne, kommentar)
   ============================================================================= */

/* Red badge with white text for opinion */
.category-kolumne .article-card__category a,
.category-kommentar .article-card__category a,
.category-pilz-am-sonntag .article-card__category a {
	background: var(--zz-red);
	color: var(--zz-white);
}

/* =============================================================================
   IN-DEPTH / ANALYSE CARDS  (category: analyse)
   ============================================================================= */

/* Red badge to signal deeper/investigative reporting */
.category-analyse .article-card__category a {
	background: var(--zz-red);
	color: var(--zz-white);
}

.category-analyse .article-card__category a:hover {
	background: var(--zz-black);
	color: var(--zz-white);
}


/* =============================================================================
   CLUB BADGE
   Add class "has-club-badge" to the article card wrapper when the post is
   exclusive (e.g. via PHP template logic or a custom block).
   ============================================================================= */

.article-card.has-club-badge .wp-block-post-featured-image {
	position: relative;
}

.article-card.has-club-badge .wp-block-post-featured-image::after {
	content: "Exklusiv für Clubmitglieder";
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	background: var(--zz-red);
	color: var(--zz-white);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 0.2rem 0.6rem;
	line-height: 1.4;
}


/* =============================================================================
   HOMEPAGE SECTIONS
   ============================================================================= */

.site-main {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

.homepage-section {
	margin-bottom: var(--wp--preset--spacing--60);
}

/* Hero section */
.homepage-hero {
	margin-bottom: var(--wp--preset--spacing--60);
}

/* Featured 2-col section */
.homepage-featured {
	padding-top: var(--wp--preset--spacing--30);
}

.homepage-featured .wp-block-post-template {
	gap: 2rem;
}

/* Grid section */
.homepage-grid {
	padding-top: var(--wp--preset--spacing--30);
}

.homepage-grid .wp-block-post-template {
	gap: 1.5rem 1.5rem;
}


/* =============================================================================
   SINGLE POST
   ============================================================================= */

.single-post {
	max-width: 760px;
	margin-inline: auto;
	padding-top: var(--wp--preset--spacing--60);
}

.single-post__meta-top {
	margin-bottom: 0.75rem;
}

.single-post__title {
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.1;
	margin-bottom: 1rem;
}

.single-post__dek {
	font-size: 1.25rem;
	color: var(--zz-gray-600);
	line-height: 1.5;
	margin-bottom: 1.25rem;
}

.single-post__meta {
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
	color: var(--zz-gray-600);
}

.single-post__image {
	margin-bottom: 2rem;
}

/* Post content typography */
.single-post__content p {
	margin-bottom: 1.25em;
}

.single-post__content a {
	color: var(--zz-red);
	text-decoration: underline;
}

.single-post__content blockquote {
	border-left: 4px solid var(--zz-yellow);
	margin-left: 0;
	padding-left: 1.25rem;
	font-size: 1.2rem;
	font-style: italic;
	color: var(--zz-gray-600);
}


/* =============================================================================
   ARCHIVE PAGE
   ============================================================================= */

.archive-header {
	margin-bottom: var(--wp--preset--spacing--60);
}

.archive-title {
	font-size: 2rem;
	font-weight: 700;
}

.archive-query .wp-block-post-template {
	gap: 2rem 1.5rem;
}

/* Pagination */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--60);
	font-size: 0.9375rem;
}

.wp-block-query-pagination-numbers .page-numbers {
	padding: 0.4rem 0.75rem;
	border: 1.5px solid var(--zz-gray-200);
	color: var(--zz-black);
	text-decoration: none;
	transition: background 0.15s;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--zz-yellow);
	border-color: var(--zz-yellow);
	color: var(--zz-black);
}


/* =============================================================================
   STATIC PAGE
   ============================================================================= */

.static-page {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

.static-page__title {
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 3px solid var(--zz-yellow);
}


/* =============================================================================
   FOOTER
   ============================================================================= */

.site-footer {
	margin-top: var(--wp--preset--spacing--70);
}

.footer-top {
	margin-bottom: var(--wp--preset--spacing--50);
}

.footer-social .wp-social-link {
	opacity: 0.7;
	transition: opacity 0.15s;
}

.footer-social .wp-social-link:hover {
	opacity: 1;
}

.footer-bottom {
	margin-top: var(--wp--preset--spacing--40);
}

/* Footer navigation links */
.footer-navigation .wp-block-navigation-item__content {
	color: var(--zz-gray-600);
	font-size: 0.8125rem;
	padding: 0;
	text-decoration: none;
}

.footer-navigation .wp-block-navigation-item__content:hover {
	color: var(--zz-yellow);
	text-decoration: none;
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 900px) {
	.homepage-featured .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	/* Shrink the image column in horizontal list cards */
	.article-card--small .wp-block-post-featured-image {
		width: 30%;
	}
}

@media (max-width: 600px) {
	.header-top {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.header-utilities {
		flex-wrap: wrap;
	}

	/* Stack horizontal cards vertically on mobile */
	.article-card--small {
		flex-direction: column;
	}

	.article-card--small .wp-block-post-featured-image {
		width: 100%;
	}

	.archive-query .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   Sitzungen – dynamic date split
   ============================================================================= */

.sitzungen-section {
	margin-bottom: 2rem;
}

.sitzungen-heading {
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.5rem;
	padding-bottom: 0.25rem;
	border-bottom: 2px solid var(--zz-yellow);
}


.sitzungen-more {
	margin-top: 0.75rem;
}

.sitzungen-more summary {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.25rem 0;
	user-select: none;
	list-style: none;
}

.sitzungen-more summary::-webkit-details-marker {
	display: none;
}

.sitzungen-more summary::after {
	content: '↓';
}

.sitzungen-more[open] summary::after {
	content: '↑';
}

.sitzungen-more .termine-list {
	margin-top: 0.5rem;
}