/**
 * ECT Navigation CSS - Isolated & Production Ready
 * 
 * Klasy: .ect-header, .ect-nav, .ect-menu (z ect- prefix)
 * Zero konfliktów z Hello Elementor lub innymi theme'ami!
 * 
 * CSS Custom Properties + Modern CSS
 */

/* ============================================
   CSS CUSTOM PROPERTIES (zmienne)
   ============================================ */
:root {
  /* Kolory */
  --ect-color-primary: #bf4949;
  --ect-color-dark: #040707;
  --ect-color-border: #2c3030;
  --ect-color-bg: #fff;
  --ect-color-bg-light: #f9f9f9;
  --ect-color-hover: #ffdfdc;

  /* Spacing */
  --ect-gap-xs: 8px;
  --ect-gap-sm: 12px;
  --ect-gap-md: 16px;
  --ect-gap-lg: 24px;
  --ect-gap-xl: 32px;

  /* Padding */
  --ect-pad-branding: 30px;
  --ect-pad-nav: 24px 26px;
  --ect-pad-submenu: 24px 32px;
  --ect-pad-item: 8px 24px;

  /* Border */
  --ect-border-width: 3px;
  --ect-border-style: solid;
  --ect-border-color: var(--ect-color-border);

  /* Typography */
  --ect-font-family: "Montserrat", sans-serif;
  --ect-font-weight-regular: 500;
  --ect-font-weight-bold: 700;

  /* Sizes */
  --ect-header-logo-width: 246px;
  --ect-header-logo-width-mobile: 100px;
  --ect-scroll-max-height: 85vh;

  /* Z-index */
  --ect-z-header: 999;

  /* Responsive breakpoints */
  --ect-bp-mobile: 767px;
  --ect-bp-tablet: 1024px;
  --ect-bp-desktop: 1390px;
}

/* ============================================
   ECT HEADER (Navigation Container)
   ============================================ */
.ect-header {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0;
  padding: 0;
  border: var(--ect-border-width) var(--ect-border-style) var(--ect-color-border);
  position: relative;
  z-index: var(--ect-z-header);
  font-family: var(--ect-font-family);
}

/* ============================================
   ECT BRANDING (Logo)
   ============================================ */
.ect-branding {
  display: flex;
  align-items: center;
  padding: 0 var(--ect-pad-branding);
  border-right: var(--ect-border-width) var(--ect-border-style) var(--ect-color-border);
  line-height: 0;
  width: var(--ect-header-logo-width);
  flex-shrink: 0;
}

.ect-branding img,
.ect-branding svg {
  display: block;
}

@media (max-width: var(--ect-bp-mobile)) {
  .ect-branding {
    width: var(--ect-header-logo-width-mobile);
    padding: 0 20px;
  }
}

/* ============================================
   ECT SLOGAN (Tagline)
   ============================================ */
.ect-slogan {
  font-size: 14px;
  font-weight: var(--ect-font-weight-regular);
  white-space: nowrap;
}

@media (max-width: var(--ect-bp-tablet)) {
  .ect-slogan {
    display: none;
  }
}

/* ============================================
   ECT MAIN NAVIGATION WRAPPER
   ============================================ */
.ect-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding: var(--ect-pad-nav);
  gap: var(--ect-gap-md);
  flex-direction: row-reverse;
  position: relative;
}

/* ============================================
   ECT NAV MENU (Primary list)
   ============================================ */
.ect-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--ect-gap-sm);
  flex-wrap: nowrap;
}

.ect-menu > li {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: var(--ect-font-weight-regular);
}

@media (min-width: var(--ect-bp-desktop)) {
  .ect-menu > li:nth-last-child(3) {
    margin-right: var(--ect-gap-sm);
  }
}

.ect-menu a {
  text-decoration: none;
  font-weight: var(--ect-font-weight-regular);
  white-space: nowrap;
  color: var(--ect-color-dark);
  transition: all 0.2s ease-out;
}

.ect-menu a::before {
  content: "/";
  font-weight: var(--ect-font-weight-bold);
  padding-right: 4px;
  color: var(--ect-color-primary);
  margin-right: 4px;
}

.ect-menu a:hover {
  color: var(--ect-color-primary);
}

