/*
Theme Name: Alexandria
Description: Storefront for Alexandria Restored. Dark, quiet, library-like — built on the shared EgoSum web-client palette so the surfaces feel like one system.
Version: 0.1.0
Author: Todd Kandaris
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: alexandria
*/

/* Palette lifted from the EgoSum app's shared web-client colours
   (app/src/main/res/values/colors.xml) so both surfaces read as one product. */
:root {
	--ego-bg:            #0b0f0d;
	--ego-panel:         #121815;
	--ego-panel-2:       #0e1411;
	--ego-line:          #223029;
	--ego-ink:           #e8f0ea;
	--ego-dim:           #8aa093;
	--ego-accent:        #38d39f;
	--ego-accent-dim:    #1f6f57;
	--ego-ink-on-accent: #04120c;

	--radius: 10px;
	--maxw: 1140px;
	--gap: 28px;
}

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

body {
	margin: 0;
	background: var(--ego-bg);
	color: var(--ego-ink);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--ego-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 22px;
}

/* ---------------------------------------------------------------- header -- */

.site-header {
	border-bottom: 1px solid var(--ego-line);
	background: linear-gradient(180deg, var(--ego-panel) 0%, var(--ego-bg) 100%);
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: blur(6px);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 74px;
	flex-wrap: wrap;
}

.brand {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 1.22rem;
	font-weight: 650;
	letter-spacing: -0.015em;
	color: var(--ego-ink);
}

.brand:hover { text-decoration: none; }

.brand .mark {
	color: var(--ego-accent);
	font-weight: 800;
}

.brand .tagline {
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--ego-dim);
	letter-spacing: 0.02em;
}

.site-nav {
	margin-left: auto;
	display: flex;
	gap: 22px;
	align-items: center;
	font-size: 0.94rem;
}

.site-nav a { color: var(--ego-dim); }
.site-nav a:hover { color: var(--ego-ink); text-decoration: none; }

/* ------------------------------------------------------------------ hero -- */

.hero {
	padding: 74px 0 54px;
	border-bottom: 1px solid var(--ego-line);
	background:
		radial-gradient(900px 380px at 12% -10%, rgba(56, 211, 159, 0.10), transparent 62%),
		var(--ego-bg);
}

.hero h1 {
	margin: 0 0 14px;
	font-size: clamp(2rem, 5vw, 3.15rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 700;
}

.hero p {
	margin: 0;
	max-width: 62ch;
	color: var(--ego-dim);
	font-size: 1.08rem;
}

.hero .rule {
	width: 62px;
	height: 3px;
	background: var(--ego-accent);
	border-radius: 2px;
	margin-bottom: 26px;
}

/* --------------------------------------------------------------- section -- */

.section { padding: 54px 0; }

.section-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 26px;
	flex-wrap: wrap;
}

.section-head h2 {
	margin: 0;
	font-size: 1.3rem;
	letter-spacing: -0.01em;
	font-weight: 650;
}

.section-head .count {
	color: var(--ego-dim);
	font-size: 0.88rem;
}

/* ------------------------------------------------------------------ grid -- */

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
	gap: var(--gap);
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--ego-panel);
	border: 1px solid var(--ego-line);
	border-radius: var(--radius);
	padding: 22px;
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.card:hover {
	border-color: var(--ego-accent-dim);
	transform: translateY(-2px);
}

/* Full-bleed cover at the top of the card. Negative margins pull it out to
   the card's edge without giving up the padding the rest of the card needs. */
.card .cover {
	display: block;
	margin: -22px -22px 18px;
	border-radius: var(--radius) var(--radius) 0 0;
	overflow: hidden;
	border-bottom: 1px solid var(--ego-line);
}

.card .cover img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.28s ease;
}

.card:hover .cover img { transform: scale(1.03); }

.product .cover {
	margin: 0 0 22px;
}

.product .cover img {
	display: block;
	width: 100%;
	border-radius: var(--radius);
	border: 1px solid var(--ego-line);
}

.card .type {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	font-size: 0.68rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--ego-accent);
	border: 1px solid var(--ego-accent-dim);
	border-radius: 999px;
	padding: 3px 10px;
	margin-bottom: 14px;
}

.card h3 {
	margin: 0 0 10px;
	font-size: 1.06rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
	font-weight: 620;
}

.card h3 a { color: var(--ego-ink); }
.card h3 a:hover { color: var(--ego-accent); text-decoration: none; }

