/*
Theme Name: SGHA
Theme URI: 
Author: Oliver Behnke
Author URI: 
Description: Segelgemeinschaft Hannover
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: https://raw.githubusercontent.com/Automattic/themes/trunk/LICENSE
Template: blockbase
Text Domain: sgha
Domain Path: /languages
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
*/

/* Let native controls and scrollbars follow the browser's appearance. Scope
   editor styling to its canvas rather than changing the admin interface. */
html:not(:has(body.wp-admin)),
.editor-styles-wrapper {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  body:not(.wp-admin),
  .editor-styles-wrapper {
    --wp--preset--color--background: #1c1c1e;
    --wp--preset--color--foreground: #e5e5e7;
    --wp--preset--color--primary: #64b5f6;
    --wp--preset--color--secondary: #90caf9;
    --wp--preset--color--tertiary: #48484a;
    --wp--preset--color--muted: #aeaeb2;
    --wp--preset--color--surface: #2c2c2e;
    --wp--preset--color--control-border: #8e8e93;
    --wp--preset--color--link-text: var(--wp--preset--color--foreground);
    /* Rebind dependent aliases here: inherited variables otherwise retain
       the light values resolved at their original scope. */
    --wp--custom--button--border--color: var(--wp--custom--color--primary);
    --wp--custom--button--color--background: var(--wp--custom--color--primary);
    --wp--custom--button--color--text: var(--wp--custom--color--background);
    --wp--custom--button--hover--border--color: var(--wp--custom--color--secondary);
    --wp--custom--button--hover--color--background: var(--wp--custom--color--secondary);
    --wp--custom--button--hover--color--text: var(--wp--custom--color--background);
    --wp--custom--button--outline--border--color: var(--wp--custom--color--primary);
    --wp--custom--button--outline--color--background: var(--wp--custom--color--background);
    --wp--custom--button--outline--color--text: var(--wp--custom--color--primary);
    --wp--custom--button--outline--hover--border--color: var(--wp--custom--color--primary);
    --wp--custom--button--outline--hover--color--background: var(--wp--custom--color--secondary);
    --wp--custom--button--outline--hover--color--text: var(--wp--custom--color--background);
    --wp--custom--color--background: var(--wp--preset--color--background);
    --wp--custom--color--foreground: var(--wp--preset--color--foreground);
    --wp--custom--color--primary: var(--wp--preset--color--primary);
    --wp--custom--color--secondary: var(--wp--preset--color--secondary);
    --wp--custom--color--tertiary: var(--wp--preset--color--tertiary);
    --wp--custom--form--border--color: var(--wp--preset--color--control-border);
    --wp--custom--latest-posts--meta--color--text: var(--wp--custom--color--primary);
    --wp--custom--navigation--submenu--border--color: var(--wp--custom--color--primary);
    --wp--custom--navigation--submenu--color--background: var(--wp--preset--color--surface);
    --wp--custom--navigation--submenu--color--text: var(--wp--custom--color--foreground);
  }
}

/* Blockbase gives the search wrapper a fixed white background. */
.wp-block-search .wp-block-search__inside-wrapper,
.wp-block-search .wp-block-search__input {
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--foreground);
  border-color: var(--wp--preset--color--control-border);
}

.wp-block-search input.wp-block-search__input::placeholder {
  color: var(--wp--preset--color--muted);
  opacity: 1;
}

/* Give keyboard users the same clear focus indicator throughout the site.
   Keep this inside site content and the editor canvas, away from admin UI. */
:is(.wp-site-blocks, .editor-styles-wrapper)
  :is(a, button, input, textarea, select, summary, [tabindex]):not(:disabled):focus-visible {
  outline: 2px solid var(--wp--preset--color--foreground);
  outline-offset: 2px;
}

/* Links over cover photographs use their own contrasting text color. */
:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-cover a:not(:disabled):focus-visible {
  outline-color: currentColor;
}

