/*
Theme Name: tafla-base-theme
Theme URI: https://www.design-tafla.com
Author: Tafla (Paweł)
Author URI: https://www.design-tafla.com
Description: design-tafla
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 5.7
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tafla-base-theme
Tags: tafla, mobile-friendly, responsive, WCAG, SEO, UX, fast-load, optimized
*/

/* [BUTTONY] */
/* Kontur */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 1px solid var(--wp--preset--color--primary-100);
    color: var(--wp--preset--color--primary-100);
}

/* Specjalny */
.wp-block-button.is-style-special .wp-block-button__link {
    background: var(--wp--preset--color--mono-0);
    border: 1px solid transparent;
    color: var(--wp--preset--color--primary-100);
}





/* NAV BAR BLUR */
.navbar-blur {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

}

/* ==========================================================================
   Wavy Nav – Human Biome
   ========================================================================== */

/* Link – kontener z overflow clip */
.wp-block-navigation-item__content {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column;
  overflow: hidden !important;
  height: 1.2em;
  line-height: 1.2em;
  vertical-align: middle;
  padding-right: 0.08em; /* kompensacja subpixel clipping */
}

/* Sizer – niewidoczny, trzyma szerokość linku */
.wp-block-navigation-item__content .wavy-sizer {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  padding-right: 0.08em; /* musi być spójny z linkiem */
}

/* Warstwy animacji – absolutne */
.wp-block-navigation-item__content .wavy-layer {
  display: flex;
  position: absolute;
  left: 0;
  white-space: nowrap;
}

/* Warstwa domyślna – widoczna w oknie */
.wp-block-navigation-item__content .wavy-layer--default {
  top: 0%;
}

/* Warstwa hover – schowana pod spodem */
.wp-block-navigation-item__content .wavy-layer--hover {
  top: 100%;
}

/* Pojedyncza litera */
.wp-block-navigation-item__content .wavy-char {
  display: inline-block;
  transform: translateY(0%);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.wp-block-navigation-item__content .wavy-char--space {
  width: 0.16em;
}

/* Hover – obie warstwy jadą w górę o 100% */
.wp-block-navigation-item:hover > .wp-block-navigation-item__content .wavy-layer--default .wavy-char,
.wp-block-navigation-item:hover > .wp-block-navigation-item__content .wavy-layer--hover .wavy-char {
  transform: translateY(-100%);
}

/* Focus – WCAG 2.1 AA */
.wp-block-navigation-item__content:focus-visible {
  outline: 3px solid #005fcc !important;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation-item__content .wavy-char {
    transition: none !important;
  }
}





/* ── Tab Navigation Buttons OLDD ── */
.tab-btn .wp-block-button__link {
  border-radius: 4px;
  transition: all 300ms ease;
}

/* Hover */
.tab-btn:hover .wp-block-button__link {
  color: var(--wp--preset--color--primary-120) !important;
  border: 1px solid var(--wp--preset--color--mono-75) !important;
  border-radius: 4px;
  box-shadow: -2px 6px 16px rgba(144, 244, 212, 0.08);
}

/* Focus (klawiatura) */
.tab-btn:focus-visible .wp-block-button__link {
  outline: 2px solid var(--wp--preset--color--primary-100);
  outline-offset: 2px;
}

/* Active / kliknięty */
.tab-btn.is-active .wp-block-button__link {
  color: var(--wp--preset--color--primary-120) !important;
  border: 1px solid var(--wp--preset--color--primary-120) !important;
  border-radius: 4px;
}

/* ── Tab Panels ── */
.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block; /* lub "flex" / "grid" jeśli Grupa ma taki layout */
}

/* W edytorze pokazuj wszystkie panele */
.editor-styles-wrapper .tab-panel {
  display: block;
}






/* TABS v.2 */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


.tab-content {
    margin: 0 !important;
}

.tab-content-group {
    margin-block-start: 0 !important;
}

.tab-button .wp-block-button__link {
  border-radius: 4px;
  transition: all 300ms ease;
}

/* Hover */
.tab-button:hover .wp-block-button__link {
  color: var(--wp--preset--color--primary-120) !important;
  border: 1px solid var(--wp--preset--color--mono-75) !important;
  border-radius: 4px;
  box-shadow: -2px 6px 16px rgba(144, 244, 212, 0.08);
}

/* Focus (klawiatura) */
.tab-button:focus-visible .wp-block-button__link {
  outline: 2px solid var(--wp--preset--color--primary-100);
  outline-offset: 2px;
}

/* Active / kliknięty */
.tab-button.active .wp-block-button__link {
  color: var(--wp--preset--color--primary-120) !important;
  border: 1px solid var(--wp--preset--color--primary-120) !important;
  border-radius: 4px;
}




.tab-content-2 {
    display: none;
}

.tab-content-2.active {
    display: block;
}

.tab-content-group-2 {
    margin-block-start: 0 !important;
}


.tab-button-2 .wp-block-button__link {
  transition: all 100ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Hover */
.tab-button-2:hover .wp-block-button__link {
  background: var(--wp--preset--color--mono-75) !important;
}

/* Active / kliknięty */
.tab-button-2.active .wp-block-button__link {
  color: var(--wp--preset--color--primary-120) !important;
  background: var(--wp--preset--color--mono-100) !important;
}


/* Tab Btn - pacjent */
.wp-block-button.pacjent .wp-block-button__link.wp-element-button::before {
    content: url('/wp-content/themes/tafla-base-theme/assets/icons/icon-pacjent.svg');
    width: 32px;
    height: 32px;
}

.tab-button-2.active.pacjent .wp-block-button__link.wp-element-button::before {
    content: url('/wp-content/themes/tafla-base-theme/assets/icons/icon-pacjent-active.svg');
    width: 32px;
    height: 32px;
}

/* Tab Btn - lekarz */
.wp-block-button.lekarz .wp-block-button__link.wp-element-button::before {
    content: url('/wp-content/themes/tafla-base-theme/assets/icons/icon-lekarz.svg');
    width: 32px;
    height: 32px;
}

.tab-button-2.active.lekarz .wp-block-button__link.wp-element-button::before {
    content: url('/wp-content/themes/tafla-base-theme/assets/icons/icon-lekarz-active.svg');
    width: 32px;
    height: 32px;
}

/* Tab Btn - dawca */
.wp-block-button.dawca .wp-block-button__link.wp-element-button::before {
    content: url('/wp-content/themes/tafla-base-theme/assets/icons/icon-dawca.svg');
    width: 32px;
    height: 32px;
}

.tab-button-2.active.dawca .wp-block-button__link.wp-element-button::before {
    content: url('/wp-content/themes/tafla-base-theme/assets/icons/icon-dawca-active.svg');
    width: 32px;
    height: 32px;
}

/* Tab Btn - FMT */
.wp-block-button.fmt .wp-block-button__link.wp-element-button::before {
    content: url('/wp-content/themes/tafla-base-theme/assets/icons/icon-fmt.svg');
    width: 32px;
    height: 32px;
}

.tab-button-2.active.fmt .wp-block-button__link.wp-element-button::before {
    content: url('/wp-content/themes/tafla-base-theme/assets/icons/icon-fmt-active.svg');
    width: 32px;
    height: 32px;
}

/* Pokaż w edytorze */
.editor-styles-wrapper .tab-content,
.editor-styles-wrapper .tab-content-2 {
    display: block;
}





/* Hide on scroll down, show on scroll up */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 9999;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.5s ease;
  will-change: transform;
}

.sticky-nav.nav--hidden {
  transform: translateY(-110%);
  box-shadow: none;
}

.sticky-nav.nav--scrolled {
 color: transparent;
}