/*
Theme Name: King's Youth
Theme URI: https://kingsyouth.church
Author: St. Eutychus
Author URI: https://st-eutychus.com
Description: Custom WordPress theme for King's Youth, a fortnightly Friday night youth gathering run cooperatively by Annerley, Moorooka, Acacia Ridge, and City South Presbyterian churches, and Risen Church. Built from the King's Youth brand guide: brush-lettered crown wordmark, black/gold palette, Bebas Neue + Inter type system.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kings-youth
*/

/* -------------------------------------------------
   1. FONTS — self-hosted (no external requests, in
   keeping with the low-fi/no-social-embeds approach)
------------------------------------------------- */
@font-face {
	font-family: 'Bebas Neue';
	src: url('assets/fonts/bebas-neue-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Permanent Marker';
	src: url('assets/fonts/permanent-marker-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------
   2. CSS VARIABLES — from brand guide
------------------------------------------------- */
:root {
	--ky-black: #0A0A0A;
	--ky-black-soft: #1A1A1A;
	--ky-white: #FFFFFF;
	--ky-gold: #D4A017;
	--ky-grey-dark: #4D4D4D;
	--ky-grey-light: #E6E6E6;
	--ky-grey-lighter: #F5F5F5;

	/* Display: brush-style, used sparingly for big hero statements & pull
	   quotes (per brand guide: "Headings (Display) — Bebas Neue / Brush
	   style"). Secondary/body headings use the clean Bebas Neue below. */
	--ky-font-display: 'Permanent Marker', cursive;
	--ky-font-heading: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
	--ky-font-body: 'Inter', sans-serif;

	--ky-radius: 6px;
	--ky-container: 1200px;
}

/* -------------------------------------------------
   2. RESET & BASE
------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--ky-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ky-black-soft);
	background: var(--ky-white);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ky-gold); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ky-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.1;
	margin: 0 0 0.5em;
	color: var(--ky-black);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1.2em; }

.container {
	max-width: var(--ky-container);
	margin: 0 auto;
	padding: 0 24px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ky-gold);
	color: var(--ky-black);
	padding: 12px 20px;
	z-index: 10000;
	font-weight: 700;
}
.skip-link:focus { left: 10px; top: 10px; }

/* -------------------------------------------------
   3. BUTTONS
------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--ky-font-heading);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 1.05rem;
	min-height: 3rem;
	padding: 14px 30px;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.15s ease;
	text-decoration: none;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); text-decoration: none; }
.btn:focus-visible { outline: 3px solid var(--ky-gold); outline-offset: 4px; }

/* Brush-textured button backgrounds (from the King's Youth button asset pack) */
.btn-primary {
	background-image: url('assets/buttons/gold-button-bg.png');
	color: var(--ky-black);
}
.btn-secondary {
	background-image: url('assets/buttons/black-button-bg.png');
	color: var(--ky-white);
}
.btn-outline {
	background-image: url('assets/buttons/clean-button-bg.png');
	color: var(--ky-gold);
}
.btn-outline-light {
	background-image: url('assets/buttons/clean-button-bg.png');
	color: var(--ky-white);
	filter: brightness(1.6);
}
.btn-outline-light:hover { filter: brightness(2); }

/* Text-link style with a brush underline stroke, for inline "Read More"
   style links (per brand guide "TEXT LINK" example). */
.btn-text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ky-font-heading);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.95rem;
	color: var(--ky-black);
	text-decoration: none;
	padding: 4px 2px 10px;
	background-image: url('assets/buttons/underline-button-bg.png');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 6px;
}
.btn-text:hover { text-decoration: none; filter: brightness(1.3); }

/* -------------------------------------------------
   4. HEADER / NAVIGATION
------------------------------------------------- */
.site-header {
	background: var(--ky-black);
	color: var(--ky-white);
	position: sticky;
	top: 0;
	z-index: 999;
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	gap: 20px;
}

.site-branding img { height: 56px; width: auto; }
.site-branding a { display: inline-flex; }

.main-navigation { display: flex; align-items: center; gap: 28px; }

.main-navigation ul {
	list-style: none;
	display: flex;
	gap: 26px;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	color: var(--ky-white);
	font-family: var(--ky-font-heading);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 0.95rem;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--ky-gold);
	border-bottom-color: var(--ky-gold);
	text-decoration: none;
}

