/*
Theme Name: Graceful Joy Blog
Theme URI: https://optimathemes.com/graceful-joy-blog-theme/
Author: Aslam
Author URI: http://optimathemes.com/
Description: Graceful Joy Blog is a free, modern, and minimal WordPress theme designed to bring a fresh and elegant look to any website. Highly versatile and visually appealing, it's perfect for lifestyle, fashion, travel, tech, health, fitness, beauty, food, news, magazine, personal, and professional blogs. This theme comes packed with features you'll love, full WooCommerce compatibility for online stores, RTL language support for global audiences, and SEO-friendly code to help your content rank higher on search engines. Plus, its fully responsive and retina-ready design ensures your site looks stunning on every device. Whether you're a blogger, creator, or entrepreneur, Graceful Joy Blog makes it easy to share your stories beautifully.
Template: graceful
Version: 1.0.1
Requires at least: 5.3
Tested up to: 6.8
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-joy-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
--------------------------------------------------------------*/

body {
    font-family: 'Mulish', sans-serif;
    font-size: 16px;
}

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

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

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


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

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

aside .graceful-widget h2::after, 
.graceful-widget .widget-title::after {
    border-top: none;
}

.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;
    }
}

.blog .site-images {
    min-height: 245px;
}

.site-images img {
    width: 100%;
}

.content-column > li {
    margin-bottom: 30px;
    display: inline-block;
    vertical-align: top;
    margin-right: 35px;
    width: calc((100% - 37px ) /2);
    width: -webkit-calc((100% - 40px ) /2);
}

.content-column > li:nth-of-type(2n+2) {
    margin-right: 0;
}

[data-layout*="col1-leftrightsidebar"] .content-column > li {
    width: 100%;
}

.entry-header {
    height: 160px;
    border-bottom: 1px solid #eeeeee;
}

.blog .post-header-inner {
    background: transparent;
    border-left: none; 
    border-right:none; 
    border-top: none;
    margin: -45px auto 0;
    min-height: 170px;
    padding: 30px 20px 10px;
    position: relative;
    width: 88%;
}

.blog .post-header-inner::before, .blog .post-header-inner::after {
    display: none;
}

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

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

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

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

/* Left align single post title and meta */
.single .post-header,
.single .post-title,
.single .post-meta {
    text-align: left !important;
}

/* Left align single page title and meta (same as single post) */
.page .post-header,
.page .post-title,
.page .post-meta,
.page .entry-header,
.page .entry-title {
    text-align: left !important;
}

/* Related Posts heading - Replace "Related Posts" with "Citi ieraksti" using CSS */
.related-posts h3,
.related-posts .related-posts-title,
.single .related-posts h3,
.single .related-posts .related-posts-title {
    text-transform: none !important;
    font-variant: normal !important;
    font-size: 0 !important; /* Hide original text */
    line-height: 1.2 !important;
    position: relative !important;
}

