/* src/assets/site.css */

/* -------------------------------------------------
   Brand tokens – dopasowane do logotypów PTTZ
-------------------------------------------------- */
:root{
  --brand-primary:#2bb6c4;   /* turkus */
  --brand-secondary:#8bcf6a; /* zielony */
  --brand-accent:#f49ac1;    /* pastelowy róż */
  --brand-warm:#f6f2c6;      /* jasna żółć */

  --text-900:#1f2937;
  --text-700:#374151;
  --line:#eef2f7;

  /* domyślna wysokość nawigacji (desktop) */
  --nav-h:72px;
}
/* mobile: niższa nawigacja */
@media (max-width:991.98px){
  :root{ --nav-h:64px; }
}

/* ------------------------------
   Base
------------------------------ */
html{ -webkit-text-size-adjust:100%; }

body{
  scroll-behavior:smooth;
  color:var(--text-900);
  background-color:#fff;
  padding-top:var(--nav-h); /* offset pod fixed-top navbar */
}

/* --- GLOBALNY OFFSET dla skoków do #kotwic (fixed navbar) --- */
:where(section, div, article, main, header, footer, aside, nav,
       ul, ol, li, h1, h2, h3, h4, h5, h6)[id]{
  scroll-margin-top: var(--nav-h);
}

