/* ==================================================================== */
/*                                                                      */
/*  FILE: refresh-2026.css                                             */
/*  FUNKTSIOON: 2026 visuaalne värskenduskiht (override main-style'le) */
/*  Laaditakse VIIMASENA — võidab cascade'i ilma !important'ita,       */
/*  v.a kohad, kus originaal ise kasutab !important'i.                 */
/*  EELVAADE: ?refresh2026=1 | VÄLJAS: ?refresh2026=0                  */
/*  LOODUD: 2026-06-10 (Claude)                                        */
/*                                                                      */
/*  Disainikeel: võetud olemasolevatelt v-cta kaartidelt —             */
/*  navy #0a1a2a tekst, #f5f8fc pinnad, #e3e9f1 jooned,                */
/*  16px raadiused, pehmed kihilised varjud, 0.2s üleminekud.          */
/*  Bränd jääb: sinine #00438e + oranž #ff9233 + Lato.                 */
/* ==================================================================== */

:root{
  --vm-navy: #0a1a2a;          /* põhitekst, tume taust */
  --vm-navy-deep: #04162e;     /* gradiendi tumeots */
  --vm-blue: #00438e;          /* bränd-sinine */
  --vm-blue-bright: #0e58ab;   /* gradiendi heleots */
  --vm-orange: #ff9233;        /* bränd-oranž aktsent */
  --vm-text: #2d3a4a;          /* kehatekst */
  --vm-text-soft: #475569;     /* sekundaarne tekst */
  --vm-text-faint: #8fa3b8;    /* kuupäevad, metainfo */
  --vm-surface: #f5f8fc;       /* helesinakas kaardipind */
  --vm-line: #e3e9f1;          /* jooned/äärised */
  --vm-line-soft: #e8eef6;     /* õrnemad jooned */
  --vm-radius: 16px;
  --vm-radius-s: 10px;
  --vm-shadow: 0 4px 20px rgba(10,26,42,.06), 0 1px 3px rgba(10,26,42,.05);
  --vm-shadow-hover: 0 12px 32px rgba(10,26,42,.12), 0 2px 6px rgba(10,26,42,.06);
  --vm-grad: linear-gradient(168deg, #04162e 0%, #062c5c 38%, #00438e 78%, #0e58ab 100%);
  --vm-container: 1240px;
}

/* ============================ 1. ÜLDINE ============================= */

::selection{background: var(--vm-orange); color: #fff;}
:focus-visible{outline: 3px solid rgba(255,146,51,.65); outline-offset: 2px; border-radius: 4px;}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior: smooth;}
}

/* Pace'i laadimisriba peenemaks */
.pace .pace-progress{height: 3px; background: linear-gradient(90deg, #ff9233, #ffb066);}

/* Preloader sujuvaks gradiendiks */
#preloaderWrap{background: var(--vm-grad);}
#preloaderWrap.home h2{letter-spacing: 10px; font-size: 34px;}
@media (max-width: 600px){
  #preloaderWrap.home h2{font-size: 20px; letter-spacing: 6px;}
}

/* ================== 2. KONTEINER — 4K/landscape fix ================= */
/* Sisu püsib max 1240px kolonnis; täislaiusse jäävad ainult           */
/* värvibändid (hero, #mainTop, socialBlock, jalus).                    */

.cnt-wrap{max-width: var(--vm-container);}

/* Avaleht oli 1400px "saareke" — eemaldame LAIUSE piiri, et hero      */
/* oleks täisleveel nagu sisulehtede bändid (kõrgusahel jääb samaks).  */
html.homePage body #mainWrap{max-width: none;}

/* Ikoonikaartide grid samasse kolonni */
#menuBlocks{max-width: calc(var(--vm-container) + 20px);}

/* Slaidi tekst joondub konteineri vasaku servaga, mitte ekraani äärde */
body #coverSlider .csCont{
  left: max(50px, calc((100% - var(--vm-container)) / 2));
  max-width: 700px;
}

/* Artiklikolonn loetava laiusega ja keskel — laiekraanil ei veni tekst
   servast servani ega jää parem pool tühjaks. Galerii/videod täislaiad. */
#mainContent .item-page{
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
#mainContent .item-page.gallery,
#mainContent .item-page.videos{max-width: none;}

/* ===================== 3. TAUST — foto asemel gradient ============== */

body{
  background-image: var(--vm-grad);
  background-attachment: scroll;
}
#blueOverlay{opacity: .35;}

/* ===================== 4. PÄIS — fikseeritud klaasriba ============== */
/* Lahendab: menüü loetamatus heledate taustapiltide peal.             */

#hdr{
  position: fixed;
  height: auto;            /* kasvab kaasa, kui menüü murdub teisele reale */
  min-height: 80px;
  background: rgba(4,18,40,.78);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 24px rgba(2,10,25,.25);
}
/* Päis laiem kui sisukolonn — EN/DE pikad menüüd mahuvad ühele reale */
#hdr .cnt-wrap{padding-top: 15px; max-width: 1400px;}