.header-cta { display: flex; align-items: center; gap: 16px; }

.menu-toggle {
	display: none;
	background: transparent;
	border: 2px solid var(--ky-white);
	color: var(--ky-white);
	padding: 8px 12px;
	border-radius: var(--ky-radius);
	font-family: var(--ky-font-heading);
	letter-spacing: 1px;
	cursor: pointer;
}

@media (max-width: 880px) {
	.main-navigation { display: none; width: 100%; }
	.main-navigation.is-open {
		display: block;
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: var(--ky-black);
		padding: 10px 24px 24px;
	}
	.main-navigation.is-open ul { flex-direction: column; gap: 4px; }
	.main-navigation.is-open .header-cta { margin-top: 16px; }
	.menu-toggle { display: inline-block; }
	.header-cta .btn-primary { display: none; }
	.main-navigation.is-open .header-cta .btn-primary { display: inline-flex; }
}

/* -------------------------------------------------
   5. HERO
------------------------------------------------- */
.hero {
	background-color: var(--ky-black);
	color: var(--ky-white);
	position: relative;
	overflow: hidden;
	padding: 90px 0;
	background-image:
		url('assets/backgrounds/bg-hero-dots.png'),
		url('assets/backgrounds/bg-hero-brush-gold.png'),
		url('assets/backgrounds/bg-hero-brush-white.png');
	background-repeat: repeat, no-repeat, no-repeat;
	background-position: top left, bottom right, bottom left;
	background-size: 140px 140px, 60% auto, 65% auto;
}

.hero .container { position: relative; z-index: 1; }

.hero .container {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
}

.hero-eyebrow {
	color: var(--ky-gold);
	font-family: var(--ky-font-heading);
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 0.95rem;
	margin-bottom: 10px;
	display: block;
}

.hero h1 {
	color: var(--ky-white);
	margin-bottom: 20px;
	font-family: var(--ky-font-display);
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	line-height: 1.15;
}
.hero h1 .accent { color: var(--ky-gold); }

/* Reusable brush/display style for pull quotes and standout statements
   elsewhere on the site (e.g. "You Belong" style callouts). */
.display-text {
	font-family: var(--ky-font-display);
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	line-height: 1.15;
}

.hero-lede { font-size: 1.15rem; color: var(--ky-grey-light); max-width: 46ch; }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

.hero-media { position: relative; }
.hero-media img { border-radius: var(--ky-radius); }

@media (max-width: 880px) {
	.hero .container { grid-template-columns: 1fr; }
	.hero { padding: 56px 0; }
}

/* -------------------------------------------------
   6. INFO STRIP (quick facts: when / where / cost)
------------------------------------------------- */
.info-strip {
	background: var(--ky-gold);
	color: var(--ky-black);
}
.info-strip .container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 22px 24px;
}
.info-item { text-align: center; }
.info-item strong {
	display: block;
	font-family: var(--ky-font-heading);
	letter-spacing: 1px;
	font-size: 1.1rem;
}
.info-item span { font-size: 0.9rem; }

