/*
Theme Name: CoreDigify Lauriva
Theme URI: https://lauriva.coredigify.com
Template: coredigify-base
Author: CoreDigify
Author URI: https://my.coredigify.com
Description: Veikala dizains Lauriva Cosmetics skropstu serumam — silti balta palete ar rožainiem toņiem, cieši saspiesti virsraksti un #C84464 akcents. coredigify-base bērntēma: pievieno veikala hromu (paziņojumu josla, galvene ar WooCommerce groza un konta ikonām, kājene) un dizaina marķierus. Lapu saturs dzīvo post_content (CDDS).
Version: 0.2.11
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coredigify-lauriva
*/

/* ==========================================================================
   SCOPE OF THIS FILE — read before adding anything.

   Three stylesheets make up this theme, in load order:

     1. coredigify-base/style.css   the chrome-free full-bleed canvas
     2. THIS FILE                   design tokens + site chrome
     3. assets/lauriva.css          the component/design layer

   This file owns: the token declarations, the announcement bar, the header
   shell that (3) decorates, the WooCommerce cart/account icons, the footer,
   the no-JS navigation fallback, and the plain blog fallback templates.

   It does NOT own buttons-as-a-component (.lv-btn), the sticky-header states,
   the mobile nav drawer, or any page section — those are (3)'s, and (3) loads
   after this file and wins on equal specificity by design.

   TOKENS. Both this file and (3) declare the same `--lv-*` names, and both
   derive them from the theme.json presets with a literal hex fallback:

       --lv-accent: var(--wp--preset--color--accent, #c84464);

   So theme.json is the single source of truth for colour, each stylesheet is
   correct on its own (editor iframe, plugin fragment, missing sibling), and
   the two cannot drift apart while they both read the same presets. If you
   change a colour, change it in theme.json — not here.

   Class prefix for everything this theme owns: lv-
   ========================================================================== */

