/*
Theme Name:   Raw Digital Child
Theme URI:    https://rawdigital.hr
Description:  Child tema za Hello Elementor. Drži dizajn tokene i sve komponente
              za rawdigital.hr/razvoj. Vrijednosti su prepisane iz live design.css v4.1.
Author:       Raw Digital
Template:     hello-elementor
Version:      1.1.4
Text Domain:  rawdigital-child
*/

/* ============================================================
   1. TOKENI
   Mijenjaj boje i mjere OVDJE, nikad po widgetima.
   ============================================================ */

:root {
  /* --- podloge --- */
  --rd-bg:      #0a0907;                /* baza stranice, toplo skoro-crna */
  --rd-bg2:     #111009;                /* kartice, footer, marquee traka */
  --rd-sf:      #1a1713;                /* hover kartica, prazna mjesta */

  /* --- linije --- */
  --rd-ln:      rgba(255,255,255,.07);  /* obrubi i procijepi u gridovima */

  /* --- tekst --- */
  --rd-ink:     #f2ede4;                /* naslovi i glavni tekst */
  --rd-muted:   rgba(242,237,228,.6);   /* sekundarni tekst */
  --rd-faint:   rgba(242,237,228,.3);   /* sitno u footeru */

  /* --- akcent --- */
  --rd-red:     #ff2800;

  /* --- fontovi --- */
  --rd-ff-head: 'Bebas Neue', Impact, sans-serif;
  --rd-ff-sub:  'Syne', system-ui, sans-serif;
  --rd-ff-body: 'DM Sans', system-ui, sans-serif;

  /* --- ostalo --- */
  --rd-ease:    cubic-bezier(.16,1,.3,1);
  --rd-radius:  2px;
}


/* ============================================================
   2. TEMELJ
   ============================================================ */

/* Zrno preko cijele stranice — live: body::before, 3.5% */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Vidljiv fokus — pristupačnost */
:focus-visible {
  outline: 2px solid var(--rd-red);
  outline-offset: 3px;
  border-radius: var(--rd-radius);
}

/* Sekcijski razmaci */
.rd-section        { padding-top: 112px; padding-bottom: 112px; }
.rd-section--sm    { padding-top: 64px;  padding-bottom: 64px;  }
.rd-section--flush { padding-top: 0; }


/* ============================================================
   3. TIPOGRAFIJA — pomoćne klase
   ============================================================ */

/* Sticky header ne smije rezervirati prostor.
   Elementor uz sticky ubaci prazan spacer visine headera, pa hero
   krene ispod njega. Na /razvoj je nav position:fixed bez spacera,
   pa fotografija ide skroz do vrha, a nav pluta preko nje. */
.elementor-sticky__spacer { display: none !important; }

/* Eyebrow: crvena crtica + sitni razmaknuti tekst */
.rd-eyebrow {
  font-family: var(--rd-ff-sub);
  font-size: 10.4px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--rd-red);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rd-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--rd-red);
  flex-shrink: 0;
}
/* varijanta za hero — duža crtica, veći razmak */
.rd-eyebrow--hero { gap: 16px; }
.rd-eyebrow--hero::before { width: 32px; }

/* Text Editor umeće <p> s donjom marginom. Zbog nje je flex kutija
   viša od samog teksta, pa crvena crtica ispadne ispod sredine reda. */
.rd-eyebrow p { margin: 0 !important; }

/* Sitni labeli bez crtice */
.rd-label {
  font-family: var(--rd-ff-sub);
  font-size: 11.2px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rd-muted);
}


/* ============================================================
   4. GUMBI
   Crveni wipe koji ulazi slijeva na hover.
   ============================================================ */