/* Mobile menu toggle on click */
@media (max-width: var(--ect-bp-mobile)) {
  .ect-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: -3px;
    gap: var(--ect-gap-md);
    padding: var(--ect-pad-nav);
    width: calc(100% + 6px);
    background: var(--ect-color-bg);
    border-width: 0 var(--ect-border-width) var(--ect-border-width) var(--ect-border-width);
    border-style: var(--ect-border-style);
    border-color: var(--ect-color-border);
  }

  .ect-menu > li {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .ect-menu > li a {
    position: relative;
    line-height: 1.5em;
  }
}

/* ============================================
   ECT MENU ICON (Chevron/Arrow)
   ============================================ */
.ect-menu-icon {
  display: flex;
  align-items: center;
  line-height: 0;
  margin-left: 4px;
  padding: 4px 0 4px 4px;
  flex-shrink: 0;
}

.ect-menu-icon svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease-out;
}

.ect-menu-icon.ect-mobile-icon {
  display: none;
}

.ect-menu-icon.ect-desktop-icon {
  display: inline-flex;
}

@media (max-width: var(--ect-bp-mobile)) {
  .ect-menu-icon.ect-mobile-icon {
    display: inline-flex;
    transform: rotate(90deg);
  }

  .ect-menu-icon.ect-desktop-icon {
    display: none;
  }
}

.ect-open .ect-menu-icon svg {
  transform: rotate(-180deg);
}

/* ============================================
   ECT SUBMENU CONTAINER (Wrapper)
   ============================================ */
.ect-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  max-height: var(--ect-scroll-max-height);
  overflow: visible;
}

.ect-submenu .ect-submenu {
  top: 0;
  left: 100%;
  width: 100%;
}

.ect-submenu ul {
  list-style: none;
  margin: 0;
  padding: var(--ect-pad-submenu);
  background: var(--ect-color-bg);
  width: var(--ect-submenu-width, 100%);
  border: var(--ect-border-width) var(--ect-border-style) var(--ect-color-dark);
  border-top: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ect-gap-sm);
  max-height: var(--ect-scroll-max-height);
  overflow-y: auto;
  align-content: flex-start;
}

/* Scrollbar styling - Chrome/Safari/Edge */
.ect-submenu ul::-webkit-scrollbar {
  width: 8px;
}

.ect-submenu ul::-webkit-scrollbar-track {
  background: var(--ect-color-bg-light);
  border-left: 1px solid #e0e0e0;
}

.ect-submenu ul::-webkit-scrollbar-thumb {
  background: var(--ect-color-primary);
  border-radius: 4px;
}

.ect-submenu ul::-webkit-scrollbar-thumb:hover {
  background: #a53d3d;
}

/* Scrollbar styling - Firefox */
.ect-submenu ul {
  scrollbar-width: thin;
  scrollbar-color: var(--ect-color-primary) var(--ect-color-bg-light);
}

.ect-submenu li {
  width: 100%;
  position: relative;
}

.ect-submenu li:nth-child(-n + 2) {
  max-width: 50%;
}

.ect-submenu li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  padding: var(--ect-pad-item);
  line-height: 1.5em;
  background: var(--ect-color-bg-light);
  color: var(--ect-color-dark);
  text-decoration: none;
  font-weight: var(--ect-font-weight-regular);
  transition: background-color 0.2s ease-out;
  flex-wrap: nowrap;
}

.ect-submenu li a::before {
  content: "/";
  font-weight: var(--ect-font-weight-bold);
  padding-right: 4px;
  color: var(--ect-color-primary);
  margin-right: 4px;
  order: -1;
}

.ect-submenu li a:hover {
  background: var(--ect-color-hover);
  color: var(--ect-color-dark);
}

.ect-submenu li a svg {
  position: absolute;
  right: var(--ect-gap-lg);
}

/* Show on hover (desktop) */
.ect-menu li:hover > .ect-submenu {
  display: block;
}

/* Mobile styles */
@media (max-width: var(--ect-bp-mobile)) {
  .ect-submenu {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-height: none;
    overflow: visible;
    border: none;
    padding: 0;
    background: transparent;
  }

  .ect-submenu ul {
    flex-direction: column;
    gap: var(--ect-gap-md);
    padding: var(--ect-gap-md) 0 0 var(--ect-gap-md);
    border: none;
    max-height: none;
    overflow: visible;
    width: 100%;
  }

  .ect-submenu li {
    max-width: 100%;
  }

  .ect-submenu li a {
    background: none;
    position: initial;
    padding: 0;
  }

  .ect-submenu li a svg {
    position: relative;
    right: auto;
    transform: rotate(90deg);
  }
}