:root {
	/* Palette — measured from the client's reference build. */
	--lv-accent: var(--wp--preset--color--accent, #c84464);
	--lv-ink: var(--wp--preset--color--ink, #231b1e);       /* warm near-black */
	--lv-cream: var(--wp--preset--color--cream, #f8f5f4);   /* warm off-white */
	--lv-rose-100: var(--wp--preset--color--rose-100, #f3e9eb);
	--lv-rose-200: var(--wp--preset--color--rose-200, #e8dcdf);
	--lv-rose-300: var(--wp--preset--color--rose-300, #d7c7cb);
	--lv-bg: var(--wp--preset--color--base, #ffffff);
	--lv-text: var(--wp--preset--color--contrast, #000000);

	/* Derived surfaces — same hues, transparency only. */
	--lv-rule: var(--lv-rose-200);
	--lv-muted: color-mix(in srgb, var(--lv-ink) 62%, transparent);

	/* Shape + layout */
	--lv-radius: 3px;
	--lv-container-w: 1440px;
	--lv-gutter: clamp(1.25rem, 5vw, 4.5rem);

	/* Type — the measured signature of this design. */
	--lv-heading-weight: 620;
	--lv-heading-lh: 0.96;
	--lv-heading-ls: -0.052em;
	--lv-micro-size: 0.6875rem;   /* 11px — buttons, eyebrows, nav, labels */
	--lv-micro-weight: 750;
	--lv-micro-ls: 0.12em;
	--lv-body-size: 1.125rem;     /* 18px */

	/* Measured by lauriva.js from the sticky header; 0 until then. */
	--lv-header-h: 0px;
}

/* ==========================================================================
   01 · Base
   ========================================================================== */

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--lv-bg);
	color: var(--lv-text);
	font-size: var(--lv-body-size);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/* Two-tone headings — the reference sets the second phrase lighter and
   italic. Both spellings are supported: an <em> written in the editor, or an
   explicit .lv-soft span where italics are not wanted. */
h1 em, h2 em, h3 em,
.wp-block-post-title em,
.lv-soft {
	font-style: italic;
	font-weight: 420;
	color: #868283;                                        /* fallback */
	color: color-mix(in srgb, var(--lv-ink) 55%, #ffffff);
}
.lv-soft--upright { font-style: normal; }

/* ==========================================================================
   02 · Buttons
   theme.json (styles.elements.button) carries colour, radius, padding and the
   11px / 750 / 0.12em uppercase type for block buttons. What is left here is
   the measured 48px minimum height, which theme.json cannot express, plus a
   plain-CSS safety net for WooCommerce's classic buttons.

   assets/lauriva.css owns .lv-btn and re-states the WooCommerce bridge with
   !important; where both files touch a button, that file wins. The one
   declaration below that survives on .lv-btn is min-height, which is exactly
   what makes the two layers agree on 48px.
   ========================================================================== */

.wp-element-button,
.wp-block-button__link,
.lv-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: var(--lv-radius);
	font-family: inherit;
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

/* Safety net only: correct when assets/lauriva.css is not deployed. That file
   restates these with !important to beat WooCommerce's own stylesheet. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	padding: 0 29px;
	border: 0;
	background: var(--lv-accent);
	color: #fff;
}

/* ==========================================================================
   03 · Announcement bar
   Pure black — the one place #000 is used as a surface.

   TWO bars can exist in the markup and exactly one ever renders. The theme's
   own default sits in parts/header.html and carries `--fallback`; the
   Customizer shortcode ([lauriva_announcement], see functions.php) prints
   after it and only when its field is filled. The `:has(~ …)` rule below
   stands the default down the moment the Customizer has something to say, so
   editing the text in Vietne -> Pielāgot still works and nothing is ever
   shown twice.

   Type is the reference's: 14px, regular, sentence case, 8px of padding —
   a 38px bar. Deliberately not the --lv-micro-* caps used for buttons.
   ========================================================================== */

.lv-announce {
	background: #000;
	color: #fff;
}

.lv-announce--fallback:has(~ .lv-announce) {
	display: none;
}

.lv-announce__in {
	max-width: none;
	margin: 0;
	padding: 8px var(--lv-gutter, 20px);
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.6;
}

.lv-announce a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   04 · Header
   The shell only. assets/lauriva.css owns .lv-header's sticky/overlay/is-stuck
   states, .lv-header__inner, .lv-header__logo, .lv-nav and .lv-nav-toggle.
   What is left here is what that file does not cover: the dropdown, the
   current-page marker, the cart/account icons, and the no-JS fallback.
   ========================================================================== */

/* Standalone fallback: without assets/lauriva.css the header must still be a
   readable row rather than a stack of blocks. Deliberately identical to the
   design layer's own rule — nothing here may add a decoration that file does
   not know about, because `.lv-header` is transparent while it overlays the
   hero and a stray border would draw a line across the image. */
.lv-header__inner { display: flex; align-items: center; gap: 1rem; }

/* Sub-menus. The design layer styles `.lv-nav ul` and `.lv-nav a` but has no
   opinion about a second level; this is the whole dropdown, hover/focus only,
   no JavaScript involved. */
.lv-nav li { position: relative; }

.lv-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -14px;
	min-width: 210px;
	margin: 0;
	padding: 8px;
	list-style: none;
	display: block;
	background: var(--lv-bg);
	color: var(--lv-text);
	border: 1px solid var(--lv-rule);
	border-radius: var(--lv-radius);
	box-shadow: 0 18px 40px -20px rgba(35, 27, 30, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
	z-index: 60;
}

.lv-nav li:hover > .sub-menu,
.lv-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.lv-nav .sub-menu a {
	display: block;
	padding: 8px 14px;
	letter-spacing: 0.06em;
}

.lv-nav .current-menu-item > a,
.lv-nav .current-menu-parent > a { color: var(--lv-accent); }

/* --- Cart + account icons ------------------------------------------------
   Named .lv-iconbtn, not .lv-action, because assets/lauriva.css already uses
   .lv-actions for CTA button groups and the two are unrelated things. */

.lv-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--lv-radius);
	color: inherit;
	text-decoration: none;
}

.lv-iconbtn:hover { color: var(--lv-accent); }
.lv-iconbtn svg { width: 21px; height: 21px; display: block; }

.lv-cart-count {
	position: absolute;
	top: 3px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--lv-accent);
	color: #fff;
	font-size: 10px;
	font-weight: var(--lv-micro-weight);
	line-height: 17px;
	text-align: center;
}

.lv-cart-count.is-empty { display: none; }

/* --- No-JS navigation fallback ------------------------------------------
   assets/lauriva.css turns .lv-nav into a fixed drawer below 900px and hides
   it until lauriva.js adds `.is-open`. lauriva.js sets `html.lv-js` as its
   first statement, so `html:not(.lv-js)` is a reliable "scripts never ran"
   signal — a blocked, failed or disabled script would otherwise leave the
   mobile menu permanently unreachable.

   This file loads BEFORE the design layer, so these rules deliberately carry
   the higher specificity they need to win. */
@media (max-width: 899px) {
	html:not(.lv-js) .lv-header__inner { flex-wrap: wrap; }

	html:not(.lv-js) .lv-nav {
		position: static;
		inset: auto;
		order: 3;
		flex: 1 0 100%;
		max-height: none;
		padding: 0 0 12px;
		border-bottom: 0;
		background: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		overflow-x: auto;
		scrollbar-width: none;
	}

	html:not(.lv-js) .lv-nav::-webkit-scrollbar { display: none; }

	html:not(.lv-js) .lv-nav ul {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 1.25rem;
	}

	html:not(.lv-js) .lv-nav a {
		font-size: var(--lv-micro-size);
		font-weight: var(--lv-micro-weight);
		letter-spacing: var(--lv-micro-ls);
		text-transform: uppercase;
		white-space: nowrap;
	}

	html:not(.lv-js) .lv-nav .sub-menu { display: none; }
	html:not(.lv-js) .lv-nav-toggle { display: none; }
}

/* ==========================================================================
   05 · Content shells
   ========================================================================== */

/* CDDS pages are full-bleed: post_content owns the viewport (see the base
   theme). WooCommerce's own pages — cart, checkout, my account — are ordinary
   pages, so give their markup a container instead of letting it run edge to
   edge. */
.lv-page .woocommerce,
.lv-page .woocommerce-notices-wrapper {
	max-width: var(--lv-container-w);
	margin-inline: auto;
	padding-inline: var(--lv-gutter);
}

.lv-page .woocommerce { padding-block: 56px 72px; }

/* Blog fallback (index/single) — plain and quiet; this shop is not a
   magazine, and these two templates exist so posts and archives are not
   rendered by the wrong template, not to be a design. */
.lv-shell {
	max-width: 900px;
	margin-inline: auto;
	padding: 64px var(--lv-gutter) 88px;
}

.lv-sechead { margin: 0 0 40px; }
.lv-sechead .wp-block-heading { margin: 0; }

.lv-list .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.lv-entry { padding-bottom: 40px; border-bottom: 1px solid var(--lv-rule); }

.lv-entry .wp-block-post-title {
	margin: 10px 0;
	font-size: 1.625rem;
	letter-spacing: -0.03em;
}

.lv-entry .wp-block-post-title a { text-decoration: none; color: inherit; }
.lv-entry .wp-block-post-title a:hover { color: var(--lv-accent); }
.lv-entry .wp-block-post-excerpt { margin: 0; color: var(--lv-muted); font-size: 1rem; }

.lv-meta {
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	text-transform: uppercase;
	color: var(--lv-muted);
}

/* An article headline lives in a 760px column — the 82px hero clamp from
   theme.json is a landing-page size, not a reading size. */
.lv-article .wp-block-post-title {
	margin: 0 0 20px;
	font-size: clamp(2rem, 4.4vw, 3.25rem);
	line-height: 1.02;
	letter-spacing: -0.046em;
}

.lv-article .wp-block-post-featured-image { margin: 0 0 32px; }
.lv-article .wp-block-post-featured-image img { border-radius: var(--lv-radius); }

.lv-content p { margin: 0 0 1.35em; }
.lv-content a { color: var(--lv-accent); text-underline-offset: 3px; }
.lv-content ul, .lv-content ol { margin: 0 0 1.35em; padding-left: 1.25em; }
.lv-content img { border-radius: var(--lv-radius); }

.lv-content blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--lv-accent);
	font-size: 1.375rem;
	line-height: 1.35;
	letter-spacing: -0.02em;
}

.wp-block-query-pagination { margin-top: 48px; gap: 6px; }

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	padding: 8px 12px;
	border-radius: var(--lv-radius);
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	text-transform: uppercase;
	text-decoration: none;
}

.wp-block-query-pagination a:hover { background: var(--lv-rose-100); color: var(--lv-accent); }
.wp-block-query-pagination .current { background: var(--lv-ink); color: #fff; }

/* ==========================================================================
   06 · Footer

   Four columns on a black band, matching the client's reference build:
   help menu · contact · social · newsletter. The newsletter form is a real
   `data-cd-form` capture handled by the CoreDigify plugin (saved to the site
   DB, e-mailed, forwarded to CoreDigify) — never a decorative dead input.
   ========================================================================== */

.lv-footer {
	background: #000;
	color: #fff;
}

.lv-footer__in {
	max-width: var(--lv-container-w);
	margin-inline: auto;
	padding: clamp(64px, 9vw, 130px) var(--lv-gutter);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 44px 3.8%;
	align-items: start;
}

.lv-footcol__title {
	margin: 0 0 22px;
	font-size: 1.1875rem;          /* 19px — measured from the reference */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #fff;
}

.lv-footcol__text {
	margin: 0 0 12px;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

.lv-footcol__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lv-footcol__text a:hover { color: var(--lv-accent); }

/* Help menu — plain sentence case, not the uppercase micro-type used in the
   header. The reference footer nav is 14px/1.6 regular. */
.lv-footmenu {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lv-footmenu li { margin: 0; }

.lv-footmenu a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.6;
}

.lv-footmenu a:hover { color: #fff; }

/* Social */
.lv-social {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lv-social li { margin: 0; }

.lv-social a {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: #fff;
	transition: color 0.18s ease, transform 0.18s ease;
}

.lv-social svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.lv-social a:hover { color: var(--lv-accent); transform: translateY(-2px); }

/* Newsletter */
.lv-subscribe {
	display: grid;
	gap: 12px;
	max-width: 260px;
}

.lv-subscribe input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--lv-radius);
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 0.875rem;
}

.lv-subscribe input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.55); }
.lv-subscribe input[type="email"]:focus-visible { outline: 2px solid var(--lv-accent); outline-offset: 2px; }

.lv-subscribe button {
	justify-self: start;
	padding: 11px 22px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--lv-radius);
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: var(--lv-micro-size);
	font-weight: var(--lv-micro-weight);
	letter-spacing: var(--lv-micro-ls);
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.lv-subscribe button:hover { background: #fff; color: #000; border-color: #fff; }
.lv-subscribe button[disabled] { opacity: 0.6; cursor: default; }

/* Status line injected by the plugin's forms.js. */
.lv-subscribe .cd-form-status {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

.lv-subscribe .cd-form-status.is-err { color: #ffb3c1; }

/* Visually-hidden label. Block themes only ship .screen-reader-text with the
   block library stylesheet, which a page without blocks may not load. */
.lv-footer .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Company identity. An EU webshop must show who is selling; it lived only on an
   orphan page nobody linked to, so it belongs on every page instead. */
.lv-footer__legal {
	max-width: var(--lv-container-w);
	margin-inline: auto;
	padding: 0 var(--lv-gutter) 22px;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}

.lv-footer__legal p { margin: 0; }

.lv-footer__bar {
	max-width: var(--lv-container-w);
	margin-inline: auto;
	padding: 22px var(--lv-gutter) 34px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.6);
}

.lv-footer__bar p { margin: 0; }
.lv-footer__bar a { color: inherit; text-underline-offset: 3px; }
.lv-footer__bar a:hover { color: #fff; }

@media (max-width: 900px) {
	.lv-footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}

@media (max-width: 560px) {
	.lv-footer__in { grid-template-columns: 1fr; gap: 36px; }
	.lv-subscribe { max-width: none; }
}

/* ==========================================================================
   07 · Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.lv-nav .sub-menu { transition: none; }
}