/**
 * FuranFlex brand override
 * Boje izvučene iz docs/furanflex_materijali/10-brand/brand-boje.css
 * Učitava se NAKON main.css — mijenja samo varijable teme, ne strukturu.
 */

:root {
  /* brand paleta */
  --ff-brand-blue: #235980;
  --ff-brand-blue-dark: #1B4463;
  --ff-brand-blue-deep: #065E7F;
  --ff-brand-orange: #F2621C;
  --ff-brand-orange-alt: #E96424;
  --ff-ventilflex-green: #80CC29;
  --ff-rainflex-blue: #76BFEB;
  --ff-rwv-red: #C8102E;
  --ff-accent-cyan: #3FA5C8;

  /* override tema (FlexBiz) varijabli globalnim brandom */
  --heading-color: var(--ff-brand-blue);
  --accent-color: var(--ff-brand-orange);
  --nav-hover-color: var(--ff-brand-orange);
  --nav-dropdown-background-color: var(--ff-brand-blue);
  --nav-dropdown-hover-color: var(--ff-brand-orange);

  /* Brošura (docs/furanflex_materijali) koristi Eurostile/Futura — komercijalni
     fontovi bez web-licence. Jost i Saira Condensed su im najbliže besplatne
     zamjene, vidi IMPLEMENTACIJA.md 2.6. Lato/Inter se više ne učitavaju. */
  --heading-font: "Jost", sans-serif;
  --nav-font: "Saira Condensed", sans-serif;
}

.dark-background {
  --background-color: #10222E;
  --heading-color: #ffffff;
  --surface-color: #16303F;
  --accent-color: var(--ff-brand-orange);
}

/* Saira Condensed sitno djeluje na 15px (uska condensed forma) — bump veći. */
@media (min-width: 1200px) {
  .navmenu a,
  .navmenu a:focus {
    font-size: 19px;
  }
}

/* Produkt-specifični modifikatori — koristiti kao klasu uz karticu proizvoda */
.ff-ventilflex { --ff-product-color: var(--ff-ventilflex-green); }
.ff-rainflex { --ff-product-color: var(--ff-rainflex-blue); }
.ff-rwv { --ff-product-color: var(--ff-rwv-red); }
.ff-furanflex { --ff-product-color: var(--ff-brand-blue); }

/* Hero: sekundarna slika je vitak, visok produkt render (400x1553) — bez ograničenja
   visine "height:auto" ga razvuče preko cijele hero sekcije */
.hero .media-stack .secondary {
  width: auto;
  max-width: 42%;
}

.hero .media-stack .secondary img {
  width: auto;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}

/* Advantage tabs (Prednosti/Primjena/Svojstva/Certifikati) koriste Bootstrapov
   default --bs-primary (#0d6efd) za aktivno stanje pilla — nikad nije bio vezan
   uz brand paletu, pa ostaje plav bez obzira na --accent-color/--heading-color override. */
.advantage-tabs .nav-link {
  color: var(--heading-color);
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.advantage-tabs .nav-link:hover {
  color: var(--ff-brand-orange);
  border-color: var(--ff-brand-orange);
}

.advantage-tabs .nav-link.active {
  background: var(--ff-brand-orange);
  border-color: var(--ff-brand-orange);
  color: #fff;
}

/* Svojstva tab (pane-properties) koristi goli Bootstrap .progress/.progress-bar
   (bez .skills omota koji već ima brand override) — ista Bootstrap-plava procurila i tu. */
#pane-properties .progress {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 8px;
  border-radius: 4px;
}

#pane-properties .progress-bar {
  background-color: var(--ff-brand-orange);
}

/* Kontakt sekcija: generični dotted-world-map iz teme zamijenjen NASA "Blue Marble"
   fotografijom (Apollo 17, 1972) — public domain, bez ograničenja korištenja. */
.contact {
  background-image: url("../img/bg/earth-blue-marble.webp");
}

/* Footer logo je preusko za logo + sitename u jednom redu — slaže se okomito */
.footer .footer-brand .logo {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 6px;
}

