/* --- ZMIENNE KOLORYSTYCZNE --- */
:root {
    --ifb-blue: #009bdd; /* Kolor główny z logo */
    --ifb-blue-dark: #0077a8;
    --ifb-blue-light: #e6f5fc; /* Bardzo jasny błękit do teł */
    --ifb-dark: #212529;
    --ifb-darker: #1a1d20;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow-sm: 0 6px 18px rgba(16, 24, 40, .08);
  --shadow-md: 0 14px 40px rgba(16, 24, 40, .12);
  --shadow-lg: 0 28px 70px rgba(16, 24, 40, .18);
  --border-soft: 1px solid rgba(16, 24, 40, .08);
  --bg-page: #f6f8fb;
  --text-soft: rgba(33,37,41,.78);
}

/* --- OGÓLNE USTAWIENIA --- */
body{
  font-family: var(--font-body);
  color: var(--ifb-dark);
  background: var(--bg-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p{ color: var(--text-soft); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Nadpisanie kolorów Bootstrapa */
.text-primary { color: var(--ifb-blue) !important; }
.bg-primary { background-color: var(--ifb-blue) !important; }
.bg-primary-light { background-color: var(--ifb-blue-light) !important; }
.bg-dark { background-color: var(--ifb-dark) !important; }
.bg-darker { background-color: var(--ifb-darker) !important; }
.border-primary { border-color: var(--ifb-blue) !important; }

.btn-primary {
    background-color: var(--ifb-blue);
    border-color: var(--ifb-blue);
    font-family: var(--font-heading);
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: var(--ifb-blue-dark);
    border-color: var(--ifb-blue-dark);
}
.btn-outline-light:hover {
    color: var(--ifb-blue);
}

.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.section-heading {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
}
.section-subheading {
    font-size: 1.2rem;
    font-weight: 400;
    font-family: var(--font-body);
    margin-bottom: 4rem;
}
/* Spójne “premium” elementy */
.rounded, .rounded-3, .rounded-4, img.img-fluid{
  border-radius: var(--radius-lg) !important;
}
.shadow, .shadow-sm{
  box-shadow: var(--shadow-sm) !important;
}
html{ scroll-behavior: smooth; }

.section-padding{
  padding-top: clamp(3.5rem, 6vw, 6rem);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}
.section-heading{
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .section-heading { font-size: 3rem; }
    .border-end-lg { border-right: 1px solid #dee2e6; }
    .border-secondary { border-color: rgba(255,255,255,0.1) !important; }
}

/* --- NAWIGACJA --- */
#mainNav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: all 0.3s ease;
}
#mainNav .navbar-nav .nav-item .nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--ifb-dark);
    padding: 0.75rem 1rem;
}
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link.active {
    color: var(--ifb-blue);
}
#mainNav{
  padding-top: .9rem;
  padding-bottom: .9rem;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(16,24,40,.06);
}

#mainNav.nav-scrolled{
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm);
}

#mainNav .navbar-brand img{
  transform: translateY(-1px);
}

#mainNav .nav-link{
  border-radius: 10px;
}

#mainNav .navbar-nav .nav-item .nav-link:hover{
  background: rgba(0,155,221,.08);
}

/* Wyróżniony link "Projekty UE" */
.highlight-link {
    color: var(--ifb-blue) !important;
    border: 2px solid var(--ifb-blue);
    border-radius: 24px;
    padding: 0.5rem 1rem !important;
    margin-top: 0.25rem;
    transition: all 0.3s;
}
.highlight-link:hover, .highlight-link.active {
    background-color: var(--ifb-blue);
}

