/*
 * Theme Name: Ahoi
 * Author: Florian Strasser
 * Version: 2.0.0
 * Text Domain: ahoi
 */

/* Makes sure that the footer is at the bottom of the page */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 2px);

  main {
    flex-grow: 1;
  }
}

.admin-bar .wp-site-blocks {
  min-height: calc(100svh - var(--wp-admin--admin-bar--height) - 2px);
}

/* reset spacings for main */
:root main > * {
  margin-block-start: 0;
}

.wp-site-blocks > * {
  margin-block-start: 0;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.is-content-justification-right {
  justify-content: flex-end;
}

/* Template Part: Social Links */
ul.social-links {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;

  li {
    margin: 0 0.5rem;
  }

  a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--white);
    text-decoration: none;
    background-color: var(--wp--preset--color--navyblue);
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: bold;
    overflow: hidden;
    transition: background-color var(--wp--custom--transition--duration)
      var(--wp--custom--transition--timing-function);

    &:hover {
      background-color: var(--wp--preset--color--red);
    }

    &:focus-visible {
      outline: var(--wp--custom--outline);
      outline-offset: 4px;
    }
  }
}

body:has(header.wp-block-template-part) {
  --header-height: clamp(6.5rem, 10vw, 10rem);

  transition: padding-top var(--wp--custom--transition--duration)
    var(--wp--custom--transition--timing-function);

  &.page--scrolled {
    --header-height: clamp(4.5rem, 10vw, 6.5rem);
  }

  &:not(.block-editor-iframe__body) {
    padding-top: var(--header-height);
  }
}

header.wp-block-template-part {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
}

body.admin-bar header.wp-block-template-part {
  top: var(--wp-admin--admin-bar--height);
}

.header-nav {
  a {
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0;
    font-weight: 650;
  }
}

.page-header-container {
  align-items: center;
  white-space: nowrap;
  height: var(--header-height);
  z-index: 2;
  transition: height var(--wp--custom--transition--duration)
    var(--wp--custom--transition--timing-function);
}

.page-header-search {
  display: none;
  z-index: 1;
  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.3);
}

.search-toggle-mobile {
  @media (min-width: 54rem) {
    display: none;
  }
}

.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
  width: 2.25rem;
  height: 2.25rem;
}

.wp-block-safe-svg-svg-icon {
  display: flex;
}

.site-logo {
  flex-shrink: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  img {
    border-radius: 0;
    width: auto !important;
    height: clamp(33px, 4vw, 52px) !important;
  }
}

.wp-block-navigation__responsive-container-close {
  top: 2.5rem;
}

@media (min-width: 54rem) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: block !important;
  }
}

@media (min-width: 600px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: none;
  }
}

section:not(.wp-block-template-part),
main > article {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
}

section {
  scroll-margin: 4rem;
}

blockquote {
  p {
    border-left: 5px solid var(--wp--preset--color--red);
    padding-left: 2rem;
  }
}

a:where(:not(.wp-element-button, .wp-block-read-more, :has(img))) {
  font-weight: bold;
  text-decoration-thickness: 10%;
  text-underline-offset: 20%;
}

button,
a:where(:not(.wp-element-button, .wp-block-read-more)) {
  &:focus-visible {
    outline: var(--wp--custom--outline);
    outline-offset: 4px;
    border-radius: 0.25rem;
  }
}

.query-with-highlighted-post {
  & .wp-block-post:first-of-type {
    grid-column: 1 / -1;

    @media (min-width: 64rem) {
      & h3 {
        font-size: var(--wp--custom--font-size--h-2) !important;
      }

      & article {
        display: grid;
        grid-template-columns: 58% auto;

        & .content-wrapper {
          padding: 3rem 2rem;
        }

        & figure {
          height: 100%;
          min-height: 250px;
          width: 100%;
          aspect-ratio: initial !important;
        }
      }
    }
  }
}

.main-footer-navigation {
  @media (max-width: 54rem) {
    flex-direction: column;
  }

  a {
    font-weight: 500;
  }
}

