/*
Theme Name: Slipetava
Description: Custom theme for Slipetava based on Twenty Twenty-Five
Author: KristianaTR
Template: twentytwentyfive
Version: 1.0.0
Text Domain: slipetava
*/

/* CSS RESET --> */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
main {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  overscroll-behavior: none;
  min-height: 100vh;
  width: 100%;
}

a,
a:hover,
a:focus,
a:active {
  outline: none !important;
}

p a {
  color: inherit !important;
}

/* <-- CSS RESET */
/* -------------------------------------------- */

/* - - - - - DEFAULT ELEMENTS --> - - - - - */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: box-shadow 0.35s ease-in-out, filter 0.3s ease-in-out,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-position 0.6s ease-in-out;
  will-change: transform;
  color: var(--wp--preset--color--black);
}

/* Smooth transitions for outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
  transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out,
    box-shadow 0.35s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: background-color, color;
}
/* Prevents hover weirdness on touch devices */
@media (hover: hover) and (pointer: fine) {
  .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background-position: 100% 50%;
    background-image: var(--wp--preset--gradient--parquet-pattern);
    transform: translateY(-1px);
    color: var(--wp--preset--color--black) !important;
  }
  .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--warm-oak);
    color: var(--wp--preset--color--black);
    box-shadow: var(--wp--preset--shadow--glow-dark);
    transform: translateY(-1px);
  }
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
  transform: translateY(0) scale(0.98);
  color: var(--wp--preset--color--black);
}
/* Focus-visible (accessibility) */
/* .wp-block-button__link:focus-visible {
  outline: 3px solid #c6b372;
  outline-offset: 3px;
} */

.social_icons {
  .wp-social-link {
    transition: color 0.3s ease, transform 0.3s ease;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: #c6b372 !important;
      }
    }
    &:active {
      transform: scale(0.9);
      color: inherit !important;
    }
  }
}
/* - - - - - - - - - - - CARD GRID --->  - - - - - - - - - - - */
.card_grid {
  gap: 2rem;
  margin-top: 2rem;
  @media (max-width: 768px) {
    grid-template-columns: 1fr !important;
  }
  .card_item {
    padding: 35px;
    transition: all 0.3s ease;
    &:hover {
      transform: scale(1.02);
      border-color: var(--brand-warm-oak);
      box-shadow: 0 10px 30px rgba(180, 151, 92, 0.15);
      overflow: hidden;
    }
  }
}
/* - - - - - - - - - - - <--- CARD GRID  - - - - - - - - - - - - */

/* - - - - - - - - - - - LIST --->  - - - - - - - - - - - */
.wp-block-list.list_styled {
  list-style: none;
  padding-left: 1.5rem;
  &.horizontal_list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 14px;
    &::before {
      content: "→";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      color: var(--wp--preset--color--warm-oak);
      font-size: 20px;
      font-weight: 300;
    }
  }
}
/* - - - - - - - - - - - <--- LIST  - - - - - - - - - - - */

/* - - - - - - - - - - - STEPS --->  - - - - - - - - - - - */
.steps_grid {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    background: var(--wp--preset--color--warm-oak);
    z-index: 0;
  }
  .timeline_step {
    position: relative;
    z-index: 1;

    .step_number {
      width: 70px;
      min-width: 70px;
      height: 70px;
      background: var(--wp--preset--color--warm-oak);
      border: 2px solid var(--wp--preset--color--warm-oak);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 28px;
      font-weight: 600;
      color: var(--wp--preset--color--dark-01);
      position: relative;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }

    &:hover {
      .step_number {
        background: var(--wp--preset--color--dark-01);
        color: var(--wp--preset--color--warm-oak);
      }
    }
  }
}

/* - - - - - - - - - - - <--- STEPS  - - - - - - - - - - - */

/* - - - - - - - - - - - CAROUSEL ---> - - - - - - - - - - - */
/* Prevent carousel from overflowing on mobile */
.cb-carousel-block,
.cb-carousel-block .swiper,
.cb-carousel-block .swiper-wrapper {
  max-width: 100%;
}
@media (max-width: 767px) {
  .cb-carousel-block .swiper-slide {
    width: 100% !important;
    /* margin-right: 0 !important; */
  }
}
.swiper-pagination span {
  background: var(--wp--preset--color--warm-oak) !important;
  height: 11px !important;
  width: 11px !important;
}
.cb-button-prev.swiper-button-prev,
.cb-button-next.swiper-button-next {
  color: var(--wp--preset--color--warm-oak) !important;
}
/* - - - - - - - - - - - <--- CAROUSEL  - - - - - - - - - - - */

/* - - - - - - - - - - - BEFORE-AFTER ---> - - - - - - - - - - - */

