/*
 * base.css - document shell, containers and the base type scale.
 *
 * Capabilities G5 and G19 of spec/00-BUILD-SPEC.md. Everything here used to
 * arrive as GeneratePress's main.min.css plus its dynamic-CSS emitter reading
 * generate_settings. Values come from section 4 of the build spec, which is
 * measured output, so this file should read as one coherent scale rather than
 * as a port of two stacked stylesheets.
 *
 * What is deliberately NOT here:
 *   - in-content link colour (snippet 31 owns .entry-content a)
 *   - the /gallery/ grid (snippet 40)
 *   - single-post widths and the hero box (snippet 22 FIX 11)
 *   - the pill button (assets/css/legacy-customizer.css, ruling C5)
 *   - any @font-face or font stylesheet (snippet 61, ruling C3)
 */

/* ==========================================================================
   Reset. Only the parts GP actually supplied that page CSS depends on.
   ========================================================================== */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
	margin: 0;
}

/*
 * Padding only. GP's reset zeroes it on every ul and ol and never touches
 * list-style, and the `ul[class], ol[class] { list-style: none }` that used to
 * be here is not a GP rule. Since WordPress 5.9 every list in post content is
 * `<ul class="wp-block-list">`, so that attribute selector was quietly removing
 * the bullets from all 32 articles, every legal page and the nested sidebar
 * category list. Menus, widgets and the WooCommerce lists all declare
 * list-style: none for themselves and never needed it.
 */
ul,
ol {
	padding-left: 0;
}

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

img {
	height: auto;
}

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

/* ==========================================================================
   Document
   ========================================================================== */

html {
	/*
	 * No font-size here on purpose. `rem` appears in exactly two places on this
	 * site and both were authored against the browser default of 16px.
	 */
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--page-bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-body);
	line-height: var(--lh-body);
	overflow-wrap: break-word;
}

/*
 * The container utility. `.grid-container` is a hard contract: snippet 22
 * FIX 12 prints the single-post entry header with this class and relies on it
 * for centring and width.
 */
.grid-container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--container);
}

