/* NDE Tech — www.ndetech.hr

   Lifted out of the single <style> block that used to live in index.html: the
   site is now three pages (en / es / hr) and duplicating four hundred lines of
   CSS in each of them would guarantee they drift apart.

   Colours are custom properties so the dark theme can be a palette swap rather
   than a second set of rules. Same mechanism as www.avento.hr, so the two sites
   behave identically. */

:root {
    /* Brand — the green from the logo */
    --brand:        #2f5348;
    --brand-dark:   #234037;
    --brand-light:  #e8efec;
    --accent:       #7fa89b;

    /* Surfaces and text */
    --paper:        #f7f8f7;
    --card:         #ffffff;
    --surface:      #ffffff;   /* header */
    --border:       #e3e8e6;
    --card-border:  #e6ebe9;
    --ink:          #24312d;
    --ink-soft:     #55655f;
    --title:        #234037;   /* section + card headings */
    --link:         #2f5348;

    /* Hero, band and footer keep their own tokens: the hero and footer are dark
       in both themes, the band is not. */
    --band:         #e8efec;
    --hero-bg:      #234037;
    --hero-veil:    rgba(35, 64, 55, .92);
    --hero-veil-2:  rgba(35, 64, 55, .55);
    --hero-veil-3:  rgba(35, 64, 55, .25);
    --hero-text:    #dbe6e2;
    --cta-bg:       #ffffff;
    --cta-ink:      #234037;
    --footer-bg:    #234037;
    --footer-ink:   #cfdcd7;
    --footer-legal: #9db4ac;

    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 6px 24px rgba(36, 49, 45, .09);

    color-scheme: light;
}

/* --- Dark theme -----------------------------------------------------------
   An explicit choice in the "public_theme" cookie wins; with no choice made the
   page follows the operating system and keeps following it live. js/theme.js
   stamps data-theme on <html> before the first paint, so the attribute is what
   normally applies and there is no flash; the media query is the JavaScript-off
   fallback and is written so an explicit data-theme="light" still beats it.

   The two blocks are deliberately identical — plain CSS cannot share one
   declaration block between an attribute selector and a media query, and a
   preprocessor would mean a build step this site does not have. */
:root[data-theme="dark"] {
    --brand:        #8fbcae;
    --brand-dark:   #a6ccc0;
    --brand-light:  #1e2a26;
    --accent:       #5f8a7c;

    --paper:        #14191a;
    --card:         #1c2224;
    --surface:      #191f20;
    --border:       #2b3436;
    --card-border:  #2b3436;
    --ink:          #e4eae7;
    --ink-soft:     #a2b1ac;
    --title:        #cfe0d9;
    --link:         #8fbcae;

    --band:         #191f20;
    --hero-bg:      #16211d;
    --hero-veil:    rgba(14, 25, 21, .93);
    --hero-veil-2:  rgba(14, 25, 21, .62);
    --hero-veil-3:  rgba(14, 25, 21, .32);
    --hero-text:    #c3d4ce;
    --cta-bg:       #8fbcae;
    --cta-ink:      #10201b;
    --footer-bg:    #10171a;
    --footer-ink:   #b9c8c3;
    --footer-legal: #7d908a;

    --shadow: 0 6px 24px rgba(0, 0, 0, .45);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand:        #8fbcae;
        --brand-dark:   #a6ccc0;
        --brand-light:  #1e2a26;
        --accent:       #5f8a7c;

        --paper:        #14191a;
        --card:         #1c2224;
        --surface:      #191f20;
        --border:       #2b3436;
        --card-border:  #2b3436;
        --ink:          #e4eae7;
        --ink-soft:     #a2b1ac;
        --title:        #cfe0d9;
        --link:         #8fbcae;

        --band:         #191f20;
        --hero-bg:      #16211d;
        --hero-veil:    rgba(14, 25, 21, .93);
        --hero-veil-2:  rgba(14, 25, 21, .62);
        --hero-veil-3:  rgba(14, 25, 21, .32);
        --hero-text:    #c3d4ce;
        --cta-bg:       #8fbcae;
        --cta-ink:      #10201b;
        --footer-bg:    #10171a;
        --footer-ink:   #b9c8c3;
        --footer-legal: #7d908a;

        --shadow: 0 6px 24px rgba(0, 0, 0, .45);

        color-scheme: dark;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 24px;
    max-width: 1080px;
    margin: 0 auto;
}

.header-inner .brand img {
    height: 56px;
    width: auto;
    max-width: none;
}

/* The logo is dark ink on transparent, so on a dark header it all but
   disappears. Flatten it to white rather than shipping a second file. */
:root[data-theme="dark"] .header-inner .brand img { filter: brightness(0) invert(1) opacity(.92); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .header-inner .brand img { filter: brightness(0) invert(1) opacity(.92); }
}

.brand { flex-shrink: 0; }

.header-actions { display: flex; align-items: center; gap: 4px; }

nav { display: flex; gap: 8px; }

