/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://ais-ag.ch
Description: Child theme for Twenty Twenty-Five with custom liquid glass navigation, mobile menu, and styling.
Author: AIS AG
Author URI: https://ais-ag.ch
Template: twentytwentyfive
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
*/

/* ==========================================================================
   CRITICAL: Preserve navigation text color from block settings
   ========================================================================== */

/* Ensure navigation link color is inherited from the block's text color setting (e.g., custom-rot) */
.wp-block-navigation .wp-block-navigation-item__content {
    color: inherit !important;
}

/* For header navigation specifically - inherit the text color set in the navigation block */
header .wp-block-navigation .wp-block-navigation-item__content,
.has-custom-gelb-background-color .wp-block-navigation .wp-block-navigation-item__content {
    color: inherit !important;
}

/* ==========================================================================
   CRITICAL: Fix SVG wave gap in header and footer (Safari fix)
   ========================================================================== */

/* Remove any gap between elements and SVG waves */
header+svg,
.wp-block-group+svg,
div+svg#wave,
div+svg#wave-footer,
svg+.wp-block-group,
svg#wave-footer+.wp-block-group,
svg#wave-footer+div {
    margin-top: -1px !important;
    display: block !important;
}

/* Ensure header/footer groups have no margins/padding around SVG */
header .wp-block-group:last-child,
.has-custom-gelb-background-color,
.has-custom-blau-background-color {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Fix all SVG wave alignment - comprehensive Safari fix */
svg#wave,
svg#wave-footer,
svg[id*="wave"] {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    outline: none !important;
    /* Safari-specific fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Fix HTML block container for SVG */
.wp-block-html {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    display: block !important;
}

/* Ensure no whitespace between template parts */
.wp-block-template-part {
    margin: 0 !important;
    padding: 0 !important;
}

/* Footer-specific gap fix */
footer,
.wp-block-template-part[data-area="footer"] {
    margin-top: 0 !important;
}

/* Target the wp-block-html directly before footer group - aggressive Safari fix */
.wp-block-html+.wp-block-group.has-custom-blau-background-color,
.wp-block-html+.has-custom-blau-background-color {
    margin-top: -3px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Safari-specific: Use transform to slightly scale and overlap the footer with the wave */
@supports (-webkit-touch-callout: none) {
    .has-custom-blau-background-color {
        margin-top: -5px !important;
        padding-top: 5px !important;
    }

    svg#wave-footer {
        margin-bottom: -5px !important;
    }
}

/* Fallback: Apply slight overlap to all browsers */
.has-custom-blau-background-color {
    position: relative !important;
    margin-top: -2px !important;
}

/* Ensure the SVG wave bottom edge overlaps with footer */
svg#wave-footer,
svg[id*="wave-footer"] {
    position: relative !important;
    margin-bottom: -3px !important;
    z-index: 2 !important;
}

/* ==========================================================================
   CUSTOM CARD BLOCK CSS
   ========================================================================== */

.custom-card-block {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 16px 0;
    border-left: 4px solid #ffa500;
    /* Orange accent border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 16px;
}

.custom-card-block:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.custom-card-block .card-icon {
    width: 40px;
    height: 40px;
    background-color: #e8f4fd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: #0073aa;
}

.custom-card-block .card-content {
    flex: 1;
}

.custom-card-block .card-title {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.custom-card-block .card-subtitle {
    margin: 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .custom-card-block {
        padding: 16px;
        gap: 12px;
    }

    .custom-card-block .card-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .custom-card-block .card-title {
        font-size: 16px;
    }

    .custom-card-block .card-subtitle {
        font-size: 13px;
    }
}

/* Color variations - you can add these as additional classes */
.custom-card-block.blue-accent {
    border-left-color: #3b82f6;
}

.custom-card-block.blue-accent .card-icon {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.custom-card-block.green-accent {
    border-left-color: #10b981;
}

.custom-card-block.green-accent .card-icon {
    background-color: #d1fae5;
    color: #047857;
}

.custom-card-block.purple-accent {
    border-left-color: #8b5cf6;
}

.custom-card-block.purple-accent .card-icon {
    background-color: #ede9fe;
    color: #7c3aed;
}

/* ==========================================================================
   LIQUID GLASS NAVIGATION MENU BUTTONS
   ========================================================================== */

.wp-block-navigation .wp-block-navigation-item {
    margin: 0 0.25rem;
    /* Spacing between buttons */
}

.wp-block-navigation .wp-block-navigation-item__content {
    /* Liquid glass effect */
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Rounded borders with thin outline */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;

    /* Padding for button feel */
    padding: 0.75rem 1.5rem !important;

    /* Typography using theme font */
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 500;

    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Remove default text decoration */
    text-decoration: none !important;

    /* Ensure proper display */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Hover state - reduce transparency */
.wp-block-navigation .wp-block-navigation-item__content:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Focus state for accessibility */
.wp-block-navigation .wp-block-navigation-item__content:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    outline: 2px solid rgba(255, 255, 255, 0.3);
    outline-offset: 2px;
}

/* Active/Current page state */
.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current_page_item .wp-block-navigation-item__content {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Vertical navigation spacing (for footer and vertical menus) */
.wp-block-navigation[data-orientation="vertical"] .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation-item:has(.wp-block-navigation-item__content[style*="vertical"]) {
    margin: 0.15rem 0;
    /* Tighter vertical spacing for stacked buttons */
}

/* Specific footer navigation spacing - tighter grouping */
.wp-site-blocks footer .wp-block-navigation .wp-block-navigation-item,
.wp-block-group footer .wp-block-navigation .wp-block-navigation-item,
.has-custom-blau-background-color .wp-block-navigation .wp-block-navigation-item {
    margin: 0.15rem 0 !important;
    /* Reduced vertical spacing in footer */
}

.wp-site-blocks footer .wp-block-navigation .wp-block-navigation-item__content,
.wp-block-group footer .wp-block-navigation .wp-block-navigation-item__content,
.has-custom-blau-background-color .wp-block-navigation .wp-block-navigation-item__content {
    margin-bottom: 0;
    display: block;
}

/* Override horizontal margin for vertical navigation */
.wp-block-navigation[style*="vertical"] .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation-item:where([style*="vertical"]) {
    margin: 0.15rem 0 !important;
}

/* Footer navigation container - reduce gap between columns */
.has-custom-blau-background-color .wp-block-navigation {
    gap: 0.25rem !important;
}

/* Reduce the flex gap in footer navigation groups */
.has-custom-blau-background-color .wp-block-group[style*="flex"] {
    gap: 2rem !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wp-block-navigation .wp-block-navigation-item {
        margin: 0.25rem 0;
    }

    .wp-block-navigation .wp-block-navigation-item__content {
        padding: 0.6rem 1.25rem !important;
        font-size: var(--wp--preset--font-size--small);
    }

    /* Extra spacing for mobile vertical navigation */
    .wp-site-blocks footer .wp-block-navigation .wp-block-navigation-item {
        margin: 0.6rem 0;
    }
}

/* Enhanced glass effect with subtle shadow */
.wp-block-navigation .wp-block-navigation-item__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

/* Subtle inner glow */
.wp-block-navigation .wp-block-navigation-item__content {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .wp-block-navigation .wp-block-navigation-item__content {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .wp-block-navigation .wp-block-navigation-item__content:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .wp-block-navigation .wp-block-navigation-item__content::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    }
}

/* ==========================================================================
   SVG WAVE GAP FIX
   ========================================================================== */

svg {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Specific fix for wave shapes and decorative SVGs */
.wp-block-group svg,
.wp-block-cover svg,
.wp-site-blocks svg {
    display: block;
    margin-bottom: -2px;
    /* Overlap to eliminate gaps */
    vertical-align: bottom;
}

/* Fix for any SVG elements that might have gaps above footer */
footer svg,
.wp-block-template-part[data-area="footer"] svg,
.wp-site-blocks footer svg {
    display: block;
    margin-top: -1px;
    margin-bottom: 0;
    vertical-align: bottom;
}

/* Ensure no spacing issues with groups containing SVGs */
.wp-block-group:has(svg) {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Fix for cover blocks with background SVGs */
.wp-block-cover .wp-block-cover__background svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

/* Additional fix for any inline SVG elements */
.wp-site-blocks svg[style*="background"],
.wp-block-group svg[style*="background"] {
    display: block;
    margin-bottom: -3px;
}

/* Prevent any unwanted margins on elements before footer */
.wp-site-blocks>*:last-of-type:not(footer),
main:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   ENHANCED NAVIGATION DROPDOWN STYLING
   ========================================================================== */

/* Ensure parent submenu item has proper positioning context */
.wp-block-navigation .wp-block-navigation-submenu {
    position: relative !important;
}

/* Move the default WordPress dropdown indicator inside the button */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item__content {
    padding-left: 2.5rem !important; /* Equal left padding to keep text centered */
    padding-right: 2.5rem !important;
    /* Make room for indicator inside */
    position: relative !important;
}

/* Position the default WordPress dropdown indicator inside the button */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-icon {
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Submenu container styling - transparent container with proper hover zones */
.wp-block-navigation .wp-block-navigation__submenu-container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.5rem !important;
    margin-top: 0.25rem !important;
    /* Reduce gap between parent and dropdown */
    overflow: visible !important;
    min-width: 200px !important;
    position: absolute !important;
    top: 100% !important;
    /* Position below parent */
    left: 0 !important;
    /* Align with left edge of parent */
    right: auto !important;
    /* Reset right positioning */
    z-index: 1000 !important;
}

/* Create invisible bridge between parent item and dropdown for continuous hover */
.wp-block-navigation .wp-block-navigation-submenu:hover .wp-block-navigation__submenu-container::before {
    content: '';
    position: absolute;
    top: -0.75rem;
    /* Bridge the gap */
    left: 0;
    right: 0;
    height: 0.75rem;
    background: transparent;
    pointer-events: auto;
    z-index: 1;
}

/* Individual submenu items - match main navigation button style */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    /* Match main navigation glass effect */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 1.5rem !important;

    /* Force dark text color for readability */
    color: #111111 !important;

    /* Match main navigation padding and typography */
    padding: 0.75rem 1.5rem !important;
    font-family: var(--wp--preset--font-family--manrope) !important;
    font-size: var(--wp--preset--font-size--large) !important;
    font-weight: 500 !important;

    /* Match main navigation transitions and effects */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    display: block !important;
    margin: 0.25rem 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Submenu item hover effects - match main navigation */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Enhanced glass effect for submenu items - match main navigation */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

/* Remove any dropdown indicators from submenu items */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu .wp-block-navigation-item__content::after {
    display: none !important;
}

/* Remove default submenu styling that might interfere */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
    margin: 0 !important;
}

/* Smooth animation for submenu appearance */
.wp-block-navigation .wp-block-navigation__submenu-container {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.15s;
    /* Small delay before hiding */
    pointer-events: none;
    visibility: hidden;
}

/* Show dropdown on hover with proper pointer events */
.wp-block-navigation .wp-block-navigation-submenu:hover .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-submenu.is-open .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container:hover {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
    /* No delay when showing */
}

/* Ensure parent submenu item stays highlighted when hovering dropdown */
.wp-block-navigation .wp-block-navigation-submenu:hover>.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container:hover~.wp-block-navigation-item__content {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode support for dropdowns - match main navigation */
@media (prefers-color-scheme: dark) {
    .wp-block-navigation .wp-block-navigation__submenu-container {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }

    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)) !important;
    }
}

/* Mobile responsive adjustments for dropdowns */
@media (max-width: 768px) {
    .wp-block-navigation .wp-block-navigation__submenu-container {
        min-width: 180px !important;
        padding: 0.4rem !important;
        left: 0 !important;
        /* Ensure left alignment on mobile */
        right: auto !important;
    }

    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding: 0.6rem 1.25rem !important;
        font-size: var(--wp--preset--font-size--small) !important;
    }

    /* Adjust dropdown indicator positioning for mobile */
    .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item__content {
        padding-right: 2rem !important;
        /* Slightly less padding on mobile */
    }

    .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-icon {
        right: 0.8rem !important;
        /* Closer to edge on mobile */
    }
}

/* ==========================================================================
   REDUCE GAP BETWEEN HEADER AND CONTENT
   ========================================================================== */

/* Target the first spacer block in page templates */
main.wp-block-group>.wp-block-group>.wp-block-spacer:first-child {
    height: 1rem !important;
    min-height: 1rem !important;
}

/* Reduce spacing for all main content areas after header */
.wp-site-blocks main {
    padding-top: 0 !important;
}

/* Ensure the first spacer after header doesn't create excessive gap */
header+main .wp-block-spacer:first-of-type,
main>.wp-block-group>.wp-block-spacer:first-of-type {
    height: 2rem !important;
}

/* For pages specifically, reduce top padding */
body.page main.wp-block-group {
    margin-top: -2rem !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    main.wp-block-group>.wp-block-group>.wp-block-spacer:first-child {
        height: 1.5rem !important;
        min-height: 1.5rem !important;
    }

    body.page main.wp-block-group {
        margin-top: -1rem !important;
    }
}

/* ==========================================================================
   MOBILE NAVIGATION OVERLAY MENU
   ========================================================================== */

/* Target only the mobile overlay container when menu is open */
.wp-block-navigation__responsive-container.is-menu-open {
    /* Glassmorphism effect */
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Navigation items in mobile overlay - match desktop liquid glass style */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    /* Match desktop liquid glass effect */
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    /* Rounded pill shape - same as desktop */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 1.5rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1) !important;

    /* Clean text styling */
    padding: 0.75rem 1.25rem !important;
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    display: inline-block !important;
    width: auto !important;
    position: relative !important;

    /* Subtle hover transition */
    transition: all 0.2s ease !important;
}

/* Remove the ::before pseudo-element gradient */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
    display: none !important;
}

/* Hover state for mobile menu items - match desktop */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    transform: none !important;
}

