/*
Theme Name:   GP1000Seen
Theme URI:    https://generatepress.com
Description:  GP1000Seen ist ein leistungsstarkes Child Theme für GeneratePress, das die Stabilität und Performance des etablierten Wordpress-Themes mit spezialisierten Features für das Website-Netzwerk des Tourismusverbandes Mecklenburgische Seenplatte.
Author:       Robert Neidel
Author URI:   https://tourismusmacher.de
Template: generatepress
Version: 1.0.0
Text Domain: gp1000seen
*/

/* ===============  TABLE OF CONTENTS  ===============

1. Theme Tweaks
2. Utilities
3. Typography
4. Global Styles
5. Forms
6. CSS Grid

================================================== */


/*** 1. THEME TWEAKS ***/

/* Body background color (outside wrapper) */
body {
	background-color: var(--surface-20);
}

/* Site Wrapper */
.site-wrapper {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	background-color: var(--surface-10);
}

/* Set the main content area height */
#main{
	min-height: 65vh;
}

/* Container Padding Overrides */
.inside-header {
	padding-inline: 0px !important;
}

.site-header {
	padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem) !important;
}

.site-content {
	padding: 0px;
}

/* Post Editor Width (Backend) */
.post-type-post .block-editor-block-list__layout,
.post-type-post .edit-post-visual-editor__post-title-wrapper .editor-post-title {
	max-width: 728px !important;
	margin-inline: auto !important;
	padding-inline: 200px !important;
}

/* -- Search Tweaks -- */

/* Clears the "X" from Chrome */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	filter: grayscale(100) opacity(.3);
	cursor: pointer;
}

/* Search Block */

.wp-block-search {
	border-radius: 4px;
	overflow: hidden;
	outline: 1px solid var(--surface-30);
	box-shadow: 0px 0px 0px #00000010;
	transition: all 250ms ease-in;
}

.wp-block-search:focus-within {
	outline: 1px solid var(--surface-30);
	box-shadow: 0px 0px 0px #00000010;
}

.wp-block-search input {
	border: none;
	padding: 0px 1em;
	border-radius: 4px;
	outline: none;
}

.wp-block-search button {
	background: var(--surface-20);	
	color:  var(--surface-70);
	padding: 10px 12px;
	border-left: 1px solid var(--surface-30);	 
}

/* Modal */

.search-modal-fields button {
	background: var(--surface-20) !important;	
	color:  var(--surface-70) !important;	
	line-height: 1;
	font-weight: 600;
	border-left: 1px solid var(--surface-30);
	padding: 10px 12px;
}

.search-modal-fields button:hover {
	background: var(--surface-30) !important;	
	color:  var(--surface-90) !important;		
}

.search-modal-fields input {
	background-color: white !important;
	border-radius: 4px;
	border: none;
	padding: 0px 1em;
	outline: none;
}

.search-modal-form {
	color:  var(--surface-80);
}

.search-modal-fields {
	border-radius: 4px;
	overflow: hidden;
	outline: 1px solid var(--surface-30);
	box-shadow: 0px 0px 0px #00000010;
	transition: all 250ms ease-in;
	background-color: var(--surface-0);
}

.search-modal-fields:focus-within {
	outline: 1px solid var(--surface-30);
	box-shadow: 0px 4px 10px #00000010;
}

.gp-search-modal .gp-modal__overlay {
	background-color: #1f293399;
}

/* Search Results / No Search Results template */

.search-title-wrapper {
	display: flex;
	align-items: flex-start;
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--surface-30);
}

.search-for {
	line-height: 1.4;
}

.search-title{
	font-size: var(--fs-body);
	text-transform: capitalize;
	margin-left: .4em;
	line-height: 1.4;
}

/* Hamburger Menu */
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.has-inline-mobile-toggle #site-navigation.toggled {
	bground-color: transparent;
	margin-right: -1rem;
	font-size: 1em;
	line-height: 8px;
}

