/*
Theme Name: Dan Soder Custom 2025
Author: Stig Greve
Description: A custom theme for Dan Soder's site.
Version: 1.0
*/

/* Global */
	:root {
		--brown: #221e18;
		--dbrown: #191612;
		--green: #8ca188;
		--beige: #d1bab3;
	}
	body {
		color: var(--beige);
		font-family: "macha", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: clamp(1rem, 1.56vw, 2rem);
		margin: 0;
		padding: 0;
	}
	.webp body {
		background: var(--brown) url(images/page_bg.webp);
	}
	.no-webp body,
	.no-js body {
		background: var(--brown) url(images/page_bg.png);
	}
	a{
		color: inherit;
		text-decoration: none;
		cursor: pointer;
		transition: 0.3s;
	}
	strong, b{
		font-weight: 700;
		font-style: normal;
	}
	em, i{
		font-weight: 400;
		font-style: italic;
	}
	strong em, strong i, b em, b i, em strong, i strong, em b, i b{
		font-weight: 700;
		font-style: italic;
	}
	::selection {
		color: var(--dbrown);
		background: var(--green);
	}
	::-moz-selection {
		color: var(--dbrown);
		background: var(--green);
	}
	p{
		margin: 0 0 1.5em;
	}
	h2, h3, h4, h5{
		font-family: "fira-sans-2", sans-serif;
		font-size: 4em;
		line-height: 1em;
		font-weight: 700;
		font-style: normal;
		text-transform: uppercase;
		color: var(--green);
		padding: 0;
		margin: 0;
	}
	.clear{
		clear: both;
	}
	
/* Navigation */

	header{
		display: block;
		position: relative;
		width: 100%;
		height: 10.13vw;
		margin: 0;
		padding: 0;
		border: none;
		background: var(--dbrown);
		z-index: 10;
	}
	header h1{
		display: block;
		position: absolute;
		top: 1vw;
		left: 7.55vw;
		width: 26.59vw;
		height: 3.72vw;
		background: url(images/dansoder.png);
		background-image: url(images/dansoder.svg), none;
		background-size: 26.59vw 3.72vw;
		background-repeat: no-repeat;
		background-position: center top;
		text-indent: -9999vw;
		overflow: hidden;
	}
	header nav{
		display: block;
		position: absolute;
		top: 5.05vw;
		left: 36.72vw;
		font-size: 1.9vw;
		font-weight: 700;
		color: var(--green);
		text-transform: uppercase;
	}
	header nav.mobnav{display: none;}
	header nav a{
		display: block;
		float: left;
		margin: 0 1.69vw 0 0;
		line-height: 2.03vw;
	}
	header nav a.instagram{
		width: 2.03vw;
		height: 2.03vw;
		margin: 0 0.89vw 0 0;
		background: url(images/instagram.png);
		background-image: url(images/instagram.svg), none;
		background-size: 2.03vw 2.03vw;
		background-repeat: no-repeat;
		background-position: center top;
		text-indent: -9999vw;
		overflow: hidden;
	}
	header nav a.youtube{
		width: 2.03vw;
		height: 2.03vw;
		margin: 0;
		background: url(images/youtube.png);
		background-image: url(images/youtube.svg), none;
		background-size: 2.03vw 2.03vw;
		background-repeat: no-repeat;
		background-position: center top;
		text-indent: -9999vw;
		overflow: hidden;
	}
	
/* Homepage with Tour Dates */

	.webp section#tour{
		position: relative;
		width: auto;
		min-height: 75.52vw;
		margin: 0 0 14.32vw;
		padding: 0 7.55vw;
		background: url(images/photo_dan_homepage.webp) no-repeat center top;
		background-size: 100vw 82.318vw;
		z-index: 1;
	}
	.no-webp section#tour,
	.no-js section#tour{
		position: relative;
		width: auto;
		min-height: 75.52vw;
		margin: 0 0 14.32vw;
		padding: 0 7.55vw;
		background: url(images/photo_dan_homepage.png) no-repeat center top;
		background-size: 100vw 82.318vw;
		z-index: 1;
	}
	section#tour #upcoming{
		display: grid;
		float: right;
		width: 51.04vw;
		margin: 4.43vw 0 0;
		padding: 0;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		row-gap: 2vw;
		text-transform: uppercase;
	}
	section#tour .mobile-toggle {
	  display: none;
	}
	section#tour span.event-item{
		display: block;
		min-height: 6.02vw;
		line-height: 1.2em;
	}
	section#tour #upcoming .dcv {
		float: left;
		width: 36.4vw;
		font-weight: 600;
		color: var(--green);
	}
	section#tour #upcoming .dcv span.date{
		display: block;
		font-size: 1.8em;
		line-height: 1em;
		font-weight: 700;
		color: var(--beige);
		margin: 0 0 0.25vw;
	}
	section#tour #upcoming .dcv span.city{
		display: block;
		font-size: 1.3em;
		line-height: 0.8em;
		font-weight: 600;
		margin:  0 0 0.25vw;
	}
	section#tour #upcoming .dcv span.time{
		color: var(--beige);
	}
	section#tour #upcoming .tix {
		float: right;
		width: 11.98vw;
		height:  6.02vw;
		margin: 0;
	}
	section#tour #upcoming .tix a{
		display: block;
		height: 6.07vw;
		border: 0.26vw solid var(--green);
		font-size: 1.2em;
		line-height: 6.07vw;
		font-weight: 700;
		text-align: center;
		transition: 0.3s;
	}
	section#tour #upcoming .tix a:hover{
		border: 0.26vw solid var(--beige);
		color: var(--green);
		background: var(--dbrown);
	}
	
