/* ========================================================
   Poppins, self-hosted
   The theme, this stylesheet and the templates all ask for Poppins — 168
   references — but nothing ever served it, so every label, menu item and
   counter silently fell back to a default face. Here it is, three weights,
   latin and latin-ext, 48 KB in total.
   ======================================================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-includes/fonts/poppins/poppins-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-includes/fonts/poppins/poppins-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/wp-includes/fonts/poppins/poppins-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/wp-includes/fonts/poppins/poppins-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/wp-includes/fonts/poppins/poppins-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/wp-includes/fonts/poppins/poppins-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* public/wp-includes/css/skorwider-chrome.css
 *
 * Mobile chrome for the blog family: the blog grid, the category/tag archives
 * and the post pages. On a 390px phone the top bar (186px) and the brand
 * block (486px) pushed the first post to y≈742 — more than a screen of
 * scrolling before any content. Everything here is scoped to small screens,
 * so desktop is untouched.
 *
 * Loaded by scripts/build-blog-index.mjs (blog + archives) and
 * scripts/build-emdash-posts-html.mjs (post pages).
 */

/* ========================================================
   1. TOP BAR — full message, centred, quietly dismissible
   ======================================================== */
/* Subtle grey text tag at the top of the page */
.skorwider-topbar-restore {
  display: inline-flex !important;
  position: absolute !important;
  top: 14px !important;
  right: calc(max(16px, (100vw - 1200px) / 2 + 180px)) !important;
  z-index: 9999 !important;
  height: auto !important;
  padding: 4px 6px !important;
  gap: 4px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8892a0 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.skorwider-topbar-restore:hover {
  color: #3e60a9 !important;
}

@media (max-width: 860px) {
  .skorwider-topbar-restore {
    top: 14px !important;
    right: 56px !important;
    font-size: 10px !important;
  }
}


/* ========================================================
   Dyrektywa Topbar — Refined, Minimal & Cohesive
   - Deep brand royal blue (#3e60a9) with magenta bottom accent line (#e6157a).
   - "CZERWIEC 2026" as an integrated minimal pill badge: crisp, no tilted sticker,
     naturally aligned with the text for a clean, editorial look.
   - Button keeps its color when clicked / focused (transparent with white border,
     white text, never turning into an opaque white rectangle).
   - Ultra-compact, centered, balanced.
   ======================================================== */
.skorwider-topbar {
  position: relative;
  background: #3e60a9 !important;
  border-bottom: 2px solid #e6157a !important;
  color: #ffffff !important;
  padding: 8px 24px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

.skorwider-topbar .topbar-content {
  max-width: 980px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

/* Minimalist integrated date pill */
.skorwider-topbar .topbar-badge {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  transform: none !important;
}

.skorwider-topbar .topbar-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.skorwider-topbar .topbar-text em {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* CTA button: keeps transparent background and white text when clicked/focused! */
html body .skorwider-topbar .topbar-cta,
html body .skorwider-topbar a.topbar-cta {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

/* On hover: soft subtle brightening without inverting to white */
html body .skorwider-topbar .topbar-cta:hover,
html body .skorwider-topbar a.topbar-cta:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
}

/* On click/active/focus: DO NOT change to solid white; stay sleek transparent */
html body .skorwider-topbar .topbar-cta:focus,
html body .skorwider-topbar a.topbar-cta:focus,
html body .skorwider-topbar .topbar-cta:active,
html body .skorwider-topbar a.topbar-cta:active {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
  transform: scale(0.98) !important;
  outline: none !important;
}

.skorwider-topbar .topbar-cta .arrow {
  display: inline-block !important;
  transition: transform 0.2s ease;
}

html body .skorwider-topbar .topbar-cta:hover .arrow {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .skorwider-topbar {
    padding: 6px 10px 8px !important;
  }

  .skorwider-topbar .topbar-content {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
    padding: 0 24px !important;
  }

  .skorwider-topbar .topbar-badge {
    position: static !important;
    font-size: 8.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    padding: 1.5px 7px !important;
    margin-bottom: 1px !important;
    transform: none !important;
  }

  .skorwider-topbar .topbar-text {
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    white-space: normal !important;
    margin: 0 !important;
  }

  .skorwider-topbar .topbar-text em {
    display: inline !important;
    margin-left: 4px !important;
    margin-top: 0 !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.95) !important;
  }

  /* Compact, harmonious, understated button on mobile */
  html body .skorwider-topbar .topbar-cta,
  html body .skorwider-topbar a.topbar-cta {
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    padding: 3px 9px !important;
    margin-top: 2px !important;
    border-radius: 3px !important;
    align-self: center !important;
    gap: 4px !important;
  }

  html body .skorwider-topbar .topbar-cta .arrow {
    font-size: 10px !important;
  }
}
/* A quiet × in the corner: no pink, no box, just enough to be findable.
   Available on every screen size. */


.skorwider-topbar-hide {
  display: flex !important;
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.skorwider-topbar-hide:hover,
.skorwider-topbar-hide:focus-visible {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.skorwider-topbar-hide svg {
  width: 14px !important;
  height: 14px !important;
}

html.skorwider-topbar-hidden .skorwider-topbar {
  display: none !important;
}

/* Vertical Side Tab on the edge (like the 3-dot rail) — Unobtrusive, Elegant */
.skorwider-topbar-restore {
  display: inline-flex !important;
  position: fixed !important;
  right: 0 !important;
  top: 42% !important;
  transform: translateY(-50%) !important;
  z-index: 140 !important;
  height: auto !important;
  padding: 14px 7px !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid #e8edf3 !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  box-shadow: none !important;
  color: #64748b !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.skorwider-topbar-restore:hover,
.skorwider-topbar-restore:focus-visible {
  color: #e6157a !important;
  background: #ffffff !important;
  border-color: #e6157a !important;
  padding-right: 10px !important;
  box-shadow: none !important;
}

.skorwider-topbar-restore svg {
  width: 12px !important;
  height: 12px !important;
  transform: rotate(-90deg) !important;
}

@media (max-width: 768px) {
  .skorwider-topbar-restore {
    top: 38% !important;
    padding: 12px 6px !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }
}

@keyframes skorwider-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
  .skorwider-topbar-hide {
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
  }
  .skorwider-topbar-hide svg {
    width: 12px !important;
    height: 12px !important;
  }

}

/* ========================================================
   1c. NAVIGATION DRAWER — slides in, page stays visible behind
   ======================================================== */
.skorwider-nav-drawer {
  position: fixed;
  /* Level with the button that opens it, not above it — the height is set from
     that button in skorwider-chrome.js. */
  top: var(--skorwider-nav-top, 0px);
  /* Right edge aligned with the button that opens it, so the panel never
     reaches past it. */
  right: var(--skorwider-nav-right, 16px);
  bottom: auto;
  left: auto;
  z-index: 200;
  /* As tall as its items, not the whole screen. */
  max-height: calc(100vh - var(--skorwider-nav-top, 0px) - 18px);
  /* Half the phone's width, capped on larger screens. */
  width: clamp(168px, 50vw, 280px);
  padding: 8px 0 10px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  transform: translateX(102%) scale(0.99);
  transform-origin: top right;
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.32s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.skorwider-nav-drawer.is-open {
  transform: none;
  visibility: visible;
}

/* The links settle in one after another, so opening reads as a movement
   rather than a slab appearing. */
.skorwider-nav-drawer-links a {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.26s ease, transform 0.26s ease, color 0.2s ease;
}

.skorwider-nav-drawer.is-open .skorwider-nav-drawer-links a {
  opacity: 1;
  transform: none;
}

.skorwider-nav-drawer.is-open .skorwider-nav-drawer-links a:nth-child(1) { transition-delay: 0.04s; }
.skorwider-nav-drawer.is-open .skorwider-nav-drawer-links a:nth-child(2) { transition-delay: 0.07s; }
.skorwider-nav-drawer.is-open .skorwider-nav-drawer-links a:nth-child(3) { transition-delay: 0.1s; }
.skorwider-nav-drawer.is-open .skorwider-nav-drawer-links a:nth-child(4) { transition-delay: 0.13s; }
.skorwider-nav-drawer.is-open .skorwider-nav-drawer-links a:nth-child(5) { transition-delay: 0.16s; }
.skorwider-nav-drawer.is-open .skorwider-nav-drawer-links a:nth-child(6) { transition-delay: 0.19s; }

@media (prefers-reduced-motion: reduce) {
  .skorwider-nav-drawer,
  .skorwider-nav-drawer-links a {
    transition-duration: 0.01ms;
  }
}

.skorwider-nav-drawer-links {
  display: flex;
  flex-direction: column;
  padding: 6px 0 0;
}

.skorwider-nav-drawer-links a {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  box-shadow: none !important;
  text-align: right;
  color: #e91e63;
  text-decoration: none;
  padding: 14px 16px;
  border-bottom: 1px solid #fdf0f5;
  transition: color 0.2s ease, background 0.2s ease, padding-right 0.2s ease;
}

.skorwider-nav-drawer-links a:hover,
.skorwider-nav-drawer-links a:focus-visible {
  background: #fdf4f7;
  padding-right: 20px;
}

.skorwider-nav-drawer-links a.is-current {
  font-weight: 600;
}

.skorwider-nav-drawer-links a:last-child {
  border-bottom: none;
}

.skorwider-nav-drawer-links a:hover,
.skorwider-nav-drawer-links a:focus-visible {
  color: #c2185b;
  background: rgba(233, 30, 99, 0.05);
  padding-right: 24px;
}

/* The page you are on: same pink, a shade of background and a touch bolder. */
.skorwider-nav-drawer-links a.is-current {
  font-weight: 700;
  background: rgba(233, 30, 99, 0.06);
}

@media (min-width: 981px) {
  .skorwider-nav-drawer,
}

/* The menu button is a phone affordance: on desktop the inline navigation is
   already on screen. Without this the button showed up unstyled (or as a
   stray square) on wide screens. */
.skorwider-nav-toggle {
  display: none;
}

/* ========================================================
   1d. SITE NAVIGATION (rendered from EmDash's primary menu)
   ======================================================== */
.skorwider-nav-links {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: small;
}

.skorwider-nav-links a {
  color: #e91e63 !important;
  text-decoration: none;
  /* The WordPress markup separated the links with <br>, which made a column. */
  display: block;
}

.skorwider-nav-links a:hover {
  color: #c2185b !important;
}

@media (max-width: 980px) {
  .skorwider-nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 11px;
    margin-top: 7px;
  }

  .skorwider-nav-links a {
    display: inline-block !important;
    font-size: 11px !important;
    line-height: 1.9 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* With the rail in place the inline links step aside. */
  html.skorwider-chrome-js .skorwider-nav-links {
    display: none !important;
  }
}

/* ========================================================
   2. BRAND BLOCK — smaller logo, menu links on one wrapped row
   ======================================================== */
@media (max-width: 980px) {
  /* The section that carries the brand logo. `:has()` keeps this off the
     section indices, which differ between the blog and the post template. */
  .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
  }

  .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_column {
    margin-bottom: 0 !important;
  }

  img[src*="logo_SkorwiderConsulting"] {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
  }

  /* The inline links stay as the no-JS fallback; with the chrome script the
     square button and its overlay take over. */
  span:has(> a[href="/#about_me"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 11px !important;
    margin-top: 7px !important;
  }

  span:has(> a[href="/#about_me"]) > br {
    display: none !important;
  }

  html.skorwider-chrome-js span:has(> a[href="/#about_me"]) {
    display: none !important;
  }

  html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) {
    position: relative;
    padding-bottom: 8px !important;
  }

  /* Discreet grey square icon button, aligned with the grid's 16px margin. */
  html.skorwider-chrome-js .skorwider-nav-toggle {
    display: flex;
    position: absolute;
    top: 12px;
    right: 16px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    /* Same pink as the items it opens. */
    color: #e91e63;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
  }

  html.skorwider-chrome-js .skorwider-nav-toggle svg {
    width: 17px;
    height: 17px;
  }

  html.skorwider-chrome-js .skorwider-nav-toggle:hover,
  html.skorwider-chrome-js .skorwider-nav-toggle:focus-visible {
    background: rgba(233, 30, 99, 0.07);
  }

  html.skorwider-chrome-js .skorwider-nav-toggle[aria-expanded="true"] {
    background: rgba(233, 30, 99, 0.07);
  }

  a[href="/#about_me"],
  a[href="/#oferta"],
  a[href="/case-studies#case-studies"],
  a[href="/case-studies/"],
  a[href="/blog#blog"],
  a[href="/blog/"],
  a[href="/#contact"] {
    display: inline-block !important;
    font-size: 11px !important;
    line-height: 1.9 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
}

/* ========================================================
   3. LESS AIR BEFORE THE CONTENT
   ======================================================== */
@media (max-width: 980px) {
  /* Blog grid and the category/tag archives. */
  #blog.et_pb_section {
    padding-top: 12px !important;
    padding-bottom: 32px !important;
  }

  .skorwider-controls-wrapper {
    margin-bottom: 10px !important;
  }

  /* Post pages: the hero image sits right under the brand block. */
  .entry-featured-image-hero {
    margin-bottom: 20px !important;
  }

  .et_pb_post_content_0_tb_body > .et_pb_row,
  .et_pb_post_content_0_tb_body {
    padding-top: 0 !important;
  }
}

/* ========================================================
   4. FILTER MENU — a bottom sheet on phones
   Reaching a dropdown pinned under a button near the top of the page is
   awkward one-handed; a sheet sits where the thumb is.
   ======================================================== */
@media (max-width: 768px) {
  /* Only the filter menu becomes a sheet. The three-dot menu on a card is a
     small popover and has to stay one: turning it into a full-width panel
     left its items floating over the cards. */
  #skorwider-filter-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 80vh !important;
    border-radius: 18px 18px 0 0 !important;
    border: none !important;
    border-top: 1px solid #eef2f7 !important;
    padding: 0 0 calc(8px + env(safe-area-inset-bottom)) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    animation: skorwider-sheet-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  @keyframes skorwider-sheet-in {
    from {
      transform: translateY(14px);
      opacity: 0.4;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Grab handle. */
  #skorwider-filter-menu::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 4px auto;
    border-radius: 2px;
    background: #e2e8f0;
  }

  .skorwider-menu-row {
    padding: 14px 18px !important;
    font-size: 15px !important;
  }

  .skorwider-menu-row-value {
    font-size: 13px !important;
  }

  .skorwider-menu-item {
    padding: 13px 18px !important;
    font-size: 14px !important;
    border-radius: 0 !important;
  }

  /* Card menus keep the popover shape, just roomier. */
  .skorwider-card-menu .skorwider-menu-dropdown {
    min-width: 210px !important;
    max-height: min(60vh, 320px) !important;
    overflow-y: auto !important;
    padding: 6px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    border-color: #eef2f7 !important;
  }

  .skorwider-card-menu .skorwider-menu-item {
    border-radius: 8px !important;
    padding: 11px 12px !important;
    font-size: 13.5px !important;
  }

  .skorwider-card-menu .skorwider-menu-info {
    padding: 8px 12px 6px !important;
    font-size: 12px !important;
  }

  .skorwider-menu-back {
    padding: 12px 18px !important;
    font-size: 11px !important;
  }

  .skorwider-menu-label {
    padding: 10px 18px 6px !important;
  }

  .skorwider-menu-sep {
    margin: 4px 0 !important;
  }

  .skorwider-date-filters {
    padding: 4px 18px 14px !important;
  }

  .skorwider-date-field {
    padding: 8px 0 !important;
  }

  .skorwider-date-field select {
    font-size: 15px !important;
    padding: 10px 24px 10px 8px !important;
    max-width: 62% !important;
  }

  .skorwider-cols {
    padding: 6px 18px 14px !important;
  }

  .skorwider-cols-btn {
    min-width: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
  }
}

/* ========================================================
   Image loading — quiet by design
   No tint, no placeholder, no movement: the picture simply fades in over a
   third of a second. The fade needs JavaScript to be removed, hence the scope.
   ======================================================== */
html.skorwider-chrome-js .et_pb_image_container img,
html.skorwider-chrome-js .entry-featured-image-url img,
html.skorwider-chrome-js .entry-featured-image-hero img {
  opacity: 0;
  transition: opacity 0.34s ease-out;
}

html.skorwider-chrome-js .et_pb_image_container img.is-loaded,
html.skorwider-chrome-js .entry-featured-image-url img.is-loaded,
html.skorwider-chrome-js .entry-featured-image-hero img.is-loaded,
html.skorwider-chrome-js .et_pb_image_container img.is-failed,
html.skorwider-chrome-js .entry-featured-image-url img.is-failed,
html.skorwider-chrome-js .entry-featured-image-hero img.is-failed {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.skorwider-chrome-js .et_pb_image_container img,
  html.skorwider-chrome-js .entry-featured-image-url img,
  html.skorwider-chrome-js .entry-featured-image-hero img {
    transition: none;
  }
}

/* Divi's own back-to-top square: replaced by the action rail on post pages,
   which is styled like the like/save/share buttons. */
.et_pb_scroll_top {
  display: none !important;
}

/* Eliminate Divi's legacy inset 0 0 18px inner shadow on post cards & thumbnails */
.et_pb_blog_0_tb_body .et_pb_post .entry-featured-image-url,
.et_pb_blog_0_tb_body .et_pb_post img,
.et_pb_blog_0_tb_body .et_pb_post .et_pb_slides,
.et_pb_blog_0_tb_body .et_pb_post .et_pb_video_overlay,
.et_pb_column_2_tb_body article .entry-featured-image-url,
.et_pb_column_2_tb_body article img,
.entry-featured-image-url,
.et_pb_image_container .entry-featured-image-url,
.et_pb_image_container img {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.et_pb_scroll_top,
.et_pb_scroll_top.et-pb-icon,
.et_pb_scroll_top.et-visible,
.et_pb_scroll_top.et-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ========================================================
   HOMEPAGE MOBILE REFINEMENTS (100% faithful to original design)
   Fixes Divi responsiveness quirks: eliminates squeezed 232px width,
   removes artificial 140px gap in contact section, and restores natural
   breathing room to offer cards and paragraphs.
   ======================================================== */
@media (max-width: 768px) {
  /* 1. Contact Form & Blue Box (Section #contact / row 11) */
  .et_pb_section_12 .et_pb_row_11,
  #contact .et_pb_row {
    width: 92% !important;
    max-width: 92% !important;
    margin: 0 auto !important;
    padding: 30px 16px !important;
  }

  .et_pb_section_12 .et_pb_column_21,
  #contact .et_pb_column:first-child {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* Eliminate Divi's artificial 140px gap pushing down the blue contact box */
  .et_pb_section_12 .et_pb_column_22,
  #contact .et_pb_column:last-child {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .et_pb_contact_form {
    width: 100% !important;
  }

  .et_pb_contact_form p input,
  .et_pb_contact_form p textarea {
    width: 100% !important;
  }

  /* 2. Three Colorful Offer Cards (Section 4) */
  .et_pb_section_4 .et_pb_row_3,
  #oferta .et_pb_row {
    width: 92% !important;
    max-width: 92% !important;
    margin: 0 auto !important;
  }

  .et_pb_section_4 .et_pb_column,
  #oferta .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }

  .et_pb_section_4 .et_pb_column .et_pb_text {
    padding: 38px 24px !important;
    margin: 0 !important;
  }

  /* Keep original white & blue text colors 100%, eliminate artificial letter-spacing */
  .et_pb_section_4 .et_pb_text,
  .et_pb_section_4 .et_pb_text_inner,
  .et_pb_section_4 h1,
  .et_pb_section_4 h2,
  .et_pb_section_4 p,
  .et_pb_section_4 span {
    letter-spacing: normal !important;
  }

  .et_pb_section_4 p {
    line-height: 1.6 !important;
    font-size: 14px !important;
  }

  /* 3. Text & Consulting Sections (Doradztwo, Strategia, Zespoły) */
  .et_pb_section_5, .et_pb_section_6, .et_pb_section_7,
  .et_pb_section_8, .et_pb_section_9, .et_pb_section_10 {
    padding: 24px 0 !important;
  }

  .et_pb_section_5 .et_pb_row, .et_pb_section_6 .et_pb_row, .et_pb_section_7 .et_pb_row,
  .et_pb_section_8 .et_pb_row, .et_pb_section_9 .et_pb_row, .et_pb_section_10 .et_pb_row {
    width: 92% !important;
    max-width: 92% !important;
    margin: 0 auto !important;
    padding: 16px 0 !important;
  }

  /* Eliminate Divi's letter-spacing: 1px on text-inner without touching original font or colors */
  .et_pb_section_5 .et_pb_text_inner,
  .et_pb_section_6 .et_pb_text_inner,
  .et_pb_section_7 .et_pb_text_inner,
  .et_pb_section_8 .et_pb_text_inner,
  .et_pb_section_9 .et_pb_text_inner,
  .et_pb_section_10 .et_pb_text_inner {
    letter-spacing: normal !important;
  }

  /* Restore natural paragraph rhythm without overriding font colors */
  .et_pb_section_5 p,
  .et_pb_section_6 p,
  .et_pb_section_7 p,
  .et_pb_section_8 p,
  .et_pb_section_9 p,
  .et_pb_section_10 p {
    letter-spacing: normal !important;
    line-height: 1.6 !important;
  }
}

/* ========================================================
   DYREKTYWA 2026: Slide-in Card (1) & Side Drawer (2)
   ======================================================== */

/* Scrim / Backdrop */
.dyrektywa-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.dyrektywa-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Side Drawer (Option 2) */
.dyrektywa-drawer {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(300px, 85vw, 420px);
  background: #3e60a9;
  border-left: 3px solid #e6157a;
  color: #ffffff;
  z-index: 100001;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
  transform: translateX(105%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}
.dyrektywa-drawer.is-open {
  transform: translateX(0);
}

.dyrektywa-drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  transition: color 0.2s;
}
.dyrektywa-drawer-close:hover {
  color: #ffffff;
}

.dyrektywa-drawer-badge {
  display: inline-block;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 4px 12px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none !important;
  margin-bottom: 20px;
}

.dyrektywa-drawer-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 18px;
  color: #ffffff;
}

.dyrektywa-drawer-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 24px;
}

.dyrektywa-drawer-list {
  list-style: none;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dyrektywa-drawer-list li {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  padding-left: 20px;
  position: relative;
}

.dyrektywa-drawer-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #ffb4d6;
  font-weight: bold;
}

.dyrektywa-drawer-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: #3e60a9 !important;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: none !important;
  letter-spacing: 0.05em;
  padding: 14px 24px;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  /* The label is a fixed call to action: it must read as one line, so it is
     allowed to shrink rather than wrap. See the narrow-screen rules below. */
  white-space: nowrap;
  max-width: 100%;
}
.dyrektywa-drawer-cta:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Slide-in Floating Card (Option 1) */
.dyrektywa-card {
  box-sizing: border-box;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: clamp(280px, 90vw, 340px);
  background: #ffffff;
  border-top: 3px solid #e6157a;
  border-radius: 2px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
  z-index: 99990;
  padding: 22px 20px 20px;
  transform: translateY(140%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, visibility 0.45s ease;
}
.dyrektywa-card.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.dyrektywa-card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  transition: color 0.2s;
}
.dyrektywa-card-close:hover {
  color: #1e293b;
}

.dyrektywa-card-badge {
  display: inline-block;
  background: #3e60a9;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none !important;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.dyrektywa-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #3e60a9;
  line-height: 1.3;
  margin-bottom: 6px;
}

.dyrektywa-card-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: #64748b;
  margin-bottom: 16px;
}

