/*
Theme Name: Osjeti Hrvatsku
Theme URI: https://www.osjetihrvatsku.hr
Description: Child tema za Divi - vizualni identitet poslovne zajednice Osjeti Hrvatsku. Crvena, crna, bijela; bracket motiv "u fokusu".
Author: Servisi RAM d.o.o.
Author URI: https://ram-servis.hr
Template: Divi
Version: 1.3.0
Text Domain: osjeti-hrvatsku
*/

/* =========================================================
   1. BRAND TOKENI
   Mijenjaj boje samo ovdje - primijenit ce se na cijeli sajt.
   ========================================================= */
:root {
  --oh-red:        #E3242B;
  --oh-red-dark:   #B8161C;
  --oh-red-soft:   #FDEDED;
  --oh-ink:        #111111;
  --oh-body:       #5B6169;
  --oh-mist:       #F5F6F7;
  --oh-line:       #E4E7EA;
  --oh-white:      #FFFFFF;

  --oh-radius:     14px;
  --oh-radius-lg:  24px;
  --oh-shadow:     0 18px 50px rgba(17,17,17,.08);
  --oh-shadow-sm:  0 8px 24px rgba(17,17,17,.06);
}

/* =========================================================
   2. TIPOGRAFIJA
   ========================================================= */
body, .et_pb_module {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  color: var(--oh-body);
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Inter', sans-serif;
  color: var(--oh-ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: 68px; font-weight: 800; }
h2 { font-size: 42px; }
h3 { font-size: 24px; }

/* Crveni dio naslova - u Divi tekstu obavij rijec u <span class="oh-red"> */
.oh-red   { color: var(--oh-red); }
.oh-ink   { color: var(--oh-ink); }

/* =========================================================
   3. EYEBROW - crvena tocka + verzal (POSLOVNA ZAJEDNICA)
   Klasa modula: oh-eyebrow
   ========================================================= */
.oh-eyebrow .et_pb_text_inner,
.oh-eyebrow p {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oh-ink);
  margin: 0;
}
.oh-eyebrow .et_pb_text_inner::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--oh-red);
  margin-right: 12px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* =========================================================
   4. POTPIS BRENDA - bracket okvir "u fokusu"
   Klasa modula: oh-bracket
   ========================================================= */
.oh-bracket { position: relative; }
.oh-bracket::before,
.oh-bracket::after {
  content: "";
  position: absolute;
  width: 46px; height: 46px;
  border: 3px solid var(--oh-ink);
  pointer-events: none;
  z-index: 2;
}
.oh-bracket::before {
  top: -14px; left: -14px;
  border-right: none; border-bottom: none;
}
.oh-bracket::after {
  bottom: -14px; right: -14px;
  border-left: none; border-top: none;
}
.oh-bracket--red::before,
.oh-bracket--red::after { border-color: var(--oh-red); }

/* =========================================================
   5. GUMBI
   ========================================================= */
.oh-btn.et_pb_button,
.oh-btn.et_pb_button:hover {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 15px 30px !important;
  border-radius: 40px !important;
  border: 2px solid var(--oh-red) !important;
  transition: all .25s ease !important;
  letter-spacing: 0 !important;
}
.oh-btn.et_pb_button {
  background: var(--oh-red) !important;
  color: #fff !important;
}
.oh-btn.et_pb_button:hover {
  background: var(--oh-red-dark) !important;
  border-color: var(--oh-red-dark) !important;
  transform: translateY(-2px);
}
.oh-btn--ghost.et_pb_button {
  background: transparent !important;
  color: var(--oh-red) !important;
}
.oh-btn--ghost.et_pb_button:hover {
  background: var(--oh-red) !important;
  color: #fff !important;
}
.oh-btn.et_pb_button::after { font-size: 1.1em !important; }

/* =========================================================
   6. KARTICE (projekti, novosti)
   ========================================================= */
.oh-card {
  background: var(--oh-white);
  border: 1px solid var(--oh-line);
  border-radius: var(--oh-radius);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
  height: 100%;
}
.oh-card:hover {
  box-shadow: var(--oh-shadow);
  transform: translateY(-4px);
}
.oh-card .et_pb_image { margin-bottom: 0 !important; }
.oh-card .et_pb_image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.oh-card .et_pb_text { padding: 22px 22px 26px; }
.oh-card h3 { font-size: 19px; margin-bottom: 8px; }
.oh-card p  { font-size: 14.5px; line-height: 1.6; }