.related-posts h3::after,
.related-posts .related-posts-title::after,
.single .related-posts h3::after,
.single .related-posts .related-posts-title::after {
    content: "Citi ieraksti" !important;
    font-size: 1.5em !important; /* Adjust to match your heading size - change this if needed */
    display: block !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/* Hide featured image in header on single post pages */
.single .entry-header .post-thumbnail,
.single .entry-header img,
.single .post-header .post-thumbnail,
.single .post-header img,
.single .entry-header .wp-post-image,
.single-post .entry-header .post-thumbnail,
.single-post .entry-header .featured-image,
.single-post .entry-header img,
.single article .site-images,
.single .site-images,
.single article .site-images img,
.single .site-images img {
    display: none !important;
}

.content-column li {
    border-bottom: none;
}

.blog article .post-meta {
    margin-bottom: 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: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: normal;
}

/* Make single post and page content fluid/liquid to prevent sidebar overlap */
@media (min-width: 768px) {
    /* When sidebar exists, make content column fluid - override parent theme */
    .single .main-content.wrapped-content .content-column,
    .single .main-content.wrapped-content article,
    .page .main-content.wrapped-content .content-column,
    .page .main-content.wrapped-content article {
        width: auto !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
    }
    
    /* Make post content fluid - use available space without overlapping sidebar */
    .single .main-content.wrapped-content .post-page-content,
    .single .main-content.wrapped-content .related-posts,
    .page .main-content.wrapped-content .post-page-content,
    .page .main-content.wrapped-content .entry-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure proper padding for content and remove any negative margins */
    .single .post-page-content,
    .page .post-page-content {
        padding-left: 0 !important;
        padding-right: 20px !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Remove negative margins from content column that cause overlap */
    .single .content-column,
    .page .content-column {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    /* Make all content inside .post-page-content fluid and responsive */
    .single .post-page-content p,
    .single .post-page-content div:not(.wp-block-group):not(.wp-block-columns),
    .single .post-page-content ul,
    .single .post-page-content ol,
    .single .post-page-content blockquote,
    .single .post-page-content h1,
    .single .post-page-content h2,
    .single .post-page-content h3,
    .single .post-page-content h4,
    .single .post-page-content h5,
    .single .post-page-content h6,
    .single .post-page-content figure,
    .single .post-page-content table,
    .page .post-page-content p,
    .page .post-page-content div:not(.wp-block-group):not(.wp-block-columns),
    .page .post-page-content ul,
    .page .post-page-content ol,
    .page .post-page-content blockquote,
    .page .post-page-content h1,
    .page .post-page-content h2,
    .page .post-page-content h3,
    .page .post-page-content h4,
    .page .post-page-content h5,
    .page .post-page-content h6,
    .page .post-page-content figure,
    .page .post-page-content table {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Ensure images and media are responsive */
    .single .post-page-content img,
    .single .post-page-content iframe,
    .single .post-page-content video,
    .single .post-page-content embed,
    .page .post-page-content img,
    .page .post-page-content iframe,
    .page .post-page-content video,
    .page .post-page-content embed {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
}

.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; 
}

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

    .blog .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 #e4e4e4;
  background: #8C916C !important;
}

/* Main Navigation Menu Color Override - Change to #8C916C */
/* Main Navigation Container */
#main-navigation {
    background: #8C916C !important;
}

/* Site Menu List */
ul#site-menu {
    background: #8C916C !important;
}

/* Top Navigation */
#top-navigation {
    background: #8C916C !important;
}

/* Top Menu */
#top-menu {
    background: #8C916C !important;
}

/* Top Menu Dropdown Sub-menus */
#top-menu .sub-menu {
    background: #8C916C !important;
}

/* Main Menu */
#main-menu {
    background: #8C916C !important;
}

/* Current Menu Item Background */
.current-menu-item {
    background: #8C916C !important;
}

/* Current/Active Page Menu Item Text Color - #CCCCCC */
#main-navigation .current-menu-item > a,
#main-navigation .current-menu-ancestor > a,
#main-navigation li.current-menu-item > a,
#main-navigation li.current-menu-ancestor > a,
#site-menu .current-menu-item > a,
#site-menu .current-menu-ancestor > a,
#top-menu .current-menu-item > a,
#top-menu .current-menu-ancestor > a {
    color: #CCCCCC !important;
}

/* Menu Items Mouseover (Hover) - White - ULTRA SPECIFIC */
#main-navigation a:hover,
#main-navigation a:hover *,
#main-navigation #site-menu a:hover,
#main-navigation #site-menu a:hover *,
#main-navigation #site-menu li a:hover,
#main-navigation #site-menu li a:hover *,
#main-navigation #site-menu li:hover > a,
#main-navigation #site-menu li:hover > a *,
#main-navigation #site-menu .menu-item a:hover,
#main-navigation #site-menu .menu-item a:hover *,
#main-navigation #site-menu .menu-item:hover > a,
#main-navigation #site-menu .menu-item:hover > a *,
#main-navigation #site-menu .sub-menu a:hover,
#main-navigation #site-menu .sub-menu a:hover *,
#main-navigation #site-menu .sub-menu li a:hover,
#main-navigation #site-menu .sub-menu li a:hover *,
#site-menu a:hover,
#site-menu a:hover *,
#site-menu li a:hover,
#site-menu li a:hover *,
#site-menu li:hover > a,
#site-menu li:hover > a *,
#site-menu .menu-item a:hover,
#site-menu .menu-item a:hover *,
#site-menu .menu-item:hover > a,
#site-menu .menu-item:hover > a *,
#site-menu .sub-menu a:hover,
#site-menu .sub-menu a:hover *,
#site-menu .sub-menu li a:hover,
#site-menu .sub-menu li a:hover *,
#site-menu .sub-menu > li > a:hover,
#top-menu a:hover,
#top-menu a:hover *,
#top-menu li a:hover,
#top-menu li a:hover *,
#top-menu li:hover > a,
#top-menu li:hover > a *,
#top-menu .sub-menu a:hover,
#top-menu .sub-menu a:hover *,
#top-menu .sub-menu li a:hover,
#top-menu .sub-menu li a:hover *,
#top-menu .sub-menu > li > a:hover {
    color: #FFFFFF !important;
}

