/**
 * Klubovna Base Styles
 */

:root {
    /* Brand Colors */
    --color-orange-klu: #eb7f54;
    --color-dark-grey-klu: #31312f;
    --color-light-yellow-klu: #efe8c4;
    
    /* Base Colors */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-green: #3f5d3a;
    
    /* Event Type Colors - Add new ones here */
    --color-pink: #ffc0cb;
    --color-yellow: #ffff00;
    --color-red: #ff0000;
    
    /* Typography */
    --font-main: 'Stack Sans Headline', sans-serif;
    --font-serif: 'Instrument Serif', serif;
    --font-stack: 'Stack Sans Headline', sans-serif;
    --font-kollektiiv: 'Kollektiiv Klubovna', sans-serif;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/InstrumentSerif-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/InstrumentSerif-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Kollektiiv Klubovna';
    src: url('../fonts/KollektiivKlubovna-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Stack Sans Headline';
    src: url('../fonts/StackSansHeadline-VariableFont_wght.ttf') format('truetype');
}

body {
    background-image: url('../images/bg.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: var(--color-light-yellow-klu);
    font-family: var(--font-main);
    margin: 0;
    overflow-x: hidden;
}

a {
    color: var(--color-orange-klu);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
}

/* Fluid Typography / Responsive Fonts */
html {
    font-size: 16px;
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

h1, .h1 { font-size: clamp(2.5rem, 8vw, 4rem); }
h2, .h2 { font-size: clamp(2rem, 6vw, 3rem); }
h3, .h3 { font-size: clamp(1.5rem, 5vw, 2.2rem); }

/* Button Styles */
.wp-block-button__link,
button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background-image: url('../images/button-bg-yellow.png');
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    color: var(--color-dark-grey-klu) !important;
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-main);
    font-size: 1rem;
    padding: 0.8em 1.5em;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease;
    max-width: 100%;
    box-sizing: border-box;
}

.wp-block-button__link:hover,
button:hover,
.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    transform: scale(1.05);
    color: var(--color-dark-grey-klu) !important;
}

/* Grain Background Div */
.bg-grain,
.is-style-grain-bg,
.has-grain-bg-gradient-background {
    background-image: url('../images/div-bg-grain.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat;
    padding: 20px;
}

/* Fix for Gutenberg Editor background */
.editor-styles-wrapper {
    background-image: url('../images/bg.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: var(--color-light-yellow-klu);
}

/* Classic Editor (TinyMCE) Background */
body#tinymce {
    background-image: url('../images/div-bg-grain.png') !important;
    background-size: cover;
    background-color: var(--color-dark-grey-klu);
    color: var(--color-light-yellow-klu);
    padding: 20px;
}

.desktop-only {
    display: flex;
}

.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }
}