/* Oznaka kategorije iznad naslova kartice */
.oh-tag {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oh-red);
  margin-bottom: 10px;
}

/* Datum na kartici novosti */
.oh-date {
  display: block;
  font-size: 12.5px;
  color: #9AA0A6;
  margin-bottom: 8px;
}

/* Link "Saznaj vise ->" */
.oh-more a,
a.oh-more {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--oh-red);
  text-decoration: none;
}
.oh-more a:hover, a.oh-more:hover { color: var(--oh-red-dark); }

/* =========================================================
   7. BLURB - 4 vrijednosti (Povezivanje, Znanje, Rast, Zajednica)
   ========================================================= */
.oh-value .et_pb_main_blurb_image {
  width: 84px; height: 84px;
  line-height: 84px;
  margin: 0 auto 18px !important;
  background: var(--oh-red-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oh-value .et_pb_blurb_content { text-align: center; max-width: 260px; margin: 0 auto; }
.oh-value h4 { font-size: 18px; margin-bottom: 8px; }
.oh-value p  { font-size: 14.5px; }

/* Okomite crte izmedu vrijednosti (samo desktop) */
@media (min-width: 981px) {
  .oh-values .et_pb_column:not(:last-child) {
    border-right: 1px solid var(--oh-line);
  }
}

/* =========================================================
   8. GEAR UP blok - bijela kartica na svijetloj podlozi
   ========================================================= */
.oh-panel {
  background: var(--oh-white) !important;
  border-radius: var(--oh-radius-lg) !important;
  box-shadow: var(--oh-shadow) !important;
  padding: 46px 44px !important;
}
/* Pilule sa znacajkama projekta */
.oh-pill .et_pb_blurb_content {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--oh-line);
  border-radius: 10px;
  padding: 12px 16px;
  background: #fff;
  max-width: none;
}
.oh-pill .et_pb_main_blurb_image { margin: 0 !important; width: auto; }
.oh-pill h4 { font-size: 14px; margin: 0; line-height: 1.3; }

/* =========================================================
   9. BROJKE (20+ projekata, 5000+ sudionika ...)
   ========================================================= */
.oh-stats {
  background: #fff;
  border-radius: var(--oh-radius-lg);
  box-shadow: var(--oh-shadow);
  padding: 38px 30px !important;
}
.oh-stat .et_pb_number_counter .percent-value,
.oh-stat .percent p {
  font-family: 'Poppins', sans-serif !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  color: var(--oh-ink) !important;
}
.oh-stat h3 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--oh-body) !important;
  letter-spacing: .04em;
}

/* =========================================================
   10. SEKCIJE - podloge
   ========================================================= */
.oh-sec        { padding: 96px 0 !important; }
.oh-sec--tight { padding: 64px 0 !important; }
.oh-sec--mist  { background-color: var(--oh-mist) !important; }
.oh-sec--wash  {
  background-image: linear-gradient(160deg, #FFF 0%, var(--oh-red-soft) 60%, #FFF 100%) !important;
}

/* Dot grid ukras - dodaj klasu oh-dots na red ili sekciju */
.oh-dots { position: relative; }
.oh-dots::after {
  content: "";
  position: absolute;
  right: 2%; bottom: 8%;
  width: 96px; height: 62px;
  background-image: radial-gradient(var(--oh-line) 2px, transparent 2px);
  background-size: 14px 14px;
  pointer-events: none;
}

/* =========================================================
   11. LOGO TRAKA PARTNERA
   ========================================================= */
.oh-partners img {
  max-height: 54px;
  width: auto;
  filter: grayscale(100%);
  opacity: .72;
  transition: all .25s ease;
}
.oh-partners img:hover { filter: none; opacity: 1; }

/* =========================================================
   12. IZBORNIK - Kontakt kao crvena pilula
   Dodaj CSS klasu "oh-nav-cta" na stavku izbornika
   (Izgled > Izbornici > Opcije zaslona > CSS klase)
   ========================================================= */
#top-menu li.oh-nav-cta > a {
  background: var(--oh-red);
  color: #fff !important;
  border-radius: 40px;
  padding: 12px 26px !important;
  opacity: 1 !important;
  transition: background .25s ease;
}
#top-menu li.oh-nav-cta > a:hover { background: var(--oh-red-dark); }
#top-menu li.oh-nav-cta > a::after { display: none; }

