/*
Theme Name: Vrubl
Theme URI: https://vrubl-creative.pl/
Author: Webski Gość
Author URI: https://webskigosc.pl/
Description: With its clean, minimal design and powerful feature set, enables agencies to build stylish and sophisticated WordPress websites. Theme is a masterpiece of design and functionality. It features a range of valuable patterns, including hero and portfolio sections, prominent call-to-action buttons, and customer testimonials. Whether you’re building a website for your business, personal brand, or creative project, is perfect for anyone looking to launch quickly and efficiently.
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks
Requires at least: 6.2
Tested up to: 6.2
Requires PHP: 5.6
Version: 1.0.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vrubl

*/

/* Defaults
---------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

img.edit-site-site-icon__image {
	filter: invert(1);
}

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
	transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
}

b,
strong,
th {
	font-weight: var(--wp--custom--font-weight--medium);
}

mark {
	background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 100%);
	background-position: 0 85%;
	background-repeat: repeat-x;
	background-size: 100% 15%;
}


body > .wp-site-blocks {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}

::-webkit-scrollbar {
  width: 16px;
  background-color: var(--wp--preset--color--primary);
}
::-webkit-scrollbar-thumb {
  background-color: var(--wp--preset--color--base);
  border-style: solid;
  border-width: 7px;
  border-radius: 0;
}

/* Forms
--------------------------------------------- */
input,
select,
textarea {
  background-color: hsla(0deg,100%,100%, 30%);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: var(--wp--custom--line-height--body);
	padding: 10px 20px;
	width: 100%;
}

input:focus,
select:focus,
textarea:focus {
	background-color: var(--wp--preset--color--neutral);
	outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
}

::placeholder {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.5;
}

/* Blocks
----------------------------------------------------------------- */

/* Code
--------------------------------------------- */

*:not(.wp-block-code) > code {
	background-color: var(--wp--preset--color--neutral);
	font-size: var(--wp--preset--font-size--small);
	padding: 5px 8px;
}

/* Templates
--------------------------------------------- */

body.page-template-background-default,
body.page-template-no-title-background {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(./assets/images/background-default.webp);
  background-image: -webkit-image-set(
    url(./assets/images/background-default-sm.webp) 1x,
    url(./assets/images/background-default-md.webp) 2x
  );
  background-image: image-set(
    url(./assets/images/background-default-sm.webp) 1x,
    url(./assets/images/background-default-md.webp) 2x
  );
}

/* Group
--------------------------------------------- */
.wp-block-group {
  margin-block-start: 0;
}

.wp-block-group.is-style-full{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-block: clamp(2rem, 5vh, 4rem);
}

.wp-block-group.is-style-shadow-light {
	box-shadow: var(--wp--preset--shadow--light);
}

.wp-block-group.is-style-shadow-solid {
	box-shadow: var(--wp--preset--shadow--shadow);
}

.wp-block-group.is-style-full > div {
  width: 100%;
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
}

.wp-block-group.is-style-frame {
  position: relative;
  padding: 6% 5%;
}

.wp-block-group.is-style-frame:before{
  content: "";
  background-image: url(./assets/images/frame.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom left;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
}

/* Image
--------------------------------------------- */

.wp-block-image.is-style-shadow-light img {
	box-shadow: var(--wp--preset--shadow--light);
}

.wp-block-image.is-style-shadow-solid img {
	box-shadow: var(--wp--preset--shadow--solid);
}

/* Heading
--------------------------------------------- */

.is-style-underlined,
.is-style-underlined-b {
  padding-bottom: clamp(1rem, 2vh, 3.5rem);
}

.is-style-underlined:after,
.is-style-underlined-b:after {
  margin-top: 20px;
  content: "";
  display: block;
  height: 26px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.is-style-underlined:after {
  background-image: url(./assets/images/line-a.svg);
}

.is-style-underlined-b:after {
  background-image: url(./assets/images/line-b.svg);
}

/* List
--------------------------------------------- */

.is-style-no-disc {
	list-style-type: none;
	padding-left: 0;
}

/* Navigation
--------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
	padding-bottom: 30px;
	padding-top: 30px
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	border: 2px solid currentColor;
	padding: 2px;
}

.has-background .wp-block-navigation__responsive-container-open:focus,
.has-background .wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--base);
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--silver);
}

/* Navigation Submenu
--------------------------------------------- */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--contrast);
	border: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 10px;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
	padding: 2px 10px;
}

/* Quote
--------------------------------------------- */

.wp-block-quote.is-style-shadow-light {
  box-shadow: var(--wp--preset--shadow--light);
}

.wp-block-quote.is-style-shadow-solid {
  box-shadow: var(--wp--preset--shadow--solid);
}

/* Buttons
--------------------------------------------- */
.wp-block-button .wp-block-button__link {
  transition: color .24s linear, background-color .24s linear;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--base);
  transition: color .28s ease, background-color .28s ease;
}