.twentytwenty-container {
  border-radius: 8px !important;
  .twentytwenty-handle {
    background-image: url("/wp-content/themes/slipetava/assets/images/favicon-circle-border.svg") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-color: var(--wp--preset--color--golden-border) !important;
    border-width: 2px !important;
    &::before,
    &::after {
      background: var(--wp--preset--color--black) !important;
      box-shadow: none !important;
    }
    .twentytwenty-left-arrow {
      left: 0% !important;
      border-right-color: var(--wp--preset--color--black) !important;
    }
    .twentytwenty-right-arrow {
      right: 0% !important;
      border-left-color: var(--wp--preset--color--black) !important;
    }
  }
}
.bafg-slider-info-wraper {
  display: none;
}
/* - - - - - - - - - - - <--- BEFORE-AFTER  - - - - - - - - - - - */

/* - - - - - - - - - - - LIGHTBOX ---> - - - - - - - - - - - */
.slb_details span {
  font-family: var(--wp--preset--font-family--inter) !important;
  font-size: var(--wp--preset--font-size--medium) !important;
  &.slb_template_tag_item_description {
    color: var(--wp--preset--color--warm-oak) !important;
  }
}
/* - - - - - - - - - - - <--- LIGHTBOX  - - - - - - - - - - - */

/* - - - - - - - - - - - TABS ---> - - - - - - - - - - - */
.wp-block-easy-tabs-block-tab-buttons {
  border-bottom: 1px solid var(--wp--preset--color--border-wood);
  .wp-block-easy-tabs-block-tab-button {
    background: var(--wp--preset--color--dark-02);
    border: 1px solid var(--wp--preset--color--border-wood);
    border-bottom: transparent !important;
    border-radius: 8px 8px 0 0;
  }
}
.wp-block-easy-tabs-block-tabs.has-hover-etb-bg-color
  .wp-block-easy-tabs-block-tab-button:hover:not(.etb-active-tab):not(
    [data-etb-active-tab]
  ) {
  background: var(--wp--preset--color--warm-oak) !important;
  color: var(--wp--preset--color--black);
  cursor: pointer;
}
@media (max-width: 768px) {
  .wp-block-easy-tabs-block-tab-buttons {
    gap: 0.5rem !important;
    .wp-block-easy-tabs-block-tab-button {
      font-size: var(--wp--preset--font-size--small);
      padding: 8px 12px !important;
    }
  }
}
/* - - - - - - - - - - - <--- TABS  - - - - - - - - - - - */

/* - - - - - - - - - - - TABLE ---> - - - - - - - - - - - */

/* ========================================
   Base Table Wrapper
======================================== */

figure.wp-block-table {
  min-width: fit-content;
}

/* ========================================
   Table Base Styling
======================================== */

figure.wp-block-table table {
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 8px;
  /* overflow: hidden; */
  border: 1px solid var(--wp--preset--color--warm-oak);
}

/* ========================================
   Header
======================================== */

figure.wp-block-table thead th {
  background-color: var(--wp--preset--color--warm-oak);
  color: var(--wp--preset--color--black);
  border-bottom: 1px solid var(--wp--preset--color--warm-oak);
  padding: 12px 16px;
}

/* ========================================
   Body Cells
======================================== */

figure.wp-block-table tbody td {
  background-color: var(--wp--preset--color--dark-02);
  color: var(--wp--preset--color--text-secondary);
  border: 1px solid var(--wp--preset--color--border-wood);
  padding: 12px 16px;
}

/* Remove duplicate bottom border */
figure.wp-block-table tbody tr:last-child td {
  border-bottom: none;
}

/* ========================================
   Rounded Outer Corners
======================================== */

figure.wp-block-table thead tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

figure.wp-block-table thead tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

figure.wp-block-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

figure.wp-block-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* ========================================
   Mobile Behaviour
======================================== */

