/*
Theme Name: Plexipol Blog Design
Theme URI: https://blog.plexipol.com.pl
Author: Plexipol
Description: Wierna implementacja handoffu design_handoff_blog_plexipol — baza wiedzy SEO marki Plexipol. Saira Condensed + Inter + IBM Plex Mono, spektrum plexi, bursztyn/grafit/malina. Standalone classic theme (odpowiednik runnable handoffu; nie Elementor).
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
Text Domain: plexipol-blog-design
*/

/* ponytail: inline styles z prototypów zostają w szablonach (są pixel-perfect spec);
   tu tylko to, czego nie da się inline: media queries, keyframes, hover, pseudo, focus. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;font-family:Inter,system-ui,sans-serif;color:#1A1A1A;font-size:18px;line-height:1.7}
img{max-width:100%}
a{color:inherit}

/* ---- skip link (a11y) ---- */
.plx-skip{position:absolute;left:-9999px;top:0;background:#F9B411;color:#222;padding:10px 16px;z-index:200;font-weight:600;border-radius:0 0 6px 0}
.plx-skip:focus{left:0}

/* ---- focus visibility (a11y) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #1170C2;outline-offset:2px}

/* ---- header nav / burger ---- */
.plx-nav{display:flex}
.plx-burger{display:none}
.plx-mobile-menu{display:none}
.plx-mobile-menu.open{display:flex}

/* ---- grids (front) ---- */
.plx-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.plx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plx-real{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plx-footcols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px}

/* ---- page grids (kontakt / o nas) ---- */
.plx-contact{display:grid;grid-template-columns:1.1fr .9fr;gap:40px}
.plx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.plx-story{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.plx-services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plx-legal h2{font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:28px;margin:36px 0 12px;scroll-margin-top:96px}
.plx-legal p{margin:0 0 22px;color:#26292E}
.plx-legal a{color:#1170C2}
.plx-legal ul,.plx-legal ol{margin:0 0 22px;padding-left:22px;color:#26292E}
.plx-legal li{margin-bottom:8px}

/* ---- post card (loop element) ---- */
.plx-card{text-decoration:none;color:inherit;border:1px solid #E4E7EB;border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.plx-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(17,20,24,.12)}

/* ---- floating plexi shards (hero) ---- */
@keyframes plxFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--r,0deg) + 10deg))}}

/* ---- reading progress bar (single) ---- */
.plx-readbar{position:fixed;top:0;left:0;height:4px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:60;background:linear-gradient(90deg,#F9B411,#F68C2C,#F05139,#D52362,#7182C0,#3B58A8,#27336D)}

/* ---- ToC scroll-spy (single) ---- */
.plx-toc a{display:block;text-decoration:none;color:#5A6068;font-size:14.5px;padding:7px 0 7px 14px;border-left:2px solid #E4E7EB;line-height:1.4;transition:color .15s,border-color .15s}
.plx-toc a:hover{color:#1A1A1A}
.plx-toc a.active{color:#1A1A1A;font-weight:600;border-left-color:#F9B411}

/* ---- editorial content (single) ---- */
.plx-article-body{font-size:18px;line-height:1.7;color:#1A1A1A}
.plx-article-body h2{font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:30px;line-height:1.1;margin:42px 0 14px;scroll-margin-top:96px}
.plx-article-body h3{font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:23px;line-height:1.15;margin:30px 0 10px;scroll-margin-top:96px}
.plx-article-body p{margin:0 0 20px}
.plx-article-body a{color:#1170C2;text-decoration:underline;text-underline-offset:2px}
.plx-article-body a:hover{color:#3CA8FF}
.plx-article-body ul,.plx-article-body ol{margin:0 0 20px;padding-left:24px}
.plx-article-body li{margin:0 0 8px}
.plx-article-body img{border-radius:12px}
.plx-article-body blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:4px solid #B72151;font-family:'Saira Condensed',sans-serif;font-weight:600;text-transform:uppercase;font-size:26px;line-height:1.2;color:#222}
.plx-article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.plx-article-body thead th{background:#222;color:#fff;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;padding:11px 14px;text-align:left}
.plx-article-body tbody td{padding:11px 14px;border-bottom:1px solid #E4E7EB;font-family:'IBM Plex Mono',monospace}
.plx-article-body tbody tr:nth-child(even){background:#F5F6F8}

/* ---- FAQ accordion (native details) ---- */
.plx-faq details{border:1px solid #E4E7EB;border-radius:8px;margin-bottom:12px;background:#fff}
.plx-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:19px;color:#222}
.plx-faq summary::-webkit-details-marker{display:none}
.plx-faq summary::after{content:"+";color:#F9B411;font-size:26px;line-height:1;transition:transform .2s}
.plx-faq details[open] summary::after{transform:rotate(45deg)}
.plx-faq .plx-faq-a{padding:0 18px 18px;color:#5A6068;font-size:16px;line-height:1.6}

/* ---- cookie banner ---- */
.plx-cookie{position:fixed;left:0;right:0;bottom:0;z-index:120;background:#222222;color:#C9CCD2;display:none}
.plx-cookie.show{display:block}

/* ---- pagination (archive/search) ---- */
.plx-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 36px;
}
.plx-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  background: #fff;
  color: #1A1A1A;
  border: 1px solid #E4E7EB;
  text-decoration: none;
  font-weight: 500;
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.plx-pagination .page-numbers.current {
  background: #222;
  color: #fff;
  border-color: #222;
  font-weight: 600;
}
.plx-pagination a.page-numbers:hover {
  border-color: #222;
}
.plx-pagination .page-numbers.dots {
  border: 0;
  background: none;
  color: #9AA0A8;
}
.plx-pagination .next {
  color: #1170C2;
  font-weight: 600;
}

/* ---- WP core / comments alignment ---- */
.plx-comment-list{list-style:none;margin:0 0 28px;padding:0}
.plx-comment-list ol.children,.plx-comment-list ul.children{list-style:none;margin:0 0 0 28px;padding:0}
.plx-commentform{background:#F5F6F8;border:1px solid #E4E7EB;border-radius:12px;padding:22px;margin:0 0 8px}
.plx-commentform .comment-reply-title{display:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---- responsive ---- */
@media(max-width:1024px){
  .plx-single-grid{grid-template-columns:1fr !important}
  .plx-toc-wrap{display:none !important}
}
@media(max-width:900px){
  .plx-hero-grid{grid-template-columns:1fr;gap:34px}
  .plx-cards{grid-template-columns:repeat(2,1fr)}
  .plx-real{grid-template-columns:1fr}
  .plx-arch-grid{grid-template-columns:repeat(2,1fr) !important}
  .plx-services{grid-template-columns:repeat(2,1fr)}
  .plx-stats{grid-template-columns:repeat(2,1fr)}
  .plx-story{grid-template-columns:1fr;gap:32px}
}
@media(max-width:860px){
  .plx-contact{grid-template-columns:1fr}
}
@media(max-width:800px){
  .plx-nav{display:none}
  .plx-burger{display:flex}
  .plx-cards{grid-template-columns:1fr}
  .plx-arch-grid{grid-template-columns:1fr !important}
  .plx-h1{font-size:40px !important}
  .plx-conv{flex-direction:column !important;align-items:flex-start !important}
  .plx-footcols{grid-template-columns:1fr 1fr !important}
  .plx-wz-grid{grid-template-columns:1fr !important}
  .plx-article-body h2{font-size:26px}
  .plx-services{grid-template-columns:1fr}
  .plx-404{font-size:96px !important}
  .plx-article-body{overflow-x:auto;-webkit-overflow-scrolling:touch}.plx-article-body table{white-space:nowrap}
}
@media(max-width:520px){.plx-footcols{grid-template-columns:1fr !important}}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important}
  html{scroll-behavior:auto}
}

/* Formularz kontaktowy CF7 — odwzorowanie oryginalnego wyglądu (layout 1:1, realny mail). */
.plx-contact .plx-field{width:100%;background:#F8F9FB;border:1px solid #D6DAE0;border-radius:6px;padding:12px 14px;font-family:Inter,sans-serif;font-size:15px;color:#1A1A1A;box-sizing:border-box}
.plx-contact textarea.plx-field{resize:vertical;min-height:120px}
.plx-contact select.plx-field{cursor:pointer}
.plx-contact .plx-submit{background:#F9B411;color:#222;font-weight:600;font-size:15px;padding:14px 28px;border:0;border-radius:4px;cursor:pointer;font-family:Inter,sans-serif}
.plx-contact .wpcf7-acceptance .wpcf7-list-item{margin:0;display:flex;align-items:flex-start}
.plx-contact .wpcf7-acceptance input[type=checkbox]{margin:3px 10px 0 0;width:16px;height:16px;accent-color:#F9B411;flex:0 0 auto}
.plx-contact .wpcf7-response-output{border-radius:6px;font-size:14px;margin:14px 0 0!important;padding:10px 14px}
.plx-contact .wpcf7-not-valid-tip{color:#B72151;font-size:12.5px;margin-top:4px}
.plx-contact .wpcf7-spinner{margin-left:8px}



/* ==========================================================================
   Fluent Forms Grid Layout & Compact Style Enhancements (16.07.2026)
   ========================================================================== */

/* Subtelne i czytelne etykiety nad polami (opisy pól) */
.fluentform .ff-el-input--label {
  display: block !important;
  margin-bottom: 2px !important;
  text-align: left !important;
}
.fluentform .ff-el-input--label label {
  font-family: "Open Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #442763 !important; /* Spójny firmowy fiolet */
  margin: 0 !important;
  display: inline-block !important;
}
.fluentform .ff-el-is-required.asterisk-right label::after {
  content: " *" !important;
  color: #ea2b64 !important;
  font-weight: 700 !important;
}

/* Główne kontenery formularzy */
.fluentform form.frm-fluent-form {
  display: block !important;
  width: 100% !important;
}
.fluentform form.frm-fluent-form fieldset {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Domyślny styl dla wszystkich grup pól */
.fluentform form.frm-fluent-form .ff-el-group {
  margin-bottom: 0 !important;
  display: block !important;
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box !important;
}

/* Zmniejszona wysokość pól i marginesy */
.fluentform .ff-el-form-control {
  height: 38px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.fluentform textarea.ff-el-form-control {
  height: 70px !important;
  padding-top: 6px !important;
  line-height: 1.35em !important;
  resize: none !important;
}

/* Klasy kolumnowe (Grid) */
.fluentform form.frm-fluent-form .col-33 {
  flex: 1 1 calc(33.33% - 11px) !important;
  width: calc(33.33% - 11px) !important;
}
.fluentform form.frm-fluent-form .col-50 {
  flex: 1 1 calc(50% - 8px) !important;
  width: calc(50% - 8px) !important;
}
.fluentform form.frm-fluent-form .col-100 {
  flex: 1 1 100% !important;
  width: 100% !important;
}

/* GDPR / RODO checkbox inline alignment */
.fluentform .ff-el-form-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  text-align: left !important;
}
.fluentform .ff-el-form-check input[type="checkbox"] {
  margin: 3px 0 0 0 !important;
  flex-shrink: 0 !important;
  width: 15px !important;
  height: 15px !important;
  display: inline-block !important;
  float: none !important;
}
.fluentform .ff-el-form-check-label {
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #444 !important;
  cursor: pointer !important;
  display: inline !important;
  float: none !important;
}

/* Submit button adjustment */
.fluentform .ff-btn-submit {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  background: #3ea7ff !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) !important;
}
.fluentform .ff-btn-submit:hover {
  background: #F5821F !important;
  box-shadow: 0 4px 12px rgba(245,130,31,0.2) !important;
}
.fluentform form.frm-fluent-form .ff_submit_btn_wrapper {
  width: 100% !important;
  text-align: right !important;
  margin-top: 5px !important;
  box-sizing: border-box !important;
}

/* Select and file upload alignment */
.fluentform select.ff-el-form-control {
  height: 38px !important;
  padding: 6px 12px !important;
  line-height: 24px !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
}
.fluentform input[type="file"] {
  height: 38px !important;
  line-height: 26px !important;
  padding: 5px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Responsywność (Mobile Breakpoint) */
@media screen and (max-width: 720px) {
  .fluentform form.frm-fluent-form .col-33,
  .fluentform form.frm-fluent-form .col-50 {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}



/* ==========================================================================
   PLEXIPOL v4 - EDITORIAL CSS & UX OPTIMIZATIONS
   ========================================================================== */

/* Editorial Width & Readability */
.single-post .entry-content p,
.single-post .post-content p,
.single-post .elementor-widget-theme-post-content p {
  max-width: 72ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #1a1a1a !important;
}

/* Scroll Hint (Pure CSS Shadows) for Mobile Tables */
.entry-content table, .post-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: 
    linear-gradient(to right, white 30%, rgba(255,255,255,0)), 
    linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%, 
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), rgba(0,0,0,0)), 
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
  border-collapse: collapse;
  margin: 20px 0;
}

/* Oswald clamp scaling on Mobile */
h1.entry-title, h1.post-title, .single-post h1, .single-post h2 {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(24px, 5vw, 42px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.5px !important;
}

/* Touch targets optimization */
.plx-pagination a, .plx-pagination span, .nav-links a, .post-categories a {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
}

/* Responsive Table of Contents scroll behavior */
@media screen and (max-width: 720px) {
  .ez-toc-container, .rank-math-block, .toc_container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 12px !important;
  }
}



/* Progress Bar & Scroll Spy Podświetlenie */
#plx-read-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 5px;
  background: #F5821F !important;
  z-index: 99999;
  transition: width 0.1s ease;
  pointer-events: none;
}
.ez-toc-container li.is-active > a, 
.toc_container li.is-active > a, 
.rank-math-block li.is-active > a {
  color: #F5821F !important;
  font-weight: 700 !important;
  border-left: 2px solid #F5821F;
  padding-left: 6px;
  transition: all 0.2s ease;
}

/* Header Search Popover Style */
.plx-search-popover {
  position: absolute;
  right: 24px;
  top: 78px;
  width: 280px;
  height: 44px;
  background: #1b1b1c;
  border: 1px solid #383A40;
  border-radius: 6px;
  padding: 0 10px;
  display: none;
  z-index: 99;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.plx-search-popover.open {
  display: block;
  animation: plxFadeIn 0.15s ease-out;
}
@keyframes plxFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 800px) {
  .plx-search-popover {
    right: 76px;
    width: 220px;
  }
}


/* FULL-WIDTH & NO-BOXED RESET (Ecosystem Master) */
html,
body,
body.ast-desktop,
body.ast-plain-container,
body.ast-separate-container,
body.ast-boxed-container,
#page,
.site,
.site-content,
.ast-container,
.entry-content,
#primary,
#main {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* DEFINITIVE DESKTOP BAR REMOVAL */
.rzp-mobile-bar, .cdz-mobile-bar, .fol-mobile-bar, .pnw-mobile-bar, .pxp-mobile-bar, 
.plr-mobile-bar, .pol-mobile-bar, .rwz-mobile-bar, .stj-mobile-bar, .szy-mobile-bar, 
.czp-sticky-cta, #rzp-sticky-cta, #rw-sticky-cta, .plx-sticky-cta, .s24-sticky-mobile-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Fix: FluentForm .ff-screen-reader-element inherits width:100% from .ff-el-form-control,
   pushing page scrollWidth beyond viewport (whole page becomes horizontally scrollable). */
.ff-screen-reader-element{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;left:0!important;top:0!important}