/*
Theme Name: Zuikoholic Custom
Theme URI: https://zuikoholic.com
Author: Zuikoholic
Author URI: https://zuikoholic.com
Description: Custom lightweight theme for Zuikoholic.com, built to replace the Breakdance page builder while keeping WordPress as the CMS.
Version: 0.4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: zuikoholic-custom
*/

:root {
	/* Precision Optics palette */
	--zh-gunmetal: #15171a;
	--zh-gunmetal-panel: #1c1e21;
	--zh-ivory: #f2ecda;
	--zh-ivory-panel: #ffffff;
	--zh-ink: #201c18;
	--zh-brass: #a9832e;
	--zh-brass-light: #d4b876;
	--zh-brass-text: #7a5c1e;
	--zh-brass-hover: #8a6a22;
	--zh-brass-dark-text: #c6a248;
	--zh-hairline: #ded4b8;
	--zh-heading-font: "Cinzel", "Times New Roman", serif;
	--zh-body-font: "Spectral", Georgia, "Times New Roman", serif;
	--zh-mono-font: "JetBrains Mono", "SF Mono", Consolas, monospace;

	/* Type scale — one step up across the board, proportions preserved */
	--zh-fs-2xs: 11px;  /* was ~10px  — smallest plate labels */
	--zh-fs-xs: 12px;   /* was ~11px — eyebrows, footer links, spec labels */
	--zh-fs-sm: 13px;   /* was ~12px — nav links, cta/card-link text */
	--zh-fs-base: 17px; /* was 16px  — body/paragraph copy */
	--zh-fs-md: 19px;   /* was ~17px — hero intro text */
	--zh-fs-lg: 21px;   /* was ~19px — card/feature h3 */
	--zh-fs-xl: 27px;   /* was 24px  — section h2 */
	--zh-fs-2xl: 30px;  /* was 27px  — hub section h2 */
	--zh-fs-3xl: 38px;  /* was 34px  — legal/gallery h1 */
	--zh-fs-4xl: 42px;  /* was ~38px — hero h1 */
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--zh-body-font);
	font-size: var(--zh-fs-base);
	color: var(--zh-ink);
	background: var(--zh-ivory);
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--zh-heading-font);
	font-weight: 700;
	color: var(--zh-ink);
	line-height: 1.25;
	letter-spacing: 0.01em;
}

a {
	color: var(--zh-brass-text);
}

a:hover {
	color: var(--zh-brass-hover);
}

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

/* Header — a dark instrument top-plate that flows directly into each page's hero */
.site-header {
	background: var(--zh-gunmetal);
	border-bottom: 2px solid var(--zh-brass);
}

.site-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.site-logo img {
	display: block;
	width: 180px;
	height: auto;
}

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

.main-navigation a {
	text-decoration: none;
	font-family: var(--zh-mono-font);
	font-weight: 500;
	font-size: var(--zh-fs-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #d8d0ba;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

.main-navigation a:hover,
.main-navigation .current-menu-item a {
	color: var(--zh-brass-light);
	border-bottom-color: var(--zh-brass);
}

.site-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
	min-height: 50vh;
}

.site-footer {
	background: var(--zh-gunmetal);
	border-top: 2px solid var(--zh-brass);
	padding: 28px 20px;
	text-align: center;
	font-size: var(--zh-fs-sm);
	color: #a89f88;
}

.footer-links {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 10px 0;
	list-style: none;
	padding: 0;
}

.footer-links a {
	color: #d8d0ba;
	text-decoration: none;
	font-family: var(--zh-mono-font);
	font-size: var(--zh-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.footer-links a:hover {
	color: var(--zh-brass-light);
	text-decoration: underline;
}

/* Shared simple dark hero — used by Gallery and Legal pages, which have no
   specs plate or product image of their own, but should still open the same
   way every other page type does. */
.page-hero {
	background: var(--zh-gunmetal);
	padding: 52px 20px;
	margin-bottom: 40px;
}
.page-hero__inner {
	max-width: 1160px;
	margin: 0 auto;
}
.page-hero__eyebrow {
	font-family: var(--zh-mono-font);
	font-size: var(--zh-fs-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--zh-brass-dark-text);
	margin-bottom: 16px;
}
.page-hero__title {
	font-size: var(--zh-fs-4xl);
	color: #f2ecda;
	margin: 0 0 14px;
}
.page-hero__text {
	font-size: var(--zh-fs-md);
	line-height: 1.7;
	color: #c9c2ac;
	max-width: 60ch;
	margin: 0;
}