/**
 * KAUFLOND — Global base
 *
 * Site-wide primitives only: typography hierarchy, container, buttons, inputs,
 * links, focus states and the breadcrumb bar. Anything belonging to a single
 * component belongs in that component's stylesheet.
 *
 * Values come from tokens.css. No hard-coded colours or pixel values.
 *
 * Scope discipline: this file styles global chrome only. Product cards, PLP,
 * PDP, homepage and footer are later phases and are deliberately left alone.
 *
 * @package Kauflond
 */

/* =========================================================================
 * 1. TYPOGRAPHY
 *
 * Font families stay WoodMart's (Lato / Montserrat). Only the size hierarchy
 * is normalised, and kept compact — a catalogue page carries a lot of text and
 * editorial-scale headings waste vertical space.
 * ====================================================================== */

body {
	font-size: var(--kfl-font-size-base);
	line-height: var(--kfl-line-height-base);
	color: var(--kfl-color-text-primary);
}

h1, .title-size-large,
h2, h3, h4, h5, h6 {
	color: var(--kfl-color-text-primary);
	line-height: var(--kfl-line-height-tight);
}

h1 { font-size: var(--kfl-font-size-2xl); }
h2 { font-size: var(--kfl-font-size-xl); }
h3 { font-size: var(--kfl-font-size-lg); }
h4 { font-size: var(--kfl-font-size-md); }
h5,
h6 { font-size: var(--kfl-font-size-base); }

/* Page title on archives and single pages. */
.page-title .entry-title,
.entry-title.title {
	font-size: var(--kfl-font-size-2xl);
	line-height: var(--kfl-line-height-tight);
}

small,
.wd-meta,
.kfl-text-sm { font-size: var(--kfl-font-size-sm); }

/* =========================================================================
 * 2. LINKS
 * ====================================================================== */

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

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

/* =========================================================================
 * 3. FOCUS
 *
 * One visible ring for every interactive element. :focus-visible only, so a
 * mouse click never paints a ring but keyboard navigation always does.
 * ====================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible,
.wd-tools-element > a:focus-visible {
	outline: none;
	box-shadow: var(--kfl-focus-ring);
	border-radius: var(--kfl-radius-sm);
}

/* =========================================================================
 * 4. CONTAINER
 * ====================================================================== */

.kfl-container {
	width: 100%;
	max-width: var(--kfl-container-max);
	margin-inline: auto;
	padding-inline: var(--kfl-container-gutter);
}

/* =========================================================================
 * 5. BUTTONS
 *
 * Normalises height, radius and colour. WoodMart's own button classes are
 * reused — this only retunes them, it does not replace the button system.
 * `btns_shop_style` is still WoodMart's `3d`; these rules flatten it because a
 * 3D bevel reads as consumer-electronics, not general retail.
 * ====================================================================== */

.btn,
.button,
button,
input[type="submit"],
.wd-buy-now-btn {
	border-radius: var(--kfl-radius-md);
	font-weight: var(--kfl-font-weight-bold);
	line-height: var(--kfl-line-height-tight);
}

/* Primary action colour. Scoped away from cart/checkout, which are untouched
 * this phase — those keep whatever WoodMart currently renders. */
.btn.btn-color-primary,
.button.alt,
.wd-nav-product-cat .button,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .single_add_to_cart_button {
	background-color: var(--kfl-color-brand-primary);
	color: var(--kfl-color-brand-on-primary);
	box-shadow: none;
}

.btn.btn-color-primary:hover,
.button.alt:hover,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .single_add_to_cart_button:hover {
	background-color: var(--kfl-color-brand-primary-hover);
	color: var(--kfl-color-brand-on-primary);
	box-shadow: none;
}

/* =========================================================================
 * 6. FORM CONTROLS
 *
 * Height, radius and border width come from the --wd-form-* bridge in
 * tokens.css, so this only needs to set colour and typography.
 * ====================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea,
.select2-container .select2-selection {
	border-color: var(--kfl-color-border);
	color: var(--kfl-color-text-primary);
	font-size: var(--kfl-font-size-md);
	background-color: var(--kfl-color-surface);
}

input::placeholder,
textarea::placeholder {
	color: var(--kfl-color-text-muted);
	opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--kfl-color-border-focus);
}

/* =========================================================================
 * 7. SURFACES AND RULES
 * ====================================================================== */

.kfl-surface-subtle { background-color: var(--kfl-color-surface-subtle); }

hr,
.wd-sep {
	border-color: var(--kfl-color-border);
}

/* =========================================================================
 * 8. BREADCRUMBS — foundation only
 *
 * Compact, neutral, readable. Structure and placement are WoodMart's; this
 * sets the visual treatment the PLP and PDP phases will inherit. No layout
 * changes to the pages that contain it.
 * ====================================================================== */

.woocommerce-breadcrumb,
.yoast-breadcrumb,
.wd-breadcrumbs {
	font-size: var(--kfl-font-size-sm);
	line-height: var(--kfl-line-height-snug);
	color: var(--kfl-color-text-muted);
}

.woocommerce-breadcrumb a,
.yoast-breadcrumb a,
.wd-breadcrumbs a {
	color: var(--kfl-color-text-secondary);
}

.woocommerce-breadcrumb a:hover,
.yoast-breadcrumb a:hover,
.wd-breadcrumbs a:hover {
	color: var(--kfl-color-brand-primary);
	text-decoration: underline;
}

/* Current page: the last crumb is where you are, so it should not look
 * clickable and should not shout either. */
.woocommerce-breadcrumb > span:last-child,
.wd-breadcrumbs > span:last-child {
	color: var(--kfl-color-text-primary);
}

/* =========================================================================
 * 9. SHARED UTILITIES
 * ====================================================================== */

/* Inline metadata line — shipping, delivery, stock. Used by cards and the PDP
 * from Phase 3; defined here because more than one component needs it. */
.kfl-meta-line {
	display: flex;
	align-items: center;
	gap: var(--kfl-space-1);
	font-size: var(--kfl-font-size-sm);
	line-height: var(--kfl-line-height-snug);
	color: var(--kfl-color-text-secondary);
}

.kfl-meta-line--success { color: var(--kfl-color-success-text); }
.kfl-meta-line--warning { color: var(--kfl-color-warning); }
.kfl-meta-line--danger  { color: var(--kfl-color-danger); }

.kfl-badge {
	display: inline-block;
	padding: 2px var(--kfl-space-2);
	border-radius: var(--kfl-radius-sm);
	font-size: var(--kfl-font-size-xs);
	font-weight: var(--kfl-font-weight-bold);
	line-height: var(--kfl-line-height-tight);
	text-transform: uppercase;
	letter-spacing: .02em;
	background: var(--kfl-color-surface-sunken);
	color: var(--kfl-color-text-primary);
}

.kfl-badge--sale {
	background: var(--kfl-color-sale);
	color: var(--kfl-color-sale-on);
}

.kfl-badge--accent {
	background: var(--kfl-color-accent);
	color: var(--kfl-color-accent-contrast);
}

.kfl-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}