/*
Theme Name: Ratioplan
Description: Individuelles Block-Theme für Ratioplan GmbH. Inhalte im Website-Editor bearbeitbar.
Version: 1.4.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ratioplan
*/

/* Das vollständige Panorama bleibt auch auf schmalen Bildschirmen sichtbar. */
.ratioplan-harbor {
  aspect-ratio: 1942 / 809;
  width: 100%;
  padding: 0 !important;
  background: #52616a url("assets/images/lindau-hafen.png") center center / cover no-repeat;
  margin-block: 0 !important;
}
.ratioplan-harbor .ratioplan-image-description {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Auch im Website-Editor sichtbar, ohne die Bildbeschreibung anzuzeigen. */
.editor-styles-wrapper .ratioplan-harbor { min-height: 160px; }

/* Lesbare Inhalte und sichtbare Tastaturbedienung auf allen Bildschirmgrößen. */
.wp-site-blocks *, .wp-site-blocks *::before, .wp-site-blocks *::after {
  box-sizing: border-box;
}
.wp-site-blocks :where(p, li, h1, h2, h3, h4, a) {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.wp-site-blocks :where(.wp-block-column, .wp-block-group) { min-width: 0; }
.wp-site-blocks :where(img, video) { max-width: 100%; height: auto; }
.wp-site-blocks :where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid #a17a32;
  outline-offset: 4px;
}
.wp-site-blocks .wp-block-button__link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wp-site-blocks .wp-block-navigation-item__content {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.wp-site-blocks .wp-block-navigation__responsive-container-open,
.wp-site-blocks .wp-block-navigation__responsive-container-close {
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
}
.wp-site-blocks .wp-block-table { overflow-x: auto; }
.wp-site-blocks main .has-hero-font-size {
  font-size: clamp(2.2rem, 5.6vw, 5.4rem) !important;
}
.wp-site-blocks main .has-x-large-font-size,
.wp-site-blocks main .wp-block-post-title {
  font-size: clamp(1.9rem, 3.8vw, 3.2rem) !important;
}

/* Das WordPress-Menü klappt schon auf Tablets ein. Der native Dialog bleibt erhalten. */
@media (max-width: 1100px) {
  .wp-site-blocks .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
    display: none;
  }
  .wp-site-blocks .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .wp-site-blocks .wp-block-navigation__responsive-container.is-menu-open {
    padding: 24px;
    background: #f5f3ed;
    color: #122c3b;
  }
  .wp-site-blocks .is-menu-open .wp-block-navigation__container {
    gap: 12px;
    align-items: flex-start;
    width: 100%;
  }
  .wp-site-blocks .is-menu-open .wp-block-navigation-item__content {
    padding: 8px 0;
    font-size: 1.2rem;
  }
}

/* Inhaltsbereiche auf kleineren Tablets untereinander statt schmaler Textspalten. */
@media (max-width: 900px) {
  .wp-site-blocks main .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
    gap: 28px !important;
  }
  .wp-site-blocks main .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
    flex-grow: 1;
  }
  .wp-site-blocks main > .has-navy-background-color .is-vertically-aligned-bottom {
    border-left: 0 !important;
    border-top: 1px solid #d6b77b;
    padding-left: 0 !important;
    padding-top: 24px;
  }
}

@media (max-width: 600px) {
  .wp-site-blocks { font-size: 1rem; line-height: 1.7; }
  .wp-site-blocks header > .wp-block-group {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .wp-site-blocks header .wp-block-group > p {
    font-size: 20px !important;
    letter-spacing: 1.5px !important;
  }
  .wp-site-blocks main > .wp-block-group:not(.ratioplan-harbor) {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .wp-site-blocks main .wp-block-column.has-background {
    padding: 26px 22px !important;
  }
  .wp-site-blocks main .has-medium-font-size { font-size: 1rem !important; }
  .wp-site-blocks .wp-block-buttons > .wp-block-button {
    width: 100%;
  }
  .wp-site-blocks .wp-block-buttons .wp-block-button__link { width: 100%; }
  .wp-site-blocks main .wp-block-post-content :where(ol, ul) { padding-left: 1.5em; }
  .wp-site-blocks main .wp-block-post-content li { margin-bottom: 1em; }
}