:root {
  --color-dark: #000;
  --color-light: #f0f0f0;
  --color-danger: #f00;
  --color-positive: #0a5c36;
  --color-negative: #555;

  --color-dark-blue: #32608d;
  --color-light-blue: #75a6d8;
  --color-dark-purple: #483157;
  --color-light-purple: #9781a7;
  --color-dark-red: #65233c;
  --color-light-red: #d888a8;
  /* derived */
  --button-color: var(--color-dark-blue);
  --button-border-color: var(--color-dark-purple);
  --button-text-color: var(--color-light);
  --chip-background-color: var(--color-dark-purple);
  --chip-text-color: var(--color-light);
  --option-no-color: var(--color-negative);
  --option-yes-color: var(--color-positive);
  --draft-color: var(--color-danger);
  --nav-selected-text-color: var(--color-light);
  --nav-text-color: var(--color-dark);
  --nav-background-color-1: var(--color-light-purple);
  --nav-background-color-2: var(--color-light-blue);
  --nav-background-color-3: var(--color-light-red);
  --table-background-color: var(--color-light);
  --table-border-color: var(--color-dark);
  --text-panel-background-color: var(--color-light-blue);
}

/* not sure if these are used or should be used */
.color-dark-blue {
  color: var(--color-dark-blue);
}

.color-light-blue {
  color: var(--color-light-blue);
}

.color-dark-purple {
  color: var(--color-dark-purple);
}

.color-light-purple {
  color: var(--color-light-purple);
}

.color-dark-red {
  color: var(--color-dark-red);
}

.color-light-red {
  color: var(--color-light-red);
}