/* Primary Menu Button Styles */
@media (min-width: 1025px) {
	.main-navigation .main-nav ul li.nav-cta a {
		background: var(--contrast) !important;
		color: var(--surface-10) !important;
		padding: 1em 1.5em;
		margin-left: 16px;
		border-radius: 4px;
		line-height: 1;
		font-weight: 600;
	}
	.main-navigation .main-nav ul li.nav-cta a:hover {
		background: var(--contrast-alt) !important;
		color: var(--surface-0) !important;
	}
}

@media (max-width: 1024px) {
	.main-navigation .main-nav ul li.nav-cta a {
		margin-left: 0px;
	}
}

/* Password Protect Pages */

.post-password-form {
	max-width: 768px;
	padding: 8rem 0px;
	margin-inline: auto;
	text-align: center;
}


/*** 2. UTILITIES ***/

/* Visually Hidden */

.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Line Limits */

.line-limit-3, .line-limit-2 {
	display: -webkit-box;
	-webkit-box-orient: verticel;
	overflow: hidden;
}

.line-limit-3 {
	-webkit-line-clamp: 3;
}

.line-limit-2 {
	-webkit-line-clamp: 2;
}

/* Aspect Ratios */

.ar-16-9, .ar-9-16, .ar-4-3, .ar-1-1 {
	object-fit: cover;
}

.ar-16-9 {aspect-ratio: 16/9;}
.ar-9-16 {aspect-ratio: 9/16;}
.ar-4-3 {aspect-ratio: 4/3;}
.ar-1-1 {aspect-ratio: 1/1;}


/* No Underline */
.no-ul, .no-ul a {
	text-decoration: none;
}

/* Border Radius */
:root {
	--radius-xs:		.125rem;
	--radius-s:			.25rem;
	--radius-m:			.5rem;
	--radius-l:			1rem;
	--radius--xl:		1.5rem;
	--radius-xxl:		2rem;
	--radius-50:		50%;
	--radius-circle:		50%;
} 


/*** 3. TYPOGRAPHY ***/

:root {
	/* These HAVE TO match what is in Customizer > Typography. Pull in font familys using font manager. Set headline-font as "All Headings", set body-font as HTML */
	--headline-font: Merriweather, sans-serif;
	--body-font: Roboto, sans-serif;

	/* Body */
	--fs-body: clamp(1rem, calc(0.96rem + 0.21vw), 1.125rem);

	/* Headings / Display */
	--fs-headline-xl: clamp(3rem,    calc(2.5rem + 2.5vw),   4.5rem);
	--fs-headline-h1: clamp(2.5rem,  calc(2.167rem + 1.667vw), 3.5rem);
	--fs-headline-h2: clamp(2rem,    calc(1.833rem + 0.833vw), 2.5rem);
	--fs-headline-h3: clamp(1.75rem, calc(1.625rem + 0.625vw), 2.125rem);
	--fs-headline-h4: clamp(1.5rem,  calc(1.417rem + 0.417vw), 1.75rem);
	--fs-headline-h5: clamp(1.25rem, calc(1.167rem + 0.417vw), 1.5rem);
	--fs-headline-h6: clamp(1.125rem,calc(1.083rem + 0.208vw), 1.25rem);
	--fs-headline-pre: clamp(0.9375rem, calc(0.917rem + 0.104vw), 1rem);

	/* Body variants (für Lead-Text, Meta, klein etc.) */
	--fs-headline-body-xl: clamp(1.25rem,  calc(1.167rem + 0.417vw), 1.5rem);
	--fs-headline-body-l:  clamp(1.125rem, calc(1.083rem + 0.208vw), 1.25rem);
	--fs-headline-body-s:  clamp(0.9375rem,calc(0.917rem + 0.104vw), 1rem);
	--fs-headline-body-xs: clamp(0.875rem, calc(0.854rem + 0.104vw), 0.9375rem);

	/* Utility text sizes */
	--text-s:  clamp(0.875rem, calc(0.833rem + 0.208vw), 1rem);
	--text-xs: clamp(0.75rem,  calc(0.729rem + 0.104vw), 0.8125rem);
}

