/* ==================================================================
   03 - TYPOGRAPHY
   Headings, body text, links, lists, eyebrows.

   Rule for this theme: Fraunces is the voice, Inter is the
   information. Display serif for anything that names something
   (logo, section titles, product names). Inter for anything that
   explains or is clicked.
   ================================================================== */


/* ------------------------------------------------------------------
   HEADINGS
   ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
.wo-h1, .wo-h2, .wo-h3, .wo-h4 {
	font-family: var(--wo-font-display);
	font-weight: var(--wo-weight-semibold);
	line-height: var(--wo-leading-tight);
	letter-spacing: var(--wo-tracking-tight);
	color: var(--wo-text);
	text-wrap: balance;   /* stops a lone word dropping to its own line */
}

h1, .wo-h1 { font-size: var(--wo-text-4xl); }
h2, .wo-h2 { font-size: var(--wo-text-3xl); }
h3, .wo-h3 { font-size: var(--wo-text-2xl); }
h4, .wo-h4 { font-size: var(--wo-text-xl); }
h5         { font-size: var(--wo-text-lg); }
h6         { font-size: var(--wo-text-md); }

/* Optical sizing so Fraunces stays elegant when large, legible when small. */
h1, .wo-h1,
h2, .wo-h2 {
	font-variation-settings: 'opsz' 100, 'SOFT' 30, 'WONK' 1;
}

h3, h4, h5, h6 {
	font-variation-settings: 'opsz' 24, 'SOFT' 20, 'WONK' 1;
}


/* ------------------------------------------------------------------
   BODY TEXT
   ------------------------------------------------------------------ */

p {
	line-height: var(--wo-leading-normal);
	color: var(--wo-text-muted);
}

p + p {
	margin-top: var(--wo-space-4);
}

/* Intro paragraph under a section title. */
.wo-lead {
	font-size: var(--wo-text-md);
	line-height: var(--wo-leading-relaxed);
	color: var(--wo-text-muted);
	max-width: 62ch;
}

.wo-text-sm  { font-size: var(--wo-text-sm); }
.wo-text-xs  { font-size: var(--wo-text-xs); }

strong, b {
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-text);
}

em, i {
	font-style: italic;
}

small {
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
}

mark {
	background: var(--wo-gold-soft);
	color: var(--wo-gold);
	padding: 0 0.2em;
	border-radius: var(--wo-radius-xs);
}


/* ------------------------------------------------------------------
   EYEBROW
   The small gold uppercase label above every section title:
   SHOP / EXPLORE / OUR CRAFT / LOVED BY / FEATURED COLLECTION
   ------------------------------------------------------------------ */

.wo-eyebrow {
	display: block;
	font-family: var(--wo-font-body);
	font-size: var(--wo-text-xs);
	font-weight: var(--wo-weight-semibold);
	letter-spacing: var(--wo-tracking-wider);
	text-transform: uppercase;
	color: var(--wo-gold);
	margin-bottom: var(--wo-space-3);
}


/* ------------------------------------------------------------------
   SECTION HEADING BLOCK
   Eyebrow + title + optional lead, used by every homepage section.
   ------------------------------------------------------------------ */

