/*
Theme Name: Eastern Sierra WID
Template: twentytwentyfive
Version: 1.0
Text Domain: eswid
Author: Mammoth Lakes Creative
Description: Theme for Eastern Sierra WID site
*/

:root {
	--blue: #0060a3;
	--light-blue: #ccd8ee;
	--red: #df3627;
	--cream: #f9f3db;
}



 @keyframes fadein {
   from {
	 opacity: 0;
   }
   to {
	 opacity: 1;
   }
 }

 /* Global hover transition effect */
button, .transition {
	transition: all 0.3s ease;
  }
  
  


/* Global body + headings */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}


body {
	background-color: var(--cream);
	font-family: "noto-sans-semicondensed", sans-serif;
	font-weight: 400;
	animation: fadein 0.3s ease-in;

}

/* 
html,
body,
.wp-site-blocks {
	overflow-x: clip;
}
*/

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: "noto-sans-semicondensed", sans-serif;
	font-weight: 800;
	color: var(--red);
	text-transform: uppercase;
	margin-top: 4.2rem;
	letter-spacing: 0;

}

a,
a:link,
a:visited,
a:where(:not(.wp-element-button)),
a:where(:not(.wp-element-button)):link,
a:where(:not(.wp-element-button)):visited {
	color: var(--blue);
	text-decoration-line: underline;
	text-decoration-color: var(--light-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
	transition: color 0.3s ease, text-decoration-color 0.3s ease;
	overflow-wrap: anywhere;
	word-break: break-word;
}

a:hover,
a:where(:not(.wp-element-button)):hover {
	color: var(--blue);
	text-decoration-color: var(--blue);
}

strong, b,
.wp-block-button__link {
	font-family: "noto-sans-semicondensed", sans-serif;
	font-weight: 800;

}


 /* -------------------------------------------------------------------------- */
 
 /*	Header 
 
 /* -------------------------------------------------------------------------- */
 
 .h1-title {
	 font-family: "noto-sans-semicondensed", sans-serif;
	 font-weight: 800;
	 color: var(--light-blue);
	 text-transform: uppercase;
	 margin-top: 0;
	 text-decoration: none !important;
 	 border-bottom: none;
	  letter-spacing: 0;

 
 }

.h1-title a,
 .wp-block-site-title a {
	 color: var(--light-blue);
	 -webkit-text-fill-color: var(--light-blue);
	 text-decoration: none !important;
	 border-bottom: none !important;
 }
 
 .h1-title a:hover,
 .wp-block-site-title a:hover,
 .h1-title a:visited,
 .wp-block-site-title a:visited {
	 color: var(--light-blue);
	 -webkit-text-fill-color: var(--light-blue);
	 text-decoration: none !important;
 }
 
.home-image-wrap {
	padding: 16px;
	background: var(--cream);
}

.home-image {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
}

.home-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(5, 0, 0, 0.75) 0%,
		rgba(5, 0, 0, 0.25) 35%,
		rgba(5, 0, 0, 0) 60%
	);
	pointer-events: none;
}


.home-image .wp-block-cover__inner-container {
	width: min(100%, 1200px);
	margin-inline: auto;
	padding-left: 0rem;
	padding-right: 0rem;
	box-sizing: border-box;
	align-items: flex-start;
}

/*
@media (min-width: 768px) {
	.home-image .wp-block-cover__inner-container {
		padding-left: 4rem;
		padding-right: 4rem;
	}
}
*/
.hero-art-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}



 /* -------------------------------------------------------------------------- */
 
 /*	Golden Mussels
 
 /* -------------------------------------------------------------------------- */

.gm-1 {
	--tx: 3rem;
	--base-rot: 10deg;
	--rot: 0deg;	
	--drag-x: 0px;
	--drag-y: 0px;
	display: block;
	width: clamp(240px, 27vw, 330px);
	transform: translateX(var(--tx)) translate(var(--drag-x), var(--drag-y)) rotate(calc(var(--base-rot) + var(--rot)));	
	margin-bottom: -3rem;
	cursor: grab;
	z-index: 3;
	will-change: transform;
}

