/* ===== SAFETYHEADS — NEWSLETTER WIDTH & BLOCKS MATCH (V2) ===== */
.page-id-123 {
/* Brand + typografia spójna z motywem */
–ink:#292929; –muted:#605D5D; –navy:#18156E; –green:#8BB863; –surface:#EFF0F1; –bg:#fff;
–ff-base:’Poppins’,system-ui,-apple-system,’Segoe UI’,Roboto,Arial,sans-serif;
–ff-alt:’Comfortaa’,’Poppins’,cursive;
–fs-hero:clamp(26px,4vw,44px); –fs-h2:clamp(26px,3.2vw,34px); –fs-h3:clamp(20px,2.4vw,24px);/* 1) BLOKI: używamy dokładnie tego samego „koryta” co platforma:
.wp-block-group__inner-container ma w motywie stałą szerokość 1140px i padding sekcji.
Wyrównujemy też vertical rhythm na 100/50px jak na podstronie. */
.nlw-section.wp-block-group > .wp-block-group__inner-container {
width:1140px; max-width:90vw; margin-inline:auto;
padding-top:100px; padding-bottom:100px;
}
@media (max-width:600px){
.nlw-section.wp-block-group > .wp-block-group__inner-container {
padding-top:50px; padding-bottom:50px;
}
}/* 2) Naprawa ograniczeń Gutenberga/motywu wewnątrz naszej strony */
.entry-content > .wp-block-group.alignfull { margin-left:0; margin-right:0; }
.entry-content > * { max-width:none; }/* 3) Nagłówki jak w serwisie (Comfortaa + granat) i logiczna hierarchia */
.nlw-section h1, .nlw-section h2, .nlw-section h3 {
font-family:var(–ff-alt); color:var(–navy); font-weight:600; margin:0 0 10px;
}
.nlw-hero h1 { font:600 var(–fs-hero)/1.2 var(–ff-alt); }
.nlw-title { border-left:1px solid var(–green); padding:15px 0 15px 20px; margin-bottom:20px; }
.nlw-title h2 { font:600 var(–fs-h2)/1.3 var(–ff-alt); }/* 4) Tekst bazowy + obrazki */
.nlw-section p { font:400 16px/26px var(–ff-base); color:var(–ink); }
.nlw-section img { max-width:100%; height:auto; display:block; }/* 5) Hero: układ 2-kolumnowy jak na podstronie (content obok grafiki) */
.nlw-hero .nlw-inner { display:grid; gap:24px; align-items:center; }
@media (min-width:900px){ .nlw-hero .nlw-inner { grid-template-columns: 1.15fr .85fr; } }
.nlw-hero .nlw-media img { border-radius:10px; box-shadow:0 3px 6px rgba(0,0,0,.16); }/* 6) Karty/listy (spójnie z panelem na platformie) */
.nlw-card { background:#fff; border-radius:10px; box-shadow:0 3px 6px rgba(0,0,0,.16); padding:20px; }
.nlw-list { display:grid; gap:10px; }
.nlw-item { display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid rgba(24,21,110,.12); border-radius:12px; padding:12px; }
.nlw-item b { color:var(–navy); }/* 7) Formularz (underline + fokus w brandzie, szerokości jak w motywie) */
.nlw-form { display:grid; gap:12px; margin-top:12px; }
.nlw-row { display:grid; gap:10px; }
@media (min-width:720px){ .nlw-row { grid-template-columns:1fr 1fr; } }
.nlw-label { font-size:13px; color:var(–muted); }
.nlw-input {
width:100%; padding:14px 10px; font:400 14px var(–ff-base);
border:0; border-bottom:1px solid var(–green); outline:none; background:#fff;
transition:border-color .2s ease;
}
.nlw-input:focus { border-bottom-color:var(–navy); }
.nlw-help { font-size:12px; color:var(–muted); }/* 8) CTA zgodne ze stylem przycisków ze strony */
.nlw-cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.nlw-btn {
display:inline-block; border:0; border-radius:5px; cursor:pointer;
font:700 16px/1 var(–ff-base); padding:12px 18px; text-align:center;
transition:background .2s ease,color .2s ease, box-shadow .2s ease;
text-decoration:none;
}
.nlw-btn–navy { background:var(–navy); color:#fff; }
.nlw-btn–navy:hover { background:var(–green); color:#fff; }
.nlw-btn–outline { background:#fff; color:var(–navy); border:2px solid var(–green); }
.nlw-btn–outline:hover { box-shadow:0 3px 6px rgba(0,0,0,.16); }/* 9) Modal „Dziękujemy” nad wszystkim (z-index ponad motywem) */
#nlw-thanks.nlw-modal { z-index:999999; }
} 