/*
Theme Name: Amsel
Author: Roman Fink
Author URI: https://finkthemes.com/
Description: A modern, minimalist block theme for agencies and creative studios.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amsel
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, blog, portfolio, news
*/

.wp-site-blocks {
  overflow-x: hidden;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: #fff;
}

header + * {
  margin-top: 91px !important;
}

@media (max-width: 781px) {
  header + * {
    margin-top: 50px !important;
  }
  .amsel-header-cta {
    display: none;
  }
}

/* Button hover / focus / active effects */
.wp-block-button {
  position: relative;
}

.wp-block-button__link,
.wp-element-button {
  position: relative;
  z-index: 1;
  transform: translate(0, 0);
  transition: transform 0.2s ease;
}

.wp-block-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 54px;
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 165, 0, 1) 11%, rgba(250, 255, 0, 1) 22%, rgba(72, 255, 0, 1) 33%, rgba(0, 255, 116, 1) 45%, rgba(0, 255, 254, 1) 56%, rgba(0, 49, 255, 1) 67%, rgba(114, 0, 255, 1) 78%, rgba(255, 0, 247, 1) 89%, rgba(255, 0, 105, 1) 100%);;
  opacity: 0;
  z-index: 0;
  transform: translate(0, 0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wp-block-button:hover > .wp-block-button__link {
  transform: translate(4px, -4px);
}

.wp-block-button:hover::after {
   opacity: 1;
}

.wp-block-button:focus-within > .wp-block-button__link {
  transform: translate(4px, -4px);
  outline: 2px solid #555;
  outline-offset: 2px;
}

.wp-block-button:focus-within::after {
  opacity: 1;
  transform: translate(-2px, 2px);
}

.wp-block-button:active > .wp-block-button__link {
  transform: translate(1px, -1px);
}

.wp-block-button:active::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* Outline button: force opaque background so shadow doesn't show through */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: var(--wp--preset--color--background, #fff);
}

/* Light/white and outline buttons: dark filled shadow */
.wp-block-button:has(.has-background-background-color)::after,
.wp-block-button.is-style-outline::after {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
}

/* Mobile overlay menu */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start;
  text-align: start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
  align-items: flex-start;
  gap: var(--wp--preset--spacing--m);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--m);
  font-weight: 500;
}

/* Nested submenu items: indented, smaller, muted */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  align-items: flex-start;
  gap: var(--wp--preset--spacing--xs);
  padding-top: var(--wp--preset--spacing--xs);
  padding-inline-start: var(--wp--preset--spacing--m);
  border-inline-start: 1px solid var(--wp--preset--color--accent-blue);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--s);
  font-weight: 400;
  color: var(--wp--preset--color--secondary);
}

/* Hide related posts section when query returns no results */
.amsel-related-posts:not(:has(.wp-block-post)) {
  display: none;
}

/* Comment form & inputs */
form {
  display: flex;
  flex-direction: column;
  gap: 24px;

  .row {
    display: flex;
    gap: 20px;
    justify-content: space-between;
  }
}
label {
  position: relative;
  flex-grow: 1;

  .title {
    position: absolute;
    top: 17px;
    left: 24px;
    z-index: 1;
    transition: .3s ease-in-out;
  }

  &:has(input:focus),
  &:has(input:not(:placeholder-shown)) {
    .title {
      top: 10px;
      font-size: 12px;
      opacity: 0.7;
    }
  }
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea {
  width: 100%;
  height: 56px;
  padding: 23px 23px 7px;
  border: 1px solid var(--wp--preset--color--accent-blue);
  border-radius: 24px;
  background: var(--wp--preset--color--background);
  font-family: var(--wp--preset--font-family--martian-grotesk);
  font-size: var(--wp--preset--font-size--s);
  color: var(--wp--preset--color--primary);
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

input::placeholder {
  opacity: 0;
}

input + .wpcf7-spinner {
  position: absolute;
}

input[type="submit"] {
  font-size: 20px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary);
}

textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

.comment-form label {
  display: block;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  margin-bottom: var(--wp--preset--spacing--xs);
}

.comment-form p {
  margin-bottom: var(--wp--preset--spacing--m);
}

.comment-form .form-submit input[type="submit"] {
  padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--l);
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: 14px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--background);
  font-family: var(--wp--preset--font-family--martian-grotesk);
  font-size: var(--wp--preset--font-size--s);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.comment-form .form-submit input[type="submit"]:hover {
  opacity: 0.85;
}

