/*
 * pzt-child — global styles and design tokens.
 *
 * Source of truth for these values: docs/design-tokens.md.
 * If you change a token, update the doc first, then mirror it here.
 */

/* ============================================================
   Design tokens (CSS variables)
   ============================================================ */
:root {
	/* Palette */
	--pzt-navy:                 #0F2A47;
	--pzt-navy-deep:            #08182B;
	--pzt-bronze:               #B8924D;
	--pzt-bronze-hover:         #C9A961;
	--pzt-bronze-light:         #E8D9B8;
	--pzt-green-callback:       #2E8B57;
	--pzt-green-callback-hover: #3FA068;
	--pzt-graphite:             #2D3748;
	--pzt-text-secondary:       #4A5568;
	--pzt-text-tertiary:        #718096;
	--pzt-bg-base:              #FFFFFF;
	--pzt-bg-alt:               #F7FAFC;
	--pzt-border:               #E2E8F0;
	--pzt-border-strong:        #CBD5E0;
	--pzt-danger-bg:            #FCEBEB;
	--pzt-danger-text:          #A32D2D;
	--pzt-placeholder-bg:       #FFE066;
	--pzt-placeholder-border:   #B8924D;
	--pzt-placeholder-text:     #663300;

	/* Spacing scale (desktop) */
	--pzt-section-py:           80px;
	--pzt-section-px:           60px;
	--pzt-card-padding:         32px;
	--pzt-card-gap:             24px;
	--pzt-element-gap:          16px;
	--pzt-tight-gap:            8px;

	/* Containers */
	--pzt-container:            1140px;
	--pzt-container-narrow:     880px;
	--pzt-container-wide:       1280px;
	--pzt-container-padding:    24px;

	/* Radii */
	--pzt-radius-sm:            6px;
	--pzt-radius-md:            12px;
	--pzt-radius-lg:            16px;
	--pzt-radius-pill:          999px;

	/* Shadows */
	--pzt-shadow-card:          0 1px 3px rgba(15, 42, 71, 0.06), 0 1px 2px rgba(15, 42, 71, 0.04);
	--pzt-shadow-card-hover:    0 4px 12px rgba(15, 42, 71, 0.10);
	--pzt-shadow-callback:      0 8px 24px rgba(46, 139, 87, 0.30);
}

/* Mobile + tablet overrides for spacing tokens (mobile-first compromise:
   we override DOWN from desktop because Blocksy does the same). */
@media (max-width: 1023px) {
	:root {
		--pzt-section-py:        48px;
		--pzt-section-px:        16px;
		--pzt-card-padding:      20px;
		--pzt-card-gap:          16px;
		--pzt-element-gap:       12px;
		--pzt-container-padding: 16px;
	}
}

/* ============================================================
   Base typography
   ============================================================ */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--pzt-graphite);
	background: var(--pzt-bg-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--pzt-navy);
	font-weight: 500;
	letter-spacing: -0.01em;
}

h1 { font-size: 32px; line-height: 1.25; }
h2 { font-size: 26px; line-height: 1.30; }
h3 { font-size: 18px; line-height: 1.40; }

@media (max-width: 1023px) {
	h1 { font-size: 28px; }
	h2 { font-size: 22px; }
	body { line-height: 1.6; }
}

a {
	color: var(--pzt-bronze);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover {
	color: var(--pzt-bronze-hover);
}

/* ============================================================
   Eyebrow (small UPPERCASE label above headings)
   ============================================================ */
.pzt-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pzt-bronze);
}

/* ============================================================
   Placeholder highlight
   Visible during dev so missing client data is obvious.
   Hidden on production via the `pzt-production` body class
   (added in functions.php once we leave dev hostnames).
   ============================================================ */
.pzt-placeholder {
	background: var(--pzt-placeholder-bg);
	color: var(--pzt-placeholder-text);
	padding: 2px 6px;
	border-radius: 3px;
	font-weight: 500;
	outline: 2px dashed var(--pzt-placeholder-border);
	outline-offset: 1px;
	white-space: nowrap;
}

body.pzt-production .pzt-placeholder {
	background: transparent;
	outline: none;
	padding: 0;
	color: inherit;
	white-space: normal;
}

/* ============================================================
   Narrow container variant — for article-style pages
   ============================================================ */
.pzt-container.pzt-container--narrow {
	max-width: var(--pzt-container-narrow);
}

/* ============================================================
   Article body (legal pages, etc.)
   ============================================================ */
.pzt-article__head { margin-bottom: 24px; }
.pzt-article__head h1 { color: var(--pzt-navy); margin: 0; }
.pzt-article__body { color: var(--pzt-graphite); line-height: 1.7; }
.pzt-article__body h2 { color: var(--pzt-navy); font-size: 22px; margin: 32px 0 12px; font-weight: 500; }
.pzt-article__body h3 { color: var(--pzt-navy); font-size: 17px; margin: 24px 0 8px; font-weight: 500; }
.pzt-article__body p,
.pzt-article__body ul,
.pzt-article__body ol { margin: 0 0 16px; }
.pzt-article__body ul,
.pzt-article__body ol { padding-left: 22px; }
.pzt-article__body li { margin-bottom: 4px; }
.pzt-article__body a { color: var(--pzt-bronze); }
.pzt-article__body a:hover { color: var(--pzt-bronze-hover); }

/* ============================================================
   Cookie banner — fixed bottom strip, dismiss persists in localStorage
   ============================================================ */
.pzt-cookie {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 199;
	background: var(--pzt-navy);
	color: rgba(255, 255, 255, 0.92);
	border-radius: 8px;
	padding: 14px 18px;
	display: none;
	gap: 16px;
	align-items: center;
	box-shadow: 0 8px 24px rgba(8, 24, 43, 0.30);
	font-size: 13px;
}
.pzt-cookie.is-visible { display: flex; }
.pzt-cookie p { margin: 0; flex: 1; line-height: 1.5; }
.pzt-cookie a { color: var(--pzt-bronze-hover); text-decoration: underline; }
.pzt-cookie .pzt-btn { flex-shrink: 0; padding: 8px 16px; font-size: 13px; }

@media (max-width: 600px) {
	.pzt-cookie {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
		gap: 12px;
		left: 12px;
		right: 12px;
		bottom: 88px; /* leave room for the sticky callback widget */
	}
	.pzt-cookie .pzt-btn { width: 100%; }
}