/*
* Krastavčević — global stylesheet.
* Visual specification: the production WordPress site krastavcevic.rs (Hello
* Elementor 3.5 + child theme, Elementor 4.3 / Pro 4.3, kit post-8). Values come
* from the theme reset, the kit (post-8), header (post-30), footer (post-51), the
* page CSS (post-14/17/23/563) and measurements of the rendered pages at
* 390, 768 and 1440 px.
*
* Architecture (Workflow/ENGINEERING-BASELINE.md, Responsive Architecture And
* Design Tokens): tokens once in :root, mobile-first rules refined with
* @media (min-width: 768px | 1024px | 1280px), one .container, BEM components
* named by role. Production's tablet is 768-1024px and its desktop starts at
* 1025px; here desktop starts at --bp-lg (1024px), accepted up front.
* Order: tokens, base, layout, primitives, shared components (header, footer,
* cookie consent, gallery and lightbox, contact form), then the page blocks:
* values only one page uses, each on a class or role-named modifier that only
* that page renders.
*/

:root {
    color-scheme: light;

    /* Breakpoint tokens are mirrored as literal values in each @media prelude. */
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* Colors by role (kit post-8 globals and the widget colors production uses). */
    --color-brand: #FFF100;
    /* kit primary, yellow */
    --color-ink: #231F20;
    /* kit secondary and text */
    --color-ink-strong: #000000;
    /* active desktop menu item */
    --color-accent: #009688;
    /* kit accent, teal */
    --color-accent-card: color-mix(in srgb, var(--color-accent) 80%, transparent);
    /* teal card, production #009688CC */
    --color-surface: #FFFFFF;
    /* kit bd46f68 */
    --color-surface-soft: #F7F7F7;
    /* page hero */
    --color-surface-muted: #EEEEEE;
    /* grey feature card */
    --color-surface-pale: #F5F5F5;
    /* light feature card base */
    --color-surface-light: color-mix(in srgb, var(--color-surface-pale) 80%, transparent);
    /* light feature card, production #F5F5F5CC */
    --color-on-dark: var(--color-surface);
    --color-line: color-mix(in srgb, var(--color-ink) 14%, transparent);
    /* consent hairlines */
    --color-line-light: #CCCCCC;
    /* theme comment rule, form checkbox hover border */
    --color-check: green;
    /* Kontakt form check mark (production custom CSS) */
    --color-backdrop: rgb(0 0 0 / 55%);
    /* cookie settings dialog */
    --color-error: #D9534F;
    /* Elementor form error */
    --color-switch-off: #8C8C8C;
    /* keeps 3:1 on white */
    --color-switch-knob: #FFFFFF;
    /* Elementor lightbox (gallery component): default UI colour and backdrops. */
    --color-lightbox-ui: rgb(237 237 237 / 90%);
    --color-scrim: rgb(0 0 0 / 80%);
    --color-scrim-soft: rgb(0 0 0 / 50%);
    --color-share-ink: #0C0D0E;
    /* lightbox share menu links */
    --color-facebook: #3B5998;
    --color-pinterest: #BD081C;
    --color-download: #9DA5AE;

    /* Fonts. Production body text is the Hello Elementor system stack; Roboto
    (local, 300 and 400) is used by buttons, the mobile menu and kit "text". */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-ui: "Roboto", sans-serif;

    /* Type scale by role. Production uses fixed rem steps per breakpoint, so
    these are fixed values refined in the @media blocks below (no fluid sizes,
    which would break 1:1 at 390/768/1440). */
    --fs-body: 0.95rem;
    /* 15.2px, kit body */
    --lh-body: 1.5;
    --fs-text: 1rem;
    /* kit "text" typography (Roboto 300) */
    --lh-text: 1.4rem;
    --fs-lead: 1.2rem;
    /* 19.2px on phones; 1.4rem (22.4px) from md */
    --lh-lead: 1.6rem;
    /* 25.6px on phones; 1.5 (33.6px) from md */
    --fs-cta-text: 1.1em;
    /* home CTA copy, 16.72px */
    --fs-subtitle: 1.4rem;
    /* page hero subtitle (weight 300) */
    --fs-tagline: 1.1rem;
    /* page hero tagline (weight 200) */
    --fs-h1: 2.2rem;
    /* kit h1: 35.2px on phones, 3rem (48px) from md */
    --lh-h1: 3.5rem;
    --fs-h2: 2.2rem;
    /* kit h2: 35.2px on phones, 2.3rem (36.8px) from md */
    --lh-h2: 2.5rem;
    /* 40px on phones, 2.9rem (46.4px) from md */
    --fs-h3: 1.75rem;
    /* theme h3 28px, kit line height 2rem */
    --lh-h3: 2rem;
    --fs-hero-title: 1.8rem;
    /* home hero h1: 28.8px on phones, 2.6rem (41.6px) from md */
    --lh-hero-title: 1.3em;
    /* 37.44px on phones, 3.5rem (56px) from md */
    --fs-label: 0.75rem;
    /* kit c289a54: uppercase card labels */
    --lh-label: 1.2rem;
    --ls-label: 5px;
    --fs-nav: 0.9rem;
    /* kit 36b9205: menu */
    --ls-nav: 0.5px;
    --fs-dropdown: 1rem;
    /* mobile menu items; 0.9rem (14.4px) on tablets */
    --fs-button: 1.1rem;
    /* kit button */
    --ls-button: 0.7px;
    --fs-button-small: 0.8rem;
    /* card and header buttons */
    --fs-footer-title: 1.1rem;
    --fs-footer-link: 0.85rem;
    --fs-small: 0.8rem;
    /* kit 59e339a: footer bottom line */
    --fs-icon-toggle: 22px;
    /* menu toggle glyph */
    --fs-icon-social: 18px;
    --fs-icon-box: 40px;
    --fs-icon-box-title: 1.2rem;
    --fs-counter-title: 0.9rem;
    /* Elementor counter title (o-nama) */
    --fs-option: 0.9rem;
    /* form checkbox label (Kontakt) */
    --fs-icon-lightbox: 20px;
    /* Elementor lightbox UI icons */
    --fs-icon-lightbox-nav: 25px;
    --fs-lightbox-title: 16px;
    /* Elementor lightbox caption */
    --fs-lightbox-text: 14px;
    --fs-lightbox-share: 12px;
    /* Cookie banner and settings only (template component, wo-design). */
    --fs-caption: 0.75rem;
    --fs-consent-name: 0.875rem;

    /* Spacing: the steps production uses. */
    --space-1: 5px;
    --space-2: 10px;
    --space-3: 15px;
    --space-4: 20px;
    --space-5: 25px;
    --space-6: 30px;
    --space-7: 40px;
    --space-8: 50px;
    --space-9: 60px;
    --space-10: 70px;
    --space-11: 80px;
    --space-12: 90px;
    --space-13: 100px;
    --space-14: 120px;
    /* Off-scale px steps the theme and Elementor widgets repeat. */
    --space-1a: 6px;
    /* icon list item spacing */
    --space-1b: 8px;
    /* footer list spacing on phones, form field block padding */
    --space-2a: 12px;
    /* small button block padding, social icon gap */
    --space-3a: 16px;
    /* dropdown item and form field padding */
    --space-paragraph: 0.9rem;
    /* theme paragraph and list spacing */

    /* Radius by role. */
    --radius-card: 30px;
    /* cards, images, footer card */
    --radius-hero: 50px;
    /* page hero bottom corners */
    --radius-pill: 100px;
    /* buttons, menu toggle, social icons */
    --radius-control: 6px;
    /* form fields */
    --radius-dialog: 14px;
    /* cookie banner and settings */
    --radius-subtle: 3px;
    /* lightbox share menu */

    /* Elevation. */
    --shadow-header: 0 6px 10px 0 rgb(0 0 0 / 10%);
    --shadow-bubble: 0 0 5px 0 rgb(0 0 0 / 10%);
    /* kontakt info circles */
    --shadow-overlay: 0 24px 64px -24px rgb(0 0 0 / 30%), 0 2px 6px rgb(0 0 0 / 6%);
    --shadow-dialog: 0 0 0 1px var(--color-line), var(--shadow-overlay);
    --shadow-knob: 0 1px 3px rgb(0 0 0 / 25%);
    --shadow-lightbox-image: 0 0 30px rgb(0 0 0 / 30%), 0 0 8px -5px rgb(0 0 0 / 30%);
    --shadow-menu: 0 4px 15px rgb(0 0 0 / 30%);

    /* Layers, in stacking order. */
    --z-behind: -1;
    /* decorative background layers */
    --z-raised: 1;
    /* switch input over its track, lightbox stage */
    --z-above: 2;
    /* lightbox close and share */
    --z-lightbox-footer: 5;
    --z-lightbox-header: 10;
    --z-header: 95;
    /* production header z-index */
    --z-dropdown: 9997;
    /* production mobile menu */
    --z-consent: 10000;
    --z-skip: 10001;

    /* Container: content width and gutter (production boxed width 1140px;
    15px section gutters on phones, none from md). */
    --wrap-content: 1140px;
    --wrap: var(--wrap-content);
    --wrap-pad: var(--space-3);
    /* Hello Elementor page column (404, legal, post, archive). */
    --wrap-entry: 100%;

    /* Fixed header height (production min-height 80px at every width). */
    --header-height: 80px;

    /* Motion. */
    --ease-pointer: cubic-bezier(0.58, 0.3, 0.005, 1);
    /* Elementor menu pointer */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-out: 0.18s;
    --dur-base: 0.3s;
    /* Elementor default transition */
    --dur-slow: 0.8s;
    /* gallery hover and form check mark */

    /* Cookie consent controls (template component). */
    --control-size: 2.75rem;
    --control-size-compact: 1.75rem;
    --control-size-compact-dialog: 2rem;
    --switch-width: 2.75rem;
    --switch-height: 1.5rem;
    --switch-inset: 0.125rem;
    --dialog-width: 33rem;
}

@media (min-width: 768px) {
    :root {
        --fs-lead: 1.4rem;
        --lh-lead: 1.5;
        --fs-h1: 3rem;
        --fs-h2: 2.3rem;
        --lh-h2: 2.9rem;
        --fs-hero-title: 2.6rem;
        --lh-hero-title: 3.5rem;
        --fs-dropdown: 0.9rem;
        /* production tablet menu size (14.4px) */
        --wrap-pad: 0px;
        --wrap-entry: 600px;
    }
}
@media (min-width: 1024px) {
    :root {
        --wrap-entry: 800px;
    }
}
@media (min-width: 1280px) {
    :root {
        --wrap-entry: 1140px;
    }
}

