/*
Theme Name: Drumhead Consuting v.2
Theme URI:
Description: Custom theme for Drumhead Consuting
Version: 2.0
Author: 72dpi, Oliver Hulisz
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-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: root
-------------------------------------------------------------------------------------------------- */
: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);

	--font: 'Sora', Verdana, Arial, Helvetica, sans-serif;
  
  --clr-surface: hsl(0, 0%, 95%);
	--clr-accent-1: hsl(195, 14%, 77%);
	--clr-text: hsl(0, 0%, 27%);
	--clr-primary: hsl(127, 54%, 42%);
	--clr-primary-dark: hsl(127, 54%, 32%);

  --wrap-max-width: 78rem;
}


/* MARK: Base
-------------------------------------------------------------------------------------------------- */
body {
	color: var(--clr-text);
	font-family: var(--font); 
	font-size: var(--step-0);
	font-weight: 400;
	line-height: 1.5;
	background: var(--clr-surface);
	/* overflow-y: scroll; */
	
}

a:link, a:visited, a:active {
	text-decoration: none;
	color: var(--clr-primary);
}
	a:hover {	
		text-decoration: underline;
	}
	a:focus {	
		outline: none;
	}

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



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


.site-logo {
	width: clamp(7rem, 15vw, 12rem);
}
	
a.burger-button .icon-menu {
  width: 2.5rem;
  aspect-ratio: 1;
 }
  .clr-burger {
    fill: var(--clr-primary);
  }
  & .icon-menu-open, & .active .icon-menu-close {
    display: block;
  }
  & .icon-menu-close, & .active .icon-menu-open {
    display: none;
  }
	
	nav.global {
		display: flex;
		max-height: 0;
		overflow: hidden;
		transition: max-height .5s;
		font-weight: 500;
		font-size: var(--step-0);
			
		&.active {
			max-height: 50rem;
		}

		& ul {
			width: 100%;
			padding-top: 1rem;
		}

		& a {
			display: block;
			padding-block: .5rem;
			color: var(--clr-text);
			font-weight: 600;
			text-decoration: none;
			transition: all .3s ease-in-out;
		}
		& :is(.current-menu-item a, a:hover) {
			color: var(--clr-primary);
		}
	}	


@media (width > 50rem) {
  
	body {
		margin-top: 1rem;
	}
	.row-header {
		padding-block: 2rem;
		display: grid;
		grid-template-columns: 1fr 3fr;
		gap: 1rem;
	}
	
	a.burger-button {
		display: none;
	}

	nav.global,
	nav.global.active {
		max-height: none;
		overflow: visible;
		display: flex;
		align-items: end;
		line-height: 1;
	}

	nav.global > ul {
		display: flex;
		flex-direction: row;
		gap: 1.5rem;
		margin: 0;
	}
		nav.global ul a {
			padding: 0;
			text-transform: uppercase;
			color: var(--clr-accent-1);
			letter-spacing: 1px;
		}
}	




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

:is(h1, h2, h3, h4) {
  line-height: 1.3;
}

h1 {
	margin-block: 2rem;
	font-size: var(--step-2);
	color: var(--clr-primary);
	font-weight: 300;
}
h2 {
	font-size: var(--step-2);
	font-weight: 600;
}
h3 {
	font-size: var(--step-1);
	font-weight: 600;
}

small {
	font-size: var(--step--1);
}

hr {
	margin-block: 1rem;
	height: 1px;
	background: none;
	border: none;
	border-top: 3px dotted var(--clr-accent-1);
}

p.admin-row {
	font-size: var(--step--1);
	opacity: .25;
}



/* MARK: Layout
-------------------------------------------------------------------------------------------------- */

.main-layout {
	display: grid;
	gap: 1rem;
}

	@media (width > 50rem) {
		.main-layout {
			grid-template-columns: 1fr 3fr;
			width: var(--wrap-max-width);
		}
	}	

.column {
	margin-block-end: 1.5rem;
}
	.column img {
		max-width: 8rem;
		border-radius: 100vw;
		border: .5rem solid #fff;
	}

@media (width > 50rem) {
	.main-content.two-columns {
		display: flex;
		gap: 3rem;
	}
		.main-content.two-columns > * {
			flex: 1;
		}
}

@media (width > 50rem) {
	.repel {
		display: flex;
		justify-content: space-between;
	}
}


.drumsticks {
	max-width: 6rem;
}

.row-footer {
	padding-block: 3rem;
}

/* viewport borders 
-------------------------------------------------------------------------------------------------- */
#top, #left, #right, #bottom {
	display: none;	
}

@media (width > 50rem) {
	
	#top, #bottom, #left, #right {
		display: block;
		background: #fff;
		position: fixed;
		z-index: 10;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 1rem;
	}
	#left { left: 0; }
	#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 1rem;
	}
	#top { top: 0; }
	#bottom { bottom: 0; }

}

/* MARK: Buttons
-------------------------------------------------------------------------------------------------- */
:is(.btn, input[type=submit]) {
	font-size: var(--step--1);
	color: #fff;
	padding: .35rem 1rem;
	border-radius: 100vw;
	background-color: var(--clr-primary);
	text-decoration: none;
	border: 0;
	cursor: pointer;
}
	:is(.btn, input[type=submit]):hover {
		background-color: var(--clr-primary-dark);
	}

.post-edit-link {
	display: inline-block;
	font-size: var(--step--1);
	margin-block-start: 1.5rem;
}



/* MARK: CF7
-------------------------------------------------------------------------------------------------- */
	
label {
	display: block;
	margin: 0;
	color: #495A60;
}

input[type=text],
input[type=email],
textarea {
	margin: .3rem 0 0 0;
  padding: .25rem;
	width: 100%;
	border: 2px solid #e0e0e0;
	background-color: #f5f5f5;
	border-radius: 0;
	-webkit-appearance: none;
	outline: none;
}
	textarea {
		height: 8rem;
	}
	input[type=text].wpcf7-not-valid,
	input[type=email].wpcf7-not-valid,
	textarea.wpcf7-not-valid {
		border: 2px solid var(--clr-primary-dark);
	}

.screen-reader-response {
	display: none;
}

.wpcf7-not-valid-tip {
	display: block;
	font-size: var(--step--2);
	color: var(--clr-primary-dark);
	text-transform: uppercase;
	margin: .15rem 0;
}



/* cf7 loading dots
-------------------------------------------------------------------------------------------------- */
.wpcf7 .wpcf7-spinner {
	display: none;
}
  .wpcf7 form.submitting .wpcf7-spinner {
    display: block;
    margin: 1rem 0 0 0;
    width: 100%;
    height: .75rem;
    background-image: url(svg/loading-dots.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
  }