/* ==========================================================================
   Base — typography and elements.
   Astra ships sane defaults, so this file corrects rather than resets.
   ========================================================================== */

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

body {
	background-color: var(--lb-surface);
	color: var(--lb-on-surface);
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-body);
	line-height: var(--lb-leading-body);
	font-weight: 400;
	/* Old-style figures in running text, lining figures in specs (set later).
	   Chandelier catalogues are full of numbers; this keeps them elegant. */
	font-variant-numeric: oldstyle-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* --- Headings -------------------------------------------------------------
   Cormorant is drawn small and delicate; at display sizes it needs a lighter
   weight and negative tracking or it looks like a wedding invitation. */
h1, h2, h3, h4, h5, h6,
.lb-display,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--lb-font-display);
	font-weight: 300;
	letter-spacing: var(--lb-tracking-display);
	line-height: var(--lb-leading-display);
	color: var(--lb-on-surface);
	text-wrap: balance;
	margin-top: 0;
}

h1, .entry-title { font-size: var(--lb-size-h1); }
h2 { font-size: var(--lb-size-h2); }
h3 { font-size: var(--lb-size-h3); }
h4, h5, h6 { font-size: 1.125rem; font-weight: 400; }

.lb-display {
	font-size: var(--lb-size-display);
	line-height: 1.06;
}

/* Italic Cormorant is noticeably more beautiful than its roman. Used for the
   one or two words per page that carry the romance. */
.lb-display em,
h1 em, h2 em {
	font-style: italic;
	font-weight: 300;
	color: var(--lb-accent);
}

p { margin: 0 0 var(--lb-space-md); }
p:last-child { margin-bottom: 0; }

/* --- Eyebrow: small caps over a hairline. The workhorse of luxury layout —
   it labels a section without competing with the display type. ----------- */
/* No rule before the label.

   There used to be a 1px dash up to 3rem long in front of every eyebrow, on
   all twelve of them. It is the decoration that gets added when a small caps
   label is felt to need help, and it does not: the tracking, the size and the
   colour already mark it as a label. Twelve of them down a page read as a
   tic rather than as a system.

   The flex layout went with it. It existed only to sit the dash beside the
   text; for a single line of type inline-block is both simpler and safer,
   since a flex container will not wrap its anonymous text item the way a
   long eyebrow needs to on a narrow screen. */
.lb-eyebrow {
	display: inline-block;
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-micro);
	font-weight: 500;
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	font-variant-numeric: lining-nums;
	color: var(--lb-accent);
	margin-bottom: var(--lb-space-md);
}

.lb-lede {
	font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
	line-height: 1.6;
	color: var(--lb-on-surface-muted);
	max-width: 54ch;
}

/* --- Links ----------------------------------------------------------------
   Underline grows from the left on hover rather than simply appearing, which
   reads as considered rather than as a default browser state. */
a {
	color: inherit;
	text-decoration: none;
	transition: color var(--lb-dur-fast) var(--lb-ease);
}

.entry-content a:not(.button):not(.wp-block-button__link) {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	padding-bottom: 2px;
	transition: background-size var(--lb-dur) var(--lb-ease-out), color var(--lb-dur-fast) var(--lb-ease);
}

.entry-content a:not(.button):not(.wp-block-button__link):hover {
	color: var(--lb-accent);
	background-size: 0 1px;
	background-position: 100% 100%;
}

/* --- Focus. Visible, gold, and never removed. Keyboard users buying a
   €9,000 chandelier deserve to see where they are. ----------------------- */
:focus-visible {
	outline: 2px solid var(--lb-gold);
	outline-offset: 3px;
	border-radius: var(--lb-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection {
	background: var(--lb-gold);
	color: var(--lb-ink);
}

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

hr, .lb-rule {
	border: 0;
	height: 1px;
	background: var(--lb-rule);
	margin: var(--lb-space-xl) 0;
}

/* A hairline that catches colour, for the few places that want a flourish. */
.lb-rule--prism {
	background: var(--lb-prism);
	opacity: 0.7;
}

/* --- Forms ---------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="password"], textarea, select {
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-body);
	color: var(--lb-on-surface);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lb-rule);
	border-radius: 0;
	padding: var(--lb-space-sm) 0;
	transition: border-color var(--lb-dur) var(--lb-ease);
}

input:focus, textarea:focus, select:focus {
	border-bottom-color: var(--lb-gold);
	outline: none;
}

label {
	font-size: var(--lb-size-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
}

/* --- Numbers. Specs, prices, dimensions: lining figures, tabular so columns
   of measurements line up. ----------------------------------------------- */
.price, .lb-spec, .lb-specs, .quantity, .woocommerce-Price-amount, table {
	font-variant-numeric: lining-nums tabular-nums;
}

/* --- Respect reduced motion. Every transition here is decorative. -------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}