/*              Styles to convert the menu to the top - HTML5 & CSS3                              topMenu53.css
                          ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
*/
/* ------------------------------------------------------------------------------------------------ Variables -- */
/*            --menu-width  is to be set locally to suit the local menu           */
/*            --menu-level  is to be set locally to suit the menu depth           */
:root {
    --main-top: 0 ;  
    --main-left: 52px ;
    --body-width: calc(100vw - 2*var(--main-right)) ;
    --main-max-width: calc(var(--body-width) - var(--main-sides)) ;
    --addHeight: clamp(0ex, calc(var(--menu-width, 110ch) + var(--main-sides) - 100vw), 2.5ex) ; /* responsive */
    --menu-level: 1 ; /* adjusted when adding levels */
}
/* ============================================================================================ Document-wide == */
body > h3 { padding: 1rem 0 2rem calc(var(--main-left) + 10%) ; }

/* ================================================================================================= Divisions == */
/* ____________________________________________________________________________________ Page headings */
/* -------------------------------- Top line -- */
body>header { padding-bottom: 0 ; }
    header h2:empty { display: none ; }

/* ----------------------------------------------------------------------------------------------------- Menu -- */
#menu, .Menu {
    min-height: calc(var(--menu-level)*3em) ;
    padding: 0 1ch 1rem var(--main-left) ; 
    text-align: right ; letter-spacing: 0.1ch ; line-height: 135% ;
}
#menu { max-width: calc(100vw - var(--main-sides) - 1ch) ; }
    #menu :is(:focus, a:hover) { transform-origin: initial ; } /* To prevent collapse on hover (fails) */
        #menu .Long { display: none ; }
  nav ul {
      width: 100% ; margin: 0 ; font-size: 130% ; text-indent: 0 ;
  }
    nav li { display: inline-block ; margin: 0.4ex 0 0 calc(1ch + 3vw) ; white-space: nowrap ; }
    nav li:not(.Theory) + .Theory, nav .Theory + li:not(.Theory), nav li:last-child {
        margin-top: 0.4ex ; /* Readjust tbmenu */
    }
    nav li:first-child { margin-left: 0 ; padding-left: 0 ; }
      nav li::before { content: none ; }
      nav li::first-letter { text-transform: uppercase ; }
      nav ul .Theory, nav #exit  { display: none ; }
        nav a[data-target~="self"], nav a[data-target~="self"]:hover, nav a[data-target~="self"]:visited {
            color: var(--brightDark) ; font-size: 92% ; vertical-align: 7% ;
        }
        nav a[data-target~="self"]:not(:empty)::before { content: '[' ; }
        nav a[data-target~="self"]:not(:empty)::after { content: ']' ; }

        nav ul ul {
            position: absolute ; top: calc(7.5ex + var(--addHeight)) ; right: 10ex ; font-size: 105% ;
            width: calc(100% - var(--main-left) - 10ex - var(--main-right)) ; white-space: normal ;  
        }
          nav ul ul li { margin: 0 0 1ex calc(1ex + 2vw) ; }
            nav ul ul :is(a:link, a:visited) { color: hsl(var(--hue), 100%, 93%) ; }
          nav ul ul ul { top: 1.9rem ; right: 6ex ; width: calc(100% - 6ex) ; }
            nav ul ul ul li { margin: 0 0 1ex calc(1ex + 1.5vw) ; }

/* --------------------------------------------------------------------------------- Content areas -- */
/* Problems caused by history:
   #pageHead for poster pages;
   #pageBody unfortunately because of common53.css;
   article#pageBody unfortunately because of hb00053.css */
main, body article, article#pageBody, article.Gallery, #pageBody, #pageHead {
    max-width: var(--main-max-width) ; 
    padding: var(--main-top, 0.5rem) 0 0 var(--main-left) ;
    margin: 0 auto 0 auto ;
}

/* ------------------------------------------------------------------------------------- Endings -- */
aside.Linklist { 
    width: calc(var(--body-width) - var(--main-sides) - var(--left)) ; max-width: 95vw ; 
}
aside.Linklist, [rel="prev"]:empty { 
    margin-left: var(--main-left, 12%) ; padding: 0 0 0 var(--left) ; 
}
  aside.Linklist ul { display: flex ; justify-content: left ; flex-wrap: wrap ; padding: 0 0 0 2ch ; }
    ::marker, aside li a:any-link { color: hsl(var(--hue), 60%, 65%) ; }
    aside li { padding: 0 5ch 3ex 0 ; }

    [href="#pageTop"]:empty, [href="#pageTop"]:empty:hover { bottom: 0 ; }

/* _____________________________________________________________________________________________________________ */