/*                                 - Styles for photo gallery pages -
                                     ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
*/
/* ------------------------------------------------------------------------------------------------ variables -- */
:root {
    --left: 1rem ;
    --picWidth: 300px ;
    --altDark: var(--altLight) ;
}
/* ------------------------------------------------------- Navigation in general -- */
a, a:any-link, nav:not(#menu) a::before {
    color: hsl(var(--hue), 55%, 50%) ;
}
/* ============================================================================================ Document-wide == */
html, html.Gallery { background-color: var(--nearBlack) ; }
body, body.Gallery {
    padding: 0 ; 
    color: var(--offwhite, white) ; background: var(--nearBlack, black) url("../images/tb00bw.gif") repeat-y left top ;
}
    body > header :is(h1, h2) { color: var(--light) ; }

      body > header :is(h1, h2) cite { color: var(--brightMid-light) ; }
      cite { color: var(--light) ; }

h6 {
    margin: 1.5ex 0 -0.3ex 0 ;
    color: var(--mid-dark) ; letter-spacing: 0.1ch ; font-size: 102% ;
}

i i { color: var(--brightMid-light) ; }

/* ---------------------------------- Navigation in general -- */
a:hover { text-shadow: 0.1ex 0 var(--mid-dark), -0.1ex 0 var(--mid-dark), 0 0.1ch var(--mid-dark), 0 -0.1ch var(--mid-dark) ; }

/* ==================================================================================== Divisions == */
#home, a#home {  border-color: var(--nearBlack, black) ; background: var(--nearBlack, black) ; }

header { }
    header h1, #pageTop h1 { border-bottom: 2px solid var(--midtone) ; }
    header [data-target~="self"]:not([href="#pageTop"]) { color: var(--mid-light) ; text-shadow: none ; }
    header svg { display: none ; }

nav#menu { color: inherit ; background: transparent ; } /* More specific, so colour overrides other sheets */
    nav#menu li::before { color: var(--midtone) ; }
      #menu a:link, #menu a:visited { color: var(--greyOut) ; }
      #menu li :is([data-target~="self"], [data-target~="self"]:hover, a:hover, a[rel="author"]:hover) { 
          color: var(--greyOut) ; 
      }
      #menu a.Inactive, #menu a.Inactive:hover { color: transparent ; }

      nav#menu a[data-target~="self"], nav#menu a[data-target~="self"]:hover, nav#menu a[data-target~="self"]:visited {
          color: var(--light) ;
      }

      body > h1 { margin: 0 0 0 var(--main-left) ; padding: 2rem 0 0 var(--left) ; color: var(--light) ; }

/* ---------------------------------- Gallery as menu -- */
    #menu .Long  { display: none ; }
    article.Gallery :is(#slideshow, .Short)  { display: none ; }
/* -------------------------------------------------------------------------------- Content areas -- */
article, article ul {
    display: flex ; justify-content: space-between ; flex-wrap: wrap ;
    margin: var(--main-top) auto 0 auto ;
}
  .FlexBreak { /* Force a new row */
      flex-basis: 100% ; max-width: none ; height: 0 ; padding: 0 ; border: none ;
  } 
  article ul { margin-top: 0 ; }
    article h3:first-child { display: none ; }
        article ul > li::before { content: none ; }
    figure, article li {
        flex: 1 1 21% ;  max-width: var(--picWidth) ; min-width: 30ch ; /* Allow space for the caption text */
        margin: 0 auto 0 auto ; padding: 2rem 1rem 0.5rem var(--left) ; 
        text-indent: 0 ; text-align: center ;
    }
        figure img, li img { float: right ; width: 98% ; margin: 0 ; border: 1px solid var(--dark) ; }
        figure img[src$=".png"] { border: none ; }
        svg { fill: white ; }
          li a img { float: none ; }
        figcaption { margin: 0.5ex 0 0 0 ; color: var(--mid-light) ; text-align: right ; font-size: 80% ; }
            figcaption p { float: right ; text-align: left ; font-size: 0.9rem ; }
            figcaption cite { 
                float: right ; color: var(--light) ; font-size: 100% ; font-family: Georgia, "Minion Web", serif ; 
            }
              figcaption p cite { float: none ; }
            figcaption span { display: inline-block ; text-align: left ; }
                figcaption span cite { float: none ; }
            figcaption small { clear: right ; float: right ; }
            figcaption .Blurb { clear: right ; display: block ; padding: 0.8ex 0 0 0 ; text-align: center ; }
              figcaption .Blurb::first-letter { text-transform: uppercase ; }
      article a:link, article a:visited, article a:hover, a[data-target~="self"]:not([href="#pageTop"]) {
		  display: inline-block ; color: var(--light) ; font-size: 1.1rem ; line-height: 120% ; border: none ;
      }
        article a::first-letter { text-transform: uppercase ; }
      article a:hover { color: white ; }
          .Blurb a, .Blurb a:link, .Blurb a:visited {
			  padding: 0 0 0.3ex 0 ;
			  color: var(--brightLight) ; font-size: 0.9rem ; text-decoration: underline ; text-decoration-color: var(--midtone) ;
          }
          .Blurb a:hover { text-decoration-color: white ; }

/* ------------------------------------------------------------------------------------ Page foot -- */
    a[href="#pageTop"]:empty { border-bottom: 2px solid var(--midtone) ; }

footer { color: var(--midtone) ; border-top-color: var(--mid-dark) ; }
    footer a, footer a:any-link { font-size: 105% ; border-bottom: 2px dotted var(--brightMid-dark) ; }

/* ================================================================================================= */