/*
Theme Name: SETU
Theme URI: 
Author: Gijs de Heij
Author URI: https://wordpress.org
Description: Template for SETU
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/


/*

	The stylesheet is designed 

	## .layout--page
	Regular page with one column of content and images.
	The images are displayed on the side on desktop
	and above the content on mobile

	main.layout--page
		section.layout--page--content
		section.layout--page--gallery

	## .layout--sidenav--content
	Pages with one content column and a sidenavigation

	main.layout--sidenav
		section.layout--sidenav--sidenav
		section.layout--sidenav--content


	## .layout--galleries
	Page where the content is organised as rows with each row
	containing content and images. On desktop the images are
	displayed to the side. On mobile above the content per row:
	
	main.layout--galleries
		section.layout--galleries--row
			section.layout--galleries--row--content
			section.layout--galleries--row--gallery
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

header {
	top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
	position: sticky;
	z-index: 10;
  background: white;
}

.page-list {
	list-style-type: none;
	padding: 0;
}

p:empty + .page-list {
	/* for some reason an empty p is inserted */
	margin-block-start: 0;
}

.page-list a {
	text-decoration: none;
}

.page-list .current_page_item > a {
	text-decoration: underline; /* hilite active item */
  font-weight: normal;
}



:root {
  --fs: 24px;
  --lh: 30px;

  --fs-subheader: var(--fs);
  --lh-subheader: var(--lh-subheader);

  --fs-header: 30px;
  --lh-header: 36px;

  --fs-subnav: var(--fs);
  --lh-subnav: var(--lh);

  --fs-small: 18px;
  --lh-small: 24px;

  --border: 2px solid black;
}


html, body {
  margin: 0;
  padding: 0;
  font-size: var(--fs);
  line-height: var(--lh);
  font-family: "Adelphe Floreal";
}

.wp-site-blocks {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: min-content 1fr;
}

.wp-site-blocks header {
  display: grid;
  grid-template-columns: calc(5.8 * var(--lh)) 1fr;
  grid-template-rows: min-content 1fr;
  font-family: "Authentic Sans Condensed";
}

/* Draw the border between the main and the subnav */
.wp-site-blocks header::before {
  content: "";
  display: block;
  grid-column: 1 / span 2;
  grid-row: 2;
  border-top: var(--border);
}

/* If it has subnav draw background too. */
.wp-site-blocks header:has(.subnav)::before {
  background-color: #dfdfdf;
}


nav {
  padding: calc(.4 * var(--lh)) calc(.5 * var(--lh)) calc(.2 * var(--lh)) 0;
}

nav ul,
nav ul li {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: var(--lh);
}

nav.mainnav ul li:last-child {
  margin-left: auto;
}

nav ul a {
  color: currentColor;
  text-decoration: none;
}

nav ul a:hover {
  text-decoration: underline;
}

.mainnav {	
  grid-row: 1;
  grid-column: 2;
}

.subnav {
  grid-row: 2;
  grid-column: 2;
}

main {
  flex-grow: 1;
}

main > section {
  padding: var(--lh) var(--lh) var(--lh) calc(.5 * var(--lh));
  overflow-y: auto;
  max-height: 100%;
}

/*
  Give content after menu without subnavigation more padding
	at the top to avoid the logo overlapping the content.
*/
.wp-site-blocks:not(:has(> .wp-block-template-part > header[data-subnav])) 
	main:not(.layout--galleries) > section:first-child,
.wp-site-blocks:not(:has(> .wp-block-template-part > header[data-subnav]))
	main.layout--galleries > .layout--galleries--row:first-child > .layout--galleries--row--content {
  padding-top: calc(2 * var(--lh));
}

.layout--sidenav--content {
  padding-left: var(--lh);
}

main.layout--sidenav--content > :not(:last-child),
main.layout--page > :not(:last-child) {
  border-right: var(--border);
}

/* Layout with gallery */
.layout--page {
  display: grid;
  grid-template-columns: 50% 50%;
  max-height: 100%;
  overflow: hidden;
	/* Overwrite Wordpress defaults */
	margin-block-start: 0;
}

.layout--page .layout--page--gallery {
  padding: 0;
}

.layout--galleries {
	margin-block-start: 0 !important;
	overflow: auto;
}

.layout--galleries--row {
  display: grid;
  grid-template-columns: 50% 50%;
  padding: 0;
	overflow-y: initial;
	max-height: initial;
}


.layout--galleries--row--content {
  padding: var(--lh) var(--lh) var(--lh) calc(.5 * var(--lh));
}

.layout--galleries--row--gallery {
  border-left: var(--border);
  cursor: pointer;
  position: relative;
  padding-bottom: calc(1.5 * var(--lh));
}

