/*
Theme Name: Graceful Bold Blog
Theme URI: https://optimathemes.com/graceful-bold-blog-theme/
Author: Aslam
Author URI: http://optimathemes.com/
Description: Graceful Bold is a free multi-purpose WordPress blog theme. Its perfect for any kind of blog or website like lifestyle, fashion, travel, tech, health, fitness, beauty, food, news, magazine, blogging, personal, professional, etc. Its fully Responsive and Retina Display ready, clean, modern and minimal design. Graceful is WooCommerce compatible, supports RTL(Right To Left) and is optimized for SEO.
Template: graceful
Version: 1.0.1
Requires at least: 5.3
Tested up to: 6.6
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: graceful-bold-blog
Tags: blog, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, footer-widgets, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, e-commerce
*/


/*
Customization of this theme starts here
*/

/* style.css */


/*--------------------------------------------------------------
Header Sections
--------------------------------------------------------------*/

.post-header {
    margin-top: 20px;
}

.post-categories {
    background: #000000 !important;
    border: 0;
    padding: 0 10px !important;
}

.post-categories a {
    color: #ffffff !important;
}

aside .graceful-widget h2 {
    background: #000;
    color: #ffffff !important;
}

.blog .post-title {
    font-size: 28px;
    line-height: 38px;
}

.blog article .post-meta {
    margin-bottom: 10px;
}

.blog .post-page-content {
    padding-top: 10px;
}

#main-navigation i {
    color: #ffffff;
}

aside .graceful-widget h2, 
.graceful-widget .widget-title {
    border-bottom: 1px solid #000000;
    font-weight: 600;
    padding: 9px 5px 7px;
}

aside .graceful-widget h2::after, 
.graceful-widget .widget-title::after {
    border-top: 8px solid #000000;
}

.post-categories {
    background: #f3f3f3;
    border: 1px solid #c3c4c7;
    display: inline-block;
    margin-bottom: 10px;
    padding: 0 12px;
}

.post-title {
    word-wrap: break-word;
}

.graceful-slider-info {
    padding: 20px;
}

.graceful-slider-title {
    font-size: 32px;
    word-wrap: break-word;
}

@media screen and (max-width: 480px) {
    .graceful-slider-title {
        width: 300px;
    }
}

.site-images {
    min-height: 0;
}


.single .post-date {
    color: #111111 !important;
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
}

.single .post-title-author { 
    color: #111111 !important;
    display: inline-block;
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: normal;
}

.blog article .post-date {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
}

.blog article .post-header .post-meta a {
    font-family: 'Mulish', sans-serif;  
    font-size: 13px; 
}

.content-column > li {
    margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
    .main-navigation-search {
        right: 20px;
    }
}

@media screen and (max-width: 480px) {
    .content-column > li {
        width: 100%;
    }
}

/* Top Navigation
   ========================================================================== */

#top-navigation {
  text-align: center;
  box-shadow: 0px 1px 5px rgba(0,0,0, 0.1);
  border-bottom: 1px solid #999999;
  background: #ffffff;
}

#top-navigation {
    border-bottom: 1px solid #d9d1c0;
}

#top-menu {
  display: inline-block;
}

#top-menu a:focus {
  outline: 3px dotted #000000 !important;
}

#top-menu li {
  position: relative;
}

#top-menu li.menu-item-has-children>a:after {
    font-family: FontAwesome;
    content: "\f107";
    margin-left: 6px;
    font-size: 12px;
}

#top-menu ul li.menu-item-has-children>a:after {
    font-family: FontAwesome;
    content: "\f105";
    font-size: 14px;
    float: right;
}

#top-menu > li {
  display: inline-block;
  list-style: none;
}

#top-menu li a {
  display: block;
  position: relative;
  padding: 0 5px;
  margin-left: 5px;
}

#top-menu li a {
  color: #000000;
}

#top-menu ul li a {
  color: #000000;
}

#top-menu li a:first-child {
  margin-left: 0;
}

#top-menu > li > a {
  display: block;
  text-decoration: none;
}

#top-menu > li:first-child > a {
  padding-left: 0px;
}

