/*
Theme Name: ELSG Modern
Theme URI: https://www.elsg.co.uk
Description: Nowoczesny reskin motywu cannysoft dla ELSG Ltd. Child theme – tylko warstwa wyglądu (CSS), na kolorach logo (granat #082A57 + czerwień #C40001). Nie zmienia treści ani układu widgetów. Zero zewnętrznych zależności (font = Roboto, który motyw już ładuje).
Author: ELSG / Adam Sierant
Template: cannysoft
Version: 1.2.1
*/

/* ============================================================
   ELSG MODERN — design system (na kolorach logo)
   Granat #082A57 | Czerwień #C40001 | Royal #01377D
   Ładuje się PO style.css motywu cannysoft i nadpisuje
   przestarzałą oliwkę (#a9bf30) firmowymi kolorami + nowoczesny szlif.
   ZASADA BEZPIECZEŃSTWA: nie ruszamy position/layoutu, który motyw
   ustawia responsywnie (np. mobilny dolny pasek menu). Tylko kolory,
   typografia, cienie, zaokrąglenia, hover.
   ============================================================ */

:root{
  --navy:        #082A57;   /* logo */
  --navy-700:    #0B3470;
  --navy-900:    #061B3A;
  --royal:       #01377D;
  --red:         #C40001;   /* logo accent / CTA */
  --red-600:     #A30001;
  --red-700:     #870001;

  --ink:         #16203A;
  --muted:       #5A6473;
  --line:        #E4E9F0;
  --bg-soft:     #F4F7FB;
  --bg-soft-2:   #EAF0F8;

  --radius:      14px;
  --radius-sm:   10px;
  --shadow-sm:   0 2px 8px rgba(8,42,87,.06);
  --shadow:      0 10px 30px rgba(8,42,87,.10);
  --shadow-lg:   0 20px 50px rgba(8,42,87,.16);
  --t:           .22s cubic-bezier(.4,0,.2,1);

  /* Nagłówki: Roboto (motyw już ładuje 300/400/900) + fallback systemowy.
     Zero dodatkowych zapytań sieciowych. */
  --display: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --body:    'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---------- Base / typografia ---------- */
body{
  font-family: var(--body);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: var(--display);
  color: var(--navy);
  letter-spacing: -.4px;
  line-height: 1.18;
}
.page-contents h1, .page-contents h2,
.page-contents h2 a, .full-width h2, .full-width h2 a{
  font-weight: 900 !important;
  color: var(--navy) !important;
  letter-spacing: -.6px;
}
.h3, h3{ color: var(--navy); font-weight: 700; }
.h4, h4{ font-weight: 700; }
.h5, h5{ color: var(--red); font-weight: 700; }
.h6, h6{ font-weight: 700; }

p{ color: var(--ink); }

/* Linki — firmowa czerwień zamiast oliwki na hover */
a{ color: var(--royal); transition: color var(--t); }
a:hover, a:focus{ color: var(--red); }

/* Akcentowa kreska pod nagłówkami (była oliwkowa) */
h1::after,
h3.sbar2_title::after{
  background-image: linear-gradient(90deg, var(--red) 0%, var(--red-700) 100%) !important;
  height: 5px !important;
  width: 70px !important;
  border-radius: 4px;
  margin: 14px 0 22px 0 !important;
}

/* ---------- Header ---------- */
header{ background-color: #fff; }
.header{
  background: #fff;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--line);
}
.header-logo img{ padding: 18px 0; }

.top-bar{ background: var(--navy-900); }

/* Pasek menu głównego: granat + cienki czerwony akcent zamiast oliwki.
   UWAGA: nie zmieniamy position — motyw sam zarządza nim responsywnie
   (na telefonie robi z niego dolny fixed-bar). Dotykamy tylko kolorów. */
.top_main_menu{
  background-color: var(--navy) !important;
  border-top: 3px solid var(--red) !important;
}

/* Pozycje menu — większy oddech, animowany podkreślnik */
.sf-menu a{
  color: #EAF0F8 !important;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 1.15rem .95rem;
  position: relative;
  transition: color var(--t), background var(--t);
}
.sf-menu a:hover, .sf-menu a:focus{
  color: #fff !important;
  background-color: rgba(255,255,255,.08) !important;
}
.sf-menu > li > a::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:12px;
  height:2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.sf-menu > li:hover > a::after,
.sf-menu > li.sfHover > a::after{ transform: scaleX(1); }

/* Dropdowny — CIEMNY GRANAT (było białe tło → jasny tekst był niewidoczny) */
.sf-menu ul{
  background-color: var(--navy) !important;
  box-shadow: var(--shadow);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  padding: 4px 0;
}
.sf-menu ul li{ background: var(--navy) !important; }
.sf-menu ul ul li{ background: var(--navy-900) !important; }   /* pod-podmenu ciemniejsze */
.sf-menu ul a{
  color: #EAF0F8 !important;
  background-color: transparent !important;
  border-left: 3px solid var(--red) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  font-weight: 500;
  padding: .6rem .9rem !important;
}
.sf-menu ul a:hover, .sf-menu ul a:focus{
  color: #fff !important;
  background-color: var(--navy-700) !important;
}

/* Ikony kontaktu w headerze — czerwone zamiast oliwkowych */
.header-right ul li.phone::before,
.header-right ul li.email::before,
.header-right ul li.time::before{ color: var(--red) !important; }

/* ---------- Hero / bannery ---------- */
.banner_message{
  background-color: rgba(6,27,58,.55) !important;
  border-top: 6px solid var(--red) !important;
}
#carouselExampleSlidesOnly .carousel-item .bn_title span{
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.5px;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
#carouselExampleSlidesOnly .carousel-item .bn_desc span{
  background-color: rgba(6,27,58,.55);
  border-radius: 8px;
}
.banner-top-inner-container .bn_title{
  font-family: var(--display); font-weight: 900; letter-spacing:-.5px;
}

/* Banner dolny CTA — głębszy granatowy gradient */
.bottom-banner{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%) !important;
}
.bottom-banner .bn_title{ font-family: var(--display); font-weight: 900; }