.footer .footer-brand .logo img {
  margin-right: 0;
}

.footer .footer-brand h1 .sitename,
.footer .footer-brand .logo .sitename {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  letter-spacing: 0.4px;
}

.manufacturer-credit {
  opacity: 0.75;
  transition: opacity 0.3s;
}

.manufacturer-credit:hover {
  opacity: 1;
}

.manufacturer-credit img {
  filter: grayscale(100%);
  transition: filter 0.3s;
}

.manufacturer-credit:hover img {
  filter: grayscale(0%);
}

/*--------------------------------------------------------------
# Products page (/proizvodi)
--------------------------------------------------------------*/
.composite .kicker {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 12px;
}

.composite .lead {
  font-size: 17px;
  color: var(--default-color);
}

.composite-note {
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ff-brand-blue), transparent 90%);
  color: var(--ff-brand-blue);
  font-weight: 600;
  font-size: 14px;
}

.product-card {
  --ff-product-color: var(--ff-brand-blue);
  height: 100%;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-top: 4px solid var(--ff-product-color);
  border-radius: 12px;
  padding: 28px 24px;
  transition: 0.3s;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--default-color), transparent 88%);
}

.product-media {
  text-align: center;
  margin-bottom: 16px;
}

.product-media img {
  max-height: 260px;
  width: auto;
}

.product-card h3 {
  font-size: 20px;
  color: var(--heading-color);
  margin-bottom: 4px;
}

.product-subtitle {
  font-weight: 600;
  color: var(--ff-product-color);
  margin-bottom: 14px;
  font-size: 14px;
}

.product-features {
  margin: 0;
}

.product-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 8px;
}

.product-features i {
  color: var(--ff-product-color);
  margin-top: 3px;
}

.tech-table-wrap h4 {
  color: var(--ff-brand-blue);
  font-size: 18px;
}

.tech-table thead th {
  background: var(--ff-brand-blue);
  color: #fff;
  font-weight: 600;
  vertical-align: middle;
}

.tech-table thead tr.tech-subrow th {
  background: var(--ff-brand-blue-dark);
  font-size: 13px;
  font-weight: 400;
}

.tech-table tbody th {
  background: color-mix(in srgb, var(--ff-brand-blue), transparent 94%);
  font-weight: 600;
  white-space: nowrap;
}

.tech-table td,
.tech-table th {
  font-size: 14px;
}

.tech-disclaimer {
  font-size: 13px;
}

/*--------------------------------------------------------------
# Installation page (/ugradnja)
--------------------------------------------------------------*/
.step-card {
  background: color-mix(in srgb, #fff, transparent 92%);
  border: 1px solid color-mix(in srgb, #fff, transparent 85%);
  border-radius: 14px;
  padding: 20px 12px 16px;
  height: 100%;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ff-brand-orange);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}

.step-media img {
  max-height: 160px;
  width: auto;
  margin: 0 auto 12px;
}

.step-card h5 {
  color: #fff;
  font-size: 14px;
  margin: 0;
}

.application-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 14px;
  padding: 20px;
  height: 100%;
}

.application-media {
  position: relative;
  flex: 0 0 55%;
}

.application-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.application-cutaway {
  position: absolute;
  right: -10px;
  bottom: -16px;
  width: 26%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--default-color), transparent 75%);
  border: 3px solid var(--surface-color);
  background: var(--ff-brand-blue);
  display: block;
}

.application-cutaway img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.application-cutaway .zoom-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ff-brand-blue), transparent 40%);
  color: #fff;
  opacity: 0;
  transition: 0.3s;
}

.application-cutaway:hover .zoom-badge {
  opacity: 1;
}

.application-body {
  flex: 1;
  min-width: 0;
}

.application-body h4 {
  color: var(--heading-color);
  font-size: 18px;
  margin-bottom: 6px;
}

.application-body p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

@media (max-width: 576px) {
  .application-card {
    flex-direction: column;
  }

  .application-media {
    flex-basis: auto;
    width: 100%;
  }
}

.tools-media figure img {
  max-height: 220px;
  width: auto;
}