#top-menu li.current-menu-item > a { color: var(--oh-red) !important; }
#top-menu li a {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
}

/* =========================================================
   13. PODNOZJE
   ========================================================= */
.oh-footer { background: #141414 !important; padding: 70px 0 30px !important; }
.oh-footer, .oh-footer p, .oh-footer a, .oh-footer li { color: #B9BDC2 !important; font-size: 14.5px; }
.oh-footer h4 {
  color: #fff !important;
  font-size: 15px !important;
  margin-bottom: 16px;
  letter-spacing: .02em;
}
.oh-footer a:hover { color: var(--oh-red) !important; }
.oh-footer-bottom {
  background: #0D0D0D !important;
  padding: 18px 0 !important;
  border-top: 1px solid #262626;
}
.oh-footer-bottom p { font-size: 13px !important; margin: 0; }

/* =========================================================
   14. PLACEHOLDER BLOKOVI (forme koje popunjavas sama)
   ========================================================= */
.oh-placeholder .et_pb_text_inner {
  border: 2px dashed var(--oh-red);
  border-radius: var(--oh-radius);
  background: var(--oh-red-soft);
  padding: 44px 30px;
  text-align: center;
  color: var(--oh-ink);
}
.oh-placeholder .et_pb_text_inner strong { font-family: 'Poppins', sans-serif; }

/* =========================================================
   15. RESPONZIVNO
   ========================================================= */
@media (max-width: 980px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  .oh-sec { padding: 64px 0 !important; }
  .oh-panel { padding: 32px 24px !important; }
  .oh-bracket::before, .oh-bracket::after { width: 32px; height: 32px; }
}

@media (max-width: 767px) {
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  body, .et_pb_module { font-size: 15px; }
  .oh-sec { padding: 48px 0 !important; }
  .oh-dots::after { display: none; }
  .oh-stat .et_pb_number_counter .percent-value { font-size: 32px !important; }
}

/* Pristupacnost */
a:focus-visible, button:focus-visible, .et_pb_button:focus-visible {
  outline: 3px solid var(--oh-red);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .oh-card:hover { transform: none; }
}
/* =========================================================
   OSJETI HRVATSKU - popravci v1.1
   Dodaj ovo NA KRAJ postojece style.css child teme,
   ili nadopisi cijelu datoteku novom verzijom (u zipu).
   ========================================================= */

/* ---- HERO: dva gumba jedan pored drugog ---- */
.oh-hero .et_pb_button_module_wrapper {
  display: inline-block !important;
  margin-right: 14px !important;
  margin-bottom: 12px !important;
}
@media (max-width: 480px) {
  .oh-hero .et_pb_button_module_wrapper {
    display: block !important;
    margin-right: 0 !important;
  }
  .oh-hero .et_pb_button {
    width: 100%;
    text-align: center;
  }
}

/* ---- VRIJEDNOSTI: 4 u red, ikone i tekst centrirani, okomite crte ---- */
.oh-values.et_pb_row {
  align-items: stretch;
}
.oh-values .et_pb_column {
  padding: 20px 24px !important;
  text-align: center;
}
.oh-value .et_pb_main_blurb_image {
  width: 84px;
  height: 84px;
  margin: 0 auto 18px !important;
  background: var(--oh-red-soft);
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.oh-value .et_pb_main_blurb_image .et-pb-icon {
  color: var(--oh-red) !important;
  font-size: 34px !important;
  line-height: 1 !important;
}
.oh-value .et_pb_blurb_content {
  max-width: 260px;
  margin: 0 auto;
}
.oh-value h4,
.oh-value .et_pb_module_header {
  font-size: 18px !important;
  color: var(--oh-ink) !important;
  margin-bottom: 8px !important;
}
.oh-value .et_pb_blurb_description p {
  font-size: 14.5px;
  line-height: 1.6;
}

@media (min-width: 981px) {
  .oh-values .et_pb_column:not(:last-child) {
    border-right: 1px solid var(--oh-line);
  }
}
@media (max-width: 980px) {
  .oh-values .et_pb_column {
    width: 50% !important;
    margin-bottom: 0 !important;
  }
  .oh-values .et_pb_column:nth-child(odd) {
    border-right: 1px solid var(--oh-line);
  }
  .oh-values .et_pb_column:nth-child(-n+2) {
    border-bottom: 1px solid var(--oh-line);
  }
}
@media (max-width: 640px) {
  .oh-values .et_pb_column {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--oh-line) !important;
  }
  .oh-values .et_pb_column:last-child {
    border-bottom: none !important;
  }
}

/* ---- ISPRAVAK: razmak izmedu sekcija ---- */
.oh-sec {
  padding: 96px 0 !important;
}
.oh-sec--tight {
  padding: 48px 0 !important;
}
@media (max-width: 980px) {
  .oh-sec { padding: 64px 0 !important; }
}

/* ---- Slika u heru: dopustiti bracket okvir ---- */
.oh-hero .oh-bracket {
  position: relative;
  overflow: visible !important;
}
.oh-hero .oh-bracket img {
  border-radius: var(--oh-radius-lg);
  width: 100%;
  height: auto;
}

/* ---- PILL blurbovi u GEAR UP: ikona uz tekst, ne iznad ---- */
.oh-pill .et_pb_blurb_content {
  display: flex !important;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--oh-line);
  border-radius: 12px;
  padding: 14px 18px;
  background: #fff;
  max-width: none;
  text-align: left;
}
.oh-pill .et_pb_main_blurb_image {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: transparent;
  flex: none;
}
.oh-pill .et_pb_main_blurb_image .et-pb-icon {
  color: var(--oh-red) !important;
  font-size: 22px !important;
}
.oh-pill h4 {
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* ---- ISPRAVAK Divi 5 stupci: da 1_4 stvarno bude 25% ---- */
.oh-values.et_pb_row_4col > .et_pb_column,
.oh-stats.et_pb_row_4col > .et_pb_column {
  width: 25% !important;
}
@media (max-width: 980px) {
  .oh-values.et_pb_row_4col > .et_pb_column,
  .oh-stats.et_pb_row_4col > .et_pb_column {
    width: 50% !important;
  }
}
@media (max-width: 640px) {
  .oh-values.et_pb_row_4col > .et_pb_column,
  .oh-stats.et_pb_row_4col > .et_pb_column {
    width: 100% !important;
  }
}

/* =========================================================
   NASLOVNICA MOCKUP v1.2
   ========================================================= */
.oh-home-mockup{overflow:hidden;background:#fff}
.oh-home-mockup .et_pb_row{width:min(1180px,90%)!important;max-width:1180px!important}
.oh-home-hero{position:relative;padding:74px 0 46px!important;background:linear-gradient(135deg,#fff 0%,#fff 58%,#fff4f4 100%)!important;overflow:hidden}
.oh-home-hero:before{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(227,36,43,.18),rgba(227,36,43,0) 68%);pointer-events:none}
.oh-home-hero:after{content:"";position:absolute;left:-80px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(227,36,43,.10),rgba(227,36,43,0) 70%);pointer-events:none}
.oh-home-hero h1{font-size:clamp(54px,6vw,86px)!important;line-height:.98!important;letter-spacing:-.055em!important;margin-bottom:18px!important}
.oh-home-hero h2{font-size:clamp(24px,2.4vw,35px)!important;letter-spacing:-.03em!important;margin-bottom:16px!important}
.oh-home-hero .et_pb_text p{max-width:620px;font-size:17px;line-height:1.72}
.oh-hero-photo{position:relative;z-index:2}
.oh-hero-photo img{width:100%;height:610px;object-fit:cover;border-radius:34px;box-shadow:0 28px 70px rgba(17,17,17,.13)}
.oh-hero-photo:before,.oh-hero-photo:after{content:"";position:absolute;width:56px;height:56px;z-index:5;pointer-events:none}
.oh-hero-photo:before{left:-14px;top:-14px;border-left:5px solid #111;border-top:5px solid #111}
.oh-hero-photo:after{right:-14px;bottom:-14px;border-right:5px solid #111;border-bottom:5px solid #111}
.oh-red-orb{position:absolute!important;width:90px;height:90px;border-radius:50%;background:#E3242B;right:10%;top:13%;z-index:1;filter:blur(.2px);opacity:.95}
.oh-scroll-cue{text-align:center!important;font-size:12px!important;color:#777!important;letter-spacing:.03em}
.oh-values-wrap{padding:28px 0 74px!important;background:#fff!important}
.oh-projects-home{padding:94px 0!important;background:linear-gradient(180deg,#fff 0%,#fff8f8 100%)!important}
.oh-projects-home .oh-card{box-shadow:0 16px 42px rgba(17,17,17,.06);border:0}
.oh-projects-home .oh-card img{height:235px!important;object-fit:cover!important}
.oh-gear-feature{padding:28px 0 94px!important;background:#fff8f8!important}
.oh-gear-feature .oh-panel{position:relative;overflow:hidden;border:1px solid #f3d9da!important;box-shadow:0 24px 70px rgba(227,36,43,.08)!important}
.oh-gear-feature .oh-panel:after{content:"";position:absolute;right:-120px;bottom:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(227,36,43,.16),rgba(227,36,43,0) 70%)}
.oh-gear-feature .et_pb_image img{border-radius:20px;max-height:380px;object-fit:cover;width:100%}
.oh-gear-feature h2{font-size:clamp(36px,4vw,56px)!important}
.oh-membership-home{position:relative;padding:110px 0!important;background-image:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.84) 45%,rgba(255,255,255,.45) 100%),url('/wp-content/themes/osjeti-hrvatsku-child/assets/img/zajednica-real.jpg')!important;background-size:cover!important;background-position:center!important;background-attachment:fixed!important;overflow:hidden}
.oh-membership-home h2{font-size:clamp(40px,5vw,65px)!important}
.oh-membership-home .oh-mini-panel{background:#fff;border-radius:24px;padding:30px!important;box-shadow:0 20px 55px rgba(17,17,17,.11)}
.oh-mini-fact{text-align:center;padding:10px 8px}.oh-mini-fact strong{display:block;font-size:28px;color:#111}.oh-mini-fact span{font-size:12px;color:#717171}
.oh-news-home{padding:90px 0!important;background:linear-gradient(135deg,#fff 0%,#fff0f1 40%,#fff 100%)!important}
.oh-news-home .oh-card img{height:170px!important;object-fit:cover!important}
.oh-news-home .oh-card h3{font-size:17px!important}
.oh-partner-strip{padding:34px 0!important;background:#fff!important;border-top:1px solid #eee}
.oh-partner-strip .et_pb_image{text-align:center}.oh-partner-strip img{max-height:54px!important;width:auto!important;filter:grayscale(1);opacity:.72}
.oh-reveal{opacity:1;transform:none;transition:opacity .65s ease,transform .65s ease}.oh-js .oh-reveal{opacity:0;transform:translateY(26px)}.oh-js .oh-reveal.oh-visible{opacity:1;transform:none}.et-fb .oh-reveal,.et-fb-root-ancestor .oh-reveal,#et-fb-app .oh-reveal,.et_pb_pagebuilder_layout.et-fb .oh-reveal{opacity:1!important;transform:none!important}
.oh-parallax-art{position:absolute!important;pointer-events:none!important;z-index:0!important;transition:transform .12s linear;will-change:transform}
.oh-parallax-dot{width:120px;height:120px;border-radius:50%;background:rgba(227,36,43,.12);right:4%;top:10%}
@media(max-width:980px){.oh-home-hero{padding-top:48px!important}.oh-hero-photo img{height:430px}.oh-membership-home{background-attachment:scroll!important}.oh-home-mockup h1{font-size:52px!important}.oh-projects-home,.oh-gear-feature,.oh-news-home{padding:64px 0!important}}
@media(max-width:600px){.oh-home-hero h1{font-size:44px!important}.oh-hero-photo img{height:360px;border-radius:22px}.oh-membership-home{padding:72px 0!important}.oh-home-mockup .et_pb_row{width:90%!important}}