/**
 * Theme Name:         Wabi lite
 * Author:             Horst Scheuer
 * Description:        Wabi lite ist mein einspaltiges Block-Theme auf Basis Wabi von Rich Tabor
 * Requires at least:  6.0
 * Tested up to:       6.3
 * Requires PHP:       5.6
 * Version:            101.1.3
 * License:            GNU General Public License v2 or later
 * License URI:        http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:        wabilite
 * Tags:               einspaltig, Editor-Stil, Headerbild, Beitragsbild, kein Textauszug, vollständige Website-Bearbeitung, Blockmuster, RTL-Sprachunterstützung, breite Blöcke, Blockstile
 */

/**
 * Tweaks
 */
 
.wp-block-site-title,
.wp-block-site-tagline {
  color: var(--wp--preset--color--foreground-alt);
}

nav {
  margin-top: 20px;
}
 
.wp-block-post-excerpt,
.entry-content {
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-chars: auto 3;
  -webkit-hyphenate-limit-lines: 4;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: auto 3;
  -ms-hyphenate-limit-lines: 4;
  hyphens: auto;
}

.wp-block-quote {
  border-left: 0.25em solid;
  margin: 1.75em 0 1.75em;
  padding-left: 1em;
}

.is-style-buttons .current {
  background-color: #b8b8ba !important;
}

.wp-block-latest-posts__list a {
  font-weight: bold;
}

.wp-block-tag-cloud a,
.wp-block-latest-posts a {
  text-decoration: none !important;
}

/**
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

a {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
  text-decoration-thickness: 4px;
}

a:active {
  text-decoration-thickness: 2px;
}

h1 a {
  text-decoration: none;
  text-underline-offset: 0.1ch;
}

h1 a:hover {
  text-decoration: none;
  text-underline-offset: 0.1ch;
}

h2 a {
  text-decoration: none;
  text-underline-offset: 0.1ch;
}

h2 a:hover {
  text-decoration: none;
  text-underline-offset: 0.1ch;
}

.wp-block-site-title a:hover {
  text-decoration-color: var(--wp--preset--color--foreground);
  text-decoration-thickness: 4px;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
  text-decoration: underline;
  text-decoration-style: solid;
}

footer .wp-block-query .wp-block-post-title a {
  text-decoration: none;
}

footer .wp-block-query .wp-block-post-title a:hover,
footer .wp-block-query .wp-block-post-title a:focus {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--wp--custom--color--accent);
}

/**
 * Heading styles.
 * Slight modifications to spacing around headings to help
 * distinguish content sections within the post content only.
 *
 * Using !important as the blockGap value overrides it without.
 */

.wp-block-post-content p+h1:not([style*="margin-top"]),
.wp-block-post-content p+h2:not([style*="margin-top"]),
.wp-block-post-content p+h3:not([style*="margin-top"]),
.wp-block-post-content p+h4:not([style*="margin-top"]),
.wp-block-post-content span+h1:not([style*="margin-top"]),
.wp-block-post-content span+h2:not([style*="margin-top"]),
.wp-block-post-content span+h3:not([style*="margin-top"]),
.wp-block-post-content span+h4:not([style*="margin-top"]) {
  margin-top: var(--wp--preset--spacing--60) !important;
}

/**
 * Colossal font size.
 * If added to the theme.json file, it makes the font size control not great.
 */
.font-size-colossal {
  font-size: var(--wp--custom--typography--font-size--colossal) !important;
}

/**
 * Code styles.
 * Slight tweaks to the code blocks.
 */
.wp-block-code {
  overflow: hidden;
  overflow-x: auto;
  white-space: pre;
}

p code {
  background: rgba(209, 209, 209, 0.25);
  border-radius: 4px;
  border: 1px solid rgba(58, 58, 58, 0.25);
  display: inline-block;
  font-size: 72.5%;
  padding: 0.05rem 0.5rem;
  position: relative;
  top: -2px;
  color: var(--wp--custom--color--code);
}

p code a {
  color: var(--wp--custom--color--code);
  text-decoration-thickness: 1px !important;
}

/**
 * Search input styles.
 * A bit hacky but core does not support styling
 * inputs via theme.json or block styles.
 */

header .wp-block-search {
  background: var(--wp--preset--color--background-alt);
}

header .wp-block-search__input {
  border: 0;
  background: transparent;
  color: currentcolor;
  z-index: 3;
  position: relative;
  padding: 12px;
  line-height: 1;
}

/* Remove hard-coded border. */
header .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  border: 0;
}

header .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
  padding: 12px;
}

header .wp-block-search__button {
  cursor: pointer;
}

header .has-accent-background-color .wp-block-search {
  background-color: var(--wp--custom--color--hero-text, var(--wp--preset--color--foreground));
  color: var(--wp--preset--color--accent);
}