.rd-btn .elementor-button {
  position: relative;
  overflow: hidden;
  z-index: 0;
  font-family: var(--rd-ff-sub);
  /* Elementor gumbima zadaje line-height 1; /razvoj koristi 1.6,
     što gumb podiže s 45px na 52px. */
  line-height: 1.6;
  transition: background .25s, color .25s, border-color .25s;
}
.rd-btn .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rd-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--rd-ease);
  z-index: -1;
}
.rd-btn .elementor-button:hover::before { transform: scaleX(1); }

/* primarni — crveni gumb, tamni wipe preko njega */
.rd-btn--primary .elementor-button::before { background: rgba(0,0,0,.2); }

/* obris — proziran, tanka linija */
.rd-btn--outline .elementor-button {
  background: transparent !important;
  border: 1px solid var(--rd-ln) !important;
  color: var(--rd-ink) !important;
}
.rd-btn--outline .elementor-button:hover {
  border-color: var(--rd-red) !important;
  color: var(--rd-ink) !important;
}

/* header CTA — na /razvoj je prigušen jer nasljeđuje boju nav linkova.
   Hover ga vraća na punu krem (nasljeđuje pravilo iznad). */
.rd-btn--nav .elementor-button { color: var(--rd-muted) !important; }

/* obris na crvenoj podlozi — završni CTA */
.rd-btn--on-red .elementor-button {
  background: transparent !important;
  border: 1px solid var(--rd-ink) !important;
  color: var(--rd-ink) !important;
}
.rd-btn--on-red .elementor-button::before { background: rgba(10,9,7,.9); }


/* ============================================================
   5. HERO
   ============================================================ */

.rd-hero { position: relative; overflow: hidden; }

.rd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--rd-bg);
}
.rd-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .45;
  display: block;
}
.rd-hero__content { position: relative; z-index: 2; }


/* ============================================================
   6. MARQUEE — traka koja klizi
   ============================================================ */

.rd-marquee {
  overflow: hidden;
  background: var(--rd-bg2);
  border-top: 1px solid var(--rd-ln);
  border-bottom: 1px solid var(--rd-ln);
  padding: 19px 0;
}
.rd-marquee__track {
  display: flex;
  gap: 64px;
  width: max-content;
  white-space: nowrap;
  animation: rd-marquee 40s linear infinite;
}
.rd-marquee__track span {
  font-family: var(--rd-ff-head);
  font-size: 17.6px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--rd-muted);
}
.rd-marquee__track .dot {
  color: var(--rd-red);
  font-size: 9.6px;
  align-self: center;
}
@keyframes rd-marquee {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}


/* ============================================================
   7. HAIRLINE GRID
   Trik: roditelj ima boju linije kao pozadinu, gap 2px,
   djeca imaju svoju tamnu. Procijep IZGLEDA kao linija.
   Koristi se za: statistiku, usluge, proces.
   ============================================================ */

.rd-hairline-grid { background: var(--rd-ln); gap: 2px !important; }


/* ============================================================
   8. STATISTIKA
   ============================================================ */

.rd-stat__num {
  font-family: var(--rd-ff-head);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--rd-red);
  font-variant-numeric: tabular-nums;
}
.rd-stat__label {
  font-family: var(--rd-ff-sub);
  font-size: 10.4px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rd-muted);
}


/* ============================================================
   9. KARTICE USLUGA
   ============================================================ */

.rd-service {
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
/* crvena linija raste slijeva po dnu kartice */
.rd-service::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--rd-red);
  transition: width .4s var(--rd-ease);
}
.rd-service:hover { background: var(--rd-sf) !important; }
.rd-service:hover::after { width: 100%; }

.rd-service__num {
  font-family: var(--rd-ff-head);
  font-size: 64px;
  line-height: 1;
  color: var(--rd-ln);
  user-select: none;
  transition: color .3s;
}
.rd-service:hover .rd-service__num { color: rgba(255,40,0,.2); }

.rd-service__price {
  font-family: var(--rd-ff-sub);
  font-size: 11.2px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rd-red);
  margin-top: auto;
}


/* ============================================================
   10. PORTFOLIO — asimetričan 12-kolonski grid
   ============================================================ */

