/**
 * Block Editor Styles
 * Only loads for custom ACF blocks in the editor
 * Import Tailwind for block preview
 */

/**
 * Tailwind CSS Input File
 * This will be processed by PostCSS
 */

@import './new-css.min.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Color Variables */
:root {
  --color-primary: #0066cc;
  --color-primary-light: #0172d0;
  --color-success: #40ce6a;
  --color-purple: #ab8ec8;
  --color-purple-light: rgba(171, 142, 200, 0.03);
  --color-blue-dark: rgba(20, 67, 114, 0.61);
  --color-blue-light: rgba(175, 215, 255, 1);
  --color-white: #ffffff;
  --color-gray-light: #cccccc;
  --color-grey: #333;
}

.editor-styles-wrapper .acf-block-preview {
  & .main-content {
    @apply pt-0 pb-0;
  }

  & h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  .block-title {
    color: var(--color-grey);
  }

  & .block-title {
    @apply text-2xl md:text-4xl font-bold mb-6 text-center w-full;
  }

  /*Header Block Styles - Two Column Layout*/
  & .header-block {
    @apply bg-white py-8 md:py-0 px-0;

    & .header-block__wrapper {
      @apply mx-auto grid md:grid-cols-2 gap-8 md:gap-12 items-center;
    }

    & .header-block__left {
      @apply flex flex-col justify-center px-[20px] md:px-0 md:ms-[100px];
    }

    & .header-block__title {
      h1 {
        @apply text-6xl md:text-[60px] font-bold mb-6;
        color: var(--color-grey);
      }
    }

    & .header-block__subtitle {
      h2 {
        @apply text-lg md:text-[1.9rem] leading-tight font-bold mb-6;
        color: var(--color-grey);
      }
    }

    & .header-block__benefits {
      @apply list-none mb-8 space-y-3;

      & .header-block__benefit-item {
        @apply flex items-center gap-3;

        img {
          @apply w-[60px] flex-shrink-0 mr-6;
          color: var(--color-primary-light);
        }

        & .header-block__benefit-text {
          @apply text-base md:text-[1.4rem];
          color: var(--color-grey);
        }
      }
    }

    & .header-block__ctas {
      @apply flex flex-col md:flex-row gap-4;

      & .header-block__cta-link {
        @apply inline-block font-semibold text-xl md:text-2xl transition-colors duration-300 py-3 px-6 rounded-full text-center;
        color: var(--color-white);
        background-color: var(--color-primary);

        &:hover {
          background-color: var(--color-primary-light);
        }
      }
    }

    & .header-block__call-us {
      @apply text-[16px];
    }

    & .header-block__phone-icon {
      @apply ml-5 mr-2;
    }

    & .header-block__telephone-link {
      @apply font-bold;
      color: var(--color-grey);
    }

    & .header-block__right {
      @apply flex items-center justify-center;

      & .header-block__image {
        @apply w-full h-auto object-cover;
      }
    }
  }

  /* Full Width Content */
  & .section-margin-bottom {
    border-bottom: 4px solid var(--color-primary-light);
  }

  & .full-width-content {
    @apply w-full bg-white py-8 md:py-12 px-4 mx-auto;

    & .full-width-content__container {
      @apply text-base md:text-lg max-w-[1140px] mx-auto;
      color: var(--color-grey);

      & p {
        @apply leading-7;
      }
    }

    & .full-width-content__link {
      @apply inline-block font-semibold text-xl transition-colors duration-300 hover:underline rounded-full items-center text-center py-4 px-6 mt-6;
      color: var(--color-white);
      background-color: var(--color-primary);
      &:hover {
        background-color: var(--color-gray-light);
      }
    }
  }

  /* Insurance Options Block */
  & .insurance-options-block {
    @apply py-8 px-4 md:py-12 md:px-0;

    & .insurance-options-container {
      @apply max-w-[1140px] mx-auto px-4;
    }

    & .insurance-options-block__title {
      @apply text-2xl md:text-4xl font-bold mb-0;
    }

    & .insurance-options-block__main-title {
      @apply text-2xl md:text-4xl font-bold mb-10 text-center w-full;
    }

    & .insurance-options-block__text {
      @apply text-base md:text-lg font-bold;
      color: var(--color-primary-light);
    }

    & .insurance-options-block__link {
      @apply inline-block font-semibold text-xl transition-colors duration-300 hover:underline rounded-full items-center mt-6 text-center py-4 px-6;
      color: var(--color-white);
      background-color: var(--color-primary);
      &:hover {
        background-color: var(--color-gray-light);
      }
    }

    & .insurance-options-block__list-item {
      @apply list-none;
    }

    & .information-icon {
      @apply w-10 h-10 text-black mr-2 flex-shrink-0;
    }

    & .star-icon {
      @apply w-10 h-10 mr-2 flex-shrink-0;
      color: var(--color-primary-light);
    }

    & .column-container {
      @apply flex flex-col gap-8 max-w-[1140px] mx-auto;

      & .image-column,
      & .content-column {
        @apply w-full md:w-1/2;
      }

      & .image-column {
        @apply flex justify-center items-center;
      }
    }

    & .insurance-options-block__section-title {
      @apply text-lg md:text-lg font-bold mt-6;
    }

    & .green-circle {
      @apply inline-block w-7 h-7 bg-green-500 rounded-full mr-2;
    }

    & .option-normal {
      @apply flex-col md:flex-row items-center;
    }

    & .option-reverse {
      @apply flex-col md:flex-row-reverse items-center;
    }
  }

  & .cta-container {
    @apply mt-8 w-full flex justify-center;
  }

  & .option-background-reverse {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 50%,
      var(--color-blue-light) 100%
    );
  }

  & .option-background-normal {
    background: linear-gradient(
      90deg,
      var(--color-blue-light) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  & .check-icon {
    @apply w-[40px] h-[40px] mr-2 flex-shrink-0 rounded-full overflow-visible;
    color: var(--color-success);
    background-color: var(--color-white);
  }

  /* How to Get a Quote Block */
  & .how-to-get-quote-block {
    @apply relative;

    & .section-background {
      @apply w-full inset-0 overflow-hidden w-full flex justify-end;
      z-index: -1;
      background: #4dacf0;
      background-image: linear-gradient(
        90deg,
        rgba(77, 172, 240, 1) 40%,
        rgba(77, 172, 240, 0) 100%
      );
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      & img {
        @apply w-full h-full object-cover object-center;
      }
    }

    @media (min-width: 768px) {
      & .section-background {
        background-image: var(
          --how-to-get-quote-desktop-image,
          linear-gradient(90deg, rgba(77, 172, 240, 1) 40%, rgba(77, 172, 240, 0) 100%)
        );
      }
    }

    & .how-to-get-quote-block__title {
      @apply text-2xl md:text-4xl font-bold mb-6 md:mb-8 text-left;
    }

    & .how-to-get-quote-block__stages {
      @apply flex flex-col;
    }

    & .quotes-section-container {
      @apply flex flex-col md:flex-row w-full max-w-[1140px] mx-auto py-8 md:py-12 items-start;

      & .quote-column {
        @apply w-full md:w-1/2 p-8;
      }

      &.quote-column-right {
        @apply hidden md:flex md:w-1/2 p-8;
      }
    }

    & .how-to-get-quote-block__stages {
      @apply mb-10;
    }

    & .how-to-get-quote-block__stage {
      @apply p-3 md:p-3 rounded-lg text-left flex flex-row justify-start items-center;

      & .how-to-get-quote-block__stage-number {
        @apply flex items-center justify-center w-[60px] h-[60px] py-4 px-4 rounded-full text-xl text-center font-bold mr-6;
        background-color: var(--color-success);
        color: var(--color-white);

        & .number {
          @apply w-[60px] h-[60px] flex items-center justify-center;
        }
      }

      & .how-to-get-quote-block__stage-title {
        @apply text-lg md:text-[20px] font-bold mb-2;
      }
    }

    & .how-to-get-quote-block__content {
      @apply text-base md:text-base font-semibold leading-relaxed;
    }
  }

  /* What's Covered Block */
  & .whats-covered-block {
    @apply p-8 md:px-0 md:py-12 bg-white;

    & .whats-covered-container {
      @apply flex max-w-[1140px] mx-auto flex-col items-center;
    }

    & .whats-covered-block__content {
      @apply w-fit;
    }

    & .whats-covered-block__title {
      @apply text-2xl md:text-4xl font-bold mb-6 text-left w-full mb-0;
    }

    & .whats-covered-block__subtitle {
      @apply text-xl md:text-xl font-bold mb-6 text-left w-full mb-0;
      color: var(--color-primary-light);
    }

    & .whats-covered-block__bullets {
      @apply grid grid-cols-1 md:grid-cols-2 py-10 px-0 mx-0 w-fit gap-x-10;
    }

    & .whats-covered-block__bullet {
      @apply list-none text-lg md:text-xl leading-relaxed;
    }

    & .check-icon {
      @apply w-10 h-10 mr-2 flex-shrink-0;
      color: var(--color-success);
    }

    & .whats-covered-block__additional-content p {
      @apply mt-6 text-center font-bold leading-relaxed;
      font-size: 12px;
    }
  }

  & .why-choose-us-block {
    @apply py-8 md:py-12 bg-white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    & .why-choose-us-container {
      @apply flex max-w-[1140px] mx-auto flex-col items-center;
    }

    & .why-choose-us-block__content {
      @apply w-fit;
    }

    & .why-choose-us-block__title {
      @apply text-2xl md:text-4xl text-center font-bold mb-6 text-left w-full mb-0;
    }

    & .why-choose-us-block__item {
      @apply w-full items-stretch px-10;
      margin: 0 1.5% 32px 0;
      border-radius: 10px;
      padding: 32px 8.5%;
      position: relative;
      background: #fff;
      box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
    }

    & .why-choose-us-block__bullets {
      @apply grid grid-cols-1 md:grid-cols-2 gap-x-10 py-10 px-0 mx-0 w-fit items-stretch;

      & li {
        @apply list-none mx-0;

        & p {
          @apply mb-0;
        }
      }
    }

    & .bullet-wrapper {
      @apply relative;
    }

    & .bullet--line::before {
      position: absolute;
      top: 45%;
      left: -12px;
      content: "";
      width: 2px;
      height: 100%;
      background-color: #0073d0;
      transform: translate(-50%, -50%);
    }

    & .bullet--tick {
        @apply pl-[30px]
    }

    & .bullet--tick::before {
      @apply absolute left-[0] w-[25px] h-[25px] bg-cover bg-no-repeat;
      content: "";
      background-image: url(../images/Tick_Green.jpeg);
    }

    & .check-icon {
      @apply w-10 h-10 mr-2 flex-shrink-0;
      color: var(--color-success);
    }

    & .why-choose-us-block__bullet-content {
      @apply mt-2;
    }
  }

  & .support-block {
    @apply py-8 md:py-[80px] bg-[var(--color-primary-light)] relative;

    & h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      color: var(--color-white);
    }

    & .support-block__background-image {
      @apply hidden md:block absolute inset-0 w-full h-full object-cover object-center right-0 bottom-0;

      & img {
        @apply absolute right-0 bottom-0;
      }
    }

    & .support-block__container {
      @apply max-w-[800px] mx-auto px-4 text-center relative;

      & .support-block__title {
        @apply text-2xl md:text-4xl font-bold mb-6;
      }
    }
  }

  /* two column block styles */
  & .column-block {
    @apply relative;
    border-top: 4px solid var(--color-primary-light);

    & .column-block__column {
      @apply flex flex-col md:flex-row w-full;
    }
    & .column-block__container {
      @apply flex w-full max-w-[1140px] mx-auto;

      & .column-block__content {
        @apply w-full md:w-[50%] flex flex-col justify-center p-8 md:px-[80px];

        & .column-block__text {
          @apply text-base md:text-lg leading-relaxed w-[90%];
          color: var(--color-grey);
        }
      }

      & .column-block__image {
        @apply w-full md:w-[50%] right-0;
      }

      & .column-block__image img {
        @apply w-full h-full object-cover object-center;
      }

      & .column-block__cta {
        @apply inline-block font-semibold text-xl transition-colors duration-300 hover:underline rounded-full items-center mt-6 text-center py-4 px-6;
        color: var(--color-white);
        background-color: var(--color-primary);
        &:hover {
          background-color: var(--color-gray-light);
        }
      }
    }
  }

  & .reviews {
    @apply pt-[80px] md:py-[80px] md:mb-0;
  }

  & .faqs-block {
    @apply pt-[40px] pb-[80px];

    & .faqs-block__container {
      @apply max-w-[950px] mx-auto px-4;

      & .faqs-block__title {
        @apply text-2xl md:text-4xl font-bold mb-6 text-center w-full;
      }

      & .faqs-block__accordion {
        @apply space-y-0;
      }

      & .faqs-block__item {
        border-top: 2px solid var(--color-primary-light);

        &:last-child {
          border-bottom: 2px solid var(--color-primary-light);
        }
      }

      & .faqs-block__question {
        @apply w-full flex items-center justify-between py-4 px-4 md:px-6 bg-white text-left font-bold text-lg md:text-xl cursor-pointer transition-colors duration-200 hover:bg-gray-50;
        border: none;
        color: var(--color-black);

        &:hover {
          background-color: #f9f9f9;
        }

        &.active {
          background-color: #f0f0f0;
        }
      }

      & .faqs-block__toggle {
        @apply font-bold text-xl ml-4 flex-shrink-0 transition-transform duration-200;
        color: var(--color-primary);
      }

      & .faqs-block__question-text {
        @apply flex-grow text-lg;
      }

      & .faqs-block__answer {
        @apply max-h-0 overflow-hidden transition-all duration-300 bg-white;

        &.active {
          @apply max-h-none;
        }

        & > * {
          @apply px-4 md:px-6 py-4;

          &:first-child {
            @apply pt-4;
          }

          &:last-child {
            @apply pb-4;
          }
        }
      }
    }
  }

  & .news-views {
    @apply pt-[50px];

    & h4,
    h5,
    h6,
    p {
      @apply text-white;
    }

    &.large-offset-1 {
      margin-left: 0 !important;
    }

    & .news-views__all {
      @apply mr-0;
    }
  }

  & .header__wrapper {
    @apply mr-4;
  }

  & .footer__regulatory-text {
    color: var(--color-grey);
  }

  & .image-text-block--image-right {
    @apply flex-col md:flex-row-reverse;
  }

  & .image-text-block--image-left {
    @apply flex-col md:flex-row;
  }

  & .image-text-block {
    @apply flex items-start gap-8 max-w-[1140px] mx-auto py-8 md:py-12;

    & .image-text-block__image-col {
      @apply flex w-full md:w-1/2 items-center justify-center;

      & .image-text-block__image-col__image {
        @apply w-full h-auto object-cover object-center;
      }
    }

    & .image-text-block__content-col {
      @apply flex w-full md:w-1/2 items-center justify-center;

      & .image-text-block__title {
        @apply text-2xl md:text-[30px] font-bold mb-0;
      }

      & .image-text-block__text {
        @apply text-base md:text-lg leading-relaxed mt-4;
        color: var(--color-grey);
      }
    }
  }
}