/**
 * File: styles.css
 * Color palette based on Equinox 8 (https://lospec.com/palette-list/equinox-8)
 */

/* Base color palettes */
:root {
    /* Night colors */
    --night1: #0c0727;
    --night2: #2c1c82;
    --night3: #6d58e1;
    --night4: #d4cbff; /* The moon */
    /* Night mixes */
    --nightmix23: color-mix(in srgb, var(--night2),var(--night3));
    --nightmix34: color-mix(in srgb, var(--night3),var(--night4));

    /* Day colors */
    --day1: #491d14;
    --day2: #8f3b1d;
    --day3: #cb8232;
    --day4: #ffde67;  /* The sun */
    /* Day mixes */
    --daymix23: color-mix(in srgb, var(--day2),var(--day3));
    --daymix34: color-mix(in srgb, var(--day3),var(--day4));

    /* shadow colors */
    --shadow: #222222;

    /* Active theme (default = day ) */
    --c-bg:       var(--day1);
    --c-fg:       var(--day2);
    --c-accent1:  var(--day3);
    --c-accent2:  var(--day4);
    --c-mix23:    var(--daymix23);
    --c-mix34:    var(--daymix34);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
    :root {
        --c-bg:       var(--night1);
        --c-fg:       var(--night2);
        --c-accent1:  var(--night3);
        --c-accent2:  var(--night4);
        --c-mix23:    var(--nightmix23);
        --c-mix34:    var(--nightmix34);
    }
}

html {
    transition: 
        --day1 0.6s ease,
        --day2 0.6s ease,
        --day3 0.6s ease,
        --day4 0.6s ease,
        --night1 0.6s ease,
        --night2 0.6s ease,
        --night3 0.6s ease,
        --night4 0.6s ease,
        --daymix23 0.6s ease,
        --daymix34 0.6s ease,
        --nightmix23 0.6s ease,
        --nightmix34 0.6s ease,
        --shadow 0.6s ease;
}


/* Explicit user override (JS writes html[data-theme]) */
html[data-theme="light"] {
    --c-bg:       var(--day1);
    --c-fg:       var(--day2);
    --c-accent1:  var(--day3);
    --c-accent2:  var(--day4);
    --c-mix23:    var(--daymix23);
    --c-mix34:    var(--daymix34);
}

html[data-theme="dark"] {
    --c-bg:       var(--night1);
    --c-fg:       var(--night2);
    --c-accent1:  var(--night3);
    --c-accent2:  var(--night4);
    --c-mix23:    var(--nightmix23);
    --c-mix34:    var(--nightmix34);
}

/*
body {
    background-color: light-dark( var(--day1), var(--night1) );
    color: light-dark( var(--day2), var(--night2) );
    font-family: Arial, Helvetica, sans-serif;
}
*/

body {
    background-color: var(--c-bg);
    color: var(--c-fg);
    font-family: Arial, Helvetica, sans-serif;
    transition: background-color 0.6s ease, color 0.6s ease;
}

a {
    color: var(--c-fg);
    text-decoration: none;
    transition: color 0.6s ease;
}

a[href]:link {
    color: var(--c-accent1);
    transition: color 0.3s ease-in-out;
}

a[href]:visited {
    color: var(--c-mix23);
    transition: color 0.3s ease-in-out;
}

a[href]:active {
    color: var(--c-mix34);
    transition: color 0.3s ease-in-out;
}

a[href]:hover {
    color: var(--c-accent2);
}

h1, h1 > a[id],
h2, h2 > a[id],
h3, h3 > a[id] {
    color: var(--c-accent1);
    transition: color 0.6s ease;
}

hr {
    border-color: var(--c-accent1);
    transition: border-color 0.6s ease;
}

figure {
    border-width: 1px;
    border-style: outset;
    border-color: var(--c-accent1);
    border-radius: 15px;
    padding: 5px;
    box-shadow: 5px 5px 5px var(--shadow);
    transition: border-color 0.6s ease;
}

figure > img {
    border-width: 1px;
    border-style: inset;
    border-color: var(--c-accent1);
    border-radius: 15px;
    min-width: 200px;
    min-height: 200px;
    transition: border-color 0.6s ease;
}

