/*   
   Theme Name: MrYpsilon
   Theme URI: https://example.com
   Description: Eigenes Template für MrYpsilon
   Author: Christian M. & Lucas H.
   Author URI: https://mrypsilon.de
   Version: 0.3.2
   Requires at least: 3.0
   Tested up to: 6.8
   Requires PHP: 5.2
*/

/*** SCHRIFTART ***/

@font-face {
   font-family: 'Calligraffitti';
   src: url('fonts/Calligraffitti-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'Mrypsilon';
   src: url('fonts/Mrypsilon-Regular.ttf') format('truetype');
}

/*** VARIABLEN ***/
:root {
   --text-light-color: #fff;
   --text-dark-color: #000;
   --dark-color: #333;
   --dark-color-2: #717171;
   --light-color: #e5e5e5;
   --background-dark-color: #4a3301;
   --background-light-color: #bd975e;
   --link-color: rgb(252, 87, 125);
   --link-hover-color: rgb(252, 87, 125);
   --content-background-color: rgba(255, 160, 160, 0.347);
}

body {
   font-family: 'Mrypsilon', cursive;
   color: var(--text-light-color);
   /* var(--dark-color); */
   height: 100%;
}

/* Hintergrund - Farbverlauf */
.background {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   background: linear-gradient(to bottom, var(--background-dark-color) 10%, var(--background-light-color) 80%);
}

a {
   color: var(--text-light-color);
   text-decoration: none;
}

a:hover,
.entry a:hover {
   color: var(--link-hover-color);
   text-decoration: underline;
}

.entry a {
   color: var(--link-color);
   text-decoration: none;
}

/*** BEREICHE ***/

#wrapper {
   width: 850px;
   min-height: 100vh;
   margin: auto;
   text-align: left;
   /* background-color: var(--content-background-color); */
   border-radius: 10px;


   display: flex;
   flex-direction: column;
}

#main {
   flex: 1;
   padding: 20px;
   float: left;
}

#footer {
   clear: both;
   padding: 20px;
}

.footer-widgets {
   display: flex;
   justify-content: space-evenly;
}

.footer-column {
   width: 30%;
   padding: 10px;
}

#header {
   height: 160px;
   padding: 20px;
   position: relative;
   transition: transform 0.5s ease;

   display: flex;
   justify-content: center;
   align-items: center;
}

.home #header.shift-up {
   transform: translateY(-30vh);
}

#header h1 {
   font-size: 2.5em;
   margin: 0;
   padding: 0;
   text-align: center;
   position: relative;
}

#header h1 a:hover {
   color: var(--link-hover-color) !important;
}

#header .homeIcon {
   height: 3em;
   vertical-align: middle;
   display: inline-block;
   overflow: visible;
   margin-left: -0.1em;
   margin-right: -0.2em;
}

#header .homeIcon path {
   fill: var(--text-light-color);
}

#header .homeIcon g {
   transition: transform 0.3s ease;
   transform-origin: center center;
}

#header .homeIcon g:hover {
   transform: scale(1.2);
}

/*** NAVIGATION (MENU) ***/

.main-navigation ul {
   list-style: none;
   padding-left: 0;
   display: flex;
   gap: 10px;
}

.main-navigation ul li {
   display: inline-block;
}

.main-navigation ul li a {
   text-decoration: none;
   padding: 10px 15px;
   color: #333;
   background: #f2f2f2;
   border-radius: 5px;
   transition: background-color 0.3s ease;
}

.main-navigation ul li a:hover {
   background-color: #0073e6;
   color: var(--text-light-color);
}

.tooltip {
   display: inline-block;
   cursor: pointer;
   position: relative;
}

.tooltip::after {
   content: attr(data-title);
   width: 1.5em;
   max-height: 50vh;
   position: absolute;
   top: 80%;
   left: 50%;
   transform: translateX(-50%);
   color: var(--text-light-color);
   font-size: 0.5em;
   white-space: nowrap;

   writing-mode: vertical-lr;
   text-orientation: upright;
}

body:not(.home) .tooltip::after {
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   border-radius: 5px;
   padding: 5px;
   z-index: 2;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.home .tooltip::after {
   letter-spacing: -15px;
}

.tooltip:hover::after {
   opacity: 1;
   visibility: visible;
   transition: opacity 0.3s ease-in-out, visibility 3s linear 0s;
}

/* Tooltip verschwindet langsam */
.tooltip:not(:hover)::after {
   opacity: 0;
   visibility: hidden;
   transition: opacity 1s ease-in-out, visibility 0s linear 0s;
}

/* DEBUGGING - Always show last tooltip */
/* .tooltip:last-child::after {
   opacity: 1 !important;
   visibility: visible !important;
} */

/*** MAIN ***/

.row {
   display: flex;
}

/*** FRONT-PAGE ***/

.home #header {
   border: none;
   background: none;
}

.home #wrapper {
   justify-content: center;
   background: none;
}

.home h1 {
   font-size: 7em !important;
   letter-spacing: 15px;
}

.home #footer {
   display: none;
}

/* center vertically and horinzontally */
.center_front-page {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

/*** BEITRAGSSEITE - single.php ***/
.meta {
   border-top: 1px solid;
}

/*** SEARCH - searh.php ***/
.search-param {
   font-weight: bold;
   font-size: 1.2em;
}

.wp-block-search__input {
   border-radius: 5px;
}

.wp-block-search__button {
   border-radius: 5px;
}

/*** DARK MODE ***/

/* Wenn der Browser Dark Mode aktiviert hat */
@media (prefers-color-scheme: dark) {


   /*** Zukünftige Anpassungen für einen dark oder light mode ***/
}