@supports not (scroll-margin-top: 1px){
  :where(section, div, article, main, header, footer, aside, nav,
         ul, ol, li, h1, h2, h3, h4, h5, h6)[id]{ position:relative; }
  :where(section, div, article, main, header, footer, aside, nav,
         ul, ol, li, h1, h2, h3, h4, h5, h6)[id]::before{
    content:"";
    display:block;
    height:var(--nav-h);
    margin-top:calc(-1 * var(--nav-h));
    background:inherit;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ------------------------------
   Navbar
------------------------------ */
.navbar{
  padding-top:.75rem;
  padding-bottom:.75rem;
  background-color:#fff;
}
.navbar.shadow-sm{ box-shadow:0 4px 16px rgba(31,41,55,.06); }

.navbar-brand{
  font-weight:700;
  letter-spacing:.2px;
  color:var(--brand-primary) !important;
  display:inline-flex;
  align-items:center;
}
.navbar-brand:hover,
.navbar-brand:focus{ opacity:.9; text-decoration:none; }

/* Logo obrazkowe w brandzie */
.brand-logo{
  height:32px;
  width:auto;
  display:inline-block;
  object-fit:contain;
}
@media (min-width:992px){
  .brand-logo{ height:36px; }
}

/* Linki w nawigacji */
.navbar-nav .nav-link{
  padding:.5rem .25rem;
  margin-left:1.25rem;
  font-weight:500;
  font-size:1.05rem;
  color:var(--text-700);
  transition:color .2s ease;
}

/* Podkreślenie pod linkiem (także dropdown-toggle) */
.navbar-nav > .nav-item > .nav-link{
  position:relative;
}
.navbar-nav > .nav-item > .nav-link::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-2px;
  height:2px;
  background:var(--brand-primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.navbar-nav > .nav-item > .nav-link:hover,
.navbar-nav > .nav-item > .nav-link:focus{
  color:var(--brand-primary);
}
.navbar-nav > .nav-item > .nav-link:hover::after,
.navbar-nav > .nav-item > .nav-link:focus::after,
.navbar-nav > .nav-item > .nav-link.active::after{
  transform:scaleX(1);
}

/* Wyłącz dekorację na ewentualnym split-toggle */
.navbar-nav > .nav-item > .nav-link.dropdown-toggle-split::after{ display:none; }

/* Bez „grubej” niebieskiej ramki */
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible{
  outline:none;
  box-shadow:none;
  border-radius:0;
}

/* Toggler (mobile) */
.navbar-toggler{ border:none; padding:.4rem .5rem; }
.navbar-toggler:focus{ box-shadow:none; }

/* Hamburger w kolorze brandu (#2bb6c4) */
.navbar-light .navbar-toggler-icon,
.navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232bb6c4' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown – brak skoku i animacja strzałki */
@media (min-width:992px){
  .navbar .dropdown-toggle::after{ transition:transform .2s; }
  .navbar .dropdown.show .dropdown-toggle::after{ transform:rotate(180deg); }
  .navbar .dropdown-menu{ margin-top:0; }
}

/* Mobile menu */
@media (max-width:991.98px){
  .navbar-collapse{ padding-top:.5rem; padding-bottom:.5rem; }
  .navbar-nav .nav-link{
    margin-left:0;
    padding:.75rem 0;
    text-align:center;
    font-size:1.08rem;
  }
  .navbar-nav .nav-item + .nav-item .nav-link{ border-top:1px solid var(--line); }
}

/* ------------------------------
   Dropdown – hover w submenu (tylko kolor tekstu)
------------------------------ */
.dropdown-menu .dropdown-item{ transition: color .2s ease; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  color:var(--brand-primary);
  background-color:transparent;
}

/* ------------------------------
   Sekcje / komponenty
------------------------------ */
.hero-section{
  background:linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color:#fff;
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:flex;
  align-items:center;
  padding:64px 0;
}
.hero-section .lead{ opacity:.95; }

.hero-section .main-image{ margin-top:1rem; }
.hero-section .main-image img{ border-radius:.75rem; box-shadow:0 10px 30px rgba(0,0,0,.12); }

.hero-section .btn.btn-outline-light{
  border-color:#fff; color:#fff;
}
.hero-section .btn.btn-outline-light:hover{
  background:#fff; color:var(--brand-primary);
}

@media (max-width:767.98px){
  .hero-section{ padding:48px 0 56px; align-items:flex-start; }
  .hero-section h1{
    font-size:clamp(2.1rem, 8vw, 2.6rem); line-height:1.15; margin-bottom:1rem;
  }
  .hero-section .lead{
    font-size:clamp(1.02rem, 4.2vw, 1.18rem); line-height:1.55; margin-bottom:1rem;
  }

  /* >>> FIX: wyśrodkowane przyciski na mobile,
     nadpisuje m.in. .me-3 z Bootstrapa */
  .hero-section .btn{
    display:block;
    width:100%;
    max-width:360px;
    padding:.8rem 1rem;
    font-size:1rem;
    margin:0.75rem auto 0 !important; /* auto L/R + override me-3 */
  }
  .hero-section .btn:first-child{
    margin-top:0 !important;
  }
  .hero-section .btn + .btn{
    margin-top:.75rem !important;
  }

  .hero-section .main-image{ margin-top:1.25rem; }
}

/* Dodatkowe warianty tła */
.bg-warm{ background-color:var(--brand-warm) !important; }

.section-padding{ padding:80px 0; }

/* Karty */
.card-hover{ transition:transform .3s ease, box-shadow .3s ease; }
.card-hover:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(31,41,55,.08);
}

/* Kolory brandowe / utility */
.text-primary-custom{ color:var(--brand-primary) !important; }
.text-accent{ color:var(--brand-accent) !important; }
.bg-primary-soft{ background:rgba(43,182,196,.08) !important; }
.bg-accent-soft{ background:rgba(244,154,193,.12) !important; }

/* Przyciski globalne */
.btn-primary-custom{
  background-color:var(--brand-primary); border-color:var(--brand-primary); color:#fff;
}
.btn-primary-custom:hover{
  background-color:#239eab; border-color:#239eab;
}
.btn-outline-primary{
  color:var(--brand-primary); border-color:var(--brand-primary);
}
.btn-outline-primary:hover{
  background-color:var(--brand-primary); color:#fff;
}

/* Obrazy ogólne */
.main-image img, .card img{ border-radius:.5rem; }

/* Footer – ciemny, neutralny */
footer{ background-color:#22313a; color:#fff; }
footer a{ color:inherit; }

/* Odznaki pomocnicze */
.badge-brand{ background-color:var(--brand-primary); color:#fff; }
.badge-accent{ background-color:var(--brand-accent); color:#5d2c3e; }