/* --- MEDITERRANEAN CLAY & SUNSET THEME --- */
body {
    background-color: #F8F4EE !important;
    color: #3E2723 !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-image: radial-gradient(circle at 10% 10%, #faf6f0 0%, #f4eee5 100%) !important;
}

/* Smooth Warm Clay Cards: Cream backgrounds with earthy borders and cozy shadow */
.bg-white, .dark\:bg-slate-900, [class*="bg-white"], [class*="dark:bg-slate-900"] {
    background-color: #FFFFFF !important;
    border: 1px solid #EADFD0 !important;
    box-shadow: 0 12px 36px rgba(62, 39, 37, 0.04) !important;
    border-radius: 24px !important;
    color: #3E2723 !important;
}
.dark .bg-white, .dark .dark\:bg-slate-900 {
    background-color: #231C18 !important;
    border-color: #382D27 !important;
    color: #F8F4EE !important;
}

/* Organically rounded forms & elements */
.rounded-3xl, .rounded-2xl, .rounded-xl, .rounded-lg {
    border-radius: 20px !important;
}

/* Warm Mediterranean Buttons (Ochre / Terracotta) */
.bg-rose-500, .bg-rose-600, .bg-brand-accent, [class*="bg-rose-500"], [class*="bg-rose-600"] {
    background-color: #C2593F !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 18px rgba(194, 89, 63, 0.25) !important;
    text-transform: capitalize !important;
    letter-spacing: normal !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.bg-rose-500:hover, .bg-rose-600:hover, [class*="bg-rose-500"]:hover, [class*="bg-rose-600"]:hover {
    background-color: #A9432B !important;
    box-shadow: 0 8px 24px rgba(194, 89, 63, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Earthy inputs */
input, select, textarea {
    background-color: #FFFFFF !important;
    border: 1px solid #EADFD0 !important;
    color: #3E2723 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
}
.dark input, .dark select, .dark textarea {
    background-color: #2B211C !important;
    border-color: #3D2F28 !important;
    color: #F8F4EE !important;
}

/* Typography: Unified Plus Jakarta Sans across headings, titles, and message content */
h1, h2, h3, h4, .font-serif, [class*="font-serif"], .serif-font {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
    color: #3E2723 !important;
}
.dark h1, .dark h2, .dark h3, .dark h4 {
    color: #F8F4EE !important;
}

/* Organic links */
a {
    color: #C2593F !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
a:hover {
    color: #A9432B !important;
    text-decoration: underline !important;
}

/* Warm weather widget cards */
.city-clock-card {
    background-color: #FAF6F0 !important;
    border: 1px solid #EADFD0 !important;
}
.dark .city-clock-card {
    background-color: #2B211C !important;
    border-color: #3D2F28 !important;
}

.mono-font {
    font-family: 'JetBrains Mono', monospace;
}
/* Custom scrollbar for modern looks */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(194, 89, 63, 0.2);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(194, 89, 63, 0.4);
}

/* Mobile Typography Scaling & Custom Mobile Layout Adjustments */
@media (max-width: 639px) {
    html {
        font-size: 150% !important;
    }
    input, select, textarea {
        font-size: 1rem !important;
    }
    .text-\[10px\] {
        font-size: 15px !important;
    }
    .text-\[9px\] {
        font-size: 13.5px !important;
    }

    /* 1) Top Banner Title: reduced by 10% & centered */
    .top-forum-banner-title {
        font-size: 1.0125rem !important; /* ~16px (10% reduction) */
        text-align: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-flex !important;
        width: 100% !important;
    }

    /* 2) General Forum Topics header above search: increased by 10% */
    .forum-search-topics-header {
        font-size: 0.95rem !important; /* ~15px (10% increase) */
        font-weight: 700 !important;
    }

    /* 3) Thread cards typography */
    /* Username */
    .thread-author-name {
        font-size: 0.8rem !important; /* ~12px */
    }

    /* Thread Title: reduced by 10%, exactly 20% larger than username (0.8rem * 1.2 = 0.96rem) */
    .thread-title, .thread-title a, h4.thread-title, .thread-card h4, .thread-card h4 a {
        font-size: 0.96rem !important; /* ~14.4px */
        line-height: 1.35 !important;
    }

    /* Tag/Badge text (#General Forum • Relocation) */
    .thread-badge-tag, .thread-badge-cat {
        font-size: 0.78rem !important; /* ~12px */
    }

    /* Thread Body/Content text: 5% larger than tag/badge text (0.78rem * 1.05 = 0.82rem) */
    .thread-content-text, .thread-card .thread-content-text {
        font-size: 0.82rem !important; /* ~13px */
        line-height: 1.5 !important;
    }

    h1 {
        font-size: 1.35rem !important;
    }
    h2 {
        font-size: 1.35rem !important;
    }
    h3 {
        font-size: 1.125rem !important;
    }
}