.wo-section-head {
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.wo-section-head__title {
	font-size: var(--wo-text-3xl);
}

.wo-section-head__text {
	margin-top: var(--wo-space-4);
	font-size: var(--wo-text-md);
	color: var(--wo-text-muted);
	max-width: 60ch;
}

/* Centred variant - Shop by Fragrance, Loved by Fragrance Lovers */
.wo-section-head--center {
	text-align: center;
}

.wo-section-head--center .wo-section-head__text {
	margin-left: auto;
	margin-right: auto;
}


/* ------------------------------------------------------------------
   LINKS
   ------------------------------------------------------------------ */

a {
	color: var(--wo-text);
	text-decoration: none;
	transition: color var(--wo-duration-fast) var(--wo-ease);
}

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

/* Inline links inside written content get an underline for clarity. */
.wo-prose a,
.wo-entry-content a {
	color: var(--wo-primary-hover);
	text-decoration: underline;
	text-decoration-color: var(--wo-primary-line);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}

.wo-prose a:hover,
.wo-entry-content a:hover {
	text-decoration-color: var(--wo-primary-hover);
}

/* Small gold text link with arrow, e.g. "View all". */
.wo-link-gold {
	display: inline-flex;
	align-items: center;
	gap: var(--wo-space-2);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	color: var(--wo-gold);
}

.wo-link-gold:hover {
	color: var(--wo-gold-hover);
}

.wo-link-gold::after {
	content: '\2192';
	transition: transform var(--wo-transition);
}

.wo-link-gold:hover::after {
	transform: translateX(4px);
}


/* ------------------------------------------------------------------
   LISTS
   ------------------------------------------------------------------ */

ul, ol {
	list-style: none;
}

/* Bulleted lists inside written content - the Usage tab, About page. */
.wo-prose ul,
.wo-entry-content ul {
	list-style: disc;
	padding-left: 1.25em;
	margin: var(--wo-space-4) 0;
}

.wo-prose ol,
.wo-entry-content ol {
	list-style: decimal;
	padding-left: 1.35em;
	margin: var(--wo-space-4) 0;
}

.wo-prose li,
.wo-entry-content li {
	color: var(--wo-text-muted);
	margin-bottom: var(--wo-space-3);
	padding-left: var(--wo-space-2);
}

.wo-prose li::marker,
.wo-entry-content li::marker {
	color: var(--wo-primary);
}


/* ------------------------------------------------------------------
   PROSE
   Long-form written content: About page, blog posts, product tabs.
   ------------------------------------------------------------------ */

.wo-prose,
.wo-entry-content {
	font-size: var(--wo-text-base);
	line-height: var(--wo-leading-relaxed);
	color: var(--wo-text-muted);
}

.wo-prose > * + *,
.wo-entry-content > * + * {
	margin-top: var(--wo-space-5);
}

.wo-prose h2,
.wo-entry-content h2 {
	margin-top: var(--wo-space-12);
	font-size: var(--wo-text-2xl);
}

.wo-prose h3,
.wo-entry-content h3 {
	margin-top: var(--wo-space-10);
	font-size: var(--wo-text-xl);
}

.wo-prose h2:first-child,
.wo-entry-content h2:first-child,
.wo-prose h3:first-child,
.wo-entry-content h3:first-child {
	margin-top: 0;
}

/* First paragraph of a tab panel reads as a statement, not body copy. */
.wo-prose > p:first-child strong:only-child {
	display: block;
	font-size: var(--wo-text-md);
	color: var(--wo-text);
	line-height: var(--wo-leading-snug);
}


/* ------------------------------------------------------------------
   QUOTES
   ------------------------------------------------------------------ */

blockquote {
	position: relative;
	padding-left: var(--wo-space-6);
	border-left: 2px solid var(--wo-primary);
	font-size: var(--wo-text-lg);
	line-height: var(--wo-leading-snug);
	color: var(--wo-text);
}

blockquote cite {
	display: block;
	margin-top: var(--wo-space-4);
	font-size: var(--wo-text-sm);
	font-style: normal;
	color: var(--wo-text-dim);
}

/* Testimonial card quote - straight quotes, no left rule. */
.wo-quote {
	font-size: var(--wo-text-base);
	line-height: var(--wo-leading-normal);
	color: var(--wo-text);
	padding: 0;
	border: 0;
}

.wo-quote__author {
	display: block;
	margin-top: var(--wo-space-4);
	font-size: var(--wo-text-sm);
	color: var(--wo-text-dim);
}


/* ------------------------------------------------------------------
   STAR RATING
   ------------------------------------------------------------------ */

.wo-stars-rating {
	display: inline-flex;
	gap: 2px;
	color: var(--wo-star);
	font-size: var(--wo-text-sm);
	letter-spacing: 0.14em;
}


/* ------------------------------------------------------------------
   CODE
   ------------------------------------------------------------------ */

code, kbd, pre, samp {
	font-family: var(--wo-font-mono);
	font-size: 0.875em;
}

code {
	padding: 0.15em 0.4em;
	background: var(--wo-surface);
	border-radius: var(--wo-radius-xs);
	color: var(--wo-gold);
}

pre {
	padding: var(--wo-space-5);
	background: var(--wo-bg-deep);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius);
	overflow-x: auto;
}

pre code {
	padding: 0;
	background: none;
	color: var(--wo-text-muted);
}


/* ------------------------------------------------------------------
   COLOUR HELPERS
   ------------------------------------------------------------------ */

.wo-text-gold    { color: var(--wo-gold); }
.wo-text-primary { color: var(--wo-primary); }
.wo-text-muted   { color: var(--wo-text-muted); }
.wo-text-dim     { color: var(--wo-text-dim); }
.wo-text-white   { color: var(--wo-text); }
.wo-font-display { font-family: var(--wo-font-display); }
.wo-font-body    { font-family: var(--wo-font-body); }


/* ------------------------------------------------------------------
   WORDPRESS EDITOR CLASSES
   ------------------------------------------------------------------ */

.wp-caption,
figure {
	max-width: 100%;
}

.wp-caption-text,
figcaption {
	margin-top: var(--wo-space-3);
	font-size: var(--wo-text-xs);
	color: var(--wo-text-dim);
	text-align: center;
}

.alignleft {
	float: left;
	margin: 0 var(--wo-space-6) var(--wo-space-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--wo-space-4) var(--wo-space-6);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.sticky .wo-entry-title::before {
	content: '\2605';
	color: var(--wo-gold);
	margin-right: var(--wo-space-2);
}