/*
 Theme Name:   Kultur flaniert (Neve Child)
 Theme URI:
 Description:  Child theme for kulturflaniert.de. Carries the event calendar and,
               since 2026, the complete visual design - the Customizer palette,
               the "Additional CSS" box and the custom-background tile are all
               switched off in functions.php so that THIS FILE is the single
               source of truth for how the site looks.
 Author:       FS
 Author URI:
 Template:     neve
 Version:      2.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:
 Text Domain:  neve-child
*/

/* ==========================================================================
   0. LOAD ORDER

   This stylesheet is enqueued with a dependency on Neve's 'neve-style' handle
   (see functions.php), so it prints AFTER Neve's stylesheet and after the
   inline Customizer CSS that Neve attaches to that handle. That is why almost
   nothing in here needs !important any more - we simply come last.
   ========================================================================== */


/* ==========================================================================
   1. FONTS

   Alternate Gothic ExCond ATF, self-hosted from the child theme. Three cuts:

     400 Regular  - display headings, the wordmark voice
     600 Demi     - navigation, buttons, card titles
     700 Bold     - dates, numbers, loud accents

   The paths are relative to this file, so they resolve on production, on
   staging and on a local copy without editing anything.

   NOTE: this is the ExCond (extra-condensed) width. The old site used the Comp
   (compressed) width, which is wider. Fixed heights and the sub-1.0 line
   heights that were tuned for Comp have been re-derived below.
   ========================================================================== */

