/*
Theme Name: saoe.net

????-2013 : My original styles for my first HTML pages back then...
2013-2019 : Based on my customization of the WordPress 'twentytwelve' theme.
2019      : Custom CSS for Hugo static site generator.
2020-02   : Added styles etc. for animated (spinning) logo cube; added img.scaleToFitToFont {}.
2021-01-23: Added styles for the Table-Of-Contents-shortcode "toc".
2022-01-09: Added styles for categories/tags column on blog list page.
2023-07-25: This is the site's basic stylesheet (and also the one for 'small' display sizes);
            the other CSSs will just override certain styles when loaded.

-- Sascha Offe
*/

/* ---------------- Header & General Layout ---------------- */

html
{
    font-size: 100%;
}

body
{
    margin: 0px;
}

img 
{
    /* "the image will scale down if it has to, but never scale up to be larger than its original size."
        -- https://www.w3docs.com/snippets/css/how-to-resize-images-proportionally-scaled-using-css-for-responsive-web-design.html */
    max-width: 100%;
    height: auto;
}

#page
{
	font-family: sans-serif;
	font-size: 1.25rem;
	line-height: 1.5;
	background-color: #ffffff;
	color: #000000;
}

header#masthead.site-header
{
    padding-top: 0em;
	padding-bottom: 0em;
	background-color: #000000;
}

header#masthead .site-description
{
	font-weight: lighter;
	font-style: italic;
	color: #ffffff;
	font-size: 1.5em;
    padding: 0px;
}

#saoe-outer-header
{
	width: 100%;
	text-align: center;
}

#saoe-inner-header
{
	width: 30%;
	padding: 3rem;
	padding-top: 4rem;
    padding-bottom: 3rem;
	margin: -2rem;
	margin-left: auto;
	margin-right: auto;
	background-image: radial-gradient(rgb(114, 114, 114), black 60%);
}

#saoe-inner-header img
{
	box-shadow: 0px 0px 100px 30px #888888;
}

/* Image tags with that class override the weight/height information and scale the image to match it better with the currently used size of the font. */
img.scaleToFitToFont
{
	font-size: inherit;
    min-height: 1em; /* With 'height' alone, Mobile Chrome had issues (image too small), maybe this convinces it... (untested)*/
    max-height: 1em;
	width: auto;
	vertical-align: middle;
    padding: 0px;
    margin: 0px;
}

/* ---------------- Styles and transforms for the animated (spinning) logo cube. ----------------
Inspired by "Intro to CSS 3D transforms" by David DeSandro <https://3dtransforms.desandro.com/>. */

.logo-scene-cube
{
	width: 78px;
	height: 78px;
	perspective: 500px;
	border: none;
	margin: 0 auto; /* Centers the div. */
	
}

.logo-cube
{
	width: 78px;
	height: 78px;
	position: relative;
	margin: 0 auto; /* Centers the div. */
	transform-style: preserve-3d;
	transform: translateZ(-39px);
}

.logo-cube.is-spinning
{
	animation: spinCube 15s infinite ease-in-out;
}

@keyframes spinCube
{
	  0% { transform: translateZ(-39px) rotateX(  0deg) rotateY(  0deg); }

	 75% { transform: translateZ(-39px) rotateX(  0deg) rotateY(  0deg); }
		/* This will add a delay between the animation: From 0%-x% of the timespan of the animation, nothing changes
		   (Timespan of the animation: See .cube.is-spinning -> 10s, that means 0-x% = n seconds.) */

	100% { transform: translateZ(-39px) rotateX(360deg) rotateY(360deg); }
}