/* Navigation items in mobile overlay - stack vertically with gap */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    margin: 0.25rem 0 !important;
    width: auto !important;
    display: block !important;
}

/* Remove separator lines - not needed with rounded items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(:last-child) {
    border-bottom: none !important;
}

/* Parent items with submenus - PILL STYLING ON CONTAINER so arrow is inside */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    /* Apply pill styling to parent container */
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 1.5rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Reset link inside submenu parent - it inherits pill from parent */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu>.wp-block-navigation-item__content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding-right: 2.5rem !important;
}

/* Arrow INSIDE the pill - fixed at top, aligned with parent link */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu>.wp-block-navigation__submenu-icon {
    display: flex !important;
    position: absolute !important;
    /* Position inside the pill - aligned with link text */
    right: 0.35rem !important;
    top: 0.35rem !important;
    /* No transform - use fixed positioning */
    transform: none !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
    z-index: 10 !important;
    transition: background-color 0.2s ease !important;
}

/* Arrow hover effect */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu>.wp-block-navigation__submenu-icon:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* Arrow icon styling */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu>.wp-block-navigation__submenu-icon svg {
    width: 1rem !important;
    height: 1rem !important;
    transition: transform 0.3s ease !important;
}

/* Rotate arrow when submenu is open */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.submenu-open>.wp-block-navigation__submenu-icon svg {
    transform: rotate(180deg) !important;
}

/* Hover effect on arrow button */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu>.wp-block-navigation__submenu-icon:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Sub-menu container - hidden by default, collapsible */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    background: rgba(0, 0, 0, 0.03) !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: auto !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    /* Collapsible animation */
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease !important;
}

/* Show submenu when parent has .submenu-open class */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.submenu-open>.wp-block-navigation__submenu-container {
    max-height: 500px !important;
    opacity: 1 !important;
    padding: 0.5rem 0 !important;
}

/* Indent sub-menu items for visual hierarchy */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding-left: 2rem !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Sub-menu items separator */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Hide nested submenu arrows - only show on top level */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
    display: none !important;
}

/* Center the navigation content - MORE TOP PADDING for close button */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 4rem 1.5rem 2rem 1.5rem !important;
    max-width: 100% !important;
}

/* Navigation list container */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: auto !important;
    align-items: center !important;
}

/* Close button styling */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 100 !important;
}