/*TODO:
    -Center Youtube Symbol
    -Update Soulseek Button
    -Convert 'px' sizing to 'em' or '%'
    -Button size consistency (Apple, Youtube are bigger than Archive, SlSk)
    -Merge button.css into this file
*/

/*Root Variables
Specifically used for theme colors, gradients, and background/foreground images.
Use https://cssgradient.io/ to output color gradients.*/
:root {
    /*Old Gradient Buttons
    --spotify-color: linear-gradient(132deg, rgba(110, 224, 150, 1) 0%, rgba(30, 215, 96, 1) 50%, rgba(8, 163, 62, 1) 100%);
    --apple-color: linear-gradient(0deg,rgba(253, 72, 53, 1) 0%, rgba(252, 1, 94, 1) 100%);
    --youtube-color: radial-gradient(circle,rgba(255, 0, 0, 1) 0%, rgba(219, 0, 0, 1) 100%);
    --bandcamp-color: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(226, 237, 249, 1) 72%); */

    /*Theme Colors*/
    --theme-red: #620303b8;
    --theme-blue: #030362b5;
    --theme-light-blue: #a4c5c4bf;
    --theme-black: #191414;
    --theme-gray: #4e537bb6;

    /*Background Variables*/
    --background-image: url("/images/AlbumBackgroundDither.webp");
    --background-size: cover;
    --background-position: center;
    --background-attachment: fixed;

    /*Foreground Variables*/
    --foreground-image: url("/images/SketchLandscapeWhite.svg");
    --foreground-size: cover;
    --foreground-position: bottom;
    --foreground-attachment: fixed;
}

/*Base Font: Sets default font for all elements*/
html {
    font-size: 16px;
    font-family: "Encode Sans Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*Parent Container*/
body {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    gap: 1rem;
    padding-top: 2rem;
    width: 55rem;
}

/*─── Typography ───────────────────────────────────────────────────*/

h1 {
    flex: 1;
    font-size: 5rem;
    letter-spacing: 10px;
    padding-left: 1rem;

    /*Background Clip: Applies background image as text fill*/
    background-image: var(--background-image);
    background-size: var(--background-size);
    background-position: var(--background-position);
    background-attachment: var(--background-attachment);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: brightness(120%);
}

h2 {
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--theme-blue);
}

/*Decorative span inside h2: Used for the dot separator*/
h2 span {
    color: var(--theme-red);
    padding: 0 3rem;
}

h3 {
    font-family: monospace;
    color: white;
    font-size: 1.2rem;
}

p {
    color: var(--theme-red);
    font-size: 1.4rem;
}

a {
    text-decoration: none; /*Removes underline of hyperlinked elements*/
}

/*─── Background / Foreground / Overlay ────────────────────────────*/

/*Background Format: Separate to allow overlayed color*/
.background {
    position: fixed;
    inset: 0;
    isolation: isolate; /*Isolates the mix-blend in overlay from bleeding over into other elements*/
    background-image: var(--background-image);
    background-size: var(--background-size);
    background-position: var(--background-position);
    background-attachment: var(--background-attachment);
    filter: brightness(85%);
    z-index: -1; /*Pushes background behind color overlay*/
}

/*Foreground Format: SVG Sketch layered over background, under/alongside overlay*/
.foreground {
    position: absolute;
    inset: 0;
    isolation: isolate;
    background-image: var(--foreground-image);
    background-size: var(--foreground-size);
    background-position: var(--foreground-position);
    background-attachment: var(--foreground-attachment);
    mix-blend-mode: overlay; /*Matches the .overlay behavior*/
    pointer-events: none;
    z-index: 0; /*Above .background (-1), below page content*/
}

/*Overlay Format: Applies blue color blend over the background*/
.overlay {
    position: absolute;
    inset: 0;
    background-color: #0000a0d3;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/*─── Layout ────────────────────────────────────────────────────────*/

/*Maincontent: Parent to header, columns and footer*/
.maincontent {
    display: flex;
    flex-direction: column;
    width: 55rem;
}

/*Header: Parent to .logo and h1 title*/
header {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

/*Columns: Parent to .sidebar and .sidecontent*/
.columns {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    align-items: stretch;
}

/*Sidebar: Parent to .portal and .tour*/
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-shrink: 0;
}

/*Sidecontent: Parent to nav and .bio*/
.sidecontent {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

/*─── Navigation ────────────────────────────────────────────────────*/

nav {
    font-size: 1.8rem;
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
}

nav ul {
    display: flex;
    gap: 0rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li a {
    display: block;
    padding: 0 0.7rem;
    text-decoration: none;

    /*Background Clip: Applies background image as text fill*/
    background-image: var(--background-image);
    background-size: var(--background-size);
    background-position: var(--background-position);
    background-attachment: var(--background-attachment);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: brightness(120%);
}

/*Changes hover function when interacting with the nav bar*/
li:hover {
    cursor: pointer; /*Changes the look of the cursor while hovering*/
    filter: brightness(0.75); /*Darkens the element by 25%*/
}

/*─── Card ──────────────────────────────────────────────────────────*/

.card {
    position: relative;
    border-radius: 0.4rem;
    border-width: 0.4em;
    border-color: #ffffff8e;
    padding: 1rem;
}

/*Card Background: Applies fixed background image as card fill*/
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--background-image);
    background-size: var(--background-size);
    background-position: var(--background-position);
    background-attachment: var(--background-attachment);
    filter: brightness(120%);
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
}

/*Card Foreground: Applies SVG overlay on top of card background*/
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--foreground-image);
    background-size: var(--foreground-size);
    background-position: var(--foreground-position);
    background-attachment: var(--foreground-attachment);
    mix-blend-mode: overlay; /*Matches .overlay behavior*/
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
}