.logo-cube_face
{
	background-image: url("/images/saoe-mk2-78x78.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover; /* Resize the background image to cover the entire container */
	
	position: absolute;
	width: 78px;
	height: 78px;
}

.logo-cube.is-backface-hidden .logo-cube_face
{
	backface-visibility: hidden;
}

/* "Now that faces are rotated, only the front and back faces are visible.
The 4 side faces are all perpendicular to the viewer, so they appear on-edge, near-invisible.
To push them out to their appropriate sides, they need to be translated out from the center of their positions.
Each side of the cube is 200px wide.
From the cube�s center they�ll need to be translated out half that distance, 100px." */

.logo-cube_face-front  { transform: rotateY(  0deg) translateZ(39px); }
.logo-cube_face-right  { transform: rotateY( 90deg) translateZ(39px); }
.logo-cube_face-back   { transform: rotateY(180deg) translateZ(39px); }
.logo-cube_face-left   { transform: rotateY(-90deg) translateZ(39px); }
.logo-cube_face-top    { transform: rotateX( 90deg) translateZ(39px); }
.logo-cube_face-bottom { transform: rotateX(-90deg) translateZ(39px); }

.logo-cube.show-front  { transform: translateZ(-39px) rotateY(   0deg); }
.logo-cube.show-right  { transform: translateZ(-39px) rotateY( -90deg); }
.logo-cube.show-back   { transform: translateZ(-39px) rotateY(-180deg); }
.logo-cube.show-left   { transform: translateZ(-39px) rotateY(  90deg); }
.logo-cube.show-top    { transform: translateZ(-39px) rotateX( -90deg); }
.logo-cube.show-bottom { transform: translateZ(-39px) rotateX(  90deg); }

.logo-cube-step0
{
	position: relative;
	width: auto;
	height: auto;
	transform: none;
}

.logo-cube-step0 .logo-cube_face
{
	display: inline-block;
	position: static;
	margin: 0;
	transform: none;
}

.logo-cube-step1                 { transform: none; }
.logo-cube-step1 .logo-cube_face { transform: none; }

.logo-cube-step2                        { transform: none; }
.logo-cube-step2 .logo-cube_face-front  { transform: rotateY(  0deg); }
.logo-cube-step2 .logo-cube_face-right  { transform: rotateY( 90deg); }
.logo-cube-step2 .logo-cube_face-back   { transform: rotateY(180deg); }
.logo-cube-step2 .logo-cube_face-left   { transform: rotateY(-90deg); }
.logo-cube-step2 .logo-cube_face-top    { transform: rotateX( 90deg); }
.logo-cube-step2 .logo-cube_face-bottom { transform: rotateX(-90deg); }

.logo-cube-step3 { transform: none; }

/* "Finishing up, we can add a transition to animate the rotation between states." -- ? */
.logo-cube-rotate
{
	transition-property: transform 1s;
}


/* ---------------- The main navigation bar on top. ---------------- */

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu,
.main-navigation ul.nav-menu a
{
	text-align: center;
	background-color: #000000;
	color: #ffffff;
	border: none;
	text-transform: none;
    /*white-space: nowrap;*/
    font-weight: normal;
    padding-left: 1em;
    padding-right: 1em;
}

#menu-saoe-net
{
	margin-top: 1em;
	margin-bottom: 1em;
    padding-bottom: 0.5em;
}

.main-navigation ul.nav-menu li
{
	font-size: 1em;
	display: inline; /* Renders the ul li items in one line. */
}


/* ---------------- Styles for the actual page content ---------------- */

/* Hyperlinks in a headline */
.content h1 a,
.content h2 a,
.content h3 a,
.content h4 a,
.content h5 a,
.content h6 a
{
	text-decoration: none;
}

/* The actual headline of the page. It's a separate class, so that I can use h1 (resp. '#' in MarkDown) in the normal body of the text. */
div.entry-title
{
	font-size: 3rem;
	font-weight: bold;
	/*line-height: 1;*/
}

div .content
{
	padding: 1em;
}

/* Different style color for a comment. */
article.comment
{
	padding: 0.25em;
	border: 1px solid;
	border-bottom: 1px solid !important;
	background-color: #f8f8f8;
}

/* Meta information */
.content .content-meta-data-top
{
	/* font-size: 0.9em; */
	color: #666666;
	margin-top: 1em;
	margin-bottom: 1em;
}

.content .content-meta-data-bottom
{
	text-align: center;
	font-size: 0.9em;
	color: #666666;
	margin-top: 1em;
	margin-bottom: 1em;
}

.content .content-meta-data-bottom a
{
	color: #666666;	
	text-decoration: none;
}

/* ---- Homepage ---- */

.homepage-blog-date
{
	color: #666666;
	margin: 0px;    
    padding: 0px;
}

.homepage-blog-title
{
    margin: 0px;
    padding: 0px;
}

.homepage-blog-summary
{
	margin: 0px;
	padding: 0px;
}

.homepage-blog-summary p
{
	margin: 0px;
	padding: 0px;
}

/* ---- Misc. ---- */

.content tt,   /* teletype text */
.content kbd,  /* keyboard input/user input */
.content samp, /* sample output from a computer program */
.content code, /* computer code */
.content pre   /* preformatted text - common*/
{
	font-size: 1em;
    background-color: #eaffea;
}

.content pre   /* preformatted text - block */
{
    padding: 0.5em 0.5em 0.5em 0.5em;
	border: 1px solid #d0dcd0;
	border-radius: 8px;
    overflow-x: auto;
}

/* -- Definition Lists -- */
.content dl
{
	padding-left: 0px;
	margin-left: 0px;
}

.content dt
{
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.content dd
{
	padding-left: 1em;
	margin-left: 2em;
	margin-bottom: 2em;
}

/* ---- Footnote ---- */
.content .footnotes
{
	font-size: 0.9em;
}

.content .footnotes hr
{
	width: 25%;
}

/* -- Quotation -- */

blockquote,
quote
{
	margin-left: 0em;
	padding-left: 1em;
	padding-top: 0.01em;
	padding-bottom: 0.01em;
	font-style: italic;
	color: #000000; /* #000044; */
	background-color: #f8f8ff;
	border-left: 0.5em solid #aaaaff;
}

cite
{
	padding-left: 3em;
	font-style: normal;
}

/* Since quotations are in ITALIC (see above), this marks emphasis within a quote as non-italic. */
blockquote em, quote em, blockquote i, quote i
{
	font-style: normal;
}

/* -- Star Rating (e.g. for the Mini Reviews) -- */

.content .star-rating-full    { color:GoldenRod; }
.content .star-rating-outline { color:LightGrey; }

/* -- Tables -- */

.content table
{
	border-collapse: collapse;
	color: #000000;
    
    /* Especially on mobile devices, a table can easily become wider than the viewport.
    Using the right CSS, you can get scrollbars on the table without wrapping it.    
    The solution for those who cannot or do not want to wrap the table in a div (e.g. if the HTML is generated
    from Markdown), but still want to have scrollbars:
    -- https://stackoverflow.com/a/62451601 */
    display: block;   
    /* 2023-08-06 (so): The 'max-width' centers the tables -- which I usually don't want.
       No other side-effects noticed (on mobile/small screens), that's why I disabled it.
    max-width: -moz-fit-content;
    max-width: fit-content; */
    margin: 0 auto;
    overflow-x: auto;
    white-space: nowrap;
}

.content th
{
	font-weight: bold;
	text-align: left;
	vertical-align: top;
	border: 1px solid #aaaaaa;
	background-color: #eaeaea;
	color: #000000;
	text-transform: none;
	padding: 0.2em;
}

.content td
{
	text-align: left;
	vertical-align: top;
	border: 1px solid #aaaaaa;
	padding: 0.2em;
}

.content .table_footer
{
	font-style: italic;
	text-align: right;
	vertical-align: top;
	border-width: 1px;
	color: black;
	padding: 0.2em;
}

/* Horizontal Rule */
.content hr
{
	width: 100%;
    color: #888888;
	background-color: #888888; /* same as "color"; needed for Mozilla Firefox. */
	height: 1px;
	border: none 0px;
	margin: 0;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* Information in a sidebar/box/footnote kind of way.
   Note: There is also a custom Hugo shortcode "aside" (by me), which inherits some values and overwrites others! */
.content aside,
.content aside.box
{
	color: #000000;
	background: #ffefff;
	border: solid 2px;
    border-color: /*deeppink#FF1493*/ /*mediumvioletred*/#C71585 /*fuchsia/magenta#FF00FF*/;
	padding: 0.5em;
	margin: 0.5em;
	float: right;
	width: 33%;
}

/* Style for the Table of Contents (toc) shortcode */
.toc
{
    background-color: #f8f8ff;
    border: solid 2px #666688;
    font-weight: bold;
}

.toc #toc-headline
{
    padding: 0.25em;
    font-weight: bold;
    background-color: #666688;
    color: #f8f8ff;
}

.toc li
{
    padding-right: 0.25em;
}

.toc li a
{
    color: #666688;
    text-decoration: none;
}

/* ---------------- Hyperlinks ---------------- */

a
{
	color: #000088;
	text-decoration: none;
}

.content a
{
	color: #0000aa;
	text-decoration: underline;
}

a:focus, a:hover
{
	color: #ff0000 !important;
	text-decoration: underline solid !important;
}

a:visited
{
	color: #660088; /*#004488;*/
	text-decoration: none;
}


/* ---------------- Copyright notice ---------------- */

div .copyright
{
	margin-top: 0px;
	padding: 1em;
	font-size: 0.9em;
	text-align: center;
}

/* ---------------- Style for the Previous Post/Next Post link on a single blog post page. ---------------- */
.prev-next-nav
{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	background-color: #f8f8f8;
}

.prev-next-nav a,
.prev-next-nav a:visited
{
	color: #666666;
	text-decoration: none;
}

.prev-nav-cell
{
	width: 50%;
	text-align: left;
}

.next-nav-cell
{
	width: 50%;
	text-align: right;
}

/* ---------------- The table containing the categories and tags on blog's single and list page(s) ---------------- */
/* Later: Only if the media is wide enough: @media (min-width: 40em) { <below> } */

.cat-and-tag-table a,
.cat-and-tag-table a:visited
{
	color: #888888;
	text-decoration: none;
}

/* --- For single blog post page --- */
.cat-and-tag-table
{ 
	display: table;
	border-spacing: 0.25em;
	width: 100%;
	table-layout: fixed;
	
	color: #888888;
	text-align: center;
	padding: 0.25em;
	font-size: 0.9em;
	background: rgba(255, 255, 255, 0.5);
}

.cat-and-tag-table-row
{
	display: table-row;
}

.cat-and-tag-table-cell-l
{
	display: table-cell;
	text-align: right;
	padding-right: 1em;
	border-right: dotted 1px;
}

.cat-and-tag-table-cell-r
{
	display: table-cell;
	padding-left: 0.75em;
	text-align: left;
}

.cat-and-tag-table .title
{
	font-weight: bold;
	margin-top: 1.25em;
	margin-bottom: 0.25em;
}

/* ---------------- For the category & tag dropdown menus --------------------------------------- */

div .category-dropdown-menu
{
	text-align: center;
	background-color: #f8ccf8;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    
    /* https://blog.logrocket.com/how-to-create-fancy-corners-in-css/ */
    border-radius: 30% 45% 40% 20% / 70% 50% 30% 25%;
}

select { font-size: inherit } /* Must be separate, otherwise it doesn't get applied... */

.category-dropdown-menu { line-height: 2em; }
.category-dropdown-menu-select { background-color: #f8f8f8; }
.category-dropdown-menu-option {}

.tag-dropdown-menu { line-height: 2em; }
.tag-dropdown-menu-select { background-color: #f8f8f8; }
.tag-dropdown-menu-option {}

/* 
.table-cell:nth-child(1) {background: wheat; width: auto;}
.table-cell:nth-child(...) {background: red; width: auto;}
*/

/* ---------------- Checkboxes --------------------------------------------------------------------- 

Especially for Github-flavored Markdown Task Lists.

Was a bit tricky: Needed to read a lot of pages and examples; the magic
trick was to reset all first with "appearance: none;"!
*/

input[type="checkbox"]
{
    appearance: none; /* First, remove all browser styling! */
}

input[type="checkbox"]::before
{
    content: "☐"; /* Unicode 'BALLOT BOX' */
    color: #888888;
    font-size: 1.5em;
}

input[type="checkbox"]:checked:before
{
    content: "🗹"; /* Unicode: 'BALLOT BOX WITH BOLD CHECK' */
    color: #00aa00;
    font-size: 1.5em;
}

/* ---------------- Search Page------------------------------------------------------------------ */

 input[type="text"]#custom-search-field
 {
     width: 100%;
     font-size: 1em;
 }