/*
Theme Name: Frank Dasent
Description: Custom theme for frankdasent.me (6 pages: home, bio, original music, freelance work, beats and pieces, contact).
Version: 1.0.0
Text Domain: frankdasent
*/

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
:root{
	--red:#e60000;
	--ink:#000;
	--pad:clamp(20px,4vw,77px);
	--col1:clamp(110px,9.8vw,189px);
	--navx:calc(var(--pad) + var(--col1));
}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;background:#fff;color:var(--ink);
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:15px;line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link:focus{position:fixed;left:10px;top:10px;width:auto;height:auto;clip:auto;background:#fff;padding:10px;z-index:2000}
.hp{position:absolute!important;left:-9999px;opacity:0;pointer-events:none}

/* ---------- Header ---------- */
.site-header{
	display:grid;
	grid-template-columns:var(--col1) minmax(0,43.6vw) 1fr;
	align-items:start;
	padding:40px var(--pad) 0;
}
.home-link{
	font-size:clamp(20px,1.35vw,26px);font-weight:700;line-height:1.2;
	padding-top:4px;text-transform:uppercase;
}
.home-link:hover{color:var(--red)}
.nav-panel{display:contents}
.nav-list{list-style:none;margin:0;padding:0}
.nav-list a{display:inline-block;font-size:clamp(17px,1.15vw,22px);line-height:1.4;transition:color .25s ease}
.nav-list a:hover,
.nav-list .current-menu-item>a,
.nav-list .current_page_item>a{color:var(--red)}
.top-social{display:flex;gap:21px;flex-wrap:wrap;font-size:clamp(17px,1.15vw,22px);line-height:1.4}
.top-social a{transition:color .25s ease}
.top-social a:hover{color:var(--red)}
.nav-toggle,.nav-close,.nav-backdrop{display:none}

/* ---------- Titles ---------- */
.page-title-wrap{padding:78px 20px 90px var(--navx)}
.page-title{
	margin:0;max-width:42vw;
	font-size:clamp(44px,4.75vw,92px);line-height:1;font-weight:700;
	color:var(--red);text-transform:lowercase;
}
.page-title::after{content:"_"}

/* ---------- Home ---------- */
.home-title-wrap{padding:70px 20px 0 var(--navx);display:flex;align-items:flex-end;flex-wrap:wrap}
.home-title{
	margin:0;font-size:clamp(48px,4.75vw,92px);line-height:1;font-weight:700;
	color:var(--red);text-transform:uppercase;
}
.home-dash{
	display:block;flex-shrink:0;
	width:clamp(50px,4.7vw,90px);height:clamp(5px,.42vw,8px);
	background:var(--red);
	margin:0 0 clamp(14px,1.45vw,28px) clamp(40px,8.4vw,162px);
	animation:fdBlink .8s ease-in-out infinite;
}
@keyframes fdBlink{0%,100%{opacity:1}50%{opacity:0}}
.home-tagline{
	margin:6px 20px 0 calc(var(--navx) + 2px);
	font-size:clamp(18px,1.5vw,28px);line-height:1.3;text-transform:uppercase;
	text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;
}
.home-hero{
	margin-top:30px;height:clamp(300px,33.9vw,651px);
	background:#dadce1;overflow:hidden;
}
.home-hero img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}

/* ---------- Inner pages ---------- */
.container-narrow{max-width:895px;margin:0 auto;padding:0 20px}
.page-hero-img{margin:0 0 55px;overflow:hidden}
.page-hero-img img{display:block;width:100%;aspect-ratio:855/400;object-fit:cover}
.entry{margin-bottom:70px}
.entry p{margin:0 0 22px}
.entry h2{
	margin:0 0 40px;font-size:clamp(20px,1.5vw,28px);font-weight:400;line-height:1.3;
	text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;
}
.entry a{text-decoration:underline}
.two-col{
	display:grid;
	grid-template-columns:minmax(0,575px) minmax(0,1fr);
	column-gap:clamp(30px,6.5vw,124px);
	align-items:start;
}
.col-side p{margin:0 0 22px}
.reach-out{display:flex;align-items:center;gap:6px;margin:0 0 22px}
.reach-out a{display:inline-flex;text-decoration:none}
.reach-out svg{display:block;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.reach-out a:hover svg{transform:scale(1.2) rotate(-8deg)}
.lead{font-size:clamp(18px,1.35vw,24px);line-height:1.3;margin:0}
.contact-intro{align-items:center}

/* Embeds (Vimeo / YouTube) */
.entry iframe,
.entry .wp-block-embed,
.entry .wp-block-embed__wrapper{max-width:100%}
.entry iframe[src*="vimeo"],
.entry iframe[src*="youtube"],
.entry iframe[src*="youtu.be"]{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;margin:0 0 60px}
/* Bandcamp players in two columns */
.bandcamp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px;margin:0 0 70px}
.bandcamp-grid iframe{display:block;width:100%;height:120px;border:0}
.entry iframe[src*="bandcamp"]{display:block;width:100%;border:0;margin:0 0 20px}

