/*
 Theme Name:   kokteiliubaras.eu Theme
 Theme URI:    https://kb.webarch.lt
 Description:  Kokteilių baro svetainės tema
 Author:       Webarch.lt
 Author URI:   https://webarch.lt
 Template:     bricks
 Version:      1.1
 Text Domain:  kb-theme
*/

/* Preloader */
.preloader-shown #logo-preloader {
  opacity: 0;
  z-index: -1;
}

#logo-preloader {
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.preloader-logo {
  position: absolute;
  max-width: 150px; /* Even smaller initial size */
  opacity: 0;
  transform: scale(0.9); /* Start even smaller */
  transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy easing */
}

.preloader-logo.active {
  opacity: 1;
  transform: scale(1);
}

.preloader-logo.exit {
  opacity: 0;
  transform: scale(0.8); /* Shrink old logo even more */
}

/* New logo specific size */
.preloader-logo:last-child {
  max-width: 250px; /* Even bigger new logo */
}

.preloader-logo:last-child.active {
  transform: scale(1.15); /* Scale up new logo even more */
}

/* SVG path animations */
.preloader-logo svg path,
.preloader-logo svg rect {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.2s ease-in-out;
}

.preloader-logo.active svg path,
.preloader-logo.active svg rect {
  stroke-dashoffset: 0;
}

/* Text fill animation */
.preloader-logo svg path[fill="black"] {
  fill-opacity: 0;
  transition: fill-opacity 0.3s ease-in-out;
  transition-delay: 0.3s;
}

.preloader-logo.active svg path[fill="black"] {
  fill-opacity: 1;
}

/* Red elements animation */
.preloader-logo svg path[fill="#FF4F4F"],
.preloader-logo svg rect[fill="#FF4F4F"] {
  fill-opacity: 0;
  transition: fill-opacity 0.3s ease-in-out;
  transition-delay: 0.5s;
}

.preloader-logo.active svg path[fill="#FF4F4F"],
.preloader-logo.active svg rect[fill="#FF4F4F"] {
  fill-opacity: 1;
}

/* Import Montserrat font */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap'); */

/* Text animation */
.preloader-text {
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--deep-blue);
  margin-top: 160px; /* Position below logo */
  display: flex;
  gap: 0.3px;
}

.preloader-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.preloader-text.active span {
  opacity: 1;
  transform: translateY(0);
}

/* Text fade-out animation - only letters move */
.preloader-text.fade-out span {
  opacity: 0;
  transform: translateY(20px); /* Individual letters move down */
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Same bouncy easing as fade in */
  transition-delay: calc(0.02s * var(--index)) !important; /* Same staggered timing */
}

/* Ensure letters start from visible position */
.preloader-text.active.fade-out span {
  transform: translateY(0);
}

