/*
 Theme Name:   SIDE PADEL CLUB
 Theme URI:    https://spotlab.cc/
 Description:  Custom child theme to extend Bricks.
 Author:       Jakub Pawelec
 Author URI:   https://spotlab.cc/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
  --container-max: 1440px;
  --page-padding: 0px; /*var(--space-m);*/

  --container-offset: max(
    var(--page-padding),
    calc((100vw - var(--container-max)) / 2 + var(--page-padding))
  );
}

.overflow-hidden {
	overflow: hidden;
}

/* BUTTONS */
.brxe-button.bricks-button svg {
	min-height: 20px;
	min-width: 20px;
}

/* NAV */
/* Linki głównego menu — desktop */
#header-menu .bricks-nav-menu-wrapper
.bricks-nav-menu > .menu-item > a,
#header-menu .bricks-nav-menu-wrapper
.bricks-nav-menu > .menu-item > .brx-submenu-toggle > a {
  position: relative;
}

/* Animowany border */
#header-menu .bricks-nav-menu-wrapper
.bricks-nav-menu > .menu-item > a::after,
#header-menu .bricks-nav-menu-wrapper
.bricks-nav-menu > .menu-item > .brx-submenu-toggle > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* Dopasuj pozycję bordera */
  width: 100%;
  height: 2px; /* Grubość bordera */
  background-color: currentColor;

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

/* Rysowanie od lewej do prawej */
#header-menu .bricks-nav-menu-wrapper
.bricks-nav-menu > .menu-item:hover > a::after,
#header-menu .bricks-nav-menu-wrapper
.bricks-nav-menu > .menu-item:hover > .brx-submenu-toggle > a::after,
#header-menu .bricks-nav-menu-wrapper
.bricks-nav-menu > .menu-item > a:focus-visible::after,
#header-menu .bricks-nav-menu-wrapper
.bricks-nav-menu > .menu-item > .brx-submenu-toggle > a:focus-visible::after {
  transform: scaleX(1);
}

/* TEXT */
.text-highlight {
	color: var(--primary);
}

.h-1, .h-2, .h-3, .h-4, .h-5, .h-6, h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
}

.outline-text {
  --outline-color: var(--primary);
  --background-color: var(--secondary);

  color: var(--background-color);
  -webkit-text-fill-color: var(--background-color);

  -webkit-text-stroke: 2px var(--outline-color);
  paint-order: stroke fill;

  text-shadow: none;
}

/* 1. Primary outline + secondary fill */
.outline-text--primary-secondary {
  --outline-color: var(--primary);
  --background-color: var(--secondary);
}

/* 2. Dark outline + light fill */
.outline-text--dark-light {
  --outline-color: var(--dark);
  --background-color: var(--light);
}

/* 3. Light outline + primary fill */
.outline-text--light-primary {
  --outline-color: var(--light);
  --background-color: var(--primary);
}

/* 4. Light outline + dark fill */
.outline-text--light-dark {
  --outline-color: var(--light);
  --background-color: var(--dark);
}

/* BADGE */
.badge {
	background-color: var(--primary);
	color: var(--light);
	padding: var(--space-2xs) var(--space-xs);
	border-radius: 16px;
	font-size: var(--text-xs);
	font-weight: 600;
	transition: all .2s ease-in-out;
}

.badge:hover {
	background-color: var(--primary-d-1);
	transition: all .2s ease-in-out;
}

.badge.outline {
	background-color: transparent!important;
	border: 1px solid currentcolor;
}

.badge.light {
	background-color: var(--light);
	color: var(--dark);
}

.badge.light:hover {
	background-color: var(--tertiary);
	color: var(--light);
}

.badge.dark {
	background-color: var(--dark);
	color: var(--dark);
}

.badge.dark:hover {
	background-color: var(--light);
	color: var(--dark);
}

.badge.secondary {
	background-color: var(--secondary);
	color: var(--primary);
}

.badge.secondary:hover {
	background-color: var(--primary);
	color: var(--secondary)
}

/* BORDERS */
.border {
	border: 1px solid var(--light);
}

main > section.brxe-section:not(:last-of-type) {
	border-bottom: 2px solid var(--secondary);
}

main > section.brxe-section:first-of-type {
  border-top: 2px solid var(--secondary);
}

section.brxe-section > div.brxe-container {
	border-left: 2px solid var(--secondary);
	border-right: 2px solid var(--secondary);
}

/* BACKGROUND */
.bg-blur {
	
  	backdrop-filter: blur(4px); 
 	-webkit-backdrop-filter: blur(4px); /* Wsparcie dla starszych wersji Safari */
}

.faq__item .faq__item-title, .faq__item:hover .faq__item-title {
	transition: all .2s ease-in-out;
}

/* CARDS */
.benefit-card:hover .benefit-card__icons-wrapper svg path,
.benefit-card:hover .benefit-card__icons-wrapper svg rect,
.benefit-card:hover .benefit-card__icons-wrapper i {
	fill: var(--primary);
	visibility: visible;
}

.card-event img {
	transform: scale(1);
	transition: transform .2s ease-in-out;
}

.card-event:hover img {
	transform: scale(1.1);
	transition: transform .2s ease-in-out;
}

/* TABS */
.tab-menu__item.brx-open, .tab-menu__item:hover {
	box-shadow: 0px 2px 4px var(--tertiary-t-6);
}

.rule-item__icon path {
	fill: var(--primary);
}