/*
Theme Name: Tennessee Theatre Usher Portal
Theme URI: https://tennesseetheatre.com
Author: Tennessee Theatre
Description: Custom theme for the Tennessee Theatre Usher Portal — mobile-first, matching the theatre's brand (burgundy, gold, cream, Georgia serif). Pairs with the "Tennessee Theatre Usher Portal" plugin.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: usher-portal-theme
*/

:root {
	--tt-burgundy: #7A222E;
	--tt-burgundy-dark: #5C1A23;
	--tt-gold: #B8963E;
	--tt-gold-light: #D9C078;
	--tt-cream: #FAF3E9;
	--tt-card: #FFFFFF;
	--tt-ink: #2A1519;
	--tt-ink-soft: #6B4A4F;
	--tt-muted: #8A6165;
	--tt-border: #E8DCC8;
	--tt-tint: #F3E4E7;
	--tt-font-heading: Georgia, 'Times New Roman', serif;
	--tt-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	background: var(--tt-cream);
	color: var(--tt-ink);
	font-family: var(--tt-font-body);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--tt-gold); text-decoration: none; }
a:hover { color: #8f7530; }

img { max-width: 100%; }

.up-site { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Header (mobile) ---------- */
.up-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--tt-burgundy);
	color: #fff;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 20;
}
.up-header-logo { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.up-header-titles { display: flex; flex-direction: column; line-height: 1.2; }
.up-header-site { font-family: var(--tt-font-heading); font-size: 17px; font-weight: 700; color: #fff; }
.up-header-sub { font-size: 11px; color: #E7C9CE; letter-spacing: .6px; text-transform: uppercase; }
.up-header-back { color: #fff; display: flex; align-items: center; }
.up-header-page-title { font-family: var(--tt-font-heading); font-size: 18px; font-weight: 700; }

/* ---------- Desktop top nav ---------- */
.up-desktop-nav { display: none; }

@media (min-width: 900px) {
	.up-header { display: none; }
	.up-desktop-nav {
		display: flex;
		align-items: center;
		gap: 36px;
		padding: 0 48px;
		height: 78px;
		background: var(--tt-burgundy);
		position: sticky;
		top: 0;
		z-index: 20;
	}
	.up-desktop-nav .up-header-logo { width: 40px; height: 40px; }
	.up-desktop-nav .up-header-titles { margin-right: 8px; }
	.up-nav-links { display: flex; gap: 30px; margin-left: 8px; }
	.up-nav-links a { font-size: 14px; color: #F3E4E7; font-weight: 600; letter-spacing: .2px; }
	.up-nav-links a:hover, .up-nav-links a.is-current { color: #fff; }
	.up-tabbar { display: none !important; }
}

/* ---------- Main content ---------- */
.up-main {
	flex: 1;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 18px 90px;
	box-sizing: border-box;
}
@media (min-width: 900px) {
	.up-main { padding: 44px 48px; max-width: 1100px; }
}

.up-page-title {
	font-family: var(--tt-font-heading);
	font-size: 21px;
	font-weight: 700;
	color: var(--tt-ink);
	margin: 0 0 16px;
}

/* ---------- Bottom tab bar (mobile) ---------- */
.up-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	border-top: 1px solid var(--tt-border);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	padding: 9px 4px 12px;
	z-index: 30;
}
.up-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: #A98F92;
	font-size: 10.5px;
	text-decoration: none;
}
.up-tab.active, .up-tab:hover { color: var(--tt-burgundy); }
.up-tab svg { display: block; }

/* ---------- Home dashboard ---------- */
.up-welcome { margin-bottom: 4px; }
.up-welcome-title { font-family: var(--tt-font-heading); font-size: 22px; font-weight: 700; color: var(--tt-ink); }
.up-welcome-date { font-size: 13.5px; color: var(--tt-muted); margin-top: 2px; }

.up-quick-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--tt-muted); font-weight: 600; margin: 22px 0 10px; }

.up-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
@media (min-width: 900px) { .up-tile-grid { grid-template-columns: repeat(4, 1fr); } }

.up-tile {
	background: var(--tt-card);
	border: 1px solid var(--tt-border);
	border-radius: 14px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}
.up-tile-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--tt-tint); display: flex; align-items: center; justify-content: center; color: var(--tt-burgundy); }
.up-tile-title { font-weight: 700; color: var(--tt-ink); font-size: 14.5px; font-family: var(--tt-font-heading); }
.up-tile-desc { font-size: 12px; color: var(--tt-muted); }

/* ---------- Footer ---------- */
.up-footer {
	text-align: center;
	padding: 18px;
	font-size: 12px;
	color: var(--tt-muted);
}