/* ---------- Przyciski ---------- */
.btn{
  font-weight: 700; letter-spacing:.2px; border-radius: 10px;
  padding: .6rem 1.15rem;
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
}
.btn:hover{ transform: translateY(-2px); }

.btn-primary{
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  color:#fff !important;
  box-shadow: 0 8px 20px rgba(8,42,87,.25);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:hover, .btn-primary:focus{
  background-color: var(--navy-700) !important;
  border-color: var(--navy-700) !important;
  color:#fff !important;
}

/* btn-danger było oliwkowe — teraz firmowa czerwień = główny CTA */
.btn-danger{
  background-color: var(--red) !important;
  border-color: var(--red) !important;
  color:#fff !important;
  box-shadow: 0 8px 20px rgba(196,0,1,.28);
}
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:hover, .btn-danger:focus{
  background-color: var(--red-600) !important;
  border-color: var(--red-600) !important;
  color:#fff !important;
}
.btn-dark{ background-color: var(--navy-900) !important; border-color: var(--navy-900) !important; border-radius:10px; }
.btn-xl{ padding:.85rem 1.8rem; font-size:1.05rem !important; border-radius:12px; }

/* ---------- Karty / bloki usług ---------- */
.cards,
.card-deck .card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm) !important;
  padding: 18px !important;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cards:hover,
.card-deck .card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow) !important;
  border-color: rgba(8,42,87,.18);
}
.card-deck .card-title a{ color: var(--navy); font-family: var(--display); font-weight: 700; }
.card-deck .card-title a:hover{ color: var(--red) !important; }

