/*
Theme Name: OceanWP Child
Template: oceanwp
*/

/* =========================================================================
   1. STYLE WŁASNE B3D (Layout i Przyciski)
   ========================================================================= */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid currentcolor !important;
    color: #333;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: transparent !important;
    opacity: 0.7;
}

.marginesy20 { 
    padding: 20px;
}
.zaokraglone-20px img { border-radius: 20px; }
.owal {
    border-radius: 20px;
    overflow: hidden;
    padding: 20px !important;
}

.centrum {
    max-width: 1200px;
    width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}

.kontener-600 {
    min-height: 600px;
    display: block;
    width: 100%;
}
.owalbox20 {
    padding: 20px !important;
    border-radius: 20px !important;
    overflow: hidden;
}

/* =========================================================================
   2. FIX DLA SEKCJI PRZYKLEJONYCH DO GÓRY (Landing Page / Kolumny)
   ========================================================================= */
/* Usunięcie domyślnych marginesów z kontenerów OceanWP */
.page:has(.sekcja-top) #content-wrap,
.page:has(.sekcja-top) #primary,
.page:has(.sekcja-top) #content,
.page:has(.sekcja-top) article.single-page-article {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Usunięcie marginesu z samej sekcji bloku Gutenberga */
.sekcja-top {
    margin-top: 0 !important;
}

/* Reset systemowego odstępu 50px (dla CLS) tylko na stronach z sekcją na górze */
@media (min-width: 960px) {
    .page:has(.sekcja-top) #main {
        padding-top: 0 !important;
    }
}

/* =========================================================================
   3. STICKY HEADER & OCHRONA PRZED CLS NA DESKTOPIE
   ========================================================================= */
@media (min-width: 960px) {
    /* Połączone ustawienia wizualne i zabezpieczenia przed CLS dla nagłówka */
    #site-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: -105px !important; /* Chowamy logo, zostawiamy menu */
        min-height: 145px !important; /* Systemowa ochrona przed skokiem CLS */
        z-index: 9999 !important;
        background-color: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
    /* Globalny odstęp łatający dziurę po sticky header (zapobiega TBT/CLS) */
    #main {
        padding-top: 50px !important; 
    }
    
    /* Poprawka pod pasek administratora WP */
    .admin-bar #site-header {
        top: -73px !important;
    }
}

/* Uniwersalne ustawienie 13px dla linków i spanów w menu OceanWP */
:is(.dropdown-menu, .fs-dropdown-menu) > li > :is(a, span), 
.oceanwp-mobile-menu-icon a {
    font-size: 13px;
}

/* =========================================================================
   4. SYSTEMOWA OCHRONA PRZED CLS (Obrazki)
   ========================================================================= */
/* Globalna zasada dla wszystkich obrazów we wpisach i na stronach */
.entry-content img, .elementor-widget-image img {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto; 
}

/* Globalna zasada dla wszystkich obrazów z wymiarami w HTML */
.entry-content img[width][height], 
.elementor-widget-image img[width][height] {
    aspect-ratio: attr(width) / attr(height);
    height: auto !important;
    max-width: 100% !important;
}

/* Punktowy FIX dla drukarki (Największy winowajca CLS 0,209) */
.wp-image-14771 {
    aspect-ratio: 456 / 608 !important;
    max-width: 456px !important;
    display: block;
}

/* =========================================================================
   5. TABELE I LISTY B3D (Design specyfikacji technicznej)
   ========================================================================= */
.b3d-specs-container {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
  font-family: 'Barlow', sans-serif;
  border: 1px solid #eaeaea;
}

.b3d-tech-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  text-align: left;
  margin: 0;
}

.b3d-tech-table th, 
.b3d-tech-table td {
  padding: 18px 24px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}

.b3d-tech-table th {
  width: 45%;
  background-color: #fcfcfc;
  color: #0c2e3c;
  font-weight: 600;
  font-size: 17px;
}

.b3d-tech-table td {
  color: #333333;
  font-size: 17px;
  line-height: 1.6;
}

.b3d-tech-table td small {
  color: #777777;
  font-size: 14px;
}

.b3d-materials-list {
  margin-top: 8px;
  margin-bottom: 0;
  padding-left: 20px;
}

.b3d-materials-list li {
  margin-bottom: 4px;
}

