/* Plastwerk — hand-written additions on top of the generated site.css (which must not be hand-edited).
   Owner's changes 28.10.2026: larger logo (the "industrial solutions" line must be readable); the hero H1
   size + line height is done in the build (build_theme.py h1_rules). */

/* ---- logo: traced SVG, larger than in the design (desktop 158 -> 224 px, mobile 132 -> 168 px, footer 176 -> 240 px) */
.hd-d img[src$="plastwerk-logo-valge-tekst.svg"] { width: 224px; height: auto; }
.hd-m img[src$="plastwerk-logo-valge-tekst.svg"] { width: 168px; height: auto; }
footer img[src$="plastwerk-logo-valge-tekst.svg"] { width: 240px; height: auto; }
@media (max-width: 1180px) {
  footer img[src$="plastwerk-logo-valge-tekst.svg"] { width: 168px; }   /* wider would push "Küsi hinda" onto its own row */
}
@media (max-width: 389px) {
  footer img[src$="plastwerk-logo-valge-tekst.svg"] { width: 150px; }   /* the design's own size: keeps "Küsi hinda" beside it */
}
@media (max-width: 374px) {
  .hd-m img[src$="plastwerk-logo-valge-tekst.svg"] { width: 148px; }
}
/* ---- narrow laptops (1181–1439 px): the 1440 drawing is scaled down as a whole, so every fixed position in it
   holds — photo labels over the H1, contact details breaking mid-word, card text over the card edge (visual
   inspection 28.10). Each band starts at exactly 1440 px of layout width. */
@media (min-width: 1181px) and (max-width: 1279px) { .pa { zoom: .82; } }
@media (min-width: 1280px) and (max-width: 1365px) { .pa { zoom: .889; } }
@media (min-width: 1366px) and (max-width: 1439px) { .pa { zoom: .9486; } }

/* ---- skip link (keyboard users) */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: #177F12; color: #fff;
  font: 700 16px/1.2 'Schibsted Grotesk', Arial, sans-serif; text-decoration: none; }
