/*
Theme Name: Jeff Kollman
Theme URI: https://jeffkollman.com
Author: THECOMISSION
Author URI: https://thecomission.com
Description: The official home of recording artist Jeff Kollman — a page-builder-free news/artist site built to match its live design, sharing brand DNA with the Kollmanation store at kollmanation.com.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jeffkollman-theme
Tags: blog, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
	--jk-ink:        #171717;
	--jk-ink-soft:   #3a3a3a;
	--jk-muted:      #8a8a8a;
	--jk-line:       #e4e4e4;
	--jk-bg:         #ffffff;
	--jk-bg-alt:     #f4f4f4;
	--jk-dark:       #0a0a0a;
	--jk-dark-soft:  #141414;
	--jk-on-dark:    #f5f5f5;
	--jk-on-dark-muted: #b0b0b0;
	--jk-accent:     #ab2424;
	--jk-accent-bright: #d34949;

	--jk-radius-sm:  6px;
	--jk-radius:     10px;
	--jk-radius-lg:  16px;
	--jk-radius-pill: 50px;

	--jk-font:         'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* Archivo Narrow -- same display face kollmanation.com uses -- for
	   every heading. Rubik Dirt's rough/distressed glyph texture reads as
	   broken chromatic-fringing at anything smaller than a big hero
	   headline, so it's reserved for --jk-font-hero, used only there. */
	--jk-font-display: 'Archivo Narrow', 'Inter', -apple-system, sans-serif;
	--jk-font-hero:    'Rubik Dirt', 'Archivo Narrow', sans-serif;
	--jk-container:  1200px;
	--jk-container-narrow: 760px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0; font-family:var(--jk-font); color:var(--jk-ink); background:var(--jk-bg);
	font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--jk-font-display); font-weight:700; line-height:1.15; margin:0 0 16px; }
.jk-container{ max-width:var(--jk-container); margin:0 auto; padding:0 24px; }
.jk-container--narrow{ max-width:var(--jk-container-narrow); }