/* EN/DE menüüd on pikimad (10 punkti) — kitsam kiri nagu nordic-tweaks
   teeb FI/SV/NO/DA puhul; ainult desktopil */
@media (min-width: 1001px){
  html[lang^="en"] #hdr #mainMenu > ul > li > a,
  html[lang^="de"] #hdr #mainMenu > ul > li > a{
    font-size: 13px;
    padding-left: 6px;
    padding-right: 6px;
    letter-spacing: 0;
  }
}
@media (max-width: 1200px) and (min-width: 1001px){
  #hdr #langMenu ul li a{width: 24px; height: 16px;}
}

/* Menüülingid: 900 → 700, sujuv oranž alajoon */
#hdr #mainMenu > ul > li > a{
  font-weight: 700;
  letter-spacing: .2px;
  transition: color .2s ease;
}
#hdr #mainMenu > ul > li > a:before{
  height: 3px;
  border-radius: 2px;
  transition: width .25s ease;
}
#hdr #mainMenu > ul > li:hover > a,
#hdr #mainMenu > ul > li > a:hover{color: #ffb066;}
#hdr #mainMenu > ul > li:hover > a:before,
#hdr #mainMenu > ul > li > a:hover:before{width: calc(100% - 25px); left: 10px;}

/* Rippmenüü: klaas + raadius (positsioneering jääb 4/20 fixi omaks) */
#hdr #mainMenu > ul > li > ul{
  background: rgba(6,20,44,.86);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(2,10,25,.45);
  padding: 8px;
}
#hdr #mainMenu > ul > li > ul > li > a{
  border-radius: 9px;
  padding: 10px 14px;
  font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
#hdr #mainMenu > ul > li > ul > li > a:hover{
  color: #ffb066;
  background: rgba(255,146,51,.13);
}

/* Keelelipud: teravad ristkülikud (3:2) — ring tegi 18px GIF-id uduseks;
   nüüd 90×60 failid + ristkülik-chip = terav. Õrn vari + hover. */
#hdr #langMenu{margin-top: 15px;}
#hdr #langMenu ul li a{
  border-radius: 3px;
  overflow: hidden;
  width: 30px;
  height: 20px;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
  transition: transform .18s ease, box-shadow .18s ease;
}
#hdr #langMenu ul li a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#hdr #langMenu ul li a:hover{
  transform: scale(1.12);
  box-shadow: 0 2px 9px rgba(0,0,0,.55);
}

/* Mobiilimenüü: gradient + puhtad jooned punktiiri asemel */
#menuToggle{
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  padding: 18px 13px 17px 13px;
}
@media (max-width: 1000px){
  /* backdrop-filter teeks fixed-mobiilimenüü konteineriks 80px päise —
     mobiilis seega klaasi asemel tihke taust */
  #hdr{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(4,18,40,.94);
  }
  #menuWrapper{background: var(--vm-grad);}
  /* Mobiilimenüü lipud: 45×45 ruut → 48×32 ristkülik */
  #hdr #langMenu ul li a{width: 48px; height: 32px;}
  #hdr #mainMenu > ul > li{border-top: 1px solid rgba(255,255,255,.14);}
  #hdr #mainMenu > ul > li > ul{
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
  }
  #hdr #mainMenu > ul > li > ul > li{border-top: 1px solid rgba(255,255,255,.08);}
}

