/*
Theme Name: Laktacja — skórka ris
Theme URI: https://doradcalaktacyjnylodz.pl
Description: Motyw potomny GeneratePress. Papier w kolorze masła, dwie farby
  (fuksja i musztarda), krzywa antykwa, ściana wycinków zamiast kafelków,
  nadruk z przesunięciem zamiast cieni. Celowo nie przypomina pozostałych
  stron portfela: tamte są zimne (zielenie, błękity), na bieli, na krojach
  systemowych, z ciemnym pasmem hero i siatką kafelków w ramkach.
Template: generatepress
Version: 1.0
Text Domain: laktacja-child
*/

:root{
  --pap:#FBF3E4;
  --pap-c:#F2E6D0;
  --atr:#2B1B3D;
  --atr-s:#5B4A6B;
  --fuk:#D63A70;
  --fuk-j:#F7D4E0;
  --mus:#E0A133;
  --mus-j:#F7E7C6;
  --lin:#D9C8AC;
}

/* ---------------------------------------------- papier i ziarno nadruku */
body{
  background:var(--pap);
  color:var(--atr);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:17px;
  line-height:1.62;
}
/* ⚠ ZAKAZ overflow-x na html/body — tnie pozycjonowanie na telefonie.
   Obroty prostujemy w regułach mobilnych zamiast ucinać stronę. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='z'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23z)' opacity='.16'/></svg>");
  mix-blend-mode:multiply;
}
.site{position:relative;z-index:1}

/* ------------------------------------------------------------ typografia */
h1,h2,h3,h4,.lkt-wyr{
  font-family:"Fraunces",Georgia,serif;
  letter-spacing:-.012em;
}
h1,h2{font-style:italic;font-weight:700}
h1{font-size:clamp(31px,5.2vw,52px);line-height:1.04}
h2{font-size:clamp(24px,3.4vw,34px);line-height:1.12;margin-top:1.8em}
h3{font-size:20px;font-weight:700;margin-top:1.5em}
.entry-content p{margin:0 0 15px}
a{color:var(--fuk);text-underline-offset:3px}
a:hover{color:var(--atr)}

/* ------------------------------------------------- nagłówek: taśma i naklejki */
.site-header{background:transparent;border:0;padding:26px 0 6px}
.site-branding .site-title,.site-logo{display:inline-block}
/* ⚠ GeneratePress renderuje nazwę serwisu jako `.main-title`, nie
   `.site-title` — pierwsza wersja selektora nie trafiała i nazwa stała
   gołym tekstem zamiast na taśmie. */
.site-header .main-title a,
.site-header .site-title a{
  display:inline-block;transform:rotate(-1.6deg);
  background:var(--mus-j);border:1px solid var(--atr);
  padding:6px 17px 7px;font-family:"Fraunces",Georgia,serif;
  font-style:italic;font-weight:700;font-size:20px;color:var(--atr);
  text-decoration:none;
}
.main-navigation{background:transparent}
.main-navigation .main-nav>ul{gap:9px;flex-wrap:wrap}
.main-navigation .main-nav ul li a{
  background:#fff;border:1px solid var(--atr);
  padding:5px 13px;font-size:15px;font-weight:500;line-height:1.5;color:var(--atr);
}
.main-navigation .main-nav ul li:nth-child(2n) a{transform:rotate(1.4deg);background:var(--fuk-j)}
.main-navigation .main-nav ul li:nth-child(3n) a{transform:rotate(-1.8deg);background:var(--mus-j)}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a{
  transform:rotate(0);background:var(--atr);color:var(--pap);
}

/* ------------------------------------------------------ przyciski: nadruk */
.button,button,input[type=submit],.wp-block-button__link,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit{
  position:relative;display:inline-block;
  background:var(--fuk);color:#fff;border:1px solid var(--atr);border-radius:0;
  padding:11px 22px;font-weight:700;font-size:16px;line-height:1.3;
  text-transform:none;letter-spacing:0;
}
.button::before,button::before,input[type=submit]::before,
.woocommerce a.button::before,.woocommerce button.button::before{
  content:"";position:absolute;inset:0;background:var(--mus);
  border:1px solid var(--atr);transform:translate(4px,4px);z-index:-1;
}
.button:hover,button:hover,input[type=submit]:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover{
  background:var(--fuk);color:#fff;transform:translate(2px,2px);
}

/* ---------------------------------------------- treść wpisu i marginalia */
.entry-content{max-width:68ch}
.lkt-zakres{background:linear-gradient(transparent 58%,rgba(224,161,51,.55) 58%);padding:0 2px}
.entry-content blockquote,.lkt-cytat{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:21px;line-height:1.3;
  border-left:3px solid var(--fuk);margin:24px 0;padding:4px 0 4px 16px;
  transform:rotate(-.6deg);background:transparent;
}
.lkt-margines{
  font-size:14px;color:var(--atr-s);border-top:2px solid var(--fuk);
  padding-top:10px;margin:22px 0;
}
.lkt-margines b{color:var(--atr)}

