/*
Theme Name: Sckan
Theme URI: https://sckan.me/
Author: Sckan.Me
Description: Lightweight theme for the Sckan QR generator. Provides a clean header/footer shell, a full-width generator template, and a My Codes page. Designed to pair with the Sckan QR plugin.
Version: 2.7.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sckan
*/

/* Base tokens */
:root {
	--sk-bg: #ffffff;
	--sk-ink: #1f2430;
	--sk-muted: #667085;
	--sk-border: #e4e7ec;
	--sk-accent: #6a5cff;
	--sk-accent-2: #00c2b8;
	--sk-max: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--sk-ink);
	background: var(--sk-bg);
	line-height: 1.5;
}
a { color: var(--sk-accent); }
img { max-width: 100%; height: auto; }

.sk-container { max-width: var(--sk-max); margin: 0 auto; padding: 0 1.25rem; }

/* Accessibility: skip link + visible keyboard focus */
.sk-skip {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--sk-accent); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0; font-weight: 700;
}
.sk-skip:focus { left: 0; }
#sk-main:focus { outline: none; }
.sk-header a:focus-visible, .sk-footer a:focus-visible, .sk-btn:focus-visible, a:focus-visible {
	outline: 2px solid var(--sk-accent); outline-offset: 2px; border-radius: 4px;
}

/* Header */
.sk-header {
	border-bottom: 1px solid var(--sk-border);
	background: rgba( 255, 255, 255, .9 );
	backdrop-filter: saturate( 180% ) blur( 8px );
	position: sticky; top: 0; z-index: 50;
}
.sk-header-inner { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 64px; flex-wrap: wrap; }
.sk-brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; color: var(--sk-ink); text-decoration: none; }
.sk-brand-mark {
	width: 30px; height: 30px; border-radius: 8px;
	background: linear-gradient( 135deg, var(--sk-accent), var(--sk-accent-2) );
	display: inline-block;
}
.sk-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.sk-nav a { color: var(--sk-muted); text-decoration: none; font-weight: 600; font-size: .92rem; }
.sk-nav a:hover { color: var(--sk-ink); }
.sk-btn {
	display: inline-block; padding: .5rem .9rem; border-radius: 8px; font-weight: 700; font-size: .9rem;
	text-decoration: none; border: 1px solid var(--sk-border); color: var(--sk-ink); background: #fff;
}
.sk-btn-primary { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }

/* Layout */
.sk-main { padding: 2.5rem 0 3.5rem; }
.sk-page-narrow { max-width: 760px; margin: 0 auto; }
.sk-entry-title { font-size: clamp( 1.8rem, 4vw, 2.6rem ); margin: 0 0 1rem; }
.sk-content :where( h2, h3 ) { margin-top: 2rem; }
.sk-content img { border-radius: 12px; }

/* Event page */
.sk-event { max-width: 820px; padding-top: 1.5rem; padding-bottom: 3rem; }
.sk-ev-poster img { width: 100%; height: auto; border-radius: 14px; display: block; box-shadow: 0 10px 30px rgba(16,24,40,.12); }
.sk-ev-head { margin: 1.5rem 0; }
.sk-ev-title { font-size: clamp( 1.8rem, 4vw, 2.6rem ); margin: 0 0 .5rem; }
.sk-ev-when, .sk-ev-loc { margin: .25rem 0; color: var(--sk-ink); font-weight: 600; }
.sk-ev-loc a { color: var(--sk-accent); text-decoration: none; }
.sk-ev-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.sk-ev-actions-bottom { margin-top: 2rem; }
.sk-ev-video { position: relative; padding-top: 56.25%; margin: 1.5rem 0; border-radius: 12px; overflow: hidden; background: #000; }
.sk-ev-video iframe, .sk-ev-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sk-ev-desc { font-size: 1.05rem; line-height: 1.7; margin: 1.5rem 0; }
.sk-ev-desc img { border-radius: 10px; height: auto; }
.sk-ev-gallery { display: grid; grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) ); gap: .75rem; margin: 1.5rem 0; }
.sk-ev-gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; display: block; }

/* Footer */
.sk-footer { border-top: 1px solid var(--sk-border); padding: 2.5rem 0; color: var(--sk-muted); font-size: .9rem; }
.sk-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 1.5rem; }
@media ( max-width: 700px ) { .sk-footer-grid { grid-template-columns: 1fr; } }
.sk-footer h4 { color: var(--sk-ink); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .75rem; }
.sk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.sk-footer a { color: var(--sk-muted); text-decoration: none; }
.sk-footer a:hover { color: var(--sk-ink); }
.sk-footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--sk-border); }

/* Mobile nav — keep links visible (they wrap); just tighten spacing. */
@media ( max-width: 600px ) {
	.sk-nav { gap: .5rem .9rem; font-size: .85rem; }
}