/*
Theme Name: Blogmate
Author: Peregrine themes
Template: bloglo
Text Domain: blogmate
Description: BlogMate, a child theme of Bloglo, features a boxed width design with an animated background pattern. With a horizontal blog list style, it offers extensive customization options for colors and typography. Lightweight and moderate, BlogMate is a customizable News Magazine WordPress theme with one-click demo importer. Perfect for personal and multi-author bloggers, it's ideal for dynamic news, magazines, blogs, and creative sites. SEO friendly, WPML, Gutenberg, WooCommerce, and RTL ready, it's suitable for various content publishers and online magazines. Live preview : https://demo.peregrine-themes.com/bloglo/blogmate/
Author URI: https://peregrine-themes.com/
Theme URI: https://peregrine-themes.com/blogmate/
Version: 1.0.10
Requires at least: 5.4
Tested up to: 6.6
Requires PHP: 5.6
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, right-sidebar, left-sidebar, footer-widgets, blog, news, entertainment, custom-background, custom-menu, custom-logo, post-formats, sticky-post, editor-style, threaded-comments, translation-ready, custom-colors, featured-images, full-width-template, theme-options, flexible-header, wide-blocks
*/

@import url('https://fonts.googleapis.com/css?family=Oswald|Cabin|Dosis|Mukta+Mahee');

html body {
  background-color: #1b1b1b;
}

body p, ul li {color:#bbb !important}
body {color:#bbb !important}
.content-area a {color:#dcba00 !important}

.quicknavi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px; /* Erster Wert = Abstand nach unten beim Umbruch, zweiter Wert = Abstand zur Seite */
  background: #f4f4f4 !important; 
  padding: 8px 5px; 
  position: sticky; 
  top: 0;
  margin-top: 50px !important;}
.quicknavi a {
  color:#0066cc;
  font-weight:bold;
  text-decoration: none;
  min-width: 20px; /* Gibt den Buchstaben etwas mehr Klickfläche */
  display: inline-block;
}
.section {padding:20px;}
.section h2 {color:#fff !important;border-bottom:5px solid #c73a38; padding-bottom:5px;}   
.entry h3 {margin:10px 0 5px;}
.entry a {text-decoration:none; color:#e9beff !important;}

#bloglo-copyright {background-color: #000 !important;}

[data-theme="dark"] .websitebox p {
  color: #746262 !important;
}

.widget-title {color:#eee !important;}

.bloglo-blog-horizontal .bloglo-article.post.sticky {
  outline: none;
}

.bloglo-blog-horizontal .bloglo-article.post.sticky .entry-media {
  outline: 5px solid var(--bloglo-primary_15);
}

.widget.bloglo-entry .wp-block-image+p {
  margin-top: 0;
}

.widget.bloglo-entry .wp-block-image figure,
#page .widget.bloglo-entry .wp-block-image figure {
  margin: 0 1rem 0 0;
}

#page .widget.bloglo-entry .wp-block-social-links {
  margin-bottom: 0;
}

body.bloglo-menu-animation-squarebox:not(.bloglo-is-mobile) #bloglo-header-inner .bloglo-nav>ul>li>a {
  padding: 0.4rem 1.4rem 0.4rem;
}

body.bloglo-blog-horizontal .bloglo-article:not(.format-quote) .entry-meta {
  margin-top: 1.6rem;
}

body .navigation .nav-links .bloglo-animate-arrow,
body .navigation .nav-links .page-numbers,
body .page-links>span {
  background-color: transparent;
}
#bloglo-header-inner .bloglo-nav > ul > li > a {
	font-size: 11pt !important;
	font-family: 'Cabin', sans-serif;
  color: #fef2d8 !important;
  text-decoration: none;
  /* Dezenter, aber sichtbarer Grund-Schein */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  transition: text-shadow 0.2s ease;
}
.lexi span {
  color: #000 !important;
  font-weight: bold !important;
}
.bloglo-breadcrumbs {
  color: #fff;
}

.hamburger-box {
  color: #fff;
}

hr {
  text-align: center;
  display: block;
  line-height: 1px;
  height: 1px;
  margin: 2rem 0;
  background: #B3B04F;
}


h1,h2,h3,h4 {
font-family: 'Oswald', sans-serif;
color: #bea8ca !important;
text-align:center !important;
}

h1 {
  font-size: 20pt !important;
  color: #bea8ca !important;
}

h2 {
font-size: 19pt !important;
font-weight: normal !important;
color: #bea8ca !important;
}

h3 {
font-size: 18pt !important;
font-weight: normal !important;
color: #bea8ca !important;
}

.showcase h2 {text-align:left !important;}

#bloglo-header-inner {
  background-color: #666666 !important;
}
html:not([data-theme="dark"]) .bloglo-sidebar-style-3 #secondary .bloglo-widget {
  background: #f5e3ff !important;
  border: 0.1rem solid #000 !important;
}
.bloglo-sidebar-style-3 #secondary .bloglo-widget {
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
}
.showcase {
	padding:15px;
	background-color:#5a5959 ;
	margin-bottom: 20px;
	border-radius: 16px;
	border: 0.1rem solid #ffe7d2 !important;
}

