/* =====================================================
   Predloga KOS — Plavalna šola KOS · Terme 3000
   Nativna Joomla predloga po oblikovnem predlogu A
   v1.1.0 — svetla/temna tema, mehurčki, valovite ločnice
   =====================================================
   Barve tem: svetla je privzeta (:root), temna se vklopi
   z atributom html[data-theme="dark"].
   --navy je BARVA BESEDILA naslovov (v temni temi svetla!),
   --navy-fixed je vedno temna mornarska (ozadja: noga, hero).
   ===================================================== */
:root{
  --blue:#1BA6DF;
  --blue-dark:#0E86BC;
  --navy:#0A1C2E;            /* naslovi in poudarjeno besedilo */
  --navy-fixed:#0A1C2E;      /* ozadja, ki ostanejo temna v obeh temah */
  --navy-soft:#12283d;
  --orange:#F7941D;
  --orange-dark:#E07E00;
  --white:#ffffff;

  --bg:#ffffff;              /* ozadje strani */
  --bg-alt:#F3FAFE;          /* ozadje izmeničnih sekcij (section.block.alt) */
  --blue-pale:#F3FAFE;       /* nežna modra ozadja (blockquote, input) */
  --blue-light:#E4F5FD;      /* ikone, značke */
  --card:#ffffff;            /* ozadje kartic */
  --card-border:#E8F1F7;
  --input-border:#D6E5EF;
  --text:#2B3A48;
  --muted:#5D7285;
  --header-bg:rgba(255,255,255,.94);
  --header-border:#E3EDF4;
  --link-hover-bg:#E4F5FD;
  --footer-bg:#0A1C2E;

  --radius:18px;
  --shadow:0 10px 30px rgba(10,28,46,.10);
  --shadow-sm:0 4px 14px rgba(10,28,46,.08);
}
html[data-theme="dark"]{
  --navy:#EAF4FB;            /* naslovi postanejo svetli */
  --bg:#0A1C2E;
  --bg-alt:#0D2338;
  --blue-pale:#102A42;
  --blue-light:rgba(27,166,223,.18);
  --card:#122A40;
  --card-border:#1D3E5C;
  --input-border:#24486B;
  --text:#C9DCEA;
  --muted:#8FA9BC;
  --header-bg:rgba(9,24,39,.94);
  --header-border:#1D3E5C;
  --link-hover-bg:rgba(27,166,223,.18);
  --footer-bg:#061120;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 4px 14px rgba(0,0,0,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--text);background:var(--bg);
  font-size:17px;line-height:1.65;
  transition:background .3s,color .3s;
}
h1,h2,h3,h4{font-family:'Baloo 2','Nunito',system-ui,sans-serif;color:var(--navy);line-height:1.2}
img{max-width:100%;height:auto}
/* pomožni razredi za slike v vsebini — dodaš jih ročno v urejevalniku (Image Class) */
img.rounded{border-radius:18px}
img.rounded-sm{border-radius:12px}
img.rounded-full{border-radius:50%}
img.img-shadow{box-shadow:var(--shadow)}
a{color:var(--blue-dark)}
html[data-theme="dark"] a{color:var(--blue)}
.container{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---- glava ---- */
header.site{
  position:sticky;top:0;z-index:100;background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--header-border);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 24px;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:58px;width:auto}
.brand .brand-name{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:21px;color:var(--navy);line-height:1.05}

/* večja glava na vrhu strani, ki se ob drsenju zmanjša (param growHeader);
   samo namizje — na telefonu (≤640px) glava ostane kompaktna dvovrstična */
@media(min-width:961px){
  header.site.grow .nav-wrap{transition:padding .28s ease}
  header.site.grow .brand img{transition:height .28s ease}
  header.site.grow .brand .brand-name{transition:font-size .28s ease}
  header.site.grow:not(.shrunk) .nav-wrap{padding:9px 24px}
  header.site.grow:not(.shrunk) .brand img{height:106px}
  header.site.grow:not(.shrunk) .brand .brand-name{font-size:25px}
  header.site.grow:not(.shrunk) .brand .brand-name small{font-size:12.5px}
}
.brand .brand-name small{display:block;font-family:'Nunito',sans-serif;font-weight:700;font-size:11.5px;color:var(--blue-dark);letter-spacing:1.4px;text-transform:uppercase}
html[data-theme="dark"] .brand .brand-name small{color:var(--blue)}

