/*
Theme Name: Melting Horror
Theme URI: MeltingHorror.com
Description: Main stylesheet for Melting Horror extras
Author: Slade Labuschagne
Author URI: Melting Horror.com
Template: generatepress
Version: 1.0.0
*/

/**
 * =============================================================================
 *  Project:        Melting Horror 
 *  Filename:       style.css
 *  Description:    Main stylesheet for Melting Horror extras. 
 *  Version:        1.0.2
 *  Website:        Melting Horror.com
 *  Copyright :     (c) 2025 Melting Horror. All rights reserved.
 * 
 * =============================================================================
 * || 
 * ||               INDEX :
 * ||
 * ||   IMPORTS / ROOTS
 * ||   HEADER
 * ||   FOOTER
 * ||   CORE ELEMENTS
 * || 
 * || 
 * || 
 * || 
 * || 
 * || 
 * || 
 * ============================================================================= */
 

/*
============================================================
    IMPORTS / ROOTS
============================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

:root {
    --prime-text: #ffffff;    
    --prime-back: #1c1c1c;   
    --menu-hover: #dfdfdf;         
    --menu-shadow-light: #d1d1d1;  
    --menu-shadow-dark: #a2a2a2;              
}

body {background-color: var(--prime-back);margin: 0;font-family: 'Lora', serif;}

/*
============================================================
    HEADER
============================================================
*/

