/*
Theme Name: Shrimp 2026
Description: Custom Theme
Version: 2.0
Author: Oliver Hulisz, 72dpi
Author URI: http://72dpi.de
*/

/* sora-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/sora-v12-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sora-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/sora-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sora-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/sora-v12-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sora-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/sora-v12-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* MARK: Reset
------------------------------------------------------------------------------------------------------------ */
*, 
*::before, 
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}


/* MARK: Custom Properties
------------------------------------------------------------------------------------------------------------ */
:root {

	/* Typograhy */
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.9438rem, 1.7707rem + 0.8652vw, 2.4413rem);
  --step-4: clamp(2.3325rem, 2.0823rem + 1.2511vw, 3.0519rem);
  --step-5: clamp(2.7994rem, 2.4461rem + 1.7663vw, 3.815rem);
	
	--clr-black: hsl(60, 3%, 7%);
	--clr-accent-1: hsl(74, 98%, 63%);

	--flow-space: 1em;

	color-scheme: light dark;
}

:root[data-theme="light"]	{
	--clr-surface: hsl(60, 16%, 96%);
	--clr-copy: hsl(60, 3%, 7%);
}

:root[data-theme="dark"]	{
	--clr-surface: hsl(223, 20%, 18%);
	--clr-copy: hsl(60, 16%, 96%);
}

/* MARK: Base
------------------------------------------------------------------------------------------------------------ */
body {
	background-color: var(--clr-surface);
	font-family: "Sora", Calibri, Verdana, Arial, sans-serif;
	font-weight: 400;
	font-size: var(--step-0);
	color: var(--clr-copy);
	line-height: 1.5;
}

.wrap {
	--wrap-max-width: 1024px;
  max-width: min(var(--wrap-max-width), 100% - 6vw);
  margin-inline: auto;
}
	article.wrap {
		max-width: var(--wrap-max-width);
	}


a {
	text-decoration: none;
	outline: none;
	color: var(--clr-copy);
}
	a:hover {
		text-decoration: underline;
	}


/* MARK: Header
------------------------------------------------------------------------------------------------------------ */
.site-header {
	margin-block: 2rem;
}	
	.site-header > div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

.site-logo {
	display: flex;
	gap: .75rem;
	align-items: center;
}
	.site-logo span {
		font-size: var(--step-0);
		font-weight: 600;
	}
	.site-logo svg {
		width: 2rem;
	}

.theme-toggle {
  width: 52px;
  height: 52px;
  background: var(--clr-surface);
  color: var(--clr-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  transition:
    background-color var(--motion) ease,
    border-color var(--motion) ease,
    color var(--motion) ease,
    transform 120ms ease;
}
	/* .theme-toggle:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--text); } */
	.theme-toggle:active { transform: translate(0,0); box-shadow: none; }
	.icon {
		width: 24px; 
		height: 24px;
		fill: none; stroke: currentColor;
		stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
		position: absolute;
		transition: opacity 180ms ease, transform 180ms ease;
	}
	:root[data-theme="light"] .icon-sun  { opacity: 0; transform: scale(0.6) rotate(-45deg); }
	:root[data-theme="light"] .icon-moon { opacity: 1; transform: scale(1)   rotate(0); }
	:root[data-theme="dark"]  .icon-sun  { opacity: 1; transform: scale(1)   rotate(0); }
	:root[data-theme="dark"]  .icon-moon { opacity: 0; transform: scale(0.6) rotate(45deg); }





.hamburger {
  position: relative;
  width: 1em;
  height: 1em;
  font-size: inherit;
  transition: all 0.3s ease;
  cursor: pointer;
	font-size: var(--step-1);
}
	.hamburger-line {
		position: absolute;
		right: 0;
		width: 100%;
		height: 0.125em;
		border-radius: 0.125em;
		background: currentColor;
		transition: inherit;
	}
		.hamburger-line:nth-child(1) {
			top: 0.125em;
		}
			.hamburger.is-active .hamburger-line:nth-child(1) {
				top: 50%;
				transform: translateY(-50%) rotateZ(-135deg);
			}
		.hamburger-line:nth-child(2) {
			top: 0.438em;
		}
			.hamburger.is-active .hamburger-line:nth-child(2) {
				right: 50%;
				width: 0;
			}
		.hamburger-line:nth-child(3) {
			top: 0.75em;
			width: 0.625em;
		}
			.hamburger.is-active .hamburger-line:nth-child(3) {
				top: 50%;
				width: 100%;
				transform: translateY(-50%) rotateZ(135deg);
			}
	
	

	nav.global {
		max-height: 0;
		transition: all .5s ease-in-out;
		overflow: hidden;
	}
		nav.global.is-active  {
			margin-block: 2rem;
			max-height: none;
			overflow: visible;
		}
		nav.global ul {
			display: flex;
			flex-direction: column;
			font-weight: 300;
			font-size: var(--step--1);
		}
			nav.global ul li {
				padding-block: .25rem;
			}
			nav.global ul li.current-cat {
				font-weight: 600;
			}

		

@media (width > 100ch) {
	.hamburger {
		display: none;
	}
	nav.global {
		max-height: none;
		overflow: visible;
	}
		nav.global ul {
			flex-direction: row;
			gap: 1rem;
			margin-block-start: 1rem;
		}
			nav.global ul  li {
				padding-block: 0;
			}
}



	.site-header form {
		margin-inline: auto;
		max-width: 20rem;
	}
		.site-header input[type=text] {
			border: none;
			padding: .5rem;
			width: 100%;
		}	





/* MARK: Typo
------------------------------------------------------------------------------------------------------------ */

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

p {
	font-size: var(--step-0);
}




/* MARK: Posts
------------------------------------------------------------------------------------------------------------ */
article.type-post figure {
	display: grid;
	margin-inline: auto;
}
	article.type-post figure > * {
		grid-area: 1/1;
	}
	
	article.type-post figcaption {
		margin-block-end: 1rem;
		margin-inline-start: 1rem;
		width: fit-content;
		justify-self: start;
		align-self: self-end;
		font-size: var(--step--2);
		display: flex;
		flex-direction: column;
		gap: .3rem;

		& .label {
			padding-block: .25rem;
			padding-inline: .5rem;	
			background-color: var(--clr-surface);
			font-size: var(--step--2);
		}	
		
		& h2 {
			padding-block: .25rem;
			padding-inline: .5rem;	
			background-color: var(--clr-accent-1);
			font-size: var(--step--1);
			color: var(--clr-black);
		}	
	}


		
		article.fullwidth + article.fullwidth {
			margin-block-start: 5rem;
		}

	

.mosaic {
	margin-block: 3rem;
	display: grid;
	gap: .5rem;
}
	.mosaic img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.mosaic img {
		aspect-ratio: 4/3;
	}


@media(width >= 40rem) {
	.mosaic {
		grid-template-columns: 1fr 1fr;
	}
		.mosaic > *:first-child {
			grid-column: 1 / 3;
		}
}

@media(width >= 64rem) {
  .mosaic {
		grid-template-columns: 1fr 1fr 1fr;
	}
		.mosaic > *:first-child {
			grid-column: 1 / 3;
			grid-row: 1 / 3;
		}
			.mosaic > *:first-child figure {
				height: 100%;
			}
}



/* MARK: Utilities
------------------------------------------------------------------------------------------------------------ */

.btn, button {
	border: none;
}


.rotate {
	animation-name: spin;
	animation-duration: 400ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
	@keyframes spin {
		from {
			transform: rotate(0deg);
		} to {
			transform: rotate(360deg);
		}
	}




.trip-item {
	display: flex;
  margin-bottom: 2rem;
}
	.trip-icon {
		display: flex;
    position: relative;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-right: 1rem;
		color: var(--default-text-color);
		background-color: #d3d0c9;
		width: 3.2rem;
		height: 3.2rem;
		text-decoration: none;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		line-height: 1.1;
	}
    .trip-icon:after {
      position: absolute;
      left: 50%;
      top: 0;
      border: 1px solid #d3d0c9;
      width: 1px;
			height: 13rem;
      content: "";
      z-index: -1;
    }
			.trip-item:last-child .trip-icon:after {
				border: none;
			}
		.trip-icon-year {
			font-size: .7rem;

		}
		.trip-icon-subline {
			font-size: 1rem;
			text-transform: uppercase;
		}

	.trip-info p {
		margin: 0 0 1rem 0;
	}


/* Pagination
------------------------------------------------------------------------------ */
.wp-paginate,
.custom-next-prev-browse {
	margin-block: 2rem;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	width: fit-content;
	font-size: var(--step--1);
	font-weight: 300;
}

		.wp-paginate a:hover,
		.wp-paginate a:active,
		.custom-next-prev-browse a:hover,
		.wp-paginate .current {
			font-weight: 700;
		}


/* Standorte - Google Map Page
------------------------------------------------------------------------------ */
.page-id-336 header,
.page-id-336 footer,
.single-standort header,
.single-standort footer {
	display: none;
}

.panel-1 {
  padding: 1rem;
}
@media (min-width: 720px) {
  body.page-id-336,
  body.single-standort {
    display: flex;
    flex-direction: row;
  }
  .panel-1 {
    flex: 0 0 15rem;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .panel-2 {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    overflow-x: auto;
    background-color: #f0f0f0;
  }
}





.fill-height {
  margin: 1.5rem 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

ul.orte {
  margin: 0;
  padding: 0;
  list-style: none;
}
  ul.orte a {
    display: inline-block;
    padding: .2rem 0;
    text-decoration: none;
  }
  ul.orte [data-prefix="fad"] {
    color: #1EB5EA;
  }
    ul.orte a.active {
      font-weight: bold;
    }
    ul.orte [data-prefix="fad"]:hover,
    ul.orte [data-prefix="fad"].active {
      color: red;
    }


#map {
  width: 100%;
  height: 300px;
}

@media (min-width: 720px) {
  #map {
    width: 100%;
    height: 100%;
  }
}




/* MFP Footer
------------------------------------------------------------------------------ */
.site-footer {
	margin-block: 3rem;
	font-size: var(--step--1);
}

.row-admin {
  margin-block: 2rem;
	display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--step--2);
	list-style: none;
}







/* MFP Overrides
------------------------------------------------------------------------------ */

/*.mfp-ready figure:hover figcaption {
	display: none;
}
*/

/* lightbox green background */
.mfp-bg {
  background: #181e24;
	opacity: .95;
}