/*
 * WP Ember - core bundle: base + shared components. Loaded on every page.
 * Everything is composed from tokens.css; no hardcoded design values here.
 */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--wpe-font-sans);
	font-size: var(--wpe-fs-16);
	line-height: 1.6;
	color: var(--wpe-text);
	background: var(--wpe-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--wpe-ember); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
	font-family: var(--wpe-font-display);
	color: var(--wpe-ink);
	line-height: 1.15;
	font-weight: 600;
	margin: 0 0 var(--wpe-sp-4);
}
h1 { font-size: var(--wpe-fs-48); letter-spacing: -0.01em; }
h2 { font-size: var(--wpe-fs-38); }
h3 { font-size: var(--wpe-fs-24); }
p { margin: 0 0 var(--wpe-sp-4); }

/* Layout */
.wpe-container { max-width: var(--wpe-container); margin: 0 auto; padding: 0 var(--wpe-sp-6); }
.wpe-container--narrow { max-width: var(--wpe-container-narrow); }
.wpe-section { padding: var(--wpe-sp-20) 0; }
.wpe-section--paper { background: var(--wpe-paper); }
.wpe-section--sunken { background: var(--wpe-surface-2); }

.wpe-section-head { text-align: center; max-width: 60ch; margin: 0 auto var(--wpe-sp-12); }
.wpe-section-head h2 { margin: 0 0 var(--wpe-sp-3); }
.wpe-section-head p { color: var(--wpe-text-muted); font-size: var(--wpe-fs-18); margin: 0; }

/* Page header band (archives, docs index, blog, single headers) */
.wpe-subhero {
	background: var(--wpe-paper);
	border-bottom: 1px solid var(--wpe-border);
	padding: var(--wpe-sp-16) 0;
}
.wpe-subhero h1 { margin: 0 0 var(--wpe-sp-3); }
.wpe-subhero p { color: var(--wpe-text-muted); font-size: var(--wpe-fs-18); max-width: 60ch; margin: 0; }

.wpe-grid { display: grid; gap: var(--wpe-sp-6); }
.wpe-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wpe-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
	.wpe-grid--2,
	.wpe-grid--3 { grid-template-columns: 1fr; }
}

/* Header */
.wpe-site-header {
	position: sticky;
	top: 0;
	z-index: var(--wpe-z-header);
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(150%) blur(8px);
	border-bottom: 1px solid var(--wpe-border-cool);
}
.wpe-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wpe-sp-6);
	max-width: var(--wpe-container);
	margin: 0 auto;
	padding: var(--wpe-sp-4) var(--wpe-sp-6);
}
.wpe-logo { display: inline-flex; align-items: center; }
.wpe-logo img { height: 34px; width: auto; display: block; }
.wpe-header-inner { padding-top: var(--wpe-sp-5); padding-bottom: var(--wpe-sp-5); }
.wpe-nav ul { display: flex; gap: var(--wpe-sp-6); align-items: center; list-style: none; margin: 0; padding: 0; }
.wpe-nav a { color: var(--wpe-ink); font-size: var(--wpe-fs-15); font-weight: 600; text-decoration: none; }
.wpe-nav a:hover { color: var(--wpe-ember); text-decoration: none; }

/* Buttons */
.wpe-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wpe-sp-2);
	font-family: var(--wpe-font-sans);
	font-size: var(--wpe-fs-15);
	font-weight: 700;
	line-height: 1;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: var(--wpe-radius-btn);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--wpe-dur) var(--wpe-ease), border-color var(--wpe-dur), color var(--wpe-dur);
}
.wpe-btn:hover { text-decoration: none; }
.wpe-btn--primary { background: var(--wpe-ember); color: #fff; }
.wpe-btn--primary:hover { background: var(--wpe-ember-dark); color: #fff; }
.wpe-btn--ghost { background: transparent; color: var(--wpe-ink); border-color: var(--wpe-border-cool); }
.wpe-btn--ghost:hover { border-color: var(--wpe-ink); }

/* Pills */
.wpe-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wpe-fs-12);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--wpe-r-pill);
}
.wpe-pill--ember { background: rgba(232, 72, 15, 0.1); color: var(--wpe-ember); }
.wpe-pill--amber { background: var(--wpe-core); color: #7a4a00; }

/* Cards */
.wpe-card {
	background: var(--wpe-surface);
	border: 1px solid var(--wpe-border-cool);
	border-radius: var(--wpe-radius-card);
	padding: var(--wpe-sp-6);
	box-shadow: var(--wpe-shadow-card);
	transition: box-shadow var(--wpe-dur), transform var(--wpe-dur);
}
.wpe-card h3 { margin-top: 0; }
.wpe-card p:last-child { margin-bottom: 0; }

/* Screenshot frame (marketing + product pages) */
.wpe-shot {
	border-radius: var(--wpe-r-12);
	overflow: hidden;
	background: var(--wpe-surface);
	border: 1px solid var(--wpe-border-cool);
	box-shadow: var(--wpe-shadow-lift);
}
.wpe-shot img { display: block; width: 100%; height: auto; }

/* Footer */
.wpe-site-footer {
	background: var(--wpe-ink);
	color: var(--wpe-text-invert);
	margin-top: var(--wpe-sp-24);
	padding: var(--wpe-sp-16) 0 var(--wpe-sp-8);
}
.wpe-footer-grid {
	display: flex;
	justify-content: space-between;
	gap: var(--wpe-sp-10);
	flex-wrap: wrap;
	max-width: var(--wpe-container);
	margin: 0 auto;
	padding: 0 var(--wpe-sp-6);
}
.wpe-footer-brand { max-width: 32ch; }
.wpe-footer-brand img { height: 30px; width: auto; margin-bottom: var(--wpe-sp-4); }
.wpe-footer-brand p { color: rgba(245, 239, 230, 0.7); font-size: var(--wpe-fs-14); margin: 0; }
.wpe-footer-col h4 {
	color: #fff;
	font-family: var(--wpe-font-sans);
	font-size: var(--wpe-fs-13);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 var(--wpe-sp-4);
}
.wpe-footer-col ul { list-style: none; margin: 0; padding: 0; }
.wpe-footer-col li { margin-bottom: var(--wpe-sp-2); }
.wpe-footer-col a { color: rgba(245, 239, 230, 0.75); font-size: var(--wpe-fs-14); }
.wpe-footer-col a:hover { color: #fff; }
.wpe-footer-bottom {
	max-width: var(--wpe-container);
	margin: var(--wpe-sp-12) auto 0;
	padding: var(--wpe-sp-6) var(--wpe-sp-6) 0;
	border-top: 1px solid rgba(245, 239, 230, 0.15);
	font-size: var(--wpe-fs-13);
	color: rgba(245, 239, 230, 0.6);
}

/* Content (blog/pages/docs body) */
.wpe-entry { font-size: var(--wpe-fs-16); }
.wpe-entry h2 { font-size: var(--wpe-fs-30); margin-top: var(--wpe-sp-10); }
.wpe-entry h3 { font-size: var(--wpe-fs-20); margin-top: var(--wpe-sp-8); }

/* Accessibility */
.wpe-skip-link { position: absolute; left: -9999px; }
.wpe-skip-link:focus {
	left: var(--wpe-sp-4);
	top: var(--wpe-sp-4);
	z-index: var(--wpe-z-overlay);
	background: #fff;
	padding: var(--wpe-sp-2) var(--wpe-sp-4);
	border-radius: var(--wpe-r-6);
	box-shadow: var(--wpe-shadow-lift);
}
:focus-visible { outline: none; box-shadow: var(--wpe-ring); border-radius: var(--wpe-r-6); }