/* ===================== 5. AVALEHT — slaider ========================= */
/* Slaidifotod saavad SAMA navy-gradiendi nagu sisulehtede bänner —    */
/* ühtne keel + valge tekst/menüü loetav iga pildi peal.               */
/* NB: vm-slider.css laadub pärast seda faili (moodul lisab ise),     */
/* seega selektorid on "body"-prefiksiga, et cascade võita.            */

body #coverSlider .csImgOver{
  background: linear-gradient(168deg,
    rgba(4,22,46,.92) 0%,
    rgba(6,44,92,.72) 45%,
    rgba(0,67,142,.45) 100%);
  opacity: 1;
}

body #coverSlider .csCont h2{
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.5px;
  font-weight: 800;
  text-shadow: 0 2px 28px rgba(0,0,0,.35);
}
body #coverSlider .csCont h2::after{height: 5px; width: 56px; border-radius: 3px;}
body #coverSlider .csCont p.slideDesc{
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 14px rgba(0,0,0,.4);
  max-width: 56ch;
  margin-top: 28px;
}

/* Slaidinupp: 3px sinine ääris → kontrastne klaas-pill */
body #coverSlider .csCont a.slideLink{
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 13px 64px 13px 24px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .4px;
  margin-top: 30px;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
body #coverSlider .csCont a.slideLink::before{
  right: 24px;
  transition: transform .22s ease;
}
body #coverSlider .csCont a.slideLink:hover{
  background: var(--vm-orange);
  border-color: var(--vm-orange);
  color: #fff;
  transform: translateY(-2px);
}
body #coverSlider .csCont a.slideLink:hover::before{color: #fff; transform: translateX(4px);}

/* Slaideri täpid → pill-indikaatorid */
body #coverSlider.owl-theme .owl-controls .owl-page span{
  width: 26px;
  height: 4px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.4);
  margin: 5px 4px;
  opacity: 1;
  filter: none;
}
body #coverSlider.owl-theme .owl-controls .owl-page.active span,
body #coverSlider.owl-theme .owl-controls.clickable .owl-page:hover span{
  background: var(--vm-orange);
  width: 36px;
}

/* ================ 6. AVALEHT — ikoonikaardid (menuBlocks) =========== */
/* #eee raamid → hõljuvad valged kaardid varjudega.                    */

/* Absoluutpositsioon laskis kaartidel laiemal ekraanil uudistekaartide
   peale ujuda → tavavoogu (relative); -60px ülekate kaarega säilib. */
#menuBlocks{position: relative;}

/* Avalehe body-kast lõpeb viewport'i kõrgusel → gradiendi serv + html'i
   #eee paistaksid kaartide tagant. Täislaiune valge paneel kaare alt. */
#menuBlocks::before{
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: 40px;
  bottom: 0;
  background: #fff;
}

#menuBlocks ul li{border-color: transparent;}
#menuBlocks ul li a{
  border-radius: var(--vm-radius);
  border: 1px solid var(--vm-line);
  box-shadow: var(--vm-shadow);
  padding: 26px 10px 22px 10px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#menuBlocks ul li a:hover{
  transform: translateY(-4px);
  box-shadow: var(--vm-shadow-hover);
  border-color: #cdd9ea;
  background: #fff;
  color: var(--vm-blue);
}
#menuBlocks ul li a .image-title{font-weight: 700; font-size: 14px; letter-spacing: .1px;}

/* ================ 7. AVALEHT — uudiste sektsioon ==================== */

#homeContent{padding: 64px 0 56px 0;}
#homeContent .moduletable > h3,
#mainContent .moduletable > h3{
  font-size: 28px;
  font-weight: 800;
  color: var(--vm-navy);
  letter-spacing: -0.3px;
  margin: 10px auto 34px auto;
}
/* Sektsioonipealkiri ("Viimased uudised") — voo-paigutusega saab
   originaalis kaartide taha peidetud h3 lõpuks nähtavaks + aktsendijoon */
#homeContent .moduletable > h3::after,
#mainContent .moduletable > h3::after{
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 3px;
  background: var(--vm-orange);
  margin: 14px auto 0 auto;
}