.layout--galleries--row--gallery::after {
  position: absolute;
  bottom: calc(.5 * var(--lh));
  left: calc(.5 * var(--lh));
  content: attr(data-label);
  font-size: var(--fs-small);
}

.layout--galleries--row--gallery figure {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

.layout--galleries--row--gallery figure:not([data-active]) {
  display: none;
}

/* Layout with sidenav */
.layout--sidenav {
  display: grid;
  grid-template-columns: 35ch 1fr;
  max-height: 100%;
  overflow: hidden;
}

.sidenav {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.sidenav a {
  color: currentColor;
  text-decoration: none;
}

.sidenav a:hover,
.sidenav a:target {
  text-decoration: underline;
}

main img {
  max-width: 100%;
}


.layout--galleries--row--gallery figure,
.layout--page--gallery figure {
	margin: var(--lh) 0;
	display: flex;
	flex-direction: column;
	max-height: 60vh;
}

.layout--galleries--row--gallery figure img,
.layout--page--gallery figure img {
	max-width: 100%;
	max-height: 100%;
	flex: 1 1;
	min-height: 0;
	align-self: flex-start;
}

.layout--galleries--row--gallery figure:first-child,
.layout--page--gallery figure:first-child {
  margin-top: 0;
}

.layout--galleries--row--gallery figure figcaption,
.layout--page--gallery figure figcaption {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  margin: calc(.5 * var(--lh));
}

.layout--galleries--row--gallery figure figcaption:before,
.layout--page--gallery figure figcaption:before {
  content: attr(data-label);
}

header h1 {
	margin: calc(.4 * var(--lh)) calc(.4 * var(--lh)) calc(.2 * var(--lh));
	padding: 0;
	height: calc(2.5 * var(--lh));
  grid-row: 1;
	grid-column: 1;
	background-image: url("/wp-content/themes/SETU/assets/images/SETU/logo.png");
	background-repeat: no-repeat;
	background-size: contain;
	color: transparent;
	aspect-ratio: 2;
	z-index: 1;
	position: relative;
  /*
  
    Pull up content below the logo for when it is
    displayed without sub navigation. 
    
    The grid row will receive a height from the main
    navigation element.

  */
  margin-bottom: -100%;
}

header h1 a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

h2 {
  margin: 0 0 var(--lh) 0;
  padding: 0;
  font-size: var(--fs-header);
  line-height: var(--lh-header);
  font-weight: 400;
}

h3 {
  font-size: var(--fs-subheader);
  line-height: var(--lh-subheader);
  font-weight: 400;
  margin: var(--lh-subheader) 0 0 0;
  font-style: italic;
}


h4 {
  font-size: var(--fs-subheader);
  line-height: var(--lh-subheader);
  font-weight: 400;
  margin: 0;
}

header input[type="checkbox"],
header label,
.layout--sidenav--sidenav input[type="checkbox"] {
  display: none;
}


/** Homepage */

main.layout--home {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: calc(2 * var(--lh));
	column-gap: calc(2 * var(--lh));
	margin-block-start: 0;
	box-sizing: border-box;
	max-height: 100%;
	overflow: auto;
}

.layout--home .wp-block-post-featured-image img {
	position: fixed;
	inset: 0;
	object-fit: cover;
	max-height: initial;
	aspect-ratio: initial !important;
	width: 100vw;
	height: 100vh;
	z-index: -1;
}


/** Content on homepage itself **/ 
.homepage--own--content {
	grid-column-end: span 2;
}

.homepage--own--content:empty {
	display: none;
}

/* Boxes on the homepage */
.homepage--section {
	border: 1px solid black;
	align-self: center;
	background: white;
	overflow: initial;
}
.homepage--section:nth-child(2) {
	transform: rotate(-7deg);
}
.homepage--section:nth-child(3) {
	transform: rotate(6deg);
}
.homepage--section:nth-child(4) {
	transform: rotate(9deg);
}
.homepage--section:nth-child(5) {
	transform: rotate(-8deg);
}
.homepage--section:nth-child(6) {
	transform: rotate(-4deg);
}
.homepage--section:nth-child(7) {
	transform: rotate(6deg);
}
.homepage--section:nth-child(8) {
	transform: rotate(9deg);
}
.homepage--section:nth-child(9) {
	transform: rotate(-3deg);
}

/*
	Boxes clear padding and margin on boxes that only
	have an image as a child.
*/

.homepage--section:has(h2:empty + figure:last-child) {
	padding: 0;
	margin: 0;
}

.layout--page--gallery:empty,
layout--galleries--row--gallery:empty {
	display: none;
}

.wp-site-blocks figure {
	max-width: 100% !important;
}

@media screen and (min-width: 600px) {
  .layout--galleries--row:nth-child(n+2) > section {
    padding-top: calc(4 * var(--lh));
  }

	.layout--page:has(.layout--page--gallery:empty) {
		grid-template-columns: minmax(50%, 70ch);
		justify-self: center;
		border-left: 2px solid black;
		margin-left: -2px;
		margin-right: -2px;
	}
}

@media screen and (max-width: 600px) {
	:root {
		--fs: 16px;
		--lh: 22px;

		--fs-subheader: var(--fs);
		--lh-subheader: var(--lh-subheader);

		--fs-header: 20px;
		--lh-header: 24px;

		--fs-subnav: var(--fs);
		--lh-subnav: var(--lh);

		--fs-small: 12px;
		--lh-small: 16px;

		--border: 2px solid black;

		/**
			Only found a way to do 'fluid' fontsizes. Prefer a sudden change.
			Therefor overwrite the presets.	
		*/
		--wp--preset--font-size--small: var(--fs-small);
		--wp--preset--font-size--medium: var(--fs);
		--wp--preset--font-size--large: var(--fs-header);
		--wp--preset--spacing--40: var(--lh);
	}

  .wp-block-navigation {
    --navigation-layout-direction: column;
    --navigation-layout-align: flex-start;

    row-gap: 0;
  }


	.wp-site-blocks {
		height: initial;
		overflow: initial;
	}

  header {
    max-width: 100vw;
    /* overflow: hidden; */
    position: sticky;
    z-index: 1;
    top: 0;
    background: white;
  }

  main {
    margin-block-start: 0;
  }
	
	.layout--page,
  .layout--sidenav {
		max-height: initial;
		overflow: initial;
		grid-template-columns: 100%;
		grid-template-rows: min-content 1fr;
	}

	main .layout--page--content {
		border-right: none !important;
	}

	.wp-site-blocks main > section:first-child:has(+ .layout--page--gallery:not(:empty)) {
		padding-top: var(--lh) !important;
	}

	.layout--page .layout--page--gallery:not(:empty) {
		grid-row: 1;
		overflow-y: hidden;
		overflow-x: auto;
		display: flex;
		flex-direction: row;
		border-bottom: var(--border);
    gap: var(--lh);
		height: 40vh;
	}
	
	.layout--page--gallery figure {
		height: 100%;
		max-width: initial !important;
		flex: 1 0 auto;
		margin: 0;
		flex-direction: row;
		display: flex;
		flex-direction: column;
	}
	
	.layout--page--gallery img {
		flex: 1 1;
		max-width: 100%;
		max-block-size: 100%;
		align-self: flex-start;
		min-height: 0;
	}

  .layout--galleries--row {
    grid-template-columns: 100%;
    grid-template-rows: 60vh min-content;
  }

	/*
		If the image gallery is empty. Reset display
	  to avoid whitespace above the content
	*/
	.layout--galleries--row:has(.layout--galleries--row--gallery:empty) {
		display: block;
	}

  .layout--galleries--row--gallery {
    grid-row: 1;
    border-left: 0;
  }

  .layout--galleries--row + .layout--galleries--row {
    margin-top: calc(2 * var(--lh));
  }

  header label {
    display: block;
  }

  .layout--sidenav > section {
    padding-top: calc(.5 * var(--lh));
    padding-bottom: calc(.5 * var(--lh));
  }

  .layout--sidenav--content {
    padding-left: calc(.5 * var(--lh));
  }

  nav {
    padding: 0;
  }

  .mainnav,
  .subnav {
    padding: calc(.4 * var(--lh)) calc(.5 * var(--lh)) calc(.2 * var(--lh)) 0;
  }

  /*
    Make the menu toggleable on mobile views.
    By default the navigation element is not shown.
    When a hidden checkbox is checked the menu is shown.
    Checkbox state is toggled through a label.
    Using pseudo element the label is extend with open and close.
  */
  .mainnav nav,
  .mainnav input,
  .subnav nav,
  .subnav input {
    display: none;
    margin-top: var(--lh);
  }

  :checked ~ nav {
    display: block;
  }

  .siblings-page-list {
    display: none;
  }

  .layout--sidenav--sidenav :checked ~ .siblings-page-list {
    display: block;
  }

  .layout--sidenav--sidenav :not(:checked) ~ #sidenav--toggle--label h2 {
    margin-bottom: 0;
  }

  .layout--sidenav--sidenav #sidenav--toggle--label h2::before {
    display: inline-block;
    content: '>';
    margin-right: .25ch;
  }

  .layout--sidenav--sidenav :checked ~ #sidenav--toggle--label h2::before {
    transform: rotate(90deg);
  }

	/* Hide empty paragraph before pagelist */
	.layout--sidenav--sidenav #sidenav--toggle--label + p {
		display: none;
	}

	/* On homepage do not show as grid. */
	main.layout--home {
		display: block;
		padding: var(--lh);
	}

	.layout--galleries--row--gallery figure img {
		align-self: center;
	}
}