/*
 Theme Name:   nectarweb
 Theme URI:    https://nectarweb.pl
 Description:  Zapylamy w internety!
 Author:       B@rtas
 Author URI:   https://nectarweb.pl
 Template:     generatepress
 Version:      1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
html, body,
button, input, select, textarea,
p, span, a, li, dt, dd,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300 !important;
}

/* CZARNE #111111 tło górnego paska menu / nagłówka */
#masthead,
#masthead .inside-header,
#masthead .main-navigation,
#masthead .inside-navigation,
.main-navigation.stuckElement,
.main-navigation.stuckElement .inside-navigation {
    background-color: #111111 !important;
}



.hero-video-section {
    width: 100%;
    display: block;        /* nie potrzebujemy już centrującego flexa */
    padding: 0rem 0rem;
    box-sizing: border-box;
    text-align: left !important; /* wymusza wyrównanie do lewej */
}

.hero-video {
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: 0 !important;          /* usuwa centrowanie */
}
/* Kolor domyślny linków w menu */
#primary-menu .menu > li > a,
#primary-menu .sub-menu li > a {
  color: #888888 !important;
}

/* Kolor linków po najechaniu */
#primary-menu .menu > li:hover > a,
#primary-menu .menu > li > a:hover,
#primary-menu .menu > li.sfHover > a,
#primary-menu .sub-menu li > a:hover {
  color: #f3f3f3 !important;
}

/* Kolor aktywnego linka (aktualna strona) */
#primary-menu .menu > li.current-menu-item > a,
#primary-menu .menu > li.current_page_item > a,
#primary-menu .menu > li.current-menu-ancestor > a,
#primary-menu .menu > li.current-menu-parent > a {
  color: #ffffff !important;
}


/* SUBMENU – KOLOR AKTYWNEGO LINKA NA MOBILE */
@media (max-width: 768px) {
  /* aktywny element w submenu */
  .main-navigation .sub-menu li.current-menu-item > a,
  .main-navigation .sub-menu li.current_page_item > a,
  .main-navigation .sub-menu li.current-menu-ancestor > a,
  .main-navigation .sub-menu li a.is-active {
    background-color: #333333 !important;
    color: #ffffff !important;
  }
}




/* Domyślny kolor ikony koszyka */
.menu-bar-items .cart-contents.shopping-bag svg path {
  fill: #888888 !important;
}

/* Kolor ikony koszyka po najechaniu */
.menu-bar-items .cart-contents.shopping-bag:hover svg path,
.menu-bar-items .menu-bar-item:hover .cart-contents.shopping-bag svg path {
  fill: #ffffff !important;
}
.menu-bar-items .cart-contents.shopping-bag {
  color: #888888 !important;
}

.menu-bar-items .cart-contents.shopping-bag:hover,
.menu-bar-items .menu-bar-item:hover .cart-contents.shopping-bag {
  color: #ffffff !important;
}
/* Ikona hamburgera w menu mobilnym – kolor na biało */
.menu-toggle .gp-icon svg path {
  fill: #ffffff !important;
}