/* Roboto from production (uploads/elementor/google-fonts): variable WOFF2,
latin + latin-ext, original filenames, SIL OFL 1.1 in assets/fonts/roboto/OFL.txt.
Only the weights production uses (300, 400) are declared. */
@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300 400;
    font-stretch: 100%;
    src: url("../assets/fonts/roboto/roboto-f0106b44.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300 400;
    font-stretch: 100%;
    src: url("../assets/fonts/roboto/roboto-0f7fcdc8.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Phosphor Light 2.1.2 (MIT, assets/icons/phosphor/LICENSE): subset for the
cookie consent layer only (x, caret-down). */
@font-face {
    font-family: "Phosphor-Light";
    src: url("../assets/icons/phosphor/Phosphor-Light-subset.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: block;
    unicode-range: U+E000-F8FF;
}

/* ---------------------------------------------------------------------------
Base: Hello Elementor reset, then the kit post-8 globals.
--------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
    scroll-padding-block-start: var(--header-height);
}
body {
    margin: 0;
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
body:has(dialog[open]) {
    overflow: hidden;
}
/* !important: the hidden attribute must win over any component display value. */
[hidden] {
    display: none !important;
}

:where(h1, h2, h3, h4, h5, h6) {
    margin-block: 0.5rem 1rem;
    color: inherit;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
}
/* Kit post-8 heading styles (h4-h6 keep the theme reset sizes, below the role scale). */
h1 {
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: var(--lh-h1);
}
h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: var(--lh-h2);
}
h3 {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-h3);
}
:where(h4) {
    font-size: 1.5rem;
}
:where(h5) {
    font-size: 1.25rem;
}
:where(h6) {
    font-size: 1rem;
}
p {
    margin-block: 0 var(--space-paragraph);
}
/* theme paragraph spacing */
a {
    background-color: transparent;
    color: var(--color-ink);
    text-decoration: none;
}
/* Zero-specificity states so component link classes keep their colour on hover. */
a:where(:hover, :active) {
    color: var(--color-ink);
}
b, strong {
    font-weight: bolder;
}
small {
    font-size: 80%;
}
sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
img {
    max-inline-size: 100%;
    block-size: auto;
    border-style: none;
}
ul, ol {
    margin-block: 0 var(--space-paragraph);
}
label {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}
button, input {
    overflow: visible;
}
button, select {
    text-transform: none;
}
textarea {
    overflow: auto;
    resize: vertical;
}
/* Theme table reset; 0.9em scales with the surrounding copy, no type token. */
table {
    inline-size: 100%;
    margin-block-end: var(--space-3);
    font-size: 0.9em;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
}
table td, table th {
    padding: var(--space-3);
    border: 1px solid hsl(0 0% 50% / 50.2%);
    line-height: 1.5;
    vertical-align: top;
}
/* theme table rule colour */
table th {
    font-weight: 700;
}
/* Accepted deviation: a visible focus outline (production has none). */
:is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-surface);
}
:is(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
    outline: none;
}

/* ---------------------------------------------------------------------------
Layout
--------------------------------------------------------------------------- */
/* Content wrapper (Elementor boxed container): --wrap is the content width,
--wrap-pad the gutter. A block with another production width or gutter
overrides these two tokens on itself. */
.container {
    max-inline-size: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--wrap-pad);
}
/* Hello Elementor page column (404, legal, post and archive pages). */
.entry {
    inline-size: 100%;
    max-inline-size: var(--wrap-entry);
    margin-inline: auto;
    padding-inline: var(--space-2);
    /* theme 10px gutter below 576px */

    @media (min-width: 768px) {
        padding-inline: 0;
    }
}
.entry__header {
    margin: 0;
}
.entry__title {
    margin-block: 0.5rem 1rem;
    /* theme h1 margins */
    padding-inline: var(--space-2);
    /* theme title gutter on phones */

    @media (min-width: 768px) {
        padding-inline: 0;
    }
}
.entry__content > :last-child {
    margin-block-end: var(--space-paragraph);
}
.entry__content a {
    text-decoration: underline;
}

/* Section band: full-width block around a .container. Spacing per section via
--section-pad-start/--section-pad-end (block padding) and --section-space-end
(margin below), all 0 by default. */
.section {
    padding-block: var(--section-pad-start, 0px) var(--section-pad-end, 0px);
    margin-block-end: var(--section-space-end, 0px);
}
/* Intro section with centred title, divider, lead and copy (home 3f1b618,
o-nama 1f9869a): 50px/15px on phones, 100px/0 from md, 1px row gap. */
.section--intro {
    --section-pad-start: var(--space-8);
    --section-pad-end: var(--space-8);

    @media (min-width: 768px) {
        --section-pad-start: var(--space-13);
        --section-pad-end: var(--space-13);
    }
}
.section__inner {
    display: flex;
    flex-direction: column;
    align-items: var(--section-align, center);
    gap: var(--section-gap, 1px);
    /* production 1px row gap */
    --copy-column-gap: var(--space-8);
    /* the intro container's 50px column gap */

    & > .divider--wide {
        margin-block-end: var(--section-divider-space, var(--space-8));
    }
}

/* ---------------------------------------------------------------------------
Primitives
--------------------------------------------------------------------------- */
/* SVG icons from assets/icons/icons.svg: <svg class="icon"><use href="/assets/icons/icons.svg#fab-youtube"></use></svg>. */
.icon {
    display: block;
    inline-size: 1em;
    block-size: 1em;
    flex: none;
    fill: currentColor;
}
/* Skip link offsets are unique to this control (theme screen-reader-text focus state). */
.skip-link {
    position: fixed;
    z-index: var(--z-skip);
    inset-block-start: 5px;
    inset-inline-start: 5px;
    padding: var(--space-2a) 24px;
    background: var(--color-surface-muted);
    color: var(--color-ink);
    font-size: 1rem;
    line-height: normal;
    transform: translateY(-200%);
}
.skip-link:focus {
    transform: translateY(0);
}
/* Standard visually hidden pattern: the -1px margin is part of the technique, not spacing. */
.u-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Decorative dots layer (Elementor background overlay image): a ::before under
the content. Mix it into any positioned block:
.dots-bg--yellow  one yellow dot group, opacity 1 (page heroes)
.dots-bg--faint   black dots at 3% (intro sections)
.dots-bg--card    black dots greyed by the production filter at 10% (cards)
Custom properties: --dots-image, --dots-size, --dots-position,
--dots-opacity, --dots-filter, --dots-attachment (from lg: fixed to the viewport,
production background-attachment: fixed from 1025px; scroll where production scrolls). */
.dots-bg {
    --dots-image: url("/assets/images/uploads/2025/12/ico-dots-black.svg");
    --dots-size: 72% auto;
    --dots-position: center center;
    --dots-opacity: 0.1;
    --dots-filter: none;
    position: relative;
    isolation: isolate;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: var(--z-behind);
        border-radius: inherit;
        background-image: var(--dots-image);
        background-position: var(--dots-position);
        background-repeat: no-repeat;
        background-size: var(--dots-size);
        opacity: var(--dots-opacity);
        filter: var(--dots-filter);
        pointer-events: none;

        @media (min-width: 1024px) {
            background-attachment: var(--dots-attachment, fixed);
        }
    }
}
.dots-bg--yellow {
    --dots-image: url("/assets/images/uploads/2025/12/ico-dot-yellow.svg");
    --dots-size: 73% auto;
    --dots-opacity: 1;
}
.dots-bg--faint {
    --dots-size: 73% auto;
    --dots-opacity: 0.03;
}
.dots-bg--card {
    --dots-filter: brightness(200%) contrast(0%) saturate(100%);
}

/* ---------------------------------------------------------------------------
Shared components
--------------------------------------------------------------------------- */

/* Button: the kit post-8 button (Roboto 400, uppercase, ink outline, yellow).
.button--dark            ink fill, yellow text; hover yellow fill, ink text
.button--small           0.8rem, 12px 20px (card buttons)
.button--outline-brand   ink fill, yellow text and border (card)
.button--outline-light   ink fill, white text and border (card)
.button--compact         header button (0.8rem, 9px 15px 7px, 0.8px)
Holder .button-wrap (+ --full-mobile: full width on phones). */
.button {
    display: inline-block;
    padding: var(--space-3) 33px;
    /* kit button padding; 33px is no spacing step */
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-pill);
    background-color: var(--color-brand);
    color: var(--color-ink);
    fill: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--fs-button);
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--ls-button);
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--dur-base);

    &:hover, &:focus {
        background-color: var(--color-ink);
        color: var(--color-brand);
        fill: var(--color-brand);
    }
}
.button__content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
}
.button__icon {
    display: flex;
}
.button--dark {
    background-color: var(--color-ink);
    color: var(--color-brand);
    fill: var(--color-brand);

    &:hover, &:focus {
        background-color: var(--color-brand);
        color: var(--color-ink);
        fill: var(--color-ink);
    }
}
.button--small {
    padding: var(--space-2a) var(--space-4);
    /* production card button padding */
    font-size: var(--fs-button-small);
}
.button--outline-brand {
    border-color: var(--color-brand);
    background-color: var(--color-ink);
    color: var(--color-brand);

    &:hover, &:focus {
        border-color: var(--color-brand);
        background-color: var(--color-ink);
        color: var(--color-brand);
    }
}
.button--outline-light {
    border-color: var(--color-surface);
    background-color: var(--color-ink);
    color: var(--color-surface);

    &:hover, &:focus {
        border-color: var(--color-brand);
        background-color: var(--color-ink);
        color: var(--color-surface);
    }
}
.button--compact {
    padding: 9px var(--space-3) 7px;
    /* production header button padding (9/7 are no spacing step) */
    font-size: var(--fs-button-small);
    letter-spacing: 0.8px;

    &:hover, &:focus {
        color: var(--color-brand);
    }
}
.button-wrap {
    display: block;
}
.button-wrap--full-mobile .button {
    display: block;
    inline-size: 100%;

    @media (min-width: 768px) {
        display: inline-block;
        inline-size: auto;
    }
}