/* Also for responsive menu */
#responsive-menu .current-menu-item > a,
#responsive-menu .current-menu-ancestor > a {
    color: #CCCCCC !important;
}

#responsive-menu a:hover,
#responsive-menu a:hover *,
#responsive-menu li a:hover,
#responsive-menu li a:hover *,
#responsive-menu li:hover > a {
    color: #FFFFFF !important;
}

/* Remove Focus Outline/Square Effect - Menu Items */
#main-navigation a:focus,
#main-navigation a:focus-visible,
#main-navigation #site-menu a:focus,
#main-navigation #site-menu a:focus-visible,
#main-navigation #site-menu li a:focus,
#main-navigation #site-menu li a:focus-visible,
#site-menu a:focus,
#site-menu a:focus-visible,
#site-menu li a:focus,
#site-menu li a:focus-visible,
#top-menu a:focus,
#top-menu a:focus-visible,
#top-menu li a:focus,
#top-menu li a:focus-visible,
#responsive-menu a:focus,
#responsive-menu a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove Focus Outline/Square Effect - Site Name/Logo */
#site-header a:focus,
#site-header a:focus-visible,
#site-title a:focus,
#site-title a:focus-visible,
.site-title a:focus,
.site-title a:focus-visible,
.custom-logo-link:focus,
.custom-logo-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

#top-menu {
  display: inline-block;
  background: #8C916C !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: #ffffff;
}

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

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

#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 .sub-menu {
  position: absolute;
  left: -999em;
  z-index: 1101;
  width: 170px;
  text-align: left;
  border: 1px solid #e4e4e4;
  border-width: 1px;
  opacity: 0;
  background: #8C916C !important;
}

#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 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;
}

#main-menu {
  background: #8C916C !important;
}

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

#main-navigation {
    border-bottom: 1px solid #eeeeee;
    background: #8C916C !important;
}

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

.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;
    }
    #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;
}

#graceful-post-slider .owl-nav {
    background-color: #f3efee;
}

#graceful-post-slider .owl-stage-outer:after {
    background-color: #f3efee;
}



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

/* Remove Footer Credit Text - "Graceful Theme by" */
.footer-credits,
#site-footer .footer-credits,
.site-footer .footer-credits,
.footer-bottom-wrap .footer-credits {
    display: none !important;
    visibility: hidden !important;
}

/* Hide any links to Optima Themes */
#site-footer a[href*="optimathemes"],
#site-footer a[href*="Optima"],
.site-footer a[href*="optimathemes"] {
    display: none !important;
}

/* Center Footer Copyright - © Year Graceful Theme */
.footer-copyright,
#site-footer .footer-copyright,
.site-footer .footer-copyright,
.footer-bottom-wrap .footer-copyright {
    text-align: center !important;
    width: 100% !important;
}

.footer-bottom-wrap,
#site-footer .footer-bottom-wrap,
.site-footer .footer-bottom-wrap {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

@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;
}


#site-footer h2 {
    background: transparent !important;
    padding: 3px !important;
}

.graceful-joy-category-title {
    margin-bottom: 20px;
    border: 1px solid #dddddd;
    border-bottom: 4px solid #dddddd;
    display: inline-block;
    padding-bottom: 1px;
    text-align: center;
    width: 100%;
    font-size: 28px;
    padding: 2px 0 4px;
}



/*--------------------------------------------------------------
Featured Boxes Sections
--------------------------------------------------------------*/

#featured-boxes {
    background: #fff;
    margin-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
}

#featured-boxes .wrapped-content {
  font-size: 0;
  text-align: center;
}

#featured-boxes .featured-box {
  position: relative;
  float: left;
}

#featured-boxes a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


#featured-boxes .graceful-wrap-outer {
  padding: 12px;
}

#featured-boxes h4 {
  display: inline-block;
  padding: 11px 20px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: rgba(255,255,255,0.80);
  color: rgba(0,0,0,0.80) !important;
}


