/* ============================================================
   navbar.css — single source of truth for the site navbar
   ============================================================
   States:
     - body.page-has-hero + .navbar.absolute:not(.scrolled)  → transparent (white text, white chevron)
     - body.page-has-hero + .navbar.absolute.scrolled         → white bg (dark text, dark chevron)
     - body:not(.page-has-hero) .navbar.absolute              → always white bg (dark text, dark chevron)

   Real-world nav link class variants:
     - .nav-link          (index.html, uslugi/*.html, blog.html)
     - .nav-link-dark     (o-nas.html, kontakt.html, polityka-prywatnosci.html, uslugi.html, blog-posts/*.html)
   Both covered in every hover/color selector.

   Fixes included:
     Bug 1 — chevron arrow via URL-encoded SVG background-image (three color variants)
     Bug 2 — CTA "Skontaktuj się" hover bulletproof (high specificity + !important, JS removes data-w-id)
     Bug 3 — orange hover #E8461E everywhere, specificity (0,5,1) beats Webflow inline (0,3,0)
     Bug 4 — dropdown padding stable (20px, single source), margin-left stable on links
     Bug 5 — hover works on both .nav-link and .nav-link-dark (mix across pages)
   ============================================================ */

/* ========== BASE ========== */
.navbar {
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== STATE: HERO (transparent, white text) — only on index ========== */
body.page-has-hero .navbar.absolute:not(.scrolled) {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Hero-state text color — white on both class variants.
   DESKTOP-ONLY: on mobile the hamburger menu panel is white and needs dark
   text for readability (the hero-state white navbar does not apply when
   menu is collapsed into a hamburger panel). */
@media screen and (min-width: 992px) {
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .nav-link,
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .nav-link-dark,
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .nav-dropdown-toggle,
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .nav-item-title,
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .nav-item-title-2,
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .nav-dropdown-toggle p,
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-phone-link {
    color: #ffffff !important;
  }
  body.page-has-hero .navbar.absolute:not(.scrolled) .header-logo {
    filter: brightness(0) invert(1) !important;
  }
}

/* ========== STATE: SCROLLED (on hero pages) / DEFAULT (on non-hero pages) — white bg, dark text ========== */
.navbar.absolute.scrolled,
body:not(.page-has-hero) .navbar.absolute {
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Dark text — specificity (0,4,1) with .nav-menu, beats inline rules (0,3,0) */
.navbar.absolute.scrolled .nav-menu .nav-link,
.navbar.absolute.scrolled .nav-menu .nav-link-dark,
.navbar.absolute.scrolled .nav-menu .nav-dropdown-toggle,
.navbar.absolute.scrolled .nav-menu .nav-item-title,
.navbar.absolute.scrolled .nav-menu .nav-item-title-2,
.navbar.absolute.scrolled .nav-menu .nav-dropdown-toggle p,
body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-link,
body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-link-dark,
body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-dropdown-toggle,
body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-item-title,
body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-item-title-2,
body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-dropdown-toggle p {
  color: #000b1f !important;
}

/* Phone link color + logo filter in scrolled / non-hero state */
.navbar.absolute.scrolled .nav-phone-link,
body:not(.page-has-hero) .navbar.absolute .nav-phone-link {
  color: #000b1f !important;
}
.navbar.absolute.scrolled .header-logo,
body:not(.page-has-hero) .navbar.absolute .header-logo {
  filter: none !important;
}

/* ========== LOGO — no color hover, subtle opacity only ========== */
.navbar .brand,
.navbar .brand-tablet {
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar .brand:hover,
.navbar .brand-tablet:hover {
  opacity: 0.85;
}
.navbar .brand:hover .header-logo,
.navbar .brand-tablet:hover .header-logo {
  color: inherit !important;
  text-decoration: none !important;
}

/* ========== DESKTOP (≥ 992px) — chevron + hover + dropdown animation ========== */
@media screen and (min-width: 992px) {

  /* ----- Chevron arrow (Bug 1 fix: URL-encoded SVG background-image) ----- */
  .nav-dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .nav-dropdown-toggle .nav-dropdown-icon {
    display: none !important;
  }
  .nav-dropdown-toggle::after {
    content: "";
    display: inline-block !important;
    width: 10px;
    height: 7px;
    margin-left: 8px;
    /* DEFAULT chevron: dark (#000b1f) — for scrolled and non-hero pages */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%207'%3E%3Cpath%20d='M1%201.5L5%205.5L9%201.5'%20stroke='%23000b1f'%20stroke-width='1.8'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* WHITE chevron — hero state only */
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-dropdown-toggle::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%207'%3E%3Cpath%20d='M1%201.5L5%205.5L9%201.5'%20stroke='%23ffffff'%20stroke-width='1.8'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }
  /* ORANGE chevron on hover — every page, every state */
  .navbar.absolute .nav-menu .nav-dropdown-toggle:hover::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%207'%3E%3Cpath%20d='M1%201.5L5%205.5L9%201.5'%20stroke='%23E8461E'%20stroke-width='1.8'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }
  /* Rotation when dropdown open */
  .w-dropdown.w--open .nav-dropdown-toggle::after {
    transform: rotate(180deg) !important;
  }

  /* ----- Transition for color on nav links (both class variants) ----- */
  .navbar .nav-link,
  .navbar .nav-link-dark,
  .navbar .nav-dropdown-toggle,
  .navbar .nav-dropdown-toggle .nav-item-title,
  .navbar .nav-dropdown-toggle .nav-item-title-2,
  .navbar .nav-dropdown-toggle p {
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ----- Hero-state hover for .nav-link (index.html, top of page) -----
     Specificity (0,6,1): body.page-has-hero + .navbar.absolute:not(.scrolled)
     + .nav-menu + .nav-link + .w-nav-link + :hover — beats any Webflow default. */
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .nav-link:hover,
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .w-nav-link:hover,
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .nav-link.w-nav-link:hover {
    color: #E8461E !important;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ----- Hero-state hover for dropdown toggle "Usługi" ----- */
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .nav-dropdown-toggle:hover,
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .nav-dropdown-toggle:hover p,
  body.page-has-hero .navbar.absolute:not(.scrolled) .nav-menu .nav-dropdown-toggle:hover * {
    color: #E8461E !important;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ----- Hover color — orange #E8461E everywhere (Bug 3 + Bug 5) -----
     Specificity (0,5,1) with .navbar.absolute.scrolled/:not(.scrolled) + .nav-menu + :hover
     beats Webflow inline (0,3,0) .navbar.absolute .nav-link-dark{color:var(--black)!important}. */
  .navbar.absolute .nav-menu .nav-link:hover,
  .navbar.absolute .nav-menu .nav-link-dark:hover,
  .navbar.absolute .nav-menu .nav-link-dark.w-nav-link:hover,
  .navbar.absolute .nav-menu .nav-link-dark.w--current:hover,
  .navbar.absolute .nav-menu .nav-link.w--current:hover,
  .navbar.absolute .nav-menu .nav-item-title:hover,
  .navbar.absolute .nav-menu .nav-item-title-2:hover,
  .navbar.absolute .nav-menu .nav-dropdown-toggle:hover,
  .navbar.absolute .nav-menu .nav-dropdown-toggle:hover .nav-item-title,
  .navbar.absolute .nav-menu .nav-dropdown-toggle:hover .nav-item-title-2,
  .navbar.absolute .nav-menu .nav-dropdown-toggle:hover p,
  .navbar.absolute.scrolled .nav-menu .nav-link:hover,
  .navbar.absolute.scrolled .nav-menu .nav-link-dark:hover,
  .navbar.absolute.scrolled .nav-menu .nav-link-dark.w-nav-link:hover,
  .navbar.absolute.scrolled .nav-menu .nav-link-dark.w--current:hover,
  .navbar.absolute.scrolled .nav-menu .nav-item-title:hover,
  .navbar.absolute.scrolled .nav-menu .nav-item-title-2:hover,
  .navbar.absolute.scrolled .nav-menu .nav-dropdown-toggle:hover,
  .navbar.absolute.scrolled .nav-menu .nav-dropdown-toggle:hover .nav-item-title,
  .navbar.absolute.scrolled .nav-menu .nav-dropdown-toggle:hover .nav-item-title-2,
  .navbar.absolute.scrolled .nav-menu .nav-dropdown-toggle:hover p,
  body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-link:hover,
  body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-link-dark:hover,
  body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-link-dark.w-nav-link:hover,
  body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-link-dark.w--current:hover,
  body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-item-title:hover,
  body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-item-title-2:hover,
  body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-dropdown-toggle:hover,
  body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-dropdown-toggle:hover .nav-item-title,
  body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-dropdown-toggle:hover .nav-item-title-2,
  body:not(.page-has-hero) .navbar.absolute .nav-menu .nav-dropdown-toggle:hover p {
    color: #E8461E !important;
    opacity: 1;
  }

  /* ----- Dropdown link items (Bug 4: stable margin, color-only transition) ----- */
  .navbar .nav-dropdown-link-2,
  .navbar .nav-dropdown-link-2-copy,
  .navbar .nav-dropdown-link-2:hover,
  .navbar .nav-dropdown-link-2-copy:hover {
    margin-left: 0 !important;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .navbar .nav-dropdown-link-2:hover,
  .navbar .nav-dropdown-link-2-copy:hover {
    color: #E8461E !important;
  }
  .navbar .nav-dropdown-link-line-2 {
    display: none !important;
  }

  /* ----- Dropdown list (Bug 4: stable padding single source + opacity-only animation) ----- */
  .navbar .nav-dropdown-list-2.w-dropdown-list,
  .navbar .nav-dropdown-list-2.w-dropdown-list.w--open {
    width: auto !important;
    min-width: 260px !important;
    padding: 20px !important;
  }
  .navbar .nav-dropdown-list-2.w-dropdown-list {
    display: block !important;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0ms linear 200ms;
  }
  .navbar .nav-dropdown-list-2.w-dropdown-list.w--open,
  .navbar .w-dropdown.w--open .nav-dropdown-list-2.w-dropdown-list {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition:
      opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0ms linear 0ms;
  }
  .navbar .nav-dropdown-link-wrapper {
    overflow: visible !important;
  }
}

/* ========== CTA BUTTON "Skontaktuj się" (Bug 2 fix) ==========
   High specificity (0,4,1) with `.w-inline-block` beats Webflow default.
   Combined with JS removing `data-w-id` (prevents IX2 from injecting inline styles).
   ============================================================ */
.navbar .seondary-button-with-icon,
.navbar .seondary-button-with-icon.red,
.navbar .seondary-button-with-icon.red.w-inline-block {
  background-color: #E8461E !important;
  border-color: #E8461E !important;
  opacity: 1 !important;
  transition:
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.navbar .seondary-button-with-icon:hover,
.navbar .seondary-button-with-icon.red:hover,
.navbar .seondary-button-with-icon.red.w-inline-block:hover {
  background-color: #D13A15 !important;
  border-color: #D13A15 !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 14px rgba(233, 65, 18, 0.28);
  opacity: 1 !important;
}
/* CTA text — white always, all class variants, all states */
.navbar .seondary-button-with-icon .button-text,
.navbar .seondary-button-with-icon .button-text.pat,
.navbar .seondary-button-with-icon .button-text.color,
.navbar .seondary-button-with-icon .button-text.pat.color,
.navbar .seondary-button-with-icon.red .button-text,
.navbar .seondary-button-with-icon.red .button-text.pat,
.navbar .seondary-button-with-icon.red .button-text.color,
.navbar .seondary-button-with-icon.red .button-text.pat.color,
.navbar .seondary-button-with-icon.red.w-inline-block .button-text,
.navbar .seondary-button-with-icon.red.w-inline-block .button-text.pat,
.navbar .seondary-button-with-icon.red.w-inline-block .button-text.color,
.navbar .seondary-button-with-icon.red.w-inline-block .button-text.pat.color,
.navbar .seondary-button-with-icon:hover .button-text,
.navbar .seondary-button-with-icon:hover .button-text.pat,
.navbar .seondary-button-with-icon:hover .button-text.color,
.navbar .seondary-button-with-icon:hover .button-text.pat.color,
.navbar .seondary-button-with-icon.red:hover .button-text,
.navbar .seondary-button-with-icon.red:hover .button-text.pat,
.navbar .seondary-button-with-icon.red:hover .button-text.color,
.navbar .seondary-button-with-icon.red:hover .button-text.pat.color,
.navbar .seondary-button-with-icon.red.w-inline-block:hover .button-text,
.navbar .seondary-button-with-icon.red.w-inline-block:hover .button-text.pat,
.navbar .seondary-button-with-icon.red.w-inline-block:hover .button-text.color,
.navbar .seondary-button-with-icon.red.w-inline-block:hover .button-text.pat.color {
  color: #ffffff !important;
}
/* CTA arrow (→) — white always, no IX2 swap */
.navbar .seondary-button-with-icon .arrow-button {
  opacity: 1 !important;
  filter: brightness(0) invert(1) !important;
}
.navbar .seondary-button-with-icon .arrow-button._2-arrow {
  opacity: 0 !important;
  display: none !important;
}

/* ========== MOBILE HAMBURGER — force dark readable text ==========
   Defensive override: regardless of navbar state (hero / scrolled / non-hero)
   the mobile hamburger panel has a white background (set by inline style
   `body.nav-fallback .nav-menu.menu-open {background:#fff!important}`),
   so text inside must be dark.
   Specificity `body.nav-fallback` + `.nav-menu.menu-open` + `.nav-link`
   = (0,4,0) is enough to beat the Webflow base rules; !important
   ensures we win against any inline injection too.
   ============================================================ */
@media screen and (max-width: 991px) {
  body.nav-fallback .nav-menu.menu-open .nav-link,
  body.nav-fallback .nav-menu.menu-open .nav-link-dark,
  body.nav-fallback .nav-menu.menu-open .nav-dropdown-toggle,
  body.nav-fallback .nav-menu.menu-open .nav-dropdown-toggle p,
  body.nav-fallback .nav-menu.menu-open .nav-item-title,
  body.nav-fallback .nav-menu.menu-open .nav-item-title-2,
  body.nav-fallback .nav-menu.menu-open .nav-phone-link,
  body.nav-fallback .nav-menu.menu-open .nav-phone-link-mobile {
    color: #000b1f !important;
  }
  /* Logo in hamburger panel — always dark (no invert filter) */
  body.nav-fallback .nav-menu.menu-open .header-logo,
  body.nav-fallback .nav-menu.menu-open .brand .header-logo,
  body.nav-fallback .nav-menu.menu-open .brand-tablet .header-logo {
    filter: none !important;
  }
  /* Hover state in mobile menu — orange accent */
  body.nav-fallback .nav-menu.menu-open .nav-link:hover,
  body.nav-fallback .nav-menu.menu-open .nav-link-dark:hover,
  body.nav-fallback .nav-menu.menu-open .nav-dropdown-toggle:hover,
  body.nav-fallback .nav-menu.menu-open .nav-dropdown-toggle:hover p,
  body.nav-fallback .nav-menu.menu-open .nav-dropdown-link-2:hover,
  body.nav-fallback .nav-menu.menu-open .nav-dropdown-link-2-copy:hover {
    color: #E8461E !important;
  }
}

/* w-nav-overlay on mobile: no dimming, no click interception.
   Menu panel provides its own white background — overlay serves no purpose.
   Override Webflow's inline style (background: rgba(0,0,0,0.5)) with !important. */
@media screen and (max-width: 991px) {
  .w-nav-overlay {
    pointer-events: none !important;
    background: transparent !important;
    background-color: transparent !important;
  }
}