/* Divider (Elementor divider, view line): a bar inside 2px block padding.
Default 100px x 3px, start-aligned, brand colour.
.divider--wide    220px x 5px, centred (section and hero titles)
.divider--ink / .divider--light   colour
Custom properties: --divider-width, --divider-weight, --divider-color.
Space below comes from the parent component. */
.divider {
    --divider-width: 100px;
    --divider-weight: 3px;
    --divider-color: var(--color-brand);
    display: block;
    flex: none;
    inline-size: var(--divider-width);
    max-inline-size: 100%;
    block-size: calc(var(--divider-weight) + 4px);
    padding-block: 2px;
    /* production divider padding, not a spacing step */
    background-color: var(--divider-color);
    background-clip: content-box;
}
.divider--wide {
    --divider-width: 220px;
    --divider-weight: 5px;
    margin-inline: auto;
    align-self: center;
}
.divider--ink {
    --divider-color: var(--color-ink);
}
.divider--light {
    --divider-color: var(--color-surface);
}

/* Section title: centred kit h2 (--section-title-width, default 50% from md). */
.section-title {
    --section-title-width: 100%;
    inline-size: var(--section-title-width);
    max-inline-size: 100%;
    margin: 0 0 var(--space-2);
    text-align: center;

    @media (min-width: 768px) {
        --section-title-width: 50%;
    }
}

/* Lead copy (text-editor at 1.4rem / weight 200). --lead-width. */
.lead {
    --lead-width: 100%;
    inline-size: var(--lead-width);
    max-inline-size: 100%;
    font-size: var(--fs-lead);
    font-weight: 200;
    line-height: var(--lh-lead);
}

/* Copy (text-editor). .copy--text: kit "text" typography (Roboto 300 1rem/1.4rem).
Columns: .copy--columns-md (2 from md), .copy--columns-lg (2 from lg). --copy-width.
Lists inside: ul.copy__list. */
.copy {
    --copy-width: 100%;
    inline-size: var(--copy-width);
    max-inline-size: 100%;
    column-gap: var(--copy-column-gap, normal);
    /* production: the parent container's column gap */
}
.copy__list {
    padding-inline-start: 40px;
}
/* browser list indent kept by production */
.copy--text {
    font-family: var(--font-ui);
    font-size: var(--fs-text);
    font-weight: 300;
    line-height: var(--lh-text);
}
.copy--columns-md {
    @media (min-width: 768px) {
        columns: 2;
    }
}
.copy--columns-lg {
    @media (min-width: 1024px) {
        columns: 2;
    }
}

/* Page hero: soft grey band with the yellow dot group and rounded bottom corners.
.page-hero--start     home and Proizvodi: start-aligned h1, lead, buttons
.page-hero--centered  O nama and Kontakt: centred h1, divider, subtitle, tagline, text
Custom properties: --page-hero-min, --page-hero-pad (block padding),
--page-hero-pad-inline-start/-end, --page-hero-space-end (margin below). */
.page-hero {
    --page-hero-min: 0px;
    --page-hero-pad: var(--space-8);
    --page-hero-pad-inline-start: 0px;
    --page-hero-pad-inline-end: 0px;
    --page-hero-space-end: 0px;
    --wrap-pad: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: var(--page-hero-min);
    margin-block-end: var(--page-hero-space-end);
    padding: var(--page-hero-pad) var(--page-hero-pad-inline-end) var(--page-hero-pad) var(--page-hero-pad-inline-start);
    border-radius: 0 0 var(--radius-hero) var(--radius-hero);
    background-color: var(--color-surface-soft);
}
.page-hero__inner {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
}
.page-hero--start {
    --page-hero-min: 500px;
    /* production hero min-height */
    --page-hero-pad-inline-start: var(--space-4);
    --page-hero-pad-inline-end: var(--space-4);

    & .page-hero__inner {
        align-items: flex-start;
    }

    @media (min-width: 768px) {
        --page-hero-pad: var(--space-13);
        --page-hero-pad-inline-start: var(--space-8);
        --page-hero-pad-inline-end: 0px;
    }
}
.page-hero--centered {
    --page-hero-min: 100px;
    /* production hero min-height, unique */
    --page-hero-pad: var(--space-10);

    & .page-hero__inner {
        align-items: center;
    }
}
/* Home hero h1 (2.6rem / 56px), 80% wide from md. */
.page-hero__title {
    inline-size: 100%;
    margin: 0 0 var(--space-8);
    font-size: var(--fs-hero-title);
    line-height: var(--lh-hero-title);

    @media (min-width: 768px) {
        inline-size: 80%;
    }
}
/* Kit h1 variant (Proizvodi): keeps the kit h1 size. */
.page-hero__title--kit {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
}
.page-hero__lead {
    --lead-width: 100%;
    margin-block-end: var(--space-6);

    @media (min-width: 768px) {
        --lead-width: 80%;
        margin-block-end: var(--space-8);
    }
    @media (min-width: 1024px) {
        --lead-width: 73%;
    }
}
.page-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    inline-size: 100%;

    @media (min-width: 768px) {
        flex-direction: row;
    }
}
.page-hero--centered .page-hero__title {
    inline-size: auto;
    margin-block-end: var(--space-4);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    text-align: center;
}
.page-hero--centered .divider {
    margin-block-end: var(--space-8);
}
.page-hero__subtitle {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-subtitle);
    font-weight: 300;
    text-align: center;
}
.page-hero__tagline {
    margin: 0 0 var(--space-9);
    font-size: var(--fs-tagline);
    font-weight: 200;
    line-height: var(--lh-tagline, 1);
    text-align: center;
}
.page-hero__text {
    --copy-width: 90%;
    --copy-column-gap: var(--space-5);
    /* the hero container's 25px column gap */
    margin-block-end: var(--space-6);

    @media (min-width: 768px) {
        --copy-width: 80%;
    }
}

/* Feature row: a card next to a rounded image (home and Proizvodi).
Markup: .feature > .feature-card + .feature__media (either order).
Phones: stacked, image first (.feature--card-first reverses the stack).
From md (or lg with .feature--stack-md) a row:
--feature-gap         column gap (30px; 50px on Proizvodi)
--feature-card-width  card share (38%)
--feature-media-width media share (auto = the rest of the row)
--feature-space-end: margin below the row (30px). */
.feature {
    --feature-gap: var(--space-6);
    --feature-row-gap: var(--feature-gap);
    --feature-card-width: 38%;
    --feature-media-width: 46%;
    --feature-space-end: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--feature-row-gap) var(--feature-gap);
    margin-block-end: var(--feature-space-end);
}
.feature--card-first {
    flex-direction: column-reverse;
}
.feature--wide-card {
    --feature-card-width: 51%;
}
.feature--narrow-card {
    --feature-card-width: 37%;
}
.feature__media {
    min-inline-size: 0;
    border-radius: var(--radius-card);
}
.feature__image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-card);
}
/* Row layout from md (from lg with .feature--stack-md). The card keeps its share,
the media takes the rest (.feature__media--fixed: its own share, no growth). */
@media (min-width: 768px) {
    .feature:not(.feature--stack-md) {
        flex-direction: row;
    }
    .feature:not(.feature--stack-md) > .feature-card {
        flex: 0 0 var(--feature-card-width);
        max-inline-size: var(--feature-card-width);
    }
    .feature:not(.feature--stack-md) > .feature__media {
        flex: 1 1 0;
    }
    .feature:not(.feature--stack-md) > .feature__media--fixed {
        flex: 0 1 var(--feature-media-width);
    }
}
@media (min-width: 1024px) {
    .feature--stack-md {
        flex-direction: row;
    }
    .feature--stack-md > .feature-card {
        flex: 0 0 var(--feature-card-width);
        max-inline-size: var(--feature-card-width);
    }
    .feature--stack-md > .feature__media {
        flex: 1 1 0;
    }
    .feature--stack-md > .feature__media--fixed {
        flex: 0 1 var(--feature-media-width);
    }
}

/* Feature card: rounded colour card with grey dots (mix .dots-bg dots-bg--card).
Colours: .feature-card--ink, --teal, --brand, --muted, --light.
Children: __label (uppercase h2/h3), .divider, __title (h3), __text, .button.
Rhythm (production has two):
default              divider 20px on phones / 50px from md, title 20px, text 20px
.feature-card--tight divider 20px at every width
.feature-card--roomy title 30px, text 0
Custom properties: --feature-card-pad (50px 20px on phones, 50px from md),
--feature-card-divider-space, --feature-card-title-space, --feature-card-text-space. */
.feature-card {
    --feature-card-pad: var(--space-8) var(--space-4);
    --feature-card-divider-space: var(--space-4);
    --feature-card-title-space: var(--space-4);
    --feature-card-text-space: var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--feature-card-pad);
    border-radius: var(--radius-card);
    color: var(--color-ink);

    @media (min-width: 768px) {
        --feature-card-pad: var(--space-8);
        --feature-card-divider-space: var(--space-8);
    }
}
.feature-card--ink {
    background-color: var(--color-ink);
    color: var(--color-on-dark);
}
.feature-card--teal {
    background-color: var(--color-accent-card);
    color: var(--color-on-dark);
}
.feature-card--brand {
    background-color: var(--color-brand);
}
.feature-card--muted {
    background-color: var(--color-surface-muted);
}
.feature-card--light {
    background-color: var(--color-surface-light);
}
.feature-card--tight {
    @media (min-width: 768px) {
        --feature-card-divider-space: var(--space-4);
    }
}
.feature-card--roomy {
    --feature-card-title-space: var(--space-6);
    --feature-card-text-space: 0px;
}
.feature-card__label {
    margin: 0;
    color: inherit;
    font-size: var(--fs-label);
    font-weight: 300;
    line-height: var(--lh-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}
.feature-card .divider {
    margin-block-end: var(--feature-card-divider-space);
}
.feature-card__title {
    margin: 0 0 var(--feature-card-title-space);
    color: inherit;
}
.feature-card__text {
    align-self: stretch;
    margin-block-end: var(--feature-card-text-space);
}

/* CTA card: yellow rounded card with dots, centred title, ink divider, copy and
a dark button (home "Više od alata", O nama "Partnerstvo").
Mix .dots-bg (home: default 10%; O nama: .dots-bg--card with --dots-size: cover,
--dots-opacity: 0.08). Custom properties: --cta-card-pad (50px 20px on
phones, 100px 120px 80px from md), --cta-card-min (min height), --cta-card-title-width (100%),
--cta-card-text-width (100% on phones, 80% from md), --cta-card-divider-space
(20px on phones, 30px from md), --cta-card-text-align (center on phones, start from md). */
.cta-card {
    --cta-card-pad: var(--space-8) var(--space-4);
    --cta-card-min: 0px;
    --cta-card-title-width: 100%;
    --cta-card-text-width: 100%;
    --cta-card-divider-space: var(--space-4);
    --cta-card-text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    min-block-size: var(--cta-card-min);
    padding: var(--cta-card-pad);
    border-radius: var(--radius-card);
    background-color: var(--color-brand);

    @media (min-width: 768px) {
        --cta-card-pad: var(--space-13) var(--space-14) var(--space-11);
        --cta-card-text-width: 80%;
        --cta-card-divider-space: var(--space-6);
        --cta-card-text-align: start;
    }
}
.cta-card__title {
    inline-size: var(--cta-card-title-width);
    max-inline-size: 100%;
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
    text-align: center;
}
.cta-card .divider {
    margin-block-end: var(--cta-card-divider-space);
}
.cta-card__text {
    inline-size: var(--cta-card-text-width);
    max-inline-size: 100%;
    margin-block-end: var(--space-6);
    color: var(--color-ink);
    text-align: var(--cta-card-text-align);
}
.cta-card__text--large {
    font-size: var(--fs-cta-text);
}
.cta-card__action {
    inline-size: 100%;
    text-align: center;
}

/* Icon list (Elementor icon-list, traditional layout). --list-gap between
items (6px), --icon-size (14px). .icon-list--center centres items.
Markup: ul.icon-list > li.icon-list__item > [a.icon-list__link] [svg.icon] text. */
.icon-list {
    --list-gap: var(--space-1a);
    /* production item spacing */
    --icon-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.icon-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-1);

    &:not(:last-child) {
        padding-block-end: calc(var(--list-gap) / 2);
    }
    &:not(:first-child) {
        margin-block-start: calc(var(--list-gap) / 2);
    }
    & .icon {
        inline-size: var(--icon-size);
        block-size: var(--icon-size);
    }
}
.icon-list__link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    inline-size: 100%;
    color: inherit;
}
.icon-list--center {
    text-align: center;
    & .icon-list__item, & .icon-list__link {
        justify-content: center;
    }
}

