/*
 Theme Name:   Gridbook Blog
 Theme URI:    
 Description:  Gridbook Blog is child theme of logbook wp blog theme. Gridbook Blog is free, personal, elegent WordPress blog theme. Gridbook Blog theme having setting in customizer and can check live change of settings. Grid having topbar header, social icons, sidebar features and many more features. Gridbook Blog is a perfect responsive magazine style WordPress theme. This theme is suitable for news, newspaper, magazine, publishing, business and any kind of sites. Grid is a 100% GPL and minimal WordPress blog theme. Also theme is Gutenberg ready. So it will work fie with the latest version of WordPress. Theme is compatible with all blocks and patterns of WordPress. This theme is developed based on customizer settings. You can see the live changes that you have made in customizer. Grid also comes with added custom widgets for author, featured posts and social icons. It has top level menu, social icons, slider, promotional banner, sidebar option & many more other features. In addition, it has copyright text, go to the top, footer widgets, blog page options, related posts, sidebar, etc. This theme is lightweight and easy to use theme for travel blog, food blog, technology blog and fashion blog or any type of news website. You can also use this theme for personal blog and magazine sites too. Furthermore, it comes with demo data to make the site like the demo, detailed documentation including video and text, free support via chat and forum. It is developed by the experts WordPress developers so that you will never look for alternatives after using this theme. Try this awesome and carefully crafted theme today.
 Author:       blogwp
 Author URI:   
 Template:     logbook-wp
 Version:      1.0.4
 Requires at least: 5.5
 Tested up to: 6.2
 Requires PHP: 5.6
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         left-sidebar, right-sidebar, custom-logo, custom-menu, featured-images, footer-widgets, custom-colors, custom-header, theme-options, threaded-comments, blog
 Text Domain:  gridbook-blog
*/

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* Base styles */
body {
    font-family: 'Noto Serif', serif;
    background-color: #fff;
    color: #000;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.wp-main-header .logo-area a,
.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li > a,
.widget-title {
    font-family: 'Inter', sans-serif;
}

.wp-main-header .logo-area a {
    font-size: 5rem;
    letter-spacing: -.02em;
    font-weight: 400;
    margin: 0;
    line-height: 1.1;
    color: #2CCC70; /* Updated brand color */
}

.sticky-nav.gridbook-blog-sticky{
    margin-top: 32px !important;
}
.sticky-nav.gridbook-customize-preview{
    margin-top: 0px !important;
}

.wp-main-header .logo-area p {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .12em;
    color: #181818;
}

.site-title {
    position: relative;
    padding: 1.3rem 0 1.2rem;
}

.site-title:after {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 100;
    content: "";
    height: 1px;
    margin-top: 0.1rem;
    background-color: #d3d3d3;
}

.site-title a {
    display: inline-block;
    position: relative;
    line-height: 1.1;
    z-index: 101;
    background-color: #fff; /* Updated to white */
    padding: 0 2.5rem;
}

.wp-main-header .logo-area .site-description {
    margin-top: 10px;
    margin-bottom: 10px;
}

.nav-brand {
    background: #fff; /* Updated to white */
}

.bg-color {
    background: #fff; /* Updated to white */
}

.logbook-wp-wp-blog-section {
    background: #fff; /* Updated to white */
}

.logbook-wp-main-navigation .wrapper {
    background: #fff; /* Updated to white */
    padding: 10px 0;
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li > a {
    color: #000000;
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li:hover > a, .logbook-wp-main-navigation ul.logbook-wp-nav-menu > li.focus > a {
    color: #2CCC70; /* Updated brand color */
}

.logbook-wp-main-navigation ul ul li:hover > a, .logbook-wp-main-navigation ul ul li.focus > a {
    background-color: #2CCC70; /* Updated brand color */
    color: #fff;
}

/* Posts with rounded corners */
.post {
    position: relative;
    background: #fff;
    overflow: hidden;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin: 0 24px 24px 0;
    display: inline-block;
    border-radius: 16px; /* Apple-like rounded corners */
    transition: all 0.25s ease-in-out;
}

.post-sub-link ul:not(.author-category-meta):not(.post-categories) li:not(.entry-author-avatar):not(.entry-read-time):not(:last-child):after {
    display: inline-block;
    content: "";
    width: 1px;
    background-color: #d3d3d3;
    height: 1.1rem;
    margin: 0 0.5rem 0 0.6rem;
    position: relative;
    bottom: -0.3rem;
}

.read-more:before{
 display: none;
}

.read-more:after {
    content: '\f101';
    font-family: fontAwesome;
    position: absolute;
    top: 27px;
    left: 70px;
    color: #2CCC70; /* Updated brand color */
    line-height: 18px;
    font-size: 15px;
}

.post-readmore {
    clear: both;
    display: block;
    padding: 23px 0 0;
    position: relative;
    margin-top: 30px;
    width: 72px;
    text-align: left;
    border-top: 1px solid #2CCC70; /* Updated brand color */
    color: #888;
    transition: 0.5s;
}

.post-sub-link a:hover {
    color: #2CCC70 !important; /* Updated brand color */
}

@media screen and (max-width: 2560px) {
    .wp-index-blog-section {
      column-width: 20vw !important;
      width: 70% !important;
   }
}

@media screen and (max-width: 1600px) {
    .wp-index-blog-section {
      column-width: 20vw !important;
      width: 80% !important;
   }
}

@media screen and (max-width: 1440px) {
    .wp-index-blog-section {
        width: 80%!important;
        column-width: 20vw !important;
    }
}


@media screen and (max-width: 1024px) {
    .wp-index-blog-section {
        width: 90%!important;
        column-width: 20vw !important;
    }
}

@media screen and (max-width: 1023px) {
  .logbook-wp-main-navigation .wrapper {
      background: #000000 !important;
      padding: 10px 0;
  }
  .wp-index-blog-section {
     background: #fff; /* Updated to white */
     width: 100% !important;
  }
}

.wp-index-blog-section {
    grid-gap: 32px;
    column-width: 15vw;
}

.wp-index-blog-section {
    background: #fff; /* Updated to white */
    width: 65%;
    padding: 40px 10px;
}

.logbook-wp-wp-blog-section .pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
    justify-content: center !important;
}

.post .post-title a:focus {
    color: #2CCC70; /* Updated brand color */
    text-decoration: underline;
}

.post .post-title a:hover {
    color: #2CCC70; /* Updated brand color */
}

/* Important button color */
#myBtn,
.form-submit .submit,
.logbook-wp-wp-blog-section .pagination span.current,
.widget_search .wp-block-search .wp-block-search__button {
    background-color: #2CCC70;
    border-radius: 8px; /* Apple-like rounded corners */
}

/* Less important button color */
.logbook-wp-wp-blog-section .blog-wrap .content-part .category-name a,
.secondary-button,
.logbook-wp-wp-blog-section .pagination .page-numbers:hover {
    background-color: #F8D877;
    color: #000 !important;
    border-color: #F8D877;
    border-radius: 8px; /* Apple-like rounded corners */
}

.logbook-wp-wp-blog-section .pagination span.current {
    background: #2CCC70; /* Updated brand color */
    z-index: 1;
    color: #ffffff;
    border-color: #2CCC70; /* Updated brand color */
}

.read-more:hover {
    color: #2CCC70; /* Updated brand color */
}

.logbook-wp-wp-blog-section .pagination .page-numbers:hover {
    color: #000;
    background-color: #F8D877; /* Less important button color */
    border-color: #F8D877;
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu > li > a {
    color: #000000;
    font-weight: 600;
}

.logbook-wp-main-navigation .sticky-nav {
    background: #fff;
    padding: 10px 0;
}

.byline {
    text-transform: capitalize;
    font-style: normal;
    font-weight: 500;
    color: #2CCC70; /* Updated brand color */
    font-size: 12px;
}

.posted-on {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    color: #2CCC70; /* Updated brand color */
}

.logbook-wp-wp-blog-section .blog-wrap .content-part .category-name a {
    background-color: #F8D877; /* Less important button color */
    border-radius: 8px; /* Apple-like rounded corners */
}

.widget_search .wp-block-search .wp-block-search__button {
    background: #2CCC70; /* Updated brand color */
    color: #fff;
    border-radius: 8px; /* Apple-like rounded corners */
}

.logbook-wp-wp-blog-section .content-part .block:before {
    background-color: #2CCC70; /* Updated brand color */
}

.wp-block-latest-comments .wp-block-latest-comments__comment-meta {
    color: #2CCC70; /* Updated brand color */
}

.widget-area .widget-title:after, .wp-block-group .wp-block-group__inner-container h2:after {
    background-color: #2CCC70; /* Updated brand color */
}

.widget-area .widget_archive ul li a:before, .wp-block-group .wp-block-archives li a:before {
    color: #2CCC70; /* Updated brand color */
}

.widget-area .widget_categories ul li a:before, .wp-block-group .wp-block-categories li a:before {
    color: #2CCC70; /* Updated brand color */
}

.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current_page_item > a, 
.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current-menu-item > a, 
.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current_page_ancestor > a, 
.logbook-wp-main-navigation ul.logbook-wp-nav-menu .current-menu-ancestor > a {
    color: #2CCC70; /* Updated brand color */
}

.content-part a{
    text-decoration: underline;
}

.form-submit .submit:hover {
    background-color: #2CCC70; /* Updated brand color */
    color: #fff;
}

.form-submit .submit:focus {
    background-color: #2CCC70; /* Updated brand color */
}

.post{
    border-bottom: 2px solid #2CCC70; /* Updated brand color */
    transition: all .3s ease-in-out;
}

.post:hover {
    -webkit-transform: translate(0px, -10px);
    transform: translate(0px, -10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.page_link a {
    color: #2CCC70; /* Updated brand color */
    text-decoration: underline;
}

.comments-area .comment-content a {
    color: #2CCC70; /* Updated brand color */
    text-decoration: underline;
}