nav a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    padding: 8px 14px;
    border-radius: 8px;
    transition: background .15s ease;
}

nav a:hover { background: var(--brand-light); }

/* ---------- Language picker ----------
   Each language is a real page (/es/, /hr/) rather than a runtime switch, so
   these are ordinary links and the menu still works with JavaScript off — the
   script only opens and closes the list. */
.lang-picker { position: relative; }

.lang-btn, .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; margin-left: 2px;
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--ink-soft); cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.lang-btn:hover, .theme-toggle:hover {
    color: var(--brand); border-color: var(--brand); background: var(--brand-light);
}

.theme-toggle { margin-left: 6px; }
.theme-toggle svg { width: 18px; height: 18px; }

/* The button carries the current language's flag, so it needs none of the right
   margin the menu entries use. */
.lang-btn .flag { margin-right: 0; }

.lang-menu {
    display: none;
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    min-width: 168px; padding: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.lang-menu.is-open { display: block; }

.lang-menu a {
    display: flex; align-items: center;
    padding: .5rem .7rem; border-radius: 7px;
    text-decoration: none; font-size: .94rem; color: var(--ink-soft); white-space: nowrap;
}

.lang-menu a:hover { background: var(--brand-light); color: var(--ink); }
.lang-menu a.is-current { color: var(--brand); font-weight: 650; }

/* Flags are SVG (lipis/flag-icons, MIT), self-hosted — the same set the Avento
   sites use, so the family looks identical. */
.flag {
    display: inline-block; width: 20px; height: 15px; margin-right: 10px;
    vertical-align: middle; flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.flag-us { background-image: url(../assets/flags/us.svg); }
.flag-es { background-image: url(../assets/flags/es.svg); }
.flag-hr { background-image: url(../assets/flags/hr.svg); }

/* ---------- Light/dark toggle ----------
   Two icons live in the button and CSS shows the one matching the ACTIVE theme
   — sun in light, moon in dark, the convention the aRento and Avento pages use.
   Driven by the same attribute + media-query pair as the palette, so it stays
   correct with JavaScript disabled. */
.theme-toggle .icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-dark  { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-dark  { display: block; }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    color: #fff;
    overflow: hidden;
    background: var(--hero-bg);
}

.hero img.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, var(--hero-veil) 0%, var(--hero-veil-2) 55%, var(--hero-veil-3) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 96px 24px 104px;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.01em;
    max-width: 18ch;
}

.hero p {
    margin-top: 18px;
    max-width: 56ch;
    font-size: 1.08rem;
    color: var(--hero-text);
}

.hero .cta {
    display: inline-block;
    margin-top: 32px;
    background: var(--cta-bg);
    color: var(--cta-ink);
    font-weight: 700;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 999px;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}

.hero .cta:hover { transform: translateY(-2px); }

/* ---------- Sections ---------- */
section { padding: 72px 0; }

.section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--title);
    margin-bottom: 8px;
}

.section-lead {
    color: var(--ink-soft);
    max-width: 62ch;
    margin-bottom: 40px;
}

/* Feature rows (image + text) */
.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.feature + .feature { margin-top: 64px; }

.feature img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.feature h3 {
    font-size: 1.45rem;
    color: var(--title);
    margin-bottom: 12px;
}

.feature p { color: var(--ink-soft); }

.feature:nth-child(even) .feature-media { order: 2; }

/* Crossfade slideshows */
.slideshow {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.slideshow img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .9s ease;
}

.slideshow img.active { opacity: 1; }

/* Scan variant: dark canvas, no cropping */
.slideshow.scans { background: #041d33; }

.slideshow.scans img {
    object-fit: contain;
    padding: 14px;
    box-sizing: border-box;
}

/* Cards */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}

.card h3 {
    color: var(--title);
    font-size: 1.15rem;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--accent);
    display: inline-block;
}

.card p { color: var(--ink-soft); font-size: .97rem; }

.card a { color: var(--link); font-weight: 600; }

.band { background: var(--band); }

/* ---------- Contact ----------
   The site is static and has no backend of its own, so the form posts to the
   aRento server's anonymous contact endpoint — the same one www.avento.hr uses.
   See js/ndetech.js. */
.section-contact { text-align: center; }
.contact-inner { max-width: 620px; margin: 0 auto; }
.section-contact .section-lead { margin: 0 auto 2.2rem; }

.contact-form { text-align: left; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .88rem; font-weight: 650; color: var(--ink-soft); }