/* Icon box (Elementor icon-box, icon on top): --icon-box-color. */
.icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}
.icon-box__icon {
    display: inline-flex;
    color: var(--icon-box-color, var(--color-ink));
    font-size: var(--fs-icon-box);
    line-height: 1;
}
.icon-box__title {
    margin: 0;
    color: var(--icon-box-color, var(--color-ink));
    font-size: var(--fs-icon-box-title);
    font-weight: 700;
    line-height: 1;
}

/* Counter (Elementor counter, o-nama): the number renders above its title. Markup:
.counter > .counter__title + .counter__value > .counter__number[data-counter] + .counter__suffix */
.counter {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    text-align: center;
}
/* number above the title */
/* Elementor counter title metrics; a flex row so a title wider than its column
overflows evenly on both sides, as on production. */
.counter__title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-counter-title);
    font-weight: 400;
    line-height: 2.5;
}
/* The growing number and suffix centre the value; a value wider than its
column stays start-aligned and overflows to the end, as on production. */
.counter__value {
    display: flex;
    color: var(--color-brand);
    font-size: 69px;
    /* Elementor counter number size, unique */
    font-weight: 600;
    line-height: 1;
    -webkit-text-stroke: 1px rgb(0 0 0 / 60%);
    /* production #00000099 stroke */
}
.counter__number {
    flex-grow: 1;
    text-align: end;
}
.counter__suffix {
    flex-grow: 1;
    text-align: start;
    white-space: pre-wrap;
}

/* YouTube embed with image overlay (Elementor video, o-nama): the overlay
button swaps itself for the iframe (js/main.js [data-video]; iframe title
from data-video-title).
Markup: .video-embed[data-video="<id>"] > img.video-embed__image
+ button.video-embed__play > span.video-embed__icon > svg.icon */
.video-embed {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    /* production --video-aspect-ratio 1.77777 */
    border-radius: var(--radius-card);
    background-color: var(--color-ink-strong);
}
.video-embed__image, .video-embed__frame {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    object-fit: cover;
}
.video-embed__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    cursor: pointer;

    /* Elementor play icon: 100px, shadow and its 0.5s fade. It sits inline on
    the body text baseline, so the line's descender space lifts it slightly
    above the centre, as on production. */
    & .icon {
        display: inline-block;
        inline-size: 100px;
        block-size: 100px;
        filter: drop-shadow(1px 0 6px rgb(0 0 0 / 30%));
        opacity: 0.8;
        transition: opacity 0.5s;
    }
    &:hover .icon, &:focus .icon {
        opacity: 1;
    }
}
.video-embed__icon {
    display: block;
}

/* Google Maps embed: --map-embed-height (400px), --map-embed-radius (28px). */
.map-embed {
    inline-size: 100%;
    overflow: hidden;
    border-radius: var(--map-embed-radius, 28px);
    line-height: 0;
}
.map-embed__frame {
    display: block;
    inline-size: 100%;
    block-size: var(--map-embed-height, 400px);
    margin: 0;
    border: 0;
}

/* Legal text (template legal pages inside .entry). */
.legal {
    overflow-wrap: anywhere;
}
.legal h2 {
    margin-block: 2rem 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}
/* theme h4-sized legal headings */
.legal h3 {
    margin-block: 1.5rem 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
}
.legal li + li {
    margin-block-start: var(--space-1);
}
.table-wrap {
    max-inline-size: 100%;
    margin-block-end: var(--space-4);
    overflow-x: auto;
    overflow-wrap: break-word;
}
.table-wrap table {
    margin: 0;
}

/* Status line (template notice on the legal pages). */
.notice {
    margin: 0 0 var(--space-4);
    padding-inline-start: var(--space-3);
    border-inline-start: 3px solid var(--color-brand);
    font-size: var(--fs-small);
}
/* 3px marker, unique */

/* ---------------------------------------------------------------------------
Header (post-30): white bar 80px, sticky, shadow; logo | menu + button.
Below lg the menu is a burger with a full-width dropdown.
--------------------------------------------------------------------------- */
.site-header {
    --wrap-pad: 5%;
    --wrap: calc(var(--wrap-content) + 10%);
    /* boxed content inside the 5% side padding */
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-header);
}
.site-header__inner {
    display: flex;
    align-items: center;
    min-block-size: var(--header-height);
}
.site-header__brand {
    display: flex;
    align-items: center;
    flex: 0 0 50%;
    min-inline-size: 0;

    @media (min-width: 768px) {
        flex-basis: 37.04%;
        /* production 50% / 85% shrunk to the row */
    }
    @media (min-width: 1024px) {
        flex-basis: 28%;
        /* production 35% / 90% shrunk to the row */
    }
}
/* The link shrinks to the logo's 53px-high width; on phones the image takes
85% of it, as production's image widget. */
.site-header__logo {
    display: block;
    line-height: 0;
}
.site-header__logo-image {
    display: block;
    inline-size: 85%;
    block-size: 53px;
    /* production logo height */
    object-fit: contain;

    @media (min-width: 768px) {
        inline-size: auto;
    }
}
.site-header__menu {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 6%;
    min-inline-size: 0;

    @media (min-width: 1024px) {
        flex-direction: row;
        gap: 2.2%;
    }
}
.site-header__cta {
    display: none;

    @media (min-width: 1024px) {
        display: inline-block;
    }
}

/* Main navigation (nav-menu, pointer underline, animation fade). */
.site-nav {
    --site-nav-drop-offset: 23px;
    /* production dropdown margin-top on phones */

    @media (min-width: 768px) {
        --site-nav-drop-offset: 22px;
    }
}
.site-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25em;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand);
    color: var(--color-ink);
    font-size: var(--fs-icon-toggle);
    line-height: 1;
    cursor: pointer;
    transition: all var(--dur-base);

    &:hover, &:focus {
        background-color: var(--color-ink);
        color: var(--color-brand);
    }

    @media (min-width: 1024px) {
        display: none;
    }
}
.site-nav__icon--close,
.site-nav__toggle[aria-expanded="true"] .site-nav__icon--open {
    display: none;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__icon--close {
    display: block;
}
.site-nav__list {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(50% + var(--fs-icon-toggle) * 0.75 + var(--site-nav-drop-offset));
    /* toggle bottom + offset */
    z-index: var(--z-dropdown);
    max-block-size: 0;
    margin: 0;
    padding: 0;
    overflow: hidden auto;
    background-color: var(--color-surface);
    list-style: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: max-height var(--dur-base), transform var(--dur-base);

    @media (min-width: 1024px) {
        position: static;
        display: flex;
        max-block-size: none;
        overflow: visible;
        background: none;
        transform: none;
        transition: none;
    }
}
.site-nav.is-open .site-nav__list {
    max-block-size: calc(100vh - var(--header-height));
    max-block-size: calc(100svh - var(--header-height));
    transform: scaleY(1);
}
/* Keep the no-script menu from changing layout while deferred scripts load. */
@media (scripting: none) {
    .site-nav:not(.is-enhanced) .site-nav__toggle {
        display: none;
    }
    .site-nav:not(.is-enhanced) .site-nav__list {
        position: static;
        max-block-size: none;
        transform: none;
    }
}
.site-nav__item {
    position: relative;
    margin: 0;
    padding: 0;
}
.site-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3a) var(--space-4);
    /* production dropdown item padding on phones */
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--fs-dropdown);
    font-weight: 400;
    line-height: 20px;
    /* production menu item line height, unique */
    letter-spacing: var(--ls-nav);
    text-transform: uppercase;
    white-space: nowrap;

    &:hover, &:focus {
        background-color: var(--color-surface);
        color: var(--color-ink);
    }
    &[aria-current="page"] {
        background-color: var(--color-brand);
    }

    @media (min-width: 768px) {
        padding-block: var(--space-3);
    }
    @media (min-width: 1024px) {
        padding: 4px var(--space-2);
        /* production desktop item padding */
        font-family: var(--font-body);
        font-size: var(--fs-nav);
        transition: 0.4s;
        /* Elementor nav-menu link transition, unique */

        &:hover, &:focus, &[aria-current="page"] {
            background-color: transparent;
        }
        &[aria-current="page"] {
            color: var(--color-ink-strong);
        }

        &::after {
            content: "";
            position: absolute;
            inset-block-end: 0;
            inset-inline-start: 0;
            inline-size: 100%;
            block-size: 2px;
            background-color: var(--color-brand);
            transition: var(--dur-base) var(--ease-pointer);
        }
        &:not(:hover):not(:focus):not([aria-current="page"])::after {
            opacity: 0;
        }
    }
}
@media (min-width: 1024px) {
    .site-nav__item:not(:first-child) {
        margin-inline-start: var(--space-4);
    }
    /* half of the 40px item spacing */
    .site-nav__item:not(:last-child) {
        margin-inline-end: var(--space-4);
    }
}

