/* =========================================
   1. BRANDING & LOGO (PIXEL-PERFECT ALIGN)
   ========================================= */

.server-banner, .hero-widget__img, .brand__logo-full {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.column-link--logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    padding: 10px 14px !important; 
    margin: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

.column-link--logo svg, .column-link--logo img {
    display: none !important;
}

.column-link--logo::before {
    content: "";
    display: block !important;
    width: 70px !important; 
    height: 70px !important;
    background-image: url('https://civicohub.nl/system/site_uploads/files/000/000/001/original/d181b52ab0a4d534.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
    margin-right: 6px !important; 
}

.column-link--logo::after {
    content: "CivicoHub" !important;
    color: #c5a059 !important;
    font-weight: bold !important;
    font-size: 1.9rem !important;
    line-height: 1 !important;
    transform: translateY(2px); 
}

/* =========================================
   2. SCROLLBAR KILLER & COMPACT MENU
   ========================================= */

.drawer__inner, .scrollable, .column-header__wrapper {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.drawer__inner::-webkit-scrollbar, .scrollable::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

.column-link {
    padding: 7px 14px !important; 
    display: flex !important;
    align-items: center !important;
}

/* =========================================
   3. CORE THEME & BYPASSES
   ========================================= */

body, .ui, .column, .drawer, .scrollable {
    background: #0a0a0a !important;
}

.column-link, .column-link span, .column-header__title {
    color: #c5a059 !important;
    font-weight: bold !important;
}

.button {
    background: #c5a059 !important;
    color: #000 !important;
    transition: all 0.3s ease-in-out !important;
}

.compose-form__publish-button-wrapper button, 
.compose-form__publish-button-wrapper button:disabled {
    background: #c5a059 !important;
    color: #000 !important;
    opacity: 1 !important;
}

.character-counter { color: #c5a059 !important; }

.logo-container::before, .auth-page__logo::before {
    content: "";
    display: block !important;
    width: 250px !important;
    height: 250px !important;
    background-image: url('https://civicohub.nl/system/site_uploads/files/000/000/001/original/d181b52ab0a4d534.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin: 0 auto 15px auto !important;
}

/* =========================================
   4. MOBIELE BRANDING (VERVANGING LOGO)
   ========================================= */

.ui__header .logo svg, 
.drawer__header svg, 
button.column-header__back-button i.fa-mastodon,
.tabs-bar__link i.fa-mastodon,
.logo-container svg, 
.auth-page__logo svg {
    display: none !important;
}

.ui__header .logo::before {
    content: "";
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    background-image: url('https://civicohub.nl/system/site_uploads/files/000/000/001/original/d181b52ab0a4d534.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
}

.drawer__header .logo::before {
    content: "";
    display: inline-block !important;
    width: 40px !important;
    height: 40px !important;
    background-image: url('https://civicohub.nl/system/site_uploads/files/000/000/001/original/d181b52ab0a4d534.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    margin-right: 10px !important;
}

/* =========================================
   5. ABOUT PAGE GOLDEN TYPOGRAPHY
   ========================================= */

.about__section h1, 
.about__section h2, 
.about__section h3, 
.about__section h4 {
    color: #c5a059 !important;
    font-weight: bold !important;
    border-bottom-color: rgba(197, 160, 89, 0.3) !important;
}

.about__section hr {
    border-top: 1px solid rgba(197, 160, 89, 0.2) !important;
    margin: 20px 0 !important;
}

/* =========================================
   6. FINAL POLISH (TRENDS & SEARCH)
   ========================================= */

.trends__item__sparkline path {
    stroke: #c5a059 !important;
}

.search__input {
    background: #1a1a1a !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
    color: #c5a059 !important;
}

.search__input:focus {
    border-color: #c5a059 !important;
}

/* =========================================
   7. TOOT WINDOW & COMPOSE FORM
   ========================================= */

.compose-form__buttons-wrapper .poll-button i,
.compose-form__buttons-wrapper .emoji-button i,
.compose-form__buttons-wrapper .icon-button i,
.compose-form__buttons-wrapper .text-icon-button {
    color: #c5a059 !important;
}

.privacy-dropdown__value.icon-button,
.language-dropdown__value.icon-button {
    color: #c5a059 !important;
    border: 1px solid rgba(197, 160, 89, 0.4) !important;
    border-radius: 4px;
    padding: 2px 6px !important;
}

.character-counter {
    color: #c5a059 !important;
    font-weight: bold !important;
    opacity: 1 !important;
}

.autosuggest-textarea__textarea {
    background: #111 !important;
    color: #eee !important;
    border-bottom: 2px solid rgba(197, 160, 89, 0.2) !important;
}

/* =========================================
   8. NEW: GLASS-EFFECT & DEPTH
   ========================================= */

.column, .drawer__inner, .scrollable {
    background: rgba(15, 15, 15, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(197, 160, 89, 0.15) !important;
    border-radius: 12px !important;
}

/* =========================================
   9. NEW: HOVER EFFECTS & GLOW
   ========================================= */

.button:hover {
    background: #d4af37 !important;
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.5) !important;
}

.column-link:hover {
    background: rgba(197, 160, 89, 0.15) !important;
    color: #fff !important;
    transition: background 0.2s ease-in-out !important;
}

.autosuggest-textarea__textarea:focus {
    border-bottom: 2px solid #c5a059 !important;
    background: #050505 !important;
    box-shadow: inset 0 0 10px rgba(197, 160, 89, 0.1) !important;
}

.account__avatar {
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
}

/* =========================================
   10. FOOTER CLEANUP (CHIRURGISCHE VERWIJDERING)
   ========================================= */

/* Verbergt specifiek alleen de onderste regel met Mastodon info */
.footer ul:last-of-type,
.footer p:last-of-type,
.about__meta__version,
.about__meta__powered-by {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}