header .has-accent-background-color .wp-block-search__input::placeholder {
  color: var(--wp--preset--color--accent);
}

header .has-accent-background-color .wp-block-search__input::-ms-input-placeholder {
  color: var(--wp--preset--color--accent);
}

header .has-accent-background-color .wp-block-search__input:-ms-input-placeholder {
  color: var(--wp--preset--color--accent);
}

/**
 * Add more gap between items in the loop block.
 * Once the block supports blockGap, this can be removed.
 */

@media (min-width: 600px) {

  .wp-block-post-template.is-flex-container,
  .wp-block-query-loop.is-flex-container {
    gap: 4rem;
  }

  .wp-block-post-template.is-flex-container.is-flex-container.columns-3>li {
    width: calc(33.33333% - 3rem);
  }
}

/**
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */

.wp-block-navigation__responsive-container.is-menu-open {
  padding-top: var(--wp--style--root--padding-right);
  padding-bottom: var(--wp--style--root--padding-right);
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-right);
}

/**
 * Image block, within post content.
 * Add additional margin to the image block, so that
 * it displays with the same spacing as paragraphs do.
 */

.wp-block-post-content p+.wp-block-image {
  margin-top: calc(var(--wp--style--block-gap) * 1.1) !important;
  margin-bottom: calc(var(--wp--style--block-gap) * 1.1) !important;
}

/**
 * Image block, when alignfull within post content.
 */

.wp-block-post-content p+.wp-block-image.alignfull {
  margin-top: var(--wp--preset--spacing--60) !important;
  margin-bottom: var(--wp--preset--spacing--60) !important;
}

/**
 * Featured image styles.
 * Add styles to the post featured image so its
 * different than other block themes.
 */

.blog .wp-block-post-featured-image {
  background-color: var(--wp--custom--color--accent);
}

.wp-block-post-featured-image a:hover img {
  opacity: 0.75;
}

/**
 * Post author styles.
 * Minor tweaks to customize the appearance of the
 * core/post-author block.
 */

.is-style-avatar-only .wp-block-post-author__content {
  display: none;
}

.wp-block-post-author__content {
  align-self: center;
}

.wp-block-post-author__avatar img {
  border-radius: 100%;
  vertical-align: bottom;
}

/**
 * Post excerpt styles.
 * Remove excess margin from the block.
 */

.wp-block-post-excerpt__excerpt {
  margin-top: initial;
  margin-bottom: initial;
}

/**
 * Social link styles.
 * Use currentColor for social links to better support style variants.
 * Remove the social link transform transition.
 */

.wp-block-social-links.is-style-logos-only>.wp-social-link {
  color: currentColor;
}

.wp-block-social-link {
  transition: none;
  transform: none !important;
}

/**
 * Query Pagination styles.
 * Remove margin that throws this off alignment.
 */

.wp-block-query-pagination>.wp-block-query-pagination-previous {
  margin-left: 0;
  margin-right: 0;
}

/**
 * Registered block styles.
 * Applied to easily add accent colored borders
 * to media (core/image, core/video an ideabox/image-comparison blocks).
 */

.is-style-center,
.is-style-bottom-left,
.is-style-bottom-right {
  --spacing: var(--wp--preset--spacing--40);
  border-radius: var(--wp--custom--img-radius, 10px);
}

.is-style-center.alignfull,
.is-style-bottom-left.alignfull,
.is-style-bottom-right.alignfull,
.wp-block[data-align="full"]>.is-style-center,
.wp-block[data-align="full"]>.is-style-bottom-left,
.wp-block[data-align="full"]>.is-style-bottom-right {
  border-radius: 0;
}

.is-style-bottom-left {
  border-bottom-left-radius: 0;
}

.is-style-bottom-left img,
.is-style-bottom-left video {
  background: var(--wp--custom--color--accent);
  padding-right: var(--spacing);
  padding-top: var(--spacing);
}

.is-style-bottom-right {
  border-bottom-right-radius: 0;
}

.is-style-bottom-right img,
.is-style-bottom-right video {
  background: var(--wp--custom--color--accent);
  padding-left: var(--spacing);
  padding-top: var(--spacing);
}

.is-style-center img,
.is-style-center video {
  background: var(--wp--custom--color--accent);
  padding-left: var(--spacing);
  padding-right: var(--spacing);
  padding-top: var(--spacing);
}

.is-style-transparent .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--foreground);
}

.is-style-buttons .page-numbers {
  display: inline-flex;
  font-size: var(--wp--preset--font-size--small);
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
}