.showcase h2 {
color: #fbf2ff !important;
}

.showcase a {
font-size: 16.5pt !important;
  color: #000 !important;
}
.showcase a:hover {
  color: #b48fff !important;
}
.showcase a::before {
  /*content: "♠️";*/
  content: "★ ";
  display: inline-block;
  font-size: 19pt;
  padding-right: 15px;
  text-decoration:none !important;
}
.showcase p {
	color:#fff !important;
}

        /* Grundstyling für den Main-Bereich */
        .main-menu-container {
            max-width: 874px;
            /*margin: 2rem auto;
            padding: 1rem;*/
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            box-sizing: border-box;
        }

        /* Die Word-Cloud Flexbox-Gruppe (Große Displays) */
        .word-cloud {
            display: flex;
            flex-wrap: wrap;
            /*justify-content: center;*/
            gap: 21px 28px; /* Abstand im Desktop-Modus */
            list-style: none !important;
            padding: 0;
            margin: 0;
        }

        /* Styling der einzelnen Menüpunkt-Blasen (Große Displays) */
        .word-cloud-item a {
            display: inline-block;
            background-color: #7100ab;
            color: #FFFFFF !important; /* Standard-Textfarbe: Weiß */
            text-decoration: none !important;
            padding: 15px 31px; /* Komfortabler Desktop-Innenabstand */
            border-radius: 60px;
            font-size: 1.6rem; /* Volle Zielgröße */
            font-weight: 600;
            box-shadow: 0 8px 14px rgba(0, 0, 0, 0.14);
            
            /* Sanfter Übergang für Hover-Animation und Farbewechsel */
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
            will-change: transform;
        }

        /* Dynamischer Hover- & Bewegungs-Effekt */
        .word-cloud-item a:hover {
            background-color: #111; /* Leicht helleres Rot für visuelles Feedback */
            color: #ffe7d2 !important; /* Textfarbe wechselt beim Hovern zu Cremegelb */
            
            /* Erzeugt eine leichte Drehung, Hebung und Vergrößerung */
            transform: translateY(-6px) scale(1.04) rotate(1deg); 
            box-shadow: 0 14px 25px rgba(119, 70, 144, 0.38);
        }

        /* Aktiver Klick-Zustand */
        .word-cloud-item a:active {
            transform: translateY(-1px) scale(1.01);
            box-shadow: 0 4px 8px rgba(127, 23, 52, 0.2);
        }
        /* RESPONSIVE ANPASSUNG: Mobilgeräte und kleine Tablets (< 768px) */
        @media (max-width: 768px) {
            .word-cloud {
                gap: 17px 22px; /* Abstände exakt um 20% verringert */
            }

            .word-cloud-item a {
                padding: 14px 28px; /* Innenabstand exakt um 20% reduziert */
                font-size: 1.28rem; /* Schriftgröße exakt um 20% reduziert (von 1.6rem auf 1.28rem) */
                border-radius: 50px; /* Angepasste Rundung für die neue Größe */
                box-shadow: 0 6px 11px rgba(0, 0, 0, 0.13);
            }

            /* Leicht abgeschwächter Hover-Effekt auf Mobilgeräten (verhindert "sticky hover" beim Tippen) */
            .word-cloud-item a:hover {
                transform: translateY(-5px) scale(1.03);
                box-shadow: 0 11px 20px rgba(127, 23, 52, 0.34);
            }
        }

h3 {
font-size: 19pt !important;
font-weight: normal !important;
}

h4 {
font-size: 19pt !important;
font-weight: normal !important;
}

.bloglo-btn.btn-small {
  font-size: 95% !important;
}

.entry-footer .bloglo-btn.btn-text-1 {
  letter-spacing: 0.02rem;
  padding: 0.8rem 2.4rem !important;
  color: #fff;
  background-color: var(--bloglo-primary) !important;
}

.entry-footer .bloglo-btn.btn-text-1>span::before {
  display: none;
}