/* Social Links
--------------------------------------------- */
.wp-block-social-links.is-style-simple .wp-social-link {
  background-color: transparent;
  color: var(--wp--preset--color--primary);
}

/* Header
---------------------------------------------------------------------------- */
.wg-logo.wp-block-site-logo,
.wg-logo {
  max-width: clamp(100px, 10vw, 200px);
  max-height: clamp(100px, 10vw, 200px);
}

.wg-lang {
  gap: 0;
}

.wg-lang-link,
a.wg-lang-link {
  text-decoration: none;
}

.wg-lang .wg-lang-link,
.wg-lang a.wg-lang-link {
  padding: 20px;
  position: relative;
}

.wg-lang .wg-lang-link:hover,
.wg-lang a.wg-lang-link:hover,
.wg-lang .wg-lang-link:focus,
.wg-lang a.wg-lang-link:focus {
  background-color: var(--wp--preset--color--trensparent-silver);
  transition: background-color .28s ease;
}

.wg-lang p {
  position: relative;
}

.wg-lang :not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80%;
  border-right: 2px solid var(--wp--preset--color--contrast);
}

.wg-lang-link.disabled,
a.wg-lang-link.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.wg-fixed-nav .wp-block-navigation-item__content {
  padding-right: 20px;
}

.wg-fixed-nav .wp-block-navigation-item__content::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--wp--preset--color--contrast);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.34s ease-in-out;
}

.wg-fixed-nav .wp-block-navigation-link,
.wg-fixed-nav .wp-block-navigation-item__content {
  width: 100%;
}

.wg-fixed-nav .wp-block-navigation-item__content:hover::before {
  transform: scaleX(0);
}

.footer-fixed {
  z-index: 10;
  position: fixed;
  bottom: 0;
  width: 100%;
  transform: translateY(0);
  transition: transform .28s ease-in-out;
}

.scroll-down .footer-fixed {
  transform: translateY(100%);
  transition: transform .28s ease-in-out;
}

/* Icons and buttons
---------------------------------------------------------------------------- */
.wg-button {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
  cursor: pointer;
}

.wg-button-up,
.wg-button-down {
  right: clamp(32px, 3vw, 64px);
  left: auto;
}
.wg-button-up {
  top: calc(100vh/2 - 360px);
}

.wg-button-down {
  bottom: calc(100vh/2 - 360px);
  transform: rotate(180deg);
}

.wg-button-up:hover {
  animation: bounceArrowDown 1s ease-in-out infinite;
}
.wg-button-down:hover {
  animation: bounceArrowUp 1s ease-in-out infinite;
  transform: rotate(180deg);
}

.wg-button-disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.wg-icon {
  display: inherit;
  fill-rule: evenodd;
  clip-rule: evenodd;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  height: 4rem;
  width: 4rem;
  background-color: var(--wp--preset--color--black);
  transition: background-color 0.22s ease-in-out;
}

.wg-icon:hover,
.wg-icon:focus {
  transition: background-color 0.26s ease-in-out;
}

.wg-icon-arrow {
  -webkit-mask-image: url(./assets/images/arrow.svg);
  mask-image: url(./assets/images/arrow.svg);
}

/* Utility
---------------------------------------------------------------------------- */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}
/* Contact From 7
---------------------------------------------------------------------------- */
.wpcf7-acceptance .wpcf7-list-item {
  margin-left: 0;
}
.wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.wpcf7-acceptance label input[type="checkbox"] {
  position: relative;
  margin-top: 0.5rem;
  width: 1.25rem;
}
.wpcf7-acceptance label input[type="checkbox"]::before,
.wpcf7-acceptance label input[type="checkbox"]::after {
  z-index: 2;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0;
  transition: background-color 0.22s ease-in-out border 0.22s ease-in-out;
}
.wpcf7-acceptance label input[type="checkbox"]::after {
  background-color: var(--wp--preset--color--base);
  border: 2px solid var(--wp--preset--color--contrast);
}
.wpcf7-acceptance label input[type="checkbox"]::before{
  border: 2px solid var(--wp--preset--color--green);
  background-color: var(--wp--preset--color--green);
}
.wpcf7-acceptance label input[type="checkbox"]:checked:after {
  opacity: 0;
}

/* Media Queries
---------------------------------------------------------------------------- */
@media only screen and (max-width: 992px) {
  header.site-header {
    background: var(--wp--preset--gradient--gray-transparent);
  }
  footer.footer-fixed {
    background: var(--wp--preset--gradient--transparent-gray);
  }
  .wg-footer .wp-block-group p {
    font-size: var(--wp--preset--font-size--x-small);
  }

  main .entry-content {
    padding-top: 4rem;
  }
}

