/* ==========================================================================
   Yeti Accessibility Bar 2.3.4 — Stylesheet
   ========================================================================== */

/* --- Custom properties (global) --- */

:root {
  --yeti-ab-offset-top: 0px;
  --yeti-ab-extra-offset: 0px;
  --yeti-ab-z-bar: 9999;
  --yeti-ab-z-show: 10000;
  --yeti-ab-bg: #ffffff;
  --yeti-ab-surface: #ffffff;
  --yeti-ab-text: #111111;
  --yeti-ab-muted: #3f3f3f;
  --yeti-ab-link: #005a9c;
  --yeti-ab-border: #d5d5d5;
  --yeti-ab-focus: #00b6d7;
}

.admin-bar {
  --yeti-ab-offset-top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar {
    --yeti-ab-offset-top: 46px;
  }
}

/* ==========================================================================
   Bar component
   Classes are prefixed with .yeti-ab- so no @layer isolation is needed.
   ========================================================================== */

.yeti-ab-bar-wrap {
  position: sticky;
  top: calc(var(--yeti-ab-offset-top) + var(--yeti-ab-extra-offset));
  z-index: var(--yeti-ab-z-bar);
}

.yeti-ab-bar-wrap--fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--yeti-ab-offset-top) + var(--yeti-ab-extra-offset));
}

.yeti-ab-bar-wrap[hidden] {
  display: none !important;
}

.yeti-ab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 31px;
  background-color: rgba(0, 0, 0, 0.9);
  color: #f5f5f5;
  font-size: 18px;
  line-height: 1.2;
}

.yeti-ab-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.yeti-ab-group--secondary {
  margin-left: auto;
}

.yeti-ab-label {
  opacity: 0.95;
  margin-right: 4px;
  font-weight: 600;
  font-size: 16px;
}

.yeti-ab-btn {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: inherit;
  padding: 4px 14px;
  font-size: 14px;
  min-height: 32px;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

/* #1: Consolidated focus — single source of truth, no outline:none anywhere */
.yeti-ab-btn:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.yeti-ab-btn:focus-visible {
  outline: 2px solid var(--yeti-ab-focus);
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.95);
}

.yeti-ab-btn.is-active,
.yeti-ab-btn[aria-checked='true'] {
  background-color: #ffffff;
  color: #111111;
  border-color: #ffffff;
  transform: translateY(-1px);
}

.yeti-ab-btn--text {
  font-family: inherit;
}

.yeti-ab-btn--secondary {
  font-size: 13px;
  opacity: 0.95;
}

.yeti-ab-btn--secondary:hover,
.yeti-ab-btn--secondary:focus-visible {
  opacity: 1;
}

/* Mobile icon variants for color buttons */

.yeti-ab-color-mobile-icon,
.yeti-ab-color-mobile-beta {
  display: none;
}

.yeti-ab-color-mobile-icon svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.yeti-ab-color-mobile-icon--dark svg {
  fill: currentColor;
  stroke: none;
}

/* Hide/show toggle button styling */

.yeti-ab-btn[data-yeti-hide] {
  padding: 0;
  min-height: auto;
  border: 0;
  background: transparent;
}

