/* ============================================================
   ForNails — layout stron informacyjnych (sidebar "Informacje")
   Wlasny arkusz mu-pluginu fn-design-pages.php. Celowo NIEZALEZNY
   od Woodmart Customizer Additional CSS (post 19068) — inne agenty
   pracuja tam rownolegle. Korzysta ze wspolnych zmiennych --fn-*
   (kolory/fonty marki) zdefiniowanych globalnie w Additional CSS;
   ponizej fallbacki na wypadek innej kolejnosci ladowania arkuszy.
   ============================================================ */

.fn-info-layout{
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin: 8px 0 40px;
}

.fn-info-layout-sidebar-col{
  flex: 0 0 260px;
  width: 260px;
  box-sizing: border-box;
}

.fn-info-layout-content-col{
  flex: 1 1 0%;
  min-width: 0;
}

/* ------------------------------------------------------------
   Karta sidebara
   ------------------------------------------------------------ */
.fn-info-sidebar-inner{
  background: var(--fn-white, #FFFFFF);
  border: 1px solid var(--fn-border, #DDD0CB);
  border-radius: 6px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(46, 35, 33, 0.05);
  box-sizing: border-box;
}

.fn-info-sidebar-title{
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fn-border, #DDD0CB);
  font-family: var(--fn-font-body, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fn-muted, #8B7D77);
}

.fn-info-nav{
  list-style: none;
  margin: 0;
  padding: 0;
}

.fn-info-nav-item{
  margin: 2px 0;
  padding: 0;
}

.fn-info-nav-link{
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  border-left: 3px solid transparent;
  font-family: var(--fn-font-body, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--fn-text, #2E2321);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.fn-info-nav-link:hover,
.fn-info-nav-link:focus{
  background: var(--fn-bg-soft, #F3E9E5);
  color: var(--fn-primary-dark, #7E3A4F);
  text-decoration: none;
}

.fn-info-nav-item.is-active .fn-info-nav-link{
  background: var(--fn-bg-soft, #F3E9E5);
  border-left-color: var(--fn-primary, #A34B65);
  color: var(--fn-primary, #A34B65);
  font-weight: 600;
}

/* ------------------------------------------------------------
   Kolumna tresci — spojne odstepy dla naglowkow/akapitow wewnatrz
   istniejacej tresci stron (bez ingerencji w globalne reguly h1-h6,
   ktore juz uzywaja Playfair Display sitewide).
   ------------------------------------------------------------ */
.fn-info-content{
  min-width: 0;
}

.fn-info-content > *:first-child{
  margin-top: 0;
}

.fn-info-content h2{
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

.fn-info-content h2:first-child{
  margin-top: 0;
}

.fn-info-content h3{
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

.fn-info-content p,
.fn-info-content li{
  line-height: 1.75;
  color: var(--fn-text, #2E2321);
}

.fn-info-content ol,
.fn-info-content ul{
  padding-left: 1.25em;
}

.fn-info-content ol li + li,
.fn-info-content ul li + li{
  margin-top: 0.4em;
}

/* ------------------------------------------------------------
   Mobile — sidebar zwija sie NAD trescia, karta pelnej szerokosci,
   linki w siatce zamiast pionowej listy zeby nie robic bardzo
   dlugiej kolumny na waskim ekranie.
   ------------------------------------------------------------ */
@media (max-width: 768px){
  .fn-info-layout{
    display: block;
  }

  .fn-info-layout-sidebar-col{
    width: auto;
    flex-basis: auto;
    margin-bottom: 22px;
  }

  .fn-info-sidebar-inner{
    padding: 16px 18px;
  }

  .fn-info-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .fn-info-nav-item{
    margin: 0;
  }

  .fn-info-nav-link{
    padding: 7px 10px;
  }
}