.card .excerpt {
	margin: 0 0 20px;
	color: var(--ego-dim);
	font-size: 0.93rem;
	line-height: 1.55;
}

.card .foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--ego-line);
}

.price {
	font-variant-numeric: tabular-nums;
	font-weight: 650;
	font-size: 1.06rem;
}

.topic {
	font-size: 0.78rem;
	color: var(--ego-dim);
}

/* --------------------------------------------------------------- buttons -- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 0.94rem;
	font-weight: 620;
	cursor: pointer;
	background: var(--ego-accent);
	color: var(--ego-ink-on-accent);
}

.btn:hover { filter: brightness(1.08); text-decoration: none; }

.btn.ghost {
	background: transparent;
	border-color: var(--ego-line);
	color: var(--ego-ink);
}

.btn.ghost:hover { border-color: var(--ego-accent-dim); }

.btn[disabled],
.btn.disabled {
	opacity: 0.55;
	cursor: not-allowed;
	filter: none;
}

/* ---------------------------------------------------------------- single -- */

.product {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
	gap: 46px;
	padding: 50px 0 70px;
	align-items: start;
}

@media (max-width: 860px) {
	.product { grid-template-columns: 1fr; gap: 30px; }
}

.product h1 {
	margin: 12px 0 18px;
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	line-height: 1.14;
	letter-spacing: -0.025em;
}

.product .body { color: #cfdcd4; }
.product .body p { margin: 0 0 1.1em; }

.buybox {
	position: sticky;
	top: 100px;
	background: var(--ego-panel);
	border: 1px solid var(--ego-line);
	border-radius: var(--radius);
	padding: 24px;
}

.buybox .amount {
	font-size: 2.1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	margin-bottom: 4px;
}

.buybox .note {
	color: var(--ego-dim);
	font-size: 0.86rem;
	margin-bottom: 20px;
}

.buybox .btn { width: 100%; }

.meta {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--ego-line);
	font-size: 0.87rem;
	color: var(--ego-dim);
}

.meta dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
}

.meta dt { color: var(--ego-dim); }
.meta dd { margin: 0; color: var(--ego-ink); text-align: right; }

/* ------------------------------------------------------------ admin edit -- */

/* Deliberately quiet. It is scaffolding for whoever runs the shop, not part
   of the storefront, so it must never compete with the buy action. */
.alx-edit {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.82rem;
	color: var(--ego-dim);
	border: 1px dashed var(--ego-line);
	border-radius: 999px;
	padding: 5px 13px;
}

.alx-edit:hover {
	color: var(--ego-accent);
	border-color: var(--ego-accent-dim);
	border-style: solid;
	text-decoration: none;
}

.alx-edit.in-buybox {
	width: 100%;
	justify-content: center;
	margin-top: 12px;
}

/* Always visible on a card, not hover-revealed. Only users who can edit the
   post ever see it, and hiding a control from the very people who need it is
   not tidiness — it is a control nobody can find. Hover only strengthens it. */
.card { position: relative; }

.alx-edit.on-card {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(11, 15, 13, 0.86);
	backdrop-filter: blur(4px);
	border-style: solid;
	border-color: var(--ego-line);
	color: var(--ego-ink);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.card:hover .alx-edit.on-card {
	border-color: var(--ego-accent-dim);
	color: var(--ego-accent);
}

/* ---------------------------------------------------------------- notice -- */

.notice-bar {
	background: rgba(56, 211, 159, 0.07);
	border: 1px solid var(--ego-accent-dim);
	border-radius: 8px;
	padding: 12px 16px;
	color: var(--ego-dim);
	font-size: 0.88rem;
	margin-bottom: 26px;
}

.notice-bar strong { color: var(--ego-ink); }

/* ---------------------------------------------------------------- footer -- */

.site-footer {
	border-top: 1px solid var(--ego-line);
	background: var(--ego-panel-2);
	padding: 34px 0;
	color: var(--ego-dim);
	font-size: 0.88rem;
	margin-top: 40px;
}

.site-footer .wrap {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* ------------------------------------------------------------- utilities -- */

.empty {
	border: 1px dashed var(--ego-line);
	border-radius: var(--radius);
	padding: 46px;
	text-align: center;
	color: var(--ego-dim);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Keyboard focus must stay visible against a dark background. */
a:focus-visible,
.btn:focus-visible,
button:focus-visible {
	outline: 2px solid var(--ego-accent);
	outline-offset: 2px;
	border-radius: 4px;
}