.skip-link:focus { top: 12px; outline: 2px solid #1EA517; outline-offset: 3px; }
main:focus { outline: none; }

/* ---- videos: the design's slot becomes a poster with the play button; the file plays in place on click */
figure[data-video] > div { overflow: hidden; border-style: solid !important; }
figure[data-video] > div > img.vposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
figure[data-video] > div > a { position: relative; z-index: 1; }
figure[data-video] > div > span { z-index: 1; }   /* keeps the design's own position (the 9:16 frame is absolute) */
/* a portrait (9:16) video in a wide tile: the whole poster inside the design's frame, not a 32 % crop */
figure[data-video] > div:has(> span:not(.tn)) > img.vposter { object-fit: contain; }
figure[data-video] > div > span:not(.tn) { border-color: transparent !important; }
figure[data-video] > div.pw-video-on { border-style: solid !important; background: #000 !important; }
.pw-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }

/* ---- quote form: spam trap, chosen file name, file error */
.pw-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.pw-file-name { display: block; margin-top: 6px; font: 500 14px/1.4 'JetBrains Mono', ui-monospace, monospace; color: #1EA517; overflow-wrap: anywhere; }
.pw-file-err { margin: 8px 0 0; color: #FF9B8F; font-size: 15px; }
button[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---- privacy policy lists (the policy text is fields of the page; a list is one field per line) */
.pa .pw-list { margin: 12px 0 0; padding-left: 22px; color: #C5CCC8; font-size: 17px; line-height: 1.6; }
.pa .pw-list li + li { margin-top: 4px; }

/* ---- pages the client creates himself (block content in the site's header and footer) */
.pw-generic { padding: 72px 64px 96px; }
.pw-generic-in { max-width: 820px; margin: 0 auto; }
.pw-generic-h1 { margin: 0 0 32px; font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.pw-prose { color: #DCE1DE; font-size: 18px; line-height: 1.65; }
.pw-prose h2 { margin: 40px 0 12px; font-size: 32px; line-height: 1.15; color: #fff; }
.pw-prose h3 { margin: 28px 0 8px; font-size: 22px; color: #fff; }
.pw-prose a { color: #fff; text-decoration-color: #1EA517; text-underline-offset: 3px; }
.pw-prose img { max-width: 100%; height: auto; }
@media (max-width: 1180px) {
  .pw-generic { padding: 40px 16px 64px; }
  .pw-generic-h1 { font-size: 36px; }
}

/* ---- tap targets: phone / e-mail links inside running text get a taller hit area on touch screens (mobile-check) */
@media (max-width: 1180px) {
  .pa main p a[href^="tel:"], .pa main p a[href^="mailto:"] {
    display: inline-block; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px;
  }
}

/* ---- accessibility (Lighthouse/axe): visually hidden text, the active filter chip's counter in full white */
.pw-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pa .chip.on .cnt { color: #FFFFFF; }

/* ---- filled copy blocks: the design's body text (its placeholder box was dashed + hatched, its text muted) */
.pa .pw-copy p, .pa .pw-copy li { color: #C5CCC8; }
.pa .pw-copy > * + * { margin-top: 14px; }
.pa .pw-copy:not(:first-child) { margin-top: 16px; }   /* the placeholder box sat flush under the element above */

/* ---- accessibility audit 28.10 */
/* F04: the green ordinal numbers on the product cards sit on photos (1.3–3.2:1): a dark chip behind them */
.pa a.cd .tn.kf496aab { background: #0E1110; padding: 2px 6px; margin-left: -6px; border-radius: 2px; }   /* solid: 5.8:1 on any photo */
/* F06: at 320 px (400 % zoom) "3600 × 1600 × 600 mm" did not fit and the "mm" was cut off */
@media (max-width: 359px) { .pa .k1b11fee { font-size: 24px; } }
/* F14: no smooth scrolling for visitors who asked for reduced motion */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }
/* F02: a dropdown closed with Escape stays closed until the pointer or the focus leaves it (site.js) */
.pa .dd.pw-ddx .ddp { opacity: 0; visibility: hidden; transform: translateY(8px); }
/* F08: the file field's hint (allowed types, size) */
.pa .file + p { margin-top: 8px; }
/* F17: the wide table's scroller takes keyboard focus */
.pa [role="region"][tabindex="0"]:focus-visible { outline: 2px solid #1EA517; outline-offset: 3px; }

/* ---- visual inspection 28.10 */
/* F003: /cnc-freesimine/ hero — the white CNC table showed through the intro text (1.9–4.2:1): the dark side of the
   gradient now reaches under the whole text column at every width (the column starts 784 px from the right) */
@media (min-width: 1181px) {
  .pa .k861c827 { background: linear-gradient(270deg, rgba(9, 11, 10, .92) 0,
    rgba(9, 11, 10, .84) calc(max(0px, (100% - 1440px) / 2) + 800px),
    rgba(9, 11, 10, .25) calc(max(0px, (100% - 1440px) / 2) + 1000px),
    rgba(9, 11, 10, 0) calc(max(0px, (100% - 1440px) / 2) + 1150px)); }
}
/* F001: the open burger menu scrolls on short screens (it was as tall as the page, under html{overflow:hidden}) */
.pa #menyy { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
/* F004: a phone number never breaks in the middle */
.pa a[href^="tel:"] { white-space: nowrap; }
/* F006: tablets (700–1180 px) — the works lists in two columns with taller photos instead of 977 × 210 strips */
@media (min-width: 700px) and (max-width: 1180px) {
  .pa .kad1f7b8, .pa .k7423bc1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa .kad1f7b8 a.cd, .pa .k7423bc1 a.cd { min-height: 320px; }
}

/* ---- outline buttons (.b2): on hover the design turns the background light but its own text colour stayed
   white — unreadable (Ingmar 28.10). Dark text (and icon) on the light hover background. */
.pa :is(.b2, .b2__d, .b2__m):is(:hover, :focus-visible),
.pa :is(.b2, .b2__d, .b2__m):is(:hover, :focus-visible) * { color: #0E1110; }
.pa :is(.b2, .b2__d, .b2__m):is(:hover, :focus-visible) { background: #F2F4F3; border-color: #F2F4F3; }

/* ---- map (Ingmar 28.10: „Google kaart peab olema interaktiivne"): „Näita kaarti" in the middle of the design's map box
   loads Google's map into the same box (site.js). Same green and size as the box's own „Ava Google'i kaardil" button. */
.pa [data-pw-map] .pw-map-cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: max-content; max-width: calc(100% - 28px); }
.pa .pw-map-show { min-height: 44px; padding: 0 18px; border: 0; background: #177F12; color: #FFFFFF; cursor: pointer;
  font: 700 15px/1 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; }
.pa .pw-map-show:hover { background: #136A0F; }
.pa .pw-map-show:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.pa .pw-map-note { padding: 2px 6px; background: #0E1110; color: #C5CCC8; font: 12px/1.4 'JetBrains Mono', ui-monospace, monospace; }
.pa .pw-map-on > :not(.pw-map-frame) { visibility: hidden; }
.pa .pw-map-frame { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }