/*
Theme Name: OGJS 2025
Author: Lorenz Widmaier
Author URI: http://3wertig.com
Description: Theme for OGJS
Version: 1.0
License: protected by copyright
*/

/* Basics */

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*** COLORS ***/

:root {
  --color-light: #EC66A2;
  --color-dark: #E31517;
}


/*** TEMPLATES ***/

/* for all and template pink */

body {
  --color-light: #EC66A2;
  --color-dark: #E31517;
  --bg-header: url('assets/img/bg-header-pink.svg');
  --bg-header-mobile: url('assets/img/bg-header-pink-mobile.svg');
}

/* other templates */

body.page-template-wp-custom-template-yellow {
  --color-light: #FAE900;
  --color-dark: #F28B00;
  --bg-header: url('assets/img/bg-header-yellow.svg');
  --bg-header-mobile: url('assets/img/bg-header-yellow-mobile.svg');	
}

body.page-template-wp-custom-template-green {
  --color-light: #2CB6BB;
  --color-dark: #018A38;
  --bg-header: url('assets/img/bg-header-green.svg');
  --bg-header-mobile: url('assets/img/bg-header-green-mobile.svg');	
}

body.page-template-wp-custom-template-violet {
  --color-light: #8D1E7F;
  --color-dark: #472580;
  --bg-header: url('assets/img/bg-header-violet.svg');
  --bg-header-mobile: url('assets/img/bg-header-violet-mobile.svg');	
}


/*** GENERAL SETTINGS ***/

html,
body {
	font-size: 1em;
}

.wp-site-blocks {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.wp-site-blocks .has-small-font-size {
	font-size: 1rem;
	line-height: 1.25rem;
	margin-block-start: 15px; 
}

@media (max-width: 800px) {
	.wp-site-blocks {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

body {
	overflow-x: hidden;
}

.wp-block-template-part {
	position: relative;
	z-index: 10;
	margin: 0 auto 0 auto;
	padding: 25px 50px 50px 50px;
	max-width: 1400px;
}

@media (max-width: 800px) {
	.wp-block-template-part {
		padding: 25px;
	}
}


a,
a:active,
a:visited {
	text-decoration: none !important;
	color: var(--color-dark);
}
a:hover {
	color: var(--color-light);
}



/* Circle */

body {
	background-image: var(--bg-header);
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 57.5vw;
}

@media (max-width: 800px) {
	body {
		background-image: var(--bg-header-mobile);
		background-size: 100vw 150px;
		background-position: top center;
	}
}

 .is-menu-open {
	background: linear-gradient(-60deg, var(--color-dark), var(--color-light));
}


/*** HEADER ***/

/* Main Navigation */

header {
	z-index: 100 !important;
}

.nav-main .wp-block-navigation-item {
	margin-right: clamp(15px, 7.64vw - 40px, 70px); /* 40px was 36.36px */
	font-size: 1.4rem;
}

.nav-main .wp-block-navigation-item:first-child {
  display: none;
}


.nav-main .wp-block-navigation-item:last-child {
  margin-right: 0;
}

.nav-icons img {
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.nav-icons img:hover {
	opacity: 1;
}

.nav-main a {
	width: 100%;
}

.nav-main svg {
	max-width: 320px;
	margin-right: 50px;
}

@media (max-width: 800px) {
	
.nav-main .wp-block-navigation-item:first-child {
  display: block;
}	
.nav-main .wp-block-navigation-item {
  padding: 10px 0;
}		
	.nav-main svg {
		max-width: 250px;
	}
	.nav-main svg .text {
	  fill: white;
	}	
}


.wp-block-navigation__responsive-container-open svg {
  display: none; /* hide default icon */
}

.wp-block-navigation__responsive-container-open {
  background-image: url('assets/img/hamburger.svg'); /* relative or absolute path */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 40px;  /* adjust as needed */
  height: 40px;
}

@media (max-width: 800px) {
  /* Responsive container: vertical + horizontal centring */
	
	
  .wp-block-navigation__responsive-container.is-menu-open {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontal centring */
    justify-content: center; /* Vertical centring */
    text-align: center;

    /* Override justification variables */
    --navigation-layout-justification-setting: center;
    --navigation-layout-justify: center;
  }

  /* Ensure the inner nav items stack and are centred */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation {
    display: flex;
    flex-direction: column;
    align-items: center !important;
  }
	
.wp-block-navigation__responsive-container-close {
position: fixed;
right: 50px;
top: 50px;
z-index: 2;
}	
	
	.wp-block-navigation__responsive-container-content a {
		font-size: 2.5rem;
	}	
	
	

  /* Optional spacing between nav items */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    margin: 10px 0;
  }
}

/* change breakpoint */

@media ( min-width: 801px ) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: block !important;
    }
}
@media ( min-width: 601px ) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: none;
    }
}


/*** FOOTER ***/


footer.wp-block-template-part {
    margin: 0;
    padding: 150px 150px 50px 50px;
    max-width: 100%;
    background: linear-gradient(-60deg, var(--color-dark), var(--color-light));
    color: #FFF;
    border-top-right-radius: 100%;
    display: inline-block;
    font-size: 1rem;
    line-height: 1.5rem;
}

@media (max-width: 800px) {
	footer.wp-block-template-part  {
		padding: 150px 150px 25px 25px;
	}
}

footer.wp-block-template-part a,
footer.wp-block-template-part a:active,
footer.wp-block-template-part a:visited {
	color: #FFF;
}

footer.wp-block-template-part a:hover {
	color: #FFF;
	text-decoration: underline !important; 
}


/*** CONTENT ***/

.wp-block-post-content > p,
.wp-block-post-content > ul {
	max-width: 900px;
}

/* List */

.wp-block-post-content > ul > li {
	margin-bottom: 0.25rem;
}


/* Post two columns */

@media ( max-width: 1000px ) {
	.post-two-column {
		flex-direction: column;
	}
}

/* Post Grid */

ul.wp-block-post-template {
	gap: clamp(15px, calc(35 * (100vw - 600px) / 800 + 15px), 50px)
}

@media ( max-width: 1000px ) {
	ul.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}	

li.wp-block-post {
    margin: 0;
    background-color: var(--color-light);
    transform: rotate(-1deg);
    border-radius: 25px;
    border-right: 10px solid var(--color-light);
    border-top: 5px solid var(--color-light);
}

li.wp-block-post:hover {
	transform: rotate(0deg);
}

div.wp-block-group-is-layout-flow {
	height: 100%;
	padding: 0 !important;
    background-color: white;
    transform: rotate(1deg);
    border-radius: 25px;
	border: 2px solid var(--color-light);
	overflow: hidden;
}

li.wp-block-post:hover div.wp-block-group-is-layout-flow {
	transform: rotate(0deg);
}

div.wp-block-group-is-layout-flow figure {
	background-color: var(--color-light);
}

div.wp-block-group-is-layout-flow > h2 {
	margin-block-start: 0 !important;
	padding: 15px 15px 0 15px;
	font-size: 1rem;
	line-height: 1.25rem;
}

div.wp-block-group-is-layout-flow > div {
	margin-block-start: 0 !important;
	padding: 0 15px 0 15px;
	font-size: 0.75rem;
	margin-bottom: 25px;
}


div.wp-block-group-is-layout-flow > a {
    margin-block-start: 0 !important;
    font-size: 0.75rem;
    display: block;
    position: absolute;
    right: 25px;
    bottom: 15px;
}

/*** BLOCK STYLES (what can't be adjusted in site editor) ***/

/* Headings */

h1.wp-block-heading,
h1.wp-block-post-title {
	margin: 50px 0 50px 0;
	line-height: 1.25em;
}

h2.wp-block-heading,
h2.wp-block-post-title {
	margin: 50px 0 50px 0;
	line-height: 1.25em
}