/* ---------------------------------------------------------------------------
Footer (post-51): dark rounded card (logo, links, contact, social) and the
copyright line.
--------------------------------------------------------------------------- */
.site-footer__main {
    min-block-size: 300px;
}
/* production footer section min-height */
.site-footer__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-9) var(--space-6);
    border-radius: var(--radius-card);
    background-color: var(--color-ink);
    color: var(--color-on-dark);

    /* Big grey logo behind the card (production background overlay). */
    --dots-image: url("/assets/images/uploads/2025/11/logo.svg");
    --dots-size: 862px auto;
    /* production phone values */
    --dots-position: -261px 134px;
    --dots-filter: brightness(93%) contrast(117%) saturate(0%);

    --dots-attachment: scroll;
    /* production keeps this layer scrolling */

    @media (min-width: 768px) {
        grid-template-columns: 39% minmax(0, 1fr) minmax(0, 1fr);
        --dots-size: 120% auto;
        --dots-position: 0 0;
    }
    @media (min-width: 1024px) {
        grid-template-columns: 39% repeat(3, minmax(0, 1fr));
        --dots-position: -800px -488px;
    }
}
.site-footer__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-block-end: var(--space-6);
    padding-inline-start: var(--space-8);

    @media (min-width: 768px) {
        margin-block-end: 0;
    }
}
.site-footer__logo-wrap {
    line-height: 0;
}
.site-footer__logo {
    display: block;
}
/* Elementor hover animation "grow". */
.site-footer__logo-image {
    display: block;
    inline-size: 180px;
    block-size: auto;
    transition-duration: var(--dur-base);
    transition-property: transform;

    &:hover, &:focus, &:active {
        transform: scale(1.1);
    }
}
.site-footer__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-end: var(--space-4);

    &:last-child {
        margin-block-end: 0;
    }

    @media (min-width: 768px) {
        align-items: flex-start;
        margin-block-end: 0;
    }
    @media (min-width: 1024px) {
        &:nth-child(2) {
            grid-column: 3;
        }
        /* production empty spacer column before the lists */
    }
}
.site-footer__title {
    margin: 0 0 var(--space-4);
    color: var(--color-brand);
    font-size: var(--fs-footer-title);
    font-weight: 900;
    line-height: 1;
}
.site-footer__list {
    --list-gap: var(--space-1b);
    /* production item spacing on phones; 6px from md */
    font-size: var(--fs-footer-link);
    line-height: var(--lh-body);

    & .icon-list__item, & .icon-list__link {
        justify-content: center;
    }

    @media (min-width: 768px) {
        --list-gap: var(--space-1a);

        & .icon-list__item, & .icon-list__link {
            justify-content: flex-start;
        }
    }
}
.site-footer__link {
    color: var(--color-on-dark);
}
.site-footer__list--contact {
    margin-block-end: var(--space-9);
}
.social {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    @media (min-width: 768px) {
        column-gap: var(--space-2a);
    }
}
/* production icon gap from md */
.social__link {
    display: inline-flex;
    padding: 0.5em;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand);
    color: var(--color-ink);
    font-size: var(--fs-icon-social);
    line-height: 1;
    transition: all var(--dur-base);

    &:hover, &:focus {
        color: var(--color-ink);
        opacity: 0.9;
    }
    /* Elementor social icon hover */
}
.site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-block-size: 50px;
    /* production phone min-height */
    padding-block: var(--space-8);
    font-size: var(--fs-small);
    font-weight: 300;
    line-height: 1;

    @media (min-width: 768px) {
        flex-direction: row;
        justify-content: space-between;
        min-block-size: 100px;
        /* production min-height */
        padding-block: 0;
    }
}
.site-footer__copy {
    margin: 0;
    @media (min-width: 768px) {
        margin-inline-start: var(--space-4);
    }
}
.site-footer__credit {
    margin: 0;
    @media (min-width: 768px) {
        margin-inline-end: var(--space-4);
    }
}

/* ---------------------------------------------------------------------------
Cookie consent (template requirement, not part of production) in the site's
brand: white surface, ink text, yellow kit-style pills with ink outline.
--------------------------------------------------------------------------- */
.ph-light {
    display: inline-block;
    flex: none;
    font-family: "Phosphor-Light" !important;
    /* icon font: no inherited or later font-family may replace it */
    font-style: normal;
    font-weight: normal;
    font-size: 1.15em;
    line-height: 1;
    speak: never;
    -webkit-font-smoothing: antialiased;
}
.ph-x::before {
    content: "\e4f6";
}
.ph-caret-down::before {
    content: "\e136";
}
.consent-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--control-size-compact);
    max-inline-size: 100%;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: var(--ls-button);
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--dur-base);

    &::after {
        content: "";
        position: absolute;
        inset: calc(50% - var(--control-size) / 2) 0;
    }
    &:hover, &:focus-visible {
        background: var(--color-ink);
        color: var(--color-brand);
    }
}
.consent-button--secondary {
    background: var(--color-surface);
    &:hover, &:focus-visible {
        background: var(--color-ink);
        color: var(--color-brand);
    }
}
.icon-button {
    display: inline-grid;
    place-items: center;
    inline-size: var(--control-size);
    block-size: var(--control-size);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;

    &:hover {
        background: var(--color-surface-soft);
    }
}
.consent {
    position: fixed;
    z-index: var(--z-consent);
    inset-inline: var(--space-2);
    inset-block-end: max(var(--space-2), env(safe-area-inset-bottom));
    max-inline-size: var(--dialog-width);
    max-block-size: calc(100vh - var(--space-6));
    max-block-size: calc(100svh - var(--space-6));
    margin-inline: auto;
    overflow-y: auto;
    border-radius: var(--radius-dialog);
    background: var(--color-surface);
    box-shadow: var(--shadow-dialog);

    @media (min-width: 768px) {
        inset-inline: var(--space-5);
        inset-block-end: max(var(--space-5), env(safe-area-inset-bottom));
        margin-inline: auto 0;
    }
}
.consent__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    padding: var(--space-3);
}
.consent__text {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--fs-caption);
    line-height: 1.75;
    text-wrap: pretty;
}
.consent__text a, .dialog__intro a {
    color: var(--color-ink);
    text-decoration: underline;
}
.consent__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-2);
}
.consent__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-2);
}
.consent__close, .dialog__close {
    flex: none;
    color: var(--color-ink);
    font-size: var(--fs-caption);
}
.consent__close {
    align-self: start;
    margin-block: calc(var(--space-3) - var(--control-size) / 2) 0;
    margin-inline-end: calc(-1 * var(--space-1));
}
.dialog__close {
    margin-block: calc((1lh - var(--control-size)) / 2);
    margin-inline-end: calc(-1 * var(--space-2));
}
.consent__close .ph-light, .dialog__close .ph-light {
    font-size: 1em;
}
/* glyph matches the button text size */
.dialog .consent-button {
    min-block-size: var(--control-size-compact-dialog);
    padding-inline: var(--space-3);
}
.dialog {
    inline-size: min(calc(100% - var(--space-6)), var(--dialog-width));
    max-block-size: calc(100vh - var(--space-6));
    max-block-size: calc(100svh - var(--space-6));
    padding: 0;
    border: 0;
    border-radius: var(--radius-dialog);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-dialog);
    overflow: auto;
}
.dialog::backdrop {
    background: var(--color-backdrop);
}
.dialog__form {
    display: flex;
    flex-direction: column;
    max-block-size: inherit;
}
.dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) 0;
}
.dialog__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
}
/* cookie settings heading (template component), unique size */
.dialog__body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    padding: var(--space-1) var(--space-3) var(--space-2);
}
.dialog__body > :last-child {
    margin-block-end: 0;
}
.dialog__intro {
    margin-block-end: var(--space-2);
    color: var(--color-ink);
    font-size: var(--fs-caption);
    line-height: 1.75;
}
.dialog__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-block-start: 1px solid var(--color-line);
}
.dialog__submit {
    margin-inline-start: auto;
}
.consent-categories {
    margin: 0;
    padding: 0;
    list-style: none;
}
.consent-category {
    position: relative;
}
.consent-category + .consent-category {
    border-block-start: 1px solid var(--color-line);
}
.consent-category__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: calc(var(--control-size) + var(--space-1));
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
        display: none;
    }
}
.consent-category--optional .consent-category__summary {
    margin-inline-end: calc(var(--switch-width) + var(--space-2));
}
.consent-category__chevron {
    color: var(--color-ink);
    font-size: var(--fs-caption);
    transform: rotate(-90deg);
    transition: transform var(--dur-out) var(--ease);
}
.consent-category__details[open] .consent-category__chevron {
    transform: none;
}
.consent-category__name {
    min-inline-size: 0;
    font-size: var(--fs-consent-name);
    font-weight: 400;
    overflow-wrap: anywhere;
}
.consent-category__state {
    margin-inline-start: auto;
    font-size: var(--fs-caption);
    white-space: nowrap;
}
.consent-category__description {
    margin: 0 0 var(--space-3);
    padding-inline-start: calc(var(--fs-caption) + var(--space-2));
    font-size: var(--fs-caption);
    line-height: 1.75;
}
.switch {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-block-size: var(--control-size);
}
.switch__input {
    position: absolute;
    inset: 0;
    z-index: var(--z-raised);
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.switch__track {
    position: relative;
    display: block;
    inline-size: var(--switch-width);
    block-size: var(--switch-height);
    border-radius: var(--radius-pill);
    background: var(--color-switch-off);
    transition: background-color var(--dur-out) var(--ease);
}
.switch__track::before {
    content: "";
    position: absolute;
    inset-block-start: var(--switch-inset);
    inset-inline-start: var(--switch-inset);
    inline-size: calc(var(--switch-height) - 2 * var(--switch-inset));
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-switch-knob);
    box-shadow: var(--shadow-knob);
    transition: transform var(--dur-out) var(--ease);
}
.switch__input:checked + .switch__track {
    background: var(--color-ink);
}
.switch__input:checked + .switch__track::before {
    background: var(--color-brand);
    transform: translateX(calc(var(--switch-width) - var(--switch-height)));
}
.switch__input:focus-visible + .switch__track {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
}
.consent-category__switch {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    block-size: calc(var(--control-size) + var(--space-1));
}
.consent__status {
    margin: 0;
}
.consent-noscript {
    margin: 0;
    padding: var(--space-2a) var(--space-4);
    font-size: var(--fs-small);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__list, .site-nav__link, .site-nav__link::after, .button, .site-nav__toggle, .site-footer__logo-image, .consent-button,
    .social__link, .video-embed__play .icon, .consent-category__chevron, .switch__track, .switch__track::before {
        transition: none;
    }
    .site-footer__logo-image:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
Gallery and lightbox (O nama). Port of the production Elementor Pro gallery
widget (e-gallery grid, 3:2, lazy reveal, hover "grow") and the default
Elementor lightbox (counter, fullscreen, zoom, share, arrows, swipe, Esc),
taken from projects/restoranzavencanja with this site's lightbox colours
(Elementor defaults: UI rgba(237, 237, 237, .9), hover white, backdrop
rgba(0, 0, 0, .8)). The gallery module in js/main.js reveals the images and
builds the lightbox; without it the gallery is a grid of links to the full
images.

Markup: see the gallery module in js/main.js. Custom properties:
--gallery-columns, --gallery-gap   columns and gap per breakpoint
--gallery-margin-end               widget bottom margin
--gallery-overlay-hover            overlay colour on hover/focus
--------------------------------------------------------------------------- */
.gallery {
    --gallery-columns: 1;
    --gallery-gap: var(--space-4);
    --gallery-margin-end: 0px;
    --gallery-overlay-hover: transparent;

    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
    align-items: start;
    gap: var(--gallery-gap);
    inline-size: 100%;
    min-block-size: 1px;
    margin-block-end: var(--gallery-margin-end);
}

.gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--gallery-radius, var(--radius-card));
    text-decoration: none;
}

