/* ==========================================================================
   WP Mojster — Design Tokens
   Ported from the approved Claude Design tokens card (design-reference/
   tokens.css). Production change: the Google Fonts @import is replaced by
   the self-hosted, subsetted Inter Variable below (see theme README for
   the pyftsubset command). Everything else is the canonical token sheet.
   ========================================================================== */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/InterVariable-wpmojster.woff2") format("woff2");
}

:root {
	/* ---- Color: neutrals (slate-tinted, cool like tool steel) ---- */
	--color-ink: #14252C;          /* headings, footer background */
	--color-text: #22343C;         /* body text on light backgrounds */
	--color-text-muted: #51646E;   /* secondary text, captions, meta */
	--color-paper: #FFFFFF;        /* default page background */
	--color-surface: #F2F6F7;      /* alternate section background */
	--color-border: #D8E2E6;       /* card and input borders, dividers */

	/* ---- Color: primary (petrol — trust, WordPress-ecosystem teal) ---- */
	--color-primary: #0B7285;         /* buttons, links, active states */
	--color-primary-strong: #095A6B;  /* hover/active */
	--color-primary-tint: #E3F0F3;    /* selected/highlight background */

	/* ---- Color: accent (amber — reserved for urgent services only) ----
	   #B45309 on the tint was 4.39:1 (WCAG AA needs 4.5:1 for chip-size
	   text); one step darker clears it at ~4.9:1. */
	--color-accent: #A84D08;
	--color-accent-tint: #FBEEDC;

	/* ---- Color: semantic (form validation, status chips) ---- */
	--color-success: #1B7A43;
	--color-success-tint: #E3F2E9;
	--color-error: #B42318;
	--color-error-tint: #FBEAE8;

	/* ---- Color: on-ink (dark surfaces — footer, final contact-CTA band) ---- */
	--color-ink-surface: #14252C;        /* dark section background (= ink)   */
	--color-text-on-ink: #E6EEF1;        /* body text on ink, ~13:1           */
	--color-text-muted-on-ink: #9FB3BC;  /* secondary text on ink, ~7:1       */
	--color-border-on-ink: #2C4048;      /* dividers and card borders on ink  */
	--color-link-on-ink: #7CC8D9;        /* petrol lightened for AA on ink    */

	/* ---- Typography ----
	   Single family: self-hosted Inter Variable, weights 400 (body),
	   500 (labels/nav), 600 (buttons/H3-H4), 700 (H1-H2).
	   SUBSETTING RULE: the final site is Slovenian — any performance subset
	   MUST keep latin + latin-ext so č/š/ž never fall back mid-word. */
	--font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--text-xs: 0.75rem;     /* 12px — eyebrows, badges (uppercase, +0.08em) */
	--text-sm: 0.875rem;    /* 14px — captions, form hints, meta */
	--text-base: 1.0625rem; /* 17px — body */
	--text-md: 1.25rem;     /* 20px — lead paragraph, H4 */
	--text-lg: 1.5rem;      /* 24px — H3 */
	--text-xl: 1.875rem;    /* 30px — H2 (24px on mobile) */
	--text-2xl: 2.375rem;   /* 38px — service-page H1 (30px on mobile) */
	--text-3xl: 3rem;       /* 48px — homepage H1, desktop only (34px mobile) */

	--leading-body: 1.6;
	--leading-heading: 1.15;
	--tracking-heading: -0.02em;
	--tracking-eyebrow: 0.08em;

	/* ---- Spacing scale (4px base) ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;

	/* ---- Section rhythm ---- */
	--section-pad: var(--space-24);        /* 96px top/bottom, desktop */
	--section-pad-mobile: var(--space-16); /* 64px top/bottom, under 768px */
	--section-gap-heading: var(--space-12);/* heading block to section content */

	/* ---- Content width & grid ---- */
	--container-max: 1160px;   /* all sections; centered, 24px side padding */
	--measure-max: 720px;      /* long-form text column (intro, FAQ answers) */
	--grid-gutter: 24px;       /* CSS grid gap, all breakpoints */
	/* Grid rules: 12-col desktop / cards use 3-up ≥1024px, 2-up ≥640px,
	   1-up below. Simple minmax() auto-fit grids; no framework.
	   BREAKPOINTS: exactly three sitewide — 640px (cards 2-up), 768px
	   (section padding steps up), 1024px (desktop nav, 3-up grids, splits).
	   No other media queries. */

	/* ---- Radii ---- */
	--radius-btn: 8px;
	--radius-input: 8px;
	--radius-card: 12px;
	--radius-chip: 999px;

	/* ---- Elevation (kept minimal; borders carry structure) ---- */
	--shadow-card: 0 1px 2px rgba(20, 37, 44, 0.06);
	--shadow-card-hover: 0 4px 12px rgba(20, 37, 44, 0.10);

	/* ---- Focus (all interactive elements, keyboard-visible) ---- */
	--focus-ring: 2px solid var(--color-primary);
	--focus-ring-on-ink: 2px solid #FFFFFF;  /* use on dark surfaces */
	--focus-offset: 2px;

	/* ---- Motion (the complete allowed set) ----
	   Color, background-color, border-color and box-shadow transitions only,
	   150ms ease. Nothing that moves layout; no keyframe animation. */
	--transition-fast: 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Base component classes (map 1:1 to WordPress template parts)
   ========================================================================== */

.eyebrow {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-primary);
}