/* glavni meni (Joomla mod_menu izpiše ul.menu > li > a) */
.nav-right{display:flex;align-items:center;gap:8px}
nav.main{margin-left:auto}
nav.main ul{list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:0}
nav.main li{margin:0;padding:0}
nav.main a{
  text-decoration:none;color:var(--navy);font-weight:700;font-size:15.5px;
  padding:9px 14px;border-radius:999px;transition:.2s;white-space:nowrap;cursor:pointer;
  display:inline-block;
}
nav.main a:hover{background:var(--link-hover-bg);color:var(--blue-dark)}
html[data-theme="dark"] nav.main a:hover{color:var(--blue)}
html[data-theme="dark"] nav.main a.cta,
html[data-theme="dark"] nav.main a.cta:hover{color:#fff}
nav.main li.active > a,
nav.main li.current > a{background:var(--blue);color:#fff}
nav.main a.cta{background:var(--orange);color:#fff;margin-left:8px;box-shadow:0 4px 12px rgba(247,148,29,.35)}
nav.main a.cta:hover{background:var(--orange-dark);color:#fff}
nav.main li.active > a.cta,
nav.main li.current > a.cta{background:var(--orange-dark);color:#fff}
.hamb{display:none;background:none;border:none;font-size:28px;color:var(--navy);cursor:pointer;line-height:1}

/* Bootstrap pomožni razred, ki ga Joomlini moduli (npr. mod_languages)
   uporabljajo za besedila bralnikov zaslona — predloga Bootstrapa ne nalaga,
   zato ga definiramo sami, sicer skrita besedila postanejo vidna. */
.visually-hidden,.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* jezikovni preklopnik (Joomla mod_languages v poziciji langswitch) */
.langswitch ul{list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:0}
.langswitch li{margin:0;padding:0}
.langswitch li a,.langswitch li.lang-active:not(:has(> a)){
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:30px;padding:0 8px;border-radius:999px;
  font-weight:800;font-size:13px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--navy);text-decoration:none;transition:.2s;
}
.langswitch li a:hover{background:var(--link-hover-bg);color:var(--blue-dark)}
.langswitch li.lang-active > a,.langswitch li.lang-active:not(:has(> a)){background:var(--blue);color:#fff}
/* povozi Joomlin mod_languages/template.css, ki se naloži ZA predlogo
   in aktivnemu jeziku vsili svetlo ozadje (#f0f0f0) ter lastne odmike */
.langswitch div.mod-languages ul li.lang-active{background:none!important}
.langswitch div.mod-languages li{margin:0!important}
.langswitch div.mod-languages a{padding:0 8px}
.langswitch div.mod-languages a:has(img){padding:0}

/* različica z zastavicami: obe v ENAKEM krogcu, aktivna dobi moder obroček */
.langswitch img{width:20px;height:auto;border-radius:3px;display:block}
.langswitch li a:has(img),
.langswitch li.lang-active a:has(img){
  min-width:0;width:34px;height:34px;padding:0;border-radius:50%;
  background:var(--link-hover-bg);
  display:inline-flex;align-items:center;justify-content:center;
}
.langswitch li a:has(img):hover{background:var(--link-hover-bg);transform:scale(1.08)}
.langswitch li.lang-active a:has(img){box-shadow:0 0 0 2px var(--blue)}

/* preklop teme */
.theme-toggle{
  color:var(--navy);
  background:var(--link-hover-bg);border:none;cursor:pointer;
  width:40px;height:40px;border-radius:50%;font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.2s;
  flex:0 0 auto;
}
.theme-toggle:hover{transform:rotate(15deg) scale(1.08)}

/* ---- sistemska sporočila ----
   prazen vsebnik ne sme zavzeti prostora (sicer bel pas med glavo in hero) */
#system-message-container{max-width:1120px;margin:0 auto;padding:0}
#system-message-container .alert{margin:12px 24px}
#system-message-container joomla-alert{margin:12px 24px}

/* ---- hero ---- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-fixed) 0%,#0F3552 45%,var(--blue-dark) 100%);
  color:#fff;
}
.hero .container{display:flex;align-items:center;gap:48px;padding-top:72px;padding-bottom:110px;position:relative;z-index:2}
.hero-text{flex:1.2}
.hero-text .kicker{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:6px 16px;border-radius:999px;font-size:14px;font-weight:800;letter-spacing:.6px;margin-bottom:20px;color:#BFE9FB}
.hero-text h1{color:#fff;font-size:52px;margin-bottom:8px}
.hero-text .tag{font-family:'Baloo 2',sans-serif;font-size:24px;color:var(--orange);font-weight:600;margin-bottom:18px}
.hero-text p{font-size:18px;color:#D7EDF8;max-width:560px;margin-bottom:30px}
.hero-logo{flex:.8;display:flex;justify-content:center}
.hero-logo img{width:min(320px,80%);filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
.btn{display:inline-block;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;text-decoration:none;padding:13px 30px;border-radius:999px;transition:.2s;cursor:pointer;border:none}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(247,148,29,.4)}
.btn-orange:hover{background:var(--orange-dark);transform:translateY(-2px);color:#fff}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);margin-left:12px}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
/* gumbi morajo obdržati svoje barve tudi v temni temi —
   sicer jih povozi splošno pravilo html[data-theme="dark"] a{color:var(--blue)} */
html[data-theme="dark"] .btn-orange{color:#fff}
html[data-theme="dark"] .btn-ghost{color:#fff}
html[data-theme="dark"] .btn-white{color:var(--blue-dark)}
/* Val na dnu hero sekcije IZRIŠE PREDLOGA (index.php), ne vsebina modula —
   Joomlin urejevalnik namreč SVG-ju rad odstrani viewBox in val popači.
   Morebitni val, ki bi ostal v vsebini hero modula, zato skrijemo. */
.tpl-hero{position:relative}
.tpl-hero-wave{position:absolute;bottom:-2px;left:0;width:100%;z-index:3;line-height:0;font-size:0;pointer-events:none}
.tpl-hero-wave svg{display:block;width:100%;height:90px}
.tpl-hero-wave svg path{fill:var(--bg)}   /* val se vedno ujema z ozadjem strani (tudi v temni temi) */
.tpl-hero .hero-wave{display:none}        /* skrij (pokvarjen) val iz vsebine modula */

/* ---- mehurčki (hero in noga; ustvari jih template.js) ---- */
.bubble{
  position:absolute;bottom:-60px;z-index:1;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(27,166,223,.08));
  border:1px solid rgba(255,255,255,.12);
  animation:kos-rise linear infinite;
  pointer-events:none;
}
@keyframes kos-rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.7}
  100%{transform:translateY(-110vh) translateX(24px);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .bubble{display:none}
}

/* ---- statistika ---- */
.stats{margin-top:22px;position:relative;z-index:5}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 20px;text-align:center;border-top:4px solid var(--blue)}
.stat b{display:block;font-family:'Baloo 2',sans-serif;font-size:30px;color:var(--blue-dark)}
html[data-theme="dark"] .stat b{color:var(--blue)}
.stat span{font-size:14.5px;color:var(--muted);font-weight:700}

/* ---- sekcije ---- */
section.block{padding:76px 0}
section.block.alt{background:var(--bg-alt)}
section.block.navy{background:var(--navy-fixed);color:#E6F2FA}
section.block.navy h2,section.block.navy h3{color:#fff}
.sec-head{text-align:center;max-width:880px;margin:0 auto 46px}
.sec-head .eyebrow{display:inline-block;color:var(--orange);font-weight:800;letter-spacing:1.6px;text-transform:uppercase;font-size:13.5px;margin-bottom:10px}
.sec-head h2{font-size:38px;margin-bottom:14px}
.sec-head p{color:var(--muted);font-size:17.5px}
section.block.navy .sec-head p{color:#B9D8EA}

/* ---- valovite ločnice med sekcijami ----
   .wave-divider  — samostojen val (uporablja ga predloga nad nogo)
   možnost tudi v vsebini: <div class="wave-divider to-alt"></div> */
.wave-divider{height:70px;position:relative;overflow:hidden;line-height:0;font-size:0}
.wave-divider svg{display:block;width:100%;height:calc(100% + 2px)}
.wave-divider.to-footer{margin-bottom:-2px}   /* prekrij 1px stik z nogo */
.wave-divider.to-footer svg path{fill:var(--footer-bg)}
.wave-divider.to-alt svg path{fill:var(--bg-alt)}
.wave-divider.to-bg svg path{fill:var(--bg)}

/* ---- kartice ---- */
.cards{display:grid;gap:22px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:28px;border:1px solid var(--card-border);transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ico{width:52px;height:52px;border-radius:14px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px}
.card h3{font-size:20px;margin-bottom:8px}
.card p{font-size:15.5px;color:var(--muted)}
.card .dur{display:inline-block;background:var(--blue-light);color:var(--blue-dark);font-size:12.5px;font-weight:800;padding:4px 12px;border-radius:999px;margin-bottom:12px;letter-spacing:.4px;text-transform:uppercase}
html[data-theme="dark"] .card .dur{color:var(--blue)}
.card.center{text-align:center}
.card.center .ico{margin:0 auto 12px}
.card.top-blue{border-top:4px solid var(--blue)}
.card.top-orange{border-top:4px solid var(--orange)}
/* ---- galerija letakov (sličice + velika slika + lightbox) ---- */
.flyer-thumbs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.flyer-thumbs button{padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;cursor:pointer;background:none;line-height:0;box-shadow:var(--shadow-sm);transition:.2s}
.flyer-thumbs button img{width:88px;height:auto;display:block}
.flyer-thumbs button:hover{transform:translateY(-2px)}
.flyer-thumbs button.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,166,223,.3)}
.flyer-main{display:block;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in;line-height:0}
.flyer-main img{width:100%;display:block}
.kos-lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,17,32,.88);display:flex;align-items:center;justify-content:center;padding:28px;cursor:zoom-out}
.kos-lightbox img{max-width:min(92vw,900px);max-height:92vh;width:auto;height:auto;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.kos-lightbox .lb-close{position:absolute;top:16px;right:20px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.kos-lightbox .lb-close:hover{background:rgba(255,255,255,.32)}

/* ---- cene na kartah (stran Cenik) ---- */
.card .price{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:36px;color:var(--blue-dark);line-height:1.1;margin:2px 0 10px}
html[data-theme="dark"] .card .price{color:var(--blue)}
.card .price small{font-family:'Nunito',sans-serif;font-size:14.5px;font-weight:800;color:var(--muted);margin-left:4px}
.card .price.free{color:var(--orange-dark)}
html[data-theme="dark"] .card .price.free{color:var(--orange)}
.price-note{max-width:840px;margin:26px auto 0;background:var(--blue-pale);border-left:4px solid var(--blue);border-radius:0 12px 12px 0;padding:16px 20px;color:var(--navy);font-size:14.5px;line-height:1.6}
.price-note b{color:var(--navy)}
.price-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}

/* ---- FAQ harmonika (details/summary, brez JS) ---- */
.faq{max-width:840px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow-sm);margin-bottom:12px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;font-weight:800;color:var(--navy);font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--blue-pale);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif;font-size:18px;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 20px 18px;color:var(--muted);font-size:15px;line-height:1.65}
.faq details > div p{margin-bottom:10px}
.faq details > div p:last-child{margin-bottom:0}
html[data-theme="dark"] .faq summary::after{color:var(--blue)}

/* značke na dnu kartic (trajanje, oblika vadbe ...) */
.card .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.card .tags span{background:var(--blue-light);color:var(--blue-dark);font-weight:700;font-size:13px;padding:5px 13px;border-radius:999px}
html[data-theme="dark"] .card .tags span{color:var(--blue)}
/* poudarjena (aktualna) tečaja na Ponudbi */
.card.hot{border:2px solid var(--orange);box-shadow:0 14px 34px rgba(247,148,29,.2)}
.card.hot:hover{box-shadow:0 18px 42px rgba(247,148,29,.28)}
.card.hot > .dur{background:var(--orange);color:#fff}
html[data-theme="dark"] .card.hot > .dur{color:#fff}
.badge-hot{display:inline-block;margin-top:14px;background:rgba(247,148,29,.14);color:var(--orange-dark);font-weight:800;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;padding:6px 14px;border-radius:999px}
html[data-theme="dark"] .badge-hot{color:var(--orange);background:rgba(247,148,29,.24)}
html[data-theme="dark"] .card.hot{box-shadow:0 14px 34px rgba(0,0,0,.4)}

/* ---- seznami s kljukicami ---- */
ul.checks{list-style:none}
ul.checks li{position:relative;padding-left:32px;margin-bottom:10px;font-weight:600}
ul.checks li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;background:var(--blue);color:#fff;border-radius:50%;font-size:13px;display:flex;align-items:center;justify-content:center;font-weight:900;margin-top:3px}
ul.checks.orange li::before{background:var(--orange)}

/* ---- dvokolonske postavitve ---- */
.split{display:flex;gap:48px;align-items:flex-start}
.split>div{flex:1}

/* ---- vodja ---- */
.leader{display:flex;gap:40px;align-items:center;background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:40px;border:1px solid var(--card-border)}
.leader .photo{flex:0 0 220px;height:260px;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,var(--blue-light),#CBEAF9);box-shadow:var(--shadow-sm)}
html[data-theme="dark"] .leader .photo{background:linear-gradient(160deg,#10395433,#1BA6DF33)}
.leader .photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.leader h3{font-size:26px}
.leader .role{color:var(--orange-dark);font-weight:800;font-size:15px;margin-bottom:14px}
html[data-theme="dark"] .leader .role{color:var(--orange)}
.leader blockquote{margin-top:18px;border-left:4px solid var(--orange);padding:10px 18px;background:var(--blue-pale);border-radius:0 12px 12px 0;font-style:italic;color:var(--navy);font-weight:600}

/* ---- časovnica poteka ure ---- */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.tstep{background:var(--card);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);border:1px solid var(--card-border);position:relative}
.tstep::before{counter-increment:step;content:counter(step);position:absolute;top:-18px;left:24px;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(247,148,29,.4)}
.tstep h3{margin:10px 0 8px;font-size:19px}
.tstep p,.tstep li{font-size:15px;color:var(--muted)}
.tstep ul.checks li{margin-bottom:6px;font-weight:600;padding-left:28px}

/* ---- tehnike ---- */
.tech{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tech .card{padding:22px;text-align:center}
.tech .card .ico{margin:0 auto 12px}
.tech .card h3{font-size:17px}
.tech .card p{font-size:14px}

/* ---- kontakt ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:36px}
.c-info .row{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.c-info .row .ico{flex:0 0 44px;height:44px;border-radius:12px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:20px}
.c-info b{display:block;color:var(--navy)}
.c-info span{color:var(--muted);font-size:15.5px}
form.mock{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;border:1px solid var(--card-border)}
form.mock label{display:block;font-weight:800;font-size:14px;margin:14px 0 6px;color:var(--navy)}
form.mock input,form.mock select,form.mock textarea{width:100%;padding:11px 14px;border:1.5px solid var(--input-border);border-radius:12px;font-family:inherit;font-size:15px;background:var(--blue-pale);color:var(--text)}
form.mock input::placeholder,form.mock textarea::placeholder{color:var(--muted)}
form.mock input:focus,form.mock select:focus,form.mock textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.form-note{font-size:13px;color:var(--muted);margin-top:10px}

/* ---- Convert Forms (com_convertforms) — enak videz kot vgrajeni obrazec ----
   !important je nujen: komponenta nalaga svoj CSS in inline sloge iz zavihka Design.
   V obrazcu pusti Design nastavitve pri miru — vse obleče predloga (obe temi). */
/* koren obrazca je div.convertforms; .cf-form-wrap in .cf-content-wrap sta ZNOTRAJ njega */
.convertforms{
  background:var(--card) !important;border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;border:1px solid var(--card-border) !important;
  padding:30px !important;font-family:inherit !important;max-width:none !important;
}
.convertforms .cf-form-wrap,
.convertforms .cf-content-wrap{padding:0 !important;background:none !important;box-shadow:none !important;display:block !important}
.convertforms .cf-fields{margin:0 !important}
.convertforms .cf-control-group{margin-bottom:14px !important;padding:0 !important;background:none !important}
.convertforms .cf-label,
.convertforms label.cf-control-label{
  display:block;font-family:inherit !important;font-weight:800 !important;
  font-size:14px !important;margin:0 0 6px !important;color:var(--navy) !important;
}
.convertforms .cf-required-label,
.convertforms .cf-label .required{color:var(--orange) !important}
.convertforms .cf-input,
.convertforms .cf-select select,
.convertforms select.cf-input{
  width:100%;padding:11px 14px !important;border:1.5px solid var(--input-border) !important;
  border-radius:12px !important;font-family:inherit !important;font-size:15px !important;
  background-color:var(--blue-pale) !important;color:var(--text) !important;
  box-shadow:none !important;line-height:1.4 !important;
}
.convertforms .cf-select{background:none !important;border:none !important;padding:0 !important}
.convertforms .cf-input::placeholder,
.convertforms textarea.cf-input::placeholder{color:var(--muted) !important;opacity:1}
.convertforms .cf-input:focus,
.convertforms .cf-select select:focus{outline:2px solid var(--blue) !important;border-color:var(--blue) !important}
.convertforms .cf-input[type=checkbox],
.convertforms .cf-input[type=radio]{
  width:auto;padding:0 !important;margin-right:8px;accent-color:var(--blue);
  border-radius:4px !important;
}
.convertforms .cf-checkbox-group label,
.convertforms .cf-radio-group label{font-weight:600 !important;font-size:14.5px !important;color:var(--text) !important}
.convertforms .cf-control-input-desc{font-size:13px !important;color:var(--muted) !important;margin-top:6px !important}
.convertforms .cf-btn{
  display:inline-block;width:100%;font-family:'Baloo 2',sans-serif !important;
  font-weight:700 !important;font-size:17px !important;padding:13px 30px !important;
  border-radius:999px !important;border:none !important;cursor:pointer;
  background:var(--orange) !important;color:#fff !important;
  box-shadow:0 8px 20px rgba(247,148,29,.4) !important;transition:.2s;margin-top:8px;
}
.convertforms .cf-btn:hover{background:var(--orange-dark) !important;color:#fff !important;transform:translateY(-2px)}
html[data-theme="dark"] .convertforms .cf-btn,
html[data-theme="dark"] .convertforms .cf-btn:hover{color:#fff !important}
.convertforms .cf-response{border-radius:12px !important;font-family:inherit !important}
.cf-success .cf-response{background:#E7F8EE !important;color:#1F7A46 !important;border:1px solid #BFE8CF !important}
html[data-theme="dark"] .cf-success .cf-response{background:#123524 !important;color:#7FD8A4 !important;border-color:#1E5638 !important}
.convertforms .cf-error-message,
.convertforms .cf-response.cf-error{color:#C0392B !important}
html[data-theme="dark"] .convertforms .cf-error-message,
html[data-theme="dark"] .convertforms .cf-response.cf-error{color:#FF8A7A !important}
.convertforms .cf-spinner{border-color:var(--blue) transparent transparent transparent !important}
/* ALTCHA anti-spam widget — spremenljivke nastavimo na korenu obrazca,
   da se podedujejo do widgeta ne glede na to, v kaj ga Convert Forms zavije
   (delujejo tudi skozi shadow DOM). */
.convertforms{
  --altcha-color-base:transparent;
  --altcha-color-border:transparent;
  --altcha-border-width:0;
  --altcha-border-radius:12px;
  --altcha-color-text:var(--text);
  --altcha-color-border-focus:var(--blue);
  --altcha-color-footer-bg:transparent;
  --altcha-max-width:100%;
}
.convertforms altcha-widget{display:block;max-width:100%;color:var(--text) !important}
.convertforms .altcha{background:transparent !important;border:none !important;max-width:100% !important;color:var(--text) !important;font-family:inherit !important}
.convertforms .altcha-label,
.convertforms .altcha label{color:var(--text) !important;font-size:14.5px !important;font-weight:600 !important;font-family:inherit !important}
.convertforms .altcha-footer{background:transparent !important;color:var(--muted) !important}
.convertforms .altcha input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue)}

/* ---- stopnje znanja plavanja (nacionalna merila Naučimo se plavati) ---- */
.levels{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.level{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--card);border:1px solid var(--card-border);border-radius:16px;
  box-shadow:var(--shadow-sm);padding:16px 18px;
}
.level .medal{
  flex:0 0 40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:18px;color:#fff;
  box-shadow:var(--shadow-sm);
}
.level .medal.bron{background:linear-gradient(145deg,#D98E4A,#A9622A)}
.level .medal.srebro{background:linear-gradient(145deg,#BFC9D2,#8D9AA6)}
.level .medal.zlato{background:linear-gradient(145deg,#F2C94C,#D9A014)}
.level .medal.delfincek{background:linear-gradient(145deg,#5BC2EE,#1BA6DF)}
.level b{display:block;color:var(--navy);font-size:15.5px;margin-bottom:2px}
.level span{color:var(--muted);font-size:13.5px;line-height:1.45;display:block}
.levels-note{margin-top:18px;background:var(--blue-pale);border-left:4px solid var(--blue);border-radius:0 12px 12px 0;padding:14px 18px;color:var(--navy);font-weight:600;font-size:14.5px}
.levels-dl{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(27,166,223,.35)}
.btn-blue:hover{background:var(--blue-dark);transform:translateY(-2px);color:#fff}
html[data-theme="dark"] .btn-blue,html[data-theme="dark"] .btn-blue:hover{color:#fff}
@media(max-width:760px){.levels{grid-template-columns:1fr}}

/* ---- CTA pas ---- */
.cta-band{background:linear-gradient(120deg,var(--blue) 0%,var(--blue-dark) 100%);border-radius:24px;padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#fff;box-shadow:var(--shadow)}
.cta-band h3{color:#fff;font-size:27px;margin-bottom:6px}
.cta-band p{color:#D7EFFB}
.btn-white{background:#fff;color:var(--blue-dark)}
.btn-white:hover{background:#E4F5FD;color:var(--blue-dark);transform:translateY(-2px)}

/* ---- noga ---- */
footer.site{background:var(--footer-bg);color:#9FBDD2;padding:54px 0 28px;font-size:15px;margin-top:auto;position:relative;overflow:hidden}
footer.site .container{position:relative;z-index:2}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
footer.site h4,footer.site h3{color:#fff;font-size:17px;margin-bottom:14px;font-family:'Baloo 2',sans-serif}
footer.site a{color:#9FBDD2;text-decoration:none;display:block;margin-bottom:8px}
footer.site a:hover{color:#fff}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site .brandline{display:flex;align-items:center;gap:12px;margin-bottom:14px}
footer.site .brandline img{height:52px}
footer.site .brandline b{color:#fff;font-family:'Baloo 2',sans-serif;font-size:19px}
footer.site .fine{
  border-top:1px solid #1D3850;padding-top:20px;font-size:13.5px;color:#6E8CA3;
  display:grid;grid-template-columns:1fr auto 1fr;gap:10px 24px;align-items:center;
}
footer.site .fine p{margin:0}
footer.site .fine .fine-left{text-align:left}
footer.site .fine .fine-center{text-align:center}
footer.site .fine .fine-right{text-align:right}
footer.site .fine a{display:inline;margin:0;color:#9FBDD2}
footer.site .fine a:hover{color:#fff}
@media(max-width:768px){
  footer.site .fine{grid-template-columns:1fr}
  footer.site .fine .fine-left,footer.site .fine .fine-center,footer.site .fine .fine-right{text-align:center}
}

/* ---- CTA pas pod vsebino ----
   Ločnica sekcije se konča VIŠJE, pas pa dobi svoj odmik pod njo.
   Prostor pod pasom (do valovite ločnice noge) = prostoru nad njim (38px). */
section.block.tpl-cta{padding:38px 0 38px}
main.tpl-main:has(+ .tpl-cta) section.block:last-of-type{padding-bottom:38px}

/* ---- gumb "na vrh" ---- */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(10,28,46,.3);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s,background .2s;
}
.to-top .ic{width:20px;height:20px}
html[data-theme="dark"] .to-top{box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--blue-dark);transform:translateY(-3px)}
@media(max-width:560px){.to-top{right:14px;bottom:14px;width:42px;height:42px}}

/* ---- daljša besedila (pravne strani ipd.) ---- */
.prose{max-width:820px;margin:0 auto}
.prose p{margin-bottom:14px}
.prose h3{font-size:21px;margin:30px 0 10px}
.prose ul,.prose ol{margin:0 0 14px 22px}
.prose li{margin-bottom:6px}
.prose .placeholder{background:rgba(247,148,29,.15);border-bottom:2px dashed var(--orange);padding:0 4px;border-radius:4px}

/* ---- moduli (chrome "kos") ---- */
.kos-mod-title{margin-bottom:14px}
.kos-mod + .kos-mod{margin-top:18px}

/* ---- Joomla vsebina ---- */
.tpl-main{min-height:40vh}
/* prva sekcija na strani naj bo bližje menijski vrstici */
main.tpl-main section.block:first-of-type{padding-top:36px}
.tpl-main > .com-content-article,
.tpl-main > .item-page{padding:0}
.tpl-main .article-info,.tpl-main .icons{display:none}

/* ---- odzivnost ---- */
@media(max-width:960px){
  .cards.c3,.tech{grid-template-columns:repeat(2,1fr)}
  .cards.c4{grid-template-columns:repeat(2,1fr)}
  .stats .grid{grid-template-columns:repeat(2,1fr)}
  .hero .container{flex-direction:column-reverse;text-align:center;padding-bottom:90px}
  .hero-text h1{font-size:38px}
  .hero-text p{margin-left:auto;margin-right:auto}
  .split,.leader{flex-direction:column}
  .contact-grid{grid-template-columns:1fr}
  .leader{align-items:flex-start}
  .timeline{grid-template-columns:1fr;gap:30px}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);box-shadow:var(--shadow);border-bottom:1px solid var(--header-border)}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;align-items:stretch;padding:12px 20px 18px;gap:0}
  nav.main a{border-radius:12px;padding:12px 14px;display:block}
  nav.main a.cta{margin-left:0;margin-top:6px;text-align:center}
  .hamb{display:block}
  .cta-band{flex-direction:column;text-align:center}
  header.site{position:relative}
  .nav-wrap{position:relative}
  footer.site .cols{grid-template-columns:1fr;gap:32px}
}
@media(max-width:560px){
  .cards.c3,.cards.c2,.cards.c4,.tech,.stats .grid{grid-template-columns:1fr}
  .hero-text h1{font-size:32px}
  .sec-head h2{font-size:29px}
  .btn-ghost{margin-left:0;margin-top:10px}
}

/* ---- v1.8.3: gumb v kartici, zunanje povezave, oranzna opozorilna skatla in CTA pas ---- */
.card .btn-card{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;line-height:1;text-decoration:none;padding:12px 20px;border-radius:999px;background:var(--orange);color:#fff;box-shadow:0 6px 16px rgba(247,148,29,.32);transition:.2s}
.card .btn-card:hover{background:var(--orange-dark);color:#fff;transform:translateY(-2px)}
html[data-theme="dark"] .card .btn-card,html[data-theme="dark"] .card .btn-card:hover{color:#fff}
.card .btn-card.blue{background:var(--blue);box-shadow:0 6px 16px rgba(27,166,223,.3)}
.card .btn-card.blue:hover{background:var(--blue-dark)}
a.ext::after{content:"\2197";font-weight:700;font-size:.92em;margin-left:6px;line-height:1}
.card .btn-card.ext::after{margin-left:0}
.price-note.orange{background:rgba(247,148,29,.12);border-left-color:var(--orange)}
html[data-theme="dark"] .price-note.orange{background:rgba(247,148,29,.16)}
.price-note .pn-cta{display:block;margin-top:12px}
.cta-band.orange{background:linear-gradient(120deg,var(--orange) 0%,var(--orange-dark) 100%);box-shadow:0 14px 34px rgba(247,148,29,.28)}
.cta-band.orange p{color:#FFF0DC}
html[data-theme="dark"] .cta-band.orange .btn-white,html[data-theme="dark"] .cta-band.orange .btn-white:hover{color:var(--orange-dark)}
.cta-band.orange .btn-white{color:var(--orange-dark)}
.cta-band.orange .btn-white:hover{background:#FFF1DE;color:var(--orange-dark)}

/* ---- glava na telefonu: 1. vrstica logo + ime (v eni/dveh vrsticah),
       2. vrstica gumbi (jezik, tema, meni) na sredini ---- */
@media(max-width:640px){
  .nav-wrap{flex-wrap:wrap;justify-content:center;row-gap:8px;padding:10px 16px}
  .brand{flex-basis:100%;justify-content:center;gap:10px}
  .brand img{height:42px}
  .brand .brand-name{font-size:17.5px;white-space:nowrap}
  .brand .brand-name small{font-size:9.5px;letter-spacing:1px;white-space:nowrap}
  .nav-right{flex-basis:100%;justify-content:center;gap:10px}
}

@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}