/*
Theme Name: Golpo
Theme URI: https://www.fahimm.com/golpo/
Author: Fahim Murshed
Author URI: https://www.fahimm.com
Description: Golpo is the ultimate storytelling theme for personal and niche bloggers. Minimal yet powerful, it offers premium features rarely found in free themes: Global Typography & Design controls, a built-in Dark Mode, dynamic Sidebar Layouts, and a sleek Back-to-Top button. Fast performance, clean code, mobile-first design, and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce and perfect for lifestyle, travel, and fashion creators who want their stories to shine.
Version: 2.0.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v3
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: golpo
Tags: blog, custom-logo, e-commerce, rtl-language-support, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, wide-blocks, block-styles, footer-widgets, portfolio, left-sidebar, right-sidebar
*/

/* All right. Now you can add your own CSS after this line */

/* Custom CSS Start */

/* ------------------------------------------------------------------------- *
 *  Navigation
 * ------------------------------------------------------------------------- */
.main-navigation {
    display: block;
    width: 100%;
    clear: both;
    text-align: center;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    /* hidden by default */
    float: left;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999;
    background: #030120;
    /* Default theme color match or variable */
    background: var(--golpo-primary-color, #030120);
    text-align: left;
    /* Submenu align left */
}

.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}

.main-navigation ul ul a {
    width: 200px;
    padding: 10px 15px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
    display: block;
    /* Show dropdown on hover/focus */
}

.main-navigation li {
    display: inline-block;
    position: relative;
}

/* Submenu Indicator */
.main-navigation .menu-item-has-children>a:after {
    content: "\f107";
    /* FontAwesome caret down */
    font-family: FontAwesome;
    margin-left: 5px;
}

.main-navigation ul ul .menu-item-has-children>a:after {
    content: "\f105";
    /* FontAwesome caret right for sub-submenus */
}

.main-navigation a {
    display: block;
    text-decoration: none;
    color: #fff;
    /* White text */
    font-weight: 700;
    padding: 0.5em 1em;
    line-height: 2;
}

.main-navigation a:hover,
.main-navigation li.current-menu-item>a,
.main-navigation li.current_page_item>a {
    color: #e2e2e2;
    /* Slight dim or accent */
    text-decoration: underline;
    /* Optional: or just color change */
}

/* Mobile Toggle */
.menu-toggle {
    display: block;
    /* Show on mobile by default, override in query */
    width: 100%;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    margin-bottom: 20px;
    cursor: pointer;
    text-align: center;
    padding: 10px;
    font-size: 1.2rem;
}

.menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile Menu State */
.main-navigation.toggled ul {
    display: block;
    text-align: left;
    /* Stack vertically */
}

.main-navigation.toggled li {
    display: block;
    /* Vertical stack */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-navigation.toggled ul ul {
    position: static;
    display: none;
    background-color: rgba(0, 0, 0, 0.2);
}

.main-navigation.toggled ul ul.toggled-on {
    display: block;
}

/* Desktop Media Query */
@media screen and (min-width: 768px) {
    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: block;
        /* Always show menu on desktop */
    }

    .main-navigation li {
        display: inline-block;
    }
}