figure > figcaption {
    margin: 3px;
    text-align: center;
    color: var(--c-accent1);
    transition: color 0.6s ease;
}

.sidebyside {
    display: flex;
}

.sidepara {
    min-width: 400px;
}

header {
    text-align: center;
    /*background-image: url(../images/splash_art.png); */
    background-image: linear-gradient(to top, rgb(from var(--c-bg) r g b / 0.3), rgb(from var(--c-fg) r g b / 0.3)), url('../images/splash_art.png');
    background-position: center;
    min-height: 700px;
    background-repeat: no-repeat;
}

header h1,
header h2 {
    text-shadow: 5px 5px 3px var(--shadow);

}

header img {
    /* TODO: glow? */
    filter: drop-shadow(0 0 0.75rem var(--c-accent2));
}

nav {
    display: flex;
    /* min-width: 600px; */
    justify-content: space-between;
}

#navlinks {
    display: flex;
    /*justify-content: flex-start;*/
}

#navlinks ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: space-around;
}

#navlinks ul > li {
    padding: 10px;
}

#themeswitcher {
    margin-left: auto;
    display: flex;
    /* justify-items: flex-end; */
    align-items: center;
    position: relative;   /* needed for the absolute callout */
}

#theme-toggle {
  position: relative;
  appearance: none;         /* needed so checkbox appears as a switch */
  display: inline-block;
  outline: none;
  width: 80px;
  height: 40px;
  border-radius: 20px;
  background: var(--day3);
  box-shadow: none;
  cursor: pointer;
  overflow: hidden;
  transition: 0.3s ease-in-out;
  /* box-shadow: 5px 5px 3px var(--shadow); */
}

#theme-toggle:checked {
  background: var(--night3);
}

#theme-toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: inherit;
  width: 36px;
  height: 36px;
  background: var(--day4);
  transition: inherit;
}

#theme-toggle::after {
  content: '';
  position: absolute;
  top: -6px;
  right: calc(100% + 36px);
  border-radius: inherit;
  width: 36px;
  height: 36px;
  background: var(--day1);
  transition: inherit;
}

 #theme-toggle:checked::before {
  left: calc(100% - 38px);
  background: var(--night4); /* crecent */
}

 #theme-toggle:checked::after {
  right: 12px;
  background: var(--night3); /* earth shadow */
}

main h1, 
main h2 {
    text-shadow: 5px 5px 3px var(--shadow);

}

.daymode {
    display: block;
}
.nightmode {
    display: none;
}

html[data-theme="dark"] .daymode {
    display: none;
}

html[data-theme="dark"] .nightmode {
    display: block;
}

@keyframes theme-wiggle {
  0%   { transform: translateX(0) rotate(0deg); }
  10%  { transform: translateX(-3px) rotate(-6deg); }
  20%  { transform: translateX(3px)  rotate(6deg); }
  30%  { transform: translateX(-4px) rotate(-8deg); }
  40%  { transform: translateX(4px)  rotate(8deg); }
  50%  { transform: translateX(-3px) rotate(-6deg); }
  60%  { transform: translateX(3px)  rotate(6deg); }
  70%  { transform: translateX(-2px) rotate(-4deg); }
  80%  { transform: translateX(2px)  rotate(4deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

#theme-toggle.wiggle {
  animation: theme-wiggle 0.75s ease-in-out;
}

#theme-hint {
  position: absolute;
  right: 100%;
  margin-right: 10px;

  z-index: 1000;

  padding: 6px 10px;
  border-radius: 8px;

  font-size: 0.85rem;
  white-space: nowrap;

  background: var(--day4);
  color: var(--day1);

  box-shadow: 2px 2px 5px var(--shadow);

  opacity: 0;
  pointer-events: none;

  transform: translateY(-50%);
  top: 50%;

  transition: opacity 0.3s ease;
}

html[data-theme="dark"] #theme-hint {
  background: var(--night4);
  color: var(--night1);
}

#theme-hint.show {
  opacity: 1;
}