/**
 * @file
 * EXTENSION
 *
 * @see W3c.github.io/html/
 * @see W3c.github.io/html/dom.html#kinds-of-content
 *
 *
 * @todo
 * - All elements (block, etc.) outside <p> which need a shadow
 * - All elements allowed inside <p> which ought to get wrapped
 * - Webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824
 *
 **/





body
{
 background: var(--background-var);
 padding:    var(--body-padding);
 overflow:   auto;
}

body.homepage
{
 overflow: hidden;
}


header,nav,main,section,article,aside,footer
{
 font: inherit;
}


img#logosignet
{
 width:         var(--logosignet-width);
 margin:        var(--logosignet-margin);
 float:         left;
}


body:not(.homepage) > header > p,
body:not(.homepage) > header > p a,
body:not(.homepage) > header > p a:link,
body:not(.homepage) > header > p a:visited,
body:not(.homepage) > header > p a:hover,
body:not(.homepage) > header > p a:active
{
 font-size:     1.2rem;
 color:         var(--h-color);
 text-shadow:   var(--h-text-shadow);
 margin-left:   0.19em;
}



h1,h2,h3,h4,h5,h6
{
 color:         var(--h-color);
 text-shadow:   var(--h-text-shadow);
 line-height:   var(--h-line-height);
}

h3,h4,h5,h6
{
 color: hsla(0,0%,0%, 1);
}

h1 a,         h2 a,         h3 a,         h4 a,         h5 a,         h6 a,
h1 a:link,    h2 a:link,    h3 a:link,    h4 a:link,    h5 a:link,    h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
h1 a:hover,   h2 a:hover,   h3 a:hover,   h4 a:hover,   h5 a:hover,   h6 a:hover,
h1 a:active,  h2 a:active,  h3 a:active,  h4 a:active,  h5 a:active,  h6 a:active
{
 color: var(--h-color);
 text-decoration: none;
}

body.homepage * h1, body.homepage * h2, body.homepage * h3, body.homepage * h4, body.homepage * h5, body.homepage * h6
{
 color:         var(--h-hp-color);
 text-shadow:   var(--h-hp-text-shadow);
 line-height:   var(--h-hp-line-height);
}

body.homepage * h1 a,         body.homepage * h2 a,         body.homepage * h3 a,         body.homepage * h4 a,         body.homepage * h5 a,         body.homepage * h6 a,
body.homepage * h1 a:link,    body.homepage * h2 a:link,    body.homepage * h3 a:link,    body.homepage * h4 a:link,    body.homepage * h5 a:link,    body.homepage * h6 a:link,
body.homepage * h1 a:visited, body.homepage * h2 a:visited, body.homepage * h3 a:visited, body.homepage * h4 a:visited, body.homepage * h5 a:visited, body.homepage * h6 a:visited,
body.homepage * h1 a:hover,   body.homepage * h2 a:hover,   body.homepage * h3 a:hover,   body.homepage * h4 a:hover,   body.homepage * h5 a:hover,   body.homepage * h6 a:hover,
body.homepage * h1 a:active,  body.homepage * h2 a:active,  body.homepage * h3 a:active,  body.homepage * h4 a:active,  body.homepage * h5 a:active,  body.homepage * h6 a:active
{
 color: var(--h-hp-color);
 text-decoration: none;
}


h1
{
 font-size:      3.5rem;
}

body.homepage * h1
{
 font-size:      5.2rem;
}


h2
{
 font-size:      2rem;
}

body.homepage * h2
{
 font-size:      var(--h2-hp-font-size);
 letter-spacing: var(--h2-hp-letter-spacing);
 word-spacing:   var(--h2-hp-word-spacing);
 margin:         var(--h2-hp-margin);
 padding:        var(--h2-hp-padding);
}


h3
{
 font-size: 1.5rem;
 padding:   0.3em 0.0em 0.1em 0.0em;
}