/* Logo fade-out - match fade-in speed */
.preloader-logo.fade-out {
  opacity: 0;
  transform: scale(1.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preloader-fade-out {
  opacity: 0 !important;
}

/* Initial state - show content */
.preloader-active {
  opacity: 1;
}


.preloader-new-logo,
.preloader-new-logo svg {
  min-width: 90px;
}

/* Typography */
*[style*="Playfair Display"],
*[class*="playfair"],
.playfair {
  letter-spacing: 2px;
}

/* Global variables */
:root {
  --mt: 115px; /* Margin top (for header) */
  --ot: calc(var(--mt) + var(--wp-admin--admin-bar--height, 0px) - 5px); /* Offset top (with admin bar) */

  /* Padding medium */
  --pm: 20px;

  /* Colors */
  --action-blue: #322E95;
  --nnh-black: #17162E;
  --header-link: #17162E;
  --hero-green: #3AAA35;
  --lightest-gray: #F3F4F9;
  --white: #FFFFFF;

  --deep-blue: #0D093B;

  --anim-underline-color: var(--header-link, #17162E);
}

*:focus {
  outline: 0 !important;
}

/* html {
  overflow: hidden;
} */

html, body {
  overflow-x: hidden;
}

/* Header */
body.home .brxe-nav-menu,
body.home .brxe-nav-menu span {
  border-color: #FFFFFF !important;
}

.sub-menu {
  background: transparent !important;
}

.sub-menu li:hover a,
.brxe-nav-menu a:hover {
  text-decoration: underline;
}

/* Age gate */
.age-gate__submit {
  margin-top: 20px !important;
  padding: 20px !important;
  font-size: 38px !important;
  border-radius: 0px !important;

  background-color: var(--deep-blue) !important;
}

.age-gate__buttons {
  gap: 20px !important;
}

.age-gate__remember-wrapper {
  display: none !important;
}

.age-gate__challenge {
  font-size: 38px !important;
  line-height: 1.2 !important;
}

.age-gate__heading-title {
  font-size: 48px !important;
}

.age-gate__remember-text {
  font-size: 20px !important;
  color: #000000;
}

.age-gate__buttons {
  margin-top: 16px;
}

.age-gate__remember-field {
  width: 26px !important;
  height: 26px !important;
  margin-right: 1rem !important;
}

.age-gate__remember-field:checked {
  background: #000000 !important;
}

/* Sticky header */
/* #brx-header svg path {
  transition: all 0.3s;
}

#brx-header.scrolling .header-black svg path,
#brx-header .header-black:hover svg path {
  fill: #FFFFFF !important;
}

#brx-header.scrolling img.bricks-site-logo {
  width: 50px !important;
}

img.bricks-site-logo {
  transition: 0.3s all !important;
}

.bricks-nav-menu .sub-menu {
  top: 200% !important;
}

#brx-header.scrolling .bricks-nav-menu .sub-menu {
  background-color: var(--deep-blue) !important;
}

#brx-header.scrolling .header-black .bricks-nav-menu .sub-menu a {
  color: #FFFFFF !important;
}

#brx-header .header-white:hover,
#brx-header .header-black:hover,
#brx-header .header-white:hover .sub-menu,
#brx-header .header-black:hover .sub-menu {
  background-color: var(--deep-blue) !important;
}

#brx-header .header-white:hover .menu-item > a,
#brx-header .header-black:hover .menu-item > a,
#brx-header .header-black:hover .brx-submenu-toggle > a {
  color: #FFFFFF !important;
}

#brx-header .header-black:hover .header-contact,
#brx-header.scrolling .header-black .header-contact {
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

.header-contact::after {
  transition: background-color 0.3s;
}

#brx-header .header-black:hover .header-contact::after {
  background-color: #FFFFFF !important;
}

#brx-header .header-black:hover .header-contact:hover {
  background-color: #FFFFFF !important;
  color: var(--deep-blue) !important;
} */

/* Sticky header - Optimized */
/* #brx-header,
#brx-header .brxe-logo,
#brx-header .brxe-nav-menu,
#brx-header .header-black,
#brx-header .header-black .brxe-container {
  z-index: 9999 !important;
} */

/* #brx-header.scrolling .bricks-mobile-menu-wrapper {
  top: calc(var(--ot) - 20px) !important;
  height: calc(100% - calc(var(--ot) - 20px)) !important;
} */

/* Optimize transitions with specific properties instead of 'all' */
#brx-header svg path {
  transition: fill 0.3s;
}

img.bricks-site-logo {
  transition: width 0.3s !important;
}

.header-contact::after {
  transition: background-color 0.3s;
}

/* Group selectors with the same properties */
#brx-header.scrolling .header-black svg path,
#brx-header .header-black:hover svg path {
  fill: #FFFFFF !important;
}

.vb-trp-switcher a,
.vb-trp-switcher div {
  transition: color 0.3s ease;
}

#brx-header .header-black .vb-trp-switcher a.current-lang,
#brx-header .header-black .vb-trp-switcher div {
  color: #000000 ;
}