.b3d-tech-table tr:last-child th,
.b3d-tech-table tr:last-child td {
  border-bottom: none;
}

@media screen and (min-width: 769px) {
  .b3d-tech-table tbody tr:hover td,
  .b3d-tech-table tbody tr:hover th {
    background-color: #f5f8fc;
    transition: background-color 0.3s ease;
  }
}

@media screen and (max-width: 768px) {
  .b3d-tech-table, 
  .b3d-tech-table tbody, 
  .b3d-tech-table tr, 
  .b3d-tech-table th, 
  .b3d-tech-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  
  .b3d-tech-table tr {
    border-bottom: 1px solid #e5e5e5;
  }
  
  .b3d-tech-table th {
    background-color: transparent;
    border-bottom: none;
    padding-bottom: 4px;
    color: #0c2e3c;
  }
  
  .b3d-tech-table td {
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 20px;
  }
}

.b3d-icon-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.b3d-icon-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}

.b3d-icon-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230c2e3c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

/* =========================================================================
   6. CHIRURGICZNA TELEPORTACJA IKON NA PRAWĄ STRONĘ
   ========================================================================= */
.top-header-inner {
    position: relative !important;
}

.b3d-socials-teleport {
    position: absolute;
    right: 0;
    width: 200px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    z-index: 100;
}

.b3d-socials-teleport a {
    display: block;
    width: 26px;
    height: 26px;
    transition: transform 0.2s ease;
}

.b3d-socials-teleport a:hover {
    transform: scale(1.15);
}

.b3d-socials-teleport svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 959px) {
    .b3d-socials-teleport {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        justify-content: center;
        margin: 15px 0;
    }
    .top-col.logo-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* =========================================================================
   7. Wyrownanie kolumny - przyciski na dole
   ========================================================================= */
/* Wymusza na głównym rzędzie, by wszystkie jego dzieci (kolumny) miały równą wysokość */
.kontener-karty {
    align-items: stretch !important;
}

/* Zmienia każdą kolumnę w pionowy flexbox, na każdym rozmiarze ekranu */
.kontener-karty .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
}

/* Magiczna sprężyna - wypycha przyciski na sam dół */
.kontener-karty .wp-block-buttons {
    margin-top: auto !important;
    padding-top: 20px; /* Minimalny oddech nad przyciskiem */
}

/* =========================================================================
   7. KAFLE USŁUG B3D - KOMPLETNY KOD CSS
   ========================================================================= */

/* --- 1. BAZA (Wszystkie urządzenia - w tym stacjonarka) --- */
.kontener-karty {
    /* Zabezpiecza stacjonarkę przed przyklejeniem do krawędzi monitora */
    padding-left: 20px !important; 
    padding-right: 20px !important;
}

.kontener-karty .wp-block-column {
    /* Wewnętrzny oddech kafelka (żeby tekst nie dotykał ramki) */
    padding: 30px 20px !important; 
    border-radius: 8px !important;
    /* Płynność animacji (niezbędne, by hover działał miękko na desktopie) */
    transition: all 0.3s ease-in-out !important; 
}

/* --- 2. EFEKT NAJECHANIA (Tylko dla stacjonarki / urządzeń z myszką) --- */
@media (hover: hover) {
    .kontener-karty .wp-block-column:hover {
        /* Czysta biel po najechaniu */
        background-color: #ffffff !important; 
        /* Odrobinę wyraźniejszy cień, żeby podbić kontrast bieli */
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08) !important; 
        /* Efekt "lewitacji" - uniesienie kafelka o 5 pikseli w górę */
        transform: translateY(-5px) !important; 
    }
}

/* --- 3. WIDOK MOBILNY (Tylko telefony / tablety poniżej 768px) --- */
@media (max-width: 768px) {
    .kontener-karty {
        /* Nieco węższy margines zewnętrzny na małych ekranach */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .kontener-karty .wp-block-column {
        /* Nadaje stałe, białe tło - tworzy fizyczną "kartę" */
        background-color: #ffffff !important; 
        /* Dodaje bardzo delikatną, szarą ramkę wokół kafelka */
        border: 1px solid #eaeaea !important; 
        /* Subtelny, stały cień odrywający kafelek od tła */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important; 
        /* Wyraźny margines dolny - oddziela kafelki od siebie w pionie! */
        margin-bottom: 30px !important; 
    }
}