/*
Theme Name: Digitalin Nanban Website Theme
Theme URI: https://www.digitalinnanban.com
Description: Digitalin Nanban custom child theme based on GeneratePress.
Author: Digitalin Nanban
Author URI: https://www.digitalinnanban.com
Template: generatepress
Version: 1.0.0
Text Domain: digitalin-nanban
*/

.post-dates {
    font-size: 12px;
}

/* Secondary Navigation */
nav#secondary-navigation {
    .inside-navigation {
        padding: 0 !important;
        flex-direction: row-reverse;
    }

    .wp-block-social-links.has-small-icon-size {
        font-size: 20px !important;
    }

    p.gb-text.gb-text-2850bce2 a {
        color: #ffffff;
        font-weight: 500;
    }

    p {
        margin-bottom: 0 !important;
    }
}

/* Main Navigation */
nav#site-navigation {
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}

.icon-pro-menu-bars {
    font-size: 29px;
}

.icon-pro-menu-bars svg {
    top: 8px;
}

button.menu-toggle {
    line-height: 0 !important;
    padding-right: 11px !important;
    font-size: 18px !important;
}

/* Search */
form.search-modal-form {
    border-radius: 10px;
    border-bottom: 3px solid #000000;
}

/* Left Sidebar */
div#left-sidebar {
    width: 12%;
}

/* Desktop Sidebar */
@media (min-width: 769px) {

    .both-sidebars .site-content {
        display: flex;
    }

    #left-sidebar,
    #primary,
    #right-sidebar {
        left: unset;
    }

    #left-sidebar {
        order: -1;
    }

    .inside-left-sidebar,
    .inside-right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 75px;
    }
}

.entry-content ol {
    margin: 0 18px;
}

/* Featured Image */
.featured-image.page-header-image-single {
    margin: 7px 0 !important;
    position: relative;
}

.featured-image.page-header-image-single::before,
.featured-image.page-header-image-single::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    border: 7px solid red;
    z-index: 1;
}

.featured-image.page-header-image-single::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.featured-image.page-header-image-single::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

img.attachment-full.size-full {
    border-radius: 0 0 0 24px;
}

/* Mobile */
@media (min-width: 320px) and (max-width: 480px) {

    nav#secondary-navigation {
        display: none;
    }

    div#left-sidebar {
        display: none !important;
    }

    div#primary {
        padding-left: 0 !important;
    }

    article.post h2#subtitle_TXt {
        color: #f4f4f4;
        font-size: 17px !important;
        margin-bottom: 5px;
        margin-top: 6px;
        font-family: Roboto, sans-serif;
        line-height: 1.5;
    }

    article.post h1.entry-title {
        font-size: 25px;
        color: #f4f4f4 !important;
    }

    article.post header.entry-header {
        background: #1d201f;
        margin: -15px !important;
        padding: 15px;
        padding-bottom: 136px;
        margin-bottom: -135px !important;
        color: #ffffff;
    }

    .story-row {
        background: #1d201f !important;
        margin-bottom: -10px;
        display: flex !important;
    }

    nav.rank-math-breadcrumb a,
    nav.rank-math-breadcrumb p {
        color: #dbdbdb !important;
    }

    span.separator {
        margin: 0 -3px;
    }
}

/*
 * Digitalin Nanban
 * Photo Gallery Icon
 */

.image-with-icon-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.photo-gallery-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-in-out;
}

.image-with-icon-wrapper:hover .photo-gallery-icon {
    transform: scale(1.1);
}

.photo-gallery-icon svg {
    width: 22px;
    height: 22px;
}

.image-with-icon-wrapper .gb-block-image img {
    width: 100%;
    height: auto;
    display: block;
}