@media (max-width: 991px) {
    .highlight-link {
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .btn-sm-contact {
        margin-top: 10px;
        display: inline-block;
    }
}

/* --- HERO SECTION --- */
.hero-section {
    /* ZMIEŃ URL NA SWOJE ZDJĘCIE TŁA */
    background: url('hero.jpg?text=Tło+Hero+Section+-+Rehabilitacja+i+Technologia') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Efekt paralaksy (opcjonalnie) */
    min-height: 100vh;
    padding-top: 80px; /* Miejsce na navbar */
    position: relative;
}
.hero-section .overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(0,155,221,.30), transparent 60%),
    linear-gradient(180deg, rgba(5,10,18,.65), rgba(5,10,18,.78));
  z-index:1;
}
.hero-section h1{
  letter-spacing: -0.03em;
  text-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.hero-section .lead{
  max-width: 52ch;
}
@media (max-width: 991px){
  .hero-section{ background-attachment: scroll; } /* “fixed” potrafi lagować na mobile */
}
.z-index-2 {
    z-index: 2;
}
.hero-section h1 {
    font-weight: 800;
}
@media (min-width: 992px) {
    .hero-section h1 { font-size: 4.5rem; line-height: 1.1; }
    .hero-section .lead { font-size: 1.5rem; }
}

/* --- INNE ELEMENTY --- */
/* Okrągłe ikony w kompetencjach */
.fa-stack-2x {
    color: var(--ifb-blue-light); /* Jaśniejsze tło kółka */
    transition: all 0.3s;
}
.col-md-4:hover .fa-stack-2x {
    color: var(--ifb-blue); /* Ciemniejsze po najechaniu */
}
.fa-inverse { color: var(--ifb-blue); }



/* Ciemniejszy błękit w boksach kontaktowych */
.bg-primary-dark {
    background-color: var(--ifb-blue-dark);
    transition: transform 0.3s;
}
.contact-box:hover {
    transform: translateY(-5px);
}

/* Filtr do logo w stopce, aby było białe */
.filter-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.btn-social {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.feature-card{
  background: rgba(255,255,255,.86);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.feature-card .fa-stack{
  filter: drop-shadow(0 10px 18px rgba(0,155,221,.18));
}
.btn-primary{
  border-radius: 999px;
  padding: .85rem 1.25rem;
  box-shadow: 0 14px 30px rgba(0,155,221,.22);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,155,221,.28);
}
.btn-outline-light{
  border-radius: 999px;
}
/* wyrównanie CTA w hero */
.hero-section .d-flex{
  align-items: center;
}

/* oba przyciski mają identyczną wysokość i centrowanie */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.hero-section .btn{
  padding: .85rem 1.25rem;
}
footer.bg-darker p,
footer.bg-darker a{
  color: rgba(255,255,255,.72) !important;
}

footer.bg-darker .text-white-50{
  color: rgba(255,255,255,.65) !important;
}
/* KONTAKT – spójny kontrast i “premium” karty */
#kontakt p{ color: rgba(255,255,255,.75) !important; }

#kontakt .contact-box{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#kontakt .contact-box h5,
#kontakt .contact-box i,
#kontakt .contact-box a,
#kontakt .contact-box p{
  color: #fff !important;
  opacity: .92;
}

#kontakt .contact-box a{ text-decoration: none; }
#kontakt .contact-box a:hover{ text-decoration: underline; opacity: 1; }
/* tekst na ciemnych sekcjach (bg-dark itp.) */
.bg-dark p,
.bg-dark .lead{
  color: rgba(255,255,255,.72) !important;
}

.bg-dark .text-white-50{
  color: rgba(255,255,255,.65) !important;
}
/* Kompetencje: oddech + równe wysokości kafli */
#kompetencje .row{
  --bs-gutter-x: 28px;   /* więcej oddechu poziomo */
  --bs-gutter-y: 28px;   /* i pionowo */
}


#kompetencje .feature-card{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;    /* premium oddech w środku */
}

#kompetencje .feature-card p{
  margin-bottom: 0;
}
#kompetencje .feature-card h4{
  min-height: 2.6em; /* ~2 linie */
}
#kompetencje .feature-card .fa-stack{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}
/* NAV – czytelny hover + równy baseline */
#mainNav .navbar-nav{
  align-items: center; /* wyrównuje “Kontakt” z resztą */
}

#mainNav .nav-link{
  display: inline-flex;
  align-items: center;
  height: 44px;              /* jedna wysokość dla wszystkich */
  padding: 0 14px;
  line-height: 1;
  border-radius: 24px;
  color: rgba(16,24,40,.86);
}

#mainNav .nav-link:hover,
#mainNav .nav-link:focus{
  background: rgba(0,155,221,.10);
  color: rgba(16,24,40,.92); /* zawsze ciemny tekst = czytelny */
}

/* aktywny item (current) */
#mainNav .nav-link.active,
#mainNav .navbar-nav .nav-item .nav-link.active{
  background: rgba(0,155,221,.14);
  color: rgba(16,24,40,.95);
  font-weight: 700;
}

/* Kontakt jako “button” w menu */
#mainNav .btn{
  display: inline-flex;
  align-items: center;
  height: 44px;              /* ten sam baseline */
  padding: 0 16px;
  border-radius: 24px;
  line-height: 1;
}
/* NAV: wymuś ciemny tekst na hover dla przyciskowych linków */
#mainNav .navbar-nav .btn,
#mainNav .navbar-nav .btn:hover,
#mainNav .navbar-nav .btn:focus{
  color: rgba(16,24,40,.92) !important;
}