/* Bloki "sblk" (usługi z ikoną) */
.sblk{
  border-radius: var(--radius);
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.sblk:hover, .sblk:focus, .sblk:active{
  transform: translateY(-4px);
  border-color: var(--red) !important;
  box-shadow: var(--shadow) !important;
}
.sblk i{ color: var(--red) !important; }
.blks_service, .blks_service_home{ background-color: var(--bg-soft) !important; }

/* "lblk" / "flist" hover — czerwona ramka */
.lblk{ border-radius: var(--radius-sm); transition: border-color var(--t), box-shadow var(--t); }
.lblk:hover, .lblk:focus{ border-color: var(--red) !important; box-shadow: var(--shadow-sm); }
.flist a.ikon:hover, .flist a.ikon:focus{ border-color: var(--red) !important; }

/* Listy "check" — czerwony znacznik */
ul.check li::before{ color: var(--red) !important; }

/* Boczne listy / linki */
.main-article ul.menu li a,
.side_block ul li a{ border-bottom: 1px dotted rgba(8,42,87,.25); transition: background var(--t); }

/* Cytaty */
blockquote{ border-left: 5px solid var(--red); background: var(--bg-soft); border-radius: 0 10px 10px 0; }

/* ---------- FAQ accordion ---------- */
.accord .card{ border-radius: var(--radius-sm); overflow:hidden; }
.accord .card-body{ background-color: var(--bg-soft-2); }
.accord .card-header a:hover, .accord .card-header a:focus{ color: var(--red); }

/* ---------- Cennik ---------- */
.price_heading{ color: var(--navy); }
.price_button a{ background-color: var(--red); border-radius: 8px; transition: background var(--t); }
.price_button a:hover, .price_button a:focus{ background-color: var(--red-600) !important; }

/* ---------- Floating bar ---------- */
.floating-bar ul{ background-color: var(--navy); border-radius: 10px 0 0 10px; overflow:hidden; }
.floating-bar ul li.floating_title{ background-color: var(--red); }

/* ---------- STOPKA: ciemny granat (premium look) ---------- */
.footer-blocks{
  background: var(--navy) !important;
  color: #C9D5E8;
}
/* Zabezpieczenie: każdy tekst w stopce dziedziczy jasny kolor (gdyby widget
   miał własne akapity/span bez koloru — nie zniknie na ciemnym tle). */
.footer-blocks,
.footer-blocks p,
.footer-blocks li,
.footer-blocks span,
.footer-blocks td,
.footer-blocks div{ color: #C9D5E8; }
.footer-blocks h1,.footer-blocks h2,.footer-blocks h3,
.footer-blocks h4,.footer-blocks h5,.footer-blocks h6{ color:#fff !important; }
.footer-blocks li a,
.footer-blocks .ikan li{ color:#C9D5E8 !important; border-bottom-color: rgba(255,255,255,.10) !important; }
.footer-blocks li a:hover, .footer-blocks li a:focus{
  color:#fff !important; background: rgba(255,255,255,.06) !important;
}
.footer-blocks .ikan .ficon,
.contact-info i{ color: var(--red) !important; }

.bottom-bar{ background: var(--navy-900); color:#9FB1CC; }
.bottom-bar p{ color:#9FB1CC; }
.bottom-bar a{ color:#C9D5E8; }
.bottom-bar a:hover{ color:#fff; }

/* ---------- Zabezpieczenie ciemnych sekcji: nagłówki czytelne ---------- */
.banner_message h1,.banner_message h2,.banner_message h3,
.banner-top-inner-container h1,.banner-top-inner-container h2,.banner-top-inner-container h3,
.bottom-banner h1,.bottom-banner h2,.bottom-banner h3{ color:#fff !important; }

/* ---------- Formularze ---------- */
.form-control{
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .65rem .85rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.form-control:focus{
  border-color: var(--royal);
  box-shadow: 0 0 0 3px rgba(1,55,125,.12);
}

/* ---------- Mobilny dolny pasek nawigacji (tylko kolory) ---------- */
.mobi_bar a{ color:#EAF0F8; }
.mobi_bar a i{ color:#fff; }
.top_main_menu .br{ border-right-color: rgba(255,255,255,.12); }
.top_main_menu .bl{ border-left-color: rgba(255,255,255,.12); }

/* ---------- Mobilne menu (modal) ---------- */
.modal-header{ border-bottom: 4px solid var(--red); }
.modal-footer{ border-top: 4px solid var(--red); }
.modal.left .modal-body{ background-color: var(--navy); }
.modal-content ul li a:hover,
.modal-content ul li a:focus,
.modal-content li.current > a{ color: var(--red); }

/* ---------- Dostępność: focus-visible ---------- */
a:focus-visible, .btn:focus-visible, .form-control:focus-visible{
  outline: 3px solid rgba(196,0,1,.45);
  outline-offset: 2px;
}

/* Płynne przewijanie */
html{ scroll-behavior: smooth; }

/* ============================================================
   v1.2 — SZLIF ARTYSTYCZNY + LAZY RENDER (tylko style, bez layoutu)
   ============================================================ */

/* Brandowe zaznaczenie tekstu */
::selection{ background: var(--red); color:#fff; }
::-moz-selection{ background: var(--red); color:#fff; }

/* Subtelny, firmowy pasek przewijania (premium detal) */
html{ scrollbar-color: var(--navy) #DCE4EF; scrollbar-width: thin; }
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: #DCE4EF; }
::-webkit-scrollbar-thumb{ background: var(--navy); border-radius: 8px; border: 2px solid #DCE4EF; }
::-webkit-scrollbar-thumb:hover{ background: var(--navy-700); }

/* Przyciski — delikatny gradient + głębszy, brandowy cień */
.btn-danger{
  background-image: linear-gradient(180deg, #D11617 0%, var(--red) 60%, var(--red-600) 100%) !important;
}
.btn-danger:hover, .btn-danger:focus{
  background-image: linear-gradient(180deg, var(--red) 0%, var(--red-600) 100%) !important;
  box-shadow: 0 12px 26px rgba(196,0,1,.34) !important;
}
.btn-primary{
  background-image: linear-gradient(180deg, #0C366E 0%, var(--navy) 60%, var(--navy-900) 100%) !important;
}
.btn-primary:hover, .btn-primary:focus{
  background-image: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-900) 100%) !important;
  box-shadow: 0 12px 26px rgba(8,42,87,.32) !important;
}
.btn:active{ transform: translateY(0) !important; }

/* Hero — subtelna winieta dla większej głębi i kontrastu tekstu */
.banner_message{
  background-image:
    radial-gradient(120% 120% at 50% 0%, rgba(11,52,112,.10) 0%, rgba(6,27,58,.55) 70%) !important;
}

/* Karty — czerwony akcent na górnej krawędzi przy najechaniu */
.cards, .card-deck .card, .sblk{ position: relative; overflow: hidden; }
.cards::before, .card-deck .card::before, .sblk::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--red), var(--red-700));
  transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.cards:hover::before, .card-deck .card:hover::before, .sblk:hover::before{ transform: scaleX(1); }

/* Stopka — cienki czerwony akcent na styku z treścią */
.footer-blocks{ border-top: 3px solid var(--red); }

/* Obrazy — płynniejsze dekodowanie/skalowanie */
img{ image-rendering: auto; }

/* ---------- LAZY RENDER: pomiń rysowanie sekcji poza ekranem ---------- */
.footer-blocks{ content-visibility: auto; contain-intrinsic-size: auto 360px; }
.bottom-bar{ content-visibility: auto; contain-intrinsic-size: auto 60px; }

/* ---------- Dostępność: szanuj „mniej animacji" ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition: none !important;
    animation: none !important;
  }
  html{ scroll-behavior: auto; }
  .btn:hover, .cards:hover, .card-deck .card:hover, .sblk:hover{ transform: none !important; }
}