/* Extra Notes: This css needs to be organized according to the sections.*/

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Sections - 1
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1. Sections
2. Fonts and Colors
3. HTML Elements
4. Overlaid Elements
5. Side Navigation
6. Back to Top
7. Home
8. Blog
9. About Me
10. Portfolio
11. Discography
12. Shop
13. Contact
14. Custom Audio Player (Exluding discography.css)
15. Misc
16. Nav Keyboard
17. Mobile Optimization

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Fonts and Colors - 2
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
:root {
    /* Color Palette */
    --black: #000000; /* rgb(0, 0, 0) */
    --transparent-black: rgba(0, 0, 0, .5);
    --transparent-black-variant: rgba(0, 0, 0, .3);
    --white: #ffffff; /* rgb(255, 255, 255) */
    --dark-red: #994043; /* rgb(153, 64, 67) */
    --red: #ed6467; /* rgb(237, 100, 103) */
    --light-red: #ed9798; /* rgb(237, 151, 152) */
    --transparent-red: rgba(237, 100, 103, .8);
    --dark-orange: #c48140; /* rgb(196, 129, 64) */
    --orange: #ffa853; /* rgb(255, 168, 83) */
    --light-orange: #ffd479; /* rgb(255, 212, 121) */
    --transparent-orange: rgba(255, 168, 83, .8);
    --dark-yellow: #c9aa40; /* rgb(201, 170, 64) */
    --yellow: #fffd6a; /* rgb(255, 253, 106) */
    --light-yellow: #fffd90; /* rgb(255, 253, 144) */
    --transparent-yellow-variant: rgb(255, 253, 144, .3);
    --transparent-yellow: rgba(255, 253, 106, .8);
    --dark-green: #61994d; /* rgb(97, 153, 77) */
    --green: #90e372; /* rgb(144, 227, 114) */
    --light-green: #bde39e; /* rgb(189, 227, 158) */
    --transparent-green: rgba(144, 227, 114, .9);
    --dark-blue: #5fadaa; /* rgb(95, 173, 170) */
    --blue: #8df0e7; /* rgb(141, 240, 231) */
    --light-blue: #b6fff5; /* rgb(182, 255, 245) */
    --transparent-blue: rgba(141, 240, 231, .8);
    --dark-purple: #a484ab; /* rgb(164, 132, 171) */
    --purple: #d9a8e7; /* rgb(217, 168, 231) */
    --light-purple: #e1c0ff; /* rgb(225, 192, 255) */
    --transparent-purple: rgba(217, 168, 231, .8);
    --dark-pink: #ff91cc; /* rgb(255, 145, 204) */
    --pink: #ffbbe1; /* rgb(255, 187, 225) */
    --light-pink: #ffd6e7; /* rgb(255, 214, 231) */
    --transparent-pink: rgba(255, 187, 225, .8);

    /* Arrows */
    --red-arrow: url("images/arrows/Red-Arrow.png");
    --orange-arrow: url("images/arrows/orange-arrow.png");
    --yellow-arrow: url("images/arrows/yellow-arrow.png");
    --green-arrow: url("images/arrows/green-arrow.png");
    --blue-arrow: url("images/arrows/blue-arrow.png");
    --purple-arrow: url("images/arrows/purple-arrow.png");
    --pink-arrow: url("images/arrows/pink-arrow.png");

    /* Audio Interactables */
    --player: url("images/audio-buttons/0_audio-player.png");
    --pause-button: url("images/audio-buttons/1_pause.png");
    --play-button: url("images/audio-buttons/2_play.png");
    --start-button: url("images/audio-buttons/3_start.png");
    --end-button: url("images/audio-buttons/4_end.png");
    --unmute-button: url("images/audio-buttons/5_unmute.png");
    --mute-button: url("images/audio-buttons/6_mute.png");
    --broken-button: url("images/audio-buttons/7_grey-button.png");
    --slider: url("images/audio-buttons/8_slider.png");
}

