/* ======================================================= */
/* GLOBAL VARIABLES & FONTS                  */
/* ======================================================= */
:root {
    --theme-bg: #2d0e09;
    --theme-panel: #221502;
    --theme-border: #221502;
    --theme-text: #a1722f;
    --theme-text-hover: #b98d4a; 
}

.font-heading { 
    font-family: 'Cinzel', serif; 
    letter-spacing: 0.5px; 
}

.font-body { 
    font-family: Arial, sans-serif; 
}

/* ======================================================= */
/* BASE & LAYOUT STYLES                   */
/* ======================================================= */
.body-background {
    background-color: #5d170b;
    background-image: url("https://www.transparenttextures.com/patterns/black-scales.png");
    color: var(--theme-text);
}

.page-frame {
    background-color: var(--theme-bg);
    border: 2px solid var(--theme-border);
    box-shadow: 0 0 25px rgba(0,0,0,0.7);
}

.logo-img {
    width: 255px;
    height: 70px;
    object-fit: contain;
}

/* ======================================================= */
/* REUSABLE COMPONENTS                    */
/* ======================================================= */
.panel-header {
    background: linear-gradient(to bottom, var(--theme-bg), var(--theme-panel));
    border-bottom: 1px solid var(--theme-border);
    cursor: pointer;
    color: var(--theme-text);
}

.panel-content-dark {
    background-color: rgba(34, 21, 2, 0.5); /* theme-panel with opacity */
}

.news-card-header {
    background-color: var(--theme-panel);
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text);
}

.ornate-border {
    border: 1px solid var(--theme-border);
    background-color: var(--theme-bg);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
}

.text-shadow {
    text-shadow: 2px 2px 2px var(--theme-border);
}

/* ======================================================= */
/* SLIDER STYLES (If any specific non-tailwind styles are needed) */
/* ======================================================= */
.slider-container {
    transform: translateX(0%);
}

/* ======================================================= */
/* FOOTER STYLES                        */
/* ======================================================= */
.footer-content {
    background-color: rgba(34, 21, 2, 0.3); /* Slightly transparent panel color */
    border-top: 2px solid var(--theme-border);
}

.footer-bar {
    background-color: var(--theme-panel);
    border-top: 2px solid var(--theme-border);
}