.field input, .field textarea {
    font: inherit; font-size: .98rem; color: var(--ink);
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .7rem .85rem;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Smaller to start, and it grows with the text (see grow() in the js).
   overflow hidden so no scrollbar appears while it is still growing;
   the script turns it back on only past the height ceiling. */
.field textarea { resize: vertical; min-height: 92px; overflow-y: hidden; }

.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Only mark a field red once the browser has actually judged it — :invalid
   alone paints every required field red before anything has been typed. */
.field input:user-invalid, .field textarea:user-invalid { border-color: #c0392b; }

/* Honeypot. Off-screen rather than display:none — bots skip hidden inputs. */
.field-hp {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

.form-actions { margin: 6px 0 0; }

.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%;
    font: inherit; font-weight: 700; font-size: 1rem;
    padding: .85rem 1.4rem;
    border: 0; border-radius: var(--radius-sm);
    background: var(--brand); color: #fff;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

/* In dark mode the brand green is the LIGHT colour, so the label has to flip. */
:root[data-theme="dark"] .btn-primary { color: #10201b; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-primary { color: #10201b; }
}

.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
button[disabled] { opacity: .6; cursor: progress; transform: none; }

.form-status { margin: 14px 0 0; font-size: .95rem; min-height: 1.4em; }
.form-status.is-ok { color: #1e8449; }
.form-status.is-error { color: #c0392b; }
:root[data-theme="dark"] .form-status.is-ok { color: #6fcf97; }
:root[data-theme="dark"] .form-status.is-error { color: #f1948a; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-status.is-ok { color: #6fcf97; }
    :root:not([data-theme="light"]) .form-status.is-error { color: #f1948a; }
}

/* ---------- 404 ----------
   Reached by a rewrite, so the address bar keeps the URL that was asked for and
   every path in 404.html must be ABSOLUTE — a relative one would resolve against
   that address and 404 in turn. */
.notfound { text-align: center; padding: 96px 0 104px; }
.notfound .eyebrow {
    font-size: .85rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.notfound h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--title); }
.notfound p { color: var(--ink-soft); max-width: 52ch; margin: 12px auto 0; }

/* The 404 is the one place needing a pair of side-by-side buttons; .btn-primary
   is the contact form's full-width submit and would stack them. */
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

.actions a {
    display: inline-block; padding: 11px 22px;
    border-radius: var(--radius-sm);
    font-weight: 700; text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.actions a:hover { transform: translateY(-1px); }
.actions .primary { background: var(--brand); color: #fff; }
.actions .ghost { border: 1px solid var(--border); color: var(--brand); }
.actions .ghost:hover { background: var(--brand-light); }

:root[data-theme="dark"] .actions .primary { color: #10201b; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .actions .primary { color: #10201b; }
}

/* Language links along the bottom of the 404 page, in place of the picker. */
.footer-langs { display: flex; gap: 6px 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.footer-langs a { border-bottom: 0; font-weight: 600; }
.footer-langs a:hover { border-bottom: 1px solid var(--accent); }

/* ---------- Footer ---------- */
footer {
    background: var(--footer-bg);
    color: var(--footer-ink);
    padding: 32px 0;
    text-align: center;
    font-size: .92rem;
}

footer strong { color: #fff; font-size: 1.02rem; }

footer a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
}

footer a:hover { border-bottom-color: #fff; }

/* Company particulars.
   Zakon o trgovačkim društvima čl. 21 wants the registered name, the seat, the
   court and MBS it is entered under, and the share capital on the company's own
   web pages — so the footer carries the register entry (from
   sudreg.pravosudje.hr, MBS 081611352) rather than a lone address line. The
   registered name is a court-register string: "NDE Technology d.o.o. za usluge"
   must appear verbatim in every language.

   avento.hr sets the same particulars as a label/value column, but that panel
   lives inside a section with room to spare. Here they are in the footer, where
   a six-row grid dwarfed everything above it, so the values run inline on one
   line separated by "·" — three short lines instead of eight. */
footer .legal-name {
    display: block;
    margin-top: 1px;
    font-size: .84rem;
    color: var(--footer-legal);
}

footer address {
    font-style: normal;
    margin-top: 8px;
}

footer .legal {
    margin-top: 8px;
    font-size: .8rem;
    color: var(--footer-legal);
    letter-spacing: .02em;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .header-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 24px;
        padding: 12px 16px;
    }
    .header-inner .brand img { height: 44px; }
    .header-actions { flex-wrap: wrap; justify-content: center; }
    .feature { grid-template-columns: 1fr; gap: 24px; }
    .feature:nth-child(even) .feature-media { order: 0; }
    .cards { grid-template-columns: 1fr; }
    .hero-content { padding: 72px 24px; }
    section { padding: 56px 0; }
    .field-row { grid-template-columns: 1fr; }
    .lang-menu { right: -4px; max-height: 60vh; overflow-y: auto; }
}

/* --- Back to top and nav scroll spy ---------------------------------------
   Both ported from avento.hr. The button appears after roughly one screen of
   scrolling; the nav highlights the section currently being read.
   ------------------------------------------------------------------------- */
.to-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 40;
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease,
                background-color .15s ease, box-shadow .15s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
/* Scoped to .is-visible so the hover lift cannot fight the transform that
   slides the button in. */
.to-top.is-visible:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
}
.to-top svg { width: 20px; height: 20px; }

header nav a.is-active {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
}