@media only screen and (max-width: 782px) {
	/* Columns
	--------------------------------------------- */
	.is-style-columns-reverse {
		flex-direction: column-reverse;
	}

  .wp-block-group.is-style-full,
  .wp-block-group.is-style-full-bgup,
  .wp-block-group.is-style-full-bgleft,
  .wp-block-group.is-style-full-bgright {
    height: auto;
    min-height: 100vh;
  }

  .wg-button.wg-button-up,
  .wg-button.wg-button-down {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}

@media only screen and (max-width: 600px) {
	/* Utility
	--------------------------------------------- */
	.is-style-hidden-mobile {
		display: none !important;
	}

  header.site-header {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    z-index: 10;
  }

  .scroll-down header.site-header {
    transform: translateX(0) translateY(-100%);
    transition: transform .28s ease-in-out;
  }

  #nav-fixed>div.is-layout-flex {
    justify-content: flex-end;
  }

  #nav-fixed button.wp-block-navigation__responsive-container-open,
  #nav-fixed button.wp-block-navigation__responsive-container-close {
    padding: .35rem .5rem;
    transition: transform .28s ease-in-out;
  }

  .has-modal-open #nav-fixed button.wp-block-navigation__responsive-container-open {
    animation: overlayFadeOut;
    animation-fill-mode: forwards;
    animation-duration: .22s;
  }

  #nav-fixed button.wp-block-navigation__responsive-container-open,
  .has-modal-open #nav-fixed button.wp-block-navigation__responsive-container-close  {
    animation: overlayFadeIn;
    animation-fill-mode: forwards;
  }

  .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog,
  .admin-bar #nav-fixed button.wp-block-navigation__responsive-container-open,
  .admin-bar #top-fixed .wg-lang-wrapper {
    margin-top: var(--wp-admin--admin-bar--height);
  }

  #nav-fixed .wp-block-navigation__responsive-container-content {
    padding-top: calc(3rem + 24px);
  }

  #nav-fixed ul.wp-block-navigation__container {
    width: 100%;
  }

  #top-fixed {
    z-index: 200000;
    flex-basis: 100%;
  }

  #top-fixed .wg-lang {
    opacity: 0;
    justify-content: center;
  }

  .wg-lang-wrapper {
    position: fixed;
    right: 1rem;
    left: calc(50vw - 10%);
    right: auto;
    top: 0;
  }
  .wg-lang-link,
  a.wg-lang-link {
    font-size: var(--wp--preset--font-size--large);
  }
  .wg-lang-wrapper,
  .wg-lang-pl,
  .wg-lang-en {
    min-height: 52px;
  }

  .wg-lang :not(:first-child)::before {
    height: 60%;
  }

  .has-modal-open #top-fixed .wg-lang {
    display: flex;
    visibility: visible;
    animation: overlayFadeInTop;
    animation-fill-mode: forwards;
    animation-duration: .22s;
  }
}

@media only screen and (min-width: 600px) {
	/* Navigation Link
	--------------------------------------------- */
	.wp-block-navigation-item.is-style-outline a {
		border: 1px solid currentColor;
		padding: 8px 15px;
	}

  #top-fixed {
    z-index: 10;
    position: fixed;
    width: 100%;
  }

  #nav-fixed {
    z-index: 12;
    position: fixed;
    right: 0;
    left: auto;
    top: auto;
    bottom: 50%;
    transform: translateX(0) translateY(50%);
    transition: transform 0.34s ease-in-out;
    padding: var(--wp--custom--spacing--gap);
    padding-right: 0;
  }

  #nav-fixed {
    background: linear-gradient(to left, rgb(242 242 242 / 80%) 0%, rgb(247 247 247 / 70%) 75%, rgb(248 248 248 / 0%) 100%);
  }

  #nav-fixed .wg-fixed-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #logo,
  .wg-logo-wrapper  {
    position: absolute;
    transform: translateY(0);
    transition: transform .34s ease-in-out;
  }

  .scroll-down #logo {
    transform: translateY(-100%);
    transition: transform .28s ease-in-out;
  }

  .scroll-down #nav-fixed {
    transform: translateX(100%) translateY(50%);
    transition: transform .28s ease-in-out;
  }
}

@media only screen and (min-width: 2120px) {
  #nav-fixed {
   background: transparent;
  }
}

@keyframes bounceArrowUp {
  0% {
    transform: translateY(0) rotate(180deg);
  }
  50% {
    transform: translateY(-1rem) rotate(180deg);
  }
  100% {
    transform: translateY(0) rotate(180deg);
  }
}

@keyframes bounceArrowDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1rem);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes overlayFadeIn {
  0% {
      opacity: 0;
      transform: translateY(.5em)
  }

  to {
      opacity: 1;
      transform: translateY(0)
  }
}

@keyframes overlayFadeOut {
  0% {
      opacity: 1;
      transform: translateY(0)
  }

  to {
      opacity: 0;
      transform: translateY(-.5rem)
  }
}

@keyframes overlayFadeInTop {
  0% {
      opacity: 0;
      transform: translateY(-100%)
  }

  to {
      opacity: 1;
      transform: translateY(0)
  }
}