/* jeśli to jest btn-outline-primary / btn-primary itp. */
#mainNav .navbar-nav .btn-outline-primary:hover,
#mainNav .navbar-nav .btn-primary:hover{
  color: rgba(16,24,40,.92) !important;
  background: rgba(0,155,221,.10) !important;
  border-color: rgba(0,155,221,.45) !important;
}

/* na wszelki wypadek, gdy gdzieś siedzi text-white */
#mainNav .navbar-nav .btn.text-white,
#mainNav .navbar-nav .btn.text-white:hover{
  color: rgba(16,24,40,.92) !important;
}
/* NAV: Kontakt jako przycisk - bez “wybielania” i bez skakania */
#mainNav .navbar-nav .btn-sm-contact{
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px !important;
  border-radius: 24px;
  line-height: 1;
  box-shadow: 0 14px 30px rgba(0,155,221,.22);
}

#mainNav .navbar-nav .btn-sm-contact:hover,
#mainNav .navbar-nav .btn-sm-contact:focus{
  background: var(--ifb-blue) !important;   /* zostaje niebieski */
  border-color: var(--ifb-blue) !important;
  color: #fff !important;                      /* biały ma sens na niebieskim */
  filter: brightness(.95);
}

/* --- DZIAŁALNOŚĆ (accordion + keyword cloud) --- */
#dzialalnosc .ifb-accordion .accordion-item{
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
#dzialalnosc .ifb-accordion .accordion-button{
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
}
#dzialalnosc .ifb-accordion .accordion-button:not(.collapsed){
  background: rgba(0,155,221,.10);
  color: rgba(16,24,40,.92);
  box-shadow: none;
}
#dzialalnosc .ifb-accordion .accordion-body{
  color: var(--text-soft);
  line-height: 1.55;
}

#dzialalnosc .ifb-note{
  background: rgba(255,255,255,.86);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
}
#dzialalnosc .ifb-ready{
  border-top: 1px solid rgba(16,24,40,.08);
  padding-top: 16px;
}

.keyword-badge{
  background: rgba(0,155,221,.10) !important;
  color: rgba(16,24,40,.90) !important;
  border: 1px solid rgba(0,155,221,.28);
  border-radius: 999px;
  padding: .45rem .7rem;
  font-weight: 700;
}

/* --- PODSTRONY / TREŚCI PRAWNE --- */
.page-hero{
  position: relative;
  padding-top: 160px; /* miejsce na navbar */
  padding-bottom: 56px;
  background: url('hero.jpg?text=IFB') no-repeat center center;
  background-size: cover;
  overflow: hidden;
}
.page-hero .overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(0,155,221,.28), transparent 60%),
    linear-gradient(180deg, rgba(5,10,18,.60), rgba(5,10,18,.78));
  z-index:1;
}
.page-hero .container{ position: relative; z-index:2; }
.legal-card{
  background: rgba(255,255,255,.92);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 24px;
}
.legal-card h2, .legal-card h3{ letter-spacing: -0.02em; }
.legal-card p, .legal-card li{ color: var(--text-soft); }
.legal-card ul{ padding-left: 1.1rem; }
.legal-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size: 0.92rem;
  color: rgba(255,255,255,.78);
}
.legal-meta .badge{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: .35rem .6rem;
}
/* hamburger bez obrysu/ramki */
#mainNav .navbar-toggler{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* focus (klik / tap) też bez “glow” */
#mainNav .navbar-toggler:focus,
#mainNav .navbar-toggler:active{
  box-shadow: none !important;
  outline: none !important;
}
/* hamburger: domyślnie ciemny, bez obrysu */
#mainNav .navbar-toggler{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

#mainNav .navbar-toggler:focus,
#mainNav .navbar-toggler:active{
  box-shadow: none !important;
  outline: none !important;
}

/* ikona (3 kreski) – domyślnie ciemna */
#mainNav .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='rgba(33,37,41,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  transition: background-image .15s ease-in-out;
}

/* hover + focus + otwarte menu => niebieski jak logo */
#mainNav .navbar-toggler:hover .navbar-toggler-icon,
#mainNav .navbar-toggler:focus-visible .navbar-toggler-icon,
#mainNav .navbar-toggler[aria-expanded="true"] .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='%23009bdd' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}