/*
Theme Name: Oplate Situm (ACF)
Theme URI: https://oplate-situm.com
Author: Site Installer
Description: Custom WordPress tema izrađena izravno iz postojećeg statičkog HTML/CSS/JS projekta "Oplate Šitum", bez Elementora i bez page buildera. Frontend je namjerno zadržan 1:1 identičan originalu. Ova verzija dodaje ACF (Advanced Custom Fields) kao sloj za uređivanje sadržaja preko WP admina — vidi inc/acf/ i inc/class-global-settings.php.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: oplate-situm
*/

/* Ovaj blok je prepisan doslovno iz izvornog <style> bloka svake .dc.html
   stranice (identičan na svih 12 stranica u originalu) — vidi FAZA1-FAZA2-
   analiza.md. Namjerno se ništa ovdje ne mijenja niti "čisti": nekoliko
   media-query pravila cilja elemente preko [style*="..."] atributnih
   selektora koji doslovno traže substring unutar inline style atributa, pa
   inline stilovi u header/footer/page-*.php predlošcima moraju ostati
   zapisani identičnim formatom (bez razmaka oko dvotočke, isti redoslijed
   svojstava) da bi ta pravila i dalje pogađala iste elemente. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: #fff; font-family: "Inter","Segoe UI",system-ui,sans-serif; color: #333; -webkit-font-smoothing: antialiased; }
/* Header is "position:sticky; top:0" (see header.php) and would otherwise
   cover the top of "#sustavi" after an anchor jump — these offsets roughly
   match the sticky header's real rendered height at each breakpoint. */