.header-container{position: fixed;width: 100%; background-color: #000000;opacity: 95%;z-index: 999;background: linear-gradient(to bottom, #000000 50%, rgba(0,0,0,0) 100%);padding-bottom: 2rem;}
#header {color: var(--prime-text);max-width: 1200px;margin: auto;display: flex;justify-content: space-between;align-items: center;padding: 1rem;}
.site-logo {display: flex;align-items: center;justify-content: center;perspective: 500px;transition: transform 0.2s ease;}
.logo-img {max-width: 80px;height: auto;}
.menu-section {display: flex;align-items: center;}
.main-menu ul {display: flex;gap: 16px;list-style: none;margin: 0;padding: 0;}
.main-menu li a {text-decoration: none;color: var(--prime-text);font-size: 1.2rem;text-shadow: 0 0 3px var(--prime-back), 0 0 6px var(--prime-back);transition: color 0.2s, transform 0.2s, text-shadow 0.2s;will-change: transition, text-shadow;font-weight: bold;}
.main-menu li a:hover {color: var(--menu-hover);text-shadow: 0 0 5px var(--menu-shadow-light), 0 0 10px var(--menu-shadow-dark);transform: scale(1.05);}
.account-icon {width: 34px;height: 34px;display: block;transition: transform 0.2s ease, filter 0.2s ease;}
.account-icon:hover {transform: scale(1.1);filter: brightness(1.2);}

/*
============================================================
    FOOTER
============================================================
*/

#footer{color: var(--prime-text);}

/*
============================================================
    HERO
============================================================
*/

.decal{z-index: 1;position: absolute;}
#hero-chain{width: 200px;top: -250px;right: 200px;rotate: -45deg;opacity: 80%;}
#hero-jester{z-index: 1;width: 40%; position: absolute;top: 300px;left: -200px;opacity: 50%;}
.hero-title{margin-top: 15rem; text-align: center; color: var( --prime-text); font-size: 100px; font-family: 'Cinzel Decorativ', cursive; font-weight: bold; }

/*
============================================================
    CORE ELEMENTS
============================================================
*/

.clickable {cursor: pointer !important;transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease;}
.clickable:hover {color: var(--menu-hover);transform: scale(1.05);}
.flex-sb{display: flex; justify-content: space-between;}
.flex-right{display: flex; justify-content: end;}
.site-content .content-area {width: 100%;}
.center{margin: 0rem auto; align-self: center;justify-items: center;align-items: center;text-align: center;}
.mm-content-container{border: var(--menu-hover) solid 0px; max-width: 90%;margin: 7rem auto; padding: 0rem; color: var(--prime-text);}
.line-white{width: 100%; margin: 1rem 0rem;height: 1px; background-color: var(--prime-text)}

 /* =========== FLEX DIVIDE =========== */
 
.flex-sevenfive{width:75%}
.flex-twofive{width:25%}

/*
============================================================
    STORY CONTENT BLOCK
============================================================
*/

.story-content{ margin: 15rem auto 0rem; text-align: justify; color: var( --prime-text); font-size: 1.05rem; font-family: 'Lora', serif; max-width:1000px; width:90%; padding-bottom: 10rem; border-bottom: 5px solid var( --prime-text)}
.story-content-footer{ margin: 2rem auto; max-width:1000px; width:90%;}
.story-content h1{ margin: 0rem auto 5rem; text-align: center; color: var( --prime-text); font-size: 50px; font-family: 'Cinzel Decorativ', cursive; max-width:1000px; width:100%;}
.story-content-footer h4{padding: 0.5rem; margin: 0; color: var( --prime-text); opacity: 50%; font-size: 0.85rem;}
.mm-tag-row{display: flex;flex-wrap: wrap;gap: 0.5rem;margin: 1rem 0;align-items: flex-start;}
.mm-tag{display: inline-block;padding: 0.25rem 0.6rem;font-size: 0.85rem;line-height: 1;border: 1px solid rgba(255,255,255);border-radius: 0.35rem;background: rgba(255,255,255,0.02);text-decoration: none;color: white;opacity: 50%;box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;transition: transform .08s ease, box-shadow .08s ease;}
.mm-tag:hover,
.mm-tag:focus {transform: translateY(-1px);color: white;  opacity: 80%;box-shadow: 0 4px 10px rgba(0,0,0,0.06);text-decoration: none;}

    /* =========== Smaller screens — slightly bigger click target =========== */
    
@media (max-width: 420px) {.mm-tag { padding: 0.35rem 0.8rem; font-size: 0.95rem; }}

/*
============================================================
    ACCOUNT
============================================================
*/

.user-icon-small{
    width: 50px;
    border-radius: 25px;
    height: 50px;
}

.user-tag{text-decoration: none;color: var(--prime-text);font-size: 1.2rem;text-shadow: 0 0 3px var(--prime-back), 0 0 6px var(--prime-back);transition: color 0.2s, transform 0.2s, text-shadow 0.2s;will-change: transition, text-shadow;font-weight: bold;}

/*
============================================================
    BUTTONS
============================================================
*/

/* Base button */
.mm-button {
    position: relative;
    border: 1px solid var(--prime-text);
    padding: 0.5rem 1rem;
    background-color: transparent;
    font-family: 'Lora', serif;
    color: var(--prime-text);
    transition: all 0.2s ease;
    cursor: pointer !important;
    z-index: 100;
}

/* Rattle animation */
@keyframes rattle {
    0% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-0.5px, 0.5px) rotate(-0.25deg); }
    20% { transform: translate(0.5px, -0.5px) rotate(0.25deg); }
    30% { transform: translate(-0.5px, 0.5px) rotate(-0.25deg); }
    40% { transform: translate(0.5px, -0.5px) rotate(0.25deg); }
    50% { transform: translate(-0.25px, 0.25px) rotate(0deg); }
    60% { transform: translate(0.25px, -0.25px) rotate(0deg); }
    70% { transform: translate(-0.25px, 0.25px) rotate(-0.25deg); }
    80% { transform: translate(0.25px, -0.25px) rotate(0.25deg); }
    90% { transform: translate(-0.25px, 0.25px) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Apply on hover */
.mm-button:hover {
    animation: rattle 0.5s ease-in-out infinite;
    background-color: transparent;
}

.rattle:hover{
    animation: rattle 1s ease-in-out infinite;
}

.icon-button-small{
    width: 45px;
    height: auto;
}

.mm-fancy-button{
    font-family: 'Cinzel Decorativ', cursive;
    position: relative;
    border: 0;
    padding: 0.5rem 1rem;
    background-color: transparent;
    color: var(--prime-text);
    transition: all 0.2s ease;
    cursor: pointer !important;
    z-index: 100;
}

.mm-fancy-button:hover {    background-color: transparent;}