/**
 * DropX Prime System — Light Theme Refinement
 * V10.2 — Deep Beige Harmony (core refinement; final harmony loaded separately)
 *
 * This file contains light-theme-only corrections for components that still
 * carry legacy dark/cyber surfaces. It intentionally does not use !important.
 */

/* ========================================================================
   1. BACKGROUND
   ------------------------------------------------------------------------
   A teljes Light háttér egyetlen forrásból, az effects.css-ből érkezik.
   Ez a fájl csak felületi/komponens finomhangolást végez.
   ======================================================================== */

/* ========================================================================
   2. HEADER — stone/beige harmony + readable logo/nav depth
   ======================================================================== */
body.light-mode .sticky-header-wrapper {
    background: rgba(196, 176, 149, .97);
    border-color: rgba(71, 51, 34, .22);
    box-shadow: 0 12px 32px rgba(55, 39, 25, .20);
}

body.light-mode .desktop-header {
    background: linear-gradient(180deg, #e8dccb 0%, #d8c6ad 100%);
    border-bottom-color: rgba(126, 87, 35, .30);
    box-shadow:
        inset 0 1px 0 rgba(255, 246, 226, .75),
        0 7px 22px rgba(54, 39, 25, .14);
}

body.light-mode .logo-img {
    filter: drop-shadow(0 2px 2px rgba(55, 39, 25, .30))
            drop-shadow(0 0 8px rgba(149, 102, 28, .24));
}

body.light-mode .logo-main {
    color: #2c2118;
    text-shadow:
        0 1px 0 rgba(255, 244, 222, .90),
        0 2px 3px rgba(58, 41, 26, .26),
        0 0 10px rgba(149, 102, 28, .08);
}

body.light-mode .logo-main span,
body.light-mode .logo-glitch {
    color: #8e5f18;
    text-shadow:
        0 1px 0 rgba(255, 244, 222, .75),
        0 0 8px rgba(149, 102, 28, .22);
}

body.light-mode .desktop-nav a {
    color: #5b4a3b;
    text-shadow: 0 1px 0 rgba(255, 244, 222, .55);
}

body.light-mode .desktop-nav a:hover,
body.light-mode .desktop-nav a.active {
    color: #2b2119;
    text-shadow:
        0 1px 0 rgba(255, 245, 226, .75),
        0 2px 5px rgba(63, 44, 28, .18);
}

body.light-mode .desktop-nav a i,
body.light-mode .desktop-nav a svg,
body.light-mode .header-right-zone svg,
body.light-mode .landing-submenu svg {
    color: #675443;
    filter: drop-shadow(0 1px 1px rgba(58, 41, 26, .18));
}

body.light-mode .header-right-zone > * {
    text-shadow: 0 1px 0 rgba(255, 244, 224, .55);
}

body.light-mode .header-integrated-search .search-input-container input {
    background: linear-gradient(180deg, #eadfce 0%, #dfceb6 100%);
    color: #34281e;
    border-color: rgba(126, 87, 35, .34);
    box-shadow: inset 0 1px 3px rgba(67, 48, 31, .08), 0 2px 8px rgba(55, 39, 25, .08);
}

body.light-mode .landing-submenu {
    background: linear-gradient(180deg, #d1bda2 0%, #c1a98c 100%);
    border-bottom-color: rgba(77, 55, 35, .24);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 224, .42),
        0 10px 24px rgba(55, 39, 25, .16);
}

body.light-mode .landing-submenu a {
    color: #625140;
    text-shadow: 0 1px 0 rgba(255, 244, 224, .50);
}

body.light-mode .landing-submenu a:hover,
body.light-mode .landing-submenu a.active {
    color: #2d2118;
    background: linear-gradient(180deg, rgba(242, 226, 201, .50), rgba(151, 104, 34, .10));
    box-shadow: 0 5px 14px rgba(55, 39, 25, .10), inset 0 1px 0 rgba(255, 247, 230, .60);
}

/* ========================================================================
   3. GLOBAL SURFACES — layered beige, never sterile white
   ======================================================================== */
body.light-mode .card,
body.light-mode .profile-section-card,
body.light-mode .post-card,
body.light-mode .post-publisher-card,
body.light-mode .feed-sidebar-left > *,
body.light-mode .feed-sidebar-right > *,
body.light-mode .info-sidebar-widget-box,
body.light-mode .promo-deck-section,
body.light-mode .home-sidebar-groups-box,
body.light-mode .official-blog-sidebar-box {
    background:
        linear-gradient(145deg, rgba(232, 218, 197, .97) 0%, rgba(211, 191, 163, .97) 100%);
    border-color: rgba(76, 55, 36, .23);
    box-shadow:
        0 18px 40px rgba(57, 41, 26, .16),
        0 4px 12px rgba(57, 41, 26, .08),
        inset 0 1px 0 rgba(255, 246, 226, .58);
}

body.light-mode .card:hover,
body.light-mode .profile-section-card:hover,
body.light-mode .post-card:hover {
    box-shadow:
        0 22px 48px rgba(57, 41, 26, .19),
        0 0 0 1px rgba(142, 95, 24, .22),
        inset 0 1px 0 rgba(255, 246, 226, .62);
}

body.light-mode .post-card {
    background: linear-gradient(145deg, #eee3d2 0%, #d8c4a7 100%);
    border-color: rgba(76, 55, 36, .24);
}

body.light-mode .post-card .post-content,
body.light-mode .post-card .post-body,
body.light-mode .post-card .post-text {
    color: #403328;
    text-shadow: 0 1px 0 rgba(255, 244, 224, .52), 0 1px 3px rgba(66, 47, 30, .10);
}

/* ========================================================================
   4. POST MEDIA — remove legacy dark frames around images
   ======================================================================== */
body.light-mode .post-tile-gallery,
body.light-mode .tile-item,
body.light-mode .post-tile-grid.tiles-1 .parsed-post-image {
    background: linear-gradient(145deg, #d4c0a3, #bda587);
    border-color: rgba(76, 55, 36, .22);
}

body.light-mode .tile-overlay-more {
    background: rgba(67, 49, 33, .72);
    border-color: rgba(189, 133, 48, .48);
    color: #f0d6a4;
    text-shadow: 0 2px 8px rgba(33, 23, 15, .55);
}

body.light-mode .tile-item:hover .tile-overlay-more {
    background: rgba(67, 49, 33, .60);
}

body.light-mode .gallery-item-card,
body.light-mode .media-stack-deck-wrapper .gallery-item-card {
    background: #d1b99a;
    border-color: rgba(76, 55, 36, .22);
    box-shadow: 0 8px 18px rgba(57, 41, 26, .13);
}

body.light-mode .media-date-badge {
    background: rgba(67, 49, 33, .82);
    color: #efcf93;
    border-color: rgba(189, 133, 48, .45);
}

/* ========================================================================
   5. COMMENTS — warm surface instead of charcoal cyber blocks
   ======================================================================== */
body.light-mode .post-comments-section,
body.light-mode .post-actions-footer,
body.light-mode .post-reactions-bar {
    background: linear-gradient(180deg, #e0d0b8 0%, #cdb596 100%);
    border-color: rgba(76, 55, 36, .20);
    color: #3f3125;
}

body.light-mode .comment-bubble-box {
    background: linear-gradient(145deg, #eadfce 0%, #d8c3a5 100%);
    border-color: rgba(76, 55, 36, .22);
    box-shadow: inset 0 1px 0 rgba(255, 247, 230, .54), 0 5px 14px rgba(57, 41, 26, .10);
}

body.light-mode .comment-content,
body.light-mode .comment-author-name-btn,
body.light-mode .comment-time-sub,
body.light-mode .comment-meta-text,
body.light-mode .vote-net-score {
    color: #46372a;
    text-shadow: 0 1px 0 rgba(255, 246, 227, .56), 0 1px 2px rgba(62, 44, 29, .10);
}

body.light-mode .comment-edit-textarea {
    background: linear-gradient(180deg, #e7d8c2 0%, #d3bda0 100%);
    color: #34271d;
    border-color: rgba(76, 55, 36, .25);
    box-shadow: inset 0 2px 7px rgba(62, 44, 29, .09);
}

body.light-mode .comment-attachment-item,
body.light-mode .comment-preview-thumbnail {
    background: #c3a887;
    border-color: rgba(126, 87, 35, .34);
    box-shadow: 0 4px 12px rgba(57, 41, 26, .16);
}

body.light-mode .comment-content .cyber-quote {
    background: rgba(142, 95, 24, .10);
    color: #665342;
}

body.light-mode .comment-content .cyber-code-pre {
    background: #4a3b2f;
    border-color: rgba(142, 95, 24, .30);
    color: #ead9bb;
    box-shadow: inset 0 1px 5px rgba(25, 18, 12, .24);
}

body.light-mode .comment-content .cyber-inline-code {
    background: rgba(76, 55, 36, .10);
    border-color: rgba(76, 55, 36, .18);
}

body.light-mode .comment-content .cyber-spoiler {
    background: #6a5642;
    border-color: rgba(142, 95, 24, .40);
}

body.light-mode .comment-vote-group {
    background: rgba(78, 57, 38, .12);
    border-color: rgba(76, 55, 36, .20);
}

/* ========================================================================
   6. PUBLISHER — remove the last gray/black editor pieces
   ======================================================================== */
body.light-mode .publisher-formatting-toolbar {
    background: linear-gradient(180deg, #c7b092 0%, #b79e7f 100%);
    color: #3c2d21;
    border-color: rgba(76, 55, 36, .24);
    text-shadow: 0 1px 0 rgba(255, 245, 225, .50);
}

body.light-mode .post-editor-textarea {
    background: linear-gradient(180deg, #e7dac7 0%, #d4c0a3 100%);
    color: #382a20;
}

body.light-mode .post-publisher-card .publisher-toolbar button,
body.light-mode .post-publisher-card .toolbar-btn {
    color: #4e3e30;
}

/* ========================================================================
   7. DROPDOWNS — dark espresso remains, but now belongs to the palette
   ======================================================================== */
body.light-mode .profile-dropdown,
body.light-mode .notifications-dropdown,
body.light-mode .dropdown-menu,
body.light-mode .user-dropdown {
    background: linear-gradient(180deg, #c5ad91 0%, #a98d6f 100%);
    color: #34271d;
    border-color: rgba(126, 87, 35, .42);
    box-shadow:
        0 24px 55px rgba(46, 32, 20, .28),
        0 0 0 1px rgba(255, 239, 208, .16),
        inset 0 1px 0 rgba(255, 239, 214, .45);
}

body.light-mode .profile-dropdown a,
body.light-mode .notifications-dropdown a,
body.light-mode .dropdown-menu a,
body.light-mode .user-dropdown a {
    color: #49372a;
    text-shadow: 0 1px 0 rgba(255, 241, 219, .42), 0 1px 3px rgba(54, 38, 24, .10);
}

body.light-mode .profile-dropdown a:hover,
body.light-mode .notifications-dropdown a:hover,
body.light-mode .dropdown-menu a:hover,
body.light-mode .user-dropdown a:hover {
    background: linear-gradient(90deg, rgba(142, 95, 24, .18), rgba(142, 95, 24, .06));
    color: #704a12;
}

/* ========================================================================
   8. BLOG — readable body, headings and comments in the light theme
   ======================================================================== */
body.light-mode .blog-article-container {
    background: linear-gradient(145deg, #e9ddca 0%, #d5c1a4 100%);
    border-color: rgba(76, 55, 36, .24);
    box-shadow: 0 24px 55px rgba(55, 39, 25, .22), inset 0 1px 0 rgba(255, 246, 226, .55);
}

body.light-mode .blog-cover-wrapper {
    background: #8d765d;
}

body.light-mode .blog-cover-overlay {
    background: linear-gradient(180deg, rgba(57, 42, 29, 0) 48%, rgba(57, 42, 29, .78) 100%);
}

body.light-mode .blog-top-author-badge {
    color: #3a2b20;
    background: rgba(232, 218, 197, .72);
    border-color: rgba(76, 55, 36, .20);
}

body.light-mode .blog-meta-item {
    color: #695746;
    text-shadow: 0 1px 0 rgba(255, 244, 224, .52);
}

body.light-mode .blog-article-title,
body.light-mode .blog-topic-title,
body.light-mode .blog-comments-title {
    color: #2f241b;
    text-shadow: 0 1px 0 rgba(255, 244, 224, .70), 0 2px 5px rgba(60, 43, 28, .15);
}

body.light-mode .blog-article-body,
body.light-mode .blog-article-body p,
body.light-mode .blog-article-body li,
body.light-mode .blog-article-body span,
body.light-mode .blog-article-body div {
    color: #514131;
    text-shadow: 0 1px 0 rgba(255, 245, 225, .60), 0 1px 3px rgba(64, 45, 29, .10);
}

body.light-mode .blog-article-body strong,
body.light-mode .blog-article-body b,
body.light-mode .blog-article-body h2,
body.light-mode .blog-article-body h3,
body.light-mode .blog-article-body h4 {
    color: #302319;
}

body.light-mode .blog-topic-header-box {
    background: linear-gradient(90deg, rgba(142, 95, 24, .13), rgba(142, 95, 24, 0));
    border-left-color: #a56f20;
}

body.light-mode .blog-inline-img {
    border-color: rgba(76, 55, 36, .22);
    box-shadow: 0 10px 24px rgba(57, 41, 26, .18);
}

body.light-mode .blog-article-footer-tools,
body.light-mode .blog-comments-container {
    border-color: rgba(76, 55, 36, .18);
}

body.light-mode .blog-comment-textarea {
    background: linear-gradient(180deg, #e6d7c0 0%, #d3bda0 100%);
    color: #35281e;
    border-color: rgba(76, 55, 36, .23);
    box-shadow: inset 0 2px 7px rgba(57, 41, 26, .08);
}

body.light-mode .blog-comment-card,
body.light-mode .blog-guest-login-card {
    background: linear-gradient(145deg, #e1d0b7 0%, #cdb492 100%);
    border-color: rgba(76, 55, 36, .20);
    color: #46372a;
    box-shadow: 0 8px 20px rgba(57, 41, 26, .10), inset 0 1px 0 rgba(255, 245, 225, .45);
}

/* ========================================================================
   9. FOOTER — make the bottom of the page part of the same visual system
   ======================================================================== */
body.light-mode .site-footer,
body.light-mode footer,
body.light-mode .footer-grid {
    background: linear-gradient(180deg, #d4c1a6 0%, #bba184 100%);
    color: #5a4837;
    border-color: rgba(76, 55, 36, .22);
    box-shadow: 0 -14px 30px rgba(57, 41, 26, .16), inset 0 1px 0 rgba(255, 245, 225, .44);
}

body.light-mode .footer-legal,
body.light-mode .footer-grid,
body.light-mode .footer-badge,
body.light-mode .designer-badge {
    text-shadow: 0 1px 0 rgba(255, 244, 224, .55), 0 1px 3px rgba(62, 44, 29, .10);
}

body.light-mode .footer-badge,
body.light-mode .designer-badge {
    background: rgba(232, 216, 191, .48);
    border-color: rgba(126, 87, 35, .28);
    box-shadow: 0 5px 14px rgba(57, 41, 26, .10), inset 0 1px 0 rgba(255, 246, 226, .45);
}

body.light-mode .legal-link {
    color: #5e4c3a;
}

body.light-mode .legal-link:hover,
body.light-mode .service-tag,
body.light-mode .designer-name {
    color: #8e5f18;
    text-shadow: 0 1px 0 rgba(255, 245, 225, .58), 0 0 8px rgba(142, 95, 24, .16);
}

/* ========================================================================
   10. LIGHT SCROLLBAR — warm and quiet
   ======================================================================== */
body.light-mode ::-webkit-scrollbar-track {
    background: #a99276;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #987b59, #765c42);
    border: 2px solid #a99276;
    box-shadow: 0 0 8px rgba(142, 95, 24, .14);
}