.sub-footer-wrapper {
  @media (max-width: 54rem) {
    flex-direction: column;
  }
}

.sub-footer-text {
  @media (max-width: 54rem) {
    flex-direction: column;
  }
}

.sub-footer-navigation {
  @media (max-width: 54rem) {
    flex-direction: column;
  }

  a {
    font-size: 0.875rem;
    text-decoration: underline;
    text-decoration-thickness: 7.5%;
    text-underline-offset: 20%;
  }
}

:root :where(.is-layout-grid) {
  row-gap: 4rem;
}

.standalone-sticky-post article {
  @media (max-width: 58rem) {
    padding: 1rem;
    background-color: white;
    border-radius: calc(var(--wp--custom--border--radius) + 1rem);
    border: 1px solid #c4c4c4;

    & h2 {
      font-size: var(--wp--custom--font-size--h-3) !important;
    }
  }

  @media (min-width: 58rem) {
    display: grid;
    grid-template-areas: "main";

    * {
      grid-area: main;
      isolation: isolate;
    }

    & figure {
      margin-bottom: 5rem;
    }

    & .standalone-sticky-post__content {
      background-color: var(--wp--preset--color--base);
      place-self: end;
      width: 75%;
      padding-top: 2rem;
      padding-right: 2rem;
      padding-bottom: 2rem;
      padding-left: 2rem;
      border-radius: 1.25rem;
    }

    & a.wp-block-read-more {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
  }
}

.post-type-fragment
  .block-editor-block-list__layout.is-root-container
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--preset--spacing--layout-wide);
}

.wp-element-button,
.wp-block-read-more,
.wpforms-form button.wpforms-submit {
  transition:
    background-color var(--wp--custom--transition--duration)
      var(--wp--custom--transition--timing-function),
    color var(--wp--custom--transition--duration)
      var(--wp--custom--transition--timing-function),
    border-color var(--wp--custom--transition--duration)
      var(--wp--custom--transition--timing-function) !important;

  &:hover {
    color: var(--wp--preset--color--base) !important;
    background-color: var(--wp--preset--color--contrast) !important;
    border-color: var(--wp--preset--color--contrast) !important;
  }

  &:focus-visible {
    outline: var(--wp--custom--outline) !important;
    outline-offset: 4px !important;
  }
}

.wp-block-gallery.has-nested-images {
  figure.wp-block-image:not(#individual-image) {
    max-width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);

    @media (max-width: 54rem) {
      width: initial;
      max-width: initial;
    }
  }

  &.columns-3 {
    figure.wp-block-image:not(#individual-image) {
      max-width: calc(
        33.33333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.66667
      );

      @media (max-width: 54rem) {
        width: initial;
        max-width: initial;
      }
    }
  }

  &.columns-4 {
    figure.wp-block-image:not(#individual-image) {
      max-width: calc(
        25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75
      );

      @media (max-width: 54rem) {
        width: initial;
        max-width: initial;
      }
    }
  }

  &.columns-5 {
    figure.wp-block-image:not(#individual-image) {
      max-width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);

      @media (max-width: 54rem) {
        width: initial;
        max-width: initial;
      }
    }
  }
}

.wpforms-form {
  --wpforms-button-size-font-size: 1rem;
  --wpforms-button-size-height: initial;

  & .wpforms-field-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    column-gap: 2rem;

    & input[type="text"],
    & input[type="email"],
    & input[type="tel"],
    & input[type="url"],
    & input[type="number"],
    & input[type="date"],
    & input[type="time"],
    & input[type="password"],
    & textarea {
      max-width: initial;
    }

    & .wpforms-field-textarea {
      grid-column: 1 / -1;
    }
  }

  & button.wpforms-submit {
    text-transform: uppercase;
    letter-spacing: 0%;
    font-weight: 650 !important;
    line-height: 1.5 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;

    &::after {
      border: none !important;
    }
  }
}

.wp-block-post-featured-image {
  width: 100%;

  & :where(img) {
    display: inline-block;
    background-color: #eee;
  }
}

main.coming-soon {
  justify-content: center;
}