/* (opcjonalnie) jeśli motyw steruje jeszcze kolorem przez color: */
.menu-toggle .gp-icon svg {
  color: #ffffff !important;
}
/* Klasa ogólna dla przycisków */
.bb-button,
.bb-button:visited {
  display: inline-block;
  background-color: #111111;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Hover / focus / active */
.bb-button:hover,
.bb-button:focus,
.bb-button:active {
  background-color: #ffffff;
  color: #111111;
  border: 1px solid #ffffff;
  text-decoration: none;
}
/* Logo w nagłówku mobilnym – sztywna szerokość 200px */
@media (max-width: 768px) {
  .site-logo.mobile-header-logo img.is-logo-image {
    width: 200px !important;
    height: auto !important;
    max-width: 200px !important;
  }
}
/* Mobilna belka menu – stała wysokość 80px */
@media (max-width: 768px) {

  /* kontener nawigacji */
  .inside-navigation.grid-container.grid-parent,
  .main-navigation .inside-navigation {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* gdy motyw dodaje klasy sticky przy scrollu */
  .main-navigation.is_stuck .inside-navigation,
  .navigation-stick .inside-navigation {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }

  /* logo w belce – żeby ładnie się mieściło */
  .site-logo.mobile-header-logo img.is-logo-image {
    width: 200px !important;
    height: auto !important;
    max-width: 200px !important;
  }
}
/* Desktop – stały „margines” 20px z lewej dla belki nawigacji,
   także w stanie sticky podczas scrollowania */
/* Yoast breadcrumbs – kolor i rozmiar fontu */
.yoast-breadcrumbs,
.yoast-breadcrumbs span,
.yoast-breadcrumbs a {
    color: #888888 !important;
    font-size: 1rem !important; /* desktop domyślnie */
}

/* Mobile – zmniejszamy font (np. do 768px szerokości) */
@media (max-width: 768px) {
    .yoast-breadcrumbs,
    .yoast-breadcrumbs span,
    .yoast-breadcrumbs a {
        font-size: 0.7rem !important;
    }
}
/* Teksty na wersji mobilnej – wszystkie elementy oprócz nagłówków */
@media (max-width: 768px) {
  body,
  p,
  li,
  a,
  span,
  label,
  input,
  textarea,
  button,
  small {
    font-size: 0.875rem;   /* ok. 14px */
    line-height: 1.6;
  }
}
.copy-box {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem 1.5rem;
  border-radius: 8px;
  background: #111111;
  color: #ffffff;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  overflow: hidden;
}

.copy-box__label {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}

.copy-box__btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #444444;
  background: #222222;
  color: #ffffff;
  font-size: 0.75rem;
  cursor: pointer;
}

.copy-box__btn:hover {
  background: #333333;
}

.copy-box__content {
  margin: 0;
  font-size: 0.85rem;
  white-space: pre-wrap;
  line-height: 1.5;
  overflow-x: auto;
}
/* Domyślnie (mobile) */
.warning {
  width: 4rem !important;
  height: 4rem !important;
  display: block;      /* żeby SVG nie rozpychało się jak inline */
}

/* Desktop – od ok. 768px w górę zmieniamy rozmiar */
@media (min-width: 768px) {
  .warning {
    width: 8rem !important;
    height: 8rem !important;
  }
}
/* Wyłączenie klikania w akordeonie wewnątrz sekcji .faq-no-click */
.faq-no-click .gb-accordion__toggle,
.faq-no-click .gb-accordion__item {
  pointer-events: none;   /* blokuje kliknięcia / tapnięcia */
  cursor: default;        /* zwykły kursor zamiast "łapki" */
}

/* Opcjonalnie – usunięcie efektów hover, jeśli jakieś masz */
.faq-no-click .gb-accordion__toggle:hover {
  transform: none;
  box-shadow: none;
  text-decoration: none;
}

/* desktop only */

@media (max-width:767px) {
    .gbp-button--primary {
        font-size: 0.8rem
    }
}

/* PRIMARY BUTTON – wymuszenie kolorów */
a.gbp-button--primary,
a.gbp-button--primary:visited,
.gbp-button--primary {
    background-color: #222222 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 300 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    border: 1px solid #ffffff !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.25s ease-in-out !important;
}

/* wszystko w środku przycisku dziedziczy kolor */
a.gbp-button--primary *,
.gbp-button--primary *,
a.gbp-button--primary svg,
a.gbp-button--primary svg path,
.gbp-button--primary svg,
.gbp-button--primary svg path {
    color: inherit !important;
    fill: currentColor !important;
}

/* hover / focus / active */
a.gbp-button--primary:hover,
a.gbp-button--primary:focus,
a.gbp-button--primary:active,
.gbp-button--primary:hover,
.gbp-button--primary:focus,
.gbp-button--primary:active {
    background-color: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #222222 !important;
    text-decoration: none !important;
}

/* mobile */
@media (max-width: 767px) {
    a.gbp-button--primary,
    .gbp-button--primary {
        font-size: 0.8rem !important;
    }
}
/* Pełna szerokość tylko dla wybranych stron */
body.bb-fullwidth-page .site,
body.bb-fullwidth-page .site-content,
body.bb-fullwidth-page .inside-site,
body.bb-fullwidth-page .content-area,
body.bb-fullwidth-page .inside-article,
body.bb-fullwidth-page .grid-container,
body.bb-fullwidth-page .container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Usunięcie górnego odstępu tylko na tych stronach */
body.bb-fullwidth-page .site-content,
body.bb-fullwidth-page .inside-article {
    padding-top: 0 !important;
}
/* =========================================
   PEŁNA SZEROKOŚĆ NAGŁÓWKA I MENU
   NA WSZYSTKICH PODSTRONACH
========================================= */

/* Główny header na pełną szerokość */
#masthead.site-header,
#masthead .inside-header,
#site-navigation,
#site-navigation .inside-navigation,
#mobile-menu-control-wrapper,
#mobile-menu-control-wrapper .inside-navigation {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Usunięcie ograniczeń kontenera z GeneratePress */
#masthead .inside-header.grid-container,
#site-navigation .inside-navigation.grid-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Mobile – ciaśniejsze wewnętrzne odstępy */
@media (max-width: 768px) {
    #masthead .inside-header.grid-container,
    #site-navigation .inside-navigation.grid-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}
/* =========================================
   MENU – KOLORY GLOBALNE
========================================= */

/* Tło całego nagłówka i menu */
#masthead,
#masthead .inside-header,
.main-navigation,
.main-navigation .inside-navigation,
#site-navigation,
#site-navigation .inside-navigation {
    background-color: #222222 !important;
}

/* =========================
   LINKI – DOMYŚLNE
========================= */
#primary-menu .menu > li > a,
#primary-menu .sub-menu li > a,
.main-navigation a {
    color: #ffffff !important;
}

/* =========================
   HOVER – ODWRÓCENIE KOLORÓW
========================= */
#primary-menu .menu > li > a:hover,
#primary-menu .menu > li:hover > a,
#primary-menu .menu > li.sfHover > a,
#primary-menu .sub-menu li > a:hover {
    background-color: #ffffff !important;
    color: #222222 !important;
}

