/*
Theme Name: Valenti Child
Theme URI: https://themeforest.net/item/valenti-wordpress-hd-review-magazine-news-theme/5888961
Description: Theme child of Valenti
Version: 1.0.3
Author: Codetipi
Template: valenti
Text Domain: codetipi
*/

/* MotorFiktion / Valenti */

/* Vorschau: kompaktere Bilder auf 14-Zoll-Laptops (typisch 1024–1439 CSS-Pixel). */
@media (min-width: 1024px) and (max-width: 1439px) {
  body.home .cb-grid-img,
  body.home .cb-featured-image,
  body.home .cb-slider img,
  body.single-post .cb-post-featured-image img,
  body.single-post .entry-content img,
  body.single-post .cb-entry-content img {
    max-width: 82% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.single-post .entry-content img,
  body.single-post .cb-entry-content img {
    display: block !important;
    float: none !important;
    clear: both !important;
    margin-inline: auto !important;
  }
  body.single-post .entry-content figure,
  body.single-post .cb-entry-content figure,
  body.single-post .wp-block-image {
    margin-inline: auto !important;
    text-align: center !important;
  }
  /* Valenti: breite Artikelmedien werden teils mit negativem Offset aus der Textspalte gezogen. */
  body.single-post .entry-content figure,
  body.single-post .cb-entry-content figure,
  body.single-post .wp-block-image,
  body.single-post .entry-content > p:has(> img),
  body.single-post .cb-entry-content > p:has(> img) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    float: none !important;
    width: min(82vw, 980px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    translate: -50% 0 !important;
  }
  body.single-post .entry-content figure img,
  body.single-post .cb-entry-content figure img,
  body.single-post .wp-block-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}


/* Lokal eingebundene Roboto-Schrift: ohne @font-face fällt der Browser
   trotz font-family: roboto auf eine Ersatzschrift zurück. */
@font-face {
  font-family: 'roboto';
  src: url('fonts/roboto-v30-latin-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'roboto';
  src: url('fonts/roboto-v30-latin-700.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}


/* Unsichtbare Hover-Brücke zwischen Navigationspunkt und Dropdown: verhindert das Zuklappen beim langsamen Überfahren. */
@media (hover: hover) and (min-width: 1024px) {
  #cb-nav-bar .main-menu > li.menu-item-has-children { position: relative; }
  #cb-nav-bar .main-menu > li.menu-item-has-children::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 24px;
    background: transparent;
    pointer-events: auto;
  }
}

/* Untermenüs im gleichen Schwarz wie die Hauptnavigation. */
#cb-nav-bar .main-menu > li > .menu,
#cb-nav-bar .main-menu > li > .menu .menu-wrap,
#cb-nav-bar .main-menu > li > .menu .sub-menu,
#cb-nav-bar .main-menu > li > .menu .sub-menu li,
#cb-nav-bar .main-menu > li > .menu .sub-menu a {
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
}
#cb-nav-bar .main-menu > li > .menu .sub-menu a { color: #fff !important; }
#cb-nav-bar .main-menu > li > .menu .sub-menu a:hover,
#cb-nav-bar .main-menu > li > .menu .sub-menu a:focus {
  color: var(--cb-primary-color, var(--primary-color, #169fe6)) !important;
}

/* Hauptmenü: keine farbigen Kästen bei Hover/aktiv.
   Stattdessen übernimmt nur die Schrift Valenti's gewählte Primär-/Akzentfarbe. */
#cb-nav-bar .menu-item > a,
#cb-nav-bar .menu-item > a:hover,
#cb-nav-bar .menu-item.current-menu-item > a,
#cb-nav-bar .menu-item.current-menu-parent > a,
#cb-nav-bar .menu-item.current-menu-ancestor > a,
#cb-nav-bar .current_page_item > a,
#cb-nav-bar .current_page_parent > a,
#cb-nav-bar .current_page_ancestor > a {
	background:transparent !important;
	background-color:transparent !important;
	background-image:none !important;
	box-shadow:none !important;
}

#cb-nav-bar .menu-item > a:hover,
#cb-nav-bar .menu-item > a:focus,
#cb-nav-bar .menu-item.current-menu-item > a,
#cb-nav-bar .menu-item.current-menu-parent > a,
#cb-nav-bar .menu-item.current-menu-ancestor > a,
#cb-nav-bar .current_page_item > a,
#cb-nav-bar .current_page_parent > a,
#cb-nav-bar .current_page_ancestor > a {
	color:var(--cb-primary-color, var(--primary-color, var(--tipi-primary-color, #169fe6))) !important;
}

/* Hauptnavigation komplett schwarz */
#cb-nav-bar,
#cb-nav-bar .cb-nav-bar-wrap,
#cb-main-menu,
.cb-nav-bar,
.cb-nav-bar-wrap {
	background:#000 !important;
	background-color:#000 !important;
	background-image:none !important;
}

/* Schwarz über die komplette Browserbreite, Inhalt bleibt ausgerichtet */
#cb-nav-bar {
	width:100vw !important;
	max-width:none !important;
	margin-left:calc(50% - 50vw) !important;
	margin-right:calc(50% - 50vw) !important;
	border:0 !important;
	box-shadow:none !important;
}
#cb-nav-bar::before,
#cb-nav-bar::after {
	background:#000 !important;
}

/* Einzelartikel: "Ähnliche Beiträge" auf dieselbe Breite wie das große Artikelbild.
   Exakter Valenti-Selektor aus dem gerenderten Artikel-HTML. */
body.single-post .related-posts-wrap {
	width:1200px !important;
	max-width:calc(100vw - 40px) !important;
	position:relative !important;
	left:50% !important;
	transform:translateX(-50%) !important;
	float:none !important;
	clear:both !important;
	box-sizing:border-box !important;
}

body.single-post .related-posts-wrap > .block-wrap,
body.single-post .related-posts-wrap .block-inner-style,
body.single-post .related-posts-wrap .block-inner-box,
body.single-post .related-posts-wrap .contents,
body.single-post .related-posts-wrap .block {
	width:100% !important;
	max-width:none !important;
	box-sizing:border-box !important;
}

body.single-post .related-posts-wrap > .block-wrap {
	padding-left:0 !important;
	padding-right:0 !important;
	margin-left:0 !important;
	margin-right:0 !important;
}

/* Einzelartikel: "Ähnliche Beiträge" auf die breite Medien-/Bildbreite ziehen.
   Der Fließtext darf schmaler bleiben. */
body.single-post .cb-related-posts,
body.single-post .cb-related,
body.single-post .cb-related-wrap,
body.single-post .cb-post-related,
body.single-post .cb-post-footer-block,
body.single-post [class*="related-post"],
body.single-post [class*="related_post"] {
	width:1200px !important;
	max-width:calc(100vw - 40px) !important;
	position:relative !important;
	left:50% !important;
	transform:translateX(-50%) !important;
	float:none !important;
	clear:both !important;
	box-sizing:border-box !important;
}

/* Einzelartikel: Bereich "Ähnliche Beiträge" unabhängig vom gewählten Valenti-Layout
   immer über die volle Artikel-/Contentbreite ziehen */
body.single-post .cb-related-posts,
body.single-post .cb-related,
body.single-post .cb-related-wrap,
body.single-post .cb-post-related,
body.single-post .cb-post-footer-block,
body.single-post [class*="related-post"],
body.single-post [class*="related_post"] {
	width:100% !important;
	max-width:none !important;
	float:none !important;
	clear:both !important;
	margin-left:0 !important;
	margin-right:0 !important;
	box-sizing:border-box !important;
}

/* Innere Raster dürfen ebenfalls die komplette verfügbare Breite verwenden */
body.single-post .cb-related-posts .cb-grid,
body.single-post .cb-related .cb-grid,
body.single-post .cb-related-wrap .cb-grid,
body.single-post [class*="related-post"] .cb-grid,
body.single-post [class*="related_post"] .cb-grid {
	width:100% !important;
	max-width:none !important;
}

/* Startseiten-Beitragsblöcke: Hintergrund weiß statt grau */
body.home .block-wrap,
body.home .block-inner-style,
body.home .block-inner-box,
body.home .contents,
body.page-id-66 .block-wrap,
body.page-id-66 .block-inner-style,
body.page-id-66 .block-inner-box,
body.page-id-66 .contents {
	background:#fff !important;
	background-color:#fff !important;
	background-image:none !important;
}

/* Startseiten-Aufmacher: volle Breite des Content-Bereichs und nur 10px Abstand zum Menü */
body.home #cb-section-a,
body.page-id-66 #cb-section-a {
	padding-top:10px !important;
	margin-top:0 !important;
}

body.home #block-wrap-12634,
body.page-id-66 #block-wrap-12634 {
	width:100% !important;
	max-width:none !important;
	margin-top:0 !important;
	margin-left:0 !important;
	margin-right:0 !important;
	padding-left:0 !important;
	padding-right:0 !important;
}