#top-menu > li:last-child > a {
  padding-right: 0px;
}

#top-menu ul ul {
  top: -1px;
  left: 100%;
}

#top-menu .menu-item:hover > ul, #top-menu .menu-item:focus-within > ul {
  left: 0;
  opacity: 1;
}

#top-menu .menu-item:hover ul ul, #top-menu .menu-item:focus-within ul ul{
  left: 100%;
}

#top-menu .sub-menu {
  position: absolute;
  left: -999em;
  z-index: 1101;
  width: 170px;
  text-align: left;
  border: 1px solid #e4e4e4;
  border-width: 1px;
  opacity: 0;
}

#top-menu .sub-menu a {
  border-bottom-style: solid;
  border-bottom-width: 1px; 
}

#top-menu .sub-menu > li:last-of-type > a {
  border: none;
}

#top-menu .sub-menu li:first-child > .sub-menu {
  margin-top: -1px;
}

#top-menu .sub-menu > li > a {
  display: block;
  width: 100%;
  padding: 8px 15px;
  margin: 0;
}

#top-menu li a {
  font-size: 11px;
  line-height: 40px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
}
#top-menu .sub-menu > li > a {
  font-size: 11px;
  line-height: 24px;
  letter-spacing: 0.5px;
}

#top-menu li a {
  font-size: 11px;
  line-height: 40px;
  letter-spacing: 1px;
  font-weight: 600;
}
#top-menu .sub-menu > li > a {
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 0.5px;
}

#top-menu li a,
#main-menu li a {
  text-transform: uppercase;
}

#top-navigation > div {
  padding-left: 30px;
  padding-right: 30px;
}

#main-navigation {
    background: #000000;
}

#main-navigation #searchform #s {
    border: 1px solid #bdb29b;
}

#main-navigation a:hover, #main-navigation i:hover {
    color: #dddddd;
}

#site-menu > li > a:hover{
    color: #dddddd;
}

#site-menu > li > a {
    color: #ffffff;
}

.main-content {
    margin-top: 40px;
}

.widget_categories > ul > li {
    border-bottom: 1px solid #000000;
}

aside .wp-block-latest-posts.wp-block-latest-posts__list li {
    border-bottom: 1px solid #000000;
}

.wp-block-search__label {
    display: none;
}

/* Media Query Min 768px
   ========================================================================== */
@media screen and (min-width: 768px) {
    .blog .post-page-content p {
        padding: 0 24px;
    }
    #main-navigation .wrapped-content {
        padding-left: 0;
    }
    .main-navigation-search {
        right: 0;
    }
    #main-navigation .navigation-socials {
        right: 35px;
    }
}


#graceful-post-slider {
    padding-left: 40px;
    padding-right: 40px;
}

#graceful-post-slider.wrapped-content {
    padding-left: 0;
    padding-right: 0;
}


#site-footer {
    border-top: 1px solid #999999;
}

@media screen and (min-width: 768px) {
    
    .wrapped-content .main-navigation-search {
        right: 0;
    }
    #main-navigation .wrapped-content .navigation-socials {
        right: 35px;
    }

    .main-navigation-search {
        right: 35px;
    }
    #main-navigation .navigation-socials {
        right: 75px;
    }
}

.graceful-widget .graceful-recent-image-box a {
    font-size: 14px;
}


#graceful-post-slider .slide-item {
    background-size: cover;
    height: 420px;
}

.left-menu-icon span {
    background-color: #ffffff;
}

.single .post-page-content {
    padding: 0px 0px 10px;
}

#responsive-menu li a {
    color: #ffffff;
}

#responsive-menu .sub-menu > li {
    background: #333333;
}

#responsive-menu .sub-menu > li li {
    background: #555555;
}

@media screen and (max-width: 480px) {
    .main-navigation-search {
        right: 20px;
    }
}

.close-graceful-search {
    background: #000000;
}

#site-menu li a {
    font-family: 'Open Sans', sans-serif;
}

aside .graceful-widget h2 {
    font-family: Open Sans, sans-serif;
}