.jk-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	padding:16px 28px; border-radius:var(--jk-radius-sm); font-weight:700; font-size:14px;
	text-transform:uppercase; letter-spacing:.04em; border:none; cursor:pointer;
	background:var(--jk-accent); color:#fff; transition:background .2s ease, transform .15s ease;
}
.jk-btn:hover{ background:var(--jk-accent-bright); transform:translateY(-1px); }
.jk-btn--outline{ background:transparent; border:2px solid var(--jk-accent); color:var(--jk-accent); }
.jk-btn--outline:hover{ background:var(--jk-accent); color:#fff; }
.jk-btn--dark{ background:var(--jk-dark); }
.jk-btn--dark:hover{ background:#2a2a2a; }

/* ==========================================================================
   Header
   ========================================================================== */
.jk-header{
	position:sticky; top:0; z-index:100; background:var(--jk-dark); color:var(--jk-on-dark);
}
.jk-header__bar{
	display:flex; align-items:center; justify-content:space-between; gap:24px;
	padding:18px 24px; max-width:var(--jk-container); margin:0 auto;
}
.jk-logo{ font-family:var(--jk-font-display); font-size:22px; letter-spacing:.02em; color:#fff; }
.jk-nav{ display:flex; align-items:center; gap:28px; }
.jk-nav ul{ display:flex; gap:28px; }
.jk-nav a{
	font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--jk-on-dark-muted);
	transition:color .2s ease;
}
.jk-nav a:hover{ color:#fff; }
.jk-header__actions{ display:flex; align-items:center; gap:12px; }
.jk-icon-btn{
	display:flex; align-items:center; justify-content:center; width:36px; height:36px;
	border-radius:50%; background:rgba(255,255,255,.08); color:#fff; transition:background .2s ease, color .2s ease;
}
.jk-icon-btn:hover{ background:var(--jk-accent); color:#fff; }
.jk-burger{
	display:none; background:none; border:none; color:#fff; cursor:pointer; padding:6px;
}
.jk-mobile-nav{
	position:fixed; top:0; right:-320px; width:300px; height:100%; background:var(--jk-dark-soft);
	z-index:200; padding:80px 28px 28px; transition:right .3s ease; overflow-y:auto;
}
.jk-mobile-nav.is-open{ right:0; }
.jk-mobile-nav ul{ display:flex; flex-direction:column; gap:22px; }
.jk-mobile-nav a{ font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#fff; }
.jk-mobile-nav__close{
	position:absolute; top:24px; right:24px; background:none; border:none; color:#fff; cursor:pointer;
}
.jk-mobile-nav-backdrop{
	position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:150; opacity:0; visibility:hidden;
	transition:opacity .3s ease, visibility .3s ease;
}
.jk-mobile-nav-backdrop.is-open{ opacity:1; visibility:visible; }
@media (max-width:860px){
	.jk-nav ul{ display:none; }
	.jk-burger{ display:block; }
}

/* ==========================================================================
   Hero (front page)
   ========================================================================== */
.jk-hero{
	position:relative; min-height:640px; display:flex; align-items:center; justify-content:center;
	text-align:center; background-size:cover; background-position:center 30%; color:#fff;
}
.jk-hero::before{
	/* The hero photo itself is already a stylized red/dark treatment --
	   just a bottom-darkening pass here so the CTA buttons still have
	   guaranteed contrast, not a full vignette stacked on top of one the
	   image already has. */
	content:''; position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(5,0,0,.05) 0%, rgba(5,0,0,.35) 65%, rgba(5,0,0,.7) 100%);
}
.jk-hero__inner{ position:relative; z-index:1; padding:40px 24px; }
.jk-hero__title{
	font-family:var(--jk-font-hero); font-weight:400; text-transform:uppercase;
	font-size:clamp(38px, 7vw, 68px); color:#fff;
	text-shadow:0 2px 6px rgba(0,0,0,.85), 0 10px 30px rgba(0,0,0,.6);
	margin-bottom:32px;
}
.jk-hero__sub{ font-size:16px; color:var(--jk-on-dark-muted); max-width:480px; margin:0 auto 32px; }
.jk-hero__actions{ display:flex; flex-direction:column; gap:14px; align-items:center; }
.jk-hero__actions .jk-btn{ min-width:280px; }

/* Shop portal category cards */
.jk-shop-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:24px; }
.jk-shop-card{ position:relative; border-radius:var(--jk-radius-lg); overflow:hidden; aspect-ratio:1/1; display:flex; align-items:flex-end; }
.jk-shop-card__img{
	position:absolute; inset:0; background-size:cover; background-position:center; background-color:var(--jk-bg-alt);
	transition:transform .3s ease;
}
.jk-shop-card:hover .jk-shop-card__img{ transform:scale(1.06); }
.jk-shop-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.75) 100%); }
.jk-shop-card__label{
	position:relative; z-index:1; padding:20px; font-family:var(--jk-font-display); font-size:20px; color:#fff;
}

/* ==========================================================================
   Section heading
   ========================================================================== */
.jk-section{ padding:72px 0; }
.jk-section--dark{ background:var(--jk-dark); color:var(--jk-on-dark); }
.jk-section__title{
	text-align:center; font-size:clamp(30px, 5vw, 44px); color:var(--jk-accent); margin-bottom:40px;
}
.jk-section--dark .jk-section__title{ color:#fff; }
.jk-section__cta{ text-align:center; margin-top:36px; }

/* ==========================================================================
   News grid
   ========================================================================== */
.jk-news-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:32px; }
.jk-news-card{ display:flex; flex-direction:column; }
.jk-news-card__thumb{ position:relative; border-radius:var(--jk-radius); overflow:hidden; aspect-ratio:16/10; background:var(--jk-bg-alt); margin-bottom:16px; }
.jk-news-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.jk-news-card__badge{
	position:absolute; top:12px; right:12px; background:var(--jk-accent); color:#fff; font-size:11px; font-weight:800;
	text-transform:uppercase; letter-spacing:.05em; padding:6px 12px; border-radius:var(--jk-radius-pill);
}
.jk-news-card__title{ font-family:var(--jk-font); font-size:19px; font-weight:700; margin:0 0 8px; line-height:1.35; }
.jk-news-card__title a:hover{ color:var(--jk-accent); }
.jk-news-card__meta{ font-size:13px; color:var(--jk-muted); margin-bottom:10px; }
.jk-news-card__more{ font-size:13px; font-weight:800; color:var(--jk-accent); text-transform:uppercase; letter-spacing:.05em; }