.grid-parent {
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================================
   Page shell. Class-for-class as GeneratePress emitted it, because snippet 22,
   snippet 31, snippet 40 and audit_interlinks.py all key off these selectors.
   ========================================================================== */

/*
 * The auto margins are load-bearing on single posts. Snippet 22 FIX 11 caps
 * `.single-post #content` at 800px and supplies no margins of its own, so
 * without these the whole article column sits hard against the left edge of the
 * 1440px page instead of centred under its own entry header.
 */
.site-content {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	word-wrap: break-word;
}

/*
 * The two columns are declared as a pair that adds up to 100%, which is what
 * GeneratePress emitted per page from its dynamic CSS. Here the share hangs off
 * the layout body class instead, since this stylesheet is static.
 *
 * Leaving .content-area at 100% next to a 30% sidebar is not a rounding
 * problem, it overflows the flex row by 30% and the browser then splits the
 * deficit between the two children in proportion to their sizes. Measured on
 * /privacy-policy/ at 1440 with that mistake in place: sidebar 302.8px against
 * 393.6 live, article column 1009.2 against 918.4. Both are exact with the
 * shares below.
 */
.content-area {
	width: 100%;
}

.right-sidebar .content-area {
	width: var(--content-share);
}

/* No page uses a left sidebar today. Declared so that one could not overflow. */
.left-sidebar .content-area {
	width: calc(100% - var(--sidebar-share-left));
}

.is-right-sidebar {
	width: var(--sidebar-share);
}

.is-left-sidebar {
	width: var(--sidebar-share-left);
}

/*
 * one-container layout: the padding is on #content, NOT on .inside-article.
 * The 800/672 arithmetic on single posts depends on that (800 - 64 - 64 = 672).
 */
.one-container .site-content {
	padding: var(--content-padding);
}

.one-container.right-sidebar .site-main {
	margin-right: var(--sidebar-gap-one-container);
}

.site-main > * {
	margin-bottom: var(--space-separator);
}

.site-main > *:last-child {
	margin-bottom: 0;
}

/* Alignwide and alignfull pull back out through the content padding. */
.one-container .entry-content .alignwide,
.one-container .entry-content .alignfull {
	margin-left: calc(var(--content-pad-x) * -1);
	width: calc(100% + var(--content-pad-x) * 2);
	max-width: calc(100% + var(--content-pad-x) * 2);
}

@media (max-width: 768px) {

	.one-container .site-content {
		padding: var(--content-padding-mobile);
	}

	.one-container.right-sidebar .site-main {
		margin-right: 0;
	}

	.one-container .entry-content .alignwide,
	.one-container .entry-content .alignfull {
		margin-left: calc(var(--content-pad-x-mobile) * -1);
		width: calc(100% + var(--content-pad-x-mobile) * 2);
		max-width: calc(100% + var(--content-pad-x-mobile) * 2);
	}
}

/* The sidebar stacks under the content rather than squeezing it. */
@media (max-width: 768px) {

	.site-content {
		flex-direction: column;
	}

	/* Stacked, so every column is full width again and the shares stop applying. */
	.right-sidebar .content-area,
	.left-sidebar .content-area,
	.is-right-sidebar,
	.is-left-sidebar {
		width: 100%;
	}
}

/* ==========================================================================
   Type scale
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin-bottom: var(--heading-margin-bottom);
}

h1 {
	font-family: var(--font-heading);
	font-size: var(--fs-h1);
	font-weight: var(--fw-h1);
	line-height: var(--lh-h1);
}

h2 {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-h2);
	line-height: var(--lh-h2);
}

/*
 * h3 to h6 are given no family on purpose and inherit Catamaran from body.
 * The footer h3 really does compute as Catamaran 500 24px, not Playfair.
 * Do not "tidy" this: it is measured, and several live headings depend on it.
 */
h3 {
	font-size: var(--fs-h3);
	font-weight: var(--fw-h3);
	line-height: var(--lh-h3);
}

h4 {
	font-size: var(--fs-h4);
	font-weight: var(--fw-h4);
	line-height: var(--lh-h4);
}

h5 {
	font-size: var(--fs-h5);
	font-weight: 400;
}

h6 {
	font-size: var(--fs-h6);
	font-weight: 400;
}

p {
	margin-bottom: var(--paragraph-margin-bottom);
}

.entry-content p:last-child {
	margin-bottom: 0;
}

/* content_element_separator */
.post-image:not(:first-child),
.page-content:not(:first-child),
.entry-content:not(:first-child),
.entry-summary:not(:first-child),
footer.entry-meta {
	margin-top: var(--content-element-separator);
}

.entry-content {
	margin-top: 0;
}

/* ==========================================================================
   Inherited elements.

   GeneratePress shipped its own overrides for all of these on top of the
   browser defaults, so the defaults are not what has been rendering. Values
   come from spec/assets/gp-theme-base.css and were re-measured against the live
   site before being written here.

   `b, strong` is the one that bites. The UA default is `font-weight: bolder`,
   and bolder against `--fw-body: 300` computes to 400, not 700, which against
   300-weight body text reads as no emphasis at all. Measured before this rule
   existed: `.entry-content strong` was Catamaran 400 on /understanding-opal/
   and /privacy-policy/ against Catamaran 700 live, across 14 and 13 nodes.
   ========================================================================== */

b,
strong {
	font-weight: 700;
}

cite,
dfn,
em,
i {
	font-style: italic;
}

abbr,
acronym {
	border-bottom: 1px dotted var(--abbr-underline);
	cursor: help;
}

/* GP dropped the UA underline on <ins> and left <del> on its strike-through. */
ins,
mark {
	text-decoration: none;
}

small {
	font-size: 75%;
}

/*
 * The normalize pair rather than the UA's vertical-align: sub / super, so a
 * footnote marker cannot grow the line box it sits in.
 */
sub,
sup {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: 0.5ex;
}

address {
	margin: 0 0 var(--paragraph-margin-bottom);
}

th {
	font-weight: 700;
}

/* ==========================================================================
   Links. Body-text link colour ONLY. .entry-content a is snippet 31's, and
   out-specifying it here would kill the gold prose links on 32 articles.
   ========================================================================== */

a {
	color: var(--link);
	text-decoration: none;
	transition: var(--transition-link);
}

a:visited {
	color: var(--link);
}

a:hover,
a:focus,
a:active {
	color: var(--link-hover);
}

/* ==========================================================================
   Lists, quotes, rules, tables
   ========================================================================== */

/*
 * Global rather than scoped to .entry-content, and 3em rather than 1.5em, both
 * of which are GP's values: measured 57px of left margin on every content list
 * live against 28.5px here. Nested lists step in by half that and lose the
 * bottom gap. The `.entry-content li { margin-bottom: 0.4em }` that used to sit
 * here is not a GP rule and was padding every list on the site by 7.6px a row.
 * `.widget ul` and the navigation lists reset the margin for themselves.
 */
ol,
ul {
	margin: 0 0 var(--paragraph-margin-bottom) 3em;
}

li > ol,
li > ul {
	margin-bottom: 0;
	margin-left: 1.5em;
}

blockquote {
	border-left: 5px solid var(--wash);
	margin: 0 0 var(--paragraph-margin-bottom);
	padding: 20px;
	font-size: 1.2em;
	font-style: italic;
	position: relative;
}

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

hr {
	background-color: var(--rule-color);
	border: 0;
	height: 1px;
	margin: 40px 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: var(--paragraph-margin-bottom);
	width: 100%;
}

th,
td {
	border: var(--rule);
	padding: 8px;
	text-align: left;
}

/*
 * Wide tables scroll inside their own box rather than pushing the page
 * sideways. /ring-size-guide/ is the template that needs this.
 */
.entry-content .rlj-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * The shorthand is deliberate: it also resets weight to 400, which is what GP's
 * own `font:` shorthand did, and inline code inheriting the 300 body weight is
 * the difference the audit measured. `samp` is deliberately NOT in this list,
 * because GP left it on the UA default and matching means matching all of it.
 */
code,
kbd,
tt,
var {
	font: var(--fs-code) var(--font-mono);
}

/*
 * GP left <pre> in the body face at body size and gave it only a block
 * treatment. That reads oddly for preformatted text, but there is no <pre> on
 * any of the 20 captured templates, so this reproduces GP rather than inventing
 * a new look in the middle of a theme swap.
 */
pre {
	background: var(--wash);
	font-family: inherit;
	font-size: inherit;
	line-height: normal;
	margin-bottom: var(--paragraph-margin-bottom);
	max-width: 100%;
	overflow: auto;
	padding: 20px;
}

figure {
	margin-bottom: var(--paragraph-margin-bottom);
}

figcaption {
	font-size: var(--fs-card-excerpt);
	color: var(--meta);
	margin-top: 8px;
}

/* ==========================================================================
   Forms and base buttons.

   These are the GeneratePress-equivalent defaults (G19), NOT the pill. The
   pill lives in legacy-customizer.css and applies to .button / WooCommerce
   only, exactly as it does live. A CF7 submit and a bare <button> render this
   grey treatment today, so they render it here too.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	background-color: var(--form-bg);
	border: 1px solid var(--form-border);
	border-radius: 0;
	color: var(--form-text);
	padding: 10px 15px;
	max-width: 100%;
	width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
	background-color: var(--form-bg-focus);
	border-color: var(--form-border-focus);
	color: var(--text);
	outline: 0;
}

textarea {
	min-height: 150px;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: var(--contrast-2);
	border: 1px solid transparent;
	border-radius: 0;
	color: var(--base-3);
	cursor: pointer;
	display: inline-block;
	font-weight: 500;
	padding: 10px 20px;
	text-align: center;
	width: auto;
}

/* Core's button block keeps its own 500 weight and its own radius. */
.wp-block-button__link {
	font-weight: 500;
}

/*
 * The full-width featured image above a page's content. One page uses it,
 * /about/, and it is that page's LCP element. Width and height come from
 * the_post_thumbnail(), so the band reserves its box before the file lands.
 */
.page-header-image img {
	display: block;
	height: auto;
	width: 100%;
}

/* ==========================================================================
   Article shell
   ========================================================================== */

.inside-article {
	min-width: 0;
}

.entry-meta {
	color: var(--meta);
	font-size: var(--fs-meta);
}

.entry-meta a {
	color: var(--meta);
}

.entry-meta a:hover,
.entry-meta a:focus {
	color: var(--meta-hover);
}

/*
 * The modified date stays in the markup for itemprop="dateModified" and is not
 * shown. A byline reading "July 30, 2026 June 17, 2026" is what you get without
 * this, and it is how the baseline behaves too.
 */
.entry-meta time.updated:not(.published) {
	display: none;
}

@media (max-width: 768px) {

	.entry-meta {
		font-size: inherit;
	}
}

.page-header {
	margin-bottom: var(--space-separator);
}

.page-title {
	margin-bottom: 0;
}

/* ==========================================================================
   Widgets
   ========================================================================== */

.widget-area .widget {
	margin-bottom: var(--space-separator);
	padding: var(--widget-padding);
}

.widget-area .widget:last-child {
	margin-bottom: 0;
}

.widget-area .widget-title {
	font-family: var(--font-heading);
	margin-bottom: 20px;
}

.widget ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/*
 * The two rules that give the sidebar its rhythm and its sub-category indent.
 * Without them the product-categories widget loses 9px between rows and the
 * child terms sit flush with their parents: measured 40px row pitch live
 * against 31px, and no indent at all on Opal Rings under Rings.
 */
.widget ul li {
	list-style-type: none;
	margin-bottom: 0.5em;
	position: relative;
}

.widget ul li ul {
	margin-left: 1em;
	margin-top: 0.5em;
}

/*
 * GP set this globally on the WooCommerce cart widget and both copies leaned on
 * it: the three header mini carts, which otherwise inherit 15px from
 * .menu-bar-items, and the sidebar copy, which otherwise inherits the 19px body
 * size. Measured live: all four compute 14px. Kept here rather than in
 * header.css because it is not a header rule; WP6 may move it to
 * woocommerce.css when that file exists.
 */
.woocommerce.widget_shopping_cart {
	font-size: var(--fs-cart-widget);
}

/*
 * Only in a two-sidebar layout, which is how GP scopes it and which this site
 * never uses. Unscoped it indents the whole sidebar 30px inside its own column,
 * so the widgets sit at x=1012 against x=982 live and lose 30px of width. In
 * the one-container right-sidebar layout the gutter is the 64px margin on
 * .site-main, not this.
 */
.both-right .inside-right-sidebar,
.both-left .inside-right-sidebar {
	margin-left: var(--sidebar-gap);
}

@media (max-width: 768px) {

	.widget-area .widget {
		padding: var(--widget-padding-mobile);
	}

	.both-right .inside-right-sidebar,
	.both-left .inside-right-sidebar {
		margin-left: 0;
	}
}

/* ==========================================================================
   Post and archive navigation
   ========================================================================== */

.post-navigation,
.paging-navigation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: var(--paging-padding) 0;
}