.dyrektywa-card-cta {
  box-sizing: border-box;
  display: block;
  text-align: center;
  background: #e6157a;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none !important;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.dyrektywa-card-cta:hover {
  background: #c90e66;
}

@media (max-width: 640px) {
  .dyrektywa-card {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
  }

  /* Narrow phones: the drawer is wide enough that the label fits on one line
     at full size, but the side padding has to give it the room. */
  .dyrektywa-drawer {
    width: min(92vw, 420px);
    padding: 30px 22px;
  }
  .dyrektywa-drawer-cta {
    padding: 15px 16px;
    font-size: 12px;
    letter-spacing: 0.04em;
    width: 100%;
  }
}

/* Very narrow phones (iPhone SE class): shrink the label rather than let it
   break, and keep the button full width so it still reads as one target. */
@media (max-width: 380px) {
  .dyrektywa-drawer {
    width: min(94vw, 420px);
    padding: 26px 18px;
  }
  .dyrektywa-drawer-cta {
    padding: 14px 12px;
    font-size: 11px;
    letter-spacing: 0.03em;
  }
}

/* Dyrektywa topbar is replaced by the 2+1 drawer and floating card. The Divi
   section that wrapped it is still in the markup and still occupies ~72px, so
   it is collapsed too -- otherwise the header sits 72px down the page and the
   logo no longer lines up with /nowy-wyglad/. */