/* About */

	.webp section#about{
		width: auto;
		min-height: 41vw;
		margin: 0 0 14.32vw;
		padding: 2vw 51.3vw 0 7.55vw;
		background: url(images/photo_dan_about.webp) no-repeat 75% 1vw;
		background-size: 58.33vw 38.87vw;
	}
	.no-webp section#about,
	.no-js section#about{
		width: auto;
		min-height: 41vw;
		margin: 0 0 14.32vw;
		padding: 2vw 51.3vw 0 7.55vw;
		background: url(images/photo_dan_about.png) no-repeat 75% 1vw;
		background-size: 58.33vw 38.87vw;
	}
	section#about h2{
		margin: 0 0 12.63vw;
	}
	section#about a{
		color: var(--green);
		text-decoration: underline;
		font-weight: 700;
	}
	section#about a:hover{
		color: var(--beige);
	}
	
/* Specials */

	section#specials{
		position: relative;
		width: auto;
		min-height: 40vw;
		margin: 0 0 14.32vw;
		padding: 0 7.55vw;
	}
	section#specials div.cards{
		display: block;
		position: absolute;
		width: 26.61vw;
		height: 39.32vw;
	}
	section#specials div.cards a{
		display: block;
		width: 100%;
		height: 39.32vw;
		text-indent: -9999vw;
		overflow: hidden;
	}
	section#specials div.cards.sonofagary{
		top: 12vw;
		left: 50%;
		margin-left: -13.31vw;
		background: url(images/photo_sonofagary.jpg) no-repeat center top;
		background-size: 26.61vw 39.32vw;
		z-index: 10;
	}
	section#specials div.cards.notspecial{
		top: 16vw;
		left: 50%;
		width: 22.62vw;
		height: 33.42vw;
		margin-left: -32.31vw;
		background: url(images/photo_notspecial.jpg) no-repeat center top;
		background-size: 22.62vw 33.42vw;
		z-index: 1;
		rotate: -20deg;
	}
	section#specials div.cards.standups{
		top: 16vw;
		left: 50%;
		width: 22.62vw;
		height: 33.42vw;
		margin-left: 9.69vw;
		background: url(images/photo_standups.jpg) no-repeat center top;
		background-size: 22.62vw 33.42vw;
		z-index: 1;
		rotate: 20deg;
	}
	section#specials div.specialinfo {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(1, 1fr);
		gap: 2.6vw;
		margin-top: 48vw;
	}
	section#specials div.specialinfo div{
		text-align: center;
	}
	section#specials div.specialinfo div h5{
		display: block;
		font-family: "fira-sans-2", sans-serif;
		font-size: 2.13em;
		line-height: 1;
		text-transform: uppercase;
		margin: 0 0 3vw;
		color: var(--beige);
	}
	section#specials div.specialinfo div.spec-a h5,
	section#specials div.specialinfo div.spec-c h5{
		font-size: 1.813em;
		margin: 2vw 0 3vw;
	}
	section#specials div.specialinfo div.spec-a p,
	section#specials div.specialinfo div.spec-c p{
		font-size: 0.85em;
	}
	a.actionbtn{
		display: block;
		position: relative;
		width: 80%;
		border: 0.26vw solid var(--green);
		font-size: 1em;
		line-height: 1em;
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
		padding: 2vw 0;
		margin: 0 auto 2vw;
	}
	a.actionbtn:hover{
		border: 0.26vw solid var(--beige);
		color: var(--green);
		background: var(--dbrown);
	}
		
