/*
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.2
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
*/

html {
  scroll-behavior: smooth;
}

/* Layout */
.tafla-cf .cf-row {
  margin-bottom: var(--wp--preset--spacing--odleglosc-s);
}

.tafla-cf br {
  display: none;
}
.tafla-cf p {
  margin: 0;
}

.tafla-cf .wpcf7-submit {
margin-top: var(--wp--preset--spacing--odleglosc-s);
  border-radius: 8px;
  background: var(--wp--preset--color--mono-0);
  color: var(--wp--preset--color--mono-100);
  border-color: transparent;
 height: 48px;
}

.tafla-cf input,
.tafla-cf textarea {
  font-family: inherit;
}

.tafla-cf .cf-half {
  display: flex;
  gap: var(--wp--preset--spacing--odleglosc-s);
}
.tafla-cf .cf-half > div {
  flex: 1;
}

/* Label */
.tafla-cf label {
  display: block;
  margin-bottom: 0;
  color: var(--wp--preset--color--mono-25);
}

/* CF7 wrapper fix */
.tafla-cf .wpcf7-form-control-wrap {
  display: block;
  margin: 0;
  padding: 0;
}

/* Inputs & Textarea */
.tafla-cf input:not([type="submit"]),
.tafla-cf textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 var(--wp--preset--spacing--odleglosc-m);
  border: 1px solid var(--wp--preset--color--mono-75);
  border-radius: var(--wp--preset--spacing--odleglosc-s);
  background: var(--wp--preset--color--mono-100);
  color: var(--wp--preset--color--mono-0);
}
.tafla-cf textarea {
  height: 96px;
  min-height: 64px;
  padding: var(--wp--preset--spacing--odleglosc-s) var(--wp--preset--spacing--odleglosc-m);
  resize: vertical;
}
.tafla-cf ::placeholder {
  color: var(--wp--preset--color--mono-50);
}
.tafla-cf input:focus,
.tafla-cf textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary-160);
}

.tafla-cf .cf-consent label {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--odleglosc-s);
}

.tafla-cf .cf-consent .wpcf7-form-control-wrap {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--odleglosc-s);
}


.tafla-cf .cf-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--wp--preset--color--primary-160);
  cursor: pointer;
  flex-shrink: 0;
}

.tafla-cf .cf-consent .wpcf7-list-item-label {
  color: var(--wp--preset--color--mono-25);
}

.tafla-cf .cf-consent .wpcf7-list-item-label a {
  color: var(--wp--preset--color--primary-160);
}

.tafla-cf .cf-consent .wpcf7-list-item {
margin: 0; /* zeruje margines przed checkboxem */
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--odleglosc-s);
}

/* Submit */
.tafla-cf .wpcf7-submit {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.tafla-cf input[type="submit"] {
  pointer-events: auto !important;
}

/* Mobile */
@media (max-width: 768px) {
  .tafla-cf .cf-half {
    flex-direction: column;
  }
}


.wp-slider {
  position: relative;
}

/* FRONTEND */
.wp-slide {
  display: none;
  animation: fade 1.6s ease;
}

.wp-slide.is-active {
  display: block;
}

/* GUTENBERG / FSE EDITOR */
.editor-styles-wrapper .wp-slide {
  display: block;
}

.wp-slider-dots {
  display: flex;
  justify-content: center;
}

/* base dot */
.dot {
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.25);
  position: relative;
  overflow: hidden;
  transition: width 0.25s ease, background 0.25s ease;
  cursor: pointer; /* <- to dodaje klikalność */
}

.dot:not(.active):hover {
  cursor: pointer;
  background: var(--wp--preset--color--mono-50) !important;
}

/* ACTIVE = expanded */
.dot.active {
  width: 32px;
 box-shadow: 0 0 12px rgba(13, 211, 112, 0.25);
  background: var(--wp--preset--color--primary-100);
  position: relative;
  overflow: hidden;
}

/* INNER SHADOW LAYER */
.dot.active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  box-shadow:
    inset 2px 2px 4px rgba(13, 211, 112, 1),
    inset -3px -2px 4px rgba(13, 211, 112, 1);

  z-index: 1;
}

/* YOUR PROGRESS BAR (kept but above shadow) */
.dot.active::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.5); /* subtle readability layer */

  transform: scaleX(0);
  transform-origin: left;
  animation: fillBar 5000ms linear forwards;

  z-index: 2;
}

@keyframes fillBar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}




@media (max-width: 1248px) {
	.wrap-xl {
		flex-direction: column;
	}
}

.website-preview {
    --preview-height: clamp(200px, 30vw, 384px);

    height: var(--preview-height);
    overflow: hidden;

    transition: transform 0.8s ease;
    transform-origin: center center;
}

.website-preview img {
    width: 684px;
    transition: transform 8s cubic-bezier(0.3, 0, 0.4, 1);
    display: block;
}

.website-preview:hover {
    transform: scale(1.05);
}

.website-preview:hover img {
    transform: translateY(calc(-100% + var(--preview-height)));
}


.close-modal:hover {
  filter: brightness(0.8);
  cursor: pointer;
}

/* Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(0px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.3s ease,
    backdrop-filter 0.3s ease,
    visibility 0.3s ease;

  z-index: 999;
}

/* Modal */
.modal {
  transform: translateY(20px);
  opacity: 0;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* Open state */
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(6px);
}

.modal-overlay.active .modal {
  opacity: 1;
  transform: translateY(0);
}

/* Gutenberg */
.editor-styles-wrapper .modal-overlay {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  backdrop-filter: none !important;
  position: relative !important;
}

.editor-styles-wrapper .modal {
  opacity: 1 !important;
  transform: none !important;
}

/* [BUTTONY] */

/* Primary */
.wp-block-button .wp-block-button__link {
    background: var(--wp--preset--gradient--vertical-primary-140-to-mono-0);
    border: 1px solid var(--wp--preset--color--mono-0);
    color: var(--wp--preset--color--mono-100);
    padding: var(--wp--preset--spacing--odleglosc-s) var(--wp--preset--spacing--odleglosc-m);
    box-shadow: var(--wp--preset--shadow--btn-shadow);
    transition: filter 0.2s ease;
}

/* Kontur */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: var(--wp--preset--color--mono-100);
    border: 1px solid var(--wp--preset--color--mono-0);
    color: var(--wp--preset--color--mono-0);
    padding: var(--wp--preset--spacing--odleglosc-s) var(--wp--preset--spacing--odleglosc-m);
    box-shadow: var(--wp--preset--shadow--btn-shadow);


}

.wp-block-button .wp-block-button__link:hover {
    filter: brightness(1.2);
}



/* 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);
}



.border-radius-s {
  border-radius: 4px;
  overflow: hidden;
}
.border-radius-m {
  border-radius: 8px;
  overflow: hidden;
}
.border-radius-l {
  border-radius: 16px;
  overflow: hidden;
}
.border-radius-xl {
  border-radius: 32px;
  overflow: hidden;
}

.hero-video {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.05);
}