/* ------------------------------------------- ściana wycinków (zamiast kafelków) */
.lkt-wycinki{display:flex;flex-wrap:wrap;gap:16px;margin:26px 0}
.lkt-wycinek{
  position:relative;background:#fff;border:1px solid var(--atr);
  padding:16px 18px 18px;text-decoration:none;color:inherit;flex:1 1 220px;max-width:100%;
}
.lkt-wycinek:nth-child(4n+1){flex-basis:300px;transform:rotate(-1.4deg)}
.lkt-wycinek:nth-child(4n+2){flex-basis:220px;transform:rotate(1.1deg);background:var(--mus-j)}
.lkt-wycinek:nth-child(4n+3){flex-basis:260px;transform:rotate(-2.2deg)}
.lkt-wycinek:nth-child(4n+4){flex-basis:340px;transform:rotate(1.9deg);background:var(--fuk-j)}
.lkt-wycinek:hover{transform:rotate(0) translateY(-2px);z-index:3}
.lkt-nr{
  font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:38px;line-height:.8;
  color:var(--fuk);display:block;margin:0 0 8px;
}
.lkt-wycinek h3{font-family:"Fraunces",Georgia,serif;font-size:19px;margin:0 0 7px;line-height:1.18}
.lkt-wycinek p{margin:0;font-size:15px;color:var(--atr-s)}

/* ------------------------------------------------------------ WooCommerce */
.woocommerce ul.products li.product,.wc-block-grid__product{
  background:#fff;border:1px solid var(--atr);padding:14px;text-align:left;
}
.woocommerce ul.products li.product:nth-child(2n){background:var(--mus-j);transform:rotate(-1deg)}
.woocommerce ul.products li.product:nth-child(3n){background:var(--fuk-j);transform:rotate(1.2deg)}
.woocommerce ul.products li.product:hover{transform:rotate(0)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:"Fraunces",Georgia,serif;font-size:18px;font-weight:700;padding:8px 0 4px;
}
.woocommerce ul.products li.product .price,.woocommerce div.product p.price{
  color:var(--atr);font-weight:700;
}
.woocommerce div.product .product_title{font-style:italic}
.woocommerce span.onsale{
  background:var(--fuk);color:#fff;border:1px solid var(--atr);border-radius:0;
  font-weight:700;padding:4px 12px;min-height:0;min-width:0;line-height:1.5;
  transform:rotate(-3deg);
}
.woocommerce .woocommerce-tabs ul.tabs li{
  background:var(--mus-j);border:1px solid var(--atr);border-radius:0;
}
.woocommerce .woocommerce-tabs ul.tabs li.active{background:#fff}
.woocommerce table.shop_attributes th,.woocommerce table.shop_table th{
  background:var(--mus-j);
}

/* -------------------------------------------------------------- stopka */
.site-footer,.site-info{
  background:var(--atr);color:var(--pap);position:relative;
}
.site-footer a,.site-info a{color:var(--mus)}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:-11px;height:12px;background:var(--atr);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='12'><path d='M0 12 L0 6 L10 9 L20 3 L30 8 L40 2 L50 7 L60 1 L70 7 L80 3 L90 9 L100 4 L110 8 L120 5 L120 12 Z' fill='black'/></svg>") repeat-x bottom/120px 12px;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='12'><path d='M0 12 L0 6 L10 9 L20 3 L30 8 L40 2 L50 7 L60 1 L70 7 L80 3 L90 9 L100 4 L110 8 L120 5 L120 12 Z' fill='black'/></svg>") repeat-x bottom/120px 12px;
}

/* ------------------------------------------------------------- telefon */
@media(max-width:768px){
  body{font-size:16px}
  /* obroty prostujemy — inaczej wycinki rwą układ i wypychają stronę w bok */
  .lkt-wycinek,.main-navigation .main-nav ul li a,.entry-content blockquote,
  .lkt-cytat,.woocommerce ul.products li.product,.site-header .site-title a{
    transform:none !important;
  }
  .lkt-wycinek{flex-basis:100% !important}
  .entry-content{max-width:none}
}


/* ---------------------------------------- strona główna: jeden nagłówek */
/* Treść strony głównej ma własne H1 („Boli, a miało być naturalnie"),
   więc tytuł strony z GeneratePressa byłby drugim nagłówkiem tej rangi. */
.home .entry-header .entry-title{display:none}
.home .entry-header{margin-bottom:0}

/* pełna szerokość — bez paska bocznego układ oddycha */
.lkt-wycinki{margin-top:22px}
.entry-content > h1:first-child{margin-top:0}

/* ------------------------------- papier zamiast białego prostokąta treści */
/* GeneratePress w trybie „separate containers" daje treści białe tło.
   Na papierze w kolorze masła wyglądało to jak kartka naklejona na kartkę. */
.separate-containers .inside-article,
.separate-containers .inside-right-sidebar,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.site-content .content-area{
  background:transparent;
  box-shadow:none;
}
.separate-containers .inside-article{padding:10px 0 0}
.site-content{padding-top:6px}
/* nazwa serwisu i opis: opis pod taśmą, drobnym pismem */
.site-description{
  font-size:14px;color:var(--atr-s);margin:8px 0 0;
}

/* odnośniki serwisowe w stopce */
.lkt-stopka-linki a{color:var(--mus);text-decoration:none}
.lkt-stopka-linki a:hover{text-decoration:underline}