#brx-header .header-black:hover .vb-trp-switcher a.current-lang,
#brx-header .header-black:hover .vb-trp-switcher div,
#brx-header.scrolling .header-black .vb-trp-switcher a.current-lang,
#brx-header.scrolling .header-black .vb-trp-switcher div{
  color: #FFFFFF;
}

@media (max-width: 476px){
  #brx-header .vb-trp-switcher div {
    line-height: 1.75 !important;
  } 
}

/* Standalone rule that can't be combined */
#brx-header.scrolling img.bricks-site-logo {
  width: 50px !important;
}

/* Simplify submenu positioning */
.bricks-nav-menu .sub-menu {
  top: 200% !important;
}

/* Group submenu background color changes */
@media (min-width: 991px){
  #brx-header.scrolling .bricks-nav-menu .sub-menu,
  #brx-header .header-white:hover .sub-menu,
  #brx-header .header-black:hover .sub-menu {
    background-color: var(--deep-blue) !important;
  }
}

/* Group text color changes */
#brx-header.scrolling .header-black .bricks-nav-menu .sub-menu a,
#brx-header .header-white:hover .menu-item > a,
#brx-header .header-black:hover .menu-item > a,
#brx-header .header-black:hover .brx-submenu-toggle > a {
  color: #FFFFFF !important;
}

/* Group hover state background colors */
#brx-header .header-white:hover,
#brx-header .header-black:hover {
  background-color: var(--deep-blue) !important;
}

#brx-header.scrolling .header-white .header-contact::after {
  background-color: var(--deep-blue) !important;
}

#brx-header.scrolling .header-white:hover .header-contact::after {
  background-color: var(--white) !important;
}

/* Mobile menu scroll direction */
@media (max-width: 991px) {
  header .bricks-mobile-menu-wrapper {
    opacity: 0;
    transform: none !important;
    /* height: calc(100% - var(--ot)) !important; */
  }
}

.brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-wrapper {
  display: flex;
  opacity: 1;
  transition: all 0.12s ease;
  overflow: auto;
}

.bricks-mobile-menu-wrapper a {
  color: #FFFFFF !important;
}

a.brxe-div,
div.brxe-code > a,
.brxe-text-link,
.brxe-breadcrumbs a,
p strong > a {
  color: #000000;
}

.bricks-mobile-menu-wrapper button {
  padding: 0 !important;
}

.bricks-mobile-menu-wrapper svg {
  color: #FFFFFF !important;
}

/* Mobile burger */
#brx-header .header-black:hover .bricks-mobile-menu-toggle > span,
#brx-header.scrolling .header-black .bricks-mobile-menu-toggle > span {
  background-color: #FFFFFF !important;
}

#brx-header .header-white .bricks-mobile-menu-toggle > span {
  background-color: #FFFFFF !important;
}

#brx-header .header-black:hover .brxe-nav-menu,
#brx-header.scrolling .header-black .brxe-nav-menu {
  border-color: #FFFFFF !important;
}

/* Group header contact styles */
#brx-header .header-black:hover .header-contact,
#brx-header.scrolling .header-black .header-contact {
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Standalone after element styling */
#brx-header .header-black:hover .header-contact::after {
  background-color: #FFFFFF !important;
}

/* Standalone hover state that needs to remain separate */
#brx-header .header-black:hover .header-contact:hover {
  background-color: #FFFFFF !important;
  color: var(--deep-blue) !important;
}

/*Custom ENT*/
.single-kokteilis h1,
.page-template-default h1.h1-title,
.single-paslauga h1 {
    font-size: 2.1em;

    @media (max-width: 767px) {
        font-size: 32px;
    }

    @media (max-width: 478px) {
        font-size: 28px;
    }
}

.cky-btn-revisit-wrapper {
  background: transparent !important;
  mix-blend-mode: difference;
}