/* ============================================
   ECT BOXED MENU ITEM (Call-to-action buttons)
   ============================================ */
.ect-boxed-item a {
  font-size: 14px;
  font-weight: var(--ect-font-weight-bold);
  text-transform: uppercase;
  padding: 16px var(--ect-gap-lg);
  border: var(--ect-border-width) var(--ect-border-style) var(--ect-color-dark);
  transition: all 0.2s ease-out;
}

.ect-boxed-item a::before {
  content: ".";
  font-weight: 900;
  padding-right: 0;
  margin-right: var(--ect-gap-sm);
}

.ect-boxed-item a:hover {
  background: var(--ect-color-dark);
  color: var(--ect-color-bg);
}

@media (max-width: var(--ect-bp-tablet)) {
  .ect-boxed-item {
    display: none !important;
  }
}

/* ============================================
   ECT TOP HEADER (Promotional bar)
   ============================================ */
.ect-top-header {
  display: none;
  gap: var(--ect-gap-md);
  padding: 10px var(--ect-gap-md);
  background: var(--ect-color-primary);
  justify-content: flex-end;
  font-family: var(--ect-font-family);
}

.ect-top-header .ect-promo-item a {
  display: inline-block;
  font-size: 14px;
  font-weight: var(--ect-font-weight-bold);
  text-transform: uppercase;
  padding: 10px 18px;
  background: var(--ect-color-bg);
  border: var(--ect-border-width) var(--ect-border-style) var(--ect-color-dark);
  transition: all 0.2s ease-out;
  color: var(--ect-color-dark);
}

.ect-top-header .ect-promo-item a::before {
  content: ".";
  font-weight: 900;
  color: var(--ect-color-primary);
  margin-right: 4px;
  padding-right: 0;
}

.ect-top-header .ect-promo-item a:hover {
  background: var(--ect-color-dark);
  color: var(--ect-color-bg);
}

@media (min-width: var(--ect-bp-tablet)) and (max-width: var(--ect-bp-desktop)) {
  .ect-top-header {
    display: flex;
  }
}

/* ============================================
   ECT MENU TOGGLE BUTTON (Mobile hamburger)
   ============================================ */
.ect-menu-toggle {
  display: none;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  line-height: 0;
  transition: all 0.2s ease-out;
}

.ect-menu-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--ect-color-dark);
}

.ect-menu-toggle .ect-close-icon {
  display: none;
}

@media (max-width: var(--ect-bp-mobile)) {
  .ect-menu-toggle {
    display: block;
  }

  .ect-menu-toggle[aria-expanded="true"] .ect-open-icon {
    display: none;
  }

  .ect-menu-toggle[aria-expanded="true"] .ect-close-icon {
    display: block;
  }
}

/* ============================================
   ECT MOBILE TOGGLE STATE
   ============================================ */
.ect-nav.ect-toggled .ect-menu {
  display: flex;
}

.ect-nav.ect-toggled .ect-menu li.ect-open > a > .ect-menu-icon svg {
  transform: rotate(-90deg);
}

.ect-nav.ect-toggled .ect-menu li.ect-open .ect-submenu {
  display: block;
}

.ect-nav.ect-toggled .ect-submenu li.ect-open > .ect-submenu {
  display: block;
}

.ect-nav.ect-toggled .ect-submenu li.ect-open > a > * {
  transform: rotate(-90deg);
}

.ect-nav.ect-toggled .ect-submenu li > a > * {
  transform: rotate(90deg);
}

.ect-nav.ect-toggled .ect-menu > li.ect-boxed-item a {
  padding: 10px 24px;
  width: 100%;
  text-align: center;
}

/* ============================================
   ECT ACCESSIBILITY & UTILS
   ============================================ */
.ect-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ect-color-dark);
  color: var(--ect-color-bg);
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.ect-skip-link:focus {
  top: 0;
}

/* Focus states for keyboard navigation */
.ect-menu a:focus-visible,
.ect-boxed-item a:focus-visible,
.ect-menu-toggle:focus-visible {
  outline: 2px solid var(--ect-color-primary);
  outline-offset: 2px;
}