/* Visible social labels follow text links without recoloring their icons. */
.wp-block-social-links.is-style-logos-only.has-visible-labels .wp-block-social-link-label {
  color: var(--wp--preset--color--link-text);
  text-decoration: underline;
}

.wp-block-social-links.is-style-logos-only.has-visible-labels a:is(:hover, :focus, :active) .wp-block-social-link-label {
  text-decoration: none;
}

.wp-block-social-links.is-style-logos-only.has-visible-labels .wp-social-link:hover {
  transform: none;
}

/* Match the search controls while retaining the password form's Enter label. */
.post-password-form p:has(input[type="password"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.post-password-form p:has(input[type="password"]) > label,
.post-password-form p:has(input[type="password"]) > .wp-block-button {
  margin: 0;
  min-width: 0;
}

/* Wrap the label text before separating the input from its submit button.
   The outer row reserves only the label's minimum content width (the input),
   while the inner row can place the label text above that input. */
.post-password-form p:has(input[type="password"]) > label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 1 1 min-content;
  max-width: max-content;
}

.post-password-form p:has(input[type="password"]) > .wp-block-button {
  flex: 0 0 auto;
}

.post-password-form input[type="password"],
.post-password-form input[type="submit"] {
  box-sizing: border-box;
  border: 0;
  border-radius: 1px;
  min-height: 44px;
  padding: 0.5em 1em;
  font: inherit;
  line-height: 1.5;
}

.post-password-form input[type="password"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 2px solid var(--wp--preset--color--control-border);
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--foreground);
  max-width: 100%;
}

.post-password-form input[type="submit"],
.post-password-form input[type="submit"]:hover {
  background-color: var(--wp--preset--color--link-text);
  color: var(--wp--preset--color--background);
}

/* Keep the article gutter only while WordPress displays columns side by side. */
@media (min-width: 782px) {
  .wp-block-column.sgha-article-column {
    padding-inline-end: min(60px, 5vw);
  }
}

/* Preserve the fluid top-level gap even if blockGap is sanitized by WordPress.
   The open mobile menu retains its own spacing. */
.navigation-top .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
  gap: clamp(12px, 4vw, 50px);
}

/* JS chooses upward opening only where the front-page dropdown needs it.
   The mobile overlay keeps WordPress's normal in-flow submenu layout. */
.navigation-top .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container .sgha-submenu-above > .wp-block-navigation__submenu-container {
  top: auto;
  bottom: 100%;
}

.navigation-top .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container > .sgha-submenu-above > .wp-block-navigation__submenu-icon svg {
  transform: rotate(180deg);
}

/* Match the 600px horizontal-navigation breakpoint, not the columns breakpoint.
   Nested flyouts stay beside their parent, including when opening upward. */
@media (min-width: 600px) {
  .navigation-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation__submenu-container {
    left: 100%;
    right: auto;
    top: -1px;
    bottom: auto;
  }

  .navigation-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation__submenu-container::before {
    content: "";
    position: absolute;
    right: 100%;
    width: 0.5em;
    height: 100%;
  }

  .navigation-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation__submenu-icon svg {
    transform: rotate(-90deg);
  }

  .navigation-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__submenu-container > .sgha-submenu-above > .wp-block-navigation__submenu-container {
    top: auto;
    bottom: 0;
  }

  .navigation-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__submenu-container > .sgha-submenu-left > .wp-block-navigation__submenu-container {
    left: auto;
    right: calc(100% + 1px);
  }

  .navigation-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__submenu-container > .sgha-submenu-left > .wp-block-navigation__submenu-container::before {
    right: auto;
    left: 100%;
  }

  .navigation-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__submenu-container > .sgha-submenu-left > .wp-block-navigation__submenu-icon svg {
    transform: rotate(90deg);
  }
}

/* change submenu border color */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
  background-color: var(--wp--preset--color--surface);
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container,
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  color: var(--wp--preset--color--foreground);
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  background-color: var(--wp--preset--color--background);
}

