/**
 * Shared tokens and components.
 *
 * Loaded on every page. Holds the pieces used by more than one template so the
 * product page and the blog share one definition instead of a copy that drifts.
 * Template-specific styling stays in product-hero.css / blog.css.
 */

:root {
	--shv-ink: #1c1c20;
	--shv-paper: #fff;
	--shv-stone: #f5f2ec;
	--shv-stone-line: #e6e1d6;
	--shv-coral: #e2543b;
	--shv-coral-dark: #c4432c;
	--shv-coral-tint: #fbe9e4;
	--shv-leaf-dark: #2f7a34;
	--shv-muted: #6b6b73;
	--shv-line: #e7e5e1;
}

/* ============================================================
   PRIMARY MENU — fit + no mid-word wrapping
   ============================================================
   Loads after styles.css (shv-base depends on shv-main), so these win. With
   seven top-level items the links must not break inside a word ("Strona główna"
   → two lines); nowrap keeps each item intact, and the tighter padding plus the
   wider menu column in header.php let all seven fit on one row. */
.navbar-nav .nav-link {
	white-space: nowrap;
	padding-left: 14px;
	padding-right: 14px;
}

/* ============================================================
   MOBILE MENU (slicknav) — show all items, backdrop, aligned icons
   ============================================================ */
@media (max-width: 1180px) {
	/* styles.css pins the panel to height:280px with overflow:auto, so the 7th
	   item (Kontakt) was clipped behind a scrollbar. Let it size to content. */
	.slicknav_nav {
		height: auto !important;
		overflow: visible !important;
		/* Anchor to the header's actual bottom rather than a fixed px offset:
		   the panel is absolute inside the sticky header, so top:100% follows the
		   bar whether it's full height or shrunk to the thin scrolled state —
		   otherwise the fixed 80–85px offset left a gap once the header shrank. */
		top: 100% !important;
		left: 0;
		right: 0;
		width: 100%;
		/* Above the backdrop; the header sits above both so the toggle stays
		   clickable. */
		z-index: 1002;
	}

	/* Sticky top bar on mobile: the header (logo + icons + toggle) stays pinned
	   while the page scrolls. header-top is hidden here, so only the nav bar
	   sticks. Needs !important to beat Bootstrap's .position-relative, and the
	   high z-index keeps it above both the backdrop and page content. */
	header.position-relative {
		position: sticky !important;
		top: 0;
		z-index: 1003 !important;
	}

	/* The search/cart cluster and the slicknav toggle are absolutely positioned
	   against the header and have different box heights, so any fixed `top`
	   leaves them on different lines. Centre both on the bar's midline instead —
	   height-independent, so they line up with each other and the logo. */
	.context-menu-mobile,
	.slicknav_btn {
		top: 50%;
		transform: translateY(-50%);
	}

	/* The toggle was pinned at right:70px, so once moved onto the icons' line its
	   ~40px width reached left into the cart. Push it to the far right; the
	   search/cart cluster stays at right:90px, clearing it. Give it a real tap
	   target and centre the glyph.

	   !important + explicit position: on some pages (e.g. single product) the
	   conditional stylesheets depend on shv-base, which makes WordPress emit
	   plugin.css AFTER this file — and plugin.css's `.slicknav_btn { position:
	   relative; top:0; right:0 }` would otherwise win and shove the toggle to the
	   top-left of the bar. Forcing these keeps it centred on every template. */
	.slicknav_btn {
		position: absolute !important;
		top: 50% !important;
		right: 16px !important;
		transform: translateY(-50%) !important;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
	}

	/* plugin.css and styles.css absolutely position the ☰/✕ glyph (::before) at
	   top:30px / top:-40px, which pulled it out of flow and collapsed the button
	   to 0×0 — the menu became untappable. Let the glyph flow inside the flex
	   button instead so the button sizes to it and the icon sits centred. */
	.slicknav_btn.slicknav_open::before,
	.slicknav_btn.slicknav_collapsed::before {
		/* !important: plugin.css has a narrower @media(max-width:479px) rule that
		   re-pins this glyph to position:absolute; top:-40px, and on the product
		   page it loads after shv-base, so it would win the source-order tie and
		   yank the ☰ above the button. Force it in-flow so it stays centred. */
		position: static !important;
		top: auto !important;
		left: auto !important;
		padding: 0;
		margin: 0;
		color: #fff;
		font-size: 22px;
		line-height: 1;
	}

	/* main.js adds .navbar-sticky-in to the nav bar once the page scrolls past
	   130px. On mobile the theme hid it (display:none), so the whole bar — logo,
	   icons, toggle — vanished on scroll. The header is already position:sticky,
	   so keep the bar visible and just make it thinner when scrolled. */
	.header-nav-menu.navbar-sticky-in {
		display: block !important;
		position: static !important;
		width: auto !important;
		background: #45454c !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
		border-radius: 0 !important;
	}

	.header-nav-menu.navbar-sticky-in .header-nav-menu-inner {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	/* Dimmed overlay behind the open menu. Toggled by main.js via body.shv-menu-open. */
	.shv-menu-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(20, 20, 24, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease;
		z-index: 1000;
	}

	body.shv-menu-open .shv-menu-backdrop {
		opacity: 1;
		visibility: visible;
	}
}

@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
	.shv-menu-backdrop {
		transition: none;
	}
}