/* Uudised: float-veerud → korralik grid-kaardistik */
#homeContent .moduletable > ul.category-module,
#mainContent .moduletable > ul.category-module{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  overflow: visible;
}
#homeContent .moduletable > ul.category-module li,
#mainContent .moduletable > ul.category-module li{
  float: none;
  width: auto;
  margin: 0;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--vm-line);
  border-radius: var(--vm-radius);
  box-shadow: var(--vm-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
#homeContent .moduletable > ul.category-module li:hover,
#mainContent .moduletable > ul.category-module li:hover{
  transform: translateY(-3px);
  box-shadow: var(--vm-shadow-hover);
}
.moduletable > ul.category-module li > a.mod-articles-category-title{
  color: var(--vm-navy);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
  display: block;
  transition: color .18s ease;
}
.moduletable > ul.category-module li > a.mod-articles-category-title:hover{color: var(--vm-blue);}
.moduletable > ul.category-module li > span.mod-articles-category-date{
  color: var(--vm-text-faint);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 8px 0 2px 0;
}
.moduletable > ul.category-module li > p.mod-articles-category-introtext{
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vm-text-soft);
}
.moduletable > ul.category-module li > p.mod-articles-category-readmore a{
  font-size: 12px;
  letter-spacing: 1px;
  transition: color .18s ease;
}
.moduletable > ul.category-module li > p.mod-articles-category-readmore a::after{
  height: 2px;
  width: 22px;
  border-radius: 2px;
  transition: width .2s ease, background-color .2s ease;
}
.moduletable > ul.category-module li > p.mod-articles-category-readmore a:hover{color: var(--vm-orange);}
.moduletable > ul.category-module li > p.mod-articles-category-readmore a:hover::after{
  width: 34px;
  background-color: var(--vm-orange);
}

/* Avalehe paremserva uudistepaneel (kui avaldatud) */
#homeCoverModule #coverRight{
  background: rgba(4,22,46,.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: var(--vm-radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
#homeCoverModule #coverRight h3{letter-spacing: 1.5px;}
#homeCoverModule #coverRight ul li{border-top: 1px solid rgba(255,255,255,.09);}
#homeCoverModule #coverRight ul li > a.mod-articles-category-title{text-align: left;}

/* ================ 8. SISULEHE BÄNNER + PEALKIRJAD =================== */

#mainTop h2{
  letter-spacing: 4px;
  font-size: 26px;
  opacity: 0;  /* JS-animatsioon lisab .animated → nähtavaks */
}

/* Lehe H1 (teenuselehed + artiklid) — selge hierarhia + oranž aktsent */
#mainContent .page-header h1{
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.22;
  font-weight: 800;
  color: var(--vm-navy);
  letter-spacing: -0.4px;
  margin: 26px 0 18px 0;
}
#mainContent .page-header h1::after{
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 3px;
  background: var(--vm-orange);
  margin-top: 14px;
}
#mainContent .item-page .page-header h2{
  color: var(--vm-navy);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.3px;
}

/* ===================== 9. ARTIKLI TÜPOGRAAFIA ======================= */

#mainContent .articleBody{color: var(--vm-text);}
#mainContent .articleBody p{
  text-align: left;
  line-height: 1.7;
  margin: 18px auto 18px 0;
}
#mainContent .articleBody h2,
#mainContent .articleBody h3{
  color: var(--vm-navy);
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin-top: 34px;
}

/* Lingid: punktiir-äärise asemel moodne allakriips */
#mainContent .articleBody p a{
  border-bottom: none;
  text-decoration: underline;
  text-decoration-color: rgba(0,67,142,.35);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color .18s ease, color .18s ease;
}
#mainContent .articleBody p a:hover{
  color: var(--vm-blue-bright);
  text-decoration-color: var(--vm-blue-bright);
}

/* Pildid pehmemaks */
#mainContent .item-page .articleBody img{border-radius: var(--vm-radius-s);}
#mainContent .item-page .item-image img{border-radius: 14px;}

/* Artikli metainfo: punktiirkast → õrn pill */
#mainContent .item-page .article-info{
  border: 1px solid var(--vm-line);
  background: var(--vm-surface);
  border-radius: 999px;
  padding: 7px 16px;
  color: #64748b;
}