/* Signature: "level mark" — short 32×3px primary rule above H2 section
   headings. Pure CSS, no image. */
.section-heading::before {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	background: var(--color-primary);
	border-radius: 2px;
	margin-bottom: var(--space-4);
}

/* Signature: diagnostic status chip (dot + label), used in trust strip
   and service tags. Dot color is SEMANTIC:
   petrol (default) = informational fact/tag · green = verified status,
   real checks only (care report, form success) · amber = urgent services
   (malware removal, error fixing) — nothing else. */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 500;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-chip);
	background: var(--color-paper);
}
.chip::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
}
.chip--ok::before { background: var(--color-success); }
.chip--urgent { background: var(--color-accent-tint); border-color: transparent; color: var(--color-accent); }
.chip--urgent::before { background: var(--color-accent); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 48px;              /* mobile tap target */
	padding: 12px 24px;
	font-family: var(--font-family);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--radius-btn);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
}
.btn { transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.on-ink .btn:focus-visible, .on-ink .link:focus-visible { outline: var(--focus-ring-on-ink); }

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-strong); }

.btn--secondary { background: var(--color-paper); color: var(--color-primary); border-color: var(--color-primary); }
.btn--secondary:hover { background: var(--color-primary-tint); }

.link {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.link:hover { color: var(--color-primary-strong); }
.link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

.card {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-6);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
a.card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--color-primary); }

.field-label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-ink);
	margin-bottom: var(--space-2);
}
.field-input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-family: var(--font-family);
	font-size: var(--text-base);
	color: var(--color-text);
	background: var(--color-paper);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-input);
}
.field-input:focus { outline: var(--focus-ring); outline-offset: 1px; border-color: var(--color-primary); }
.field-input--error { border-color: var(--color-error); }
/* Error messages carry an icon so the state never relies on color alone. */
.field-error {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-error);
	margin-top: var(--space-2);
}
.field-error::before { content: "⚠ "; }

/* ---- Dark surface (footer, final contact-CTA band) ----
   Wrap the section in .on-ink; only these tokens may appear on ink. */
.on-ink {
	background: var(--color-ink-surface);
	color: var(--color-text-on-ink);
}
.on-ink .muted { color: var(--color-text-muted-on-ink); }
.on-ink .link { color: var(--color-link-on-ink); }
.on-ink hr, .on-ink .divider { border-color: var(--color-border-on-ink); }

/* ---- Media frame (screenshots and meaningful images) ----
   Fixed aspect-ratio box so nothing shifts while the image loads. */
.media-frame {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--color-surface);
	aspect-ratio: 16 / 10;   /* set per use; never auto */
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- FAQ accordion — native <details>/<summary>, ZERO JavaScript ----
   Crawlable text, keyboard support and toggling come from the browser.
   One continuous panel (.faq-list): rows divided by hairlines; the open
   item carries a 3px petrol inset rail (inset box-shadow — no layout
   shift) and petrol-strong question text; closed rows tint on hover. */
.faq-list {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.faq-item + .faq-item { border-top: 1px solid var(--color-border); }
.faq-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	padding: 18px var(--space-6);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-ink);
	min-height: 48px;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}
.faq-item summary:hover { background: var(--color-surface); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "";
	flex: none;
	width: 9px; height: 9px;
	border-right: 2px solid var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	transform: rotate(45deg);
}
.faq-item[open] summary { color: var(--color-primary-strong); box-shadow: inset 3px 0 0 var(--color-primary); }
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item summary:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.faq-item .faq-answer { padding: 0 var(--space-6) var(--space-4); color: var(--color-text); max-width: var(--measure-max); }
.faq-item[open] .faq-answer { box-shadow: inset 3px 0 0 var(--color-primary); }

/* ---- Icon rule ----
   Default: NO icons. Chips, text and structure carry meaning. If a section
   demonstrably suffers without one: inline SVG only, stroke style, 24px grid,
   currentColor, hard cap ~12 icons sitewide. Never icon fonts or packs. */