.yeti-ab-btn[data-yeti-hide]:hover,
.yeti-ab-btn[data-yeti-hide]:focus-visible {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Toggle pill (ON / OFF indicator) */

.yeti-ab-toggle-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 62px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.yeti-ab-toggle-knob {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.yeti-ab-toggle-pill--on {
  background: #138a4f;
  color: #ffffff;
  flex-direction: row-reverse;
}

.yeti-ab-toggle-pill--off {
  background: #cc1f1f;
  color: #ffffff;
}

/* Floating "show bar" button */

.yeti-ab-show-button {
  position: fixed;
  top: calc(var(--yeti-ab-offset-top) + var(--yeti-ab-extra-offset) + 15px);
  right: 31px;
  z-index: var(--yeti-ab-z-show);
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

.yeti-ab-show-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: rgba(0, 0, 0, 0.88);
  color: #f5f5f5;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.yeti-ab-show-button .yeti-ab-toggle-pill {
  border-color: rgba(255, 255, 255, 0.55);
}

.yeti-ab-show-button[hidden] {
  display: none !important;
}

.yeti-ab-show-button:focus-visible {
  outline: 2px solid var(--yeti-ab-focus);
  outline-offset: 2px;
}

.yeti-ab-show-button:hover .yeti-ab-toggle-pill,
.yeti-ab-show-button:focus-visible .yeti-ab-toggle-pill {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.yeti-ab-show-button:hover .yeti-ab-show-label,
.yeti-ab-show-button:focus-visible .yeti-ab-show-label {
  border-color: rgba(255, 255, 255, 0.95);
}

/* Noscript fallback */

.yeti-ab-noscript {
  padding: 0.5rem 1.25rem;
  background-color: #fff3cd;
  color: #664d03;
  font-size: 14px;
  text-align: center;
}

/* ---- Responsive (mobile) ---- */

@media (max-width: 600px) {
  .yeti-ab-bar {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 7px;
    padding: 4px 8px;
    font-size: 9px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .yeti-ab-group {
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .yeti-ab-label {
    margin-right: 2px;
    font-size: 9px;
    white-space: nowrap;
  }

  .yeti-ab-btn {
    font-size: 8px;
    min-height: 16px;
    padding: 2px 6px;
    white-space: nowrap;
  }

  .yeti-ab-btn[data-yeti-color='light'],
  .yeti-ab-btn[data-yeti-color='dark'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .yeti-ab-btn[data-yeti-color='light'] {
    min-width: 24px;
    padding: 2px 5px;
  }

  .yeti-ab-btn[data-yeti-color='dark'] {
    min-width: 58px;
    padding: 2px 5px;
  }

  .yeti-ab-btn[data-yeti-color='light'] .yeti-ab-color-text,
  .yeti-ab-btn[data-yeti-color='dark'] .yeti-ab-color-text {
    display: none;
  }

  .yeti-ab-btn[data-yeti-color='light'] .yeti-ab-color-mobile-icon,
  .yeti-ab-btn[data-yeti-color='dark'] .yeti-ab-color-mobile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .yeti-ab-btn[data-yeti-color='dark'] .yeti-ab-color-mobile-beta {
    display: inline;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
  }

  .yeti-ab-btn--secondary {
    font-size: 8px;
  }

  .yeti-ab-toggle-pill {
    min-width: 36px;
    height: 14px;
    gap: 3px;
    padding: 0 3px;
    font-size: 7px;
  }

  .yeti-ab-toggle-knob {
    width: 7px;
    height: 7px;
  }

  .yeti-ab-group--secondary {
    margin-left: 0;
  }

  .yeti-ab-show-button {
    top: calc(var(--yeti-ab-offset-top) + var(--yeti-ab-extra-offset) + 14px);
    right: 16px;
  }

  .yeti-ab-show-label {
    font-size: 12px;
    padding: 4px 8px;
    right: calc(100% + 8px);
  }

  .yeti-ab-bar::-webkit-scrollbar {
    height: 4px;
  }
}

/* #11: Respect prefers-reduced-motion (covers transition AND transform) */

@media (prefers-reduced-motion: reduce) {
  .yeti-ab-btn,
  .yeti-ab-show-button {
    transition: none;
  }

  .yeti-ab-btn.is-active,
  .yeti-ab-btn[aria-checked='true'] {
    transform: none;
  }
}

/* ==========================================================================
   Dark color mode — theme overrides
   Uses html[data-yeti-color-mode='dark'] + !important to reliably override
   theme styles.  #5: No auto mode (removed in 2.3.0).
   ========================================================================== */

html[data-yeti-color-mode='dark'] {
  color-scheme: dark;
  --yeti-ab-bg: #000000;
  --yeti-ab-surface: #000000;
  --yeti-ab-text: #ffffff;
  --yeti-ab-muted: #ffffff;
  --yeti-ab-link: #ffd400;
  --yeti-ab-border: #ffffff;
}

/* Globalna baza schematu kolorow tylko dla dark mode. */
html[data-yeti-color-mode='dark'] body {
  background-color: var(--yeti-ab-bg) !important;
  color: var(--yeti-ab-text) !important;
}

/* Stanowcze objecie takze naglowka, stopki i wrapperow stopki. */
html[data-yeti-color-mode='dark'] :where(
  header,
  footer,
  .site-header,
  .site-footer,
  .site,
  .site-main,
  .site-content,
  .content-area,
  .entry,
  .entry-header,
  .entry-content,
  .entry-summary,
  .page-header,
  .post-inner,
  .widget,
  .widget-area,
  .comments-area,
  .search-modal-inner.modal,
  .footer-nav-widgets-wrapper,
  .wp-site-blocks,
  .wp-block-template-part,
  .wp-block-group,
  .wp-block-columns,
  .wp-block-column,
  .wp-block-post,
  .wp-block-post-template > li,
  .wp-block-query
) {
  background-color: var(--yeti-ab-surface) !important;
  color: var(--yeti-ab-text) !important;
  border-color: var(--yeti-ab-border) !important;
}

/* Dodatkowe elementy tekstowe i toggle maja dziedziczyc kolor tekstu w dark mode. */
html[data-yeti-color-mode='dark'] :where(
  .site-description,
  .toggle-inner,
  .toggle-text,
  .sd-content.wpl-likebox
) {
  color: var(--yeti-ab-text) !important;
}

/* Wymuszenie koloru ikon SVG na zgodny z kolorem tekstu. */
html[data-yeti-color-mode='dark'] :where(
  header,
  footer,
  .site-header,
  .site-footer,
  .site,
  .site-main,
  .site-content,
  .content-area,
  .entry,
  .entry-header,
  .entry-content,
  .entry-summary,
  .page-header,
  .post-inner,
  .widget,
  .widget-area,
  .comments-area,
  .search-modal-inner.modal,
  .footer-nav-widgets-wrapper,
  .wp-site-blocks,
  .wp-block-template-part,
  .wp-block-group,
  .wp-block-columns,
  .wp-block-column,
  .wp-block-post,
  .wp-block-post-template > li,
  .wp-block-query,
  .site-description,
  .toggle-inner,
  .toggle-text,
  .sd-content.wpl-likebox
) :where(svg, svg *, .svg-icon, .svg-icon *) {
  color: var(--yeti-ab-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Wykluczenie search-modal-inner.modal-inner z nadpisan dark mode. */
html[data-yeti-color-mode='dark'] .search-modal-inner.modal-inner,
html[data-yeti-color-mode='dark'] .search-modal-inner.modal-inner :where(*) {
  background-color: revert !important;
  color: revert !important;
  border-color: revert !important;
}

html[data-yeti-color-mode='dark'] .search-modal-inner.modal-inner :where(svg, svg *, .svg-icon, .svg-icon *) {
  color: revert !important;
  fill: revert !important;
  stroke: revert !important;
}

/* Logo area follows the same surface color in dark variants. */
html[data-yeti-color-mode='dark'] :where(
  .site-branding,
  .site-logo,
  .custom-logo-link,
  .wp-custom-logo,
  .custom-logo
) {
  background-color: var(--yeti-ab-surface) !important;
}

/* Headings */
html[data-yeti-color-mode='dark'] :where(
  .entry-title,
  .post-title,
  .wp-block-post-title,
  h1, h2, h3, h4, h5, h6
) {
  color: var(--yeti-ab-text) !important;
}

/* Meta, dates, authors */
html[data-yeti-color-mode='dark'] :where(
  .entry-meta,
  .post-meta,
  .posted-on,
  .byline,
  .cat-links,
  .tags-links,
  .wp-block-post-date,
  .wp-block-post-author,
  .wp-block-post-terms
) {
  color: var(--yeti-ab-muted) !important;
}

/* Podpisy i drobne opisy - wymuszenie koloru tekstu (zamiast szarosci motywu). */
html[data-yeti-color-mode='dark'] :where(
  cite,
  figcaption,
  .wp-caption-text,
  .post-meta,
  .entry-content .wp-block-archives li,
  .entry-content .wp-block-categories li,
  .entry-content .wp-block-latest-posts li,
  .wp-block-latest-comments__comment-date,
  .wp-block-latest-posts__post-date,
  .wp-block-embed figcaption,
  .wp-block-image figcaption,
  .wp-block-pullquote cite,
  .comment-metadata,
  .comment-respond .comment-notes,
  .comment-respond .logged-in-as,
  .pagination .dots,
  .entry-content hr:not(.has-background),
  hr.styled-separator,
  .has-secondary-color
) {
  color: var(--yeti-ab-text) !important;
}

/* Linki tresci i layoutu z pominieciem najczestszych przyciskow social. */
html[data-yeti-color-mode='dark'] a:not(.wp-block-social-link-anchor):not(.wp-social-link-anchor):not(.wp-block-button__link):not(.button):not([class*='button']) {
  color: var(--yeti-ab-link) !important;
}

/* Linkowane naglowki i metadane dziedzicza kolor tekstu. */
html[data-yeti-color-mode='dark'] :where(
  .entry-title a,
  .post-title a,
  .wp-block-post-title a,
  .entry-meta a,
  .post-meta a,
  .posted-on a,
  .byline a,
  .cat-links a,
  .tags-links a,
  .wp-block-post-date a,
  .wp-block-post-author a,
  .wp-block-post-terms a,
  h1 a,
  h2 a,
  h3 a,
  h4 a,
  h5 a,
  h6 a
) {
  color: inherit !important;
  text-decoration-color: currentColor;
}

/* Ujednolicanie iframe Jetpack Likes w dark mode (proba dopasowania kolorow). */
iframe.post-likes-widget.jetpack-likes-widget.yeti-ab-iframe-dark {
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
  color-scheme: dark;
  filter: invert(1) hue-rotate(180deg) contrast(1.06);
}

/* ==========================================================================
   Font-size line-height adjustments (text readability)
   ========================================================================== */

html[data-yeti-font-size='large'] :where(main, article, .entry-content) :where(
  p, li, blockquote, figcaption, cite, dt, dd, td, th,
  h1, h2, h3, h4, h5, h6
) {
  line-height: 1.7;
}

html[data-yeti-font-size='xlarge'] :where(main, article, .entry-content) :where(
  p, li, blockquote, figcaption, cite, dt, dd, td, th,
  h1, h2, h3, h4, h5, h6
) {
  line-height: 1.8;
}

html[data-yeti-font-size='small'] :where(main, article, .entry-content) :where(
  p, li, blockquote, figcaption, cite, dt, dd, td, th,
  h1, h2, h3, h4, h5, h6
) {
  line-height: 1.4;
}