/*  CSS for the XProc Zone */


/* */

:root {
  --main-bg: whitesmoke;
  --secondary-bg: white;
  --contrast-bg: white;

  --main-face: black;
  --contrast-face: black;

  --link-face: blue;
  --contrast-link-face: blue;

  --highlight-color: green;
  --contrast-highlight-color: green;
  --border-color: black;  
}

#zone_logo { width: 6em; float: right }
#index  #zone_logo { width: 12em; max-width: 25vw }


/* Comments were provided by Github Copilot - apologies - */
body.night {

  --main-bg: #1A1B3A; /* Deep indigo blue for the main background, calm and meditative */
  --secondary-bg: #292A52; /* Slightly lighter blue-purple for secondary elements, adding depth */
  --contrast-bg: #5B4F99; /* Rich, muted lavender for contrast background, dreamy and soothing */

  --main-face: #D8D8F6; /* Soft, pale lavender for main text, ensuring readability on the dark background */
  --contrast-face: #FFFFFF; /* Bright white for text on the contrast background, for maximum readability */

  --link-face: #7F99FF; /* Soft, dreamy blue for links, subtle yet distinct */
  --contrast-link-face: #A3B4FF; /* Lighter, glowing blue for links on the contrast background */

  --highlight-color: #40E0D0; /*  turquoise */
  --contrast-highlight-color: 	#00CCCC;
  --border-color: #00FFFF; /* Soft neon cyan, glowing and restful for the night theme */


#zone_logo #zone { fill: var(--contrast-bg); var(--border-color) }
#zone_logo #zed  { stroke: var(--border-color) }

}

body.day {
  --main-bg: #FAF3E0; /* Soft cream background, light and inviting */
  --secondary-bg: cornsilk;
  --contrast-bg: #534582;

  --main-face: #4A3B2D; /* Deep brown for text, offering strong readability and contrast */
  --contrast-face: #FFFDF5;
  
  --link-face: #004C99; /* Deep blue for links, ensuring strong contrast with all backgrounds */
  --contrast-link-face: #FFD966; /* Warm and cheerful golden yellow, distinct from the light green contrast face */

  --highlight-color: #2D9CDB;
  --contrast-highlight-color: #c0e1f4;
  --border-color: #B49A7A;

#zone_logo #zone { fill: var(--secondary-bg); stroke: var(--border-color) }
#zone_logo #zed  { stroke: var(--highlight-color) }

}

body.dawn {
  --main-bg: #F2F8E8; /* Soft, pale green for the main background, evoking early morning light */
  --secondary-bg: #FFF2DE; /* Peachy cream for secondary elements to add warmth */
  --contrast-bg: #D6F5E3;

  --main-face: #3A3024; /* Warm dark brown for text, complementing the soft green background */
  --contrast-face: #25756A;

  --link-face: #4697E9;
  --contrast-link-face: #4697E9;

  --highlight-color: #20BFC3;
  --contrast-highlight-color: #FF7E5F;
  --border-color: #6AAE75; /* Fresh, uplifting green for borders, tying into the soft green background */

#zone_logo #zone { fill: var(--contrast-bg); stroke: var(--border-color) }
#zone_logo #zed  { stroke: var(--contrast-highlight-color) }

}

body.dusk {
  --main-bg: #1B263B; /* Deep cool navy blue for the main background, evoking a serene evening sky */
  --secondary-bg: #27496D; /* Muted teal for secondary elements, adding depth and a sense of coolness */
  --contrast-bg: #3F88C5; /* A soft sky blue for contrast areas, reminiscent of twilight fading light */

  --main-face: #D6E6F2; /* Pale, soft blue for text, ensuring readability on dark backgrounds */
  --contrast-face: #F8F5F2; /* A soft, pale cream */

  --link-face: #6FFFE9; /* Bright turquoise for links, evoking the shimmer of fireflies */
  --contrast-link-face: #A1FFCE; /* Soft mint green for links on the contrast background, dreamy and ethereal */

  --contrast-highlight-color: #7EF9FF; 
  --highlight-color: #efdac7;
  --border-color: #D4A373; /* Muted golden-bronze, warm and elegant for an evening feel */

#zone_logo #zone { fill: var(--contrast-bg); stroke: var(--border-color) }
#zone_logo #zed  { stroke: var(--contrast-face) }

}

body { background-color: var(--main-bg);
       color: var(--main-face);
       font-family: sans-serif;
       font-family: "Noto Sans", sans-serif;
       line-height: 1.6;
}   

/*#3B7EFF*/

#bannerbar { margin: 0rem; padding: 0rem; width: 100%; }

a {
  color: var(--link-face); /* Sets the link color */
  text-decoration: none; 
}

a:hover {
  text-decoration: underline;
}

#themepick { display: block }
#themepick p { display: inline-block; background-color: var(--secondary-bg);
  margin: 0rem; padding: 0.2em; border: thin solid var(--border-color) }

body.dawn  #themepick p.set.dawn,
body.day   #themepick p.set.day,
body.dusk  #themepick p.set.dusk,
body.night #themepick p.set.night,
body.none  #themepick p.set.none  { border-style: dotted; background-color: var(--main-bg) }

#sitenav { background-color: var(--secondary-bg); float: right; clear: both; font-size: smaller;
  padding: 0.3rem; color: var(--link-face); border: thin solid var(--border-color) }
#sitenav a { font-weight: bold }
#sitenav a:hover { color: var(--highlight-color) }

.buttonbar { padding: 0em; margin-left: 2em }
.buttonbar li { display: inline-block; background-color: var(--secondary-bg);
  margin: 0.2em; padding: 0.2em; outline: thin outset var(--border-color) }
.buttonbar li:hover { outline: thin outset var(--highlight-color) ;
  color: var(--contrast-highlight-color); background-color: var(--main-bg) }

header { margin: 1em 0em }

header > * { margin: 0em }
header > p { font-size: 140%; font-style: italic; font-weight: 600 }

footer { font-size: smaller }

.in-a-row {
  display: flex;
  width: 100%; }

.in-a-row > *  { flex: 1; /* Each panel takes up equal space */ 
                 text-align: center; }

.in-a-row > *:first-child { text-align: left; /* Align text to the left */ }

.in-a-row > *:last-child { text-align: right; /* Align text to the right */ }

summary { font-style: italic }
/* details { padding: 0.4em }  */

main div, main details { max-width: 60em }

.block { background-color: var(--secondary-bg); border: medium solid var(--border-color);
         max-width: 54em }

.panel { margin: 1rem; max-width: 54em;
  background-color: var(--contrast-bg); color: var(--contrast-face); border: medium solid var(--border-color) }

.block, .panel {  margin-left: 2rem; margin-right: 2rem; margin-top: 0.6rem; padding: 0.6rem }

.panel > *:first-child,
.block > *:first-child { margin-top: 0em }

.panel a { color: var(--contrast-link-face) }

.nowrap { white-space: nowrap }

.hanging { padding-left: 2.4em; text-indent: -2.4em }

.smaller { font-size: smaller }

hr { border: thin solid var(--border-color); }

h1, h2, h3, h4, h5, h6 { font-family: "Noto Serif", serif; font-weight: 400 }

.highlight, .hi { color: var(--highlight-color) }
.panel .highlight, .panel .hi { color: var(--contrast-highlight-color) }

.alt-highlight, .althi { color: var(--contrast-highlight-color) }
.panel .alt-highlight, .panel .althi { color: var(--highlight-color) }

code { font-size: 120% }