/* ==========================================================================
   1. IMPORTS
   ========================================================================== */

@import "./base.css";

/* ==========================================================================
   2. BASE / GLOBAL
   ========================================================================== */

.header {
  inset-inline: 0;
  position: sticky;
  top: 0;
  z-index: 999;
}

.dropdown-menu {
  width: fit-content;
}

.title-wrapper {
  max-width: 65ch;
}

/* ==========================================================================
   3. LAYOUT — SECTIONS & PATTERNS
   ========================================================================== */

/* --- Hero: Rounded Image Right --- */
.hero-section-rounded-image-right {
  .rounded-hero-image {
    height: 100%;
    width: 100%;

    img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }
  }

  .hero-text-wrapper {
    padding-inline: 4rem;
    width: 70%;
  }

  @media (width <= 1261px) {
    .empty-hero-div {
      display: none;
    }
  }

  @media (width <= 872px) {
    display: flex;
    flex-direction: column !important;
    flex-wrap: wrap;

    .hero-text-column {
      padding-block-end: var(--wp--preset--spacing--sp-6) !important;
    }

    .rounded-hero-image {
      max-height: 25rem;

      img {
        border-radius: 1rem !important;
      }
    }
  }

  @media (width <= 605px) {
    .rounded-hero-image {
      display: none;
    }
  }
}

/* --- Hero: Rounded Image Left --- */
.hero-section-rounded-image-left {
  .rounded-hero-image {
    height: 100%;
    width: 100%;

    img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }
  }

  .hero-tekst-section {
    max-width: 65ch;
  }

  @media (width <= 872px) {
    .hero-image-wrapper {
      display: none;
    }
  }
}

/* --- Section: Background Image --- */
.section-with-bg-image {
  background-position: center;
  background-size: cover;
  position: relative;

  .wrapper {
    z-index: 3;

    .review-card {
      margin-inline: auto;
      max-width: 40rem;
      position: relative;
    }
  }
}

/* --- Section: Split Rounded Image Left --- */
.section-split-rounded-image-left {
  .image-wrapper {
    overflow: hidden;

    figure,
    img {
      height: 100%;
    }
  }

  @media (width <= 872px) {
    .image-wrapper {
      display: none;
    }
  }
}

/* --- Section: Flex --- */
.section-flex {
  justify-content: center;
  .flex-group {
    .text-wrapper {
      max-width: 65ch;
    }
  }
}

/* --- Section: Flex Card --- */
.section-flex-card {
  .flex-card {
    max-width: 85ch;
  }
}

/* --- Section: Flex Pricing --- */
.section-flex-pricing {
  .flex-group {
    padding-inline: var(--wp--preset--spacing--sp-2);
  }

  @media (width >= 950px) {
    .flex-group {
      padding-inline: var(--wp--preset--spacing--sp-4);
    }
  }

  @media (width >= 1140px) {
    .flex-group {
      max-width: 55%;
    }
  }
}

/* --- Section: Dark Background --- */
.dark-bg-section {
  .text-wrapper {
    margin-inline: auto;
    max-width: 65ch;
  }
}