/* ============================================================
   BREADCRUMB — slim strip replacing the full-height grey banner
   ============================================================
   The stone strip spans the full width, but its content is constrained to the
   same Bootstrap .container the header and page bodies use, so the trail lines
   up under the logo and with the page content instead of hugging the edge. */
.shv-crumbbar {
	background: var(--shv-stone);
	border-bottom: 1px solid var(--shv-stone-line);
	font-size: 13px;
	line-height: 1.4;
	color: var(--shv-muted);
}

.shv-crumbbar-inner {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	padding-top: 10px;
	padding-bottom: 10px;
}

.shv-crumbbar a {
	color: var(--shv-muted);
	text-decoration: none;
	font-weight: 400;
}

.shv-crumbbar a:hover,
.shv-crumbbar a:focus-visible {
	color: var(--shv-coral);
}

.shv-crumbbar .sep {
	opacity: 0.5;
}

.shv-crumbbar .current {
	color: var(--shv-ink);
	font-weight: 600;
	/* The current page's title can be long; let it truncate rather than push
	   the bar into a horizontal scroll on every post. */
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (min-width: 768px) {
	.shv-crumbbar-inner {
		padding-top: 11px;
		padding-bottom: 11px;
	}
}

/* ============================================================
   PAGE TITLE
   ============================================================
   The grey banner used to carry each template's only <h1>. Removing it means
   the title has to live in the document, so this is the heading style for
   templates that had no visible title of their own (pages, cart, checkout,
   404, blog). Templates that already show a strong heading keep it and are
   simply promoted to h1 instead.
   ============================================================ */
.shv-page-title {
	font-family: "Manrope", "Inter", sans-serif;
	font-weight: 800;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--shv-ink);
	margin: 0 0 10px;
}

@media (min-width: 768px) {
	.shv-page-title {
		font-size: 36px;
	}
}

/* ============================================================
   RESPONSIVE EMBEDS / IFRAMES (YouTube, Vimeo, …)
   ============================================================
   Video embeds pasted into posts, product descriptions or the catalog copy
   often carry fixed width/height attributes that overflow the column and force
   the whole page to scroll sideways on mobile. Cap every iframe to its
   container, and keep video hosts at a 16:9 ratio and full width so they never
   overflow. */
iframe {
	max-width: 100% !important;
}

.wp-block-embed__wrapper iframe,
figure.wp-block-embed iframe,
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="youtu.be"],
iframe[src*="vimeo.com"] {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* WP Rocket's lazy-YouTube player wraps the iframe in .rll-youtube-player and
   already handles 16:9 sizing itself; its iframe is position:absolute and
   z-index:100. Our rule above would fight its height, and z-index:100 lets the
   loaded video sit above the header. Let WP Rocket own its player and keep the
   video below the header. */
.rll-youtube-player {
	position: relative;
}

.rll-youtube-player iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	z-index: 1 !important;
}