/* ==========================================================================
   Releases strip
   ========================================================================== */
.jk-releases{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:28px; margin-bottom:40px; }
.jk-releases img{ border-radius:var(--jk-radius-sm); box-shadow:0 20px 50px rgba(0,0,0,.4); }

/* ==========================================================================
   Music / discography grid
   ========================================================================== */
.jk-discog-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:32px; }
.jk-discog-card{ text-align:center; }
.jk-discog-card__art{ display:block; border-radius:var(--jk-radius); overflow:hidden; margin-bottom:16px; aspect-ratio:1/1; background:var(--jk-bg-alt); }
.jk-discog-card__art img{ width:100%; height:100%; object-fit:cover; }
.jk-discog-card__title{ font-family:var(--jk-font); font-size:16px; font-weight:700; margin-bottom:14px; }

/* ==========================================================================
   Social carousel — one contained component on the page's white
   background (not full-bleed color): tab buttons up top, a single
   horizontally-sliding track below. Each platform keeps its own colored
   panel, but only one shows at a time -- clicking a tab or an arrow
   slides the track to it in place, no page scrolling.
   ========================================================================== */
.jk-social{ background:var(--jk-bg); padding:72px 0; }
.jk-social-carousel{ max-width:1000px; margin:0 auto; }
.jk-social-carousel__tabs{
	display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:32px;
}
.jk-social-carousel__tab{
	width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	background:var(--tab-color); color:#fff; border:3px solid transparent; cursor:pointer; padding:0;
	transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.jk-social-carousel__tab:hover{ transform:translateY(-3px); }
.jk-social-carousel__tab.is-active{
	border-color:var(--jk-ink); box-shadow:0 4px 14px rgba(0,0,0,.25); transform:scale(1.08);
}
.jk-social-carousel__viewport{
	position:relative; border-radius:var(--jk-radius-lg); overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.jk-social-carousel__track{ display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1); }
.jk-social-panel{
	flex:0 0 100%; width:100%; min-height:460px; color:#fff; display:flex; justify-content:center; align-items:center;
}
.jk-social-panel__inner{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
	max-width:900px; width:100%; padding:56px 24px;
}
.jk-social-panel__media{ flex:1 1 420px; padding:24px; display:flex; align-items:center; justify-content:center; }
.jk-social-panel__info{ flex:1 1 320px; padding:24px 40px; text-align:center; }
.jk-social-panel__eyebrow{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; opacity:.75; margin-bottom:6px; }
.jk-social-panel__title{ font-family:var(--jk-font-display); font-size:34px; color:#fff; margin-bottom:0; }
@media (min-width:701px){
	.jk-social-panel__info{ text-align:right; }
}
.jk-social-carousel__arrow{
	position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
	background:rgba(255,255,255,.2); border:none; display:flex; align-items:center; justify-content:center;
	color:#fff; font-size:22px; line-height:1; cursor:pointer; transition:background .2s ease;
}
.jk-social-carousel__arrow:hover{ background:rgba(255,255,255,.35); }
.jk-social-carousel__arrow--prev{ left:16px; }
.jk-social-carousel__arrow--next{ right:16px; }
.jk-social-embed{ width:100%; max-width:500px; }
.jk-social-embed iframe{ width:100%; border:none; border-radius:var(--jk-radius); }
.jk-social-cta{
	display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.15); padding:14px 26px;
	border-radius:var(--jk-radius-pill); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.05em;
	transition:background .2s ease;
}
.jk-social-cta:hover{ background:rgba(255,255,255,.28); }
@media (max-width:600px){
	.jk-social-carousel__arrow{ width:36px; height:36px; font-size:18px; }
	.jk-social-panel__inner{ padding:40px 20px; }
}

/* ==========================================================================
   Footer -- mirrors kollmanation.com's footer structure/tokens.
   ========================================================================== */
.jk-footer{ background:var(--jk-dark); color:var(--jk-on-dark-muted); padding:64px 0 24px; }
.jk-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08); }
.jk-footer h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.jk-footer ul li{ margin-bottom:10px; }
.jk-footer a:hover{ color:#fff; }
.jk-footer__brand .jk-logo{ font-size:22px; margin-bottom:14px; display:inline-block; }
.jk-footer__brand p{ color:var(--jk-on-dark-muted); font-size:13.5px; max-width:280px; margin-bottom:20px; }
.jk-footer__social{ display:flex; gap:10px; }
.jk-icon-btn{
	width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center;
	justify-content:center; color:#fff; transition:background .2s ease;
}
.jk-icon-btn:hover{ background:rgba(255,255,255,.2); }
.jk-newsletter{ display:flex; gap:8px; }
.jk-newsletter input{
	flex:1; border:1px solid rgba(255,255,255,.15); border-radius:var(--jk-radius-sm); padding:11px 14px;
	background:rgba(255,255,255,.06); color:#fff; font-family:var(--jk-font); font-size:13px;
}
.jk-newsletter input::placeholder{ color:var(--jk-on-dark-muted); }
.jk-btn--light{ background:#fff; color:var(--jk-ink); padding:11px 18px; }
.jk-btn--light:hover{ background:var(--jk-bg-alt); }
.jk-contact__notice{ padding:10px 14px; border-radius:var(--jk-radius-sm); font-size:13px; margin-bottom:14px; }
.jk-contact__notice--success{ background:rgba(90,200,120,.18); color:#8fe0a8; }
.jk-contact__notice--error{ background:rgba(224,69,91,.18); color:#f0908f; }
.jk-footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:20px; font-size:12px; }
@media (max-width:860px){
	.jk-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
	.jk-footer__grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Generic content page (About, etc.)
   ========================================================================== */
.jk-page{ padding:56px 0 80px; }
.jk-page__title{ font-size:clamp(28px, 5vw, 40px); color:var(--jk-accent); margin-bottom:8px; }
.jk-page__eyebrow{ font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--jk-muted); margin-bottom:28px; }
/* Generic pages (About) sit in the same width container as every other
   page now, but long-form prose still reads better narrower -- cap the
   content column itself rather than the whole page. */
.jk-page__content{ max-width:760px; margin:0 auto; }
.jk-page__content p{ margin:0 0 20px; color:var(--jk-ink-soft); }
.jk-page__content a{ color:var(--jk-accent); text-decoration:underline; text-decoration-color:rgba(171,36,36,.35); }
.jk-page__content a:hover{ text-decoration-color:var(--jk-accent); }
/* Bio photo floats so the name/title and the biography paragraphs that
   follow wrap around it, instead of sitting in a separate row above the
   full-width text. */
.jk-bio-photo{ float:left; width:200px; height:auto; margin:0 28px 16px 0; border-radius:var(--jk-radius); }
.jk-page__content h2{ margin:0 0 6px; }
.jk-bio-header__title{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--jk-muted); margin:0 0 20px; }
@media (max-width:480px){
	.jk-bio-photo{ float:none; display:block; margin:0 auto 20px; }
}
.jk-page__content blockquote{ border-left:3px solid var(--jk-accent); margin:28px 0; padding:4px 0 4px 20px; font-style:italic; color:var(--jk-ink); }

/* ==========================================================================
   Single post (News)
   ========================================================================== */
.jk-post{ padding:56px 0 80px; max-width:var(--jk-container-narrow); margin:0 auto; }
.jk-post__thumb{ border-radius:var(--jk-radius-lg); overflow:hidden; margin-bottom:32px; }
.jk-post__title{ font-size:clamp(26px, 4vw, 36px); margin-bottom:12px; }
.jk-post__meta{ font-size:13px; color:var(--jk-muted); margin-bottom:32px; }
.jk-post__content p{ margin:0 0 20px; }
.jk-post__back{ display:inline-block; margin-top:32px; font-weight:800; text-transform:uppercase; font-size:13px; color:var(--jk-accent); }