/*
Theme Name: Podlen Verkstad AS
Description: Kundens profil for Podlen Verkstad AS – bygger på Hjelseth Base. Farger, fonter og former er hentet fra designsystemet (profil/tokens.json). Endre profilen ved å oppdatere tokens.json og kjøre lag_barnetema.py på nytt.
Author: Hjelseth AS
Author URI: https://hjelseth.com
Template: hjelseth-base
Version: 1.0.3
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: podlenverkstad
*/

/* Egne justeringer for Podlen Verkstad AS skrives her. Hold det lite – det meste styres av theme.json. */

/* Logoen (SVG) har width="100%" og ingen fast storleik – gi han breidd ut frå viewBox 372 × 197. */
.wp-block-site-logo img.custom-logo { width: 151px; height: auto; aspect-ratio: 372 / 197; }
@media (max-width: 781px) { .wp-block-site-logo img.custom-logo { width: 106px; } }

/* WooCommerce (klassisk produktmal): relaterte produkt og faner under bilete og pris, ikkje klemt mellom dei. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { clear: both; padding-top: var(--wp--preset--spacing--50); }

/* Video med eige stillbilete: berre ein oransje spel-av-knapp. assets/js/video.js opnar filmen i ein lightbox. */
.pv-video { overflow: hidden; border-radius: 14px; }
.pv-video a { position: relative; display: block; }
.pv-video img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pv-video a::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 88px; height: 88px;
	transform: translate(-50%, -50%); border-radius: 50%;
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 56% 50% / 44px;
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.25); transition: transform 0.2s ease;
}
.pv-video a:hover::after, .pv-video a:focus-visible::after { transform: translate(-50%, -50%) scale(1.08); }
.pv-lightbox { width: min(1100px, 92vw); max-width: none; padding: 0; border: 0; border-radius: 14px; overflow: visible; background: #000; }
.pv-lightbox::backdrop { background: rgb(0 0 0 / 0.8); }
.pv-lightbox-lukk {
	position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: var(--wp--preset--color--accent); color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}
.pv-video-ramme { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.pv-video-ramme iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 781px) { .pv-video a::after { width: 68px; height: 68px; background-size: 34px; } }