/*
Theme Name: COL323 Parked
Theme URI: https://col323.co.za
Author: COL323
Author URI: https://col323.co.za
Description: A clean, minimal parked page theme for websites not yet launched. Features 5 professional color schemes, font selection, and optional contact header.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: col323-parked
Tags: minimal, one-column, custom-colors, custom-logo
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — COLOR SCHEMES
   ============================================================ */

/* Default: Azure (Clean Corporate) */
:root {
	--bg:         #ffffff;
	--bg-header:  #f5f7fa;
	--text:       #1a2332;
	--text-muted: #64748b;
	--accent:     #2563eb;
	--border:     #e2e8f0;
	--logo-max:   220px;
}

/* Scheme: Obsidian (Dark Luxury) */
body[data-scheme="obsidian"] {
	--bg:         #111111;
	--bg-header:  #1a1a1a;
	--text:       #e8e8e8;
	--text-muted: #999999;
	--accent:     #c9a96e;
	--border:     #2a2a2a;
}

/* Scheme: Ivory (Warm Minimal) */
body[data-scheme="ivory"] {
	--bg:         #f8f6f0;
	--bg-header:  #f0ece4;
	--text:       #2c2c2c;
	--text-muted: #7a7a7a;
	--accent:     #8b5e3c;
	--border:     #e0dbd2;
}

/* Scheme: Azure (Clean Corporate) */
body[data-scheme="azure"] {
	--bg:         #ffffff;
	--bg-header:  #f5f7fa;
	--text:       #1a2332;
	--text-muted: #64748b;
	--accent:     #2563eb;
	--border:     #e2e8f0;
}

/* Scheme: Graphite (Modern Dark) */
body[data-scheme="graphite"] {
	--bg:         #1e2330;
	--bg-header:  #161b27;
	--text:       #e2e8f0;
	--text-muted: #94a3b8;
	--accent:     #818cf8;
	--border:     #2d3748;
}

/* Scheme: Sage (Natural Minimal) */
body[data-scheme="sage"] {
	--bg:         #f4f7f4;
	--bg-header:  #edf2ed;
	--text:       #1f2d1f;
	--text-muted: #6b7c6b;
	--accent:     #4a7c59;
	--border:     #d4e0d4;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font-body, system-ui, -apple-system, sans-serif);
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	transition: background-color 0.2s ease, color 0.2s ease;
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

a:hover {
	opacity: 0.75;
}

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

/* ============================================================
   CONTACT HEADER BAR
   ============================================================ */

.parked-contact-bar {
	background-color: var(--bg-header);
	border-bottom: 1px solid var(--border);
	padding: 10px 32px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 28px;
	min-height: 44px;
}

.parked-contact-bar.is-empty {
	display: none;
}

.parked-contact-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.parked-contact-item a {
	color: var(--text-muted);
	text-decoration: none;
}

.parked-contact-item a:hover {
	color: var(--accent);
	opacity: 1;
}

.parked-contact-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	fill: none;
	stroke: var(--accent);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.parked-divider {
	width: 1px;
	height: 14px;
	background-color: var(--border);
}

/* ============================================================
   MAIN STAGE — CENTERED LOGO
   ============================================================ */

.parked-stage {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 32px;
}

.parked-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}

/* Custom logo */
.parked-brand .custom-logo-link {
	display: block;
	line-height: 0;
}

.parked-brand .custom-logo {
	max-width: var(--logo-max);
	width: 100%;
	height: auto;
}

/* Text fallback / site name */
.parked-site-name {
	font-family: var(--font-heading, inherit);
	font-size: clamp(1.8rem, 5vw, 3rem);
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text);
	line-height: 1.2;
}

.parked-site-name span {
	color: var(--accent);
}

.parked-tagline {
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Accent bar below logo */
.parked-accent-line {
	width: 40px;
	height: 2px;
	background-color: var(--accent);
	border-radius: 2px;
	margin-top: 4px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
	.parked-contact-bar {
		padding: 9px 20px;
		gap: 16px;
	}

	.parked-contact-item {
		font-size: 0.78rem;
	}

	.parked-stage {
		padding: 40px 24px;
	}

	.parked-brand {
		gap: 16px;
	}
}

/* ============================================================
   WORDPRESS CORE (admin bar etc.)
   ============================================================ */

.admin-bar .parked-contact-bar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .parked-contact-bar {
		top: 46px;
	}
}