/* Custom Fonts */
@font-face {
  font-family: 'Pixelated'; /* Choose a name you want */
  src: url('fonts/joystix\ monospace.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'H3'; /* Choose a name you want */
  src: url('fonts/Jersey10-Regular.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
HTML Elements - 3
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Header */
header {
    background: url(../images/KTVSoundscapes_Logo_White.png) no-repeat 775px bottom !important;
    background-size: auto 200px; /* this must come AFTER background shorthand */
    padding-top: 176px;
    padding-bottom: 0px;
    image-rendering: pixelated;
    padding-left: 50px;
    height: 125px;
    border: 3px solid #000000;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}
#header-text {
    display: none;
}

/* Navigation */
nav {
  display: none;
  position: absolute;
  width: 1600px;
  background-color: #000;
  text-align: center;
  padding: 10px 0;
  padding-block: 0;
  transform: translate(72px, 0px);
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
} 
nav li {
    padding: 10px;
    border-bottom: 1px solid #5d8ef0;
    font-weight: bold;
}
#buttonArea {
  width: 39px;
  height: 39px;
  background-size: cover;
  cursor: pointer;
}

nav a { text-decoration: none; }
nav a:link { color: #8df0e7; }
nav a:visited{ color: var(--pink); }
nav a:hover { color: #fffd6a; }

/* Main */
body {
    background-position: 750px bottom;
	color: #ffffff;
	font-family: Verdana, Arial, sans-serif;
	margin: 0;
}
#wrapper {
    background-position: 750px bottom;
    padding: 0;
	background-color: #000000;
    overflow-x: hidden;
}
main {
    background-image: url(../images/Mobile-Background.png);
    background-repeat: no-repeat;
    background-size: cover; /* Ensures full coverage */
    background-position: center;
    image-rendering: pixelated;
    background-color: #000000;
    background-attachment: fixed;
    min-height: 160vh;
    padding: 10px 10px 10px 16px;   
    border: 3px solid #000000;
    max-width: 1576px;
}

/* Text */
h1, h2, p, ul {
  margin-top: 0;
  padding-left: 0.14em;
  padding-right: 1em;
}
h1 {
  margin: 0;
  text-align: center;
  font-size: 5em;
  font-family: 'Pixelated', 'Courier New', Courier;
  text-shadow: -3px -3px 0 #000000, 3px -3px 0 #000000,
               -3px 3px 0 #000000, 3px 3px 0 #000000;
}
h2 {
  width: 100%;
  font-family: 'H3', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 10px;
  white-space: nowrap;
}
p, h3, ol, ul, li {
  margin-top: 10px;
  font-size: 1.2em;
  color: var(--black);
  text-align: left;
  font-family: "Oxanium", 'Courier New', Courier, monospace;
  font-weight: bold;
}
ul, li {
  margin-top: 4px;
  font-size: 1.1em;
  position: relative;
  left: 10px;
  font-weight: normal; /* Override bold from above for li */
}

p {font-weight: normal; /* Also override bold from shared rule */}
div {padding: 1em;}

/* Footer */
footer { background-color: #000000;
       padding: 20px;
       text-align: center;
	   color: #ffffff;
	   font-size: small;
	   font-style: italic;
	   border: 3px solid #000000;
}
footer a {
    color: #8df0e7; /* or any color you prefer */
    text-decoration: underline; /* optional */
}
footer a:hover {
    color: #fffd6a; /* color when hovered, optional */
}

/* Misc */
* {
	box-sizing: border-box;
}
audio {
    display: block;
    margin: 0 auto 1rem;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Overlaid Elements - 4
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Hide the checkbox */
.menu-checkbox {
    display: none;
}

/* Style the Hamburger Button */
.menu-icon {
    display: block;
    font-size: 2em;
    background: none;
    color: #8df0e7;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

/* ✅ FIXED: Show menu when checkbox is checked */
.menu-checkbox:checked ~ nav {
    display: block;
}

/* Styles for Details */
.details {
	padding-left: 17%; /* Add left padding */
	padding-right: 10%; /* Add right padding */
	clear: auto;
	overflow: auto; /* add overflow */
}

/*Styles for Images*/
img {
	padding-left: 10px; /* add left padding */
	padding-right: 10px; /* add right padding */
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Side Nagivation - 5
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Left Panel */
.side-panel_left {
    position: fixed;
    left: 10px;
    top: 0px;
    width: 186px;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    padding: 30px 10px 15px 10px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center text inside the panel */
    box-sizing: border-box; /* Makes padding behave as expected */
}

/* Navigation links */
.side-panel_left a {
    width: 170px;
    padding: 6px 10px;        /* Reduced padding */
    font-size: 16px;          /* Slightly smaller text */
    line-height: 1.4;         /* Tighter line spacing */
    text-align: center;
    color: var(--black);
    text-decoration: none;
    font-weight: bold;
    font-family: "Oxanium", 'Courier New', Courier, monospace;
    transition: background-color 0.2s, color 0.2s;
}

/* Hover effect */
.side-panel_left a:hover {
    color: var(--white);
    cursor: pointer;
    background-color: var(--transparent-black-variant);
}

/* Optional: keyboard base class (not being used here, but keeping it tidy) */
.keyboard {
    width: 170px;
    height: calc(100vh - 116px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
}

/* Keyboard color themes */
.pink-keyboard {
    background-image: url("images/backgrounds/0_pink-keyboard.png");
    background-color: var(--pink);
}
.red-keyboard {
    background-image: url("images/backgrounds/1_red-keyboard.png");
    background-color: var(--red);
}
.orange-keyboard {
    background-image: url("images/backgrounds/2_orange-keyboard.png");
    background-color: var(--orange);
}
.yellow-keyboard {
    background-image: url("images/backgrounds/3_yellow-keyboard.png");
    background-color: var(--yellow);
}
.green-keyboard {
    background-image: url("images/backgrounds/4_green-keyboard.png");
    background-color: var(--green);
}
.blue-keyboard {
    background-image: url("images/backgrounds/5_blue-keyboard.png");
    background-color: var(--blue);
}
.purple-keyboard {
    background-image: url("images/backgrounds/6_purple-keyboard.png");
    background-color: var(--purple);
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Back to Top - 6
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Main */
#backToTop {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(48px);
  width: 40px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  image-rendering: pixelated;
  border: none;
  cursor: pointer;
  opacity: .5;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  font-family: 'Pixelated';
  z-index: 1000;
}

/* Opacity */
#backToTop.visible {
  opacity: 0.3;
  visibility: visible;
}
#backToTop.visible:hover {
  opacity: 1;
}
#backToTop:hover {
  opacity: 1;
}

/* Tooltip */
#backToTop::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--black);
  color: var(--white);
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 999;
}
#backToTop:hover::after {
  opacity: 1;
}

/* Arrows */
.red-arrow {background-image: var(--red-arrow);}
.orange-arrow {background-image: var(--orange-arrow);}
.yellow-arrow {background-image: var(--yellow-arrow);}
.green-arrow {background-image: var(--green-arrow);}
.blue-arrow {background-image: var(--blue-arrow);}
.purple-arrow {background-image: var(--purple-arrow);}
.pink-arrow {background-image: var(--pink-arrow);}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Home - 7
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Main Sections */
.section {
    text-align: center;
    border: 32px solid transparent;
    border-image: url("images/borders/0_border-black.png") 16 fill repeat;
    margin-bottom: 10px;
    font-family: "Oxanium", 'Courier New', Courier, monospace;
    background-color: var(--transparent-black-variant); /* Default transparent background */
    right: 1px;
    border-radius: 8px;
    padding: 0px 0px 0px 0px;
    min-width: 1252px;
}
.section h2 {
    text-align: left;
    font-size: 34px;
    color: var(--black);
}
.about-me, .blog, .portfolio-1, .portfolio-2, .portfolio-3, .contact {
    margin-left: 180px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* Sub-sections */
.portfolio-piece {
    background-color: var(--transparent-yellow-variant);
    border: 64px solid transparent;
    border-image: url("images/borders/7_border-smol.png") 16 fill repeat;
    padding: 30px;
    text-align: center;
    margin-bottom: 40px;
    font-family: "Oxanium", 'Courier New', Courier, monospace;
}

/* More Buttons */
.more-button {
    background-color: transparent;
    width: auto;
    min-width: 1000px;
    height: 48px;
    padding: 0 24px;
    image-rendering: pixelated;

    border: 32px solid transparent;
    border-image: url("images/buttons/3_yellow-button.png") 16 fill repeat;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: auto;

    color: black;
    font-family: 'Pixelated', sans-serif;
    font-size: 16px;

    cursor: pointer;
    text-decoration: none;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
About Me - 8
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Main */
.about-me {
    background-color: var(--transparent-red);
    border: 64px solid transparent;
    border-image: url("images/borders/1_border-red.png") 16 fill repeat;
}
.about-me h1 {
    color: var(--dark-red);
}
.about-me h2 {
    text-shadow: -1px -1px 0 var(--transparent-red),
                 1px -1px 0 var(--transparent-red),
                 -1px 1px 0 var(--transparent-red),
                 1px 1px 0 var(--transparent-red);
}
.about-me button {border-image-source: url("images/buttons/1_red-button.png");}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Blog - 9
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.blog {
    background-color: var(--transparent-orange);
    border: 64px solid transparent;
    border-image: url("images/borders/2_border-orange.png") 16 fill repeat;
}
.blog h1 {
    color: var(--dark-orange);
}
.blog h2 {
    text-shadow: -1px -1px 0 var(--transparent-orange),
                 1px -1px 0 var(--transparent-orange),
                 -1px 1px 0 var(--transparent-orange),
                 1px 1px 0 var(--transparent-orange);
}
.blog button {border-image-source: url("images/buttons/2_orange-button.png");}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Portfolio - 10
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.portfolio-1 {
    background-color: var(--transparent-yellow);
    border: 64px solid transparent;
    border-image: url("images/borders/3_border-yellow.png") 16 fill repeat;
}
.portfolio-1 h1 {
    color: var(--dark-yellow);
}
.portfolio-1 h2 {
    text-shadow: -1px -1px 0 var(--transparent-yellow),
                 1px -1px 0 var(--transparent-yellow),
                 -1px 1px 0 var(--transparent-yellow),
                 1px 1px 0 var(--transparent-yellow);
}
.portfolio-1 button {border-image-source: url("images/buttons/3_yellow-button.png");}

/* PDF */
.pdf-button {
    background-color: transparent;
    width: auto; /* allows button to size to content */
    min-width: 1000px; /* ensures it's not too small */
    height: 48px;
    padding: 0 24px; /* horizontal padding */
    image-rendering: pixelated;

    border: 32px solid transparent;
    border-image: url("images/buttons/3_yellow-button.png") 16 fill repeat;

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

    color: black;
    font-family: 'Pixelated', sans-serif;
    font-size: 16px;

    cursor: pointer;
    text-decoration: none;
    line-height: 1; /* keeps text vertically centered */
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Discography - 11
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.portfolio-2 {
    background-color: var(--transparent-green);
    border: 64px solid transparent;
    border-image: url("images/borders/4_border-green.png") 16 fill repeat;
}
.portfolio-2 h1 {
    color: var(--dark-green);
}
.portfolio-2 h2 {
    text-shadow: -1px -1px 0 var(--transparent-green),
                 1px -1px 0 var(--transparent-green),
                 -1px 1px 0 var(--transparent-green),
                 1px 1px 0 var(--transparent-green);
}
.portfolio-2 button {border-image-source: url("images/buttons/4_green-button.png");}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Shop - 12
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.portfolio-3 {
    background-color: var(--transparent-blue);
    border: 64px solid transparent;
    border-image: url("images/borders/5_border-blue.png") 16 fill repeat;
}
.portfolio-3 h1 {
    color: var(--dark-blue);
}
.portfolio-3 h2 {
    text-shadow: -1px -1px 0 var(--transparent-blue),
                 1px -1px 0 var(--transparent-blue),
                 -1px 1px 0 var(--transparent-blue),
                 1px 1px 0 var(--transparent-blue);
}
.portfolio-3 button {border-image-source: url("images/buttons/5_blue-button.png");}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Contact - 13
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Main Styles*/
.contact {
    background-color: var(--transparent-purple);
    border: 64px solid transparent;
    border-image: url("images/borders/6_border-purple.png") 16 fill repeat;
}
.contact h1 {
    color: var(--dark-purple);
}
.contact h2 {
    text-shadow: -1px -1px 0 var(--transparent-purple),
                 1px -1px 0 var(--transparent-purple),
                 -1px 1px 0 var(--transparent-purple),
                 1px 1px 0 var(--transparent-purple);
}
.contact button {border-image-source: url("images/buttons/6_purple-button.png");}

/* Form Styles */
form {
    width: 100%;
    margin: 0 auto; /* Center the form */
}
form div {
    margin-bottom: 15px;
}
label {
    font-family: 'H3', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 10px;
    white-space: nowrap;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--black);
    font-size: 24px;
    margin-left: 8px;
}
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    text-align: left; /* Left-aligns the text inside the input boxes */
}
textarea {
    resize: vertical; /* Allow the textarea to be resized vertically */
    height: 150px; /* Adjust height as needed */
}
button[type="submit"] {
    background-color: var(--black);
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
button[type="submit"]:hover {
    background-color: var(--white);
    color: var(--black);
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Audio Player - 14
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Main */
.player-wrapper {
  position: relative;
  width: 152px; height: 31px;
  background: url("images/audio-buttons/0_audio-player.png") no-repeat left center;
  background-size: cover;
  image-rendering: pixelated;
  transform: scale(4);
  transform-origin: top left;
}
.audio-button {
  background-color: transparent;
  position: relative;
  width: 12px; height: 12px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  border: none;
  cursor: pointer;
  text-indent: -9999px;
  top: -16px;
  transform: translate(.3px, .8px); scale: 1.05;
}

/* Buttons */
.playPauseButton { transform: translate(-49.2px, 0px);}
.startEndButton  { transform: translate(-51.6px, 0px);}
.muteButton      { transform: translate(-53.8px, 0px);}

.pause  { background-image: url("images/audio-buttons/1_pause.png"); }
.play   { background-image: url("images/audio-buttons/2_play.png"); }
.start  { background-image: url("images/audio-buttons/3_start.png"); }
.end    { background-image: url("images/audio-buttons/4_end.png"); }
.unmute { background-image: url("images/audio-buttons/5_unmute.png"); }
.mute   { background-image: url("images/audio-buttons/6_mute.png"); }

/* Sliders */
.slider {
  position: absolute;
  top: 2px;
  width: 104px;
  height: 2px;
  background: black;
  cursor: pointer;
  appearance: none;
  image-rendering: pixelated;
}

/* WebKit (Chrome, Safari) */
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 8px;
  height: 5px;
  background: url('images/audio-buttons/8_slider.png') no-repeat center;
  background-size: contain;
  border: none;
  image-rendering: pixelated;
}
/* Firefox */
.slider::-moz-range-thumb {
  width: 8px;
  height: 5px;
  background: url('images/audio-buttons/8_slider.png') no-repeat center;
  background-size: contain;
  border: none;
  image-rendering: pixelated;
}

/* Remove default thumb appearance (for completeness) */
.slider::-ms-thumb {
  width: 8px;
  height: 5px;
  background: url('images/audio-buttons/8_slider.png') no-repeat center;
  background-size: contain;
  border: none;
  image-rendering: pixelated;
}

.volumeSlider {transform: translate(-55.25px, 3px);}
.progressSlider {transform: translate(-55.2px, 18.75px);}

/* Other Audio Player Visuals */
.timeDisplay {
  position: absolute;
  transform: translate(-14.6px, -25.9px);       
  width: 40px; height: 12px;
  font-family: 'H3', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  font-size: 8px;
  line-height: 12px;
  color: var(--black, black);
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}
.spacer {
  height: 7em;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Search Bar - 15
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.search-sort-wrapper {
	display: flex;
	flex-direction: row;
	gap: 0px;
	align-items: flex-end;
	width: 1188px;
    padding: 0px 0px 0px 0px;
}
.search-container {
    position: relative; /* This makes the button position relative to this container */
    width: 1164px;
    padding: 0;
}
.search-input {
    width: 100%;
    padding: 8px 48px 8px 12px; /* make space on the right for the button */
    font-size: 1rem;
    background-color: transparent;
    text-align: center;
    box-sizing: border-box;
    background-color: var(--green);
    border: 16px solid transparent !important;
    border-image: url("images/borders/7_border-smol.png") 4 fill repeat !important;
    text-align: center;
    font-family: "Oxanium", 'Courier New', Courier, monospace;
}
.search-btn {
    position: absolute;
    top: 36px;
    right: 20px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    padding: 0;
    background-color: transparent;
    background-image: url("/ccs/images/search-and-filter/search-glass_v2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
    cursor: pointer;
}
.search-input:focus {
    outline: none;
}
.autocomplete-list {
  display: none; /* hidden by default */
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 999;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.autocomplete-list.visible {
  display: block;
}
.autocomplete-item:hover {
  background-color: #f0f0f0;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Nav Keyboard - 16
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Keyboard container */
#mini-keyboard {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 38px;
    left: 0px;
    top: -4px;
}

.key {
  image-rendering: pixelated;
}

/* White keys stacked vertically */
.key.white {
    height: 32px;
    width: 113px;
    background: white;
    border: 3px solid black;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    left: -33px;
    top: 26px;
}

.key.white.pressed {
  background-color: #8a8a8a; /* or try #e0e0e0 for a lighter gray */
}

/* Black keys overlayed on top */
.key.black {
    width: 64px;
    height: 22px;
    background: black;
    position: absolute;
    z-index: 2;
    pointer-events: auto;
    left: -14px;
}

/* Vertical keyboard: black key positions based on your HTML structure */
#mini-keyboard .key.black:nth-of-type(3)  { top: 93px; }   /* A#3 */
#mini-keyboard .key.black:nth-of-type(5)  { top: 126px; }   /* G#3 */
#mini-keyboard .key.black:nth-of-type(7)  { top: 158px; }   /* F#4 */
#mini-keyboard .key.black:nth-of-type(10)  { top: 223px; }  /* D#4 */
#mini-keyboard .key.black:nth-of-type(12) { top: 254px; }  /* C#4 */
#mini-keyboard .key.black:nth-of-type(15) { top: 318px; }  /* A#3 */
#mini-keyboard .key.black:nth-of-type(17) { top: 351px; }  /* G#3 */
#mini-keyboard .key.black:nth-of-type(19) { top: 382px; }  /* F#3 */
#mini-keyboard .key.black:nth-of-type(22) { top: 446px; }  /* D#3 */
#mini-keyboard .key.black:nth-of-type(24) { top: 479px; }  /* C#3 */

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Mobile Optimization - 17
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* ======================= DESKTOP (≥900px) ======================= */
@media (min-width: 900px) {

    /* Show the normal desktop nav */
    nav {
        display: flex !important;                 /* force visible */
        position: absolute;
        width: 1600px;
        background-color: #000;
        text-align: center;
        transform: translate(388px, -32px);       /* your original desktop position */
    }
    nav ul {
        display: flex !important;
        flex-direction: row !important;
        gap: 24px;
        list-style: none;
        margin: 0;
        padding: 0;
        justify-content: center;
        align-items: center;
    }
    nav li {
        padding: 10px 16px;
        border-bottom: 0;
        font-weight: bold;
    }

    /* Hide hamburger on desktop */
    .menu-icon { display: none !important; }

    /* Hide checkbox entirely on desktop */
    .menu-checkbox { display: none !important; }

    /* Side panel visible on desktop */
    .side-panel_left {
        display: flex !important;
        top: 0;
    }
}

/* ======================= MOBILE (<900px) ======================= */
@media (max-width: 899px) {

/* Header */
header {
    image-rendering: auto;
    background: url(../images/KTVSoundscapes_Logo_White.png) no-repeat center bottom !important;
    background-size: auto 110px !important;
    padding: 8px 12px;
    height: 110px;
    border-width: 0;
    max-width: 100%;
}

#header-text {
    display: none;
}

/* Hamburger icon default style */
.menu-icon {
    display: block;
    position: fixed;
    z-index: 1000;
    top: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
    background: url('images/burgers/0_pink-burger.png') no-repeat center;
    background-size: contain;
    cursor: pointer;
    image-rendering: pixelated;
}


/* Hide nav by default on mobile; show when toggled */
nav {
    display: none;
    position: static;
    width: 100%;
    max-width: 100%;
    transform: none;
    background: #000;
    padding: 0;
    margin: 0;
}

.menu-checkbox:checked~nav {
    display: block;
}

nav ul {
    display: flex;
    flex-direction: column;
    gap: 0;
}

nav li {
    padding: 12px 16px;
    border-bottom: 1px solid var(--dark-blue);
}

/* Hide side panel on mobile */
.side-panel_left {
    display: none !important;
}

/* Layout tweaks */
#wrapper {
    overflow-x: hidden; }
main {
    background-attachment: scroll;
    min-height: auto;
    padding: 12px;
    border: 0;
    max-width: 100%;
}

/* Sections */
.section {
    border-width: 16px;
    padding: 4px;
    border-radius: 0;
    margin: 12px 0;
    min-width: 272px;
    max-width: 100%;
}
.about-me, .blog, .portfolio-1, .portfolio-2, .portfolio-3, .contact {
    margin-left: 0;
}

/* Inner content width */
.details {
    padding-left: 8px;
    padding-right: 8px;
    overflow: visible;
}
.section > .panel,
.section > .card,
.section > .inner {
    margin-left: 4px;
    margin-right: 4px;
}

/* Type */
h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
h2 { letter-spacing: .2em; white-space: normal; margin: 0px 0px 8px 0px; }
p, h3, ol, ul, li { font-size: 1rem; }

/* Buttons */
.more-button,
.pdf-button {
    min-width: 0;
    width: 100%;
    max-width: 640px;
    padding: 12px 16px;
    border-width: 16px;
    height: auto;
    margin-top: 8px;
}

/* Media */
img, video {
    max-width: 100%;
    height: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Back to top - center on mobile */
#backToTop {
    left: 50%;
    right: auto;
    bottom: 12px;
    transform: translateX(-50%);
}
@media (hover:none) {
    #backToTop::after { display: none; }
}

/* Search */
.search-sort-wrapper {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0;
}
.search-container { width: 100%; }
.search-input {
    border-width: 12px !important;
    padding: 10px 44px 10px 12px;
    text-align: left;
}

/* Audio Player */
.player-wrapper {
    transform: scale(2.4);
    transform-origin: top center;
    margin: 0 auto;
}
.spacer { height: 2.6em; }

/*Specific Photos*/
.about-me-photo {
    float: none !important;   /* stop floating on small screens */
    display: block !important;
    margin: 0 auto 16px !important; /* center with margin below */
    width: min(90%, 300px);   /* scale to fit nicely on mobile */
}

/* Safety */
.section, .more-button, .pdf-button { max-width: 100%; }
}