/* Theme Name:   Auri Group
Theme URI:    https://auri-group.com
Description:  A custom WordPress theme for Auri Group.
Author:       Nimrod Cohen
Version:      1.0.0
License:      GPL-2.0-or-later
Text Domain:  auri-group
*/
html {
  scroll-behavior: smooth;
}

[dir="rtl"] {
  font-family: "Assistant", system-ui, sans-serif;
  *:not(.brand-logo):not(.brand-logo *) {
    font-family: "Assistant", system-ui, sans-serif;
  }
}

.mobile-menu-btn {
  position: relative;
  width: 40px; /* w-10 */
  height: 40px; /* h-10 */
  display: flex; /* Keep flex for initial centering */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 50;

  .hamburger {
    position: absolute; /* Absolute positioning for precise control */
    left: 50%;
    width: 20px; /* w-5 */
    height: 2px; /* h-0.5 */
    background-color: #334155; /* bg-slate-700 */
    transition: all 0.3s ease;
    transform: translateX(-50%); /* Center horizontally */

    &:nth-child(1) {
      top: 14px; /* Position for the top line */
    }
    &:nth-child(2) {
      top: 50%;
      transform: translateX(-50%) translateY(-50%); /* Center middle line */
    }
    &:nth-child(3) {
      top: 24px; /* Position for the bottom line */
    }
  }

  &.active .hamburger {
    &:nth-child(1) {
      top: 50%;
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
    }
    &:nth-child(2) {
      opacity: 0;
    }
    &:nth-child(3) {
      top: 50%;
      transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    }
  }
}

.location {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232c50e9%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

main.project-page {
  section.project-details {
    .sticky-details {
      position: sticky;
      top: 100px;
      height: fit-content;
    }
  }
}

section#contact {
  position: relative;

  .contact-form-container {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 120%);
    max-width: 100vw;
    bottom: 0;
    box-shadow: 0px 0px 50px 3px #00000070;
    transition: all 0.3s ease-in-out;

    &.show {
      transform: translate(-50%, 0);
    }

    .form-header-popup {
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      padding: 1rem;
      box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.1);
    }

    .form-title {
      font-size: 1.75rem;
      font-weight: bold;
      color: white;
      margin-bottom: 0.5rem;
      text-align: center;
    }

    .form-subtitle {
      color: rgba(255, 255, 255, 0.9);
      text-align: center;
      font-size: 1rem;
    }

    .form-body {
      background: #0f172a;
      padding: 2rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-top: none;

      form {
        z-index: 2; /* Ensure form is above the success message */
      }
      .success-message {
        z-index: 1;
      }
    }

    .form-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      margin-bottom: 0.5rem;
    }

    .form-group {
      margin-bottom: 0.5rem;

      .form-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
        font-size: 0.875rem;

        &::placeholder {
          color: rgba(255, 255, 255, 0.6);
        }

        &:focus {
          border-color: #60a5fa;
          box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
          outline: none;
          background: rgba(255, 255, 255, 0.15);
        }

        &[type="textarea"] {
          resize: none;
        }
      }
    }

    .submit-btn {
      width: 100%;
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
      border: none;
      padding: 0.875rem 1.5rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: 1rem;

      &:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-1px);
        box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.3);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
      }
    }

    .form-disclaimer {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.7);
      text-align: center;
      line-height: 1.4;
    }
  }
}

/* get rid of annoying complianz button in mobile */
@media (max-width: 768px) {
  .cmplz-btn {
    transform: translate(0, 100%);
  }

  section#contact {
    .contact-form-container {
      .form-body {
        width: unset;
      }
    }
  }
}