.entry-footer .bloglo-btn.btn-text-1,
.wp-block-search .wp-block-search__button,
body .bloglo-btn:not(.btn-text-1) {
  line-height: 1.8;
  border-radius: 7px !important;
  transform: translate(0px, 0px) !important;
  box-shadow: 0 10px 18px 0 var(--bloglo-primary_27) !important;
  -webkit-transition: var(--bloglo-transition-primary);
  transition: var(--bloglo-transition-primary);
}

.entry-footer .bloglo-btn.btn-text-1:active,
.wp-block-search .wp-block-search__button:active,
body .bloglo-btn:not(.btn-text-1):active,
.entry-footer .bloglo-btn.btn-text-1:hover,
.wp-block-search .wp-block-search__button:hover,
body .bloglo-btn:not(.btn-text-1):hover {
  color: #fff;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 18px 0 var(--bloglo-primary_09) !important;
}

body .navigation .nav-links .page-numbers:not(.prev, .next).current,
body .navigation .nav-links .page-numbers:hover button,
body.using-keyboard .navigation .nav-links .page-numbers:focus button,
body .navigation .nav-links .page-numbers:not(.prev, .next):hover,
body.using-keyboard .navigation .nav-links .page-numbers:not(.prev, .next):focus,
body .page-links a:hover span,
body.using-keyboard .page-links a:focus span,
body.bloglo-menu-animation-squarebox:not(.bloglo-is-mobile) #bloglo-header-inner .bloglo-nav>ul>li.current-menu-item>a,
body.bloglo-menu-animation-squarebox:not(.bloglo-is-mobile) #bloglo-header-inner .bloglo-nav>ul>li.current_page_item>a,
body.bloglo-menu-animation-squarebox:not(.bloglo-is-mobile) #bloglo-header-inner .bloglo-nav>ul>li>a:hover,
body.bloglo-menu-animation-squarebox:not(.bloglo-is-mobile).using-keyboard #bloglo-header-inner .bloglo-nav>ul>li>a:focus {
  color: #fff !important;
  box-shadow: 0 10px 18px 0 var(--bloglo-primary_27);
}

.entry-footer .bloglo-btn.btn-text-1:active,
.wp-block-search .wp-block-search__button:active,
body .bloglo-btn:not(.btn-text-1):active {
  transform: translateY(0px) !important;
}

/* Post content bg color */
.ticker-slider-items,
.pyml-slider-items,
.author .author-box,
.bloglo-sidebar-style-3 #secondary .bloglo-widget,
.bloglo-sidebar-style-3 .elementor-widget-sidebar .bloglo-widget {
  border-radius: 1.5rem !important;
  box-shadow: none !important;
  border: 0.1rem solid rgba(190, 190, 190, 0.2);
}

html:not([data-theme=dark]) .ticker-slider-items,
html:not([data-theme=dark]) .pyml-slider-items,
html:not([data-theme=dark]) .author .author-box,
html:not([data-theme=dark]) .bloglo-sidebar-style-3 #secondary .bloglo-widget,
html:not([data-theme=dark]) .bloglo-sidebar-style-3 .elementor-widget-sidebar .bloglo-widget {
  background: #fff9f3;
  border: 0.1rem solid #ffe7d2 !important;
}

.ticker-slider-items .ticker-title {
  border-radius: 0.8rem;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.ticker-slider-controls .ticker-slider-pause {
  border-radius: 0.8rem;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.bloglo-sidebar-style-3.is-section-heading-init-s2 #secondary .bloglo-widget {
  position: relative;
  margin-bottom: 4.5rem;
}

.is-section-heading-init-s2 #pyml .pyml-slider-items .widget-title,
.bloglo-sidebar-style-3.is-section-heading-init-s2 #secondary .bloglo-widget .widget-title,
.bloglo-sidebar-style-3.is-section-heading-init-s2 #secondary .bloglo-widget .wp-block-search .wp-block-search__label,
.bloglo-sidebar-style-3.is-section-heading-init-s2 #secondary .bloglo-widget .wp-block-heading {
  position: absolute;
  left: 2.5rem;
  top: -1.8rem;
  z-index: 2;
}

.is-section-heading-init-s2 #featured_links .widget-title,
.is-section-heading-init-s2 #pyml .pyml-slider-items .widget-title,
.is-footer-heading-init-s2 #bloglo-footer .wp-block-heading,
.is-footer-heading-init-s2 #bloglo-footer .widget-title,
.is-section-heading-init-s2:not(.bloglo-sidebar-style-1) #secondary .bloglo-widget .widget-title,
.is-section-heading-init-s2:not(.bloglo-sidebar-style-1) #secondary .bloglo-widget .wp-block-search .wp-block-search__label,
.is-section-heading-init-s2:not(.bloglo-sidebar-style-1) #secondary .bloglo-widget .wp-block-heading {
  letter-spacing: 0.25px;
  width: auto;
  line-height: 1.2;
  display: inline-block;
  padding: 8px 25px 7px;
  background-color: #fff;
  border-radius: 10rem;
  margin-bottom: 0;
  border: 1px solid rgba(39, 39, 39, 0.75);
}