@media (max-width: 880px) {
	.info-strip .container { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------
   7. SECTIONS
------------------------------------------------- */
.section { padding: 72px 0; }
.section-alt { background: var(--ky-grey-lighter); }
.section-dark { background: var(--ky-black); color: var(--ky-white); }
.section-dark h2, .section-dark h3 { color: var(--ky-white); }

.section-heading { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-heading .eyebrow {
	color: var(--ky-gold);
	font-family: var(--ky-font-heading);
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 0.9rem;
}

.grid { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 880px) {
	.grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* Card */
.card {
	background: var(--ky-white);
	border: 1px solid var(--ky-grey-light);
	border-radius: var(--ky-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.card-media { aspect-ratio: 16/10; background: var(--ky-black); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.card-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ky-gold);
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 8px;
}
.card-body h3 { margin-bottom: 8px; }
.card-body p { color: var(--ky-grey-dark); flex: 1; }
.card-body .btn { align-self: flex-start; margin-top: 12px; }

/* -------------------------------------------------
   8. PRESENTED BY (partner church logos)
------------------------------------------------- */
.presented-by {
	background: var(--ky-white);
	padding: 56px 0;
	border-top: 1px solid var(--ky-grey-light);
	border-bottom: 1px solid var(--ky-grey-light);
}
.presented-by-label {
	text-align: center;
	font-family: var(--ky-font-heading);
	letter-spacing: 2px;
	color: var(--ky-grey-dark);
	margin-bottom: 28px;
}
.presented-by-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 44px;
}
.presented-by-logos a {
	display: inline-flex;
	align-items: center;
}
.presented-by-logos a:hover { text-decoration: none; }
.presented-by-logos img {
	max-height: 64px;
	width: auto;
	filter: grayscale(100%);
	opacity: 0.75;
	transition: opacity 0.2s ease, filter 0.2s ease;
}
.presented-by-logos img:hover { filter: grayscale(0%); opacity: 1; }
.presented-by-logos .church-name-fallback {
	font-family: var(--ky-font-heading);
	letter-spacing: 0.5px;
	color: var(--ky-black);
	font-size: 1rem;
	text-transform: uppercase;
	border: 2px solid var(--ky-grey-light);
	padding: 14px 20px;
	border-radius: var(--ky-radius);
}

/* -------------------------------------------------
   9. EVENTS / CALENDAR LIST
------------------------------------------------- */
.event-row {
	display: grid;
	grid-template-columns: 90px 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 20px;
	border: 1px solid var(--ky-grey-light);
	border-radius: var(--ky-radius);
	margin-bottom: 16px;
	background: var(--ky-white);
}
.event-date-badge {
	background: var(--ky-black);
	color: var(--ky-white);
	text-align: center;
	border-radius: var(--ky-radius);
	padding: 10px 6px;
	font-family: var(--ky-font-heading);
	letter-spacing: 1px;
}
.event-date-badge .month { display: block; font-size: 0.8rem; color: var(--ky-gold); }
.event-date-badge .day { display: block; font-size: 1.6rem; line-height: 1; }
.event-row h3 { margin-bottom: 4px; }
.event-meta { color: var(--ky-grey-dark); font-size: 0.92rem; }
.event-meta span { margin-right: 16px; display: inline-block; }

@media (max-width: 640px) {
	.event-row { grid-template-columns: 70px 1fr; }
	.event-row .btn { grid-column: 1 / -1; margin-top: 10px; }
}

/* -------------------------------------------------
   10. FORMS
------------------------------------------------- */
form input[type=text],
form input[type=email],
form input[type=tel],
form input[type=date],
form input[type=number],
form select,
form textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--ky-grey-dark);
	border-radius: var(--ky-radius);
	font-family: var(--ky-font-body);
	font-size: 1rem;
	background: var(--ky-white);
	color: var(--ky-black-soft);
}
form textarea { min-height: 120px; resize: vertical; }
form label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 0.92rem;
}
.form-row { margin-bottom: 20px; }
.form-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-row-grid { grid-template-columns: 1fr; } }

form button[type=submit],
form input[type=submit] {
	font-family: var(--ky-font-heading);
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--ky-gold);
	color: var(--ky-black);
	border: none;
	padding: 15px 30px;
	border-radius: var(--ky-radius);
	cursor: pointer;
	font-size: 1rem;
}
form button[type=submit]:hover,
form input[type=submit]:hover { background: #b98812; }

.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; }
.form-consent input { width: auto; margin-top: 4px; }