.wp-block-navigation__submenu-container {
  border-color: var(--wp--preset--color--tertiary) !important;
}

/* change submenu background on hover (disabled) */
/*
.wp-block-navigation__submenu-container  .wp-block-navigation-item__content:hover {
  background: #bbbbbb;
}
*/

/* class to remove link underlining */
.stealth-link a:link {
  text-decoration: none;
}

/* Let cover photographs scroll normally when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  .wp-block-cover.has-parallax,
  .wp-block-cover .wp-block-cover__image-background.has-parallax {
    background-attachment: scroll;
  }
}

/* Keep the responsive gap even when WordPress sanitizes the blockGap value. */
.wp-block-group.sgha-branding {
  gap: clamp(12px, 3vw, 30px);
}

/* Use the logo's natural proportions, with a responsive no-JavaScript width. */
.sgha-branding > .wp-block-site-logo {
  align-self: center;
  flex: 0 0 min(var(--sgha-logo-width, clamp(4rem, 10vw, 6rem)), 33%);
  line-height: 0;
}

.sgha-branding > .sgha-branding-text {
  flex: 1 1 0;
  min-width: 0;
  /* The title's cqi font size follows the space remaining beside the logo. */
  container-type: inline-size;
}

.sgha-branding-text > .wp-block-site-title,
.sgha-branding-text > .wp-block-site-tagline {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Align against the uppercase title's cap height rather than the empty
   space above it. Preserve the spacing between the title and tagline. */
.sgha-branding-text > .wp-block-site-title {
  text-box: trim-start cap alphabetic;
}

/* Trim the outer bottom edge to the tagline's baseline. Descenders remain
   visible below it; the spacing between the two text blocks is unchanged. */
.sgha-branding-text > .wp-block-site-tagline {
  text-box: trim-end cap alphabetic;
}

/* Approximate the optical correction in browsers without text-box support. */
@supports not (text-box: trim-start cap alphabetic) {
  .sgha-branding > .wp-block-site-logo {
    transform: translateY(0.25rem);
  }
}

/* Let automatic sizing also govern the editor's inline-sized image wrapper. */
.sgha-branding .wp-block-site-logo > div:first-child {
  width: 100% !important;
  height: auto !important;
}

.sgha-branding .wp-block-site-logo .custom-logo-link {
  display: block;
}

.sgha-branding .wp-block-site-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Post Content spans the page so wide/full blocks can extend beyond the text.
   Inset floated images to the centered text column instead of the page edge. */
:is(.wp-block-post-content, .editor-styles-wrapper .is-root-container).is-layout-constrained > .wp-block-image.alignright {
  margin-right: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

:is(.wp-block-post-content, .editor-styles-wrapper .is-root-container).is-layout-constrained > .wp-block-image.alignleft {
  margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

/* On narrow screens, give right-aligned images their own centered line
   instead of leaving an unusably narrow strip of text beside the float. */
@media (max-width: 480px) {
  :is(.wp-block-post-content, .editor-styles-wrapper .is-root-container).is-layout-constrained > .wp-block-image.alignright {
    float: none;
    clear: both;
    margin-inline: auto;
    max-width: 100%;
  }
}

/* A full table belongs below preceding floated images, not beside them. */
:is(.wp-block-post-content, .editor-styles-wrapper .is-root-container).is-layout-constrained > .wp-block-table {
  clear: both;
}

/* Let prose, cells, captions, and other body blocks inherit the document
   language's hyphenation dictionary in both the editor and the front end. */
.wp-block-post-content,
.editor-styles-wrapper .is-root-container {
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Keep headings, literal text, controls, and embedded navigation/branding
   unhyphenated, including when editing a whole template in the Site Editor. */
:is(.wp-block-post-content, .editor-styles-wrapper .is-root-container)
  :is(h1, h2, h3, h4, h5, h6, pre, code, kbd, samp, form, button, input,
      select, textarea, .wp-block-button, .wp-block-navigation,
      .wp-block-site-title, .wp-block-site-tagline) {
  -webkit-hyphens: none;
  hyphens: none;
}

/* Long page headings must fit narrow screens, including German compounds. */
.wp-block-post-content h1 {
  overflow-wrap: anywhere;
}

/* Ordinary pages share one title style, whether supplied by the template
   or by a Heading/classic HTML heading in their content. Article titles
   and special templates retain their own typography. */
.sgha-page :is(.sgha-page-title, .wp-block-post-content h1) {
  font-family: var(--wp--preset--font-family--body-font);
  font-size: var(--wp--custom--page-title--font-size);
  font-weight: var(--wp--custom--page-title--font-weight);
  line-height: var(--wp--custom--page-title--line-height);
  color: var(--wp--preset--color--foreground);
  text-align: start;
  margin-block: 0;
  overflow-wrap: anywhere;
}

/* Match the content layout's normal block gap after a template title. */
.sgha-page-heading + .wp-block-post-content {
  margin-block-start: var(--wp--custom--gap--vertical);
}

/* This opt-in style owns image sizing, including saved inline dimensions.
   Outside a content-sized row, images fill the width at their natural ratio. */
.wp-block-image.is-style-fit-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.wp-block-image.is-style-fit-column > a {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: var(--sgha-fit-image-flex, 0 1 auto);
}

.wp-block-image.is-style-fit-column img {
  display: block;
  min-height: 0;
  flex: var(--sgha-fit-image-flex, 0 1 auto);
  width: 100% !important;
  height: var(--sgha-fit-image-height, auto) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top;
}

.wp-block-image.is-style-fit-column > figcaption {
  flex-shrink: 0;
  margin-block-end: 0;
}

/* Let neighboring content set the row height. Ignore the editor's helper elements,
   but require this image to be the column's only content block. At least one
   other column must have ordinary content, so all-image rows cannot collapse. */
@media (min-width: 782px) {
  .wp-block-columns:has(> .wp-block-column > :not(.is-style-fit-column, .block-list-appender, .wp-block[aria-hidden="true"]))
    > .wp-block-column:has(> .is-style-fit-column):not(:has(> :not(.is-style-fit-column, .block-list-appender, .wp-block[aria-hidden="true"]))) {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    --sgha-fit-image-height: 0px;
    --sgha-fit-image-flex: 1 1 0px;
  }
}

/* Fit the cover and navigation with browser controls expanded. Keep the
   layout stable as controls retract, revealing more content below the header.
   Let tall content grow rather than clipping it. */
header.wp-block-template-part:has(> .sgha-header-cover) {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
  margin-bottom: 30px;
}

header.wp-block-template-part > .sgha-header-cover {
  flex: 1;
  min-height: 0 !important;
  align-items: flex-end;
}

.sgha-header-cover .sgha-header-cover-content {
  min-height: 0 !important;
}

header.wp-block-template-part:has(> .sgha-header-cover) > .navigation-top {
  flex-shrink: 0;
  margin-bottom: 0 !important;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
}

/* Fix the image layer itself to a stable viewport, avoiding mobile browsers'
   resizing of fixed backgrounds. Clip it to the scrolling cover boundary.
   Reduced-motion users retain the normal scrolling background. */
@media (prefers-reduced-motion: no-preference) {
  header.wp-block-template-part > .sgha-header-cover {
    clip-path: inset(0);
  }

  header.wp-block-template-part > .sgha-header-cover
  .wp-block-cover__image-background.has-parallax {
    position: fixed;
    background-attachment: scroll;
    height: 100lvh;
    bottom: auto;
  }
}

/* Keep the minimal photo header near one fifth of a small screen. Use the
   stable viewport height to avoid resizing as mobile browser bars retract.
   Content can still make the cover taller when needed, e.g. at large zoom. */
@media (max-width: 781px) {
  .wp-block-cover.sgha-header-minimal-cover {
    min-height: min(200px, 20svh) !important;
  }
}