body.homepage * h3
{
 font-size: 1.8rem;
 padding:   0.1em 0.0em 0.1em 0.1em;
}

body.homepage aside#CtlResponseAside section#SectionRecentContent h3
{
 padding:   0.1em 0.0em 0.1em 0.0em;
 margin-left: -0.05em;
}


h4
{
 font-size: 1.3rem;
 padding:   0.3em 0.0em 0.1em 0.0em;
}

body.homepage * h4
{
 font-size: 1.3rem;
 padding:   0.1em 0.0em 0.1em 0.1em;
}


h5, h6
{
 font-size: 1.1rem;
 padding:   0.3em 0.0em 0.1em 0.0em;
}

body.homepage * h5, body.homepage * h6
{
 font-size: 1.1rem;
 padding:   0.1em 0.0em 0.1em 0.1em;
}



/* Let all sub-elements just inherit - do not list them explicitely */
article, nav
{
 font-size: 1rem;
 color: hsla(0,100%,100%, 1);
}



body.homepage header nav#NavHp
{
 position: relative;
 top:      1vh;
 left:     0.5vw;
 white-space: nowrap;
}

nav#NavHp > ul
{
 list-style-type: none;
}


body.other nav
{
 display: none;
}


nav#Breadcrumb,
nav#ContentLevel2,
nav#CtlResponse ul li
{
 background: linear-gradient(0deg, hsla(210,40%,40%, 0.4), hsla(210,40%,10%, 0.8) 30%);
 background-blend-mode: normal;
 transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
 transition-delay: 0s;
 box-sizing: content-box;
 padding: 0.4vh 0.4vw 0.4vh 0.4vw;
}

nav#Breadcrumb
{
 background: linear-gradient(0deg, hsla(192,100%,100%, 0.1), hsla(192,40%,40%, 0.2) 30%);
}


nav#Breadcrumb
{
 position: fixed;
 top:      -0.28rem;
 left:      5.00vw;
 border:        1px dotted grey;
 border-radius: 0.4rem;
 font-size:     0.7rem;
}

nav#Breadcrumb:hover
{
 top:  -0.15rem;
 left:  4.9vw; 
}

nav#Breadcrumb ul
{
 margin: 0em 0.2em 0em 0em;
}

nav#Breadcrumb ul li
{
 display: inline-block;
 margin: 0em 0em 0em 0em;
}

nav#Breadcrumb ul li::before
{
 content: '\003E';
 color: #ccc;
}



nav#ContentLevel2
{
 position: fixed;
 bottom:  -0.2rem;
 left:     43vw;
 width:   fit-content;  /* max-content, min-content, fit-content */
 height:  auto;
 border:  solid 2px;
 border-color: var(--article-border-color);
 border-radius: 80% 20% / 10% 30%;
 transform: skew(1deg,-1deg);
}

nav#ContentLevel2:hover
{
 bottom: 0.5rem;
}

nav#ContentLevel2 ul,
nav#Breadcrumb ul
{
 list-style-type: none;
}

nav#ContentLevel2 > ul > li
{
 display: inline;
}

nav#ContentLevel2 > ul > li > a
{
 padding: 0.5em 0.5em 0.5em 0.1em;
}


nav#CtlResponse
{
 position: fixed;
 bottom:   3rem;
 left:     45vw;
}

nav#CtlResponse * li
{
 display: block;
 width:   fit-content;
 white-space: nowrap;
 max-height: 1em;
 border: solid 0rem;
 border-radius: 80% 20% / 10% 30%;
 margin-bottom: 0.3em;
 transform: skew(-2deg,-2deg);
}

nav#CtlResponse * li > ul
{
 position: fixed;
 bottom: 2rem;
 right: 1vw;
 width: 0rem;
 border: solid 0rem;
}

nav#CtlResponse * li > ul > li
{
 position: relative;
 left:     1.5vw;
}



main
{
 margin-top: 4vh;
 width: 60%;
}



