/**
 * Pelagia Book Store — Base Styles
 *
 * Brand spec (updated):
 *   Body:    16px (1rem)
 *   H1:      28–48px (clamp) — weight 700, letter-spacing -0.025em
 *   H2:      24–32px (clamp) — weight 700, letter-spacing -0.020em
 *   H3:      18–22px (clamp) — weight 700, letter-spacing -0.010em
 *   H4–H6:   18px / 16px / 14px — weight 500–700
 *   Small:   14px — meta, labels
 *   Primary: #B3492F Terracotta
 *   Headings: #1B1464 Deep Navy
 *
 * @package Pelagia
 */

/* ── Reset ───────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: inherit; /* Cascade NB Akademie Std from html/body to every element,
	                         including those targeted by WP/WC injected stylesheets */
}

html {
	font-size: 100%; /* 16px root */
	font-family: var(--font-family); /* root inheritance anchor — overrides WP/WC injected sheets */
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-family);         /* 16px */
	font-size: var(--text-body);             /* 16px */
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal); /* 1.6 */
	color: var(--color-body);
	background-color: var(--color-bg);   /* #F4F4F4 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── Clean White Background Overrides ────────────── */
body.page,
body.single-post,
body.single-product,
body.single-pelagia_author,
body.single-pelagia_publisher,
body.archive,
body.post-type-archive-product,
body.woocommerce-cart,
body.woocommerce-checkout,
body.page .site-main,
body.single-post .site-main,
body.single-product .site-main,
body.single-pelagia_author .site-main,
body.single-pelagia_publisher .site-main,
body.archive .site-main,
body.post-type-archive-product .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
	background-color: var(--color-white) !important;
}

.site-main {
	overflow-x: clip;
}

/* ── Universal font enforcement ──────────────────── */
/* Targets known escape points: WP block editor, WooCommerce injected styles,
   admin bar, Gutenberg styles, and browser UA defaults for form controls. */
.wp-block,
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-paragraph,
.wp-block-heading,
.wp-block-list,
.wp-block-image figcaption,
.wp-block-table,
.wp-block-quote,
.wp-block-code,
.wp-block-preformatted,
.wp-block-pullquote,
.wp-block-button,
.wp-block-button__link,
.woocommerce,
.woocommerce-page,
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.wc-block-components-notice,
.wc-block-cart,
.wc-block-checkout,
.wc-block-product-template,
#wpadminbar,
#wpadminbar * {
	font-family: var(--font-family) !important;
}

/* ── Typography ──────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family);
	line-height: var(--line-height-snug); /* 1.3 */
	color: var(--color-secondary);        /* Deep Navy */
}

h1 {
	font-size: var(--text-h1);            /* clamp 28–48px */
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-h1); /* -0.025em */
}

h2 {
	font-size: var(--text-h2);            /* clamp 24–32px */
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-h2); /* -0.020em */
}

h3 {
	font-size: var(--text-h3);            /* clamp 18–22px */
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-h3); /* -0.010em */
}

h4 {
	font-size: var(--text-h4);            /* 18px */
	font-weight: var(--font-weight-medium);
}

h5 {
	font-size: var(--text-h5);            /* 16px */
	font-weight: var(--font-weight-medium);
}

h6 {
	font-size: var(--text-h6);            /* 14px */
	font-weight: var(--font-weight-medium);
}

p {
	font-size: var(--text-body);          /* 16px */
	line-height: var(--line-height-normal); /* 1.6 */
	color: var(--color-body);
	margin-bottom: var(--space-4);
}

p:last-child { margin-bottom: 0; }

/* Small / meta text — 14px */
small,
.meta-text,
.text-sm {
	font-size: var(--text-sm);            /* 14px */
	line-height: var(--line-height-normal);
}

a {
	color: var(--color-primary-text);     /* #9E3D25 — 5.1:1 on white, WCAG AA */
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover { color: var(--color-primary); }

a:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* ── Universal focus-visible ring ───────────────── */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

strong, b { font-weight: var(--font-weight-bold); }
em, i { font-style: italic; }

ul, ol {
	list-style: none;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input, button, textarea, select {
	font: inherit;
}

button {
	cursor: pointer;
	border: none;
	background: none;
}

textarea { resize: vertical; }

/* ── Utility: Screen Reader Only ─────────────────── */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-bg);
	border-radius: var(--radius-sm);
	clip: auto !important;
	clip-path: none;
	color: var(--color-primary);
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	height: auto;
	left: var(--space-4);
	line-height: normal;
	padding: var(--space-3) var(--space-6);
	text-decoration: none;
	top: var(--space-4);
	width: auto;
	z-index: var(--z-toast);
	box-shadow: var(--shadow-lg);
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.75rem 1.75rem;
	min-height: 44px;            /* WCAG 2.5.8 touch target */
	min-width: 44px;
	font-family: var(--font-family);
	font-size: var(--text-sm);   /* 14px */
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-ui);
	text-transform: uppercase;
	border-radius: var(--card-radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--transition-base),
	            border-color var(--transition-base),
	            color var(--transition-base),
	            transform var(--transition-base),
	            box-shadow var(--transition-base);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

