/*
 * Nikli — custom.css
 *
 * Targeted refinements that theme.json cannot express.
 * Targets existing selectors from WordPress, Blocksy, Stackable, and WooCommerce —
 * never requires custom classes added in Gutenberg.
 *
 * Loaded by blocksy-child/functions.php via wp_enqueue_style. The enqueue path
 * is /assets/css/custom.css — DO NOT move this file back to the child-theme
 * root without also updating functions.php (which is frozen per CLAUDE.md).
 *
 * Sections:
 *   1. Global tweaks (smoothing, selection, focus)
 *   1b. Typography bridge (reclaims theme.json authority from Blocksy — see docs/DESIGN-WORKFLOW.md)
 *   2. Buttons (transitions, hover lift, outline variant)
 *   3. Links (animated underline in content)
 *   4. WooCommerce (phased in as specific interactions need fixing; broader pass in Phase 4)
 */

/* ---------- 1. Global tweaks ---------- */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

:where(a, button, .wp-block-button__link, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* ---------- 1b. Typography bridge ---------- */
/*
 * Blocksy is a classic/hybrid theme. On TEMPLATE-rendered elements (post/page
 * titles, archive titles, the whole single-product page, Woo body text),
 * Blocksy's generated CSS wins the cascade over theme.json's :where() element
 * styles. Block-rendered headings already obey theme.json and are unaffected
 * by these rules (they re-assert identical values).
 *
 * This bridge reclaims authority for theme.json:
 *   - font-size / font-family  -> reference theme.json variables (canonical in theme.json)
 *   - font-weight / line-height / letter-spacing -> NO WP preset variable exists,
 *     so these are LITERAL here. For these three properties the value below is
 *     the source of truth for template-rendered elements; keep in sync with
 *     theme.json styles.elements (which governs block-rendered copies).
 *
 * Specificity: :root <el> = (0,0,1,1) beats Blocksy's consumer selectors
 * (bare elements 0,0,0,1; single classes 0,0,1,0). No !important needed.
 * If a heading fails to take, bump specificity (e.g. :root body h1) — do NOT
 * reach for !important first. See docs/DESIGN-WORKFLOW.md.
 *
 * Blocksy title CLASSES on non-heading tags (e.g. .ct-module-title as <p> in
 * related products) are NOT matched here — handled in section 4 (WooCommerce).
 */

:root h1 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

:root h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

:root h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

:root h4 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.005em;
}

:root h5 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.3;
}

:root h6 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Base body type. theme.json sets these on block content; this wins on
 * template-rendered body text. font-size literal matches theme.json
 * styles.typography.fontSize (1.0625rem). */
:root body {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.6;
}

/* ---------- 1c. Scoped typography overrides ---------- */
/*
 * Scoped exceptions to the 1b bridge. Use this section when an h-tag in a
 * specific context wants different values than the global bridge — e.g.
 * widget titles, related-product headings, sidebar labels. Keep overrides
 * narrow (selector prefix on a container class) so the base bridge stays
 * canonical everywhere else.
 */

/* Footer widget titles.
 *
 * Footer widgets render titles as <h5 class="wp-block-heading">. The bridge
 * sets h5 to Inter/1.5rem/600 (the "subheading inside content" role). In the
 * footer these are short editorial labels above link lists, so Fraunces reads
 * warmer and matches the site's brand voice better than Inter. Scoped only
 * to .ct-footer so h5 in content elsewhere is unaffected.
 * Specificity: :root .ct-footer h5 = (0,0,2,1) — beats the bridge's :root h5
 * at (0,0,1,1) and Blocksy's bare h5 at (0,0,0,1). */
:root .ct-footer h5 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Footer widget links.
 *
 * Blocksy renders footer nav widgets without hover feedback by default, so
 * links look inert. Scoped to .ct-footer li a to catch widget menu links
 * (which sit inside <li>) while leaving social icons and payment logos
 * (both outside <li>) untouched. Hover shifts to primary teal + hairline
 * underline — clear interactivity without visual noise on the default state. */
.ct-footer li a {
	text-decoration: none;
	transition: color 0.25s ease, text-decoration-color 0.25s ease;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.ct-footer li a:hover,
.ct-footer li a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
}

