/*
Theme Name:   Where's the Gig
Theme URI:    https://agilitydigital.com.au
Author:       Agility Digital
Author URI:   https://agilitydigital.com.au
Description:  A light theme with a tram-green header and footer, built to host the Where's the Gig? puzzle game. Add the game to any page with the [wheres_the_gig] shortcode.
Version:      1.0.0
Requires at least: 5.0
Requires PHP: 7.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  wheres-the-gig
Copyright:    (c) 2026 Agility Digital, agilitydigital.com.au
*/

:root {
	--paper: #edf0e8;
	--card: #f8faf4;
	--ink: #13221a;
	--muted: #56655b;
	--line: #cbd4c9;
	--tram: #1c5638;
	--tram-deep: #143f29;
	--on-tram: #f3f0dc;
	--gold: #e2b33c;
	--gold-ink: #7a5c00;
	--display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
	--body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gutter-l: max(16px, env(safe-area-inset-left, 0px));
	--gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: var(--tram); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
	background: var(--gold);
	color: #1c1606;
	padding: 8px 14px;
	font-weight: 700;
}
.skip-link:focus { left: 8px; }

/* Header */
.site-header {
	background: var(--tram);
	color: var(--on-tram);
	border-bottom: 4px solid var(--gold);
	padding-top: env(safe-area-inset-top, 0px);
}
.site-header__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding-block: 14px;
	padding-left: var(--gutter-l);
	padding-right: var(--gutter-r);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.site-brand { display: grid; gap: 2px; min-width: 0; }
.site-brand__name,
.site-footer__brand {
	font-family: var(--display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(26px, 4.5vw, 36px);
	line-height: 1;
	letter-spacing: .01em;
	color: var(--on-tram);
	text-decoration: none;
}
.site-brand__name .accent,
.site-footer__brand .accent { color: var(--gold); }
.site-brand__tagline { margin: 0; font-size: 13px; opacity: .85; }
.custom-logo { display: block; max-height: 56px; width: auto; }

.primary-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.primary-nav__list a {
	display: block;
	padding: 6px 12px;
	border-radius: 4px;
	font-family: var(--display);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--on-tram);
	text-decoration: none;
}
.primary-nav__list a:hover { background: var(--tram-deep); }
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a { background: var(--gold); color: #1c1606; }
.primary-nav__list .sub-menu { list-style: none; margin: 0; padding: 0 0 0 12px; }

.nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid rgba(243, 240, 220, .5);
	border-radius: 4px;
	color: var(--on-tram);
	padding: 6px 12px;
	font: 700 14px/1 var(--body);
	text-transform: uppercase;
	letter-spacing: .06em;
	cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

@media (max-width: 720px) {
	.nav-toggle { display: inline-flex; }
	.primary-nav { display: none; width: 100%; }
	.primary-nav.is-open { display: block; }
	.primary-nav__list { flex-direction: column; padding-bottom: 8px; }
	.primary-nav__list a { padding: 10px 8px; border-top: 1px solid rgba(243, 240, 220, .15); border-radius: 0; }
}

/* Content */
.site-main { display: block; }
.content-wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding-block: 32px 48px;
	padding-left: var(--gutter-l);
	padding-right: var(--gutter-r);
}
.entry + .entry { margin-top: 40px; }
.entry__title {
	font-family: var(--display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(32px, 6vw, 52px);
	line-height: 1;
	margin: 0 0 16px;
	text-wrap: balance;
}
.entry__title a { color: inherit; text-decoration: none; }
.entry__content > * { max-width: 70ch; }
.entry__content > .wtg-embed,
.entry__content > .wp-block-shortcode,
.entry__content > .alignwide,
.entry__content > .alignfull { max-width: none; }

/* Footer */
.site-footer {
	background: var(--tram-deep);
	color: var(--on-tram);
	border-top: 4px solid var(--gold);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.site-footer a { color: var(--on-tram); }
.site-footer__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding-block: 32px 24px;
	padding-left: var(--gutter-l);
	padding-right: var(--gutter-r);
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
}
.site-footer__about p { margin: 10px 0 0; max-width: 42ch; opacity: .85; font-size: 15px; }
.site-footer__heading {
	margin: 0 0 8px;
	font-family: var(--display);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gold);
}
.site-footer__contact p { margin: 0; overflow-wrap: anywhere; }
.footer-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-nav__list a { text-decoration: none; }
.footer-nav__list a:hover { text-decoration: underline; }
.site-footer__legal {
	border-top: 1px solid rgba(243, 240, 220, .18);
	max-width: 1080px;
	margin: 0 auto;
	padding-block: 14px 18px;
	padding-left: var(--gutter-l);
	padding-right: var(--gutter-r);
	font-size: 13px;
	opacity: .8;
}
.site-footer__legal p { margin: 0; }

@media (max-width: 720px) {
	.site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}