.tools-media figcaption {
  font-size: 13px;
  font-weight: 600;
  color: var(--heading-color);
  margin-top: 8px;
}

/*--------------------------------------------------------------
# Reference & certifikati (tab Certifikati, footer)
--------------------------------------------------------------*/
.reference-showcase {
  padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

.reference-thumb {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  transition: 0.3s;
}

.reference-thumb:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--default-color), transparent 82%);
}

.reference-thumb img {
  width: 100%;
  display: block;
}

.reference-caption {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-top: 8px;
  margin-bottom: 0;
}

.reference-seal {
  max-height: 96px;
  width: auto;
}

.reference-mark {
  max-height: 48px;
  width: auto;
}

.reference-map {
  max-width: 100%;
  max-height: 240px;
}

.reference-flags {
  max-width: 100%;
  max-height: 90px;
}

.footer-marks img {
  opacity: 0.8;
}

.footer-legal-links a {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  text-decoration: none;
}

.footer-legal-links a:hover {
  color: var(--ff-brand-orange);
  text-decoration: underline;
}

/* Technology page: "Prednosti u odnosu..." cards are now links to /prednosti —
   strip default <a> color/underline so they keep the card's own text styling. */
.about .intro-card .feature-list .feature-item {
  color: inherit;
  text-decoration: none;
}

/*--------------------------------------------------------------
# Legal pages (/uvjeti-koristenja, /politika-privatnosti)
--------------------------------------------------------------*/
.legal-page {
  max-width: 860px;
  margin-inline: auto;
}

.legal-updated {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 24px;
}

.legal-lead {
  font-size: 17px;
  color: var(--default-color);
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

.legal-section {
  margin-bottom: 28px;
}

.legal-section h2 {
  font-size: 19px;
  color: var(--ff-brand-blue);
  margin-bottom: 8px;
}

.legal-section p {
  color: color-mix(in srgb, var(--default-color), transparent 12%);
  line-height: 1.75;
  margin: 0;
}

/*--------------------------------------------------------------
# Contact form — honeypot, reCAPTCHA note, flash/validation alerts
--------------------------------------------------------------*/
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.recaptcha-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: color-mix(in srgb, #fff, transparent 45%);
}

.recaptcha-note a {
  color: inherit;
  text-decoration: underline;
}

.contact .alert {
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 20px;
}

.contact .alert-success {
  background: color-mix(in srgb, #2ecc71, transparent 80%);
  color: #eafff2;
}

.contact .alert-danger {
  background: color-mix(in srgb, #e74c3c, transparent 80%);
  color: #ffecea;
}

.contact .form-control.is-invalid {
  border-color: #e74c3c;
}

/*--------------------------------------------------------------
# Contact page — Google map embed
--------------------------------------------------------------*/
.contact-map {
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #fff, transparent 85%);
  box-shadow: 0 16px 32px color-mix(in srgb, #000, transparent 75%);
}

.legal-disclaimer {
  margin-top: 40px;
  padding: 14px 18px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ff-brand-orange), transparent 92%);
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  font-size: 13px;
}

/*--------------------------------------------------------------
# Mobile overflow fixes
--------------------------------------------------------------*/
@media (max-width: 576px) {
  /* Logo (img + sitename) + social + locale switcher no longer fit one row */
  .header .social-links {
    display: none;
  }

  .header .locale-switcher {
    margin-left: 0.5rem !important;
    gap: 0.35rem !important;
  }

  .header .locale-switcher .locale-code {
    display: none;
  }

  /* Tools showcase (/ugradnja): two fixed-height figures side by side don't fit narrow screens */
  .tools-media {
    flex-wrap: wrap;
  }

  .tools-media figure img {
    max-height: 160px;
  }

  /* Mobile nav dropdown was stretched to inset:20px from the bottom, leaving a
     big empty white panel under the 7 short links — shrink it to fit content. */
  .navmenu ul {
    bottom: auto;
    max-height: calc(100vh - 90px);
  }
}

/*--------------------------------------------------------------
# Breadcrumb polish — same underline-sweep hover language as the footer
--------------------------------------------------------------*/

.page-title .breadcrumbs .breadcrumb {
  --bs-breadcrumb-divider: "\203A"; /* › instead of the bare default "/" */
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  font-size: 1.05em;
  padding-right: 0.7rem;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item a {
  display: inline-block;
  background-image: linear-gradient(var(--ff-brand-orange), var(--ff-brand-orange));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: background-size 0.25s ease, color 0.25s ease;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item a:hover {
  background-size: 100% 1px;
}

.page-title .breadcrumbs .breadcrumb .breadcrumb-item.active {
  font-weight: 600;
}

/*--------------------------------------------------------------
# Generic bordered brand button — for secondary "see more" CTAs that
# aren't inside a scoped component (theme's .link-more/.btn-accent only
# work inside their own section).
--------------------------------------------------------------*/
.btn-outline-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ff-brand-blue), transparent 70%);
  color: var(--heading-color);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn-outline-brand:hover {
  background: var(--ff-brand-orange);
  border-color: var(--ff-brand-orange);
  color: #fff;
}

/*--------------------------------------------------------------
# Homepage "Prednosti" preview — cert-item badges are real links now,
# styled as pills matching the advantage-tabs / footer button language.
--------------------------------------------------------------*/
.skills .skills-header .certifications {
  gap: 0.75rem;
}

.skills .skills-header .certifications .cert-item {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ff-brand-blue), transparent 75%);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.skills .skills-header .certifications .cert-item:hover {
  background: var(--ff-brand-orange);
  border-color: var(--ff-brand-orange);
  color: #fff;
}

.skills .skills-header .certifications .cert-item:hover i {
  color: #fff;
}

/*--------------------------------------------------------------
# Footer polish (2026 refresh)
--------------------------------------------------------------*/

/* Slim brand gradient replaces the flat 1px top border for a bit more identity */
.footer {
  border-top: none;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ff-brand-blue), var(--ff-brand-orange));
}