/*Keeps all direct card children above the pseudo-element layers*/
.card > * {
    position: relative;
    z-index: 1;
}

/*─── Logo ──────────────────────────────────────────────────────────*/

.logo {
    width: 12.4em;
    height: 12.4em;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

/*─── Portal ─────────────────────────────────────────────────────────*/

/*Portal Element: Used to direct users to streams, downloads and social media*/
.portal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    width: 12.4em;
    height: 28.1em;
}

.portal h2 {
    text-align: center;
    width: 100%;
    margin: 0.2rem 0;
}

/*─── Buttons ────────────────────────────────────────────────────────*/

/*General Button Style: Keeps size, radius and text consistent*/
button {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    height: 2.5rem;
    border-radius: 30px;
    background-blend-mode: overlay;
}

/*General Button Hover: Adds expected hover functionality to all buttons*/
button:hover {
    cursor: pointer; /*Changes the look of the cursor while hovering*/
    filter: brightness(.75); /*Darkens the button by 25%*/
}

/*Applies background image to all buttons*/
.large-button,
.small-button,
.tiny-button {
    border-color: transparent;
    background-image: var(--background-image);
    background-attachment: var(--background-attachment);
    background-size: var(--background-size);
    background-position: right; /*Breaks the symmetry of the button with the background*/
}

/*Button Overlay: Applies mix-blend overlay to button backgrounds*/
.large-button::before,
.small-button::before,
.tiny-button::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: -1;
    pointer-events: none;
}

/*Large Button: Sets consistent width for all large buttons*/
.large-button {
    width: 12rem;
}

/*Small Button: Sets consistent width for all small buttons*/
.small-button {
    width: 5.8rem;
}

/*Tiny Button: Sets consistent width for all tiny buttons*/
.tiny-button {
    width: 3.8rem;
}

/*Blue Buttons: Archive and Soulseek*/
.archive-button,
.soulseek-button {
    background-color: var(--theme-blue);
}

/*Red Buttons: Apple and Youtube*/
.apple-button,
.youtube-button {
    background-color: var(--theme-red);
}

/*Light Blue Buttons: Spotify and Bandcamp*/
.spotify-button,
.bandcamp-button {
    color: var(--theme-black);
    background-color: var(--theme-light-blue);
}

/*Gray Buttons: Instagram, Email and RateYourMusic*/
.instagram-button,
.email-button,
.discord-button {
    background-color: var(--theme-gray);
}

/*Spotify Button Text Format*/
.spotify-button span {
    color: #191414;
    font-family: "Poppins", sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.04rem;
    left: .04rem;
}

/*Apple Logo Formatting*/
.apple-button span {
    /*Text Format*/
    font-size: 2rem;

    /*Positioning*/
    position: relative;
    bottom: .08rem;
    left: .08rem;
}


/*Youtube Logo Format*/
.youtube-button span {
    /*Text Format*/
    font-size: 1.6rem;

    /*Positioning*/
    position: relative;
    bottom: .08rem;
    left: .12rem;
}

/*Bandcamp Button: Custom font and letter spacing to recreate logo*/
.bandcamp-button {
    font-size: 1.6rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    letter-spacing: -0.1rem;
    padding-right: 1rem;
}

/*Bandcamp Symbol: Styles the two triangle characters at the front of the logo*/
.bandcamp-button span {
    color: #5eaad3;
    letter-spacing: -0.3rem;
}

/*Archive Button Text Format*/
.archive-button span {
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
}

/*Soulseek Button Text Format*/
.soulseek-button span {
    font-family: "Pixelify Sans", sans-serif;
    font-size: 1.3rem;
}

/*Icon: Used for SVG icons inside buttons*/
.icon {
    display: inline-block;
    color: inherit;
    width: 1.6rem;
    height: 2rem;
    overflow: hidden;
}

/*─── Bio ─────────────────────────────────────────────────────────*/

/*Bio Card: Parent to .bio-text and .bio-images*/
.bio {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    padding: 1rem;
    overflow: hidden;
}

/*Bio Images: Row container for left column and tall image*/
.bio-images {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    height: 24rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 0 1rem 1rem;
    flex-shrink: 0;
}

/*Bio Images Left: Stacks the two smaller images vertically*/
.bio-images-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

/*Bio Image: Individual image container*/
.bio-image {
    display: flex;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0.3rem;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.bio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/*Bio Image Tall: The larger right-side image*/
.bio-image-tall {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 0.3rem;
    display: flex;
    margin: 0;
    padding: 0;
}

.bio-image-tall img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/*Figure Default Reset: Removes browser default margins on all figure elements*/
figure {
    margin: 0;
    padding: 0;
    display: flex;
    min-width: 0;
    min-height: 0;
}

figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    flex: 1;
}

/*─── Tour ────────────────────────────────────────────────────────*/

/*Tour Element: Next shows posted here*/
.tour {
    width: 12.4em;
    flex: 1;
}

.tour h2 {
    text-align: center;
    width: 100%;
    margin: 0.2rem 0;
}

/*─── Footer ──────────────────────────────────────────────────────*/

footer {
    text-align: center;
    color: #ffffff8e;
    width: 100%;
    height: 5rem;
}