html[data-theme="dark"] .is-section-heading-init-s2 #featured_links .widget-title,
html[data-theme="dark"] .is-footer-heading-init-s2 #bloglo-footer .wp-block-heading,
html[data-theme="dark"] .is-footer-heading-init-s2 #bloglo-footer .widget-title,
html[data-theme="dark"] .is-section-heading-init-s2 #pyml .pyml-slider-items .widget-title,
html[data-theme="dark"] .is-section-heading-init-s2:not(.bloglo-sidebar-style-1) #secondary .bloglo-widget .widget-title,
html[data-theme="dark"] .is-section-heading-init-s2:not(.bloglo-sidebar-style-1) #secondary .bloglo-widget .wp-block-search .wp-block-search__label,
html[data-theme="dark"] .is-section-heading-init-s2:not(.bloglo-sidebar-style-1) #secondary .bloglo-widget .wp-block-heading {
  background-color: rgba(0, 0, 0, 0.75);
  border: 0.1rem solid rgba(190, 190, 190, 0.3);
}

.is-section-heading-init-s2:not(.bloglo-sidebar-style-1) #secondary .bloglo-widget .wp-block-search .wp-block-search__inside-wrapper {
  padding-top: 2.2rem;
}

.is-section-heading-init-s2 #pyml .pyml-slider-items {
  position: relative;
}

.is-section-heading-init-s2 #pyml .pyml-slider-items .widget-title+.bloglo-flex-row.gy-4 {
  margin-top: 0;
}

/* Custom CSS */

.bloglo-blog-horizontal .bloglo-flex-row.g-4 {
  --bloglo-gutter-y: 4.8rem;
  --bloglo-gutter-x: 4.8rem;
}

.bloglo-blog-horizontal .bloglo-article:not(.format-quote) .bloglo-blog-entry-wrapper.bloglo-thumb-left .entry-media {
  border-radius: 0.8rem;
}

body .pyml-slide-item .pyml-slider-backgrounds .pyml-slide-bg,
body .wp-block-latest-posts__featured-image {
  border: 0.1rem solid rgba(39, 39, 39, 0.75);
  border-radius: 0.8rem;
  box-shadow: 2px 2px 3px 0px rgba(93, 112, 234, 0.1);
}

.pyml-slider-items {
  padding: 2.2rem;
}

.bloglo-waves-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: -1;
}

.bloglo-waves-wrapper .circle,
.bloglo-waves-wrapper .triangle,
.bloglo-waves-wrapper .square {
  position: absolute;
  bottom: -100px;
  width: 40px;
  height: 40px;
  background: var(--bloglo-primary_15);
  border-radius: 5px;
  opacity: 0.1;
  animation: rise 10s infinite ease-in;
}

.bloglo-waves-wrapper .square:nth-child(1) {
  width: 40px;
  height: 40px;
  left: 10%;
  animation-duration: 8s;
}

.bloglo-waves-wrapper .square:nth-child(2) {
  width: 20px;
  height: 20px;
  left: 20%;
  animation-duration: 5s;
  animation-delay: 1s;
}

.bloglo-waves-wrapper .square:nth-child(3) {
  width: 50px;
  height: 50px;
  left: 35%;
  animation-duration: 7s;
  animation-delay: 2s;
}

.bloglo-waves-wrapper .square:nth-child(4) {
  width: 80px;
  height: 80px;
  left: 50%;
  animation-duration: 11s;
  animation-delay: 0s;
}

.bloglo-waves-wrapper .square:nth-child(5) {
  width: 35px;
  height: 35px;
  left: 55%;
  animation-duration: 6s;
  animation-delay: 1s;
}

.bloglo-waves-wrapper .square:nth-child(6) {
  width: 45px;
  height: 45px;
  left: 65%;
  animation-duration: 8s;
  animation-delay: 3s;
}

.bloglo-waves-wrapper .square:nth-child(7) {
  width: 90px;
  height: 90px;
  left: 70%;
  animation-duration: 12s;
  animation-delay: 2s;
}

.bloglo-waves-wrapper .square:nth-child(8) {
  width: 25px;
  height: 25px;
  left: 80%;
  animation-duration: 6s;
  animation-delay: 2s;
}