/* --- Section: Dark Curved Top --- */
.dark-section-curved-top {
  margin-block-start: -10px;

  .dark-section-curve {
    clip-path: ellipse(110% 100% at 50% 100%);
    height: 100px;
    margin-block-start: -15px;
  }

  .card-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);

    @media (width >= 481px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (width >= 740px) {
      grid-template-columns: repeat(3, 1fr);
    }

    @media (width >= 1062px) {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  .steps-card-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);

    @media (width >= 740px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (width >= 1062px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- FAQ Accordion --- */
.faq-wrapper {
  max-width: 75ch;

  .faq-item {
    border-radius: 1rem;
    padding-block: var(--wp--preset--spacing--sp-1);
    padding-inline: var(--wp--preset--spacing--sp-2);

    .wp-block-accordion-heading__toggle-icon {
      color: var(--wp--preset--color--brand-primary);
    }

    .wp-block-accordion-heading__toggle[aria-expanded="true"]
      .wp-block-accordion-heading__toggle-icon {
      color: var(--wp--preset--color--brand-accent);
    }
  }
}

.wp-block-accordion-heading__toggle {
  .wp-block-accordion-heading__toggle-icon {
    color: var(--wp--preset--color--brand-primary);
    font-size: 2.5rem;
    transition: all 0.3s ease-in-out;
  }

  &[aria-expanded="true"] {
    .wp-block-accordion-heading__toggle-icon {
      color: var(--wp--preset--color--brand-secondary);
    }
  }
}

.wp-block-accordion-panel > p {
  max-width: 65ch;
}

/* --- Card Grid --- */
.card-grid {
  .grid-card {
    figure {
      height: 5rem;
      width: 5rem;
    }
  }
}

/* --- USP Card --- */
.usp-card {
  .icon {
    border-radius: 999px;
    display: grid;
    height: 3rem;
    place-items: center;
    width: 3rem;
  }
}

/* --- Blog Cards --- */
.blog-cards-grid {
  align-items: stretch;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

.blog-cards-wrapper {
  align-items: stretch;
  display: flex;
}

.blog-cards-grid,
.blog-cards-wrapper {

  .wp-block-column {
    display: flex;
    height: unset;
  }

  .blog-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    padding-inline: unset !important;
    text-decoration: none;

    .blog-card-image {
      flex-shrink: 0;
      height: 12rem;

      img {
        height: 100% !important;
        object-fit: cover;
        width: 100%;
      }
    }

    .blog-card-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: var(--wp--preset--spacing--sp-2);
    }

    .link-wrapper {
      margin-block-start: auto;
    }
  }
}

/* --- Card Icon --- */
.card-icon {
  height: 2rem;
  width: 2rem;
}

/* --- Embedded Map --- */
.map-iframe-wrapper {
  aspect-ratio: 1 / 1;
  position: relative;
  width: 100%;

  iframe {
    border: 0;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
  }
}

.embed-map-container {
  position: relative;
  width: 100%;

  .iframe {
    border: 0;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
  }
}

.embeded-map-card {
  overflow: hidden;
}

/* --- Footer --- */
.footer-list {
  text-align: end;

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* ==========================================================================
   5. NAVIGATION — MOBILE MENU
   ========================================================================== */

@media (width >= 741px) {
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .wp-block-navigation__responsive-container:not(.hidden-by-default) {
    display: block !important;
    position: relative;
  }
}

@media (width <= 741px) {
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--sp-2);

  .wp-block-navigation-item__content {
    font-size: 1.2rem;
    padding: 0.5rem 2rem;
  }

  .wp-block-navigation__submenu-container {
    background-color: transparent;
    padding-left: 1rem;
  }
}

/* ==========================================================================
   6. CUSTOM LIST STYLES
   ========================================================================== */

/* --- No Style --- */
.wp-block-list.is-style-none {
  list-style: none !important;
  list-style-type: none !important;
  margin-left: 0;
  padding-left: 0;

  li {
    line-height: 1.5;
    margin-bottom: 0.75em;
    padding-left: 0;

    &::before,
    &::marker {
      content: none !important;
      display: none !important;
    }
  }
}

/* --- Icon Lists (shared base) --- */
.wp-block-list.is-style-checkmark,
.wp-block-list.is-style-circle-x,
.wp-block-list.is-style-arrow,
.wp-block-list.is-style-frown {
  list-style: none;
  margin-left: 0;
  padding-left: 0;

  li {
    line-height: 1.5;
    margin-bottom: 0.75em;
    padding-left: 2em;
    position: relative;

    &::before {
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      color: #cbbfb8;
      content: "";
      fill: #cbbfb8;
      height: 1.2em;
      left: 0;
      position: absolute;
      top: 0.2em;
      width: 1.2em;
    }
  }
}

.wp-block-list.is-style-checkmark {
  li::before {
    background-image: var(--list-icon-checkmark);
  }
}

.wp-block-list.is-style-circle-x {
  li::before {
    background-image: var(--list-icon-circle-x);
  }
}

.wp-block-list.is-style-arrow {
  li::before {
    background-image: var(--list-icon-arrow);
  }
}

.wp-block-list.is-style-frown {
  li::before {
    background-image: var(--list-icon-frown);
  }
}

/* ==========================================================================
   7. UTILITIES
   ========================================================================== */

.overflow-hidden {
  overflow: hidden;
}

.constrained-75 {
  @media (max-width: 768px) {
    max-width: 100% !important;
  }
}

@media (max-width: 980px) {
  .wp-block-column {
    padding-left: var(--wp--preset--spacing--sp-4) !important;
    padding-right: var(--wp--preset--spacing--sp-4) !important;
  }
}