/* Product title (single product page).
 *
 * Renders as <h1 class="product_title entry-title">, so it inherits the
 * bridge's default H1 size — the Display preset (4.5rem, fluid down to
 * 2.75rem) — sized for hero headings, too large for the two-column product
 * layout. Sized down to the xx-large preset, which already fluid-scales
 * 2–2.5rem with viewport, so no manual breakpoint is needed.
 * Specificity: :root .product_title = (0,0,2,0) beats the bridge's
 * :root h1 at (0,0,1,1). Font-family/weight keep inheriting from the h1
 * bridge rule since only size/line-height change here. */
:root .product_title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
}

/* ---------- 2. Buttons ---------- */

.wp-element-button,
.wp-block-button__link {
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--sm);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Outline variant — uses Gutenberg's built-in is-style-outline */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	border-width: 1.5px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}

/* ---------- 3. Links — animated underline in post/page content ---------- */

.entry-content a:not(.wp-block-button__link, .wp-element-button, .wp-block-navigation-item__content) {
	text-decoration: none;
	background-image: linear-gradient(
		var(--wp--preset--color--primary),
		var(--wp--preset--color--primary)
	);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	transition: background-size 0.3s ease, color 0.25s ease;
	padding-bottom: 0.05em;
}

.entry-content a:not(.wp-block-button__link, .wp-element-button, .wp-block-navigation-item__content):hover {
	background-size: 100% 2px;
	color: var(--wp--preset--color--ink);
}

/* ---------- 4. WooCommerce ---------- */
/*
 * Rules added incrementally as specific interactions need fixing.
 * The broader Woo styling pass still happens in Phase 4 (see docs/DESIGN-WORKFLOW.md).
 */

/* 4a. Cart drawer buttons
 *
 * theme.json sets element.button :hover to ink, which is intentional and reads
 * great on cream/base surfaces (teal → dark = clear state change). But the
 * cart drawer uses a dark ink background, so an ink hover ≈ background and
 * the button visually disappears on hover.
 *
 * Specificity note: Blocksy's rule
 *   .woocommerce-mini-cart~.buttons .button:hover
 * (from cart-header-element-lazy.min.css) is (0,0,4,0). To win without
 * !important we need at least (0,0,4,1). Adding .wc-forward — a class both
 * View Cart and Checkout anchors carry — bumps this to (0,0,4,1), enough
 * to beat Blocksy while staying scoped to the mini-cart context. Every
 * other button on the site keeps the standard teal→ink hover. */
.woocommerce-mini-cart__buttons a.button.wc-forward:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--accent);
}

/* 4b. Payment methods icons (single product page)
 *
 * Blocksy's Product Elements builder has no spacing control for this
 * element (unlike Price/Short Description, which expose a Bottom Spacing
 * slider). The excess space is the fieldset's browser-default PADDING
 * (not margin — confirmed via DevTools box-model colors: green = padding).
 * Margin reset to 0 defensively; padding is the actual fix.
 * Selector confirmed via DevTools: fieldset.ct-payment-methods. */
fieldset.ct-payment-methods {
	margin: 0;
	padding-block: var(--wp--preset--spacing--20);
}

/* Payment icon square boxes.
 *
 * Blocksy sets --theme-icon-size: 100px on .entry-summary-items > .ct-payment-methods,
 * which each .ct-icon-container uses for BOTH width and height, forcing a
 * square. The Webpay/MercadoPago logos are wide (~3:1 and ~4:1 aspect
 * ratios), so a 100px square leaves a lot of empty vertical space around
 * them — shrinking the variable (tried first) just makes a smaller square
 * with the same proportional waste, plus shrinks the logo itself.
 * The actual fix: leave width alone (keeps the logo at its original,
 * already-fine size) and shrink height to roughly match the logos' real
 * rendered height at that width, instead of being forced equal to width.
 * `height: auto` was tried first and did NOT work — the SVGs carry their
 * own height="100%" attribute, and empirically it did not resolve to auto
 * against this auto-height flex container the way the spec suggests it
 * should; a fixed px value sidesteps that ambiguity entirely. Scoped to
 * this fieldset only — .ct-icon-container is also used for square icons
 * elsewhere (e.g. header/footer social icons), which must stay unaffected. */
:root fieldset.ct-payment-methods .ct-icon-container {
	height: 36px;
}