@media (max-width: 768px) {
  /* ---------- Scroll container ---------- */
  figure.wp-block-table.width_wide,
  figure.wp-block-table.width_max {
    min-width: auto !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* ---------- Scroll hint ---------- */
  figure.wp-block-table.width_wide::after {
    content: "← Velc, lai skatītu visu tabulu →";
    display: block;
    text-align: center;
    font-size: 12px;
    margin-top: 8px;
    color: var(--wp--preset--color--warm-oak);
  }

  /* ---------- Force horizontal scroll ---------- */
  figure.wp-block-table.width_wide table {
    min-width: 720px !important;
  }

  /* ---------- Sticky first column ---------- */
  figure.wp-block-table table th:first-child,
  figure.wp-block-table table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }

  figure.wp-block-table table thead th:first-child {
    z-index: 3;
  }

  /* ---------- Mobile typography ---------- */
  figure.wp-block-table thead th,
  figure.wp-block-table tbody td {
    font-size: var(--wp--preset--font-size--small);
    padding: 4px;
  }
  /* ---------- Full-bleed wide tables ---------- */
  .is-layout-constrained > figure.wp-block-table.alignwide.width_wide {
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* - - - - - - - - - - - <--- TABLE  - - - - - - - - - - - */

/* - - - - - - - - - - - BLOCK DETAILS ---> - - - - - - - - - - - */
.wp-block-details {
  border-radius: 24px;
  overflow: hidden;

  summary {
    position: relative;
    padding: 1.25rem 3.5rem 1.25rem 1.25rem;
    cursor: pointer;
    list-style: none;
    background: var(--wp--preset--color--dark-02);
    border: 1px solid var(--wp--preset--color--border-wood);
    transition: all 0.3s ease;
    user-select: none;
    display: flex;
    align-items: center;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;

    &::-webkit-details-marker {
      display: none;
    }

    &::marker {
      content: "";
    }

    &::after {
      content: "";
      position: absolute;
      right: 1.25rem;
      top: 50%;
      transform: translateY(-50%) rotate(0deg);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      width: 24px;
      height: 24px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23B4975C'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M12 6v6m0 0v6m0-6h6m-6 0H6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }

  .content_area {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    background: var(--wp--preset--color--dark-02);
    border: 1px solid var(--wp--preset--color--border-wood);
    border-top: transparent !important;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    &::before {
      content: "";
      display: block;
      padding-top: 1.5rem;
    }

    &::after {
      content: "";
      display: block;
      padding-bottom: 1rem;
    }

    > * {
      min-height: 0;
      padding: 0 1.25rem;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
  }
}

.wp-block-details[open] {
  summary::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .content_area {
    grid-template-rows: 1fr;

    > * {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.1s;
    }
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .content_area,
  .content_area > *,
  .wp-block-details summary::after {
    transition: none !important;
    animation: none !important;
  }

  .wp-block-details[open] .content_area > * {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}
/* - - - - - - - - - - - <--- BLOCK DETAILS  - - - - - - - - - - - */

/* - - - - - - - - - - - -BLOCK EXTRA SERVICES --> - - - - - - - - */
.card_grid.extra_services {
  .card_item {
    background: var(--wp--preset--color--dark-02);
    border: 1px solid var(--wp--preset--color--border-wood);
    border-radius: 24px;
    padding: clamp(20px, 2vw, 32px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    &.free {
      position: relative;
      overflow: visible;
      &::before {
        content: "BEZMAKSAS";
        position: absolute;
        top: -10px;
        right: -10px;
        background: linear-gradient(
          135deg,
          #d4af37 0%,
          #f4e4c1 50%,
          #d4af37 100%
        );
        color: #2c1810;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.5px;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
        transform: rotate(12deg);
        transform-origin: center;
        animation: subtle-pulse 3s ease-in-out infinite;
      }
    }
    &:hover {
      cursor: pointer;
    }
  }
  img {
    width: 60px;
    height: auto;
  }
}
@media (max-width: 768px) {
  .card_grid.extra_services {
    gap: 0.5rem !important;
    grid-template-columns: repeat(2, minmax(0, 3fr)) !important;
    .card_item {
      padding: clamp(12px, 2vw, 20px);
      &.free::before {
        top: -8px;
        right: -8px;
        font-size: 10px;
        padding: 4px 12px;
        transform: rotate(10deg);
      }
      &.free:hover::before {
        transform: rotate(12deg) scale(1.1);
        box-shadow: 0 3px 12px rgba(212, 175, 55, 0.4);
      }
      img {
        width: 50px !important;
        height: auto !important;
      }
    }
  }
}
/* Subtle animation for attention */
@keyframes subtle-pulse {
  0%,
  100% {
    transform: rotate(12deg) scale(1);
  }
  50% {
    transform: rotate(12deg) scale(1.05);
  }
}
/* - - - - - - - - - - - <-- BLOCK EXTRA SERVICES - - - - - - - - - */

/* - - - - - <-- DEFAULT ELEMENTS - - - - - */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* - - - - - - - - -- - - -- - - - - - HEADER --> - - - - - - - - - - - - - - - - -  - */
header.wp-block-template-part {
  position: absolute;
  top: 50px;
  width: 100%;
  z-index: 100;
  /* transition: top 0.3s ease-in-out; */
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  &.is-sticky {
    position: fixed;
    top: 0;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  header.wp-block-template-part {
    top: 0;
    position: fixed;
  }
}

.brand_text,
.brand_text a {
  background: var(--wp--preset--gradient--parquet-pattern);
  background-size: 200% 100%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  transition: box-shadow 0.35s ease-in-out, filter 0.3s ease-in-out,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-position 0.6s ease-in-out;
  will-change: transform;
}
&:hover .brand_text,
&:focus-visible .brand_text {
  background-position: 100% 50%;
  cursor: pointer;
}

@media (hover: none) {
  .brand_text {
    background-position: 100% 50%;
  }
}

.header_container {
  max-width: 1280px;
  margin: 0 auto;
  .brand_logo {
    .brand_mark {
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease,
        box-shadow 0.6s ease;
    }
    &:hover .brand_mark,
    &:focus-visible .brand_mark {
      transform: scale(1.035);
      filter: brightness(1.12) saturate(1.05);
      cursor: pointer;
    }
    @media (hover: none) {
      .brand_mark {
        filter: brightness(1.05);
      }
      .brand_text {
        background-position: 100% 50%;
      }
    }
  }
  .wp-block-navigation {
    background-color: transparent !important;
  }
  nav.navigation_desktop {
    .wp-block-navigation__submenu-container {
      background-color: var(--wp--preset--color--dark-02) !important;
      color: var(--wp--preset--color--text-secondary) !important;
      padding: 1rem !important;
      margin-top: 15px !important;
      &.wp-block-navigation-submenu {
        /* border: none !important; */
        border-bottom: var(--wp--preset--color--golden-border) 1px solid !important;
        border-radius: 0 0 20px 20px;
        width: max-content !important; /* Allow container to expand to content width */
        white-space: nowrap !important; /* Prevent text wrapping */
        /* position: relative; */
        left: 0 !important;
        right: auto !important;
        /* Invisible hover bridge */
        &::before {
          content: "";
          position: absolute;
          top: -15px;
          left: 0;
          right: 0;
          height: 15px;
          background: transparent !important;
          z-index: 10;
        }
      }
    }
  }
  /* Header breakpoints--> */
  @media (max-width: 768px) {
    .email_tab {
      display: none;
    }

    .brand_logo {
      .brand_mark {
        width: 50px;
        height: 50px;
      }
      /* .brand_text {
        font-size: 2rem;
      } */
    }
  }

  @media (max-width: 480px) {
    .top_bar {
      padding: 0 0.5rem 0 1rem !important;
    }
    .nav_header {
      padding-right: 1rem !important;
      padding-left: 1rem !important;
    }
    .social_icons {
      font-size: 34px;
      gap: 0;
      .wp-block-social-link {
        padding: 8px;
      }
    }
  }
  @media (max-width: 375px) {
    .wp-block-social-links {
      display: none;
    }
  }
  /* <-- Header breakpoints */
}
/* -- -- -- -- -- FIX MOBILE MENU -- -- -- -- -- */
nav.wp-block-navigation.navigation_mobile {
  display: none !important;
}
/* Show desktop navigation only on larger screens */
@media (max-width: 940px) {
  .wp-block-buttons.cta_button {
    display: none;
  }
  nav.wp-block-navigation.navigation_desktop {
    display: none !important;
  }
  nav.wp-block-navigation.navigation_mobile {
    display: flex !important;
  }
}

/* -- -- -- -- -- END FIX MOBILE MENU -- -- -- -- -- */

/* -- -- -- -- -- MOBILE MENU STYLES -- -- -- -- -- */

/* Hide mobile elements by default on desktop */
.wp-block-buttons.mobile_menu_close a.wp-block-button__link,
.wp-block-buttons.mobile_menu_toggle a.wp-block-button__link {
  border: none;
}
/* Reset hover effects for all mobile menu buttons */
@media (hover: hover) and (pointer: fine) {
  .mobile_menu_close .wp-block-button__link:hover,
  .mobile_menu_toggle .wp-block-button__link:hover,
  .mobile_menu_button .wp-block-button__link:hover {
    background-position: initial !important;
    background-image: none !important;
    transform: none !important;
    color: var(--wp--preset--color--text-secondary) !important;
    background-color: transparent !important;
    border-color: var(--wp--preset--color--text-secondary) !important;
  }
}
.mobile_menu_toggle,
.mobile_menu_overlay {
  display: none !important;
}

/* Show mobile toggle button on mobile */
@media (max-width: 940px) {
  .mobile_menu_toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .mobile_menu_button .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--text-secondary);
    border: 1px solid var(--wp--preset--color--text-secondary);
    padding: 8px 12px;
    font-size: 0;
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hamburger icon */
  .mobile_menu_button .wp-block-button__link::before,
  .mobile_menu_button .wp-block-button__link::after,
  .mobile_menu_button span::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 2px;
    background-color: var(--wp--preset--color--text-secondary);
    transition: all 0.3s ease;
  }

  .mobile_menu_button .wp-block-button__link::before {
    transform: translateY(-7px);
  }

  .mobile_menu_button .wp-block-button__link::after {
    transform: translateY(7px);
  }

  .mobile_menu_button span::before {
    position: absolute;
    width: 22px;
    height: 2px;
    background-color: var(--wp--preset--color--text-secondary);
  }
}

/* Mobile Menu Overlay Styles */
.mobile_menu_overlay {
  position: fixed;
  top: -50px;
  left: 0;
  width: 100vw;
  height: calc(100vh + 50px);
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile_menu_overlay.active {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

.mobile_menu_content {
  background-color: var(--wp--preset--color--warm-oak);
  position: fixed;
  top: 0;
  right: 0;
  max-width: 400px;
  height: 100vh;
  overflow-y: auto;
  padding: 20px;
  z-index: 1000;
}

/* Close button */
.mobile_menu_close {
  justify-content: flex-end;
}

.mobile_menu_close .wp-block-button__link {
  background: transparent;
  padding: 0 !important;
  font-size: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mobile_menu_close .wp-block-button__link::before,
.mobile_menu_close .wp-block-button__link::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  background-color: var(--wp--preset--color--black);
}

.mobile_menu_close .wp-block-button__link::before {
  transform: rotate(45deg);
}

.mobile_menu_close .wp-block-button__link::after {
  transform: rotate(-45deg);
}

/* Mobile Navigation Menu Styles */
.navigation_mobile {
  margin-top: 20px;
}

.navigation_mobile .wp-block-navigation__container {
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.navigation_mobile .wp-block-navigation-item {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--wp--preset--color--border-wood);
  &.current-menu-item a,
  &.is-open span {
    color: var(--wp--preset--color--black) !important;
  }
}

.navigation_mobile .wp-block-navigation-item__content {
  color: var(--wp--preset--color--dark-01) !important;
  padding: 15px 0;
  display: block;
  width: 100%;
  font-size: 18px;
  text-decoration: none;
}

.navigation_mobile .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary) !important;
}

/* Submenu styles for mobile */
.navigation_mobile li.wp-block-navigation-item.has-child {
  display: flex;
  flex-direction: column;
}
.navigation_mobile .wp-block-navigation__submenu-container {
  position: static !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 20px !important;
  margin-top: 0 !important;
  display: none;
  &.wp-block-navigation-submenu li:last-child {
    border-bottom: none !important;
  }
}

.navigation_mobile .wp-block-navigation__submenu-container.is-open {
  display: block !important;
}

/* .navigation_mobile .wp-block-navigation-submenu__toggle:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  border-radius: 4px;
} */

.navigation_mobile .wp-block-navigation__submenu-icon {
  position: absolute;
  top: 20px;
  right: 50%;
  margin-left: 8px !important;
  transition: transform 0.3s ease;
}

.navigation_mobile .wp-block-navigation__submenu-icon svg {
  stroke: var(--wp--preset--color--black);
  height: 20px;
  width: auto;
}

.navigation_mobile
  .wp-block-navigation-submenu.is-open
  .wp-block-navigation__submenu-icon {
  transform: rotate(90deg) translateY(2px);
}

/* Prevent body scroll when menu is open */
body.mobile-menu-open {
  overflow: hidden;
}

/* -- -- -- -- -- END MOBILE MENU STYLES -- -- -- -- -- */
/* - - - - - - - - - - - - - - - - - -  <-- HEADER - - - - - - - - - - - - - - -  - - - */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* - - - - - - - - -- - - -- - - - - - FOOTER -->  - - - - - - - - - - - - - - -  - - - */
@media (max-width: 480px) {
  footer .wp-block-site-logo img {
    width: 60px !important;
  }
}
/* - - - - - - - - -- - - -- - - - - - <-- FOOTER - - - - - - - - - - - - - - -  - - -  */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* - - - - - - - - - - - - - - - SĀKUMS PAGE --> - - - - - - - - - - - - - - -*/

/* - - - - - SECTION HERO --> - - - - - */
section.section_hero {
  position: relative;
  .hero_img_block {
    position: absolute;
    inset: 0;
    z-index: 0;

    .hero_logo {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 30%);
    }
    &:not(.default) {
      height: 450px;
    }
  }
  .hero_video_wrapper {
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 16 / 9; /* or 21 / 9 for ultra-wide */
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    position: relative;
    video {
      position: absolute;
      width: 100%;
      height: 178%;
      bottom: 0; /* Positions video from bottom */
      left: 0;
      object-fit: cover;
      cursor: pointer;
    }
  }
}
@media (max-width: 768px) {
  section.section_hero {
    .hero_img_block:not(.default) {
      height: 300px;
    }
    .hero_logo {
      width: 200px;
      transform: translate(-50%, 30%);
    }
    .spacer {
      height: 300px !important;
    }
    .hero_text_block {
      padding-top: 80px !important;
    }
    .hero_video_wrapper {
      aspect-ratio: 16 / 9; /* Keep landscape */

      video {
        height: 150%; /* Show middle portion on mobile */
        bottom: 0;
        object-position: center 70%;
      }
    }
  }
}
/* - - - - - <-- SECTION HERO - - - - - */
/* ************************************************************************************ */
/* - - - - - SECTION PAKALPOJUMI --> - - - - - */
section.section_services {
  .card_grid {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    &:has(.card_item:only-child) > .card_item {
      grid-column: 2;
    }

    .card_item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .pakalpojums_ikona img {
        height: 80px;
        width: auto;
      }
    }
  }

  @media (max-width: 790px) {
    .wp-block-button__link.wp-element-button {
      padding: 12px 20px !important;
    }
  }
}
/* - - - - - <-- SECTION PAKALPOJUMI - - - - - */
/* ************************************************************************************ */
/* - - - - - SECTION PROBLEM STATEMENT --> - - - - - */
section.section_problem_statement {
  .card_item {
    overflow: hidden;

    .wp-block-image {
      overflow: hidden;
      img {
        transition: transform 0.3s ease;
        display: block;
        width: 100%;
        height: auto;
        will-change: transform;
      }
    }
    .wp-block-heading {
      transition: transform 0.3s ease;
      will-change: transform;
    }
    p {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    &:hover {
      .wp-block-image img {
        transform: scale(1.5);
      }
      .wp-block-heading {
        transform: translateY(60px);
      }
      p {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: auto;
      }
    }
  }
  @media screen and (max-width: 1118px) and (min-width: 769px) {
    .card_grid {
      grid-template-columns: repeat(2, minmax(0, 420px));
      justify-content: center;
      gap: 24px;
      .card_item:hover {
        .wp-block-heading {
          margin-top: 70px;
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    .card_grid {
      grid-template-columns: repeat(1, minmax(0, 350px)) !important;
      justify-content: center;
      .card_item:hover {
        .wp-block-image {
          transform: scale(1.1);
        }
        .wp-block-heading {
          margin-top: 30px;
        }
      }
    }
  }
}
/* - - - - - <-- SECTION PROBLEM STATEMENT - - - - - */
/* ************************************************************************************ */
/* - - - - - SECTION TRUSTED BY --> - - - - - */
section.section_trustedBy {
  .client_types {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
    .client_type {
      background: transparent;
      transition: all 0.3s ease;
      p {
        /* font-size: 14px; */
        padding: 12px 24px !important;
        color: var(--wp--preset--color--text-secondary);
      }

      &:hover {
        background: var(--wp--preset--color--dark-01);
        border-color: var(--wp--preset--color--warm-oak) !important;
        p {
          color: var(--wp--preset--color--warm-oak);
        }
      }
    }
  }
}
/* - - - - - <-- SECTION TRUSTED BY - - - - - */
/* ************************************************************************************ */
/* - - - - -  SECTION FEATURED PORTFOLIO --> - - - - - */
section.section_featured_portfolio {
  @media (max-width: 768px) {
    .portfolio_grid {
      grid-template-columns: 1fr !important;
    }
  }
}
/* - - - - - <-- SECTION FEATURED PORTFOLIO - - - - - */
/* ************************************************************************************ */
/* - - - - -  SECTION HOW IT WORKS --> - - - - - */
section.section_how_it_works {
  .steps_grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    /* align-items: stretch; */
    &::before {
      content: "";
      position: absolute;
      top: 35px;
      left: 10%;
      right: 10%;
      height: 2px;
      background: var(--wp--preset--color--warm-oak);
      z-index: 0;
    }
    .timeline_step {
      position: relative;
      z-index: 1;

      .step_number {
        margin: 0 auto 25px;
      }
      .step_content {
        padding: 20px;
        background: var(--wp--preset--color--dark-02);
        border: 1px solid var(--wp--preset--color--warm-oak);
        border-radius: 8px;
        height: 100%;
        transition: transform 0.3s ease;
      }
      &:hover {
        .step_content {
          transform: scale(1.02);
        }
      }
    }
  }
  @media (max-width: 920px) {
    .steps_grid {
      grid-template-columns: 1fr !important;
      gap: 40px;
      &::before {
        top: 0;
        bottom: 0;
        left: 35px;
        right: auto;
        width: 2px;
        height: auto;
      }
      .timeline_step {
        padding: 0 !important;
        flex-direction: row !important;
        gap: 20px;
        align-items: flex-start;

        .step_number {
          margin: 0;
          min-width: 70px;
        }
        .step_content p,
        .step_content h4,
        .step_icon img {
          align-items: flex-start;
          text-align: left !important;
        }
        .step_content_header {
          display: flex;
          align-items: center;
          flex-direction: row !important;
          gap: 15px !important;
          & > * {
            margin: 0 !important;
          }
        }
      }
    }
  }
}
/* - - - - - <-- SECTION HOW IT WORKS - - - - - */
/* ************************************************************************************ */
/* - - - - - SECTION CTA --> - - - - - */
section.section_cta {
  .process_flow figure.send_data_icon {
    width: 70px;
    height: auto;
    padding: 10px 6px;
    background: var(--wp--preset--color--dark-02);
    border: 1px solid var(--wp--preset--color--warm-oak);
    border-radius: 8px;
  }
  .process_flow figure.plus_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    img {
      width: 30px;
      height: auto;
    }
  }
  figure.arrow_down {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    animation: float 3s ease-in-out infinite;
    img {
      width: 50px;
      height: auto;
    }
  }

  .wp-block-button__link svg {
    margin-left: 8px;
    vertical-align: middle;
  }

  @media (max-width: 768px) {
    .process_flow {
      flex-direction: column !important;
      gap: 30px !important;
      align-items: center !important;

      figure {
        width: 50px;
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .process_flow figure {
      animation: none;
    }
  }
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* - - - - - <-- SECTION CTA - - - - - */
/* - - - - - - - - - - - - - - - <-- SĀKUMS PAGE - - - - - - - - - - - - - - -*/
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* - - - - - - - - - - - - - - -  PAKALPOJUMI PAGE --> - - - - - - - - - - - - - - -*/
/* - - - - - SECTION HERO --> - - - - - */
section.section_hero.default {
  margin-bottom: 450px;
  &.high {
    margin-bottom: 480px !important;
  }
  &.extra-high {
    margin-bottom: 670px !important;
  }
  .hero_img_block.default {
    .hero_img_bar {
      height: 250px;
    }
    .hero_deco_bar {
      position: relative;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        pointer-events: none;
      }
      .hero_heading {
        z-index: 10;
      }
    }
  }
}
@media (max-width: 768px) {
  section.section_hero.default {
    margin-bottom: 250px !important;
    &.high {
      margin-bottom: 290px !important;
    }
    &.extra-high {
      margin-bottom: 420px !important;
    }
    .hero_img_bar {
      height: 150px !important;
    }
    .hero_deco_bar {
      min-height: 30px !important;
      max-height: 30px;
    }
    /* .hero_heading {
          margin-top: 200px !important;
        } */
  }
}
@media (max-width: 470px) {
  section.section_hero.default {
    margin-bottom: 300px !important;
    &.high {
      margin-bottom: 320px !important;
    }
    &.extra-high {
      margin-bottom: 510px !important;
      .hero_deco_bar {
        max-height: 110px !important;
        h1 {
          padding-left: 10px !important;
          padding-right: 10px !important;
        }
      }
    }
    .hero_img_bar {
      height: 170px !important;
    }
  }
}

/* - - - - - <-- SECTION HERO - - - - - */
/* ************************************************************************************ */
/* - - - - - SECTION PAKALPOJUMI --> - - - - */
section.section_services {
  @media (max-width: 768px) {
    .basic_services {
      .card_grid.stairs {
        gap: 0 !important;
      }
    }
  }
  @media (max-width: 470px) {
    .basic_services h3,
    .additional_services h3 {
      text-align: left !important;
    }
  }
}

/* - - - - - <-- SECTION PAKALPOJUMI - - - - */
/* ************************************************************************************ */
/* - - - - - - - - - - - - - - - <-- PAKALPOJUMI PAGE - - - - - - - - - - - - - - -*/
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* - - - - - - - - - - - - - - -  SINGLE PAKALPOJUMS PAGE --> - - - - - - - - - - - - - - -*/
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* - - - - - SECTION HERO --> - - - - */
.benefits_bar .benefit_item img {
  height: 50px;
  width: auto;
}
@media (max-width: 768px) {
  .benefits_bar .benefit_item {
    img {
      height: 30px !important;
      width: auto !important;
    }
  }
}
@media (max-width: 360px) {
  .benefits_bar .benefit_item {
    img {
      height: 24px !important;
      width: auto !important;
    }
    p {
      font-size: 12px !important;
      font-weight: 400 !important;
    }
  }
}
/* - - - - - <-- SECTION HERO - - - - */
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* - - - - - SECTION SERVICES DETAILED --> - - - - */
section.section_services_detailed {
  .service_info_block.stretch {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  .steps_grid {
    position: relative;
    &::before {
      top: 0;
      bottom: 0;
      left: 35px;
      right: auto;
      width: 2px;
      height: auto;
      .step_content p {
        margin-top: auto !important;
      }
    }
    @media (max-width: 768px) {
      &::before {
        left: 25px !important;
      }
      .step_number {
        margin: 0;
        padding: 0 !important;
        min-width: 50px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
      }
      .step_content {
        padding-top: 1rem !important;
      }
    }
  }
}

/* - - - - - <-- SECTION SERVICES DETAILED - - - - */
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* - - - - - SECTION SERVICES PROCESS --> - - - - */
section.section_services_process {
  .process_heading img {
    width: 60px;
    height: auto;
  }
  .wp-block-column.stretch {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  @media (max-width: 768px) {
    .process_heading img {
      width: 40px !important;
      height: auto !important;
    }
  }
}

/* - - - - - <-- SECTION SERVICES PROCESS - - - - */
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* - - - - - - - - - - - - - - -  <-- SINGLE PAKALPOJUMS PAGE - - - - - - - - - - - - - - -*/
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* - - - - - - - - - - - - - - -  SINGLE PAKALPOJUMS-EXTRA SERVICES PAGE --> - - - - - - - - - - - - - - -*/
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
section.section_extra_services--detailed {
  scroll-margin-top: 130px;
  background: var(--wp--preset--color--dark-02);
  border: 1px solid var(--wp--preset--color--border-wood);
  border-radius: 24px;
  padding: clamp(20px, 2vw, 32px);
  .header_block {
    .icon img {
      width: 60px;
      height: auto;
    }
  }
  .content_block {
    .wp-block-list.list_styled {
      padding-left: 0 !important;
    }
  }
  @media (max-width: 790px) {
    .header_block {
      border-right: none !important;
      border-bottom: 1px solid var(--wp--preset--color--border-wood) !important;
    }
    .content_block {
      .wp-block-buttons {
        justify-content: center;
      }
    }
  }
}
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* - - - - - - - - - - - - - - -  <-- SINGLE PAKALPOJUMS-EXTRA SERVICES PAGE - - - - - - - - - - - - - - -*/
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* - - - - - - - - - - - - - - -  PAGE MUSU DARBI --> - - - - - - - - - - - - - - -*/
section.section_gallery {
  @media screen and (max-width: 992px) {
    .gallery_grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  @media screen and (max-width: 768px) {
    .gallery_grid {
      grid-template-columns: 1fr !important;
      justify-content: center;
    }
  }
  @media screen and (max-width: 680px) {
    padding-top: 1rem !important;
  }
  /* @media screen and (max-width: 470px) {
    padding-top: 3rem !important;
  } */
}
/* - - - - - - - - - - - - - - -  <-- PAGE  MUSU DARBI - - - - - - - - - - - - - - -*/
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* - - - - - - - - - - - - - - -  PAGE CENAS --> - - - - - - - - - - - - - - -*/
@media screen and (max-width: 470px) {
  section.section_cenas,
  section.section_gallery,
  section.section_contact {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* - - - - - - - - - - - - - - -  <-- PAGE  CENAS - - - - - - - - - - - - - - -*/
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* - - - - - - - - - - - - - - -  PAGE KONTAKTI --> - - - - - - - - - - - - - - -*/
section.section_contact {
  .card_grid {
    gap: 1rem !important;
    justify-items: center;
    .card_item {
      background: var(--wp--preset--color--dark-02);
      border: 1px solid var(--wp--preset--color--border-wood);
      border-radius: 24px;
      padding: clamp(20px, 2vw, 32px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      &:hover {
        transform: scale(1.02);
        border-color: var(--wp--preset--color--border-wood);
        box-shadow: 0 10px 30px rgba(180, 151, 92, 0.15);
        overflow: hidden;
      }
    }
  }
  @media (max-width: 768px) {
    .card_grid {
      gap: 0.5rem !important;
      padding-top: 0 !important;
      .card_item {
        max-width: 80%;
        min-width: 80%;
      }
    }
  }
}
/* - - - - - - - - - - - - - - -  <-- PAGE KONTAKTI - - - - - - - - - - - - - - -*/
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* - - - - - - - - - - - - - - -  PAGE COOKIES --> - - - - - - - - - - - - - - -*/
section.section_cookies {
  margin-top: 170px !important;
  @media (max-width: 768px) {
    margin-top: 100px !important;
  }
}
/* - - - - - - - - - - - - - - -  <-- PAGE COOKIES - - - - - - - - - - - - - - -*/
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */
/* ************************************************************************************ */