.paging-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-left: auto;
}

.page-numbers {
	padding: 4px 10px;
}

.page-numbers.current {
	font-weight: 600;
	border-bottom: 2px solid var(--contrast);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	display: flex;
	align-items: baseline;
	gap: 8px;
	max-width: 48%;
}

.post-navigation .nav-next {
	margin-left: auto;
	text-align: right;
}

/* ==========================================================================
   Back to top
   ========================================================================== */

.generate-back-to-top {
	background-color: var(--back-to-top-bg);
	border-radius: var(--radius-back-to-top);
	bottom: 30px;
	color: var(--base-3);
	font-size: 20px;
	line-height: 40px;
	opacity: 0.1;
	position: fixed;
	right: 30px;
	text-align: center;
	transform: translateY(1000px);
	transition: opacity 300ms ease-in-out;
	width: 40px;
	z-index: var(--z-back-to-top);
}

.generate-back-to-top__show {
	opacity: 1;
	transform: translateY(0);
}

a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
	background-color: var(--back-to-top-bg-hover);
	color: var(--base-3);
}

/* ==========================================================================
   Icons. One rule set for all 14 inline SVGs (inc/icons.php).
   ========================================================================== */

.gp-icon {
	display: inline-flex;
	align-self: center;
}

.gp-icon svg {
	fill: currentColor;
	height: 1em;
	position: relative;
	top: 0.125em;
	width: 1em;
}