/* ==========================================================================
   THE GAROE Group — legal.css
   Shared page-specific styles for the Privacy Policy and Terms of Service pages.
   Enqueued conditionally for is_page('privacy') and is_page('terms').

   Resets, fonts, header, footer, .container and the global root tokens are
   provided by the theme (style.css / main.css) and are NOT repeated here.

   The light "document" surface uses a small set of page-specific tokens that
   have no exact equivalent in the theme palette. Exact matches to theme tokens
   (#ffffff, gold, carbon) have been reconciled to var() references.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE-SPECIFIC TOKENS (light document surface)
   -------------------------------------------------------------------------- */
.doc-page {
	--doc-bg:         #f0ece4;
	--doc-bg-2:       #e8e3da;
	--doc-surface:    var(--color-white);
	--doc-text:       #1a1814;
	--doc-muted:      #6a6560;
	--doc-rule:       rgba(26, 24, 20, 0.12);
	--doc-gold:       #b8924a;
	--doc-gold-rule:  rgba(184, 146, 74, 0.25);
	--doc-gold-soft:  rgba(184, 146, 74, 0.08);
}

/* ════════════════════════
   DOCUMENT PAGE — LIGHT STYLE
   ════════════════════════ */
.doc-page {
	background: var(--doc-bg);
	min-height: 100vh;
}

/* Page header band */
.doc-header {
	background: var(--doc-bg);
	border-bottom: 1px solid var(--doc-rule);
	padding: 60px 0 52px;
	position: relative;
}
.doc-header-inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}
.doc-eyebrow {
	color: var(--doc-gold);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 16px;
	opacity: 0.8;
}
.doc-title {
	color: var(--doc-text);
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.1;
}
.doc-title em {
	font-style: italic;
	color: var(--doc-gold);
}
.doc-meta {
	flex-shrink: 0;
	text-align: right;
}
.doc-meta-item {
	display: block;
	color: var(--doc-muted);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 2;
}
.doc-meta-item strong {
	color: var(--doc-text);
	font-weight: 600;
}

/* Gold rule accent */
.doc-header::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 80px;
	height: 2px;
	background: var(--doc-gold);
}

/* ════════════════════════
   DOCUMENT LAYOUT
   ════════════════════════ */
.doc-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 0;
	align-items: start;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 48px;
}

/* Sidebar nav */
.doc-sidebar {
	position: sticky;
	top: 88px;
	padding: 52px 40px 52px 0;
	border-right: 1px solid var(--doc-rule);
}
.doc-sidebar-label {
	color: var(--doc-gold);
	font-family: var(--font-mono);
	font-size: 8px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	opacity: 0.7;
	display: block;
	margin-bottom: 18px;
}
.doc-nav {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.doc-nav li a {
	display: block;
	color: var(--doc-muted);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 7px 0;
	border-left: 2px solid transparent;
	padding-left: 12px;
	margin-left: -2px;
	transition: color 0.15s, border-color 0.15s;
	line-height: 1.5;
}
.doc-nav li a:hover {
	color: var(--doc-text);
	border-left-color: var(--doc-gold);
}

/* Document body */
.doc-body {
	padding: 52px 0 80px 60px;
}

/* Sections */
.doc-section {
	margin-bottom: 52px;
	padding-bottom: 52px;
	border-bottom: 1px solid var(--doc-rule);
}
.doc-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
}
.doc-section-number {
	color: var(--doc-gold);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.6;
	display: block;
	margin-bottom: 10px;
}
.doc-section h2 {
	color: var(--doc-text);
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	margin-bottom: 20px;
}
.doc-section p {
	color: var(--doc-muted);
	font-size: 14px;
	line-height: 1.85;
	margin-bottom: 14px;
}
.doc-section p:last-child { margin-bottom: 0; }
.doc-section p strong {
	color: var(--doc-text);
	font-weight: 600;
}

/* Sub-heading within a section */
.doc-subsection {
	margin-top: 28px;
	margin-bottom: 10px;
	color: var(--doc-text);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Inline list */
.doc-list {
	list-style: none;
	margin: 12px 0 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.doc-list li {
	color: var(--doc-muted);
	font-size: 14px;
	line-height: 1.75;
	padding-left: 18px;
	position: relative;
}
.doc-list li::before {
	content: '—';
	color: var(--doc-gold);
	font-family: var(--font-mono);
	font-size: 10px;
	position: absolute;
	left: 0;
	top: 4px;
	opacity: 0.6;
}

/* Contact / callout box */
.doc-callout {
	background: var(--doc-surface);
	border: 1px solid var(--doc-rule);
	border-left: 3px solid var(--doc-gold);
	padding: 22px 26px;
	margin-top: 20px;
}
.doc-callout p {
	color: var(--doc-muted);
	font-size: 14px;
	line-height: 1.75;
	margin-bottom: 6px;
}
.doc-callout p:last-child { margin-bottom: 0; }
.doc-callout p strong { color: var(--doc-text); }
.doc-callout a {
	color: var(--doc-gold);
	text-decoration: none;
	font-weight: 500;
}
.doc-callout a:hover { text-decoration: underline; }

/* ════════════════════════
   RESPONSIVE
   ════════════════════════ */
@media (max-width: 960px) {
	.doc-layout { grid-template-columns: 1fr; padding: 0 24px; }
	.doc-sidebar { display: none; }
	.doc-body { padding: 40px 0 60px; }
	.doc-title { font-size: 34px; }
	.doc-header-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
	.doc-meta { text-align: left; }
}