:root {
	--heading-font: 'Passion One', cursive;
	--body-font: 'Short Stack', cursive;

	--accent-color: #cd2021;
    --dark-bg: #0f0e18;
	--light-bg: #ffffff;

	--logo-desktop: url('/images/DaniBlack_Logo_Red.png');
	--logo-mobile: url('/images/DaniBlack_Logo_Red_Mobile.png');
    --nav-swipe: url('/images/NavbarSwipe_Red.png');

	--paper-texture: url('/images/paper-texture.webp');
	--trim-texture: url('/images/baseboard-trim.png');
    
    --hero-overlap: 200px;
    --hero-notch: clamp(90px, 17.5vh, 180px);
    --paper-bottom-pad: 100px;
}

:root[data-theme="prettyboy"] {
	--accent-color: #4d0921;
    --dark-bg: #110409;
	--light-bg: #ffffff;
	--logo-desktop: url('/images/DaniBlack_Logo_Purple.png');
	--logo-mobile: url('/images/DaniBlack_Logo_Purple_Mobile.png');
    --nav-swipe: url('/images/NavbarSwipe_Purple.png');
}

:root[data-theme="forever"] {
	--accent-color: #122252;
    --dark-bg: #0f0e18;
	--light-bg: #d1e6ff;
	--logo-desktop: url('/images/DaniBlack_Logo_Blue.png');
	--logo-mobile: url('/images/DaniBlack_Logo_Blue_Mobile.png');
    --nav-swipe: url('/images/NavbarSwipe_Blue.png');
}

:root[data-theme="house"] {
	--accent-color: #cd2021;
    --dark-bg: #0b0b0b;
	--light-bg: #ffffff;
	--logo-desktop: url('/images/DaniBlack_Logo_Red.png');
	--logo-mobile: url('/images/DaniBlack_Logo_Red_Mobile.png');
    --nav-swipe: url('/images/NavbarSwipe_Red.png');
}

:root[data-theme="chai-tea"] {
	--accent-color: #ff7f00;
    --dark-bg: #111f19;
	--light-bg: #b5dc9e;
	--logo-desktop: url('/images/DaniBlack_Logo_Green.png');
	--logo-mobile: url('/images/DaniBlack_Logo_Green_Mobile.png');
    --nav-swipe: url('/images/NavbarSwipe_Green.png');
}

.hero-parallax-container {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    z-index: 1;
}

#parallax-img {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%; 
    object-fit: cover;
    object-position: center 25%; 
    will-change: transform;
}

.logo-overlay {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
}

.vinyl-wrapper {
    position: absolute;
    bottom: -45vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.vinyl-record {
    width: 90vw;
    height: 90vh;
    background: url('/images/vinyl.png') no-repeat center center;
    background-size: contain;
    animation: rotateVinyl 12s linear infinite;
}

@keyframes rotateVinyl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hero-parallax-container {
	position: relative;
	width: 100%;
	height: 90vh;
	overflow: hidden;
	z-index: 1;
}

#parallax-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	will-change: transform;
}

.logo-overlay {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	text-align: center;
}

.hero-logo {
	display: block;
	width: clamp(220px, 60vw, 780px);
	height: clamp(70px, 14vh, 170px);
	background-image: var(--logo-desktop);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	filter: drop-shadow(0 10px 25px rgba(0,0,0,0.35));
}