.form-notice {
	padding: 16px 18px;
	border-radius: var(--ky-radius);
	margin-bottom: 24px;
	font-weight: 600;
}
.form-notice.success { background: #e9f6e9; color: #1f6b1f; border: 1px solid #b6dfb6; }
.form-notice.error { background: #fbe9e9; color: #a12222; border: 1px solid #f1bcbc; }

/* honeypot field, hidden from humans */
.ky-hp { position: absolute !important; left: -9999px !important; top: -9999px; }

/* -------------------------------------------------
   11. CONTENT PAGES (child safety, format, single posts)
------------------------------------------------- */
.page-hero {
	background: var(--ky-black);
	color: var(--ky-white);
	padding: 64px 0 48px;
}
.page-hero h1 { color: var(--ky-white); margin-bottom: 10px; }
.page-hero .lede { color: var(--ky-grey-light); max-width: 60ch; }

.content-page { padding: 56px 0; }
.content-page .entry-content { max-width: 780px; margin: 0 auto; }
.content-page .entry-content h2 { margin-top: 1.6em; }
.content-page .entry-content h2:first-child { margin-top: 0; }
.content-page .entry-content ul,
.content-page .entry-content ol { padding-left: 1.3em; }
.content-page .entry-content blockquote {
	border-left: 4px solid var(--ky-gold);
	padding-left: 20px;
	margin-left: 0;
	color: var(--ky-grey-dark);
	font-style: italic;
}

.callout {
	background: var(--ky-grey-lighter);
	border-left: 4px solid var(--ky-gold);
	padding: 20px 24px;
	border-radius: var(--ky-radius);
	margin: 28px 0;
}
.callout.dark { background: var(--ky-black); color: var(--ky-white); border-left-color: var(--ky-gold); }

/* -------------------------------------------------
   12. FOOTER
------------------------------------------------- */
.site-footer {
	background: var(--ky-black);
	color: var(--ky-grey-light);
	padding: 64px 0 28px;
	position: relative;
	margin-top: 55px;
}
.site-footer::before {
	content: "";
	position: absolute;
	top: -55px;
	left: 0;
	right: 0;
	height: 75px;
	background-image:
		url('assets/backgrounds/bg-footer-torn-gold-thin.png'),
		url('assets/backgrounds/bg-footer-torn-white.png');
	background-repeat: no-repeat, no-repeat;
	background-position: bottom, bottom;
	background-size: 100% 60%, 100% 100%;
	pointer-events: none;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 36px;
	margin-bottom: 40px;
}
.footer-brand img { height: 64px; margin-bottom: 14px; }
.footer-brand p { color: var(--ky-grey-light); max-width: 32ch; }
.site-footer h4 {
	color: var(--ky-white);
	font-family: var(--ky-font-heading);
	letter-spacing: 1px;
	margin-bottom: 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer a { color: var(--ky-grey-light); }
.site-footer a:hover { color: var(--ky-gold); }

@media (max-width: 880px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.footer-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------
   13. ICONS (King's Youth line-icon set)
------------------------------------------------- */
.ky-icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	vertical-align: middle;
}
.ky-icon-faith      { -webkit-mask-image: url('assets/icons/icon_faith.png');      mask-image: url('assets/icons/icon_faith.png'); }
.ky-icon-events     { -webkit-mask-image: url('assets/icons/icon_events.png');     mask-image: url('assets/icons/icon_events.png'); }
.ky-icon-missions   { -webkit-mask-image: url('assets/icons/icon_missions.png');   mask-image: url('assets/icons/icon_missions.png'); }
.ky-icon-serve      { -webkit-mask-image: url('assets/icons/icon_serve.png');      mask-image: url('assets/icons/icon_serve.png'); }
.ky-icon-updates    { -webkit-mask-image: url('assets/icons/icon_updates.png');    mask-image: url('assets/icons/icon_updates.png'); }
.ky-icon-bible      { -webkit-mask-image: url('assets/icons/icon_bible.png');      mask-image: url('assets/icons/icon_bible.png'); }
.ky-icon-leadership { -webkit-mask-image: url('assets/icons/icon_leadership.png'); mask-image: url('assets/icons/icon_leadership.png'); }
.ky-icon-community  { -webkit-mask-image: url('assets/icons/icon_community.png');  mask-image: url('assets/icons/icon_community.png'); }

.icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ky-black);
	color: var(--ky-gold);
	margin-bottom: 16px;
}
.icon-badge .ky-icon { width: 26px; height: 26px; }
.section-dark .icon-badge { background: var(--ky-gold); color: var(--ky-black); }

/* -------------------------------------------------
   14. UTILITIES
------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.text-gold { color: var(--ky-gold); }
.bg-black { background: var(--ky-black); color: var(--ky-white); }
.brush-underline {
	display: inline-block;
	position: relative;
}