/*
-----------------------------------------------
Project Name here
Project-specific styles only.

Generic improvements belong in main.css and should
be copied back to Naloo Starter after they have
been proven reusable.
-----------------------------------------------
*/

:root {
	--font-body: "IBM Plex Serif", serif;
	--font-heading: "IBM Plex Serif", serif;
	--font-bold: "IBM Plex Serif", serif;
	
	--container-padding: 6rem;
	
	--font-nav: clamp(1.25rem, 1.5rem + 0.5vw, 2rem);
}

@media (max-width: 1290px) {
	:root {
		--container-padding: var(--space-md);
	}
}

@media (max-width: 768px) {
	:root {
		--container-padding: var(--space-sm);
	}
}

body {
	font-weight: 300;
}

h1, h2, 
.h1, .h2 {
	font-weight: 200;
}

h3, h4, h5, h6,
.h3, .h4, .h5, .h6 {
	font-weight: 300;
}

p, ul, ol, li {
  margin-block: 0 var(--space-sm);
}

strong,
b {
	font-weight: 400;
}

/* Layout */

.site-main > .section, .entry-content > .section {
  width: min( 100% - (var(--container-padding) * 2), var(--content-width) );
  margin-inline: auto;
}

/* Header / Site Branding */

.site-branding__name, 
.site-branding__name:visited {
  font-weight: 100;
  text-decoration: none;
  color: var(--nav-color);
}

.site-branding__name:hover {
  color: var(--nav-hover-color);
}

.site-header__inner {
	grid-template-rows: auto auto;
	row-gap: 0;
	padding-inline: var(--container-padding);
	padding-block: var(--space-sm);
}

.site-branding {
	grid-column: 1 / -1;
	grid-row: 1;
	justify-self: end;
}

@media (max-width: 1290px) {
	.site-header__inner {
		padding-block: var(--space-md);
	}

	.site-branding {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.site-nav-toggle {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		margin-bottom: 0;
	}
}

.site-branding__name {
	display: block;
	font-size: 60px;
	line-height: 1;
}

@media (max-width: 768px) {
	.site-branding__name {
		font-size: 40px;
	}
}

.site-nav {
	grid-column: 1 / -1;
	grid-row: 2;
}

.site-nav__menu {
	justify-content: flex-start;
	gap: 2rem;
	width: auto;
}

@media (max-width: 1290px) {
	.site-nav__menu { 
		gap: 0; 
	}

	.site-nav__menu li {
	  margin-block: 0;
	}	

	.site-nav__menu > li > .sub-menu, 
	.site-nav__menu .sub-menu .sub-menu {
		background: transparent !important;
		padding: 0;
	}
	
	.site-nav__menu .sub-menu a {
		color: var(--nav-color) !important;
	}

}

.site-nav__menu a {
  padding: 0;
  letter-spacing: var(--letter-spacing-strong); 
  font-weight: 100; 
}

.site-nav__menu > li > .sub-menu, .site-nav__menu .sub-menu .sub-menu {
  background: var(--color-text);
}

.site-nav__menu .sub-menu a {
	padding: .35rem 0 .35rem 1.25rem;
	font-size: var(--font-lg);
	font-weight: 200; 
}

.site-header__utility-nav {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}

/* Hamburger / Mobile Navigation */

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  background: var(--nav-hover-color);
  height: 2px;
}

/* Outer background */

html {
	background: linear-gradient(180deg, #000 0%, #36312e 100%) fixed;
}

/* Light panel around page content */
.site-main {
	width: min(
		100% - (var(--container-padding) * 2),
		var(--container-width)
	);
	margin-inline: auto;
	padding-block: var(--space-sm);
	background: #f3ddd6;
	background: linear-gradient(180deg, #f1ded8 0%, #ccaca2 100%);
}

@media (max-width: 1290px) {
	.site-main {
		padding-block: 0; 
	}
}	


.home .site-main {
	background: transparent; 
}

.home .entry-title {
	display: none; 
}

/* General */

.entry-title {
  margin-top: var(--space-md);
}

/* Werdegang Table */

.tablepress thead .dt-orderable-asc:hover, 
.tablepress thead .dt-orderable-desc:hover, 
.tablepress thead .dt-ordering-asc, 
.tablepress thead .dt-ordering-desc,
.tablepress > :where(thead, tfoot) > tr > * {
  background-color: transparent !important;
  color: var(--color-text) !important;
}

.tablepress > :where(thead, tfoot) > tr > * {
	font-weight: 400 !important; 
}

.tablepress > :where(thead) + tbody > :where(:not(.child)) > *, .tablepress > tbody > * ~ :where(:not(.child)) > *, .tablepress > tfoot > :where(:first-child) > * {
  border-top: 1px solid var(--color-secondary) !important;
}

.tablepress thead .dt-orderable-asc .dt-column-order, .tablepress thead .dt-orderable-desc .dt-column-order, .tablepress thead .dt-ordering-asc .dt-column-order, .tablepress thead .dt-ordering-desc .dt-column-order {
  color: var(--color-secondary) !important;
}

.tablepress thead .dt-orderable-asc .dt-column-order::after, .tablepress thead .dt-orderable-asc .dt-column-order::before, .tablepress thead .dt-orderable-desc .dt-column-order::after, .tablepress thead .dt-orderable-desc .dt-column-order::before, .tablepress thead .dt-ordering-asc .dt-column-order::after, .tablepress thead .dt-ordering-asc .dt-column-order::before, .tablepress thead .dt-ordering-desc .dt-column-order::after, .tablepress thead .dt-ordering-desc .dt-column-order::before {
  opacity: .5 !important;
}

.tablepress thead .dt-ordering-asc .dt-column-order::before, .tablepress thead .dt-ordering-desc .dt-column-order::after {
  opacity: 1 !important;
}

.tablepress img {
	max-width: 200px !important; 
	height: auto !important; 
}

/* Team */

.team__card .card__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.team__card .card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card */

.card {
  padding: var(--space-sm);
  border: none;
  background: color-mix(in srgb, var(--color-secondary) 20%, transparent);;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  box-shadow: none;
}

/* Footer */

.site-footer {
	margin-top: 0;
	padding-inline: var(--container-padding);
}

.site-footer h2 {
	font-weight: 300; 
}

.site-footer,
.site-footer a,
.site-footer a:visited {
	color: var(--color-accent);
}