/*
 Theme Name: Twenty Twenty-Five Child
 Theme URI: https://bauman.is
 Description: A child theme for the Twenty Twenty-Five theme.
 Author: Karl
 Author URI: https://bauman.is
 Template: twentytwentyfive
 Version: 1.1
*/

/* Import Staatliches font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');


/* Ensure smooth scrolling behavior */
html {
    scroll-behavior: smooth;
}

/* Target the custom class on mobile screens */
@media (max-width: 768px) {
    /* Ensure smooth scrolling on mobile */
    html {
        scroll-behavior: smooth;
    }

    /* Float the entire navigation to the right */
    .top-navigation-custom-css {
        display: flex;            /* Ensure the navigation uses flexbox */
        justify-content: flex-end; /* Align items to the right */
        width: 100%;              /* Ensure it takes full width */
    }

    /* Adjust submenu behavior to align with the parent on mobile */
    .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
        position: absolute;
        left: 0;
        right: 0;               /* Prevent overflow off the screen */
        width: 100%;             /* Make sure the submenu takes up full width */
        max-width: 80vw;        /* Ensure the submenu doesn't overflow */
        transform: translateX(0); /* Reset transform to avoid shifting */
    }

    /* Optionally adjust the padding or margin of the parent menu items */
    .wp-block-navigation-item {
        margin-right: 0; /* Remove any extra margin that might prevent alignment */
    }

    /* Add some padding to the top of the main content area to account for scroll offset */
    .wp-site-blocks > main,
    .site-main,
    main {
        scroll-margin-top: 20px;
    }
}

/* Improve mobile navigation experience */
@media (max-width: 768px) {
    /* Ensure navigation links are easily tappable */
    .wp-block-navigation a,
    .wp-block-navigation-item a {
        min-height: 44px;
        display: flex;
        align-items: center;
        touch-action: manipulation;
    }
}

.desktop-horizontal-menu.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container, .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container, .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container, .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container {
  left: 0;
}

/** GROK */

/* Intelligent submenu positioning - open right with fallback to left */
@media (min-width: 782px) {
    /* Default: open nested submenus to the right */
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        left: 100%;
        right: auto;
        top: -1px;
    }

    /* If submenu would overflow viewport on the right, open to the left */
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        transform: translateX(0);
    }

    /* Detect if submenu overflows and position to the left instead */
    @supports (anchor-name: --submenu) {
        .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
            position: absolute;
            left: auto;
            right: 100%;
            anchor-name: --submenu;
        }
    }

    /* Modern approach using container queries when available */
    @container (max-width: 400px) {
        .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
            left: auto;
            right: 100%;
        }
    }
}

/* Enhanced submenu positioning with JavaScript detection fallback */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    /* Ensure submenu doesn't go off-screen */
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
}

/* Smart positioning: check if submenu fits on the right, otherwise use left */
@media (min-width: 782px) {
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-submenu {
        position: relative;
    }

    /* Default positioning - try right first */
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        left: 100%;
        right: auto;
        position: absolute;
        top: -1px;
    }

    /* For items that might overflow, use a class-based approach */
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-submenu:last-child .wp-block-navigation__submenu-container,
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-submenu:nth-last-child(-n+2) .wp-block-navigation__submenu-container {
        left: auto;
        right: 100%;
    }

    /* Use CSS logical properties for better RTL support */
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        inset-inline-start: 100%;
        inset-inline-end: auto;
    }

    /* Right-to-left fallback for items near the viewport edge */
    @supports (width: max-content) {
        .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
            width: max-content;
            max-width: min(300px, calc(100vw - var(--wp-admin--admin-bar--height, 0px) - 40px));
        }
    }
}

/* Specific fix for overflowing submenus using viewport units */
@media (min-width: 782px) {
    /* For viewports where right positioning would cause overflow */
    @media (max-width: 1200px) {
        .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
            left: auto;
            right: 100%;
            inset-inline-start: auto;
            inset-inline-end: 100%;
        }
    }
}

/* Prevent horizontal scrolling from submenus */
.wp-block-navigation .wp-block-navigation__submenu-container {
    max-width: 400px;
    min-width: 220px !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Improve submenu text readability */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.75em 1em;
}

/* Ensure proper z-index stacking for nested submenus */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    z-index: 1000;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    z-index: 1001;
}

/* JavaScript-enhanced positioning classes */
.smart-submenu-positioning .wp-block-navigation__submenu-container.open-left {
    left: auto !important;
    right: 100% !important;
}

.smart-submenu-positioning .wp-block-navigation__submenu-container.open-right {
    left: 100% !important;
    right: auto !important;
}

/* Smooth transitions for submenu positioning */
@media (min-width: 782px) {
    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        transition: left 0.2s ease, right 0.2s ease;
    }
}

/* Improved submenu visibility and accessibility */
.wp-block-navigation .wp-block-navigation__submenu-container {
    /* Ensure adequate contrast and readability */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

/* Better hover states for nested navigation */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Fallback for no-JavaScript scenarios - detect viewport edge cases with pure CSS */
@media (min-width: 782px) and (max-width: 1024px) {
    /* On smaller screens, default to left-opening for nested submenus */
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        left: auto !important;
        right: 100% !important;
    }
}

/* For very wide screens, allow right-opening */
@media (min-width: 1400px) {
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        left: 100% !important;
        right: auto !important;
    }
}

/* Mobile-specific submenu adjustments */
@media (max-width: 781px) {
    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        position: static !important;
        left: auto !important;
        right: auto !important;
        box-shadow: none;
        border-radius: 0;
    }
}

/* Force Staatliches on headings with specific letter spacing */
h1, h2, h3, h4, h5, h6, .wp-block-post-title {
    font-family: 'Staatliches', sans-serif !important;
    letter-spacing: 2px !important;
}

/* Force Staatliches on navigation menu items with specific letter spacing */
.wp-block-navigation__responsive-container .wp-block-navigation-item a {
    font-family: 'Staatliches', sans-serif !important;
    letter-spacing: 1.5px !important;
}

/* Retain existing image and group effects */
.front-page-disciplin-img > a {
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.front-page-disciplin-img > a:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.7), 0 0 8px rgba(200, 16, 46, 0.5);
}

.front-page-disciplin-img img {
    transition: filter 0.3s ease, brightness 0.3s ease;
}

.front-page-disciplin-img img:hover {
    filter: brightness(1.2);
}

.wp-block-navigation__responsive-container .wp-block-navigation-item a {
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

.wp-block-navigation__responsive-container .wp-block-navigation-item a:hover {
    color: #c8102e;
    border-bottom: 2px solid #c8102e;
}

/* Simple logo hover effect */
.custom-logo {
    transition: width 0.3s ease, height 0.3s ease;
}

.custom-logo:hover {
    width: 144px !important;
    height: auto !important;
}

ul > li > ul > li button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
  min-width: 150px;
}


/* --- Submenu side decision (requirement): >1240px open left, otherwise open right --- */
/* Keep mobile (<=781px) behavior unchanged to avoid conflicts with responsive menu */
@media (min-width: 1241px) {
  /* Force nested submenus to open to the left of their parent */
  .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    left: auto !important;
    right: 100% !important;
    /* Also set logical properties to ensure consistency */
    inset-inline-start: auto !important;
    inset-inline-end: 100% !important;
  }
}

@media (min-width: 782px) and (max-width: 1240px) {
  /* Force nested submenus to open to the right of their parent */
  .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    left: 100% !important;
    right: auto !important;
    inset-inline-start: 100% !important;
    inset-inline-end: auto !important;
  }
}