/*
 Theme Name:     Twenty Twenty-One Child
 Theme URI:      https://www.vbk-art.de/intransition/
 Description:    Twenty Twenty-One Child Theme for blog In Transition
 Author:         Korporal Webdesign
 Author URI:     http://www.korporalwebdesign.com
 Template:       twentytwentyone
 Version:        2.6
*/


.home header#masthead {
    display: none !important;
}
.site-header {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.custom-nav {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 90%;
}
@media screen and (min-width: 768px ) {
  .custom-nav {
    padding-top: 12px !important;
}
}
@media screen and (max-width: 767px ) {
  .custom-nav {
    margin-top: -12px !important;
    font-size: 80%;
}
}

#comments,
.comments-area,
.comments-title,
.comment-respond,
.entry-footer,
.nav-links {
    display: none !important;
}
.site-footer > .site-info {
    display: block !important;
    text-align: center !important;
}
p, ul {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

h2.entry-title.default-max-width, .entry-header, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
      width: 90%;
      max-width: 1000px;
    }
h2.entry-title.default-max-width {
    text-align: center;
}
.singular .entry-title {
    font-size: 48px !important;
    font-weight: bold;
    text-align: center;
}
@media screen and (max-width: 600px ) {
  .singular .entry-title {
    font-size: 36px !important;
}
}

/* ====== Responsive Images ====== */
.single-post .entry-content img {
  display: block;
  margin: 1em auto; /* center + vertical spacing */
  max-width: 100%;
  height: auto;
}

/* ====== Responsive Videos ====== */
.single-post .entry-content video {
  display: block;
  margin: 1em auto; /* center + spacing */
  max-width: 100%;
  height: auto;
}

/* ====== Classic Editor Galleries ====== */
.single-post .entry-content .gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em; /* horizontal space between images */
  row-gap: 1em; /* vertical space between rows */
}

.single-post .entry-content .gallery .gallery-item {
  flex: 1 1 300px; /* min width 300px, then flexible */
  max-width: 100%;
}

.single-post .entry-content .gallery img {
  width: 100%;
  height: auto;
  display: block;
}

/* ====== Center Captions ====== */
.single-post .entry-content .wp-caption,
.single-post .entry-content figure,
.single-post .entry-content .gallery-item {
  text-align: center;
}

.single-post .entry-content .wp-caption-text,
.single-post .entry-content figcaption {
  font-size: 0.9rem;
  color: #555; /* subtle gray */
  margin-top: 0.3em;
  line-height: 1.3;
}

/* Sticky post full-width */
.sticky-post {
  width: 100%;
  margin-bottom: 2rem;
}

/* Non-sticky posts: multi-column */
.home .posts-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
      max-width: 1200px;
    margin: 0 auto;
}

.home .homepage-excerpt {
  flex: 1 1 300px;
  max-width: 400px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}
.home .homepage-excerpt .entry-summary {
    text-align: left !important;
}

.homepage-excerpt img.attachment-medium.size-medium.wp-post-image {
    max-height: 360px !important;
    max-width: 360px !important;
    height: auto !important;
    width: auto !important;
}

@media screen and (min-width: 900px ) and (max-width: 1299px ) {
img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
    max-height: 100vh !important;
    width: auto !important;
    max-width: 95% !important;
    height: auto !important;
}
}

@media screen and (min-width: 1300px ) {
img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
    max-height: 100vh !important;
    width: auto !important;
    max-width: 1200px !important;
    height: auto !important;
}
}

.entry-content iframe {
  display: block;
  margin: 2rem auto;   /* centers and adds vertical space */
  max-width: 800px !important;    /* your preferred max width */
  width: 100%;         /* shrink on small screens */
  aspect-ratio: 16 / 9; /* keep correct ratio */
  height: auto;
}

.no-widgets .site-footer {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}