/* ============================================================
   STAR RATING — shared by product hero, listings and reviews
   ============================================================
   A grey base with a coral overlay clipped to the exact percentage, so
   fractional averages render precisely. Defined here (not in product-reviews.css)
   so listing cards, which don't load that file, still get styled stars. */
.shv-stars {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 0;
	vertical-align: middle;
}

.shv-stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
}

.shv-star {
	width: 16px;
	height: 16px;
	fill: #d9d5cc;
}

.shv-stars-fill .shv-star {
	fill: var(--shv-coral);
}

/* Compact rating badge: stars + average + count, links to the reviews section. */
.shv-rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	font-size: 13px;
	color: var(--shv-muted);
}

.shv-rating-badge:hover {
	color: var(--shv-coral-dark);
}

.shv-rating-avg {
	font-weight: 700;
	color: var(--shv-ink);
}

.shv-rating-badge .shv-star {
	width: 15px;
	height: 15px;
}

/* ============================================================
   reCAPTCHA v3 badge — hidden site-wide
   ============================================================
   Google allows hiding the badge as long as the reCAPTCHA attribution text is
   shown near the protected form (we add it to the review form). */
.grecaptcha-badge {
	visibility: hidden;
}

/* ============================================================
   <picture> WRAPPERS — stay out of the layout
   ============================================================
   Image optimisers (Imagify's "<picture> tags" mode) wrap every <img> in a
   <picture>. That inline wrapper becomes the flex/grid item and the box that
   width:100% resolves against, so the theme's crops (aspect-ratio + object-fit
   on .shv-card-img, .shv-recent-img, gallery images…) collapse and photos
   render at their natural aspect. display:contents removes the wrapper from the
   box tree so the <img> lays out as a direct child again. Inert when no
   <picture> is present. */
picture {
	display: contents;
}

/* ============================================================
   IMAGES — survive injected width/height attributes
   ============================================================
   WP Rocket's "Add missing image dimensions" writes width/height attributes
   onto images that lack them. Those map to *presentational* CSS, so any image
   the theme sizes with width:100% but no CSS height gets locked to a fixed
   height and stretches (e.g. consultant.png rendering 340×1264 instead of its
   natural ratio).

   Element-only specificity (0,0,1) is deliberate: it beats the presentational
   attribute (0,0,0), but every theme rule that *deliberately* sets a height —
   .shv-review-photo img (object-fit covers), avatars, fixed-ratio crops — still
   wins. So this restores natural ratios without touching intentional sizing. */
img {
	height: auto;
}

/* ============================================================
   LOGO — keep aspect ratio
   ============================================================
   The logo is styled width:100% (.w-100) with no CSS height. WP Rocket's "Add
   missing image dimensions" writes a height attribute on it, which maps to a
   fixed CSS height and stretches the logo vertically. Force height:auto so it
   scales to its natural 340×100 ratio regardless of any width/height attrs. */
.navbar-logo img,
.footer-logo img {
	height: auto !important;
}

/* ============================================================
   CHECKOUT — visible terms / privacy links
   ============================================================
   default.css sets a { color:#fff }, so links that aren't otherwise styled turn
   white and vanish on the white checkout background (e.g. the terms & privacy
   links by the order checkbox). The class beats the bare `a` on specificity. */
.woocommerce-terms-and-conditions-link,
.woocommerce-privacy-policy-link,
.woocommerce-terms-and-conditions-wrapper a {
	color: var(--shv-coral);
	text-decoration: underline;
}

.woocommerce-terms-and-conditions-link:hover,
.woocommerce-privacy-policy-link:hover,
.woocommerce-terms-and-conditions-wrapper a:hover {
	color: var(--shv-coral-dark);
}