/* "Tagasi" link pill-nupuks */
#mainContent .item-page .backToCat{
  border: 1.5px solid var(--vm-line);
  border-radius: 999px;
  padding: 10px 20px;
  background: #fff;
  color: var(--vm-blue);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#mainContent .item-page .backToCat:hover{
  background: var(--vm-blue);
  color: #fff;
  border-color: var(--vm-blue);
}
#mainContent .item-page .backToCat .lighter{color: inherit; opacity: .6;}

hr{border-top: 1px solid var(--vm-line-soft); margin: 28px auto;}

/* Tabelid: sinine esiveerg + #eee lahtrid → puhas kaarttabel */
#mainContent .item-page .articleBody table.bordered{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--vm-line);
  box-shadow: var(--vm-shadow);
}
#mainContent .item-page .articleBody table.bordered tr th,
#mainContent .item-page .articleBody table.bordered tr td{
  background-color: #fff;
  border-right: 1px solid var(--vm-line-soft);
  border-bottom: 1px solid var(--vm-line-soft);
  padding: 15px 20px;
  font-size: 14px;
  color: var(--vm-text);
}
#mainContent .item-page .articleBody table.bordered tr:nth-of-type(even) td{background-color: #fafcfe;}
#mainContent .item-page .articleBody table.bordered tr th{
  background-color: var(--vm-surface);
  color: var(--vm-navy);
  font-weight: 700;
}
#mainContent .item-page .articleBody table.bordered tr td:first-child{
  background: var(--vm-surface);
  color: var(--vm-navy);
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--vm-line-soft);
  border-right: 2px solid var(--vm-line);
}
#mainContent .item-page .articleBody table.bordered tr td:only-child{
  background: none;
  color: inherit;
  border-color: var(--vm-line-soft);
}

/* FAQ — väike kohendus (Q-ringid jäävad) */
.vm-faq{border-top: 2px solid rgba(255,146,51,.5);}
.vm-faq dt{color: var(--vm-navy) !important;}
.vm-faq dd{border-bottom: 1px solid var(--vm-line-soft); color: var(--vm-text) !important;}

/* ============== 10. CROSS-SELL — one-stop-shop kaart ================ */
/* Strateegiline plokk: tõstame esile kaardi + pill-linkidena.         */

#articleBottom .cross-sell{
  background: var(--vm-surface);
  border: 1px solid var(--vm-line);
  border-radius: var(--vm-radius);
  padding: 30px 32px;
  margin: 6px 0 22px 0;
}
#articleBottom .cross-sell h3{
  margin: 0 0 10px 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--vm-navy);
  letter-spacing: -0.2px;
}
#articleBottom .cross-sell p{
  color: var(--vm-text-soft);
  line-height: 1.65;
  margin: 0 0 18px 0;
  text-align: left;
  max-width: none;
}
#articleBottom ul.cross-sell-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#articleBottom ul.cross-sell-links li{margin: 0; padding: 0;}
#articleBottom ul.cross-sell-links li a{
  display: inline-block;
  background: #fff;
  border: 1px solid #c9d7e8;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--vm-blue);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
#articleBottom ul.cross-sell-links li a:hover{
  background: var(--vm-blue);
  border-color: var(--vm-blue);
  color: #fff;
  transform: translateY(-1px);
}

/* ============ 10b. VIDEOPLOKID (galerii likvideeritud 6/11) ========= */
/* Meist-lehtede ja tootekategooriate YouTube-embed'id.                 */

.vm-video-rida{display: flex; flex-wrap: wrap; gap: 20px; margin: 8px 0;}
.vm-video-rida .vm-video-plokk{flex: 1 1 320px; max-width: 560px;}
.vm-video-plokk{margin: 18px 0;}
.vm-video-plokk h3{margin: 0 0 10px 0; color: var(--vm-navy); font-weight: 800;}
.vm-video{
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 560px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--vm-shadow);
  background: #000;
}
.vm-video iframe{position: absolute; inset: 0; width: 100%; height: 100%; border: 0;}

/* =================== 11. BLOGI / UUDISED / GALERII ================== */

