/*
Theme Name:   Klikit
Theme URI:    https://klikit.link/
Description:  The Klikit site theme: header, footer, landing, sign-up and log-in screens in the same design language as Klikit artist pages. Made for the Klikit Pages plugin.
Version:      1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Author:       Dapstrem LLC
License:      GPL-2.0-or-later
Text Domain:  klikit-theme
*/

:root{
	--kt-accent:#daea49;
	--kt-ink:#000;
	--kt-muted:#4b5563;
	--kt-soft:#6b7280;
	--kt-line:#e5e7eb;
	--kt-line-2:#f3f4f6;
	--kt-alt:#f4f4f5;
	--kt-header:61px;
	--f-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	--f-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
	--f-display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--kt-header);-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--kt-ink);font:16px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased}
img,video,iframe{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid #000;outline-offset:3px}
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kt-container{width:100%;max-width:1280px;margin:0 auto;padding:0 48px}
.kt-narrow{max-width:820px}
.kt-eyebrow{display:block;margin:0 0 12px;font:700 12px/16px var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--kt-muted)}
.kt-lead{margin:0 0 32px;font-size:18px;color:var(--kt-muted)}
.kt-muted{color:var(--kt-muted)}
.kt-skip{position:absolute;left:-9999px;top:8px;z-index:200;padding:10px 16px;background:#000;color:#fff}
.kt-skip:focus{left:8px}

/* ---------- Buttons ---------- */
.kt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border:0;border-radius:999px;background:#000;color:#fff;font:700 12px/16px var(--f-mono);letter-spacing:.15em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.kt-btn:hover{background:var(--kt-accent);color:#000}
.kt-btn-accent{background:var(--kt-accent);color:#000}
.kt-btn-accent:hover{background:#fff}
.kt-btn-lg{padding:16px 28px;font-size:14px}
.kt-btn-ghost{background:#fff;color:#000;box-shadow:inset 0 0 0 1.5px #000}
.kt-link{font:700 12px/16px var(--f-mono);letter-spacing:.15em;text-transform:uppercase;text-decoration:none}
.kt-link:hover{opacity:.55}

/* ---------- Header (same layout as artist pages) ---------- */
.kt-header{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;height:var(--kt-header);padding:0 40px;background:#fff;border-bottom:1px solid var(--kt-line-2)}
.admin-bar .kt-header{top:32px}
@media (max-width:782px){.admin-bar .kt-header{top:46px}}
.kt-menu{display:flex;gap:40px;margin:0;padding:0;list-style:none}
.kt-nav .kt-menu a{font:700 14px/20px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:opacity .15s}
.kt-nav .kt-menu a:hover{opacity:.55}
.kt-nav .kt-menu a.is-active,.kt-nav .kt-menu .current-menu-item>a{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--kt-accent);text-underline-offset:6px}
.kt-brand{position:absolute;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;text-decoration:none;color:#000}
.kt-name{font:700 24px/32px var(--f-mono);letter-spacing:.25em;padding-left:.25em;text-transform:uppercase;white-space:nowrap}
.kt-logo-img{height:34px;width:auto}
.kt-actions{display:flex;align-items:center;gap:20px}
.kt-toggle{display:none;position:relative;width:32px;height:32px;margin-left:-4px;padding:0;border:0;background:none;cursor:pointer}
.kt-toggle span{position:absolute;left:5px;right:5px;height:2px;border-radius:2px;background:#000}
.kt-toggle span:nth-child(1){top:9px}
.kt-toggle span:nth-child(2){top:15px}
.kt-toggle span:nth-child(3){top:21px}

/* Full-screen menu (phones) */
.kt-panel{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;padding:20px 24px 32px;background:#000;color:#fff;transform:translateY(-100%);visibility:hidden;transition:transform .5s cubic-bezier(.76,0,.24,1),visibility 0s .5s}
.kt-panel.is-open{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.76,0,.24,1)}
.kt-panel-head{display:flex;justify-content:space-between;align-items:center;font:700 14px var(--f-mono);letter-spacing:.2em}
.kt-close{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.kt-close svg{width:22px;height:22px}
.kt-panel-links{margin:auto 0}
.kt-panel-links .kt-menu{flex-direction:column;gap:8px}
.kt-panel-links a{font:400 clamp(44px,13vw,72px)/1.05 var(--f-display);text-transform:uppercase;text-decoration:none}
.kt-panel-links a:hover{color:var(--kt-accent)}
.kt-panel-actions{display:flex;flex-direction:column;align-items:stretch;gap:16px;text-align:center}
.kt-panel-actions .kt-btn{padding:16px;font-size:14px}

/* ---------- Main ---------- */
.kt-main{display:block;min-height:60vh}

/* Plain pages & posts */
.kt-page{padding:96px 0 112px}
.kt-page-head{margin-bottom:40px}
.kt-page-head h1{margin:0;font:400 clamp(48px,7vw,96px)/1 var(--f-display);letter-spacing:-.01em;text-transform:uppercase}
.kt-featured{margin-bottom:40px}
.kt-featured img{border-radius:16px}
.kt-prose{font-size:18px;line-height:1.75}
.kt-prose>*:first-child{margin-top:0}
.kt-prose h2{margin:56px 0 12px;font:400 40px/1.1 var(--f-display);text-transform:uppercase}
.kt-prose h3{margin:40px 0 8px;font:400 28px/1.15 var(--f-display);text-transform:uppercase}
.kt-prose a{text-decoration-color:var(--kt-accent);text-decoration-thickness:2px;text-underline-offset:3px}
.kt-prose img{border-radius:12px}
.kt-prose blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:4px solid var(--kt-accent);font-size:22px}
.kt-prose pre,.kt-prose code{background:var(--kt-alt);border-radius:8px;font:.9em var(--f-mono)}
.kt-prose code{padding:2px 6px}
.kt-prose pre{padding:16px;overflow:auto}
.kt-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:32px 24px}
.kt-post-card{display:flex;flex-direction:column;color:#000;text-decoration:none}
.kt-post-img{display:block;margin-bottom:16px;border-radius:12px;overflow:hidden;background:var(--kt-alt)}
.kt-post-img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s}
.kt-post-card:hover .kt-post-img img{transform:scale(1.04)}
.kt-post-body{display:flex;flex-direction:column;gap:6px}
.kt-post-body .kt-eyebrow{margin:0}
.kt-post-body strong{font:400 26px/1.15 var(--f-display);text-transform:uppercase}
.kt-post-card:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--kt-accent)}
.kt-post-body>span:last-child{color:var(--kt-muted);font-size:15px}
.kt-pagination{margin-top:56px}
.kt-pagination .nav-links{display:flex;gap:8px;justify-content:center}
.kt-pagination .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border-radius:999px;font:700 13px var(--f-mono);text-decoration:none;box-shadow:inset 0 0 0 1px var(--kt-line)}
.kt-pagination .current{background:#000;color:#fff;box-shadow:none}

/* 404 */
.kt-404{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - var(--kt-header));padding:96px 16px;background:radial-gradient(60% 55% at 50% 50%,#262626,#000 75%);color:#fff;text-align:center;max-width:none}
.kt-404 .kt-eyebrow{color:#9ca3af;letter-spacing:.6em}
.kt-404 h1{margin:0 0 20px;font:400 clamp(48px,10vw,140px)/.9 "DM Serif Display",Georgia,serif;letter-spacing:-.03em;text-transform:uppercase;overflow-wrap:anywhere}
.kt-404 .kt-lead{color:#d1d5db}
.kt-404-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.kt-404 .kt-btn-primary{background:var(--kt-accent);color:#000}
.kt-404 .kt-btn-primary:hover{background:#fff}
.kt-404 .kt-btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff}

/* Sign-up / log-in screens */
.kt-auth{background:var(--kt-alt)}
.kt-auth-wrap{display:grid;place-items:center;min-height:calc(100vh - var(--kt-header) - 300px);padding:72px 16px 96px}
.kt-auth-wrap>*{width:100%}

/* ---------- Footer (same as artist pages) ---------- */
.kt-footer{display:flex;flex-direction:column;align-items:center;padding:80px 16px 40px;background:#0a0a0a;color:#fff;text-align:center}
.kt-footer-name{margin:0 0 40px;font:900 80px/1 Impact,var(--f-display);letter-spacing:.02em}
.kt-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;margin-bottom:48px}
.kt-footer-links a{font:700 12px/16px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:#fff;transition:color .2s}
.kt-footer-links a:hover{color:var(--kt-accent)}
.kt-footer-links li{list-style:none}
.kt-footer-legal{display:flex;flex-direction:column;align-items:center;gap:8px}
.kt-footer-legal p{margin:0;font:700 13px/19.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#9ca3af}
.kt-footer-legal .kt-powered{font:700 10px/15px var(--f-sans);color:rgba(156,163,175,.8)}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
	.kt-nav{display:none}
	.kt-toggle{display:block}
	.kt-container{padding:0 32px}
}
@media (max-width:767px){
	:root{--kt-header:49px}
	.kt-header{padding:0 20px}
	.kt-name{font-size:18px}
	.kt-actions .kt-link{display:none}
	.kt-actions .kt-btn{padding:7px 12px;font-size:10px}
	.kt-container{padding:0 20px}
	.kt-page{padding:64px 0 80px}
	.kt-footer{padding:64px 16px 40px}
	.kt-footer-name{font-size:11vw;margin-bottom:32px}
	.kt-footer-links{gap:12px 20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}