/*-------------------------------------------------------------
-- file    : menu.css
-- purpose : Extra style sheet for homepage Piet Lammertse
-- note    : Main style sheet is text.css.
---------------------------------------------------------------
-- history :
--   2026-07-16 PL new, pattern by Mistral,
--              improvements by Claude,
--              then small mods by PL.
------------------------------------------------------------- */

/* Reset and base styles */

* {
    margin  : 0;
    padding : 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* ---------------------------------------------------------- */
/* Top-level horizontal menu :  "dropdown-menu"               */
/* This is applied to a <nav>                                 */

.dropdown-menu {
    background : #000070;       /* dark blue, from #333; */
    width      : min( 832px, 100%);
}

.dropdown-menu > ul {          /* ul inside a nav */
    list-style : none;
    display    : flex;
    justify-content: flex-start;
}

.dropdown-menu > ul > li {      /* li inside ul inside nav */
    position   : relative;
}

.dropdown-menu > ul > li > a {   /* a inside li inside ... */
    display    : block;
    padding    : 10px 15px;          /* from 15px vert, 20px hor */
    color      : white;
    font-size  : 17px;            /* added, PL */
    text-decoration: none;
    transition : background 0.3s;
}

.dropdown-menu > ul > li > a:hover {   /* red on hover, PL */
    background : #E90000;        /* red, from #555 */
}

/* ---------------------------------------------------------- */
/* First-level dropdown :  "dropdown"                         */
/* This is applied to a <li>  (inside a <nav> )               */
.dropdown {
    position   : absolute;
    left       : 0;
    top        : 100%;
    background   : #F0F0F0;   /* light gray, from dark #444; */
    width      : max-content;
    min-width  : 90px;
    opacity    : 0;
    visibility : hidden;
    transition : opacity 0.3s, visibility 0.3s;
    z-index    : 1;
    list-style : none;    
    box-shadow : 8px 8px 8px 0 rgba(0,0,0,0.2);
}

.dropdown-menu > ul > li:hover > .dropdown {
    opacity    : 1;
    visibility : visible;
}

.dropdown li {
    position   : relative;
}

.dropdown li a {
    display     : block;
    padding    : 8px 15px;        /* vert, hor; lines closer, 10px to 8px */
    color      : #000030;           /*  from white;  */
    text-decoration: none;
    transition : background 0.3s;
    
    outline-style: solid;     /* added */
    outline-width: thin;      /* added */
    outline-color: #E0E0E0;   /* added */
}

.dropdown li a:hover {
    background : #E90000;      /* red, from #966;           */
    color      : white;        /*  new, for red background  */
}

/* ---------------------------------------------------------- */
/* Second-level dropdown (submenu)                            */
.dropdown-submenu {
    position   : absolute;
    left       : 100%;
    top        : 8px;         /* dropped a little from 0, PL */
    background : #F0F0F0; /*  from #555;   */
    width      : max-content;
    min-width  : 90px;
    opacity    : 0;
    visibility : hidden;
    transition : opacity 0.3s, visibility 0.3s;
    z-index    : 2;
    list-style : none;
   /* added, PL :  */    
    box-shadow : 8px 8px 8px 0 rgba(0,0,0,0.2);
   /* delay closing by 400 milliseconds, for easier
      diagonal access to dropdown items            */
   transition-delay: 0.4s; 
}

/* dropdown shows dropdown-submenu on hover */
.dropdown li:hover > .dropdown-submenu {
    opacity    : 1;
    visibility : visible;
}

/* ---------------------------------------------------------- */
/* Hamburger toggle button — hidden on desktop by default     */
.nav-toggle {
    display    : none;
    flex-direction   : column;
    justify-content  : center;
    gap        : 5px; /* CSSlint : unknown property */
    width      : 44px;
    height     : 44px;
    padding    :  8px;
    margin     :  6px;
    background : transparent;
    border     : none;
    cursor     : pointer;
/*    aria-expanded : false;   */
    aria-label : "Toggle navigation menu";
}

/* create the three bars each stripe by a <span> </span>       */
.nav-toggle span {
    display    : block;
    height     : 3px;
    width      : 100%;
    background : white;
    border-radius : 2px;
    transition : transform 0.3s, opacity 0.3s;
}

/* turn the hamburger into an "X" when open */
.nav-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ---------------------------------------------------------- */
/* Mobile layout                                              */
@media (min-width: 769px) {
	.mobile-only {
	   display: none;
	}
}

@media (max-width: 768px) {

    .nav-toggle {
        display: flex;
    }

    /* stack the top-level menu vertically and hide until toggled */
    .dropdown-menu > ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .dropdown-menu > ul.open {
        display: flex;
    }

    .dropdown-menu > ul > li {
        width: 100%;
    }

    .dropdown-menu > ul > li > a {
        padding: 14px 20px;      /* bigger tap target */
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* all dropdown levels become inline, expandable panels        */
    /* instead of absolutely-positioned hover flyouts               */
    .dropdown,
      .dropdown-submenu {
        position: static;
        width: 100%;
        max-height: 0;
        opacity: 1;
        visibility: visible;
        overflow: hidden;
        box-shadow: none;
        transition: max-height 0.3s ease;
    }

    /* open state, toggled via JS (tap) instead of :hover */
    .dropdown-menu > ul > li.dropdown-parent.open > .dropdown,
      .dropdown-parent.open > .dropdown-submenu {
        max-height: 1000px;
    }

    .dropdown li a,
      .dropdown-submenu li a {
        padding: 12px 15px 12px 30px;   /* indent nested levels */
        outline: none;
        border-top: 1px solid #d0d0d0;
    }

    .dropdown-submenu li a {
        padding-left: 50px;             /* indent third level further  */
    }
    
    /* PL successful fix for level 4 extra indent */
    .dropdown-submenu li li a {
        padding-left: 75px;             /* indent level 4 further */
    }
}