.rd-work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  background: var(--rd-ln);
}
.rd-work-item {
  position: relative;
  overflow: hidden;
  background: var(--rd-sf);
  display: block;
}
.rd-w-7 { grid-column: span 7; grid-row: span 2; min-height: 500px; }
.rd-w-5 { grid-column: span 5; }
.rd-w-4 { grid-column: span 4; }

.rd-work-item img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  filter: grayscale(20%);
  transition: transform .8s var(--rd-ease), filter .4s;
  display: block;
}
.rd-work-item:hover img { transform: scale(1.04); filter: grayscale(0); }

.rd-work-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,9,7,.8) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .4s;
  display: flex;
  align-items: flex-end;
  padding: 32px;
}
.rd-work-item:hover .rd-work-item__overlay { opacity: 1; }

.rd-work-item__label {
  font-family: var(--rd-ff-sub);
  font-size: 10.4px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rd-ink);
}

/* prazno mjesto dok nema fotografije */
.rd-work-item--empty {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rd-ff-sub);
  font-size: 10.4px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rd-muted);
}


/* ============================================================
   11. PROCES
   ============================================================ */

.rd-process__num {
  font-family: var(--rd-ff-head);
  font-size: 80px;
  line-height: 1;
  color: rgba(255,40,0,.12);
  user-select: none;
}


/* ============================================================
   12. O MENI — slika s pomaknutim okvirom
   ============================================================ */

.rd-founder-img { position: relative; }
.rd-founder-img img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  filter: grayscale(15%);
  display: block;
}
/* tanka linija OKO slike, s razmakom */
.rd-founder-img::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px solid var(--rd-ln);
  pointer-events: none;
}


/* ============================================================
   13. NAVIGACIJA
   ============================================================ */

.rd-nav .elementor-item {
  font-family: var(--rd-ff-sub);
  font-size: 11.2px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rd-muted);
  transition: color .2s;
  padding: 0 !important;
}
.rd-nav .elementor-item::after {
  background: var(--rd-red) !important;
  height: 1px !important;
  /* razmak podcrte od teksta — /razvoj ima -3px.
     Veći negativni broj = podcrta niže. */
  bottom: -3px !important;
}
.rd-nav .elementor-item:hover,
.rd-nav .elementor-item.elementor-item-active { color: var(--rd-ink); }

/* dropdown "Usluge" — crvena linija na vrhu */
.rd-nav .elementor-nav-menu--dropdown {
  background: rgba(10,9,7,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rd-ln);
  border-top: 2px solid var(--rd-red);
}

/* Visina headera.
   Elementorovi widgeti su inline-block unutar wrappera koji ima
   line-height, pa ispod svakog ostane ~8px baseline razmaka.
   Bez ovoga je header 108px umjesto 100px kao na /razvoj. */
.rd-header .elementor-widget { line-height: 0; }
.rd-header .elementor-button { line-height: 1.6; }
.rd-header .elementor-nav-menu .elementor-item { line-height: 1.6; }

/* ---- Header: zaštita rasporeda na svim širinama ----
   Ova četiri pravila drže header stabilnim bez obzira na to što je
   upisano po breakpointima u Elementoru. */

/* 1. Fixed element širine 100% s marginom = horizontalni scroll.
      Margina na headeru nikad nema smisla. */
.rd-header { margin: 0 !important; flex-wrap: nowrap !important; }

/* 2. Grupa nav+gumb mora se skupiti na svoj sadržaj, inače na
      mobitelu proguta prostor i logo se lomi u dva reda. */
.rd-header > .e-con {
  width: fit-content !important;
  flex: 0 0 auto !important;
  align-items: center !important;
}

/* 3. Nav widget bez vertikalnog paddinga — s njim je header na
      mobitelu 119px umjesto 87px. Kad se padding makne, stavke
      izbornika same skoče na vrh kutije, pa ih flex vraća u sredinu. */
