/*
Theme Name: CG Köln-Ost — Twenty Twenty Child
Template: twentytwenty
Version: 1.1.0
Description: Dezente typografische und farbliche Verfeinerung von Twenty Twenty. Barrierearm, große Schrift für ältere Leser.
*/

/* =========================================================================
   1) TOKENS
   ========================================================================= */
:root {
	--base:           #FDFBF7; /* warm white — page background */
	--parchment:      #F5EFE2; /* existing cream sections — keep harmony */
	--contrast:       #221E19; /* headings */
	--text:           #2E2A24; /* body — darker for older eyes (13.8:1) */
	--muted:          #6F6A60; /* meta/dates — AA on --base (5.2:1) */
	--primary:        #9B3A4E; /* the ONLY red: links, nav, accents (6.5:1) */
	--primary-bright: #B5566A; /* hover */

	/* Forward-compatible: classic Twenty Twenty does NOT expose these
	   (they belong to Twenty Twenty-One). Harmless here; the concrete
	   selector overrides below are what actually replace the #cd2653 red. */
	--global--color-primary:       #9B3A4E;
	--global--color-primary-hover: #B5566A;
}

/* Prevent iOS Safari from inflating clamp() headlines in landscape */
html {
	-webkit-text-size-adjust: 100%;
}

/* =========================================================================
   2) HEADINGS
   ========================================================================= */
h1, h2, h3, h4, h5, h6,
.faux-heading,
.heading-size-1, .heading-size-2, .heading-size-3,
.heading-size-4, .heading-size-5, .heading-size-6,
.site-title, .entry-title, .widget-title,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.wp-block-heading {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--contrast);
	overflow-wrap: break-word; /* long German compounds never clip at 320px */
	hyphens: auto;
}

h1,
.entry-title,
.entry-content h1,
.heading-size-1 {
	font-size: clamp(2.6rem, 1.9rem + 3.5vw, 4rem) !important;
	line-height: 1.1;
}

h2,
.entry-content h2,
.heading-size-2 {
	font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem) !important;
	line-height: 1.15;
}

h3,
.entry-content h3,
.heading-size-3,
.widget-title {
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem) !important;
	line-height: 1.2;
}

/* Preview / listing titles (Gemeindebrief etc.) → h3 scale, Mulberry.
   Single-post <h1.entry-title> has no <a>, so it stays --contrast. */
.blog .entry-title,
.archive .entry-title,
.search .entry-title,
.home .entry-title {
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem) !important;
	line-height: 1.2;
}

.entry-title a {
	color: var(--primary) !important;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--primary-bright) !important;
}

/* =========================================================================
   3) BODY  (large + high-contrast — readable without glasses)
   ========================================================================= */
body {
	background: var(--base);
}

body,
.entry-content,
.entry-content p,
.entry-content li,
li, td,
.widget,
input, button, select, textarea {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	font-weight: 400;
	color: var(--text);
}

body,
.entry-content,
.entry-content p,
.entry-content li,
li, td {
	font-size: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem) !important; /* ~20px → 24px */
	line-height: 1.75;
}

.entry-content p {
	margin-bottom: 1.2em;
}

/* =========================================================================
   4) LINKS + ACCENT  (replace ALL #cd2653 with Mulberry)
   ========================================================================= */
a {
	color: var(--primary);
}

a:hover,
a:focus {
	color: var(--primary-bright);
}

.entry-content a {
	color: var(--primary);
	text-decoration: underline; /* keep underline — clarity for older readers */
}

.entry-content a:hover,
.entry-content a:focus {
	color: var(--primary-bright);
}

.color-accent,
.color-accent-text {
	color: var(--primary) !important;
}

/* Filled buttons: Mulberry background, light text (was bright red) */
.wp-block-button__link,
.button,
.faux-button,
button:not(.toggle),
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
	color: var(--base) !important;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.button:hover,
.faux-button:hover,
button:not(.toggle):hover,
button:not(.toggle):focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: var(--primary-bright) !important;
	border-color: var(--primary-bright) !important;
	color: var(--base) !important;
}

/* =========================================================================
   5) PRIMARY NAVIGATION (desktop) — bigger, consistent, fixed dropdown
   ========================================================================= */
.primary-menu > li {
	margin: 0 0.6em; /* stays one line at ~1280px */
}

.primary-menu > li > a {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-weight: 500;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem) !important;
	color: var(--primary) !important;
	white-space: nowrap;
	letter-spacing: 0;
	text-decoration: none;
}

.primary-menu > li > a:hover,
.primary-menu > li > a:focus,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	color: var(--primary-bright) !important;
}

/* Dropdown / sub-menu — fix the unstyled black background + red text */
.primary-menu ul,
.primary-menu .sub-menu {
	background: var(--base) !important;
	border: 1px solid rgba(34, 30, 25, 0.12);
	box-shadow: 0 6px 24px rgba(34, 30, 25, 0.12);
}

.primary-menu .sub-menu a,
.primary-menu ul ul a {
	color: var(--primary) !important;
	background: transparent !important;
	padding: 0.6em 1em;
	font-size: 1.05rem !important;
	white-space: nowrap;
	text-decoration: none;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus {
	background: var(--parchment) !important;
	color: var(--primary-bright) !important;
}

/* Toggles ("Menü", "Suchen") — neutral default, accent on interaction */
.toggle,
.toggle .toggle-text,
.nav-toggle,
.search-toggle {
	color: var(--text) !important;
}

.toggle:hover,
.toggle:focus,
.toggle:hover .toggle-text,
.toggle:focus .toggle-text {
	color: var(--primary) !important;
}

/* =========================================================================
   6) MOBILE MENU (modal) — Mulberry links, generous tap targets (>=44px)
   ========================================================================= */
.menu-modal,
.menu-modal-inner {
	background-color: var(--base) !important;
}

.menu-modal .modal-menu a,
.mobile-menu a {
	font-size: 1.4rem !important;
	color: var(--primary) !important;
	padding: 0.6em 0; /* ~49px tap target at 1.4rem */
	display: block;
	text-decoration: none;
}

.menu-modal .modal-menu a:hover,
.menu-modal .modal-menu a:focus {
	color: var(--primary-bright) !important;
}

.menu-modal .sub-menu-toggle {
	color: var(--primary) !important;
}

/* =========================================================================
   7) META / DATES — small but legible
   ========================================================================= */
.post-meta,
.entry-meta,
.meta-wrapper,
.post-date,
.posted-on,
.site-description {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem) !important;
	color: var(--muted) !important;
	line-height: 1.5;
}

/* =========================================================================
   8) FOOTER — quiet credit, Mulberry links
   ========================================================================= */
.footer-credits,
.site-info {
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem) !important;
	font-weight: 400 !important;
	color: var(--muted) !important;
}

.footer-credits a,
.site-info a {
	color: var(--primary) !important;
}

.footer-credits a:hover,
.site-info a:hover {
	color: var(--primary-bright) !important;
}

/* "Nach oben" link — same quiet muted size */
.to-the-top,
.to-the-top-long,
.to-the-top-short {
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem) !important;
	font-weight: 400 !important;
	color: var(--muted) !important;
}

.to-the-top:hover,
.to-the-top:focus {
	color: var(--primary) !important;
}

.powered-by-wordpress {
	display: none; /* hide "Präsentiert von WordPress", keep © site-name */
}