.gallery__image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-inline-size: none;
    object-fit: cover;
    object-position: center center;
    transform-origin: center top;
    transition-duration: var(--dur-slow);
    transition-property: filter, transform;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Grid layout with the 3:2 aspect ratio (e-gallery grid). */
.gallery--grid .gallery__image {
    aspect-ratio: 3 / 2;
}

.gallery__overlay {
    position: absolute;
    top: 0;
    left: 0;
    inline-size: 100%;
    block-size: 100%;
    transition-duration: var(--dur-slow);
    transition-property: transform, opacity, background-color;
}

.gallery__item:is(:hover, :focus) .gallery__overlay {
    background-color: var(--gallery-overlay-hover);
}

/* Image hover animation "grow" (Elementor Pro conditionals/transitions.min.css). */
.gallery--grow .gallery__item:is(:hover, :focus) .gallery__image {
    transform: scale(1.1);
}

/* Lazy reveal while the script runs (e-gallery lazyload). */
.gallery.is-lazy .gallery__image:not(.is-loaded) {
    filter: opacity(0);
    transform: scale(0.5);
}

/* ---------------------------------------------------------------------------
Lightbox (built by js/main.js, appended to <body>). Elementor default
colours: UI rgba(237, 237, 237, .9), hover white, backdrop rgba(0, 0, 0, .8).
--------------------------------------------------------------------------- */
.lightbox {
    --lightbox-ui-color: var(--color-lightbox-ui);
    --lightbox-ui-color-hover: var(--color-surface);
    --lightbox-text-color: var(--color-lightbox-ui);
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background-color: var(--color-scrim);
    color: var(--lightbox-text-color);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.5;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;

    &::backdrop {
        background-color: transparent;
    }

    & :where(button) {
        margin: 0;
        border: 0;
        background: none;
        font: inherit;
        cursor: pointer;
    }

    & .lightbox__icon {
        inline-size: 1em;
        block-size: 1em;
        fill: currentColor;
    }
}

.lightbox__message {
    position: relative;
    block-size: 100%;
}

/* Close button above the slideshow (Elementor close z-index 2 over the
Swiper container, which is its own stacking context with z-index 1). */
.lightbox__close {
    position: absolute;
    top: 0;
    inset-inline-end: 0.75em;
    z-index: var(--z-above);
    display: flex;
    margin-block-start: 13px;
    /* Elementor lightbox close offset */
    padding: 0.25em;
    color: var(--lightbox-ui-color);
    font-size: var(--fs-icon-lightbox);
    line-height: 1;
    transition: all var(--dur-base);

    &:hover {
        color: var(--lightbox-ui-color-hover);
    }
}

.lightbox__container {
    position: relative;
    z-index: var(--z-raised);
    block-size: 100%;
    overflow: hidden;
}

.lightbox__header,
.lightbox__footer {
    left: 0;
    inline-size: 100%;
    padding: var(--space-3) var(--space-4);
    transition: var(--dur-base);
}

.lightbox__header {
    position: absolute;
    top: 0;
    z-index: var(--z-lightbox-header);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding-inline: 1em 2.6em;
    color: var(--lightbox-ui-color);
    font-size: var(--fs-icon-lightbox);
}

.lightbox__tool {
    display: flex;
    box-sizing: content-box;
    margin: 0 0.35em;
    padding: 0.25em;
    color: var(--lightbox-ui-color);
    font-size: var(--fs-icon-lightbox);
    line-height: 1;

    &:hover {
        color: var(--lightbox-ui-color-hover);
    }
}

.lightbox__counter {
    inline-size: max-content;
    margin-inline-end: auto;
    color: currentColor;
    font-size: 0.75em;
    /* Elementor lightbox counter, relative to the UI size */
}

.lightbox__slides {
    position: relative;
    block-size: 100%;
    touch-action: pan-y;
}

/* Swiper slides: the next/previous slide moves in horizontally in 0.3s. */
.lightbox__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) 0;
    /* Elementor lightbox slide padding on phones */
    visibility: hidden;
    transform: translateX(calc(100% + 100px));
    transition: transform var(--dur-base) ease, visibility 0s linear var(--dur-base);

    &.is-active {
        visibility: visible;
        transform: none;
        transition: transform var(--dur-base) ease, visibility 0s;
    }

    &.is-before {
        transform: translateX(calc(-100% - 100px));
    }

    &.is-after {
        transform: translateX(calc(100% + 100px));
    }

    &.is-instant {
        transition: none;
    }

    @media (min-width: 768px) {
        padding: var(--space-10);
        /* Elementor lightbox slide padding */
    }
}

.lightbox__image {
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    border: none;
    border-radius: 2px;
    /* Elementor lightbox image radius, unique */
    box-shadow: var(--shadow-lightbox-image);
    transition: transform var(--dur-base);
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Swiper zoom: maxRatio 3; the zoomed image is panned by dragging. */
.lightbox.is-zoom .lightbox__slide.is-active .lightbox__image {
    cursor: grab;
    transform: translate(var(--zoom-x, 0px), var(--zoom-y, 0px)) scale(3);
}

/* While the pointer drags, the image follows without easing; on release it
eases back inside its edges (0.3s, the image transition above). */
.lightbox.is-panning .lightbox__image {
    transition: none;
}

/* Arrows: Elementor's default rgba(237, 237, 237, .9), like the top bar. */
.lightbox__nav {
    position: absolute;
    top: 0;
    z-index: var(--z-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 20%;
    block-size: 100%;
    padding: 0;
    color: var(--color-lightbox-ui);
    font-size: var(--fs-icon-lightbox-nav);
    opacity: 1;
    transition: all var(--dur-base);

    &:hover {
        color: var(--lightbox-ui-color-hover);
    }

    @media (min-width: 768px) {
        inline-size: 15%;
    }
}

/* Production keeps the chevrons at the screen edges only on phones. */
.lightbox__nav--prev {
    left: 0;
    justify-content: flex-start;

    @media (min-width: 768px) {
        justify-content: center;
    }
}

.lightbox__nav--next {
    right: 0;
    justify-content: flex-end;

    @media (min-width: 768px) {
        justify-content: center;
    }
}

.lightbox__footer {
    position: fixed;
    bottom: 0;
    z-index: var(--z-lightbox-footer);
    color: var(--lightbox-text-color);
}

.lightbox__title {
    margin: 0;
    font-size: var(--fs-lightbox-title);
    font-weight: 700;
}

.lightbox__description {
    margin: 0;
    font-size: var(--fs-lightbox-text);
}

/* Header, footer and arrows fade out 3.5s after the last activity. */
.lightbox.is-ui-hidden {
    & .lightbox__header,
    & .lightbox__footer {
        opacity: 0;
        pointer-events: none;
    }

    & .lightbox__nav {
        opacity: 0;
    }
}

.lightbox.is-zoom {
    & .lightbox__header,
    & .lightbox__footer {
        background-color: var(--color-scrim-soft);
    }

    & .lightbox__nav {
        opacity: 0;
        pointer-events: none;
    }
}

.lightbox__share-menu {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
    background-color: transparent;
    transition: background-color 0.4s;
    /* Elementor share menu backdrop fade, unique */
}

.lightbox__share-links {
    position: absolute;
    top: 3em;
    inset-inline-end: 2.8em;
    display: block;
    min-inline-size: 200px;
    /* Elementor share menu width */
    padding: 14px var(--space-4);
    /* Elementor share menu padding */
    border-radius: var(--radius-subtle);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-menu);
    opacity: 0;
    transform: scale(0);
    transform-origin: 90% 10%;
    transition: all 0.25s 0.1s;
    /* Elementor share menu pop-in and its delay, unique */

    &::before {
        content: "";
        position: absolute;
        top: 1px;
        /* Elementor share menu arrow overlap, not spacing */
        inset-inline-end: 0.5em;
        display: block;
        border: 0.45em solid transparent;
        border-bottom-color: var(--color-surface);
        transform: translateY(-100%) scaleX(0.7);
    }
}

.lightbox__share-link {
    display: block;
    color: var(--color-share-ink);
    font-size: var(--fs-lightbox-share);
    line-height: 2.5;
    text-align: start;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.5s 0.1s;
    /* Elementor share link fade-in, unique */

    &:hover {
        color: var(--color-ink);
    }

    /* Production leaves the icon on the text baseline. */
    & .lightbox__icon {
        inline-size: 1.25em;
        block-size: 1.25em;
        margin-inline-end: 0.75em;
    }
}

/* Network colours of the Elementor lightbox share menu (brand colours). */
.lightbox__share-link--facebook .lightbox__icon {
    fill: var(--color-facebook);
}

.lightbox__share-link--xTwitter .lightbox__icon {
    fill: var(--color-ink);
}

.lightbox__share-link--pinterest .lightbox__icon {
    fill: var(--color-pinterest);
}

.lightbox__share-link--download .lightbox__icon {
    fill: var(--color-download);
}

.lightbox.is-share {
    & .lightbox__share-menu {
        top: 0;
        left: 0;
        inline-size: 100vw;
        block-size: 100vh;
        block-size: 100svh;
        background-color: var(--color-scrim-soft);
        cursor: default;
        opacity: 1;
    }

    & .lightbox__share-links,
    & .lightbox__share-link {
        opacity: 1;
    }

    & .lightbox__share-links {
        transform: scale(1);
    }

    & .lightbox__tool--share {
        z-index: var(--z-above);
    }
}

/* !important: inline and later state transitions must not outrank the
visitor's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .gallery__image,
    .gallery__overlay,
    .lightbox * {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* ---------------------------------------------------------------------------
Contact form (Elementor Pro form, labels above, size sm). Fields keep the
production row height; text-entry controls use 16px on phones (accepted
deviation) and the production 15px from md.
--------------------------------------------------------------------------- */
.form {
    margin-block-end: var(--space-1b);
    /* production form widget margin */

    /* Elementor form "waiting" state: opacity and fade, unique. */
    &.is-sending {
        opacity: 0.45;
        transition: opacity 0.5s;
    }
}
.form__fields {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--space-2)) calc(-1 * var(--space-4));
}
.form__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    inline-size: 100%;
    padding-inline: var(--space-2);
    margin-block-end: var(--space-4);
}
.form__group--half {
    @media (min-width: 768px) {
        inline-size: 50%;
    }
}
/* Production renders an empty 1px reCAPTCHA field group above the checkbox. */
.form__group--acceptance {
    margin-block-start: 1px;
}
.form__label {
    display: block;
    padding-block-end: var(--space-2);
    font-size: var(--fs-small);
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}
.form__control {
    flex-basis: 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 40px;
    /* production field height */
    padding: var(--space-1b) var(--space-3a);
    /* production field padding */
    border: 1px solid #B9B9B9;
    /* production field border colour, unique */
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: #1F2124;
    /* Elementor field text colour, unique */
    font-size: max(1rem, 16px);
    font-weight: 300;
    line-height: 21px;
    /* production row height (15px x 1.4), kept at the 16px phone size */
    vertical-align: middle;
    transition: all var(--dur-base);

    @media (min-width: 768px) {
        font-size: 15px;
        /* production form custom CSS */
    }
}
.form__control--textarea {
    padding: 5px 14px;
}
/* production textarea padding */