.rd-header .elementor-widget-nav-menu {
  padding-block: 0 !important;
  display: flex;
  align-items: center;
}

/* 4. Logo ostaje u jednom redu. */
.rd-header .elementor-heading-title { white-space: nowrap; }

/* Sticky header — pozadina se pojavi nakon 60px scrolla */
.rd-header { transition: background .4s, padding .4s; }
.rd-header.elementor-sticky--effects {
  background: rgba(10,9,7,.93) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rd-ln);
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}


/* ============================================================
   14. FOOTER
   ============================================================ */

.rd-footer-links a {
  font-size: 14.4px;
  color: var(--rd-muted);
  transition: color .2s;
}
.rd-footer-links a:hover { color: var(--rd-red); }

.rd-footer-bottom {
  font-family: var(--rd-ff-sub);
  font-size: 9.6px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--rd-faint);
}
.rd-footer-bottom a { color: var(--rd-faint); }
.rd-footer-bottom a:hover { color: var(--rd-red); }


/* ============================================================
   15. SCROLL REVEAL
   Elementi ulaze kad dođu u vidno polje. JS dodaje .in
   ============================================================ */

.rv, .rv-l, .rv-r {
  opacity: 0;
  transition: opacity .9s var(--rd-ease), transform .9s var(--rd-ease);
}
.rv   { transform: translateY(40px);  }
.rv-l { transform: translateX(-40px); }
.rv-r { transform: translateX(40px);  }
.rv.in, .rv-l.in, .rv-r.in { opacity: 1; transform: none; }


/* ============================================================
   16. MOBILNI IZBORNIK — full screen
   ============================================================ */