.wp-block-post-template h2.wp-block-post-title {
	margin: 0 0 5px 0;
	line-height: 1.25em
}


/* Images */

.wp-block-image img {
	border-radius: 25px;
}

/* Buttons */

.wp-block-button {
	background: linear-gradient(-60deg, var(--color-dark), var(--color-light));
	border-radius: 25px;
}

.wp-block-button:hover {
	background: var(--color-dark) !important;
}

.wp-element-button,
.wp-element-button:active,
.wp-element-button:visited {
	background-color: transparent!important;
	background-image: url(assets/img/button.svg);
	background-repeat: no-repeat, no-repeat;
	background-position: calc(100% - 10px) center;
	background-size: 20px 20px;
	padding: 10px 40px 10px 15px !important;
	color: white;
}

.wp-element-button:hover {
	background-image: url(assets/img/button-hover.svg);
	background-size: 25px 15px;
	color: #FFF;
}

/* Pullquote */

.wp-block-pullquote {
	background-image: url("assets/img/quote.svg");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 50px auto;
	padding: 50px 0 25px 50px;
}

.wp-block-pullquote p {
	font-size: 2rem;
	line-height: 2.5rem;
	font-weight: 700;
	text-align: left;
}
.wp-block-pullquote cite {
	font-size: 1.5rem;
	line-height: 1.75rem;
	text-align: left;
}

@media (max-width: 800px) {	
	.wp-block-pullquote p {
		font-size: 1.5rem;
		line-height: 1.75rem;
	}
	.wp-block-pullquote cite {
		font-size: 1rem;
		line-height: 1.25rem;
	}	
}

/* Table Presse */

.wp-block-details {
	border: 2px solid var(--color-light);
	border-radius: 25px;
}

.wp-block-details summary {
	padding: 25px;
	color: var(--color-dark);
}

.wp-block-details summary:hover {
	cursor: pointer;
}

.wp-block-table.tablepresseartikel {
	padding: 0 25px 25px 25px;
}