#featured-boxes .featured-box {
    width: calc((100% - 70px ) /3);
    width: -webkit-calc((100% - 70px ) /3);
    margin-right: 34px;
}

#featured-boxes .featured-box:last-child {
    margin-right: 0;
}


@media screen and (max-width: 768px) {
    .featured-box {
        display: block;
    }
    .main-navigation-search {
        right: 10px;
        top: 18px !important;
    }
}


@media screen and (max-width: 480px) {
    #featured-boxes .featured-box {
        width: 100%;
        margin-bottom: 34px;
    }
    
    #featured-boxes {
      padding: 20px !important;
    }
}


.current-menu-item {
    background: #8C916C !important;
}

ul#site-menu {
    background: #8C916C !important;
}

#site-menu li:first-child a, #site-menu li:last-child a {
    padding-left: 16px;
    padding-right: 16px;
}

@media screen and (max-width: 768px) {
    .navigation-search-button {
        line-height: 20px;
    }
    #main-navigation .navigation-socials {
        right: 44px;
    }
    
    /* Mobile Navigation Menu - Ensure proper display */
    #site-menu {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    #site-menu li {
        display: inline-block !important;
        margin: 0 2px !important;
    }
    
    #site-menu li a {
        padding: 8px 10px !important;
        font-size: 12px !important;
        min-height: 40px !important;
        line-height: 24px !important;
    }
    
    /* Mobile Navigation Container */
    #main-navigation {
        padding: 10px 0 !important;
    }
    
    /* Mobile Post List - Single Column with Better Spacing */
    .gjb-post-list {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 0 10px !important;
    }
    
    /* Mobile Post Images - Full Width */
    .gjb-post-item {
        width: 100% !important;
        max-width: 100% !important;
    }
}



/* ===========================
   Graceful Joy Carousel Slider Post List Styles
   =========================== */
.joy-latest-posts-slider {
    position: relative;
    width: 100%;
    background: #f3efee;
    padding: 44px;
}
.joy-latest-posts-slider .owl-item {
    border: 1px solid #eeeeee;
}
.joy-latest-posts-slider .joy-slider-item {
    position: relative;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.joy-latest-posts-slider .joy-slider-overlay {
    background: rgba(255, 255, 255, 0.8); /* light overlay */
    padding: 20px;
    text-align: center;
    color: #222; /* dark text */
    max-width: 600px;
    border-radius: 0; /* flat corners as per design */
}
.joy-latest-posts-slider .joy-slider-title a {
    color: #222; /* dark heading */
    text-decoration: none;
    font-size: 24px;
}
.joy-latest-posts-slider .joy-slider-excerpt {
    margin: 10px 0;
    font-size: 16px;
    color: #333; /* slightly lighter gray for body text */
}
.joy-latest-posts-slider .joy-slider-button {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 18px;
    background: #d9d3ce; /* soft gray/beige button */
    color: #222; /* dark button text */
    text-decoration: none;
    border-radius: 2px;
}
.joy-latest-posts-slider .joy-slider-button:hover {
    background: #c2bcb7; /* darker beige on hover */
}

/* ===========================
   Graceful Joy Blog Post List Styles
   =========================== */

.gjb-post-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 40px;
}

/* Card shell */
.gjb-post-item {
    display: flex;
    position: relative;
    flex-direction: column;
}

/* Images or placeholders */
.gjb-post-thumb {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}
.gjb-post-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.gjb-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: #e5e5e5;
    display: block;
}

/* Featured hero (wide) */
.gjb-thumb-featured {
    aspect-ratio: 16 / 9;
    margin-bottom: 1.25rem;
}
.gjb-thumb-featured .gjb-thumb-placeholder {
    aspect-ratio: 16 / 9;
}

/* Grid thumbs (square 345x345px) - Override parent theme */
.gjb-post-item .gjb-thumb-grid,
.gjb-post-list .gjb-thumb-grid,
.gjb-thumb-grid {
    width: 345px !important;
    height: 345px !important;
    margin-bottom: 1rem;
    display: block;
    max-width: 100%;
    aspect-ratio: 1 / 1 !important;
}
.gjb-post-item .gjb-thumb-grid img,
.gjb-post-list .gjb-thumb-grid img,
.gjb-thumb-grid img {
    width: 345px !important;
    height: 345px !important;
    max-width: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 1 / 1 !important;
}
.gjb-post-item .gjb-thumb-grid .gjb-thumb-placeholder,
.gjb-post-list .gjb-thumb-grid .gjb-thumb-placeholder,
.gjb-thumb-grid .gjb-thumb-placeholder {
    width: 345px !important;
    height: 345px !important;
    max-width: 100%;
    aspect-ratio: 1 / 1 !important;
}