/* Default Body / p font settings */
p {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 1.5rem;
	font-family: var(--body-font);
}

/* Default Heading weight, margin, font-family */
h1, h2, h3, h4, h5, h6, .gb-headline-xxl, .gb-headline-xl, .gb-headline-h1, .gb-headline-h2, .gb-headline-h3, .gb-headline-h4, .gb-headline-h5, .gb-headline-h6 {
	font-weight: 700;
	margin-bottom: .5em;
	font-family: var(--headline-font); 
}

/* Heading font-size and line-height */

.gb-headline-xl {
	font-size: var(--fs-headline-xl);
	line-height: 1.05;
}

.gb-headline-h1 {
	font-size: var(--fs-headline-h1);
	line-height: 1.05;
}

.gb-headline-h2 {
	font-size: var(--fs-headline-h2);
	line-height: 1.1;
}

.gb-headline-h3 {
	font-size: var(--fs-headline-h3);
	line-height: 1.15;
}

.gb-headline-h4 {
	font-size: var(--fs-headline-h4);
	line-height: 1.2;
}

.gb-headline-h5 {
	font-size: var(--fs-headline-h5);
	line-height: 1.25;
}

.gb-headline-h6 {
	font-size: var(--fs-headline-h6);
	line-height: 1.4;
}

.gb-headline-pre {
	font-size: var(--fs-headline-pre);
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* Additional Body font-size */

.gb-headline-body-xl {
	font-family: var(--body-font);
	font-size: var(--fs-headline-body-xl);
}

.gb-headline-body-l {
	font-family: var(--body-font);
	font-size: var(--fs-headline-body-l);
}

.gb-headline-body-s {
	font-family: var(--body-font);
	font-size: var(--fs-headline-body-s);
}

.gb-headline-body-xs {
	font-family: var(--body-font);
	font-size: var(--fs-headline-body-xs);
}

/* Add top margin to blog post H2-H6 */

.single-post :is(h2, h3, h4, h5, h6) {
	margin-top: 1.5em;
}

/* Button Global Line Height */

.gb-button {
	line-height: 1em;
}

/* Remove bottom margin on last paragraph */

.gb-container p:last-child:last-of-type,
.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
	margin-bottom: 0px;
}


/*** 4. GLOBAL STYLES ***/

/* Sections */