#mainContent .blog .items-leading{border-bottom: 1px solid var(--vm-line-soft);}
#mainContent .blog .items-row{border-bottom: 1px solid var(--vm-line-soft);}
#mainContent .blog .items-leading .leading-0 p:not(.readmore){text-align: left; line-height: 1.65; font-weight: 400; color: var(--vm-text-soft);}
#mainContent .blog .items-row > div p:not(.readmore){color: var(--vm-text-soft); font-weight: 400; line-height: 1.6;}
#mainContent .blog .page-header h2{letter-spacing: 1px;}
#mainContent .blog .page-header h2 a{transition: color .18s ease;}
#mainContent .blog .items-row > div .item-image{border-radius: 14px; overflow: hidden;}
#mainContent .blog .items-leading .leading-0 .item-image{border-radius: 14px;}
#mainContent .blog .article-info .published{color: var(--vm-text-faint); letter-spacing: 2px;}

/* "Loe edasi" pill-nupuks */
#mainContent .blog p.readmore a{
  border-bottom: none;
  border: 1.5px solid var(--vm-line);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-block;
  background: #fff;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#mainContent .blog p.readmore a:hover{
  background: var(--vm-blue);
  border-color: var(--vm-blue);
  color: #fff;
}

/* Teenuste ruudustik (blog.services): valge raam → raadius+kate */
#mainContent .blog.services .items-row > div .item .artContent{
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(4,22,46,.35) 0%, rgba(4,22,46,.78) 100%);
  margin: 8px;
  transition: background .25s ease;
}
#mainContent .blog.services .items-row > div .item:hover .artContent{
  background: linear-gradient(180deg, rgba(0,67,142,.45) 0%, rgba(4,22,46,.85) 100%);
}
#mainContent .blog.services .items-row > div .item .item-image{border-radius: 0;}

/* Kategooriaplaadid (uudised/galerii hub) */
#mainContent .categories-list > div > a{border-radius: 14px; overflow: hidden;}
#mainContent .categories-list > div::after{border-radius: 14px;}
#mainContent .categories-list > div h3{letter-spacing: 2px;}

/* Galerii pealkirjad */
#mainContent .item-page.gallery .articleBody > div{border-radius: 14px; overflow: hidden;}
#mainContent .item-page.gallery .articleBody > div h3{letter-spacing: 2px;}

/* Sertifikaadid: puidust raam → puhas valge kaart */
#mainContent .item-page.certificates .articleBody table tr td p a img{
  border: 1px solid var(--vm-line);
  border-image: none;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(7,23,46,.12);
  background: #fff;
  padding: 10px;
}

/* Videod */
#mainContent .item-page.videos table tr td{border-bottom: 1px solid var(--vm-line-soft);}
#mainContent .item-page.videos table tr td h3 a{
  border-bottom: none;
  text-decoration: underline;
  text-decoration-color: rgba(0,67,142,.35);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
#mainContent .item-page.videos table tr td iframe{border-radius: 14px;}

/* Tootelehtede sisetabelid */
#mainContent table.tooteTabel > tbody > tr > td > table.tooteSiseTabel > tbody > tr > td.tooteKirjeldus{
  text-align: left;
  border-bottom: 2px solid var(--vm-line-soft);
}
#mainContent .blog.products .items-row .item.column-1{border-right: 1px solid var(--vm-line-soft);}

/* ========================= 12. KONTAKTID ============================ */

.contact-category h2{color: var(--vm-navy); font-weight: 300;}
.contact-category form#adminForm ul.category.list-striped li{
  background: #fff;
  border: 1px solid var(--vm-line);
  border-radius: var(--vm-radius);
  box-shadow: var(--vm-shadow);
  width: 31%;
  margin: 12px 1%;
  padding: 26px 16px;
}
.contact-category form#adminForm ul.category.list-striped li .image img{border-radius: 12px;}
.contact-category form#adminForm ul.category.list-striped li .list-title .name{letter-spacing: 1px;}
.contact-category form#adminForm ul.category.list-striped li .list-title .name::after{
  background-color: var(--vm-orange);
  height: 3px;
  width: 36px;
  border-radius: 2px;
}
.contact-category form#adminForm ul.category.list-striped li .contact a{
  border-bottom: none;
  text-decoration: underline;
  text-decoration-color: rgba(0,67,142,.3);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.contactTable table td{border-bottom: 1px solid var(--vm-line-soft); border-left: 1px solid var(--vm-line-soft); color: var(--vm-text-soft);}