.skorwider-topbar {
  display: none !important;
}

/* Match by what the section holds, not by its Divi id: the exported pages
   number their sections differently. Pages built from the Divi theme builder
   call it .et_pb_section_0, post pages call it .et_pb_section_0_tb_header,
   and a class selector on one id would miss the other. */
html.skorwider-chrome-js .et_pb_section:has(.skorwider-topbar):not(:has(img[src*="logo_SkorwiderConsulting"])) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}



/* ========================================================
   COMPACT HEADER FOR LEGACY PAGES (blog, posts, case studies)
   The Divi export renders the brand logo at ~478px and pads the
   header to ~356px. /nowy-wyglad/ uses a 180px logo in a 138px bar.
   These rules bring the legacy pages onto that same compact header.
   ======================================================== */
html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) {
  padding: 14px 0 !important;
}

/* Divi's clearfix pseudo-elements become flex items once the row is a flex
   container, and the row's `gap` is then inserted in front of them. That
   pushed the menu 24px in from the right edge. They are not needed here. */
html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_row::before,
html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_row::after {
  content: none !important;
  display: none !important;
}

/* Same container as /nowy-wyglad/: 1200px wide with 24px side padding, so the
   logo and the menu line up with the preview page (logo at 24px inside the
   container, menu flush with its right edge). */