body.home #block-wrap-12634 .block-inner-style,
body.home #block-wrap-12634 .block-inner-box,
body.home #block-wrap-12634 .contents,
body.page-id-66 #block-wrap-12634 .block-inner-style,
body.page-id-66 #block-wrap-12634 .block-inner-box,
body.page-id-66 #block-wrap-12634 .contents {
	width:100% !important;
	max-width:none !important;
	margin-left:0 !important;
	margin-right:0 !important;
	padding-left:0 !important;
	padding-right:0 !important;
}

/* Startseiten-Aufmacher, Valenti Builder Block 12634 */
#block-wrap-12634 .slider-arrow {
	display:none !important;
	visibility:hidden !important;
	opacity:0 !important;
	pointer-events:none !important;
}

/* Der komplette sichtbare Aufmacher wird 16:9 */
#block-wrap-12634 .slider,
#block-wrap-12634 .preview-slider,
#block-wrap-12634 .cb-mask,
#block-wrap-12634 .mask,
#block-wrap-12634 .mask-img {
	aspect-ratio:16 / 9 !important;
	height:auto !important;
	min-height:0 !important;
	max-height:none !important;
}

#block-wrap-12634 .preview-slider {
	position:relative !important;
	overflow:hidden !important;
}

#block-wrap-12634 .cb-mask,
#block-wrap-12634 .mask,
#block-wrap-12634 .mask-img {
	display:block !important;
	width:100% !important;
	height:100% !important;
	overflow:hidden !important;
}

#block-wrap-12634 .mask-img img {
	display:block !important;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	max-height:none !important;
	object-fit:cover !important;
}

/* Overlay/Titel bleibt innerhalb des 16:9-Aufmachers */
#block-wrap-12634 .cb-meta {
	position:absolute !important;
	left:0;
	right:0;
	bottom:0;
	z-index:3;
}