@font-face {
	font-family: 'Alternate Gothic ExCond ATF';
	src: url('fonts/AlternateGothicExCondATF-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alternate Gothic ExCond ATF';
	src: url('fonts/AlternateGothicExCondATF-Demi.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alternate Gothic ExCond ATF';
	src: url('fonts/AlternateGothicExCondATF-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/*
 * Alias. Old page content and any leftover Customizer setting still asks for
 * "Alternate Gothic Comp ATF". Pointing that name at the new files means those
 * places render in the new typeface instead of silently falling back to Arial.
 * Safe to delete once nothing references the old name.
 */
@font-face {
	font-family: 'Alternate Gothic Comp ATF';
	src: url('fonts/AlternateGothicExCondATF-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alternate Gothic Comp ATF';
	src: url('fonts/AlternateGothicExCondATF-Demi.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alternate Gothic Comp ATF';
	src: url('fonts/AlternateGothicExCondATF-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================================
   2. BRAND TOKENS

   Sampled from the 2026 Instagram artwork in assets-new/.
   Change a colour here and it changes everywhere.
   ========================================================================== */

:root {
	/* Palette */
	--kf-blue:       #2b74b1; /* the speech-bubble blue - the brand solid   */
	--kf-blue-deep:  #17395c; /* ink: body text, headings on light ground   */
	--kf-blue-soft:  #72a0c3; /* washed blue from the duotone photographs   */
	--kf-sand:       #f9d998; /* the gold of "Rückblick" / "19. & 20."      */
	--kf-paper:      #fbf3e6; /* warm paper ground, replaces the yellow     */
	--kf-purple:     #a45294; /* the magenta-purple in the photo duotones   */
	--kf-rose:       #b86d94;
	--kf-white:      #ffffff;

	/* Type */
	--kf-display: 'Alternate Gothic ExCond ATF', 'Alternate Gothic Comp ATF',
	              'Oswald', 'Arial Narrow', sans-serif;
	--kf-body: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial,
	           sans-serif;

	/* Rhythm */
	--kf-gap: 1.75rem;
	--kf-radius: 18px;
}


/* ==========================================================================
   3. NEVE TOKEN OVERRIDES

   Neve prints all of these from the database (theme_mods). Re-declaring them
   here at the same specificity but later in the cascade takes the design out
   of the Customizer and into this file.
   ========================================================================== */

:root {
	--nv-primary-accent:   var(--kf-purple);
	--nv-secondary-accent: var(--kf-blue);
	--nv-site-bg:          var(--kf-paper);
	--nv-light-bg:         var(--kf-white);
	--nv-dark-bg:          var(--kf-blue);
	--nv-text-color:       var(--kf-blue-deep);
	--nv-text-dark-bg:     var(--kf-white);
	--nv-c-1:              var(--kf-rose);
	--nv-c-2:              var(--kf-sand);
	--nv-fallback-ff:      var(--kf-body);

	/* Body type. Neve's stored value was 1.6rem / 25.6px, which is poster-sized
	   for running text. 1.25rem / 20px with generous leading reads better and
	   suits the Easy German rollout. */
	--bodyfontfamily:  var(--kf-body);
	--bodyfontsize:    1.25rem;
	--bodylineheight:  1.6em;
	--bodyfontweight:  400;
	--bodytexttransform: none;

	/* Headings. The stored desktop values were 0.8em / 0.6em / 0.5em line
	   heights - below 1.0, they clipped ascenders and descenders. Re-derived
	   for the ExCond face, which is narrower and therefore set larger. */
	--h1fontsize:   clamp(2.75rem, 9vw, 7rem);
	--h1lineheight: 0.9em;
	--h1fontweight: 400;
	--h1texttransform: uppercase;

	--h2fontsize:   clamp(2rem, 5.5vw, 4rem);
	--h2lineheight: 0.95em;
	--h2fontweight: 400;
	--h2texttransform: uppercase;

	--h3fontsize:   clamp(1.6rem, 3.2vw, 2.4rem);
	--h3lineheight: 1.05em;
	--h3fontweight: 600;

	--h4fontsize:   clamp(1.35rem, 2.2vw, 1.75rem);
	--h4lineheight: 1.1em;
	--h4fontweight: 600;

	--h5fontsize:   1.2rem;
	--h5lineheight: 1.2em;

	--h6fontsize:   1.1rem;
	--h6lineheight: 1.2em;

	/* Buttons - pill shaped, blue by default, sand when active/selected.
	   The event filter row relies on is-style-primary / is-style-secondary,
	   so "secondary" is what marks the currently selected day or tag. */
	--primarybtnbg:          var(--kf-blue);
	--primarybtncolor:       var(--kf-white);
	--primarybtnhoverbg:     var(--kf-purple);
	--primarybtnhovercolor:  var(--kf-white);
	--secondarybtnbg:        var(--kf-sand);
	--secondarybtncolor:     var(--kf-blue-deep);
	--secondarybtnhoverbg:   var(--kf-white);
	--secondarybtnhovercolor: var(--kf-blue-deep);
	--primarybtnborderradius:   999px;
	--secondarybtnborderradius: 999px;
	--secondarybtnborderwidth:  0;
	--btnfs: 1rem;
	--btntexttransform: uppercase;
	--btnpadding: 10px 22px;
	--primarybtnpadding: 10px 22px;
	--secondarybtnpadding: 10px 22px;

	/* Forms */
	--formfieldbgcolor:     var(--kf-white);
	--formfieldbordercolor: var(--kf-blue-soft);
	--formfieldcolor:       var(--kf-blue-deep);
	--formfieldborderradius: 12px;
}


/* ==========================================================================
   4. BASE
   ========================================================================== */

body {
	background-color: var(--kf-paper);
	color: var(--kf-blue-deep);
	font-family: var(--kf-body);
}

/*
 * The old rule was `body h1, h2, h3, h4, h5, h6, span, ul, ol, li` with
 * !important, which forced the condensed display face onto every span and list
 * item on the site, running text included. An extra-condensed face is a poor
 * choice for body copy in general and a bad one for Easy German, so the display
 * face is now applied deliberately: headings, navigation, buttons and anything
 * marked .kf-display.
 */
h1, h2, h3, h4, h5, h6,
.kf-display,
.blog-entry-title,
.entry-title,
.wp-block-button__link,
.wp-element-button,
.nv-nav-wrap,
.builder-item--primary-menu,
.builder-item--footer-menu,
.eventDate {
	font-family: var(--kf-display);
	letter-spacing: 0.01em;
}

p,
li,
.article-content-col,
.custom-excerpt,
.entry-content {
	font-family: var(--kf-body);
	font-weight: 400;
	line-height: 1.6;
}

p {
	margin-bottom: 1rem;
}

a {
	color: var(--kf-purple);
}

a:hover,
a:focus {
	color: var(--kf-blue);
}


/* ==========================================================================
   5. HEADER / FOOTER

   Replaces the tiled bg_yellow.png that used to be painted on nav, footer and
   .header-main from the "Additional CSS" box.
   ========================================================================== */

/* .header-main,
.header-top,
.header-bottom {
	--bgcolor: transparent;
	--color: var(--kf-blue-deep);
} */

/* .header-menu-sidebar-bg {
	--bgcolor: var(--kf-paper);
	--color: var(--kf-blue-deep);
} */

.builder-item--primary-menu {
/* 	--color: var(--kf-blue-deep);
	--hovercolor: var(--kf-purple);
	--activecolor: var(--kf-purple); */
	--fontweight: 600;
}

/* .footer-top,
.footer-main {
	--bgcolor: transparent;
	--color: var(--kf-blue-deep);
} */

/* .footer-bottom {
	--bgcolor: var(--kf-blue);
	--color: var(--kf-white);
} */

/* .footer-bottom a {
	color: var(--kf-sand);
} */

/* Kept from the old Additional CSS - partner/cooperation logo strip. */
.koop img {
	width: auto;
	max-height: 60px;
}


/* ==========================================================================
   6. EVENT LISTING
   ========================================================================== */

.kf-filter-intro {
	font-size: 1.15rem;
	max-width: 46ch;
	margin-bottom: 1.5rem;
}

.filterRow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin-bottom: 2rem;
}

.eventDate {
	width: 100%;
	margin: 3rem 0 1.5rem;
	padding-bottom: 0.4rem;
	color: var(--kf-blue-deep);
	border-bottom: 4px solid var(--kf-sand);
}

/*
 * The card grid.
 *
 * Neve's own responsive grid targets `.posts-wrapper > article` and sets its
 * width from --postwidth. Our markup wraps every article in .eventWrap, so that
 * selector never matched and every card fell back to a hardcoded 390px. Doing
 * the grid here properly makes the cards fluid.
 */
.posts-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--kf-gap);
	align-items: stretch;
}

.eventDate {
	grid-column: 1 / -1;
}

.eventWrap {
	display: flex;
	flex-direction: column;
	width: auto; /* was a fixed 390px */
}

.eventWrap article {
	display: flex;
	flex-grow: 1;
	margin: 0;
}

.custom-post {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	padding: 1.5rem;
	background-color: var(--kf-blue);
	color: var(--kf-white);
	border-radius: var(--kf-radius);
	font-size: 1.15rem;
	line-height: 1.5;
	word-break: break-word;
	-webkit-font-smoothing: antialiased;
}

/* The event-card background used to be set from the Additional CSS box
   (.inner { background-color: #0B2D6C }). It lives here now. */
.inner {
	box-shadow: 6px 6px 0 var(--kf-purple);
}

.custom-post a {
	color: var(--kf-white);
}

.custom-post a:hover,
.custom-post a:focus {
	color: var(--kf-sand);
}

.custom-post h2 {
	margin: 0 0 1rem;
	padding: 0.6rem 0;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	line-height: 1.05;
	text-align: center;
	/* was: min-height:104px + 3px solid yellow, sized for the Comp face */
	border-top: 3px solid var(--kf-sand);
	border-bottom: 3px solid var(--kf-sand);
}

.custom-post h2 a {
	color: var(--kf-white);
}

/* Time and location chips. Fixed 5rem height plus overflow:clip used to cut
   long venue names off mid-word; they wrap now. */
p.timeDisplay {
	margin: 0 0 0.5rem;
	padding: 0.45rem 0.75rem;
	background-color: var(--kf-sand);
	color: var(--kf-blue-deep);
	border-radius: 999px;
	font-family: var(--kf-display);
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.3;
	text-align: center;
}

.article-content-col,
.custom-excerpt {
	flex-grow: 1;
	font-size: 1rem;
	line-height: 1.55;
}

.read-more-link {
	display: inline-block;
	margin-top: 1rem;
	font-family: var(--kf-display);
	font-weight: 600;
	font-size: 1.15rem;
	text-transform: uppercase;
}

.read-more-link span {
	border-bottom: 3px solid var(--kf-sand);
}

.blog-entry-title {
	line-height: 1.05;
}

.kf-no-events {
	padding: 2rem 0;
	font-size: 1.25rem;
}


/* ==========================================================================
   7. DESIGN UTILITIES

   Hooks for the 2026 artwork. Apply these as "Additional CSS class(es)" on a
   Gutenberg block in the editor - no CSS editing needed to use them.
   ========================================================================== */

/* Duotone photo grounds. .kf-photo-bg kf-photo-bg--2 etc. */
.kf-photo-bg {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--kf-white);
}

.kf-photo-bg--1 { background-image: url('assets/img/bg-1.jpg'); }
.kf-photo-bg--2 { background-image: url('assets/img/bg-2.jpg'); }
.kf-photo-bg--3 { background-image: url('assets/img/bg-3.jpg'); }
.kf-photo-bg--4 { background-image: url('assets/img/bg-4.jpg'); }

.kf-photo-bg h1,
.kf-photo-bg h2,
.kf-photo-bg h3 {
	color: var(--kf-white);
}

/* The wordmark, as a block background. Give the element a height or padding. */
.kf-wordmark {
	background-image: url('assets/img/wordmark.png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 1200 / 663;
	width: 100%;
}

.kf-wordmark--brille {
	background-image: url('assets/img/wordmark-brille.png');
}

/* "19. & 20. SEPTEMBER" lockup. */
.kf-datum {
	background-image: url('assets/img/datum.png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 1200 / 656;
	width: 100%;
	max-width: 520px;
}

/* Sand-on-blue emphasis, the "Rückblick" / "Motto" voice. */
.kf-lead {
	font-family: var(--kf-display);
	font-size: clamp(2rem, 6vw, 4.5rem);
	line-height: 0.95;
	color: var(--kf-sand);
	text-transform: none;
}

/* Replaces the old span.pAccent (magenta on yellow, and it carried a stray
   `;:` that broke the rule that followed it). */
.kf-accent,
span.pAccent {
	color: var(--kf-purple);
	font-size: 1.15em;
	font-weight: 700;
	background-color: transparent;
}

/* The hand-drawn speech bubble. */
.kf-bubble {
	background-image: url('assets/img/sprechblase.png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 900 / 485;
	display: grid;
	place-items: center;
	padding: 12% 18% 22%;
	color: var(--kf-white);
	font-family: var(--kf-display);
	text-align: center;
}

/* Doodle eyes, as decoration on a container. */
.kf-eyes::before {
	content: '';
	display: block;
	height: 60px;
	background-image: url('assets/img/augen-1.png');
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
	margin-bottom: 0.5rem;
}


/* ==========================================================================
   8. LEGACY

   Classes that still exist in page content but belong to the old look.
   ========================================================================== */

/*
 * .waveWrapper pulled in the yellow wave SVG from the 2023 uploads folder and
 * dragged itself up by -250px..-540px. It has no place in the new design, but
 * the markup is still in the page content, so hide it rather than leaving an
 * empty element with a broken background.
 */
.waveWrapper {
	display: none;
}

.lineHeightReset {
	line-height: normal;
}

@media screen and (max-width: 781px) {
	.phoneRotate {
		transform: rotate(90deg);
	}
}


/* ==========================================================================
   9. RESPONSIVE

   Neve's own breakpoints are 576px and 960px. The old child stylesheet used
   540 / 781 / 900 / 1280 / 1600 / 1920, none of which lined up, so layouts
   changed at six different widths. Aligned here.
   ========================================================================== */

@media screen and (max-width: 575px) {
	.posts-wrapper {
		grid-template-columns: 1fr;
	}

	.filterRow {
		justify-content: flex-start;
	}

	.custom-post {
		padding: 1.25rem;
	}

	.inner {
		box-shadow: 4px 4px 0 var(--kf-purple);
	}
}

@media screen and (min-width: 960px) {
	.posts-wrapper {
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	}
}