/*
Theme Name: Solver
Version: 1.0
Author: K Design
*/


/* LAYOUT */

html {
    scroll-behavior: smooth;
}

.wp-site-blocks {
  margin-left: clamp(1rem, 0.2rem + 2vw, 2rem);
  margin-right: clamp(1rem, 0.2rem + 2vw, 2rem);
}

@media (max-width: 640px) {
  .wp-site-blocks {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

.wp-site-blocks .full-width {
  margin-left: calc(-1*clamp(1rem, 0.2rem + 2vw, 2rem));
  margin-right: calc(-1*clamp(1rem, 0.2rem + 2vw, 2rem));
  width: auto;
}

@media (max-width: 640px) {
  .wp-site-blocks .full-width {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

/* Hero title */
.hero-title {
  row-gap: 0.375rem;
}

/* Columns layout */
@media (max-width: 640px) {
  .wp-block-columns {
    flex-direction: column;
  }
}

/* Products grid */
@media (min-width: 2400px) {
  .wp-block-group.products-grid > .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 2400px) and (min-width: 1200px) {
  .wp-block-group.products-grid > .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1200px) and (min-width: 640px) {
  .wp-block-group.products-grid > .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

.wp-block-group.products-grid > .wp-block-columns > .wp-block-column {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wp-block-column > .wp-block-group,
.wp-block-column > .wp-block-stack {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Hide on desktop or mobile */
@media (min-width: 640px) {
    .hide-on-desktop {
        display: none;
    }
}

@media (max-width: 640px) {
    .hide-on-mobile {
        display: none;
    }
}


/* HEADER */

/* Logo visibility */
.responsive-logo {
  display: block;
}

.responsive-logo img {
  display: block;
  width: auto;
  height: 32px;
}

/* Navigation styles */
.site-navigation {
  display: flex;
  gap: 0;
  align-items: center;
}

/* Header behavior */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: transform 0.3s ease;
  border-bottom: none;
}

#header.hide-on-scroll {
  transform: translateY(-100%);
  border-bottom: none;
}

#header.show-border {
  border-bottom: 2px solid var(--wp--preset--color--black);
}


/* ICONS */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-size: clamp(3rem, 1.8rem + 3vw, 4.5rem) !important;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  font-variation-settings:
    'FILL' var(--icon-fill, 0),
    'wght' var(--icon-weight, 300),
    'GRAD' var(--icon-grad, 0),
    'opsz' var(--icon-opsz, 72);
  -webkit-font-smoothing: antialiased;
}

.icon-small {
    font-size: 16px !important;
    --icon-opsz: 16;
}

.icon-medium {
    font-size: 24px !important;
    --icon-opsz: 24;
}

.icon-large {
    font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem) !important;
    --icon-opsz: 28;
}

.icon-filled {
  --icon-fill: 1;
}

.icon-accent-primary {
  color: var(--wp--preset--color--accent-primary);
}

.icon-flag {
  width: clamp(3.5rem, 2.7rem + 2vw, 4.5rem);
  height: auto;
}


/* BUTTONS */

.wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent-primary) !important;
  color: var(--wp--preset--color--white) !important;
}

.wp-block-button.is-style-outline.no-hover .wp-block-button__link:hover {
  background-color: unset !important;
  color: unset !important;
  cursor: default !important;
}

.wp-block-button.is-style-outline.button-contact .wp-block-button__link:hover {
  background-color: unset !important;
  color: unset !important;
}

.button-forward .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.5rem, 2.1rem + 1vw, 3rem);
  height: clamp(2.5rem, 2.1rem + 1vw, 3rem);
  border-radius: 50%;
  padding: 0;
}

.button-downward .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3rem, 2.2rem + 2vw, 4rem);
  height: clamp(3rem, 2.2rem + 2vw, 4rem);
  border-radius: 50%;
  padding: 0;
}

.wp-block-button .wp-block-button__link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.wp-block-button.button-contact .wp-block-button__link {
  gap: clamp(0.5rem, 0.1rem + 1vw, 1rem);
}

.contact-heading {
  color: var(--wp--preset--color--white);
  font-size: clamp(1.125rem, 0.825rem + 0.75vw, 1.5rem);
  font-weight: 500;
  margin-left: 4px;
}


/* PRODUCT CARDS */

.flip-card {
  perspective: 3600px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.4s ease-in-out;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}

.flip-card-front {
  transform: rotateY(0deg);
}

.flip-card-back {
  transform: rotateY(180deg);
  position: absolute;
}

.container-image-svg img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Only for block editor view */
.editor-styles-wrapper .flip-card-back {
  transform: none !important;
  position: relative !important;
  backface-visibility: visible !important;
}