@font-face {
  font-family: 'Syncopate';
  font-weight: normal;
  src: URL('/fonts/syncopate-regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Syncopate';
  font-weight: bold;
  src: URL('/fonts/syncopate-bold.ttf') format('truetype');
  font-display: swap;
}

 @font-face {
  font-family: 'SpaceGrotesk';
  src: URL('/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'NotoMusic';
  font-weight: normal;
  src: URL('/notomusic-regular.ttf') format('truetype');
  font-display: swap;
}

a { color: #0a58ca; text-decoration: none; }
a:hover { text-decoration: underline; }

body {
  background-image: url('/images/pexels-mariano-di-luch-679379189-38398497.jpg') ;
  background-color: rgba(255, 255, 255, 0.9); 
  background-blend-mode: lighten; 
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--color-dark); 
  font-family: 'SpaceGrotesk', Verdana, sans-serif;
}

figcaption {
  font-style: italic;
}

figure > img { 
  border: 0;
  width: 33%; 
}


h1 {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: var(--color-light);
    font-family: 'Syncopate', sans-serif;
    font-size: 1.1em;
    padding: 10px;
}

h1:is(
  .section-0-setup,
  .section-1-create,
  .section-2-arrange,
  .section-3-mix,
  .section-4-master,
  .section-5-post
)::before {
  background: url('/images/icon-192.png') center / contain no-repeat;
  content: '';
  display: inline-block;
  height: 24px;
  width: 24px;
  margin-right: 5px;
  vertical-align: middle;
} 

h2 {
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 5px;
    color: var(--color-light);
    font-family: 'Syncopate', sans-serif;
    padding: 7px;
}

nav {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.5rem;
  margin-bottom: 20px;
  margin-left: 5px;
}

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

nav > div {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.5rem;
  margin-left: 5px;
}

p {
  /* background-color: rgba(255, 255, 255, 0.75); */
  padding: 5px;
}

table { 
  border-collapse: collapse; 
  width: 100%; 
  background: var(--table-background-color); 
  box-shadow: 0 1px 3px rgba(var(--table-border-color),0.1); 
  border-radius: 8px; 
  overflow: hidden; 
}

th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid #eee; font-size: 14px; }
th { background: #111; color: #fff; font-weight: 600; }
tr:last-child td { border-bottom: none; }

.badge {  padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-yes { background: #d1fadf; color: var(--option-yes-color); }
.badge-no { background: #f2f2f2; color: var(--option-no-color);  }

.box{
  background-color: var(--button-color);
  border: 2px solid var(--button-border-color);
  border-radius: 5px;
  color: var(--button-text-color);
  margin-bottom: -20px;
  margin-left: 20px;
  padding: 10px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
}

/* nav a { color: var(--button-text-color); } */

.container > div {
  flex: 1 1 250px; /* grow | shrink | basis */
  min-width: 0;   /* Prevents overflow issues from long content */
}

.container {
  color: var(--color-light);
  column-gap: 10px;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}


.image-indieweb {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-image: url('/images/indieweb.avif');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.image-neocities {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('/images/cat.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.nav1, .nav2, .nav3 {
  color: var(--nav-text-color);
  border-radius: 5px;
  margin: 5px 5px 0 5px;
  padding: 3px;
}

.nav1 {
  background-color: var(--nav-background-color-1);
  border: 1px solid rgba(var(--nav-background-color-1), 0.8);
}

.nav2 {
  background-color: var(--nav-background-color-2);
  border: 1px solid rgba(var(--nav-background-color-2), 0.8);
}

.nav3 {
  background-color: var(--nav-background-color-3);
  border: 1px solid rgba(var(--nav-background-color-3), 0.8);
}

.page-status-draft {
  color: var(--draft-color);
}

.parent-nav { 
  text-decoration: underline; 
  text-decoration-style: dotted;
}

.platform { white-space: nowrap; }

.plug-in-section-effects::after {
  content: 'Effects';
} 
.plug-in-section-instruments::after {
  content: 'Instruments';
} 
.plug-in-section-makers::after {
  content: 'Makers';
} 
.plug-in-section-sellers::after {
  content: 'Sellers';
} 

.plug-in-analyser::after {
  content: 'Analyser';
} 
.plug-in-channel::after {
  content: 'Channel';
} 
.plug-in-delay::after {
  content: 'Delay';
} 
.plug-in-dyn::after {
  content: 'Dynamics';
} 
.plug-in-distortion::after {
  content: 'Distortion';
} 
.plug-in-eq::after {
  content: 'EQ';
} 
.plug-in-filter::after {
  content: 'Filter';
} 
.plug-in-mod::after {
  content: 'Modulation';
} 
.plug-in-pitch::after {
  content: 'Pitch Shift';
} 
.plug-in-reverb::after {
  content: 'Reverb';
} 
.plug-in-spatial::after {
  content: 'Spatial';
} 
.plug-in-tools::after {
  content: 'Tools';
} 
.plug-in-vocals::after {
  content: 'Vocals';
} 

.plug-in-drums::after {
  content: 'Drums';
} 
.plug-in-hosts::after {
  content: 'Hosts';
} 
.plug-in-orchestra::after {
  content: 'Orchestra';
} 
.plug-in-pianos::after {
  content: 'Pianos & Keys';
} 
.plug-in-samplers::after {
  content: 'Samplers';
} 
.plug-in-synths::after {
  content: 'Synths';
} 
.plug-in-sounds::after {
  content: 'Sounds';
} 

.plug-in-type-stock::after {
  content: 'Stock';
} 
.plug-in-type-third-party::after {
  content: 'Third Party';
} 

.ref {
  background-color: var(--chip-background-color);
  border-radius: 9px;
  color: var(--chip-text-color);
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  margin-left: 3px;
  margin-right: 3px;
  padding: 2px 4px 2px 4px;
  text-align: center;
  vertical-align: middle;
}

.section-0-setup::after {
  content: 'Get Ready';
} 
.section-1-create::after {
  content: 'Create';
} 
.section-2-arrange::after {
  content: 'Shape';
} 
.section-3-mix::after {
  content: 'Mix';
} 
.section-4-master::after {
  content: 'Polish';
} 
.section-5-post::after {
  content: 'Ship It';
} 

.section-contents::after {
  content: 'Contents';
} 

.selected-nav { 
  color: var(--nav-selected-text-color); 
  text-decoration: underline; 
  text-decoration-style: dotted;
}

.sub-box{
  background-color: var(--text-panel-background-color);
  border-radius: 5px;
  padding: 10px;
  z-index: 1;
}

.top-nav-home::after {
  content: 'Home';
} 
.top-nav-process::after {
  content: 'Process';
} 
.top-nav-plug-ins::after {
  content: 'Plug-ins';
} 


/* Tooltip styles */

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
    text-decoration-style: dotted;
    text-decoration-line: underline;
}

/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}