@media (max-width: 900px) {

  /* --- Panel preko cijelog ekrana ---
     Ciljamo samo VANJSKI container (`>`), inače pravilo hvata i
     podmeni "Usluge". Otvaranje i zatvaranje vodimo sami preko
     visine, ne prepuštamo Elementoru — njegov izračun ovisi o tome
     je li se frontend JS stigao inicijalizirati. */
  .rd-nav > .elementor-nav-menu--dropdown {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    background: var(--rd-bg) !important;
    z-index: 1000;
    clip-path: none !important;

    display: flex !important;
    flex-direction: column;
    /* flex-start, ne center: centrirani sadržaj pri otvaranju podmenija
       raste u OBA smjera pa stavke bježe prema gore. Ovako je sve
       usidreno od vrha i podmeni se otvara samo prema dolje. */
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    padding: 130px 24px 40px !important;

    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
  }

  /* Elementor stavlja `elementor-active` na sam hamburger, a panel
     mu je sljedeći brat — otud `~`. */
  .elementor-menu-toggle.elementor-active ~ .elementor-nav-menu--dropdown {
    height: 100dvh !important;
    overflow-y: auto !important;
    pointer-events: auto;
  }

  .rd-nav .elementor-menu-toggle { position: relative; z-index: 1001; }

  /* --- Stavke izbornika --- */
  .rd-nav > .elementor-nav-menu--dropdown > ul.elementor-nav-menu {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  /* Stavka se skuplja na širinu teksta pa se chevron može objesiti
     izvan nje, bez da pomakne tekst iz sredine.
     Smjer MORA biti column — <li> sadrži i link i podmeni, pa bi ih
     red posložio jedno pored drugog. */
  .rd-nav > .elementor-nav-menu--dropdown ul.elementor-nav-menu li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
  }

  /* Podmeni "Usluge".
     VAŽNO: Elementor otvara i zatvara podmeni inline stilom
     (style="display:none/block"). Zato ovdje NEMA display pravila —
     display s !important iz stylesheeta pobjeđuje inline stil i
     podmeni ostane trajno otvoren (bug iz v1.1.2).
     Slažemo samo raspored: li su blokovi pa se sami redaju okomito,
     centriranje ide preko text-align + inline-flex na linkovima. */
  .rd-nav > .elementor-nav-menu--dropdown ul.sub-menu {
    width: 100% !important;
    max-width: none !important;
    position: static !important;
    inset: auto !important;
    padding: 10px 0 4px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    clip-path: none !important;
    text-align: center;
  }
  .rd-nav > .elementor-nav-menu--dropdown ul.sub-menu li {
    width: 100% !important;
    text-align: center;
    margin: 0 0 6px !important;
  }
  .rd-nav > .elementor-nav-menu--dropdown a.elementor-sub-item {
    display: inline-flex !important;
    justify-content: center !important;
    width: auto !important;
  }
  .rd-nav > .elementor-nav-menu--dropdown a.elementor-item {
    font-family: var(--rd-ff-head) !important;
    font-size: clamp(2.6rem, 9vw, 3.6rem) !important;
    line-height: 1.15 !important;
    letter-spacing: .05em !important;
    color: var(--rd-ink) !important;
    background: transparent !important;
    width: auto !important;
    padding: 2px 0 !important;
    border: none !important;
    position: relative;
    justify-content: center !important;
  }

  /* Chevron kod "Usluge" — bez ovoga span od 45px sjedi unutar linka
     i gura tekst 23px ulijevo od sredine panela. */
  .rd-nav > .elementor-nav-menu--dropdown a.elementor-item .sub-arrow {
    position: absolute !important;
    right: -1.05em;
    top: 50%;
    transform: translateY(-50%);
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .rd-nav > .elementor-nav-menu--dropdown a.elementor-item .sub-arrow svg {
    width: .42em;
    height: .42em;
  }
  .rd-nav > .elementor-nav-menu--dropdown a.elementor-item:hover,
  .rd-nav > .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
    color: var(--rd-red) !important;
  }
  .rd-nav > .elementor-nav-menu--dropdown a.elementor-sub-item {
    font-family: var(--rd-ff-head) !important;
    font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
    letter-spacing: .05em !important;
    color: rgba(242,237,228,.5) !important;
    background: transparent !important;
    justify-content: center !important;
  }
  .rd-nav > .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
    color: var(--rd-red) !important;
  }

  /* --- Kontakt i društvene mreže (ubacuje ih js/rd.js) --- */
  .rd-mob-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 320px;
    padding-top: 28px;
    border-top: 1px solid var(--rd-ln);
    /* uvijek na dnu panela, bez obzira je li podmeni otvoren */
    margin-top: auto;
  }
  .rd-mob-foot__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .rd-mob-foot__info a,
  .rd-mob-foot__info span {
    font-family: var(--rd-ff-sub);
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--rd-muted);
    transition: color .2s;
  }
  .rd-mob-foot__info a:hover { color: var(--rd-red); }

  .rd-mob-social { display: flex; gap: 20px; }
  .rd-mob-social a {
    display: grid;
    place-items: center;
    padding: 4px;
    color: var(--rd-muted);
    transition: color .2s;
  }
  .rd-mob-social a:hover { color: var(--rd-red); }
  .rd-mob-social svg { width: 22px; height: 22px; }
}


/* ============================================================
   17. RESPONSIVE
   ============================================================ */

/* Tablet — ispod 900px */
@media (max-width: 900px) {
  .rd-w-7, .rd-w-5, .rd-w-4 {
    grid-column: span 12;
    grid-row: auto;
    min-height: 260px;
  }
}

/* Mobitel — ispod 600px */
@media (max-width: 600px) {
  .rd-section     { padding-top: 64px; padding-bottom: 64px; }
  .rd-section--sm { padding-top: 40px; padding-bottom: 40px; }
  .rd-marquee__track span { font-size: 15px; }
}


/* ============================================================
   18. REDUCED MOTION
   Gasi animacije korisnicima koji su ih isključili u sustavu.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .rd-marquee__track { animation: none; }
  .rv, .rv-l, .rv-r {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}