.comment-respond {
  margin-top: var(--wp--preset--spacing--xl);
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-list .comment {
  margin-bottom: var(--wp--preset--spacing--l);
  padding-bottom: var(--wp--preset--spacing--l);
  border-bottom: 1px solid var(--wp--preset--color--accent-blue);
}

.comment-list .children {
  list-style: none;
  padding-left: var(--wp--preset--spacing--xl);
}


/* Services */
@media (max-width: 781px) {
  .services {
    & > div {
      flex-direction: column;
      gap: 20px;
    }

    .services-left {
      order: 2;
    }
    .services-right {
      order: 1;
      
      & > div {
        padding-bottom: 20px !important;
      }

      & .is-layout-grid {
        display: flex;
        flex-direction: column;
      }
    }
  }
}

/* FAQ */
@media (max-width: 781px) {
  .faq {
    flex-direction: column;
    gap: 20px;
  }
}

/* Contact */
@media (max-width: 781px) {
  .contact {
    flex-direction: column;
    gap: 20px;

    .wp-container-content-432d1f4f {
      flex-basis: 0;
    }

    h1 + p {
      margin-bottom: 0 !important;
    }

    form {
      gap: 14px;

      .row {
          flex-direction: column;
      }
    }
  }
}

/* buttons */
@media (max-width: 781px) {
  .wp-block-buttons {
    width: 100%;

    &>.wp-block-button {
      width: 100%;
    }

    a {
      font-size: 14px;
    }
  }
}

/* Hero slider */
.hero-slider {
  position: absolute;
  bottom: 80px;
  left: 40%;
  z-index: 1;
  gap: 20px;
  flex-wrap: nowrap;
  overflow: hidden;
  mask-image: linear-gradient(284deg, #000 72%, rgba(0, 0, 0, 0.00) 94%);
  display: flex;

  .marquee {
    animation: slider 30s linear infinite;
    gap: 20px;
    display: flex;
  }
  
  .wp-block-gallery {
    gap: 20px;
    flex-wrap: nowrap;
    
    figure.wp-block-image img {
      height: 100% !important;
      max-height: 500px !important;
      border-radius: 20px;
      object-fit: cover;
      object-position: center;
      max-width: initial !important;
      flex: none;
    }
  }
}

@keyframes slider {
  from {transform: translateX(0);}
  to {transform: translateX(-50%);}
}

/* Height 100% for image in figure */
.height-100 {
  img {
    height: 100% !important;
  }
}

/* List of block for the roadmap section */
.roadmap-list {
  position: relative;

  &::before {
    content: "";
    height: calc(100% - 30px);
    position: absolute;
    left: 30px;
    top: 0;
    width: 19px;
    border-left: 2px dashed #191A23;
  }
  &::after {
    content: "";
    height: 100%;
    position: absolute;
    left: 22px;
    top: 0;
    width: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='27' viewBox='0 0 19 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.45 0C4.2255 0 0 4.2255 0 9.45C0 11.799 0.675 13.9995 1.9035 15.984C3.186 18.063 4.8735 19.845 6.1695 21.924C6.804 22.9365 7.263 23.8815 7.749 24.975C8.1 25.7175 8.3835 27 9.45 27C10.5165 27 10.8 25.7175 11.1375 24.975C11.637 23.8815 12.0825 22.9365 12.717 21.924C14.013 19.8585 15.7005 18.0765 16.983 15.984C18.225 13.9995 18.9 11.799 18.9 9.45C18.9 4.2255 14.6745 0 9.45 0ZM9.45 13.1625C7.587 13.1625 6.075 11.6505 6.075 9.7875C6.075 7.9245 7.587 6.4125 9.45 6.4125C11.313 6.4125 12.825 7.9245 12.825 9.7875C12.825 11.6505 11.313 13.1625 9.45 13.1625Z' fill='black'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
  }
}