article.overlay
{
 background:            var(--article-background);
 background-blend-mode: normal;
 border:                var(--article-border);
 border-color:          var(--article-border-color);
 border-radius:         80% 20% / 10% 30%;
 transition:            background ease-out;
}

article.overlay:hover
{
 background:            var(--article-background-hover);
 background-blend-mode: normal;
}

body.homepage * article.overlay
{
 background:            var(--article-hp-background);
 background-blend-mode: normal;
 border:                var(--article-hp-border);
 border-color:          var(--article-hp-border-color);
 border-radius:         85% 20% / 10% 15%;
 transition:            background ease-out;
}

body.homepage * article.overlay:hover
{
 background:            var(--article-hp-background-hover);
 background-blend-mode: normal;
}

article h2 + time
{
 color: hsla(0, 0%, 33%, 0.7);
}

article h2 + time::after
{
 content: '';
 clear:   both;
 display: table;
 padding-bottom: 1vh;
}

article h3::before, article h4::before, article h5::before, article h6::before
{
 content: '';
 clear:   both;
 display: table;
}


/*
//----------------------------------------------------------------------
// SHADOW ELEMENTS
//----------------------------------------------------------------------
// @see W3c.github.io/html/dom.html#kinds-of-content
//
// @todo ALL elements (block, etc.) outside <p> which need a shadow
//======================================================================
*/

article p, article ul, article ol,
article figure, article table,
article footer,
article audio, article canvas, article iframe, article img, article picture, article video,
article form, article input, article select, article textarea,
article pre, article blockquote,
article details,   /* article summary */
article address
{
 background:    hsla(0,0%,10%, 0.6);
 color:         #fff;
 border-style:  hidden;
 border-radius: 0.4rem;
 padding:       0.35vh 0.3vw 0.35vh 0.3vw;
 box-sizing:    border-box;
}

/* body [typeof^=schema:Intangible] */
article p > time
{
 color: #aaaaaa;
}

article p > time
{
 content: '';
 clear:   both;
 display: table;
 margin-top: 1vh;
}

article p > time::after
{
 content: '';
 clear:   both;
 display: table;
}

article * details
{
 background: transparent;
}

article img
{
 margin-top:    0.3vh;
}

article form, article input, article select, article textarea
{
 width: 100%;
}

article pre
{
  display: block;
  white-space: pre;
  overflow: auto;
}

article ul
{
 padding-left: 0vw;
}

article ul li
{
 margin-left: 0.2em;
}

article li > ul
{
 /* Due to 'float' not working when floated next to multimedia */
 /* Javascript calling */
 margin-left: 0.4em;
}

/* CSS4: parent selector $tag/$el not working yet */
/*
$li > ul
{
 list-style-type: none;
}
*/


article table
{
 width: 100%;
}

article > :last-child:not(footer)
{
 padding-bottom: 3vh;
}

article > footer
{
 padding-top: 3vh;
 padding-bottom: 3vh;
}

article > footer p
{
 background: none;
}

article > footer > p.tagging > span.tags
{
 border-top-style: dotted;
 border-top-color: #fff;
}

article > footer::after
{
 content: '';
 clear:   both;
 display: table;
}

body.directory ul#contentlist-dir
{
 list-style-image: url('/Common/Graphics/FatcowIcons/16x16/calendar.png');
}

body.directory ul#contentlist-dir li::before
{
 content: '';
 margin-left: 0.2rem;
}


/*
//----------------------------------------------------------------------
// <P> CONTENT MODEL
//----------------------------------------------------------------------
// @see W3c.github.io/html/dom.html#kinds-of-content
// @see W3c.github.io/html/grouping-content.html#the-p-element
// @see W3c.github.io/html/dom.html#phrasing-content
//
// @todo ALL elements allowed inside <p> which ought to get WRAPPED
//======================================================================
*/

article > p > audio,
article > p > canvas,
article > p > iframe,
article > p > img,
article > p > picture,
article > p > video
{
 float: left;
 margin-right: 1vw;
 shape-outside: initial;
 width: calc(50%);
 border: 0rem;
}