/* Скрытие автора и даты постов для babyjo.ru */
.post-title-author { display: none !important; }
.post-date { display: none !important; }

/* Красивая кнопка "ПРОДОЛЖИТЬ ЧТЕНИЕ..." */
.continue-read a {
    background: linear-gradient(135deg, #ff69b4, #ff1493) !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.continue-read a:hover {
    background: linear-gradient(135deg, #ff1493, #dc143c) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* Baby Animation CSS - Анимированные детские предметы для фона */
/* Создано для сайта babyjo.ru */

/* Контейнер для анимированных элементов */
.baby-floating-items {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Базовые стили для летающих предметов */
.baby-item {
    position: absolute;
    font-size: 24px;
    color: rgba(255, 192, 203, 0.3); /* Розовый полупрозрачный */
    pointer-events: none;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Разные цвета для предметов */
.baby-item.blue {
    color: rgba(135, 206, 235, 0.3); /* Голубой полупрозрачный */
}

.baby-item.yellow {
    color: rgba(255, 255, 0, 0.3); /* Желтый полупрозрачный */
}

.baby-item.green {
    color: rgba(144, 238, 144, 0.3); /* Светло-зеленый полупрозрачный */
}

.baby-item.purple {
    color: rgba(221, 160, 221, 0.3); /* Сиреневый полупрозрачный */
}

/* Анимации движения */
@keyframes float-right {
    0% {
        transform: translateX(-100px) translateY(0px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 100px)) translateY(-50px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes float-left {
    0% {
        transform: translateX(calc(100vw + 100px)) translateY(0px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(-100px) translateY(-50px) rotate(-360deg);
        opacity: 0;
    }
}

@keyframes float-up {
    0% {
        transform: translateY(calc(100vh + 100px)) translateX(0px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(50px) rotate(180deg);
        opacity: 0;
    }
}

@keyframes float-diagonal {
    0% {
        transform: translateX(-100px) translateY(calc(100vh + 100px)) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 100px)) translateY(-100px) rotate(270deg);
        opacity: 0;
    }
}

@keyframes gentle-bounce {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(90deg);
    }
    50% {
        transform: translateY(-5px) rotate(180deg);
    }
    75% {
        transform: translateY(-15px) rotate(270deg);
    }
}

/* Конкретные элементы с разными анимациями */

/* Бутылочки 🍼 */
.baby-item.bottle-1 {
    top: 10%;
    left: -100px;
    animation: float-right 25s linear infinite;
    animation-delay: 0s;
}

.baby-item.bottle-2 {
    top: 60%;
    right: -100px;
    animation: float-left 30s linear infinite;
    animation-delay: 8s;
}

.baby-item.bottle-3 {
    bottom: -100px;
    left: 20%;
    animation: float-up 22s linear infinite;
    animation-delay: 15s;
}

/* Мишки 🧸 */
.baby-item.bear-1 {
    top: 30%;
    left: -100px;
    animation: float-right 28s linear infinite;
    animation-delay: 5s;
    font-size: 28px;
}

.baby-item.bear-2 {
    bottom: 20%;
    right: -100px;
    animation: float-left 26s linear infinite;
    animation-delay: 12s;
    font-size: 32px;
}

.baby-item.bear-3 {
    bottom: -100px;
    right: 30%;
    animation: float-up 24s linear infinite;
    animation-delay: 20s;
    font-size: 26px;
}

/* Пустышки 🍼 (используем как соску) */
.baby-item.pacifier-1 {
    top: 50%;
    left: -100px;
    animation: float-right 20s linear infinite;
    animation-delay: 3s;
    font-size: 20px;
}

.baby-item.pacifier-2 {
    top: 80%;
    right: -100px;
    animation: float-left 25s linear infinite;
    animation-delay: 10s;
    font-size: 22px;
}

/* Коляски 🛒 (используем как детская коляска) */
.baby-item.stroller-1 {
    bottom: -100px;
    left: 10%;
    animation: float-diagonal 35s linear infinite;
    animation-delay: 7s;
    font-size: 30px;
}

.baby-item.stroller-2 {
    top: 20%;
    right: -100px;
    animation: float-left 32s linear infinite;
    animation-delay: 18s;
    font-size: 28px;
}

/* Погремушки (используем звездочки) ⭐ */
.baby-item.rattle-1 {
    top: 70%;
    left: -100px;
    animation: float-right 18s linear infinite;
    animation-delay: 6s;
    font-size: 24px;
}

.baby-item.rattle-2 {
    bottom: -100px;
    right: 15%;
    animation: float-up 27s linear infinite;
    animation-delay: 13s;
    font-size: 26px;
}

.baby-item.rattle-3 {
    top: 40%;
    right: -100px;
    animation: float-left 23s linear infinite;
    animation-delay: 21s;
    font-size: 22px;
}

/* Сердечки 💖 */
.baby-item.heart-1 {
    bottom: -100px;
    left: 50%;
    animation: float-up 29s linear infinite;
    animation-delay: 4s;
    font-size: 20px;
}

.baby-item.heart-2 {
    top: 25%;
    left: -100px;
    animation: float-right 31s linear infinite;
    animation-delay: 16s;
    font-size: 24px;
}

.baby-item.heart-3 {
    top: 85%;
    right: -100px;
    animation: float-left 21s linear infinite;
    animation-delay: 9s;
    font-size: 18px;
}

/* Облачка ☁️ */
.baby-item.cloud-1 {
    top: 15%;
    right: -100px;
    animation: float-left 40s linear infinite;
    animation-delay: 2s;
    font-size: 32px;
}

.baby-item.cloud-2 {
    bottom: -100px;
    right: 25%;
    animation: float-up 35s linear infinite;
    animation-delay: 14s;
    font-size: 28px;
}

/* Луна и звезды 🌙 */
.baby-item.moon-1 {
    top: 5%;
    left: -100px;
    animation: float-right 45s linear infinite;
    animation-delay: 11s;
    font-size: 30px;
}

.baby-item.star-1 {
    bottom: -100px;
    left: 70%;
    animation: float-diagonal 33s linear infinite;
    animation-delay: 17s;
    font-size: 16px;
}

.baby-item.star-2 {
    top: 65%;
    right: -100px;
    animation: float-left 19s linear infinite;
    animation-delay: 22s;
    font-size: 18px;
}

/* Адаптивные стили для мобильных устройств */
@media screen and (max-width: 768px) {
    .baby-item {
        font-size: 18px;
    }

    .baby-item.bear-1,
    .baby-item.bear-2,
    .baby-item.bear-3 {
        font-size: 22px;
    }

    .baby-item.stroller-1,
    .baby-item.stroller-2 {
        font-size: 24px;
    }

    .baby-item.cloud-1,
    .baby-item.cloud-2 {
        font-size: 26px;
    }
}

@media screen and (max-width: 480px) {
    .baby-item {
        font-size: 16px;
    }

    /* Уменьшаем количество элементов на очень маленьких экранах */
    .baby-item.bottle-3,
    .baby-item.bear-3,
    .baby-item.rattle-3,
    .baby-item.heart-3,
    .baby-item.star-2 {
        display: none;
    }
}

/* Эффект при наведении на страницу - элементы слегка замедляются */
body:hover .baby-item {
    animation-duration: calc(var(--duration, 25s) * 1.2);
}

/* Дополнительные эффекты свечения для некоторых элементов */
.baby-item.heart-1,
.baby-item.heart-2,
.baby-item.heart-3 {
    text-shadow: 0 0 10px rgba(255, 192, 203, 0.5);
}

.baby-item.star-1,
.baby-item.star-2 {
    text-shadow: 0 0 8px rgba(255, 255, 0, 0.4);
}

.baby-item.moon-1 {
    text-shadow: 0 0 15px rgba(135, 206, 235, 0.4);
}

/* Пульсирующий эффект для некоторых элементов */
@keyframes gentle-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}

.baby-item.heart-1,
.baby-item.star-1 {
    animation: float-up 29s linear infinite, gentle-pulse 3s ease-in-out infinite;
}

.baby-item.moon-1 {
    animation: float-right 45s linear infinite, gentle-pulse 4s ease-in-out infinite;
}