/*
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: 2.9.2
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-header:hover { background: #222 !important; }
.cta-ghost:hover { background: #000 !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); }
/* ===== LANGUAGE SWITCHER (desktop) =====
   header.php no longer calls TranslatePress's [language-switcher] shortcode
   at all — that shortcode's markup changes with TranslatePress's own
   switcher implementation/settings (legacy vs "v2"), which made it an
   unstable target for a flag-only override. Instead,
   oplate_render_flag_language_switcher() (inc/language-switcher.php) shows
   only the CURRENT language's flag at rest; hovering (desktop) or
   tapping it (mobile — see initLanguageSwitcher() in assets/js/frontend.js)
   reveals the OTHER published language's flag directly below it, completely
   bare (no box/background/border/shadow) — built directly from
   TranslatePress's own real component API
   (get_component('url_converter')->get_url_for_language(),
   get_component('language_switcher')->get_flag_html()). TranslatePress
   still generates the URL and both flag images; this file only lays out
   that markup. Hidden below 900px, same breakpoint as
   ".nav-desktop"/".phone-num" in the max-width:900px block below — the
   mobile drawer's own ".oplate-lang-switcher--mobile" (further down) takes
   over there. */
.oplate-lang-switcher--desktop { display: flex; align-items: center; margin-left: 16px; flex: none; }
/* ===== LANGUAGE SWITCHER (shared: trigger flag + revealed flag) =====
   Used identically by both the desktop bar and the mobile drawer — only the
   two wrappers above/below position it within their own header row.
   TranslatePress's own trp-language-switcher-v2.css sets width on
   .trp-flag-image with !important (it's still enqueued — the flag <img>
   itself is TranslatePress's, only the surrounding markup is ours), so
   matching it needs the same !important. */