/* Podcasts */
	
	section#podcasts{
		width: auto;
		min-height: 40vw;
		margin: 0 0 14.32vw;
		padding: 0 7.55vw;
	}
	section#podcasts div.show{
		margin: 6.5vw 0 0;
	}
	section#podcasts div.show p{
		display: block;
		margin: 0;
		padding: 1.5vw 0 0;
	}
	section#podcasts div.show img{
		display: block;
		width: 26.56vw;
		height: 26.56vw;
		border: none;
	}
	section#podcasts div.show img.left{
		float: left;
		margin: 0 2.6vw 2.6vw 0;
	}
	section#podcasts div.show img.right{
		float: right;
		margin: 0 0 2.6vw 2.6vw;
	}
	section#podcasts a.actionbtn{
		display: inline-block;
		width: 25%;
	}
			
/* Contact */

	section#contact{
		width: auto;
		min-height: 40vw;
		margin: 0 0 3vw;
		padding: 0 7.55vw;
	}
	section#contact div.everybody {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(1, 1fr);
		gap: 2.6vw;
		margin: 5vw 0 0;
	}
	section#contact div.reps{grid-column: 1;}
	section#contact div.management{grid-column: 2;}
	section#contact div span.head{
		display: block;
		font-family: "fira-sans-2", sans-serif;
		font-size: 2.13em;
		line-height: 1em;
		font-weight: 700;
		text-transform: uppercase;
	}
	section#contact div span.subhead{
		display: block;
		font-size: 1.53em;
		margin: 0 0 2vw;
	}
	section#contact div span.cat{
		display: block;
		font-family: "fira-sans-2", sans-serif;
		font-size: 1.5em;
		line-height: 1em;
		font-weight: 700;
		text-transform: uppercase;
		margin: 0 0 1.5vw;
	}
	
/* Footer */
	footer{
		display: block;
		position: relative;
		width: auto;
		min-height: 5vw;
		margin: 0;
		padding: 0 7.55vw;
		text-align: center;
		font-size: 0.8em;
	}

@media only screen and (max-width: 767px) {
	
	body {
		font-size: clamp(1rem, 4vw, 2rem);
	}
	h2, h3, h4, h5{
		font-size: 3.9em;
	}
	
/* Header */
	header{
		height: 33.72vw;
		background: none;
		z-index: 10;
	}
	header h1{
		position: absolute;
		top: 2vw;
		left: 17.5vw;
		width: 65vw;
		height: 9.25vw;
		background: url(images/dansoder.png);
		background-image: url(images/dansoder.svg), none;
		background-size: 65vw 9.25vw;
	}
	header nav{
		display: none;
	}
	header nav.mobnav{
		display: block;
		position: absolute;
		top: 20.2vw;
		left: 17.325vw;
		width: 65.35vw;
		height: 10.12vw;
	}
	header nav.mobnav select{
		display: block;
		width: 65.35vw;
		height: 10.12vw;
		background-color: transparent;
		color: inherit;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		border: none;
		margin: 0;
		padding: 0;
		text-indent: -9999vw;
		opacity: 1;
		background: url(images/mobile/navi_bg.png);
		background-image: url(images/mobile/navi_bg.svg), none;
		background-size: 65.35vw 10.12vw;
		background-repeat: no-repeat;
		background-position: center top;
	}
		
/* Homepage with Tour Dates */
	
	.webp section#tour{
		position: relative;
		width: auto;
		min-height: 100vw;
		margin: -33.72vw 0 35vw;
		padding: 0 8.37vw;
		background: url(images/mobile/photo_dan_homepage.webp) no-repeat center top;
		background-size: 100vw 231.16vw;
		z-index: 1;
	}
	.no-webp section#tour,
	.no-js section#tour{
		position: relative;
		width: auto;
		min-height: 100vw;
		margin: -33.72vw 0 35vw;
		padding: 0 8.37vw;
		background: url(images/mobile/photo_dan_homepage.png) no-repeat center top;
		background-size: 100vw 231.16vw;
		z-index: 1;
	}
	section#tour #upcoming{
		display: grid;
		float: none;
		width: auto;
		margin: 0;
		padding: 118.84vw 8.37vw 0;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		row-gap: 0;
		text-transform: uppercase;
		overflow: hidden;
		max-height: calc(20 * (var(--row-height, 3rem) + 1rem)); /* Adjust 3rem to your row height */
		transition: max-height 0.3s ease;
	}
	section#tour #upcoming.expanded{
		max-height: 9999vh;
	}
	section#tour .mobile-toggle {
	  display: block;
	  width: 63vw;
	  padding: 4vw 0;
	  margin: 3vw auto 0;
	  border: none;
	  cursor: pointer;
	  background: var(--green);
	  color: var(--brown);
	  text-align: center;
	  text-transform: uppercase;
	  font-size: 1.1em;
	  font-weight: 700;
	}
	section#tour span.event-item{
		display: block;
		min-height: 38vw;
	}
	section#tour #upcoming .dcv,
	section#tour #upcoming .tix {
		float: none;
		width: auto;
	}
	section#tour #upcoming .dcv span.date{
		display: block;
		font-size: 1.8em;
		line-height: 1em;
		font-weight: 700;
		color: var(--beige);
		margin: 0 0 1vw;
	}
	section#tour #upcoming .dcv span.city{
		display: block;
		font-size: 1.3em;
		line-height: 0.8em;
		margin: 0 0 1.1vw;
	}
	section#tour #upcoming .dcv span.time{
		color: var(--beige);
	}
	section#tour #upcoming .tix{
		margin: 5.23vw 0 16vw;
	}
	section#tour #upcoming .tix a{
		height: 13.95vw;
		border: 0.47vw solid var(--green);
		line-height: 13.95vw;
		margin: 1vw 0 0;
	}
	section#tour #upcoming .tix a:hover{
		border: 0.47vw solid var(--beige);
	}
	