/* Privacy acknowledgement: the kit's custom checkbox (post-17 custom CSS). The
real input.form__checkbox is visually hidden with .u-sr-only and stays the
state hook; the label draws the box and the check mark. The box and tick
sizes, offsets and the 0.2s box fade below are that custom CSS, unique. */
.form__option {
    display: block;
    flex-basis: 100%;
}
.form__check-label {
    position: relative;
    display: inline;
    margin-inline-end: 1em;
    /* Elementor option spacing */
    font-size: var(--fs-option);
    font-weight: 300;

    &::before {
        content: "";
        display: inline-block;
        inline-size: 15px;
        block-size: 15px;
        margin-inline-end: 0.5em;
        padding: 0.5em;
        border: 1px solid #182D43;
        /* production custom CSS box colour */
        vertical-align: -4px;
        background-color: transparent;
        background-clip: content-box;
        transition: all 0.2s ease;
    }
    &::after {
        content: "";
        position: absolute;
        inset-block-start: 10px;
        inset-inline-start: 2px;
        display: none;
        inline-size: 6px;
        block-size: 11px;
        border-block-start: 2px solid var(--color-check);
        border-inline-end: 1px solid var(--color-check);
        transform: scaleX(-1) rotate(135deg);
        transform-origin: left top;
    }
}
.form__checkbox:hover + .form__check-label::before {
    border-color: var(--color-line-light);
}
/* production hover colour */
/* Checked: production paints the box white on white, so only the tick shows. */
.form__checkbox:checked + .form__check-label::before {
    border-color: var(--color-surface);
    background-color: var(--color-surface);
}
.form__checkbox:checked + .form__check-label::after {
    display: block;
    animation: form-check var(--dur-slow) ease;
}
.form__checkbox:focus-visible + .form__check-label::before {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}
@keyframes form-check {
    0% {
        block-size: 0;
        inline-size: 0;
    }
    25% {
        block-size: 0;
        inline-size: 6px;
    }
    50% {
        block-size: 11px;
        inline-size: 6px;
    }
}

/* Submit row: full-width button on phones, end-aligned from md. The kit button
with the paper plane after the text, 1s colour transition (form widget,
unique), Elementor "push" (scale 0.8). */
.form__actions {
    align-items: flex-end;
    justify-content: flex-end;
}
.form__submit {
    flex-basis: 100%;
    transition-duration: 1s;

    &:hover, &:focus, &:active {
        animation: button-push var(--dur-base) linear 1;
    }

    @media (min-width: 768px) {
        flex-basis: auto;
    }
}
@keyframes button-push {
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}

/* Form messages are appended to the form; field messages to their group. */
.form__message {
    display: block;
    margin-block: var(--space-2);
    line-height: 1;

    &::before {
        display: inline-block;
        margin-inline-end: var(--space-1);
        vertical-align: middle;
    }
}
.form__message--error {
    color: var(--color-error);

    &::before {
        content: "";
        inline-size: 1em;
        block-size: 1em;
        background-color: currentColor;
        -webkit-mask: url("../assets/icons/form-error.svg") center / contain no-repeat;
        mask: url("../assets/icons/form-error.svg") center / contain no-repeat;
    }
}
.form__message--success::before {
    content: "";
    inline-size: 1em;
    block-size: 1em;
    /* Elementor success tick (#008a20), inline SVG. */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' fill='none' viewBox='0 0 14 11'%3E%3Cpath fill='%23008a20' fill-rule='evenodd' d='M4.75 8.15 1.6 5 .55 6.05l4.2 4.2 9-9L12.7.2z' clip-rule='evenodd'/%3E%3C/svg%3E") center / auto no-repeat;
}

/* Notes 5918108 (required fields) and 223c6e5 (reCAPTCHA notice). */
.form-note {
    text-align: end;
}
.form-note--required {
    margin-block-end: var(--space-6);
    font-size: var(--fs-small);
    font-weight: 300;
}
.form-note__mark {
    color: #FF0000;
}
/* production inline colour */
.form-note--legal {
    font-size: var(--fs-caption);
    font-weight: 200;
}
.form-note__link {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .form__control, .form__check-label::before, .form.is-sending {
        transition: none;
    }
    .form__submit:hover, .form__submit:focus, .form__submit:active,
    .form__checkbox:checked + .form__check-label::after {
        animation: none;
    }
}

/* ===========================================================================
Page blocks. Values that only one page uses, grouped per page. Each rule
targets a class or modifier that appears only on that page, so it matches
only the elements it styles there.
=========================================================================== */

/* ---------------------------------------------------------------------------
Home (production post-14)
--------------------------------------------------------------------------- */
/* Intro "Stručnost i Inženjerska Vizija" (3f1b618): .section--intro-text, the
intro with a lead and a column copy block. */
.section--intro-text {
    & .lead {
        --lead-width: 100%;
        margin-block-end: var(--space-6);

        @media (min-width: 768px) {
            --lead-width: 80%;
            margin-block-end: var(--space-8);
        }
    }
    & .copy {
        --copy-width: 100%;
        margin-block-end: var(--space-8);

        @media (min-width: 768px) {
            --copy-width: 80%;
        }
    }
}

/* Feature row 4 (3ef0529): the fixed media column is narrower than the default 46%. */
.feature--slim-media {
    --feature-media-width: 43.099%;
}
/* production container width */

/* CTA "Više od alata" (2251f00), .section--closing-roomy: 70px below on
desktop and tablet, 30px on phones. */
.section--closing-roomy {
    --section-space-end: var(--space-6);

    @media (min-width: 768px) {
        --section-space-end: var(--space-10);
    }
}

/* ---------------------------------------------------------------------------
O nama (production post-23): two page blocks named by role, .counters (row
of counters) and .split (copy column next to the video column).
--------------------------------------------------------------------------- */
/* Hero b86f78b: tagline 3238db9 line height, .page-hero__tagline--loose
(1.5rem on phones, 1.4rem from md). */
.page-hero__tagline--loose {
    --lh-tagline: 1.5rem;

    @media (min-width: 768px) {
        --lh-tagline: 1.4rem;
    }
}

/* "Ekspertiza i temelj porodične firme" (1f9869a), .section--intro-showcase
(counters, lead, gallery, copy and video): 100px block padding at every
width, no side gutter. */
.section--intro-showcase {
    --wrap-pad: 0px;
    --section-pad-start: var(--space-13);
    --section-pad-end: var(--space-13);

    & .section-title {
        --section-title-width: 90%;

        @media (min-width: 768px) {
            --section-title-width: 50%;
        }
        @media (min-width: 1024px) {
            --section-title-width: 40%;
        }
    }
    /* b240181 */
    & .lead {
        --lead-width: 90%;
        margin-block-end: var(--space-6);

        @media (min-width: 768px) {
            --lead-width: 80%;
            margin-block-end: var(--space-11);
        }
        @media (min-width: 1024px) {
            --lead-width: 70%;
        }
    }
    /* 648127e: 2 columns and 20px gap on phones, 30px gap from md, 3 columns from lg. */
    & .gallery {
        --gallery-columns: 2;
        --gallery-gap: var(--space-4);
        --gallery-margin-end: var(--space-13);

        @media (min-width: 768px) {
            --gallery-gap: var(--space-6);
        }
        @media (min-width: 1024px) {
            --gallery-columns: 3;
        }
    }
}

/* Counters row (3bfde9e): centred, 20px gap, each counter 15% wide. */
.counters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    inline-size: 100%;
    margin-block-end: 51px;
    /* production row margin, unique */
    /* Deliberate deviation: a number wider than its column is clipped at the
    row instead of widening the page (production scrolls sideways on phones). */
    overflow-x: clip;

    @media (min-width: 768px) {
        flex-wrap: nowrap;
    }

    & > .counter {
        inline-size: 15%;
        max-inline-size: 15%;
    }
}

