/*
 * Theme Name:      Museum Oberschützen
 * Theme URI:       https://museum-oberschuetzen.com/
 * Description:     Child theme of Twenty Twenty-Five for Museum Oberschützen
 * Author:          Gabriel Furmuzachi
 * Author URI:      https://dev.cento.red/
 * Template:        twentytwentyfive
 * Version:         1.0.0
 * License:         GNU General Public License v2 or later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     museum-oberschuetzen
 */

/* ==========================================================================
   1. CORE LAYOUT AND STRUCTURE STYLES
   ========================================================================== */

/* ----------------------------------
   1.1 Three-Column Layout (Sidebar)
   ---------------------------------- */

/* Make only THIS section's columns stretch equally */
.three-column-layout {
    display: flex;
    align-items: stretch !important;
    min-height: 60vh; /* optional: remove if not needed */
}

.three-column-layout > .wp-block-column.sidebar-background {
    align-self: stretch !important;
    display: flex;
    flex-direction: column;
    justify-content: center;    /* centers inner content */
    background-color: #E9E9A5 !important;
    color: #fff;
    border-left: 1px solid #000;  /* left border */
    border-right: 1px solid #000; /* right border */
}

.three-column-layout > .wp-block-column.sidebar-background .wp-block-group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ==========================================================================
   2. FORM STYLES
   ========================================================================== */

/* ----------------------------------
   2.1 Simple Contact Form
   ---------------------------------- */

.simple-contact-form input,
.simple-contact-form textarea {
    width: 100%;
    max-width: 22em;
    padding: 8px;
    margin-bottom: 12px;
}

.simple-contact-form input[type=submit] {
    width: auto;
    background: #e9e9a5;
    color: #111111;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 8px;
}

.simple-contact-form input[type=submit]:hover {
    background: #858585;
    color: #ffffff;
}

/* Centering wrapper */
.simple-contact-form-wrapper {
    display: flex;
    justify-content: center;
    margin: 15px 0;
    padding: 0 10px; /* adds spacing left & right on small screens */
}

.simple-contact-form {
    text-align: left;
    width: 100%;
    max-width: 22em; /* prevents it from getting too wide */
    margin: 0 auto;    /* centers it cleanly */
}


/* ----------------------------------
   2.2 Museum Membership Form
   ---------------------------------- */

/* Wrapper for the form */
.mo-form-wrapper {
    display: block;
    margin: 20px 0;
    padding: 0 10px;
    text-align: left;
}

/* Form grid layout */
.mo-membership-form {
    display: grid;
    grid-template-columns: 1fr 1fr;     /* Two equal columns */
    gap: 16px 20px;                     /* row-gap and column-gap */
    width: 100%;
    max-width: 40em;                    /* a bit wider to fit two columns */
    margin: 0;
    box-sizing: border-box;
}

.mo-membership-form p {
    margin: 0;
}

/* Make certain fields span both columns */
.mo-membership-form p.full-width {
    grid-column: 1 / -1; /* span both columns */
}

/* Text inputs, textarea, and select */
.mo-membership-form input[type=text], .mo-membership-form input[type=email], .mo-membership-form textarea, .mo-membership-form select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

/* Radio buttons and checkboxes */
.mo-membership-form p label {
    display: block;
    margin-bottom: 8px;
}

.mo-membership-form input[type=radio], .mo-membership-form input[type=checkbox] {
    margin-right: 8px;
    vertical-align: middle;
}

/* Submit button */
.mo-membership-form input[type=submit] {
    width: auto;
    background: #dfe7c5;
    color: #111111;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 8px;
}

.mo-membership-form input[type=submit]:hover {
    background: #666666;
    color: #ffffff;
}

/* Responsive: stack on small screens */
@media (max-width: 600px) {
    .mo-membership-form {
        grid-template-columns: 1fr; /* single column on mobile */
    }
}

/* Success / error messages */
.mo-form-message {
    max-width: 22em;
    margin: 0 0 15px 0;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.9em;
}

.mo-form-message.success {
    background: #e2f4df;
    color: #225522;
    border: 1px solid #77bb77;
}

.mo-form-message.error {
    background: #f8dada;
    color: #882222;
    border: 1px solid #dd8888;
}


/* ==========================================================================
   3. NAVIGATION MENU STYLES
   ========================================================================== */

/* Submenu container spacing */
.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
    padding-top: 10px !important; /* adjust as needed */
}

/* ----------------------------------
   3.1 ARCHIV DROPDOWN STYLING
   (Includes Cross-Browser & Layout Fixes)
   ---------------------------------- */

/* 1. Parent List Item Styling (CRITICAL for vertical alignment and layout) */
.wp-block-navigation-item.is-style-dropdown {
    /* Layout Reset */
    list-style: none;
    display: flex !important;
    align-items: center;    /* Vertically center the <select> element */
    justify-content: center;
    
    /* Height and Overflow Fixes */
    height: auto !important;
    min-height: 28px !important;
    overflow: visible !important;
    
    padding: 0; /* REMOVE fixed padding here, let the select element handle it */
    margin: 0;
}

/* 2. <select> Element Styling (Aggressive Cross-Browser Reset and Appearance) */
.wp-block-navigation .mvos-jump-to-year {
    /* Appearance Reset (Crucial for Firefox) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Aggressive Visual Reset */
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    
    /* Box Model & Text Alignment */
    background: none;
    line-height: normal;
    height: auto !important;
    
    /* CRITICAL CHANGE: Set padding on the <select> element */
    /* Padding will style the visible "ARCHIV" text AND the options list in Chrome. */
    padding: 0 0 0 10px !important;
    margin-bottom: 0.5px;
    
    /* Hiding the dropdown arrow space (Kept for consistency) */
    text-indent: 0.01px;
    text-overflow: '';
    
    /* Requested Text Styles */
    color: rgb(17, 17, 17);
    cursor: pointer;
    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0px; /* Keep this at 0px since it's required for fitting */
    text-transform: uppercase;
}

/* 3. Handle Hover State */
.wp-block-navigation .mvos-jump-to-year:hover,
.wp-block-navigation .mvos-jump-to-year:focus {
    color: var(--wp--preset--color--secondary, #767676);
    text-decoration: underline;
    text-underline-offset: 1.6px;
}

/* 4. Hiding Redundant Archive Links */
.wp-block-navigation-item a[href*="/20"],
.wp-block-navigation-item a[href*="/19"] {
    display: none !important;
}

/* 5. Ensure the custom dropdown is NOT hidden */
.wp-block-navigation-item .mvos-jump-to-year {
    display: block !important;
    width: auto !important;
}

/* 6. Optional: Force padding on the dropdown OPTIONS (only affects some browsers like Chrome) */
.wp-block-navigation .mvos-jump-to-year option {
    padding-left: 10px !important;
}