.contactTable table td:first-child{letter-spacing: .5px; font-weight: 700; color: var(--vm-navy);}
.contactTable table td a{
  border-bottom: none;
  text-decoration: underline;
  text-decoration-color: rgba(0,67,142,.3);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ============== 13. SOTSIAALPLOKK + LOGORIBA + JALUS ================ */

#socialBlock{background-image: var(--vm-grad);}
#socialBlock .blueOver{opacity: .35;}
#socialBlock .moduletable{text-align: left; font-size: 16px; line-height: 1.65;}
#socialBlock h3{font-size: 27px; font-weight: 800; letter-spacing: -0.3px;}
#socialBlock h3::after{border-radius: 3px;}
#socialBlock .moduletable .custom a{
  text-decoration: underline;
  text-decoration-color: rgba(255,178,102,.6);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
#socialBlock .moduletable .custom a:hover{color: #ffb066;}
#socialBlock .fb-link a{
  color: #ffb066;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255,178,102,.5);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
#socialBlock .fb-link a:hover{color: #fff;}

/* Partnerlogod: rahulik halltoon, hover toob värvi */
#ftrLogoSection{padding: 32px 0; border-top: 1px solid #eef2f7;}
#ftrLogos .logoItem > img,
#ftrLogos .logoItem > a > img{
  filter: grayscale(1) opacity(.7);
  transition: filter .25s ease;
}
#ftrLogos .logoItem:hover > img,
#ftrLogos .logoItem:hover > a > img{filter: none;}

/* Jalus: must riba → süvanavy */
#ftr{
  background-color: #071a33;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  letter-spacing: .3px;
  padding: 26px 0;
}

/* ===================== 14. RESPONSIVE TÄPSUSTUSED =================== */

@media (max-width: 1000px){
  #homeContent .moduletable > ul.category-module,
  #mainContent .moduletable > ul.category-module{grid-template-columns: 1fr; gap: 18px;}
  /* main-style'i mobiilireegel paneb first-childile 10px #eee raami — üle */
  #homeContent .moduletable > ul.category-module li:first-child,
  #mainContent .moduletable > ul.category-module li:first-child{border: 1px solid var(--vm-line);}
  body #coverSlider .csCont{left: 20px; max-width: none;}
}
@media (max-width: 800px){
  #articleBottom .cross-sell{padding: 22px 20px;}
  #mainContent .page-header h1{font-size: 24px;}
}
@media (max-width: 600px){
  #mainTop h2{letter-spacing: 2px; font-size: 17px;}
  .contact-category form#adminForm ul.category.list-striped li{width: 98%; margin: 10px auto;}
}
@media (max-width: 400px){
  #hdr #langMenu ul li a{width: 33px; height: 22px;}
}

/* ===================== 15. REDUCED MOTION =========================== */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior: auto;}
  #menuBlocks ul li a,
  .moduletable > ul.category-module li,
  #coverSlider .csCont a.slideLink,
  #articleBottom ul.cross-sell-links li a{transition: none;}
}

/* ============ 16. SISULEHE BÄNNERI ALAMMENÜÜ (#mcLeft) JOONDUS ============ */
/* Toodete-alammenüü ujus täislaiusega banneris viewport-serva (x=50px) ja   */
/* kleepus fikseeritud päise alla. Joondame banneri sisu 1240px konteineriga */
/* ja toome alammenüü pealkirjaga ("TUOTTEET") vertikaalselt samale joonele. */
@media (min-width: 1001px){
  #mainTop{
    padding-left: 50px;
    padding-right: 50px;
    padding-left: max(50px, calc((100% - 1240px) / 2));
    padding-right: max(50px, calc((100% - 1240px) / 2));
  }
  #mainTop h2.floatLeft{
    left: 43px;
    left: max(43px, calc((100% - 1240px) / 2));
    width: calc(min(100%, 1240px) - 365px);
  }
  #mainTop h2.floatRight{
    right: 43px;
    right: max(43px, calc((100% - 1240px) / 2));
    width: calc(min(100%, 1240px) - 365px);
  }
  /* 55px = matemaatiline nihe, millega mcLeft'i keskpunkt = h2 keskpunkt
     (h2 on absolute top:calc(50% + 40px); banneri kõrgus = 100+sisu+75) */
  #mainTop #mcLeft{margin-top: 55px;}
}