.is-style-buttons.wp-block-post-terms {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.is-style-buttons.wp-block-post-terms>a {
  display: inline-block;
  position: relative
}

.is-style-buttons.wp-block-post-terms .wp-block-post-terms__separator {
  display: none;
}

.is-style-buttons .page-numbers,
.is-style-buttons .wp-block-query-pagination-next,
.is-style-buttons .wp-block-query-pagination-previous,
.is-style-buttons.wp-block-post-terms>a {
  background-color: var(--wp--preset--color--background-alt);
  padding: 0.35rem 0.65rem 0.35rem;
  border-radius: 6px;
  text-decoration: none;
  position: relative;
  line-height: var(--wp--custom--typography--line-height--normal);
  margin: 0.15rem;
}

.is-style-buttons .page-numbers::after,
.is-style-buttons .wp-block-query-pagination-next::after,
.is-style-buttons .wp-block-query-pagination-previous::after,
.is-style-buttons.wp-block-post-terms>a::after {
  background-color: rgba(83, 83, 83, 0.1);
  border-radius: 6px;
  bottom: 0;
  content: '';
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 200ms cubic-bezier(0.7, 0, 0.3, 1);
}

.is-style-buttons .page-numbers:hover::after,
.is-style-buttons .wp-block-query-pagination-next:hover::after,
.is-style-buttons .wp-block-query-pagination-previous:hover::after,
.is-style-buttons.wp-block-post-terms>a:hover::after {
  opacity: 1;
}

.wp-block-image.is-style-rounded img {
  border-radius: var(--wp--custom--img-radius, 10px);
}

.wp-block-column.is-style-rounded {
  border-radius: var(--wp--custom--img-radius, 10px);
}

/**
 * Hacks to ensure alternate accent colors display
 * properly on styles that do not support them.
 */
.single-post .has-accent-alt-color {
  color: var(--wp--custom--color--hero-text, #000000);
}

.single-post .has-accent-alt-color a {
  color: var(--wp--custom--color--hero-text, #000000);
}

.single-post .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  color: var(--wp--custom--color--hero-text, #000000);
}

/**
 * Comments
 */

.wp-block-comment-author-name {
  color: var(--wp--preset--color--foreground-alt);
  font-weight: 800;
}

.wp-block-comment-date {
  color: var(--wp--preset--color--foreground-alt);
}

.wp-block-comment-date {
  margin-top: 0px;
}

.wp-block-comment-content {
  margin-top: 0px;
}

.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]):not([type=hidden]),
.wp-block-post-comments-form .comment-form textarea {
  border-radius: 8px;
  padding: calc(0.667em + 2px);
}

.wp-block-post-comments-form .logged-in-as,
.wp-block-post-comments-form .logged-in-as a,
.wp-block-post-comments-form .comment-notes,
.wp-block-post-comments-form .comment-form-comment label,
.wp-block-post-comments-form .comment-form-author label,
.wp-block-post-comments-form .comment-form-email label,
.wp-block-post-comments-form .comment-form-url label {
  color: var(--wp--preset--color--foreground-alt);
  font-size: var(--wp--preset--font-size--small);
}

.comment-form-url,
.comment-form-url label,
.comment-form-url input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

.wp-element-button, .wp-block-button__link {
  background-color: var(--wp--preset--color--background-alt);
  color: var(--wp--preset--color--foreground-alt);
  border-radius: 8px;
}

/**
 * Footer
 */

footer {
  margin-top: 0 !important;
}

/**
 * Custom styles for subscribe form patterns.
 */

.subscribe-form form {
  background-color: #fff;
  border-radius: 80px;
  display: flex;
  align-items: center;
  padding: 0.5rem 0 0.75rem;
}

.subscribe-form input {
  width: 100%;
  border: 0;
  background-color: #fff;
  margin-left: 1.5rem;
  vertical-align: middle;
  line-height: 1;
  padding: 0 8px 0 0;
  flex-basis: 100%;
  font-size: var(--wp--preset--font-size--large);
}

.subscribe-form input:focus {
  outline: 0;

}

.subscribe-form input[type="submit"] {
  color: #000;
  border-radius: 100px;
  flex-basis: 15%;
  padding: 0.25rem;
  margin-right: 0.25rem;
  transition: color 100ms cubic-bezier(0.7, 0, 0.3, 1);
}

.subscribe-form input[type="submit"]:hover {
  color: var(--wp--custom--color--accent);
}

/**
 * Utility styles.
 * A couple utilities that are used throughout patterns and parts
 * where core does not support these functionalities.
 */

.my-0 {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-0 .wp-block-post-template {
  margin-top: 0 !important;
}

.items-start {
  align-items: flex-start !important;
}

.relative {
  position: relative;
}

@media (min-width: 781px) {
  .hide-on-desktop {
    display: none !important;
  }
}

@media (max-width: 782px) {
  .hide-on-tablet {
    display: none !important;
  }
}

@media (max-width: 599px) {
  .hide-on-mobile {
    display: none !important;
  }
}