#sustavi { scroll-margin-top: 100px; }
@media (max-width: 767px) {
  #sustavi { scroll-margin-top: 76px; }
}
a { text-decoration: none; color: inherit; }
.navlink:hover { color: #fff !important; }
.navlink:hover .navund { transform: scaleX(1) !important; }
.drop { opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s cubic-bezier(.2,.8,.2,1); }
.navitem:hover .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.dropitem:hover { background: #FFFFFF !important; color: #F47D20 !important; }
.cta:hover { background: #D86A15 !important; }
.cta-ghost:hover { background: #1F3864 !important; color: #fff !important; }
.pcard:hover { box-shadow: 0 4px 16px rgba(0,0,0,.10) !important; transform: translateY(-1px); }
.pcard:hover .parr { background: #D86A15 !important; }
.loccard:hover { box-shadow: 0 4px 16px rgba(0,0,0,.10) !important; transform: translateY(-1px); }
.linkline { position: relative; }
.linkline:hover { color: #F47D20 !important; }
.foot-l:hover { color: #fff !important; }
input:focus, textarea:focus { outline: none; border-color: #F47D20 !important; box-shadow: 0 0 0 3px rgba(244,125,32,.22) !important; }
.mobile-menu-btn { display: none; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,.1); border: none; cursor: pointer; flex: none; padding: 0; }
.mobile-menu-btn:hover { background: rgba(255,255,255,.18); }
.mobile-drawer-link:hover { color: #F47D20 !important; }
/* Mobile drawer accordion for "Oplatni sustavi" / "Usluge" — see
   Oplate_Mobile_Nav_Walker in inc/class-nav-walker.php for the markup this
   drives, and initMobileNavAccordion() in assets/js/frontend.js for the
   .is-open toggle. Collapsed by default; JS adds/removes .is-open on the
   parent .mobile-drawer-item, which these rules key off of. */
.mobile-drawer-item-head {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.mobile-drawer-item-head .mobile-drawer-link {
  flex: 1;
  border-bottom: none !important;
}
.mobile-drawer-toggle {
  background: none;
  border: none;
  padding: 16px 4px;
  margin-left: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.mobile-drawer-toggle svg { transition: transform .2s; }
.mobile-drawer-item.is-open .mobile-drawer-toggle svg { transform: rotate(180deg); }
.mobile-drawer-submenu {
  display: none;
  flex-direction: column;
}
.mobile-drawer-item.is-open .mobile-drawer-submenu { display: flex; }
.mobile-drawer-sublink:hover { color: #F47D20 !important; }
@media (max-width: 900px) {
  /* The original markup has many one-off inline width:Npx / height:Npx
     values baked in by the design tool (a snapshot of that element's exact
     rendered pixel size at one desktop viewport, not intentional responsive
     sizing) — several are wider than a phone screen and were never covered
     by a matching mobile override, so they overflow their flex/grid parent
     and visually shift/uncentre everything around them. Capping width only
     (never height, which some absolutely-positioned crossfade images rely
     on) fixes that without changing anything at ≥900px or any already-
     correct value below it — a value legitimately narrower than the
     viewport is untouched, only ones that would overflow get pulled in. */
  [style*="width:"] { max-width: 100% !important; }
  .nav-desktop { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; }
  .phone-num { display: none !important; }
  .hero-grid { grid-template-columns: 1fr !important; padding: 52px 20px 56px !important; }
  h1[style*="font-size:54px"] { font-size: 32px !important; letter-spacing: -0.01em !important; }
  p[style*="font-size:19px"] { font-size: 16px !important; }
  .stats-grid { grid-template-columns: repeat(3,1fr) !important; }
  [style*="border-right:1px solid rgba(255,255,255,.08)"] { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
  section[style*="padding:80px 0"] { padding: 48px 0 !important; }
  section[style*="padding:72px 0"] { padding: 44px 0 !important; }
  section[style*="padding:56px 0"] { padding: 40px 0 !important; }
  h2[style*="font-size:34px"] { font-size: 25px !important; }
  .sys-grid, .svc-grid { grid-template-columns: repeat(2,1fr) !important; }
  #svc-track > a, #ref-track > article { flex: 0 0 calc(50% - 12px) !important; }
  .sys-grid2 { grid-template-columns: 1fr !important; }
  .why-grid { grid-template-columns: repeat(2,1fr) !important; }
  .story-grid, .contact-grid { grid-template-columns: 1fr !important; }
  img[style*="height:440px"] { height: 280px !important; }
  p[style*="font-size:26px"] { font-size: 20px !important; }
  .proj-grid { grid-template-columns: 1fr !important; }
  .loc-grid { grid-template-columns: 1fr !important; }
  .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  form[style*="display:flex; gap:10px"] { flex-direction: column !important; }
  div[style*="max-width:1200px; margin:0 auto; padding:0 24px"] { padding: 0 18px !important; }
  header > div { padding: 12px 16px !important; gap: 14px !important; }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr !important; }
  .why-grid { grid-template-columns: 1fr !important; }
  #svc-track > a { flex: 0 0 100% !important; }
  #ref-track > article { flex: 0 0 100% !important; }
  .foot-grid { grid-template-columns: 1fr !important; }
  h1[style*="font-size:54px"] { font-size: 27px !important; }
  h2[style*="font-size:34px"] { font-size: 22px !important; }
  div[style*="grid-template-columns:auto 1fr"] { column-gap: 10px !important; }
}

/* ===== GLOBAL MOBILE SAFETY =====
   Belt-and-braces against horizontal overflow — should be a no-op given the
   source cleanup already done (every problem element had its fixed width
   removed at the PHP level), but costs nothing to also guarantee it at the
   document level. overflow-x:hidden here is a safety net, not a fix for a
   specific bug — if something is still visibly cut off, the real fix is
   removing that element's fixed width in its template, not widening this. */
@media (max-width: 767px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

/* ===== HEADER — MOBILE (≤767px) =====
   Builds on the existing ≤900px header rules above (nav hidden, hamburger
   shown, phone number hidden, "header > div" padding/gap already reduced)
   — this only adds the extra refinements needed specifically below 767px:
   a capped logo size and a smaller/tighter CTA button so "Zatraži ponudu" +
   the hamburger both stay fully visible without wrapping or overflowing on
   narrow phones. Real markup verified in header.php: header's only direct
   child is the flex row div, its <a> wraps the <img> logo, and the CTA
   link already carries class="cta". */
@media (max-width: 767px) {
  header > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
  }
  header img {
    width: auto;
    max-width: 120px;
    height: auto;
  }
  header a.cta {
    width: auto;
    min-width: 0;
    padding: 7px 6px;
    font-size: 10px;
    line-height: 1.05;
    flex-shrink: 1;
  }
  header .mobile-menu-btn {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin-left: 0;
    z-index: 9999;
  }
}

/* ===== NASLOVNA — HERO / STATS / SUSTAVI (≤767px, ≤430px) =====
   #top, .stats-grid and #sustavi only exist on front-page.php, so these are
   safe as global rules — nothing else in the theme uses these ids/classes.
   Fixed hero-grid/stat-cell/heading widths were already removed at the PHP
   level (front-page.php); this is the presentational layer on top. */
@media (max-width: 767px) {
  #top { overflow: hidden; }
  #top .hero-grid {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 530px;
    padding: 70px 20px !important;
  }
  #top .hero-grid > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #top h1 {
    width: 100%;
    max-width: 100%;
    height: auto;
    font-size: 38px !important;
    line-height: 1.05;
    letter-spacing: -0.025em;
  }
  #top .cta {
    max-width: 100%;
    padding: 15px 22px;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
  }
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .stats-grid > div {
    width: 100%;
    height: auto;
    min-height: 105px;
  }
  #sustavi > div:first-child {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
  }
  #sustavi h2 {
    width: 100%;
    max-width: 100%;
    height: auto;
    font-size: 32px !important;
    line-height: 1.08;
  }
  .sys-grid2 { grid-template-columns: minmax(0,1fr) !important; }
  .sys-grid2 > .pcard {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .sys-grid2 > .pcard > div:first-child { height: 245px !important; }
}
@media (max-width: 430px) {
  #top .hero-grid {
    min-height: 500px;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  #top h1 { font-size: 34px !important; }
  #sustavi h2 { font-size: 29px !important; }
}

/* ===== PRODUCT SPEC/DESC GRIDS (≤767px, ≤430px) =====
   ".spec-desc-grid" exists only on the 4 product pages (DokMax/DokMaxAlu/
   DokMaxEco/ŠitumDeck), so a single shared rule here covers all four —
   already collapses to 1 column at ≤900px (see each page's own <style>
   block); this adds the missing min-width:0 safety net plus the ≤767/≤430
   presentational sizing. */
@media (max-width: 767px) {
  .spec-desc-grid {
    width: 100%;
    max-width: 100%;
  }
  .spec-desc-grid > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .spec-desc-grid .section-h2 {
    width: 100%;
    max-width: 100%;
    font-size: 29px !important;
    line-height: 1.15;
    white-space: normal;
  }
  .spec-desc-grid p {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .spec-desc-grid img {
    display: block;
    max-width: 100%;
  }
}
@media (max-width: 430px) {
  .spec-desc-grid .section-h2 { font-size: 27px !important; }
}

/* ===== BENEFIT / RELATED / FEATURE GRIDS — min-width safety net =====
   Each of these already collapses to 1 column at ≤900px via its own
   per-page <style> block (".benefit-grid, .related-grid { ... }" etc.) —
   consolidated here ONCE instead of repeating the same child-safety rule
   in every one of the 7 pages that use these classes (DokMax family +
   Prodaja/Najam/Reparacija), per-page blocks now only keep their
   grid-template-columns collapse. */
@media (max-width: 900px) {
  .benefit-grid > *, .related-grid > *, .feat-grid > *, .steps-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ===== CONTACT SECTION — MOBILE (≤767px, ≤430px) =====
   ".contact-grid" is used identically on the homepage, Reference, O nama
   and Kontakt (all 4 built from the same original pattern) — NOT scoped to
   "#kontakt" because Kontakt.dc.html's own section id is "kontakt-forma"
   in the original source (a pre-existing quirk, kept as-is elsewhere in
   this theme), so a bare ".contact-grid" is what actually reaches all 4. */
@media (max-width: 767px) {
  .contact-grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 35px !important;
  }
  .contact-grid > * {
    min-width: 0;
    max-width: 100%;
  }
}
@media (max-width: 430px) {
  .contact-grid { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ===== CONTACT / NEWSLETTER FORMS — MOBILE (≤767px) =====
   ".form-row" is a new semantic class added to every 2-column field row
   (Ime/Tvrtka, Telefon/E-mail, etc.) across all 12 contact forms, replacing
   what would otherwise need a fragile div[style*="grid-template-columns"]
   selector. Every input/select/textarea in these forms already carries its
   own inline width:100%, so this only adds what wasn't already there: the
   form/column shrinking safely inside its ".contact-grid" cell, the 2→1
   column row collapse, and full-width submit buttons. */
@media (max-width: 767px) {
  .contact-grid > form,
  .contact-grid > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .form-row { grid-template-columns: minmax(0,1fr) !important; }
  .form-row > * { min-width: 0; }
  .contact-grid form button[type="submit"],
  .newsletter-form button[type="submit"] {
    width: 100%;
  }
  .newsletter-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .newsletter-form input[type="email"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* ===== reCAPTCHA =====
   Google renders a real widget (the visible checkbox iframe, sized by
   Google's own script) plus a hidden companion
   <textarea class="g-recaptcha-response"> that must never be styled like a
   real form field — this theme has no bare "textarea { }" rule that could
   catch it (every textarea here is styled individually via its own inline
   style), so the bug the client hit elsewhere can't happen here, but the
   explicit hide rule is kept anyway as a permanent guard against a future
   edit accidentally adding one. Centring applies everywhere the widget is
   used (every contact form + the newsletter form) — not scoped to
   "#kontakt" for the same reason as .contact-grid above. */
textarea.g-recaptcha-response {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.g-recaptcha {
  width: 304px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ===== REFERENCE — mobile card presentation (≤767px) =====
   Layout correctness (.ref-grid collapsing to 1 column, min-width:0 on
   article/inner div) is already handled at ≤900px in page-reference.php's
   own <style> block — this only adds presentational polish for the ≤767px
   card look (fixed-height cropped photo on top, tighter content padding),
   layered on top rather than replacing that layout fix. */
@media (max-width: 767px) {
  .ref-grid { gap: 18px; }
  .ref-grid > article > div:first-child {
    height: 190px;
    overflow: hidden;
  }
  .ref-grid > article > div:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ref-grid > article > div:last-child {
    padding: 18px 16px;
    gap: 8px;
  }
}

/* ===== COMPARE TABLE — MOBILE CAROUSEL =====
   The 4 product pages (DokMax/DokMaxAlu/DokMaxEco/ŠitumDeck) each have a
   ".compare-wrap" table comparing all 4 systems — fine on desktop, but too
   wide to usefully shrink below 768px. Below that, its sibling
   ".compare-mobile" block (see inc/compare-mobile.php) takes over instead:
   one product per panel, in a real horizontal scroll-snap track — swiping
   is native browser scroll, not JS-driven. The only visible navigation
   affordance is the browser's own horizontal scrollbar/scroll indicator on
   ".compare-mobile-panels" (an actual overflow-x:auto container) — no
   prev/next buttons, no dots, nothing faked with a pseudo-element. This
   767/768 split is deliberately its own breakpoint, independent of the
   site's existing 900px/560px system, since the client asked for exactly
   767px here. ".compare-wrap" and ".compare-mobile" don't exist anywhere
   else in the theme, so this can't affect any other section. */
.compare-mobile { display: none; }
@media (max-width: 767px) {
  .compare-wrap { display: none !important; }
  .compare-mobile {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .compare-mobile-panels {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
  }
  .compare-mobile-panel {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    scroll-snap-align: start;
    border: 1px solid #EEE;
    border-radius: 8px;
    padding: 20px 16px 16px;
  }
  .compare-mobile-panel[data-highlighted="1"] {
    background: #FCF3EA;
    border-color: #F8DFC4;
  }
  .compare-mobile-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 27px;
    color: #1F3864;
    margin-bottom: 14px;
  }
  .compare-mobile-row {
    display: grid;
    grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr);
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #EEE;
    font-size: 14px;
  }
  .compare-mobile-row:last-child { border-bottom: none; }
  .compare-mobile-label {
    color: #777;
    font-weight: 600;
    min-width: 0;
    word-wrap: break-word;
  }
  .compare-mobile-value {
    color: #1F3864;
    font-weight: 600;
    min-width: 0;
    word-wrap: break-word;
    text-align: right;
  }
}
@media (min-width: 768px) {
  .compare-mobile { display: none !important; }
}

/* No other WordPress-side CSS is added here on purpose (see functions.php:
   block-library / global-styles / classic-theme-styles are all dequeued so
   there is nothing from WordPress core to conflict with or "neutralize"). */