.oplate-language-switcher { position: relative; display: inline-flex; align-items: center; }
.oplate-language-switcher__trigger {
  display: flex; align-items: center; justify-content: center;
  width: auto; height: auto; padding: 0; margin: 0; border: 0;
  background: none; box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.oplate-language-switcher__trigger img.trp-flag-image {
  width: 27px !important; height: auto !important; margin: 0 !important; display: block;
}
/* The revealed flag starts [hidden] (native attribute, toggled by
   initLanguageSwitcher() — same convention as
   .situm-mobile-nav__submenu[hidden] below); the hover-reveal rule further
   down only ever overrides that default display:none while the pointer is
   actually hovering, so a click/tap-opened flag still needs the attribute
   removed (by JS) to stay visible once the mouse leaves. No background,
   border, shadow, or text anywhere — it's just another bare flag,
   positioned directly under the trigger. */
.oplate-language-switcher__other {
  position: absolute; top: calc(100% + 5px); left: 0; right: auto; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  width: auto; height: auto; padding: 0; margin: 0; border: 0;
  background: none; box-shadow: none; text-decoration: none;
}
.oplate-language-switcher__other img.trp-flag-image {
  width: 27px !important; height: auto !important; margin: 0 !important; display: block;
}
/* Desktop-only hover-to-reveal, scoped to real hover-capable pointers so a
   touch tap can never get "stuck" showing it (touch devices don't have a
   real, dismissable :hover state). This only overrides the [hidden]
   attribute's own default display:none while actually hovering — it never
   touches the attribute itself, so it can't fight with the click/tap
   toggle in assets/js/frontend.js. */
@media (hover: hover) and (pointer: fine) {
  .oplate-language-switcher:hover .oplate-language-switcher__other[hidden] { display: flex; }
}
/* ===== SITUM MOBILE NAVIGATION =====
   Independent mobile menu, written directly in header.php — NOT
   wp_nav_menu()/Walker-driven. Open/close comes from
   initSitumMobileNavigation() in assets/js/frontend.js, which toggles the
   native "hidden" attribute — not a class-driven display switch — so
   .situm-mobile-nav__submenu[hidden] is the authority on hidden state
   (belt-and-braces !important, since [hidden] alone can lose to a
   same-specificity class rule) and :not([hidden]) is the only place that
   sets display on the visible state, avoiding any fight between the two.
   Each button+submenu pair sits inside its own .situm-mobile-nav__group —
   the JS finds a toggle's submenu via
   toggle.closest('.situm-mobile-nav__group').querySelector(...), not
   sibling order. The submenu is a plain block in normal document flow (no
   position:absolute): opening one pushes everything below it down. */
.situm-mobile-nav__group {
  display: flex;
  flex-direction: column;
}
.situm-mobile-nav__link,
.situm-mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 14px 4px;
  margin: 0;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  transition: color .2s;
}
.situm-mobile-nav__link:hover,
.situm-mobile-nav__toggle:hover {
  color: #F47D20;
}
.situm-mobile-nav__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  color: #fff;
  transition: transform .2s ease;
}
.situm-mobile-nav__toggle.is-open .situm-mobile-nav__arrow {
  transform: rotate(180deg);
}
.situm-mobile-nav__submenu {
  flex-direction: column;
  padding-left: 14px;
}
.situm-mobile-nav__submenu[hidden] {
  display: none !important;
}
.situm-mobile-nav__submenu:not([hidden]) {
  display: flex;
}
.situm-mobile-nav__sublink {
  display: block;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px 8px 12px 18px;
  color: rgba(255,255,255,.75);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .2s;
}
.situm-mobile-nav__sublink:hover { color: #F47D20; }
/* ===== LANGUAGE SWITCHER (mobile drawer) =====
   Same oplate_render_flag_language_switcher() call as the desktop instance
   above (uses the shared ".oplate-language-switcher*" rules above), just
   rendered again at the bottom of the hamburger drawer. Wrapped in
   .oplate-lang-switcher--mobile so these rules never leak onto the desktop
   instance or TranslatePress elsewhere. */
.oplate-lang-switcher--mobile { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.oplate-lang-switcher--mobile .oplate-language-switcher__trigger:active,
.oplate-lang-switcher--mobile .oplate-language-switcher__other:active {
  opacity: .8;
}
@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; }
  .oplate-lang-switcher--desktop { 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 HERO — CONTENT HIDDEN, REVERSIBLE (DokMax/DokMaxAlu/DokMaxEco/
   ŠitumDeck) =====
   ".product-hero-content" is the existing wrapper (already there — see
   page-{slug}.php's hero section) that holds the breadcrumb, H1, subtitle,
   spec chips and both CTAs ("Zatraži ponudu" + "Preuzmi katalog") — nothing
   else. Hiding it removes only the overlay text/buttons, leaving the
   sibling hero photo(s) (a separate, absolutely-positioned element) as a
   clean full-bleed photographic cover, at every width (no media query —
   requested for desktop AND mobile). Nothing is deleted from the PHP/ACF
   side — every field, link and piece of text is still rendered into the
   DOM exactly as before, just not painted. To bring it back later, delete
   this one rule (or the class). The wrapper itself carries an inline
   "display:flex" (see page-{slug}.php) — a plain "display:none" here can
   never beat that (inline styles always win over an external stylesheet
   unless it uses !important), so !important is required, not optional. */
.product-hero-content { display: none !important; }

/* ===== 2-PHOTO HERO/COVER — MOBILE: KEEP ONLY THE SECOND (RIGHT) PHOTO (≤767px) =====
   Najam and Projektiranje still use this — a desktop hero built from TWO
   side-by-side photos (width:50%;height:100% each, ids "najam-hero" /
   "najam-hero-2" and "proj-hero" / "proj-hero-2" — note the hyphen before
   "2"). No dedicated mobile-cover asset exists for these two yet, so they
   keep the earlier "2 slike → samo druga/desna" behaviour: hide the FIRST
   (left) photo, let the SECOND (right) one fill the full width. Desktop is
   untouched — both photos stay exactly as they are. (DokMax/DokMaxAlu/
   DokMaxEco/ŠitumDeck and the homepage used to be handled the same way —
   see the dedicated-mobile-cover-photo block below for why they no longer
   are.) */
@media (max-width: 767px) {
  #najam-hero, #proj-hero {
    display: none;
  }
  #najam-hero-2, #proj-hero-2 {
    width: 100% !important;
  }
}

/* ===== DEDICATED MOBILE COVER PHOTOS (≤767px) =====
   Naslovna, DokMax, DokMaxAlu, DokMaxEco, ŠitumDeck and Prodaja each now have
   a purpose-shot mobile cover image (assets/images/mobile-covers/*, added as
   an extra <img id="{page}-hero-mobile"> sibling right next to that page's
   existing desktop hero photo(s) — see front-page.php / page-dokmax.php /
   page-dokmaxalu.php / page-dokmaxeco.php / page-situmdeck.php /
   page-prodaja.php). These replace the earlier "crop/pick a side of the
   desktop photo" approach for these pages specifically — desktop photos and
   composition are completely unchanged, but on mobile the desktop photo(s)
   are hidden outright and this dedicated image is shown instead, filling the
   cover exactly (100%×100%, object-fit:cover, centered, no extra zoom). */
@media (max-width: 767px) {
  #hero-photo,
  #dokmax-hero, #dokmax-hero2,
  #dokmaxalu-hero, #dokmaxalu-hero2,
  #dokmaxeco-hero, #dokmaxeco-hero2,
  #situmdeck-hero, #situmdeck-hero2,
  #prod-hero {
    display: none !important;
  }
  #hero-photo-mobile,
  #dokmax-hero-mobile,
  #dokmaxalu-hero-mobile,
  #dokmaxeco-hero-mobile,
  #situmdeck-hero-mobile,
  #prod-hero-mobile {
    display: block !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: #000;
    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: #000;
    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"). */