/* Column headings get a short accent rule instead of just sitting on their own */
.footer .footer-links-grid h5,
.footer .footer-cta h5 {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 22px;
}

.footer .footer-links-grid h5::after,
.footer .footer-cta h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--ff-brand-orange);
}

/* Replace the dated "arrow slides in + text jumps right" hover with a quiet
   underline sweep — no layout shift, no leftover glyph. */
.footer .footer-links-grid ul li a {
  padding-left: 0;
  display: inline-block;
  background-image: linear-gradient(var(--ff-brand-orange), var(--ff-brand-orange));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: background-size 0.25s ease, color 0.25s ease;
}

.footer .footer-links-grid ul li a::before {
  content: none;
}

.footer .footer-links-grid ul li a:hover,
.footer .footer-links-grid ul li a:focus-visible {
  color: var(--ff-brand-orange);
  padding-left: 0;
  background-size: 100% 1px;
}

/* "Get in touch" becomes a small elevated card instead of floating text, so it
   reads as the footer's primary action rather than an afterthought. */
.footer .footer-cta {
  padding: 24px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ff-brand-blue), transparent 94%);
  border: 1px solid color-mix(in srgb, var(--ff-brand-blue), transparent 85%);
}

.footer .footer-cta .btn-outline {
  width: 100%;
  text-align: center;
}

/* CE/UL marks get a matching chip treatment instead of floating logos */
.footer-marks {
  padding: 6px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

.footer-marks img {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.footer-marks img:hover {
  opacity: 1;
}

/* Legal links get a visible separator instead of relying on gap alone */
.footer-legal-links a + a {
  position: relative;
  padding-left: 15px;
}

.footer-legal-links a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: color-mix(in srgb, var(--default-color), transparent 75%);
}

/* Keyboard focus parity with :hover across the footer */
.footer .social-links a:focus-visible,
.footer .footer-cta .btn-outline:focus-visible,
.footer .manufacturer-credit:focus-visible {
  outline: 2px solid var(--ff-brand-orange);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .footer .footer-links-grid h5::after,
  .footer .footer-cta h5::after {
    left: 50%;
    transform: translateX(-50%);
  }
}