.bloglo-waves-wrapper .square:nth-child(9) {
  width: 15px;
  height: 15px;
  left: 70%;
  animation-duration: 5s;
  animation-delay: 1s;
}

.bloglo-waves-wrapper .square:nth-child(10) {
  width: 90px;
  height: 90px;
  left: 25%;
  animation-duration: 10s;
  animation-delay: 4s;
}

.bloglo-waves-wrapper .triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.bloglo-waves-wrapper .triangle:nth-child(1) {
  width: 20px;
  height: 22px;
  left: 50%;
  animation-delay: 0s;
}

.bloglo-waves-wrapper .triangle:nth-child(2) {
  width: 30px;
  height: 28px;
  left: 25%;
  animation-delay: 12s;
}

.bloglo-waves-wrapper .triangle:nth-child(3) {
  width: 30px;
  height: 28px;
  left: 80%;
  animation-delay: 4s;
}

.bloglo-waves-wrapper .triangle:nth-child(4) {
  width: 40px;
  height: 38px;
  left: 30%;
  animation-delay: 18s;
}

.bloglo-waves-wrapper .triangle:nth-child(5) {
  width: 50px;
  height: 40px;
  left: 70%;
  animation-delay: 1s;
}

.bloglo-waves-wrapper .circle {
  border-radius: 100%;
}

.bloglo-waves-wrapper .circle:nth-child(1) {
  width: 22px;
  height: 20px;
  left: 10%;
  animation-delay: 0s;
}

.bloglo-waves-wrapper .circle:nth-child(2) {
  width: 84px;
  height: 80px;
  left: 45%;
  animation-delay: 12s;
}

.bloglo-waves-wrapper .circle:nth-child(3) {
  width: 53px;
  height: 50px;
  left: 90%;
  animation-delay: 4s;
}

.bloglo-waves-wrapper .circle:nth-child(4) {
  width: 53px;
  height: 50px;
  left: 60%;
  animation-delay: 18s;
}

.bloglo-waves-wrapper .circle:nth-child(5) {
  width: 43px;
  height: 40px;
  left: 90%;
  animation-delay: 1s;
}


@keyframes rise {
  0% {
      bottom: -100px;
      transform: translateX(0) rotate(0deg);
  }

  50% {
      transform: translate(100px) rotate(180deg);
  }

  100% {
      bottom: 1080px;
      transform: translateX(-200px) rotate(360deg);
  }
}

/* Dynamic CSS */
[data-theme=dark] .bloglo-breadcrumbs {
  background-color: transparent;
  border-color: rgba(190, 190, 190, 0.3);
}

html[data-theme="dark"] .bloglo-sidebar-style-3 #secondary .bloglo-widget {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Block CSS */

.content-area .wp-block-site-title a:not(:hover, :focus) {
  color: inherit;
}

.content-area .wp-block-site-title a:not(.bloglo-btn):not(.wp-block-button__link):hover,
.content-area .wp-block-site-title a:not(.bloglo-btn):not(.wp-block-button__link):focus {
  color: var(--bloglo-primary);
}

.single .entry-content .wp-block-avatar img {
  margin: 0;
}

.wp-block-navigation .wp-block-page-list {
  margin: 0;
}

.content-area .bloglo-entry .wp-block-navigation:where(:not([class*=has-text-decoration])) a,
.wp-block-navigation:where(:not([class*=has-text-decoration])) a {
  text-decoration: none;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  list-style: none;
  margin: 0;
}

.wp-block-navigation .wp-block-page-list > .wp-block-navigation-item:not(:first-child) {
  margin-left: 1rem;
}

.wp-block-file {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.wp-block-file a:not(.wp-block-file__button) {
  font-weight: 700;
}

#page #main .wp-block-cover .wp-block-cover-text a,
#page #main :where(.wp-block-cover-image:not(.has-text-color)),
#page #main :where(.wp-block-cover:not(.has-text-color)) {
  color: #fff;
}

.post-category a:hover,
.post-category a:focus {
  text-decoration: underline;
}

.wp-block-categories-dropdown.wp-block-categories {
  margin-top: 16px;
}
@media screen and (max-width: 1024px) {
  #bloglo-header-inner .site-navigation > ul a > span {
    color: #000;
  }
    #bloglo-header-inner .site-navigation > ul a > span {
    background-color: #ccc;
  }
   #bloglo-header-inner .site-navigation > ul a > span {
    padding: 0px 20px !important;
    width: 100%;
    display: block;
  }
    #bloglo-header-inner .site-navigation > ul {
    overflow-y: auto;
    max-height: 86vh !important;
	line-height: 12px;
    display: block;
  }
}