/* First page featured images (343x300px on desktop, square on mobile) - Must override general grid rules */
/* Override parent container first */
.gjb-post-list .gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page,
.gjb-post-item.gjb-first-page .gjb-post-thumb.gjb-thumb-grid.gjb-thumb-first-page,
.gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page,
.gjb-first-page .gjb-thumb-first-page,
.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page {
    width: 343px !important;
    height: 300px !important;
    aspect-ratio: 343 / 300 !important;
    max-width: 343px !important;
}
/* Override .gjb-post-thumb img rule specifically for first page - this is critical! */
.gjb-post-list .gjb-post-item.gjb-first-page .gjb-post-thumb.gjb-thumb-grid.gjb-thumb-first-page img,
.gjb-post-list .gjb-post-item.gjb-first-page .gjb-post-thumb img.gjb-thumb-first-page,
.gjb-post-item.gjb-first-page .gjb-post-thumb.gjb-thumb-grid.gjb-thumb-first-page img,
.gjb-post-item.gjb-first-page .gjb-post-thumb.gjb-thumb-grid img,
.gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page img,
.gjb-post-list .gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page img,
.gjb-first-page .gjb-post-thumb.gjb-thumb-first-page img,
.gjb-first-page .gjb-thumb-first-page img,
.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page img {
    width: 343px !important;
    height: 300px !important;
    aspect-ratio: 343 / 300 !important;
    object-fit: cover;
    max-width: 343px !important;
}
.gjb-post-list .gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page .gjb-thumb-placeholder,
.gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page .gjb-thumb-placeholder,
.gjb-first-page .gjb-thumb-first-page .gjb-thumb-placeholder,
.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page .gjb-thumb-placeholder {
    width: 343px !important;
    height: 300px !important;
    aspect-ratio: 343 / 300 !important;
    max-width: 343px !important;
}

/* Responsive - make it full width on mobile */
@media screen and (max-width: 768px) {
    /* Mobile Post List - Single Column */
    .gjb-post-list {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        padding: 0 15px !important;
    }
    
    .gjb-post-item .gjb-thumb-grid,
    .gjb-post-list .gjb-thumb-grid,
    .gjb-thumb-grid {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    .gjb-post-item .gjb-thumb-grid img,
    .gjb-post-list .gjb-thumb-grid img,
    .gjb-thumb-grid img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    .gjb-post-item .gjb-thumb-grid .gjb-thumb-placeholder,
    .gjb-post-list .gjb-thumb-grid .gjb-thumb-placeholder,
    .gjb-thumb-grid .gjb-thumb-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    /* First page images - square on mobile - Must override general grid rules */
    .gjb-post-list .gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page,
    .gjb-post-item.gjb-first-page .gjb-post-thumb.gjb-thumb-grid.gjb-thumb-first-page,
    .gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page,
    .gjb-first-page .gjb-thumb-first-page,
    .gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        max-width: 100% !important;
    }
    .gjb-post-list .gjb-post-item.gjb-first-page .gjb-post-thumb.gjb-thumb-grid.gjb-thumb-first-page img,
    .gjb-post-list .gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page img,
    .gjb-post-item.gjb-first-page .gjb-post-thumb.gjb-thumb-grid.gjb-thumb-first-page img,
    .gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page img,
    .gjb-first-page .gjb-thumb-first-page img,
    .gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        max-width: 100% !important;
    }
    .gjb-post-list .gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page .gjb-thumb-placeholder,
    .gjb-post-item.gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page .gjb-thumb-placeholder,
    .gjb-first-page .gjb-thumb-first-page .gjb-thumb-placeholder,
    .gjb-first-page .gjb-thumb-grid.gjb-thumb-first-page .gjb-thumb-placeholder {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        max-width: 100% !important;
    }
    
    /* Mobile Post Title */
    .gjb-post-title {
        font-size: 24px !important;
    }
    
    /* Mobile Navigation */
    #main-navigation {
        padding: 8px 0 !important;
    }
    
    #site-menu {
        width: 100% !important;
        text-align: center !important;
    }
    
    #site-menu li {
        display: inline-block !important;
    }
    
    #site-menu li a {
        padding: 0 12px !important;
        font-size: 12px !important;
    }
    
    /* Mobile Footer */
    .footer-bottom-wrap {
        padding: 15px 10px !important;
    }
    
    .footer-copyright {
        font-size: 14px !important;
        text-align: center !important;
        width: 100% !important;
    }
}