/* ---------- Testimonials ---------- */
.testimonials{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
	row-gap:14px;padding-left:1px;margin:0 0 70px;
}
.testimonial-card{
	border:1px solid #000;margin-left:-1px;
	padding:34px 30px 40px;min-height:364px;text-align:center;
	transition:background .35s ease,transform .35s ease,box-shadow .35s ease;
}
.testimonial-card:hover{background:#fafafa;box-shadow:0 14px 28px -16px rgba(0,0,0,.35);position:relative;z-index:1}
.testimonial-card::before{
	content:"\201C";display:block;
	font:900 110px/1 Arial,Helvetica,sans-serif;color:var(--red);
	height:78px;overflow:hidden;margin:0 0 20px;
}
.testimonial-card h3{margin:0 0 22px;font-size:13px;line-height:1.9;font-weight:700}
.testimonial-card .quote{max-width:275px;margin:0 auto;text-align:left;font-style:italic;font-size:12.5px;line-height:1.4}
.testimonial-card .quote p{margin:0}

/* ---------- Contact form ---------- */
.contact-form-wrap{margin-bottom:80px}
.field{margin-bottom:14px}
.field label{display:block;margin:0 0 6px;font-size:20px;font-weight:700;line-height:1.2}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea,
.nl-form input[type=email],
.nl-cf7 input[type=text],
.nl-cf7 input[type=email]{
	width:100%;height:41px;padding:0 12px;
	border:2px solid #000;border-radius:0;background:#fff;
	font:inherit;color:#000;outline:0;transition:border-color .25s ease,box-shadow .25s ease;
}
.contact-form textarea{height:90px;padding:10px 12px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus,
.nl-form input[type=email]:focus,.nl-cf7 input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(230,0,0,.12)}
.btn-submit,
.nl-row button,
.nl-cf7 input[type=submit],
.nl-cf7 button{
	display:block;border:0;border-radius:0;background:#000;color:#fff;
	font:inherit;font-size:15px;cursor:pointer;height:41px;
	transition:background .25s ease,transform .25s ease;
}
.btn-submit{width:100%;margin-top:14px}
.btn-submit:hover,.nl-row button:hover,.nl-cf7 input[type=submit]:hover{background:var(--red)}
.form-notice{margin:0 0 18px;padding:10px 14px;font-size:15px;border:2px solid #000}
.form-notice.ok{border-color:#0a7d2c;color:#0a7d2c}
.form-notice.err{border-color:var(--red);color:var(--red)}

/* ---------- Footer ---------- */
.site-footer{
	display:grid;
	grid-template-columns:minmax(0,500px) 1fr auto;
	column-gap:81px;align-items:start;
	padding:40px 12vw 70px 78px;
}
.footer-news h2{margin:0 0 28px;font-size:clamp(20px,1.25vw,24px);font-weight:400;line-height:1.2}
.nl-form label[for=nl-email]{display:block;font-size:13px;margin:0 0 6px}
.nl-form input[type=email]{height:42px}
.nl-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:22px}
.nl-row .check{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.3;padding-top:2px;cursor:pointer}
.nl-row .check input{width:17px;height:17px;margin:0;accent-color:#000;flex-shrink:0}
.nl-row button{width:151px;flex-shrink:0;margin-top:-12px}
.footer-copy{margin:4px 0 0;font-size:14px}
.footer-social{display:flex;gap:4px}
.footer-social a{display:inline-flex;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.footer-social a:hover{transform:translateY(-4px) scale(1.1)}
.nl-cf7 .wpcf7-form p{margin:0 0 14px}
.nl-cf7 input[type=submit]{width:151px}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
	.site-footer{grid-template-columns:minmax(0,500px) 1fr;padding-right:var(--pad)}
	.footer-social{grid-column:1 / -1;margin-top:34px}
}
@media (max-width:991px){
	.testimonials{grid-template-columns:repeat(2,minmax(0,1fr))}
	.page-title{max-width:70vw}
}

/* ---------- Mobile: hamburger + right-side overlay with red X ---------- */
@media (max-width:900px){
	:root{--col1:0px}
	.site-header{display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad)}
	.page-title-wrap{padding:40px 20px 50px var(--pad)}
	.home-title-wrap{padding:40px 20px 0 var(--pad)}
	.home-tagline{margin-left:var(--pad)}
	.page-title{max-width:100%}

	.nav-toggle{display:block;position:relative;width:44px;height:40px;padding:8px;border:0;background:none;cursor:pointer}
	.nav-toggle span{display:block;height:3px;margin:6px 0;background:#000;transition:background .25s ease}
	.nav-toggle:hover span{background:var(--red)}

	.nav-backdrop{
		display:block;position:fixed;inset:0;z-index:1000;
		background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .35s ease;
	}
	body.menu-open .nav-backdrop{opacity:1;pointer-events:auto}

	.nav-panel{
		display:flex;flex-direction:column;
		position:fixed;top:0;right:0;z-index:1001;
		width:min(340px,86vw);height:100%;
		padding:96px 32px 32px;background:#fff;overflow-y:auto;
		transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);
		box-shadow:-20px 0 40px -20px rgba(0,0,0,.35);
	}
	body.menu-open .nav-panel{transform:none}
	body.menu-open{overflow:hidden}

	.nav-close{
		display:block;position:absolute;top:14px;right:18px;
		border:0;background:none;cursor:pointer;
		font-size:52px;line-height:1;color:var(--red);padding:4px 10px;
		transition:transform .3s ease;
	}
	.nav-close:hover{transform:rotate(90deg)}
	.nav-list a{font-size:28px;line-height:1.55}
	.top-social{margin-top:34px;font-size:20px;gap:18px}

	.two-col{grid-template-columns:1fr;row-gap:10px}
	.page-hero-img{margin-bottom:34px}
	.bandcamp-grid{grid-template-columns:1fr}
	.site-footer{grid-template-columns:1fr;padding:30px var(--pad) 60px;row-gap:26px}
	.footer-social{margin-top:0}
	.nl-row{flex-direction:column;gap:16px}
	.nl-row button{margin-top:0}
}
@media (max-width:600px){
	.testimonials{grid-template-columns:1fr}
	.testimonial-card{margin-left:0}
	.testimonials{padding-left:0}
	.field label{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
	*{animation:none!important;transition:none!important}
}