/* attr() in the year 2025?  @see Developer.mozilla.org/en-US/docs/Web/CSS/attr */
 *[data-width='10']
 {
  width: calc(10%);
 }
 *[data-width='20']
 {
  width: calc(20%);
 }
 *[data-width='30']
 {
  width: calc(30%);
 }
 *[data-width='40']
 {
  width: calc(40%);
 }
 *[data-width='50']
 {
  width: calc(50%);
 }
 *[data-width='60']
 {
  width: calc(60%);
 }
 *[data-width='70']
 {
  width: calc(70%);
 }
 *[data-width='80']
 {
  width: calc(80%);
 }
 *[data-width='90']
 {
  width: calc(90%);
 }
 *[data-width='100']
 {
  width: calc(100%);
 }

.ClearThis::before,
.ClearAfterThis::after,
.ClearBeforeLastChild:last-child::before,
.ClearAfterLastChild:last-child::after,
article > footer::after, article > :last-child::after
{
 content: '';
 clear:   both;
 display: table;
}

.BreakThis::before,
.BreakAfterThis::after,
.BreakBeforeLastChild:last-child::before,
.BreakAfterLastChild:last-child::after
{
 content: '';
 clear:   both;
}


article mark, article span.mark
{
 background: hsla(0,0%,10%, 1);
 color:      #fff;
}

article span.invert
{
 background: hsla(0,100%,100%, 1);
 color:      #000;
}

article address, article blockquote
{
 background-blend-mode: normal;
 padding:        0.5vh 0.3vw 0.0vh 0.7vw;
}


body.file nav a,  body.file article a,
body.directory nav a,  body.directory article a
{
 color: #fff;
 text-decoration: none;
 text-shadow: none;
}

body.file nav#Breadcrumb a,
body.directory nav#Breadcrumb a
{
 color: #ddd;
}

body.file article a,
body.directory article a
{
 text-decoration: underline dotted;
}

body.file article a:visited,
body.directory article a:visited
{
 color: #ccc;
}

body.file nav a:hover,  body.file article a:hover,
body.directory nav a:hover,  body.directory article a:hover
{
 color: #aaa;
}

body.file nav a:active,  body.file article a:active,
body.directory nav a:active,  body.directory article a:active
{
 color: #aaa;
}


article video::backdrop {
 background-color: hsla(0, 0%, 0%,  1);
}



aside#CtlResponseAside
{
 /* DO NOT REMOVE POSITIONING (the alternative, a floating <main>, causes issues in KHTML/Webkit/Blink-derived browsers) */
 position: fixed;
 top:      20vh;
 left:     62%;
 width: auto;
 /* margin doesn't work here */
 padding: 0.0vh 2.5vw 0.0vh 0.0vw;
 overflow: hidden;
 resize: vertical;
 /* https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient */
 /* background: radial-gradient(circle, white, black); */
 background: linear-gradient(90deg, hsla(210,0%,20%, 1.0), hsla(210,0%,60%, 0.7) 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

body.homepage aside#CtlResponseAside
{
 top:      15vh;
}

aside#CtlResponseAside h3
{
 white-space: nowrap;
 margin-bottom: 0.4em;
}

aside#CtlResponseAside li
{
 display: block;
 white-space: wrap;
 margin-bottom: 1em;
}



video.background-video
{
 position: fixed;
 top:  50%;
 left: 50%;
 min-width:  100%;
 min-height: 100%;
 width:  auto;
 height: auto;
 z-index: -1000;
 transform:  translateX(-50%) translateY(-50%);
}



body > footer
/* footer:not(.metadata-article) */
{
 position: fixed;
 bottom:    8.2vh;
 right:     -4.3vw;
 transform: rotate(270deg);
}


.active
{
 background: linear-gradient(90deg, hsla(210,0%,20%, 1.0), hsla(210,0%,60%, 0.7) 100%) !important;
}