html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_row {
  width: 100% !important;
  max-width: 1200px !important;
  padding: 0 24px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  box-sizing: border-box !important;
}

html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_column {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  flex: 0 1 auto !important;
}

html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_image,
html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_text {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.skorwider-chrome-js img[src*="logo_SkorwiderConsulting"] {
  width: 180px !important;
  max-width: 180px !important;
  height: auto !important;
  display: block;
}

/* The menu sits hard right, matching the preview page. `margin-left: auto` is
   used rather than relying on justify-content, because Divi's gutter rules
   otherwise keep the menu near the middle of the row. */
html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_column:last-child {
  margin-left: auto !important;
  margin-right: 0 !important;
}

html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_column:first-child {
  margin-right: 0 !important;
}

html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_column:last-child,
html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_text_inner,
html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_text_inner > div {
  text-align: right !important;
}

/* One nav type scale everywhere, so the blog header matches /nowy-wyglad/. */
html.skorwider-chrome-js .skorwider-nav-links a,
.skorwider-nav-links a {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.8 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

@media (max-width: 980px) {
  html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) {
    padding: 10px 0 !important;
  }
  html.skorwider-chrome-js .et_pb_section:has(img[src*="logo_SkorwiderConsulting"]) .et_pb_row {
    padding: 0 16px !important;
  }
  html.skorwider-chrome-js img[src*="logo_SkorwiderConsulting"] {
    width: 140px !important;
    max-width: 140px !important;
  }
}

/* ========================================================
   CLEAN EDITORIAL BYLINE FOR POSTS
   Removes heavy styling, uppercase 'PRZEZ', aligns with
   minimal brand aesthetic (Gosia Skorwider · date · category)
   ======================================================== */
.et_pb_title_meta_container,
.post-meta {
  font-family: 'Poppins', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
  margin-bottom: 24px !important;
}

.et_pb_title_meta_container a,
.post-meta a {
  color: #e6157a !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  transition: opacity 0.2s ease !important;
}

.et_pb_title_meta_container a:hover,
.post-meta a:hover {
  opacity: 0.75 !important;
}

.et_pb_title_meta_container .published,
.post-meta .published {
  color: #64748b !important;
  font-weight: 500 !important;
}

/* ========================================================
   1z. EmDash visual-edit chrome (off by user request)
   The EmDash plugin injects an admin-only editing chip into every
   public page. We've decided we don't want it floating over the live
   site for editors who happen to be signed in. The admin at
   /_emdash/admin still works — this just hides the on-page surface.
   ======================================================== */
#emdash-toolbar,
#emdash-toolbar-bootstrap {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}