/* 
 * Orleans Gossiper - Centralized Theme Configuration
 * Single source of truth for all theme assets, graphics, and styling
 * Change this file to update the entire site's theme
 */

/* Theme Transitions */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Theme Backgrounds */
body {
    margin: 0;
    background-color: rgb(243 244 246);
    background-image: none;
    background-repeat: no-repeat;
    background-size: auto;
}

/* Global link colors - force black instead of default blue */
a,
a:visited {
    color: #000 !important;
}

a:hover,
a:focus {
    color: #111 !important;
}

[data-theme="dark"] a,
[data-theme="dark"] a:visited {
    color: #fff !important;
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
    color: #e5e7eb !important;
}

[data-theme="dark"] body {
    background-color: rgb(17 24 39);
    background-image: none;
}

/* ===================================
   THEME GRAPHIC AREA (Top-Left Corner)
   =================================== */

#themeGraphicArea {
    position: fixed;
    top: 0;
    left: 0;
    width: 480px;
    height: 480px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    background-image: url('i/top-left-graphic-default.png');
    background-position: 0 0;
    transition: background-image 0.3s ease;
    z-index: -1;
    pointer-events: none;
}

/* Theme graphic variations */
body[data-background-theme="default"] #themeGraphicArea {
    background-image: url('i/top-left-graphic-default.png');
}

[data-theme="dark"] #themeGraphicArea {
    background-image: url('i/top-left-graphic-default.png');
}

/* Mobile responsive theme graphic */
@media (max-width: 640px) {
    #themeGraphicArea {
        width: 360px;
        height: 360px;
        opacity: 0.3;
    }
}

/* Custom theme graphic size classes */
.graphic-sm { width: 80px; height: 80px; }
.graphic-md { width: 128px; height: 128px; }
.graphic-lg { width: 256px; height: 256px; }
.graphic-xl { width: 336px; height: 336px; }
.graphic-2xl { width: 400px; height: 400px; }
.graphic-3xl { width: 500px; height: 500px; }
.graphic-4xl { width: 600px; height: 600px; }

/* ===================================
   INLINE LOGO (Next to Site Title)
   =================================== */

.inline-logo {
    width: 87px;
    height: 87px;
    object-fit: contain;
    transition: filter 0.3s ease;
    content: url('i/og-logo-black.svg');
}

[data-theme="dark"] .inline-logo {
    content: url('i/og-logo-white.svg');
}

/* Mobile responsive logo sizing */
@media (max-width: 640px) {
    .inline-logo {
        width: 61px;
        height: 61px;
    }
}

/* ===================================
   QUICK THEME SWITCHING
   To change themes, update these paths:
   - Christmas: i/christmas/top-left-graphic-default.webp
   - Default: i/top-left-graphic-default.webp
   - Custom: add your path here
   =================================== */

/* ===================================
   HOLIDAY DECORATIONS (Header images)
   Positions stick to logo (holly) and title (bells)
   =================================== */

/* Header title row – logo and title sit inline */
.header-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Logo wrapper – position relative for centering */
.logo-with-holly {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0rem;
}

/* Title wrapper with bells – title text + bells in corner */
.title-with-bells {
    position: relative;
    display: inline-block;
}

/* Bells stuck to bottom-right of title */
.bells-decoration {
    display: none;
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .header-title-row {
        gap: 0.5rem;
    }
    
    
    .bells-decoration {
        width: 70px;
        height: 70px;
        bottom: -8px;
        right: -45px;
    }
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .header-title-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .logo-with-holly {
        gap: 0.25rem;
    }
    
    
    .bells-decoration {
        width: 45px;
        height: 45px;
        bottom: -3px;
        right: -20px;
    }
}