.gm-2 {
	--tx: 2rem;
	--base-rot: 0deg;
	--rot: 0deg;
	--drag-x: 0px;
	--drag-y: 0px;
	display: block;
	width: clamp(240px, 27vw, 330px);
	transform: translateX(var(--tx)) translate(var(--drag-x), var(--drag-y)) rotate(calc(var(--base-rot) + var(--rot)));
	margin-top: -6rem;
	cursor: grab;
	z-index: 3;
	will-change: transform;
}

.gm-1.is-dragging,
.gm-2.is-dragging {
	cursor: grabbing;
	transition: none;
}

.gm-1,
.gm-2 {
	filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
	pointer-events: auto;
	touch-action: none;
}

.gm-1 img,
.gm-2 img {
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}


.gm-1,
.gm-2 {
	animation: musselIdle 6s ease-in-out infinite;
}

.gm-monster {
	animation: monsterIdle 6s ease-in-out infinite;
}

@keyframes musselIdle {
	0%, 100% { transform: translateX(var(--tx)) translate(var(--drag-x), var(--drag-y)) rotate(calc(var(--base-rot) + var(--rot))); }
	50% { transform: translateX(calc(var(--tx) + 2px)) translate(var(--drag-x), calc(var(--drag-y) - 2px)) rotate(calc(var(--base-rot) + var(--rot) + 1deg)); }
}

@keyframes monsterIdle {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-5px) rotate(0.5deg);
	}
}


.gm-monster {
	display: none;
	--tx: 0px;
	--base-rot: 0deg;
	--rot: 0deg;
	--drag-x: 0px;
	--drag-y: 0px;
}

.gm-monster img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}

@media (min-width: 768px) {
	.hero-art-wrap {
		position: relative;
		display: block;
		width: 100%;
		min-height: 38rem; /* adjust by eye */
	}

	.intro-kicker-wrap {
		position: relative;
		z-index: 2;
		margin-top: 6rem;
		margin-left: 0;
		margin-bottom: 2rem;
	}

	.gm-1,
	.gm-2 {
		display: none;
	}

	.gm-monster {
		display: block;
		position: absolute;
		top: -13rem;
		right: -5.5rem;
		width: min(80%, 850px);
		max-width: 1250px;
		pointer-events: none;
		z-index: 2;
	}

	.gm-monster img {
		display: block;
		width: 100%;
		height: auto;
	}
}


 /* -------------------------------------------------------------------------- */
 
 /*	Headline Don't Move a Mussel!
 
 /* -------------------------------------------------------------------------- */


.intro-kicker-wrap {
	position: relative;
	z-index: 2;
	margin-bottom: 2rem;
}

.intro-kicker {
	display: inline-block;
	width: auto;
	max-width: none;
	margin: 0 0 0.9rem 0;
	background: var(--red);
	padding: 0.64em 1.74em 0.34em 1.28em;
	line-height: 0.82;
}

.intro-kicker em {
	display: inline-block;
	white-space: nowrap;
	font-size: clamp(4rem, 23vw, 9rem);
	font-family: "polka-mn", sans-serif;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	color: var(--cream);
	transform: skewX(-20deg);
	transform-origin: left center;
}


 /* -------------------------------------------------------------------------- */
 
 /*	Intro Paragraph below headline
 
 /* -------------------------------------------------------------------------- */


.intro-paragraph-wrap {
	margin-top: 3rem;
	z-index: 3;

	
}

.intro-paragraph {
	color: var(--cream);
}


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


 /* -------------------------------------------------------------------------- */
 
 /*	Footer
 
 /* -------------------------------------------------------------------------- */
 
 .footer-wrap {
	 padding: 16px;
	 background: var(--cream);
 }
 
.footer,
 .footer > * {
	 border-radius: 8px;
	 overflow: hidden;
 }
 
 
 
 /* -------------------------------------------------------------------------- */
  
  /*	Reduced Motion
  
  /* -------------------------------------------------------------------------- */
 
 
 
 @media (prefers-reduced-motion: reduce) {
	 .gm-1,
	 .gm-2,
	 .gm-monster {
		 animation: none !important;
		 transition: none !important;
	 }
 
	 html {
		 scroll-behavior: auto;
	 }
 }