/* About */

	.webp section#about{
		width: auto;
		min-height: 100vw;
		margin: 0 0 39.53vw;
		padding: 2vw 8.37vw 0;
		background: url(images/mobile/photo_dan_about.webp) no-repeat center 15vw;
		background-size: 100vw 82.21vw;
	}
	.no-webp section#about,
	.no-js section#about{
		width: auto;
		min-height: 100vw;
		margin: 0 0 39.53vw;
		padding: 2vw 8.37vw 0;
		background: url(images/mobile/photo_dan_about.png) no-repeat center 15vw;
		background-size: 100vw 82.21vw;
	}
	section#about h2{
		margin: 0 0 60vw;
	}
	section#about a{
		color: var(--green);
		text-decoration: underline;
		font-weight: 700;
	}
	section#about a:hover{
		color: var(--beige);
	}

/* Specials */

	section#specials{
		position: relative;
		width: auto;
		min-height: 100vw;
		margin: 0 0 39.53vw;
		padding: 2vw 8.37vw 0;
	}
	section#specials div.cards{
		display: block;
		position: absolute;
		width: 26.61vw;
		height: 39.32vw;
	}
	section#specials div.cards a{
		display: block;
		width: 100%;
		height: 39.32vw;
		text-indent: -9999vw;
		overflow: hidden;
	}
	section#specials div.cards.sonofagary{
		top: 25vw;
	}
	section#specials div.cards.notspecial,
	section#specials div.cards.standups{
		top: 30vw;
	}
	section#specials div.specialinfo {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		row-gap: 4vw;
		margin-top: 54vw;
	}
	section#specials div.specialinfo div{
		text-align: left;
	}
	section#specials div.specialinfo div h5{
		display: block;
		font-family: "fira-sans-2", sans-serif;
		font-size: 2.13em;
		line-height: 1;
		text-transform: uppercase;
		margin: 0 0 3vw;
		color: var(--beige);
	}
	section#specials div.specialinfo div.spec-a h5,
	section#specials div.specialinfo div.spec-c h5{
		font-size: 2.13em;
		margin: 0 0 3vw;
	}
	section#specials div.specialinfo div.spec-a p,
	section#specials div.specialinfo div.spec-c p{
		font-size: 1em;
	}
	a.actionbtn{
		display: block;
		position: relative;
		width: 100%;
		border: 0.47vw solid var(--green);
		font-size: 1em;
		line-height: 1em;
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
		padding: 4vw 0;
		margin: 0 auto 4vw;
	}
	a.actionbtn:hover{
		border: 0.47vw solid var(--beige);
	}

/* Podcasts */
	
	section#podcasts{
		width: auto;
		min-height: 100vw;
		margin: 0 0 39.53vw;
		padding: 0 8.37vw;
	}
	section#podcasts div.show{
		margin: 13.37vw 0 0;
	}
	section#podcasts div.show p{
		padding: 9.3vw 0 0;
	}
	section#podcasts div.show img{
		width: 83.26vw;
		height: 83.26vw;
	}
	section#podcasts div.show img.left,
	section#podcasts div.show img.right{
		float: none;
		margin: 0;
	}
	section#podcasts a.actionbtn{
		display: inline-block;
		width: 100%;
	}
	
/* Contact */

	section#contact{
		width: auto;
		min-height: 100vw;
		margin: 0 0 10vw;
		padding: 0 8.37vw;
	}
	section#contact div.everybody {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		row-gap: 4vw;
		margin: 13.37vw 0 0;
	}
	section#contact div.reps, section#contact div.management{grid-column: 1;}
	
}