.wp-block-table.tablepresseartikel tr {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 2px dashed var(--color-light);
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.wp-block-table.tablepresseartikel tr:last-child {
	border-bottom: none;
}

.wp-block-table.tablepresseartikel td {
	border: 0;
	padding: 0;
}

.wp-block-table.tablepresseartikel td:first-child {
	width: 100%;
}

.wp-block-table.tablepresseartikel td:nth-child(3) {
	text-align: right;
	flex: 1;
	font-style: italic;
	font-size: 1rem;	
}

@media ( max-width: 800px ) {
	.wp-block-table.tablepresseartikel td:nth-child(3) {
		font-size: 0.75rem;
	}
}

/* Cover */

.wp-block-cover .wp-block-cover__background {
  opacity: 0;
}

.wp-block-cover {
    background-color: var(--color-light);
    transform: rotate(-2deg);
    overflow: visible;
    border-radius: 25px;
    margin-right: -20px !important;
}


@media ( max-width: 800px ) {
	.wp-block-cover {
		margin-right: 0px !important;
		margin-left: 10px !important;
	}
}


.wp-block-cover__image-background {
    object-position: 41% 34%;
    transform: rotate(2deg);
    border-radius: 25px;
    margin-left: -20px !important;
}

.wp-block-cover__inner-container {
    transform: rotate(2deg);
    position: absolute !important;
    bottom: -45px !important;
}

.wp-block-cover__inner-container > p {
    text-align: right;
    padding-right: 50px;
	color: #000;
}

.wp-block-cover__inner-container > p > a {
	padding: 5px 10px;
	border-radius: 25px;
	background-color: var(--color-light);
	color: #FFF;
	transition: all 0.3s ease;
	font-size: 0.75rem;
}

.wp-block-cover__inner-container > p > a:hover {
	background-color: var(--color-dark);
}

/* Media with text */

.wp-block-media-text {
	min-height: 500px;
	border: 2px solid var(--color-light);
	overflow: hidden;
}

@media (max-width:600px) {
	.wp-block-media-text.is-stacked-on-mobile {
		padding-bottom: 25px;
	}
}

/*** BLOCK STYLES ***/

.wp-block-button.is-style-pdf .wp-element-button {
	background-image: url(assets/img/pdf.svg);
}

.wp-block-button.is-style-pdf .wp-element-button:hover {
	background-image: url(assets/img/pdf-hover.svg);
}


/*** NGG GALLERY ***/

/* NGG Post */

.ngg-galleryoverview {
  display: flex !important;
  flex-wrap: wrap;
  gap: 25px;
}

.ngg-gallery-thumbnail-box {
  flex: 0 0 calc(33.333% - 17px); /* Don't grow or shrink */
  max-width: calc(33.333% - 17px);
  aspect-ratio: 1 / 1;
}

.ngg-gallery-thumbnail img {
	border-radius: 25px;
}

/* NGG Galerie */

.ngg-breadcrumbs {
	display: none;
}

.ngg-albumoverview {
  display: flex !important;
  flex-wrap: wrap;
  gap: 25px;
	justify-content: stretch;
}

.ngg-album {
	padding: 0;
  flex: 0 0 calc((100% - 75px) / 4); /* 25% width minus 3/4 of the gap to account for 4 gaps in a row */
  box-sizing: border-box; /* Ensures padding/border doesn't affect the width */
	border-radius: 25px;
	background: #FFF;
	border: 0;
}

@media ( max-width: 1200px ) {
	.ngg-album {
	  flex: 0 0 calc((100% - 50px) / 3);
	}
}

@media (max-width: 800px) {
  .ngg-album {
    flex: 0 0 calc((100% - 25px) / 2);/* 2 columns */
  }
}

@media (max-width: 600px) {
  .ngg-album {
    flex: 1 1 100%; /* 1 column */
  }
}

.ngg-albumtitle {
	margin: 0;
	padding: 15px;
	font-size: 1rem;
	line-height: 1rem;
	color: var(--color-dark);
	min-height: 70px;
	text-align: center;
	  display: flex;
  align-items: center;       /* vertical centering */
  justify-content: center;   /* horizontal centering */
	background: var(--color-light);
}

.ngg-thumbnail {
	float: none;
	margin: 0;
}

.ngg-albumtitle a,
.ngg-albumtitle a:active,
.ngg-albumtitle a:visited,
.ngg-albumtitle a:hover {
	color: #FFF;
	margin: 0;
	padding: 0;
}

.ngg-thumbnail img {
	margin: 0;
	padding: 0;
	width: 100%;
	border: 0;
}


.ngg-description {
	padding: 15px;
	font-size: 0.75rem;
	line-height: 0.75rem;
	background: var(--color-light);
	color: #FFF;
	margin: -10px 0 0 0;
	min-height: 130px;
}
.ngg-album-gallery-image-counter {
	text-align: right;
}

/* NGG Thumbs Beiträge */ 
.ngg-gallery-thumbnail-box {

  flex: 0 0 calc((100% - 50px) / 3);

}

@media (max-width: 800px) {
  .ngg-gallery-thumbnail-box  {
    flex: 0 0 calc((100% - 25px) / 2);/* 2 columns */
  }
}


.ngg-gallery-thumbnail img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}


/* NGG Thumbs Album */

.ngg-album-container .ngg-gallery-thumbnail-box {

  flex: 0 0 calc((100% - 100px) / 5); 

}

@media ( max-width: 1100px ) {
	.ngg-album-container .ngg-gallery-thumbnail-box  {
	  flex: 0 0 calc((100% - 75px) / 4); 
	}
}

@media ( max-width: 900px ) {
	.ngg-album-container .ngg-gallery-thumbnail-box  {
	  flex: 0 0 calc((100% - 50px) / 3);
	}
}

@media (max-width: 700px) {
  .ngg-album-container .ngg-gallery-thumbnail-box  {
    flex: 0 0 calc((100% - 25px) / 2);/* 2 columns */
  }
}