/*
Theme Name:   Travelsthan Child
Theme URI:    https://www.travelsthan.com/
Description:  Travelsthan Child Theme is a customized extension of the parent theme, designed specifically for Travelsthan – India’s Tour and Beyond. It adds tailored styles, layouts, and features to perfectly represent Travelsthan’s brand identity as the Best Travel Agency in Jaipur.
Author:       Travelsthan
Author URI:   https://www.travelsthan.com
Template:     skt-travel-tourism
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         travel, tourism, agency, rajasthan, packages
Text Domain:  skt-travel-tourism-child
*/


/* Add this to your child theme's style.css */

/*
Theme Name:     My Travelsthan Child (or whatever your child theme name is)
Theme URI:      https://example.com/
Description:    My child theme for Travelsthan.
Author:         Your Name
Author URI:     https://example.com/
Template:       (your parent theme folder name, e.g., travelsthan)
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Tags:           light, dark, responsive
Text Domain:    my-travelsthan-child
*/

/* --- Custom styles for desktop menu in child theme --- */

@media screen and (min-width: 992px) { /* Apply these styles for screens 992px and wider (typical desktop) */

    #topmenu {
        width: 100%; /* Ensure the container takes full available width */
        text-align: center; /* This might help center the flex container itself if it's narrower than 100% */
    }

    #topmenu ul {
        display: flex; /* Make the list items arrange horizontally */
        flex-wrap: nowrap; /* Prevent items from wrapping to a new line on desktop */
        justify-content: center; /* Center the menu items horizontally */
        align-items: center; /* Vertically align items in the middle of the container */
        list-style: none; /* Remove default bullet points */
        margin: 0;
        padding: 0;
        width: auto; /* Allow the ul to size itself based on content */
        max-width: 100%; /* Ensure it doesn't overflow its container */
        overflow: hidden; /* Hide any overflow if items are too wide */
    }

    #topmenu ul li {
        display: block; /* Important for flex items */
        margin: 0 10px; /* Adjust horizontal spacing between menu items */
        padding: 0; /* Reset vertical padding from li if any */
        white-space: nowrap; /* Prevent text within a menu item from breaking onto a new line */
    }

    #topmenu ul li a {
        padding: 15px 10px; /* Adjust padding to be less vertical (e.g., 15px top/bottom, 10px left/right) */
        display: block; /* Make the link fill the entire li area for easier clicking */
        box-sizing: border-box; /* Include padding in the element's total width/height */
        /* You can override other styles here if needed, e.g., color, font-size */
        /* font-size: 15px; */ /* Example: slightly smaller font */
    }

    /* Additional styles for menu buttons and sticky behavior on desktop */
    .menu-button {
        background-color: transparent !important; /* Makes the button background transparent to remove blue strip */
        border: none !important; /* Removes any default border */
    }

    /* If your menu wrapper is what becomes sticky and overlaps content */
    /* Ensure it has a position value other than 'static' (e.g., relative, absolute, fixed) */
    .menu-wrapper {
        z-index: 1000; /* A high z-index to bring it above other content */
        /* If .menu-wrapper itself needs a position, set it here. Example: */
        /* position: relative; */
    }

    /* IMPORTANT: If the "blue strip" is NOT part of the button itself,
       but a container *around* it, you'll need to target that specific element.
       Replace 'blue-strip-container-class-id' with the actual selector. */
    /* .blue-strip-container-class-id {
        background-color: transparent !important;
    } */
}