/*
 * Liaqa Fitness Calculators — Base Stylesheet
 * Version: 1.0.0
 *
 * ARCHITECTURE
 * ─────────────────────────────────────────────────────────────────────────────
 * This file provides:
 *   1. Static MD3 design tokens (brand-color tokens come via wp_add_inline_style)
 *   2. Container isolation (all: revert) so Bricks Builder / theme styles don't bleed in
 *   3. Logical properties throughout so RTL works with dir="rtl" on the root div
 *   4. Number input normalization (hide spinners, prevent iOS zoom)
 *   5. Touch interaction polish
 *
 * WHAT IS NOT HERE
 * ─────────────────────────────────────────────────────────────────────────────
 *   - --liaqa-primary, --liaqa-container, --liaqa-surface
 *     → injected via wp_add_inline_style in class-liaqa-plugin.php
 *   - Component styles (field, button, seg, card, bars)
 *     → React inline styles — keeps the bundle self-contained for easy updates
 */

/* ── Design tokens: static derived values ─────────────────────────────────── */

:root {
	/* These never change with user settings — safe to hardcode */
	--liaqa-on-primary:           #ffffff;
	--liaqa-on-container:         #002716;
	--liaqa-on-surface:           #161d1c;
	--liaqa-on-surface-variant:   #3f4946;
	--liaqa-outline:              #6f7976;
	--liaqa-outline-var:          #bec9c5;

	/* Derived surface tint (used for result cards, per-meal chips)
	   Computed in JS via color-mix() — fallback here for browsers that
	   don't support color-mix in React inline styles                    */
	--liaqa-surface-container:    #e3edeb;
}

/* ── Container isolation ──────────────────────────────────────────────────── */
/*
 * `all: revert` strips every inherited style from the theme/page-builder
 * and returns to browser defaults. This is the recommended pattern for
 * Bricks Builder and other visual editors that inject global CSS.
 *
 * We then restore only what we need immediately after.
 */

.liaqa-calculator {
	all: revert;

	/* Restore sensible box model */
	box-sizing: border-box;

	/* Use the page's font stack (React components set their own font-family
	   via inline style, but this avoids inheriting an emoji font or similar) */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;

	/* Prevent overflow at narrow widths */
	max-width: 100%;
	overflow-x: hidden;

	/* Logical: text flows from the start edge (respects dir="rtl") */
	text-align: start;

	/* Ensure the component is a proper block */
	display: block;
}

/* Propagate box-sizing to all descendants */
.liaqa-calculator *,
.liaqa-calculator *::before,
.liaqa-calculator *::after {
	box-sizing: border-box;
}

/* ── Input normalization ───────────────────────────────────────────────────── */

/* Remove number spinners — caret is enough */
.liaqa-calculator input[type="number"]::-webkit-outer-spin-button,
.liaqa-calculator input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.liaqa-calculator input[type="number"] {
	-moz-appearance: textfield;
}

/*
 * Force 16px on all inputs and selects.
 * iOS Safari zooms the viewport when a focused element is < 16px.
 * The React components set font-size via inline style — this is a safety net.
 */
.liaqa-calculator input,
.liaqa-calculator select,
.liaqa-calculator textarea {
	font-size: 16px;
}

/*
 * Number inputs and progress bars always display left-to-right regardless of
 * the page or calculator direction. Numerals have no meaningful RTL variant,
 * and progress bars fill start→end in a mathematical sense.
 */
.liaqa-calculator input[type="number"],
.liaqa-calculator .liaqa-progress-bar,
.liaqa-calculator .liaqa-donut {
	direction: ltr;
}

/* ── Touch interaction ────────────────────────────────────────────────────── */

/* Remove the grey tap flash on mobile */
.liaqa-calculator button {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* ── Select — custom arrow position (logical for RTL) ─────────────────────── */

/*
 * The React select component uses `appearance: none` and renders a custom
 * dropdown arrow character via inline style. For RTL, the arrow character
 * already flips correctly because it's a span with inset-inline-end positioning.
 * No extra CSS needed here beyond the base.
 */

/* ── Floating label — logical positioning ─────────────────────────────────── */
/*
 * React places labels absolutely with `left: 14px` via inline style, which
 * doesn't respond to dir="rtl". We override with a logical property via CSS
 * for RTL calculators.
 *
 * Specificity: .liaqa-calculator[dir="rtl"] .liaqa-field-label
 */
.liaqa-calculator[dir="rtl"] .liaqa-field-label {
	left: auto;
	right: 14px;
	inset-inline-start: 14px; /* logical — for future-proofing */
}

/* The suffix unit (lbs / kg / mm) flips the other way */
.liaqa-calculator[dir="rtl"] .liaqa-field-suffix {
	right: auto;
	left: 14px;
	inset-inline-end: 14px;
}

/* ── Accessibility ─────────────────────────────────────────────────────────── */

/* Visible focus ring for keyboard navigation */
.liaqa-calculator button:focus-visible,
.liaqa-calculator input:focus-visible,
.liaqa-calculator select:focus-visible {
	outline: 2px solid var(--liaqa-primary, #2e7d6a);
	outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.liaqa-calculator * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ── Print ─────────────────────────────────────────────────────────────────── */

@media print {
	.liaqa-calculator button {
		display: none;
	}
}