.vinyl-wrapper {
	position: absolute;
	bottom: -45vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

.vinyl-record {
	width: 90vw;
	height: 90vh;
	background: url('/images/vinyl.png') no-repeat center center;
	background-size: contain;
	animation: rotateVinyl 12s linear infinite;
}

@keyframes rotateVinyl {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Parallax positioning tweaks */
@media (max-width: 992px) {
	#parallax-img { object-position: 35% 25%; }
}

@media (max-width: 768px) {
	#parallax-img { object-position: 20% 25%; }

	.hero-logo {
		width: clamp(180px, 78vw, 380px);
		background-image: var(--logo-mobile);
	}

	.logo-overlay {
		top: 58%;
	}

	.vinyl-wrapper {
		bottom: -60vh;
		left: 50%;
	}

	.vinyl-record {
		width: 120vw;
		height: 120vh;
	}
}

.hero-clip-section{
    position: relative;
    z-index: 3;
    margin-top: calc(-1 * var(--hero-overlap));
    padding: var(--hero-overlap) 0 var(--paper-bottom-pad);
    background: var(--paper-texture);
    background-color: var(--light-bg);
    -webkit-clip-path: polygon(0 0, 50% var(--hero-notch), 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 50% var(--hero-notch), 100% 0, 100% 100%, 0 100%);
  }

.baseboard-trim {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100px;
	background: var(--trim-texture) repeat-x;
	background-size: contain;
}

html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: var(--light-bg);
}

.main-nav-overlay {
    position: fixed !important;
    top: 15px !important;
    right: 0 !important;
    z-index: 10000 !important;
    
    width: clamp(240px, 22vw, 380px); 
    height: 65px; 
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

.nav-swipe-container {
    position: absolute;
    right: -15px; 
    width: 100%;
    height: 100%;
    
    background-image: var(--nav-swipe);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding-right: 35px; 
    padding-left: 50px;
    
    filter: drop-shadow(-3px 4px 6px rgba(0,0,0,0.35));
    pointer-events: auto;
}

.nav-links-wrapper {
    display: flex;
    gap: clamp(20px, 3vw, 40px); 
    align-items: center;
    width: 100%;
    justify-content: center;
}

.nav-link-item {
    text-decoration: none;
    font-family: var(--heading-font);
    color: white;
    font-size: 1.4rem; 
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease;
    text-shadow: 1.5px 1.5px 0px rgba(0,0,0,0.2);
}

.nav-link-item i {
    font-size: 1.2rem;
}

.nav-link-item:nth-child(1) { transform: rotate(-3deg); }
.nav-link-item:nth-child(2) { transform: rotate(2deg); }
.nav-link-item:nth-child(3) { transform: rotate(-1.5deg); }

.nav-link-item:hover {
    transform: scale(1.1) rotate(0deg) !important;
    color: #eee;
}

@media (max-width: 768px) {
    .main-nav-overlay {
        width: 75%;
        top: 10px !important;
        height: 60px;
    }
    
	.nav-links-wrapper {
        gap: 60px;
		padding-right: 30px;
    }

    .nav-swipe-container {
        padding-left: 40px;
        padding-right: 20px;
    }

    .nav-link-item span {
        display: none;
    }

    .nav-link-item i {
        font-size: 1.6rem;
    }
}

.main-footer {
    padding: 60px 20px 160px 20px;
    text-align: center;
    color: white;
    position: relative;
    z-index: 5;
}

.baseboard-trim {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--trim-texture) repeat-x;
    background-size: contain;
    pointer-events: none;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.made-by {
    font-family: var(--heading-font);
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.9;
}

.made-by a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.made-by a:hover {
    color: white;
    text-shadow: 0 0 10px var(--accent-color);
}

.copyright {
    font-family: var(--body-font);
    font-size: 0.9rem;
    opacity: 0.6;
    margin: 0;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 40px auto;
    gap: 40px;
}

.footer-newsletter h3 {
    font-family: var(--heading-font);
    margin-bottom: 10px;
    font-size: 1.4rem;
    letter-spacing: 1px;
}

.footer-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    box-sizing: border-box;
}

.footer-bottom p {
    margin: 0;
    width: 100%;
    text-align: center;
}

.made-by {
    letter-spacing: 1px;
    padding-left: 1px; 
}

@media (max-width: 768px) {
    .main-footer {
        padding: 40px 20px;
    }

    .footer-content {
        padding-bottom: 100px;
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-left, .footer-right { width: 100%; }
    .inline-form { justify-content: center; }

    .footer-bottom { 
        padding-bottom: 120px;
    }
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-box {
    background: var(--accent-color);
    width: 100%;
    max-width: 500px;
    padding: clamp(30px, 8vw, 60px);
    border-radius: 15px;
    position: relative;
    text-align: center;
    color: white;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

button, .rounded-btn, .sub-btn, .find-btn, .today-btn, .theme-btn {
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

button:hover, .rounded-btn:hover, .sub-btn:hover, .find-btn:hover, .theme-btn:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.modal-content h1 { font-size: 4rem; margin: 0; }
.modal-content p { font-family: var(--body-font); margin-bottom: 25px; }

.name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }

.newsletter-form input {
    border: 1px solid rgba(255,255,255,0.1);
    padding: 12px;
    color: white;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    font-family: var(--body-font);
}

.sub-btn {
    width: 100%;
    margin-top: 15px;
    padding: 15px;
    border: none;
    background: white;
    color: var(--accent-color); 
    font-family: var(--heading-font);
    font-size: 1.5rem;
    cursor: pointer;
}

.footer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-bottom: 120px;
}

.social-links {
    font-size: 2.5rem;
    display: flex;
    gap: 20px; 
    justify-content: center;
}
.social-links a { color: white; transition: 0.3s; }
.social-links a:hover { color: var(--accent-color); transform: scale(1.1); }

.inline-form { display: flex; gap: 10px; width: 100%; max-width: 400px; }
.inline-form input { flex: 1; padding: 10px; border-radius: 4px; border: none; }
.inline-form button { 
    background: var(--accent-color); 
    color: white; 
    border: none; 
    padding: 10px 20px; 
    font-family: var(--heading-font);
    cursor: pointer;
}