/*
Theme Name: GeneratePress
Description: Custom theme for frankdasent.com.au (6 pages: home, bio, original music, freelance work, beats and pieces, contact).
Version: 1.2.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%;height:auto;object-fit:contain}
.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:38px 12px;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}

/* ---------- Media pages (Original music / Freelance work) ---------- */
.container-media{max-width:1010px}
.video-embed{position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:16/9;background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.media-top{margin:0 0 60px}
.media-bottom{margin:10px 0 70px}
.media-stack .video-embed{margin-bottom:56px}
.bandcamp-grid{max-width:712px;margin-left:auto;margin-right:auto}
.bc-embed{width:100%;max-width:350px;margin:0}
.bc-embed iframe{display:block;width:100%;border:0}
.bandcamp-grid .bc-embed{max-width:none}
.media-audio{max-width:350px;margin:10px auto 70px}

/* ---------- 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: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 40px 12vw 70px 78px;
}
.footer-news,
.footer-copy,
.footer-social {
    width: 100%;
    max-width: 500px;
    text-align: left;
}
.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: 0;
    font-size: 14px;
}
.footer-social {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
}
.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 {
        padding-right: var(--pad);
    }
}
@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;max-width:350px;gap:24px}
	.site-footer{padding:30px var(--pad) 60px;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}
}

/* ---------- Album tiles (cover + player) ---------- */
.bc-tile{display:flex;width:100%;max-width:350px;height:90px;border:1px solid #c9c9c9;background:#fff;overflow:hidden}
.bc-cover{display:block;flex:0 0 90px;width:90px;height:90px}
.bc-cover img{display:block;width:90px;height:90px;object-fit:cover}
.bc-player{position:relative;flex:1 1 auto;height:90px;overflow:hidden}
.bc-player iframe{position:absolute;top:0;left:0;width:347px;height:120px;border:0;transform:scale(.75);transform-origin:0 0}
.bandcamp-grid{max-width:712px}

/* ---------- Sticky header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff}
@media (min-width:901px){.site-header{padding-bottom:14px}}
body.admin-bar .site-header{top:32px}
@media (max-width:782px){body.admin-bar .site-header{top:46px}}
html{scroll-padding-top:190px}

/* Clickable album covers */
.bc-cover{cursor:pointer}
.bc-cover img{transition:opacity .2s ease}
.bc-cover:hover img{opacity:.85}

/* ---------- Blinking underscore on page headings ---------- */
.page-title::after{content:"_";display:inline-block;animation:fdBlink .8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.page-title::after,.home-dash{animation:none}}

/* ---------- Native block content (Image / Embed / HTML blocks) ---------- */
.entry .wp-block-image{margin:0 0 55px}
.entry .wp-block-image img{display:block;width:100%;height:auto}
.entry .wp-block-embed{max-width:640px;margin:0 auto 56px}
.entry .wp-block-embed iframe{margin:0;height:100%;aspect-ratio:auto}
.entry .wp-block-embed__wrapper{margin:0}
.entry .bandcamp-grid{margin-top:60px;margin-bottom:70px}
.entry .bc-tile{margin:0 !important}
.entry .bc-tile > *{margin:0 !important}
.entry .bc-tile .bc-cover{flex:0 0 90px;width:90px;height:90px}
.entry .bc-tile .bc-cover img{width:90px;height:90px;object-fit:cover;display:block}
.entry .bc-tile .bc-player iframe[src*="bandcamp"]{position:absolute;top:0;left:0;width:347px;height:120px;margin:0;border:0;transform:scale(.75);transform-origin:0 0}
.entry .media-audio{max-width:350px;margin:10px auto 70px}
.entry .media-audio iframe[src*="bandcamp"]{display:block;width:100%;margin:0}
.home-hero figure{margin:0;height:100%}
.home-hero .wp-block-image{margin:0}
.home-hero .wp-block-image img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}

/* ---------- Testimonials as blocks (full width, editable in page editor) ---------- */
body{overflow-x:hidden}
.entry .testimonials{width:100vw;max-width:none;margin:60px 0 70px calc(50% - 50vw);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px;padding-left:1px}
.entry .testimonials > *{margin-top:0}
.entry .testimonial-card > *{margin-top:0}
.entry .testimonial-card .quote{margin:0 auto}
.entry .testimonial-card h3{margin:0 0 22px}
@media (max-width:900px){.entry .testimonials{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.entry .testimonials{grid-template-columns:1fr;padding-left:0}.entry .testimonial-card{margin-left:0}}

/* ---------- Fix: WordPress wraps group contents in an inner container; let the children use the grid/flex directly ---------- */
.entry .bandcamp-grid > .wp-block-group__inner-container,
.entry .bc-tile > .wp-block-group__inner-container,
.entry .testimonials > .wp-block-group__inner-container,
.entry .testimonial-card > .wp-block-group__inner-container{display:contents}
.entry .bandcamp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 12px;max-width:712px;margin-left:auto;margin-right:auto}
.entry .bc-tile{display:flex;flex-wrap:nowrap;width:100%;max-width:350px;height:90px;overflow:hidden}
.entry .bc-tile > .bc-player{flex:1 1 auto;position:relative;height:90px;overflow:hidden}
.entry .testimonials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
	.entry .bandcamp-grid{grid-template-columns:1fr;max-width:350px;gap:24px}
	.entry .testimonials{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){.entry .testimonials{grid-template-columns:1fr}}