/* Global Box Sizing Reset - RECOMMENDED */
/* Add this at the very top of your main CSS file if it's not already there */
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* Header container - The main wrapper for the header content */
#mainHeader.header-container { /* Targeting by ID for specificity */
    display: flex;
    flex-direction: column; /* Stack logo, lines, and nav vertically */
    align-items: center; /* Center children horizontally */
    width: 100%;
    background: #FFFFFF;
    position: relative; /* Needed if any child elements need absolute positioning relative to this container */
}

/* Header logo section */
#header { /* Already an ID, so good */
    text-align: center;
    width: 100%;
    padding-bottom: 20px; /* Space below the logo */
}

#header img { /* Already specific enough */
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: 0 auto;
}

/* Container for lines and navigation - now a section with an ID */
#headerNavSection.lines-and-nav {
    width: 100%; /* Ensure this container spans the full width */
    position: relative; /* Crucial for positioning the lines relative to it */
    min-height: 60px; /* Adjust this value to control the vertical space between lines and around nav */
                             /* This creates the "canvas" for the lines and centered nav */
}

/* Decorative lines - classes are specific enough */
.line1 {
    width: 100%; /* CHANGED: From 100vw to 100% to prevent horizontal scrollbar */
    height: auto;
    display: block;
    position: absolute;
    top: 0; /* Align to the top of #headerNavSection */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for its own width */
    z-index: 1; /* Below the nav */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
}

.line2 {
    width: 100%; /* CHANGED: From 100vw to 100% to prevent horizontal scrollbar */
    height: auto;
    display: block;
    position: absolute;
    bottom: 0; /* Align to the bottom of #headerNavSection */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for its own width */
    z-index: 1; /* Below the nav */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
}

/* Navigation content - now a nav tag with an ID */
#primaryNav.nav { /* Targeting by ID for specificity */
    display: flex;
    justify-content: center; /* Center the entire nav block horizontally */
    align-items: center; /* Vertically center items if #primaryNav has defined height */
    width: 100%;
    max-width: 980px; /* Constrain horizontal width for text alignment */
    margin: 0 auto; /* Center the nav text horizontally within #headerNavSection */
    position: absolute; /* Position relative to #headerNavSection */
    top: 50%; /* Move top edge to center */
    left: 50%; /* Move left edge to center */
    transform: translate(-50%, -50%); /* Shift back by half its own size to perfectly center */
    z-index: 10; /* Above the lines */
    padding: 0; /* Remove any default padding */
}

/* Navigation content wrapper - now an ID */
#primaryNavContent.nav-content { /* Targeting by ID for specificity */
    display: flex;
    justify-content: space-between; /* To spread items evenly */
    align-items: center; /* Vertically center items within this flex container */
    width: 100%;
    padding: 0 20px; /* Horizontal padding for content within the nav */
    /* If you haven't included the global box-sizing reset above, add it specifically here: */
    /* box-sizing: border-box; */
}

/* Navigation dropdown items - use IDs for main dropdowns */
#aboutUsDropdown,
#klStoreDropdown,
#primaryNavContent > #registryIconLink { /* Target the direct link by its ID */
    text-align: center;
    position: relative;
    padding: 2px 10px; /* Minimal vertical padding for the text itself */
    min-width: 100px;
}

/* Dropdown styling */
#aboutUsDropdown,
#klStoreDropdown { /* Targeting by ID for specificity */
    position: relative;
}

#aboutUsDropbtn,
#klStoreDropbtn { /* Targeting by ID for specificity */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    color: #707070;
    font-family: novel-pro, Georgia, serif;
    font-size: 12pt;
    letter-spacing: 1pt;
}

#aboutUsDropdownContent,
#klStoreDropdownContent { /* Targeting by ID for specificity */
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f1f1f1;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 100;
    text-align: left;
}

#aboutUsDropdown:hover #aboutUsDropdownContent,
#klStoreDropdown:hover #klStoreDropdownContent { /* Target parent ID for specificity */
    display: block;
}

/* Styles for dropdown content links - specific enough */
.dropdown-content a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #707070;
    border-bottom: none;
    font-family: novel-pro;
    font-weight: normal;
    font-size: 12pt;
    background: transparent;
}

.dropdown-content a:hover {
    background-color: #DBDBD5;
}

/* Registry icon - class is specific enough */
.registryicon {
    width: 180px;
    height: auto;
    max-width: 100%;
}

/* Responsive design - now targets header-specific elements */
@media (max-width: 1024px) {
    /* Add significant spacing below the KL banner/logo on mobile */
    #header {
        padding-bottom: 60px !important; /* Much more space below the banner */
    }
    
    /* Add significant spacing below the entire header on mobile */
    #mainHeader.header-container {
        margin-bottom: 50px !important; /* Much more space below the entire header */
    }
    
    #primaryNavContent.nav-content { /* Target by ID for specificity */
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    #aboutUsDropdown,
    #klStoreDropdown,
    #primaryNavContent > #registryIconLink { /* Target by ID for specificity */
        flex: none;
        width: 100%;
    }

    .registryicon { /* Class is specific enough */
        width: 100px;
    }

    #headerNavSection.lines-and-nav { /* Target by ID for specificity */
        min-height: 80px; /* Adjust min-height for smaller screens if needed */
    }
}

/* Specific targeting for mobile devices regardless of screen size */
@media only screen and (hover: none) and (pointer: coarse) {
    /* This targets touch devices specifically */
    #header {
        padding-bottom: 80px !important;
    }
    
    #mainHeader.header-container {
        margin-bottom: 60px !important;
    }
}

/* Additional breakpoint for smaller mobile devices */
@media (max-width: 768px) {
    /* Even more spacing for very small screens */
    #header {
        padding-bottom: 80px; /* Extra space for very small screens */
    }
    
    #mainHeader.header-container {
        margin-bottom: 60px; /* Extra space below header for very small screens */
    }
}