/* Header + Title */
.gjb-post-header { margin-top: 0; }

.gjb-post-title {
    letter-spacing: .06em;
    line-height: 1.2;
    font-size: 28px;
    margin: .25rem 0 .5rem;
}
.is-featured .gjb-post-title { font-size: 1.8rem; }
.gjb-post-title a {
    color: #111;
    text-decoration: none;
}

/* Meta line */
.gjb-post-meta {
    font-size: .8rem;
    color: #7a7a7a;
    text-transform: uppercase;
    letter-spacing: .12em;
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1rem;
}
.gjb-meta-sep { opacity: .6; }

/* First page author - smaller font */
.gjb-first-page .gjb-post-author.gjb-first-page-author,
.gjb-post-item.gjb-first-page .gjb-post-author.gjb-first-page-author,
.gjb-first-page .gjb-post-date-author.gjb-first-page-author,
.gjb-post-item.gjb-first-page .gjb-post-date-author.gjb-first-page-author {
    font-size: .7rem !important;
}

/* Excerpt */
.gjb-post-excerpt {
    color: #444;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.gjb-post-excerpt p {
    margin-top: 0;
    margin-bottom: 0;
}
.is-featured .gjb-post-excerpt { max-width: 75ch; }

/* Read more button */
.gjb-read-more {
    display: inline-block;
    background: #f2f2f2;
    color: #222;
    padding: .6rem 1.1rem;
    font-size: .85rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background .2s ease;
}
.gjb-read-more:hover { background: #e1e1e1; }

/* Grid: 2 columns after the hero */
@media (min-width: 768px) {
    .gjb-post-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .gjb-post-item.is-featured {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1100px) {
    .gjb-post-list {
        gap: 3.5rem;
    }
    .is-featured .gjb-post-title { font-size: 2.2rem; }
}

.gjb-post-category {
    position: absolute;
    bottom: 4px;
    left: 0;
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 12px;
    margin: 12px;
    backdrop-filter: blur(10px);

}

.gjb-post-category a {
    color: #000000 !important;
    text-transform: uppercase;
    font-size: 12px;
}

@media screen and (max-width: 480px) {
    .joy-slider-wrapper.wrapped-content {
        padding-bottom: 12px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Mobile Post List - Single Column */
    .gjb-post-list {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Mobile Post Images - Full Width Square */
    .gjb-post-item .gjb-thumb-grid,
    .gjb-post-list .gjb-thumb-grid,
    .gjb-thumb-grid {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .gjb-post-item .gjb-thumb-grid img,
    .gjb-post-list .gjb-thumb-grid img,
    .gjb-thumb-grid img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    /* Mobile Post Title - Smaller */
    .gjb-post-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
    
    /* Mobile Post Meta - Smaller */
    .gjb-post-meta {
        font-size: 0.75rem !important;
    }
    
    /* Mobile Navigation - Better Spacing */
    #main-navigation {
        padding: 10px 0 !important;
    }
    
    #site-menu li a {
        padding: 0 10px !important;
        font-size: 12px !important;
    }
    
    /* Mobile Footer - Better Spacing */
    #site-footer {
        padding: 20px 10px !important;
    }
    
    .footer-copyright {
        font-size: 14px !important;
        padding: 10px 0 !important;
    }
    
    /* Mobile Content Padding */
    .content-wrap {
        padding: 0 15px !important;
    }
    
    /* Mobile Post Excerpt */
    .gjb-post-excerpt {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
    
    /* Mobile Read More Button */
    .gjb-read-more {
        padding: 0.5rem 1rem !important;
        font-size: 0.8rem !important;
    }
}

/* Additional Mobile Fixes for Very Small Screens */
@media screen and (max-width: 375px) {
    .gjb-post-title {
        font-size: 20px !important;
    }
    
    #site-menu li a {
        padding: 0 8px !important;
        font-size: 11px !important;
    }
    
    .gjb-post-meta {
        font-size: 0.7rem !important;
    }
}