/* Primary — Terracotta background, white text */
.btn--primary {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}
.btn--primary:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.btn--primary:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Secondary — Outline, Terracotta border */
.btn--outline {
	background-color: transparent;
	color: var(--color-primary-text);
	border-color: var(--color-primary);
}
.btn--outline:hover {
	background-color: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-2px);
}
.btn--outline:active {
	transform: translateY(0);
}

/* Ghost — text only, color change on hover */
.btn--ghost {
	background-color: transparent;
	color: var(--color-primary-text);
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
}
.btn--ghost:hover {
	color: var(--color-primary);
	background-color: transparent;
}

/* Universal focus ring for all buttons */
.btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	box-shadow: 0 0 0 4px rgba(179, 73, 47, 0.2);
}

/* Accent — Navy */
.btn--accent {
	background-color: var(--color-secondary);
	color: var(--color-white);
	border-color: var(--color-secondary);
}
.btn--accent:hover {
	background-color: var(--color-secondary-light);
	border-color: var(--color-secondary-light);
	color: var(--color-white);
}

/* White outline (on dark backgrounds) */
.btn--white-outline {
	background-color: transparent;
	color: var(--color-white);
	border-color: var(--color-white);
}
.btn--white-outline:hover {
	background-color: var(--color-white);
	color: var(--color-primary);
}

/* Size variants */
.btn--sm {
	padding: 0.5rem 1.25rem;
	min-height: 44px;
	font-size: var(--text-xs);   /* 12px */
}

.btn--lg {
	padding: 1rem 2.5rem;
	font-size: var(--text-body); /* 16px */
}

.btn--full { width: 100%; }

/* ── Forms ───────────────────────────────────────── */
.form-field {
	position: relative;
	margin-bottom: var(--space-5);
}

.form-label {
	display: block;
	font-size: var(--text-sm);            /* 14px */
	font-weight: var(--font-weight-medium);
	color: var(--color-dark);
	margin-bottom: var(--space-2);
}

.form-input,
.form-select,
.form-textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	min-height: 48px;                     /* Comfortable tap target */
	font-family: var(--font-family);
	font-size: 1rem;                      /* 16px — prevents iOS auto-zoom */
	color: var(--color-dark);
	background-color: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	-webkit-appearance: none;
	appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(179, 73, 47, 0.12);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-muted); }

/* Validation states */
.form-input:invalid:not(:placeholder-shown) {
	border-color: #d32f2f;
}
.form-input.is-valid {
	border-color: #388e3c;
}

/* Custom select arrow */
.form-select {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	cursor: pointer;
}

.form-textarea {
	min-height: 140px;
	resize: vertical;
	line-height: var(--line-height-normal);
}

/* ── Breadcrumb ──────────────────────────────────── */
.pelagia-breadcrumb {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-8);
}

.pelagia-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	list-style: none;
}

.pelagia-breadcrumb li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);   /* 14px */
	color: var(--color-muted);
}

.pelagia-breadcrumb a {
	color: var(--color-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}
.pelagia-breadcrumb a:hover { color: var(--color-primary); }

.breadcrumb-sep { color: var(--color-border); font-size: var(--text-xs); }

/* ── Skip Link ───────────────────────────────────── */
.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: var(--z-toast);
}
.skip-link:focus { top: 0; }

/* ── Section utilities ───────────────────────────── */
.section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-8);
	gap: var(--space-4);
}

.section-title {
	font-size: var(--text-h2);
	font-weight: var(--font-weight-bold);
	color: var(--color-secondary);        /* Navy */
	letter-spacing: var(--letter-spacing-h2);
	line-height: var(--line-height-snug);
	position: relative;
}

.section-title::after {
	content: '';
	display: block;
	width: 40px;
	height: 1.5px;
	background-color: var(--color-primary); /* Terracotta underline */
	margin-top: var(--space-2);
}

.section-browse-link {
	font-size: var(--text-sm);            /* 14px */
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	text-decoration: none;
	letter-spacing: var(--letter-spacing-ui);
	text-transform: uppercase;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	transition: gap var(--transition-fast), color var(--transition-fast);
}

.section-browse-link::after {
	content: '→';
	transition: transform var(--transition-fast);
}

.section-browse-link:hover { color: var(--color-primary-dark); }
.section-browse-link:hover::after { transform: translateX(4px); }

/* ── WordPress Alignment ─────────────────────────── */
.alignleft {
	float: left;
	margin-right: var(--space-6);
	margin-bottom: var(--space-4);
}
.alignright {
	float: right;
	margin-left: var(--space-6);
	margin-bottom: var(--space-4);
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-4);
}
.alignfull {
	margin-left: calc(var(--container-pad) * -1);
	margin-right: calc(var(--container-pad) * -1);
	max-width: none;
}

/* ── Entry content ───────────────────────────────── */
.entry-content p {
	max-width: var(--body-max-width);     /* 72ch — optimises line length */
}

.entry-content ul,
.entry-content ol {
	list-style: revert;
	padding-left: 1.5em;
	margin-bottom: var(--space-4);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: var(--space-8);
	margin-bottom: var(--space-4);
}

/* ── Reveal Animations ───────────────────────────── */
.reveal-element {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
}

.reveal-element.is-visible {
	opacity: 1;
	transform: translateY(0);
}