.gb-container-section-xs {
	padding: 1rem clamp(1rem, 0.848rem + 0.758vw, 1.5rem) 1rem clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-s {
	padding: clamp(1.5rem, 1rem + 0vw, 1.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(1.5rem, 1rem + 0vw, 1.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-m {
	padding: clamp(1.5rem, 1.197rem + 1.515vw, 2.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(1.5rem, 1.197rem + 1.515vw, 2.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-d {
	padding: clamp(3rem, 2.394rem + 3.03vw, 5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(3rem, 2.394rem + 3.03vw, 5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-l {
	padding: clamp(4.5rem, 3.591rem + 4.545vw, 7.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(4.5rem, 3.591rem + 4.545vw, 7.5rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

.gb-container-section-xl {
	padding: clamp(6rem, 4.788rem + 6.061vw, 10rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem) clamp(6rem, 4.788rem + 6.061vw, 10rem) clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

/* Container Widths */

:root {
	--width-m: 64rem;
	--width-s: 48rem;
	--width-xs: 40rem;
}

/* Announcement Bar*/

.announcement-bar {
	position: relative;
}

.announcement-bar-closed {
	display: none;
}

.announcement-closed {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translatey(-50%);
	cursor: pointer;
}


/*** 5. FORMS ***/

.gb-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
}

input.gb-input {
	width: 100%;
	padding: 1.5rem 3rem;
	border: 1px solid #c9d4e5;
	border-radius: 15px;
	line-height: 1;
	outline: none;
	background: #fff;
	color: #0b1f3a;
	transition: border-color .2s ease, box-shadow .2s ease;
	margin-bottom: 10px;
}

main button.gb-button,
main a.gb-button {
	padding: 1.5rem 3rem;
	border: 0;
	border-radius: 15px;
	cursor: pointer;
	background: #005e90;    /* Navy/Seenplatte */
	color: #fff;
	transition: transform .04s ease, background .2s ease, box-shadow .2s ease;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
}
.gb-button.block {
	display: block;
}

main .gb-button:hover {
	background: #083652;
}


/*** 6. CSS GRID ***/

/* Simple CSS Grid */

.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.grid-4 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-5 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-6 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.gap-xs {gap: .5rem;}
.gap-s {gap: 1rem;}
.gap-m {gap: 2rem;}
.gap-l {gap: 4rem;}
.gap-xl {gap: 6rem;}

/* Tablet */

@media (min-width: 769px) and (max-width: 1024px) {
	.grid-2 {grid-template-columns: 1fr;}
	.grid-3, .grid-4 {grid-template-columns: 1fr 1fr;}
	.grid-5, .grid-6 {grid-template-columns: 1fr 1fr 1fr;}
	.gap-xs {gap: .5rem;}
	.gap-s {gap: 1rem;}
	.gap-m {gap: 1.5rem;}
	.gap-l {gap: 3rem;}
	.gap-xl {gap: 4rem;}
} 

/* Mobile */

@media (max-width: 768px) {
	.grid-2, .grid-3, .grid-4  {grid-template-columns: 1fr;}
	.grid-5, .grid-6 {grid-template-columns: 1fr 1fr;}
	.gap-xs {gap: .25rem;}
	.gap-s {gap: .5rem;}
	.gap-m {gap: 1rem;}
	.gap-l {gap: 1.5rem;}
	.gap-xl {gap: 2rem;}
}


/*** Carousel/Slider Flickity ***/

/* For 2 cells with 2rem gap */
.cell-2 .carousel-cell {
  width: calc(50% - 2rem * 1/2);
  margin-right: 2rem;
}

/* For 3 cells with 1rem gap */
.cell-3 .carousel-cell {
  width: calc(33.333% - 1rem * 2/3);
  margin-right: 1rem;
}

@media (max-width: 1024px) {
	.cell-3 .carousel-cell {
	  width: calc(50% - 1rem * 1/2);
	  margin-right: 1rem;
	}
}

@media (max-width: 768px) {
	.cell-3 .carousel-cell,
	.cell-2 .carousel-cell	{
	  width: 100%;
	  margin-right: 1rem;
	}
}

/* Pagination */
.flickity-page-dots {
    width: 100%;
    bottom: -1.5rem;
    padding: 0;
    margin: 0;    
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
}

.flickity-page-dots .dot {
    width: 0.5rem;
    height: 0.5rem;
    margin: 0;
    background: #000;
}

/* Navigation */
.flickity-button {
    height: 2.5rem;
    width: 2.5rem;
    background: none;
    color: #000;
}

.flickity-button:hover {
    background: none;
}

.flickity-prev-next-button.previous {
    left: 0;
    transform: translateX(-1.8rem) translateY(-50%);
}

.flickity-prev-next-button.next {
    right: 0;
    transform: translateX(1.8rem) translateY(-50%);
}


/*** Scrolling Grid ***/
.scroll-grid {
	display: grid;
	grid-auto-flow: column;
	column-gap: 0px;
	grid-auto-columns: 240px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	gap: 0px;
	padding-bottom: 1rem;
}

.scroll-grid > div {
	scroll-snap-align: start;
}

/*** Hero Section / Images ***/
/* Bild füllt den Container wie ein Cover-Background */
.gb-hero { position: relative; overflow: hidden; }

.gb-hero .gb-hero__img img {
  position: absolute;
  inset: 0;           /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;  /* "Cover"-Wirkung */
  object-position: center; /* nach Bedarf z. B. "50% 30%" */
  z-index: 0;
}

/* Inhalte im Hero über dem Bild halten */
.gb-hero > *:not(.gb-hero__img) {
  position: relative;
  z-index: 1;
}

/* Optional: dunkles Overlay */
.gb-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index: 0; /* unter dem Text, über dem Bild */
}