/* Copy and video columns (89046d0): stacked with 15px (phones) / 40px (md)
side padding, a row with an 80px gap from lg. */
.split {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    padding-inline: var(--space-3);

    @media (min-width: 768px) {
        padding-inline: var(--space-7);
    }
    @media (min-width: 1024px) {
        flex-direction: row;
        gap: 0 var(--space-11);
        padding-inline: 0;
    }
}
.split__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-inline-size: 0;

    @media (min-width: 1024px) {
        flex: 1 1 0;
    }
}
/* 6bce328: 50px below the copy while the columns are stacked. */
.split__text {
    margin-block-end: var(--space-8);

    @media (min-width: 1024px) {
        margin-block-end: 0;
    }
}
.split__caption {
    text-align: end;
}

/* CTA "Partnerstvo u realizaciji Vašeg proizvoda" (8df68f3 / 6228f9a):
.section--closing-flush (no side gutter, 30px below) around .cta-card--tall
(760px high, no padding, dots cover the card). */
.section--closing-flush {
    --wrap-pad: 0px;
    --section-space-end: var(--space-6);
}
.cta-card--tall {
    --cta-card-pad: 0px;
    --cta-card-min: 760px;
    /* production card min-height, unique */
    --cta-card-title-width: 90%;
    --cta-card-text-width: 90%;
    --cta-card-divider-space: var(--space-8);
    --cta-card-text-align: start;
    --dots-size: cover;
    --dots-opacity: 0.08;
    /* production overlay opacity, unique */
    --dots-attachment: scroll;

    @media (min-width: 768px) {
        --cta-card-title-width: 50%;
        --cta-card-text-width: 80%;
    }
    @media (min-width: 1024px) {
        --cta-card-title-width: 40%;
        --cta-card-text-width: 70%;
    }
}

/* ---------------------------------------------------------------------------
Proizvodi (production post-563)
--------------------------------------------------------------------------- */
/* Hero 551ceab, .page-hero--compact: phones padding 0 20px, md 0 50px, both
380px high with 50px below; from lg 100px 0, 500px high, 100px below. */
.page-hero--compact {
    --page-hero-min: 380px;
    /* production tablet/phone min-height, unique */
    --page-hero-pad: 0px;
    --page-hero-pad-inline-start: var(--space-4);
    --page-hero-pad-inline-end: var(--space-4);
    --page-hero-space-end: var(--space-8);

    @media (min-width: 768px) {
        --page-hero-pad-inline-start: var(--space-8);
        --page-hero-pad-inline-end: var(--space-8);
    }
    @media (min-width: 1024px) {
        --page-hero-min: 500px;
        --page-hero-pad: var(--space-13);
        --page-hero-pad-inline-start: 0px;
        --page-hero-pad-inline-end: 0px;
        --page-hero-space-end: var(--space-13);
    }
}
/* h1 3994695 keeps 80% at every width. */
.page-hero__title--kit {
    inline-size: 80%;
}
/* Text 019afad: 30px below on phones, none on tablets, 50px from lg. */
.page-hero--compact .page-hero__lead {
    @media (min-width: 768px) {
        margin-block-end: 0;
    }
    @media (min-width: 1024px) {
        margin-block-end: var(--space-8);
    }
}

/* Feature rows (a432265 … ed2a54c), .feature--spacious: stacked below lg with
15px (phones) / 30px (md) gutters and 30px under each image; from lg a row
with a 50px gap. */
.feature--spacious {
    --feature-gap: var(--space-8);
    --feature-row-gap: 0px;
    --feature-space-end: var(--space-12);

    @media (min-width: 768px) {
        --wrap-pad: var(--space-6);
    }
    @media (min-width: 1024px) {
        --wrap-pad: 0px;
    }
}
.feature--spacious .feature__image {
    margin-block-end: var(--space-6);

    @media (min-width: 1024px) {
        margin-block-end: 0;
    }
}
.feature--medium-card {
    --feature-card-width: 44%;
}
/* dbdaab1 card share */

/* Cards in these rows: 60px 30px padding on phones; text keeps 20px below it
only from md. */
.feature--spacious > .feature-card {
    --feature-card-pad: var(--space-9) var(--space-6);
    --feature-card-text-space: 0px;

    @media (min-width: 768px) {
        --feature-card-pad: var(--space-8);
    }
}
.feature--spacious > .feature-card:not(.feature-card--roomy) {
    @media (min-width: 768px) {
        --feature-card-text-space: var(--space-4);
    }
}
/* dbdaab1: 14px below the divider at every width. */
.feature-card--snug {
    --feature-card-divider-space: 14px;
    /* production divider margin, unique */
}

/* ---------------------------------------------------------------------------
Kontakt (production post-17): the row of contact circles (.bubbles /
.bubble, container 36b9297) and the map and form sections. The contact form
itself is the .form component above.
--------------------------------------------------------------------------- */
/* Hero 7a72231: 60px block padding from md; phones 50px top, no bottom padding,
50px below, dot group moved and enlarged. */
.page-hero--bubbles {
    --page-hero-pad: var(--space-8);
    --page-hero-space-end: var(--space-8);
    --dots-position: 66px 267px;
    /* production phone background position */
    --dots-size: 75% auto;
    padding-block-end: 0;

    & .page-hero__tagline {
        font-size: var(--fs-text);
    }
    /* Text 81d3391 stays 80% wide on phones too (the component default is 90%). */
    & .page-hero__text {
        --copy-width: 80%;
        margin-block-end: var(--space-10);
    }

    @media (min-width: 768px) {
        --page-hero-pad: var(--space-9);
        --page-hero-space-end: 0px;
        --dots-position: center center;
        --dots-size: 73% auto;
        padding-block-end: var(--page-hero-pad);

        & .page-hero__tagline {
            font-size: var(--fs-tagline);
        }
        & .page-hero__text {
            margin-block-end: var(--space-6);
        }
    }
}

/* Contact circles 36b9297: stacked (phones full width with 20px gutters,
tablets a centred 400px column), one bottom-aligned row from lg. */
.bubbles {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-self: stretch;
    padding-inline: var(--space-4);
    margin-block-end: var(--space-8);

    @media (min-width: 768px) {
        align-self: center;
        inline-size: 400px;
        /* production tablet column width */
        padding: var(--space-6) var(--space-8);
    }
    @media (min-width: 1024px) {
        flex-direction: row;
        align-items: flex-end;
        gap: var(--space-8) var(--space-10);
        align-self: stretch;
        inline-size: auto;
    }
}
/* One circle (ca842ca, 33024fc yellow; 17f927e ink): icon box and icon list. */
.bubble {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-block-size: 300px;
    /* production phone circle height */
    padding: var(--space-8);
    border-radius: 100%;
    /* production circle (ellipse) shape, unique */
    background-color: var(--color-brand);
    box-shadow: var(--shadow-bubble);

    & .icon-box__title {
        margin-block: 0.5rem 1rem;
        line-height: var(--lh-h3);
    }
    /* theme h3 margins, kit h3 line height */
    & .icon-list {
        font-family: var(--font-ui);
        font-size: var(--fs-text);
        font-weight: 300;
        line-height: var(--lh-text);
    }

    @media (min-width: 768px) {
        min-block-size: 290px;
        /* production circle height from tablets */
    }
    @media (min-width: 1024px) {
        flex: 1 1 0;
        min-inline-size: 0;
    }
}
.bubble--ink {
    --icon-box-color: var(--color-surface);
    border-radius: 50%;
    /* production ink circle radius, unique */
    background-color: var(--color-ink);
    box-shadow: none;
    color: var(--color-surface);
}

/* Map cd49e4f: 900px content from md (30px gutters to lg, 15px on phones),
70px above from lg, 30px below. */
.section--map {
    --section-space-end: var(--space-6);

    & .container {
        @media (min-width: 768px) {
            --wrap: 960px;
            /* 900px production content width + 2 x 30px gutter */
            --wrap-pad: var(--space-6);
        }
        @media (min-width: 1024px) {
            --wrap: 900px;
            /* production map content width, unique */
            --wrap-pad: 0px;
        }
    }

    @media (min-width: 1024px) {
        --section-pad-start: var(--space-10);
    }
}

/* Form section 22863ae: 600px content from md, 70px block padding; phones
50px top, no bottom padding, 30px start / 20px end gutters. */
.section--form {
    --section-pad-start: var(--space-8);

    & .container {
        --wrap-pad: var(--space-6) var(--space-4);

        @media (min-width: 768px) {
            --wrap: 600px;
            --wrap-pad: 0px;
        }
    }
    & .section__inner {
        --section-gap: 0px;
        --section-align: stretch;
        --section-divider-space: var(--space-10);
    }
    & .section-title {
        --section-title-width: 100%;
        margin-block-end: var(--space-3);
    }

    @media (min-width: 768px) {
        --section-pad-start: var(--space-10);
        --section-pad-end: var(--space-10);
    }
}

/* ---------------------------------------------------------------------------
Post "Здраво, свете!" (production post 1): the WordPress default comment
block, styled as Hello Elementor theme.css #comments. The headings keep the
kit h2 and the paragraphs the theme spacing from the base rules.
--------------------------------------------------------------------------- */
.comments__link {
    text-decoration: underline;
}
.comments__list {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    /* theme comment list size, scales with body text */
    list-style: none;
}
.comment {
    position: relative;
}
.comment__body {
    display: flex;
    flex-direction: column;
    padding-block: var(--space-6);
    border-block-end: 1px solid var(--color-line-light);
    /* theme comment rule */

    @media (min-width: 768px) {
        padding-inline-start: var(--space-9);
    }
}
.comment__meta {
    display: flex;
    justify-content: space-between;
    margin-block-end: var(--space-paragraph);
    /* theme paragraph rhythm */
}
.comment__author {
    @media (min-width: 768px) {
        line-height: 1;
    }
}
.comment__date {
    font-size: 11px;
    /* theme comment date size, unique */
    line-height: 1;
}

/* ---------------------------------------------------------------------------
Category archive "Некатегоризовано" (production category 1): one post
summary with the kit h2, styled as Hello Elementor theme.css .post rules.
--------------------------------------------------------------------------- */
/* Theme .post .entry-title a; the block selector outranks the .entry__content a prose underline. */
.archive-item .archive-item__link {
    text-decoration: none;
}