/* =========================
   SUBMENU – TŁO
========================= */
#primary-menu .sub-menu {
    background-color: #222222 !important;
}

/* Elementy submenu */
#primary-menu .sub-menu li a {
    background-color: #222222 !important;
    color: #ffffff !important;
}

/* Hover submenu */
#primary-menu .sub-menu li a:hover {
    background-color: #ffffff !important;
    color: #222222 !important;
}

/* =========================
   AKTYWNA STRONA
========================= */
#primary-menu .menu > li.current-menu-item > a,
#primary-menu .menu > li.current_page_item > a,
#primary-menu .menu > li.current-menu-ancestor > a {
    background-color: #ffffff !important;
    color: #222222 !important;
}

/* =========================
   MOBILE MENU
========================= */
@media (max-width: 768px) {

    .main-navigation,
    .main-navigation .inside-navigation,
    .main-navigation ul,
    .main-navigation .sub-menu {
        background-color: #222222 !important;
    }

    .main-navigation a {
        color: #ffffff !important;
    }

    .main-navigation a:hover {
        background-color: #ffffff !important;
        color: #222222 !important;
    }

    /* aktywny element mobile */
    .main-navigation .current-menu-item > a {
        background-color: #ffffff !important;
        color: #222222 !important;
    }
}
/* =========================================
   DESKTOP – SUBMENU O SZEROKOŚCI
   DOPASOWANEJ DO NAJDŁUŻSZEGO ELEMENTU
========================================= */
@media (min-width: 769px) {

    /* samo rozwijane submenu */
    #primary-menu .sub-menu {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    /* każdy element submenu nie ogranicza szerokości */
    #primary-menu .sub-menu li {
        width: auto !important;
        min-width: 100% !important;
    }

    /* link w submenu dopasowuje się do treści */
    #primary-menu .sub-menu li a {
        display: block !important;
        width: auto !important;
        white-space: nowrap !important;
    }
}
/* =========================================
   MENU DO PRAWEJ – DESKTOP
========================================= */
/* =========================================
   DESKTOP – HEADER I MENU WYRÓWNANE DO PRAWEJ
========================================= */
@media (min-width: 769px) {

    /* cały header */
    #masthead .inside-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* logo / branding */
    #masthead .site-branding {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* wrapper głównej nawigacji */
    #site-navigation.main-navigation {
        flex: 1 1 auto !important;
        margin-left: auto !important;
        width: auto !important;
    }

    /* najważniejszy kontener menu */
    #site-navigation .inside-navigation {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* wrapper ul */
    #site-navigation .main-nav {
        margin-left: auto !important;
    }

    /* samo menu */
    #site-navigation .main-nav > ul,
    #site-navigation .main-nav > ul.menu,
    #site-navigation .main-nav > ul.sf-menu {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* elementy po prawej, np. koszyk */
    #site-navigation .menu-bar-items {
        display: flex !important;
        align-items: center !important;
        margin-left: 20px !important;
        flex: 0 0 auto !important;
    }
}
/* =========================================
   BUTTON – ZAKTUALIZUJ KOSZYK (WOOCOMMERCE)
========================================= */

/* podstawowy wygląd */
button.button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #222222 !important;
    text-transform: uppercase;
    transition: all 0.25s ease-in-out;
}

/* hover – odwrócenie kolorów */
button.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
    background-color: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #222222 !important;
}

/* disabled (np. przycisk "Zaktualizuj koszyk") */
button.button:disabled,
.woocommerce button.button:disabled {
    background-color: #444444 !important;
    color: #aaaaaa !important;
    border: 1px solid #444444 !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* hover NIE działa na disabled */
button.button:disabled:hover,
.woocommerce button.button:disabled:hover {
    background-color: #444444 !important;
    color: #aaaaaa !important;
}
.out-of-stock-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #AB2F30;
    color: #ffffff;
    padding: 6px 10px;
    font-size: 16px;
    font-weight: 900;
    z-index: 9;
    border-radius: 3px;
}

/* === FIX: mobile menu nad wszystkim === */
@media (max-width: 768px) {

  /* cały header / nawigacja */
  #masthead,
  .main-navigation,
  .inside-navigation {
    position: relative;
    z-index: 9999 !important;
  }

  /* kontener menu */
  #mobile-menu.main-nav {
    position: absolute;
    top: 70px; /* dopasowane do Twojej wysokości belki */
    left: 0;
    width: 100%;
    z-index: 99999 !important;
  }

  /* gdy menu jest rozwinięte */
  .main-navigation.toggled .main-nav {
    display: block;
  }

  /* dodatkowe zabezpieczenie */
  body {
    position: relative;
    z-index: 1;
  }
}