/* ==========================================================================
   SIDEBAR.CSS
   Styles for sidebar.php and sidebar widgets (Social Grid, Newsletter, 
   Latest News, and Popular Listicle).
   ========================================================================== */

/* ==========================================================================
   1. Base Sidebar Container & Widget Layout
   ========================================================================== */
.in-sidebar { 
    font-family: var(--font-meta); 
}

.in-widget { 
    margin-bottom: 50px; 
}

.in-widget-title { 
    font-family: var(--font-sans); 
    font-size: 1.5rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: var(--color-text); 
    margin: 0 0 25px 0; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

/* ==========================================================================
   2. Stay Connected / Social Grids
   ========================================================================== */
/* Modern 2-Column Social Cards (sidebar.php) */
.sb-social-grid-2col { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
}

.sb-social-card-v2 { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 15px; 
    border: 1px solid var(--color-border); 
    border-radius: 8px; 
    text-decoration: none; 
    background: #fff; 
    transition: box-shadow 0.2s ease, transform 0.2s ease; 
}

.sb-social-card-v2:hover { 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    transform: translateY(-2px); 
}

.sb-social-card-v2 .icon-wrap { 
    width: 24px; 
    height: 24px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
}

.sb-social-card-v2 .icon-wrap svg { 
    width: 100%; 
    height: 100%; 
}

.sb-social-card-v2 .text-wrap { 
    display: flex; 
    flex-direction: column; 
}

.sb-social-card-v2 .count { 
    font-family: var(--font-sans); 
    font-weight: 700; 
    font-size: 1rem; 
    color: #111; 
    letter-spacing: -0.5px;
}

.sb-social-card-v2 .label { 
    font-family: var(--font-meta); 
    font-size: 12px; 
    color: #888; 
}

/* Standard Social Grid Alternative */
.in-social-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
}

.in-social-card { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 20px 10px; 
    border: 1px solid var(--color-border); 
    border-radius: 12px; 
    text-decoration: none; 
    transition: box-shadow 0.2s; 
}

.in-social-card:hover { 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); 
}

.in-social-card svg { 
    width: 28px; 
    height: 28px; 
    margin-bottom: 10px; 
}

.in-social-count { 
    font-family: var(--font-sans); 
    font-size: 1.15rem; 
    font-weight: 700; 
    color: var(--color-text); 
    margin-bottom: 2px;
}

/* ==========================================================================
   3. Sidebar Social List (List Style)
   ========================================================================== */
.sb-social-list { 
    display: flex; 
    flex-direction: column; 
    border: 1px solid var(--color-border); 
    border-bottom: none; 
    border-radius: 4px; 
    overflow: hidden; 
}

.sb-social-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 20px; 
    border-bottom: 1px solid var(--color-border); 
    text-decoration: none !important; 
    transition: background-color 0.2s; 
}

.sb-social-item:hover { 
    background-color: var(--color-surface); 
}

.sb-social-left { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    font-family: var(--font-sans); 
    font-size: 1rem; 
    font-weight: 700; 
    color: #111; 
    text-transform: uppercase; 
}

.sb-social-left svg { 
    width: 20px; 
    height: 20px; 
    fill: currentColor; 
}

.sb-social-follow { 
    font-family: var(--font-meta); 
    font-size: 13px; 
    color: #888; 
}

/* ==========================================================================
   4. Sidebar Newsletter Widget
   ========================================================================== */
.sb-newsletter { 
    background-color: #fff9f0; 
    padding: 30px; 
    border-radius: 8px; 
    margin-bottom: 40px; 
}

.sb-newsletter h3 { 
    font-family: var(--font-sans); 
    font-size: 1.75rem; 
    font-weight: 700; 
    color: #111; 
    margin: 0 0 10px 0; 
    line-height: 1.2; 
    text-transform: uppercase; 
}

.sb-newsletter p { 
    font-family: var(--font-serif); 
    font-size: 1rem; 
    color: #444; 
    line-height: 1.5; 
    margin-bottom: 20px; 
}

.sb-newsletter input[type="email"] { 
    width: 100%; 
    padding: 15px; 
    border: none; 
    background-color: #fff; 
    font-family: var(--font-meta); 
    font-size: 14px; 
    margin-bottom: 15px; 
    outline: none; 
}

.sb-newsletter button { 
    background-color: #000; 
    color: #fff; 
    font-family: var(--font-meta); 
    font-size: 15px; 
    font-weight: 700; 
    padding: 15px 30px; 
    border: none; 
    cursor: pointer; 
    margin-bottom: 20px; 
    transition: background 0.2s; 
    text-transform: uppercase; 
}

.sb-newsletter button:hover { 
    background-color: var(--color-logo-pink); 
}

.sb-newsletter label { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    font-family: var(--font-meta); 
    font-size: 12px; 
    color: #666; 
    line-height: 1.5; 
    cursor: pointer; 
}

.sb-newsletter input[type="checkbox"] { 
    margin-top: 3px; 
}

/* ==========================================================================
   5. Sidebar Latest News List Widget
   ========================================================================== */
.sb-latest-news-list { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

.sb-latest-item { 
    display: flex; 
    gap: 15px; 
    align-items: center; 
    justify-content: space-between; 
}

.sb-latest-item-text { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
}

.sb-latest-item-text h4 { 
    font-family: var(--font-sans); 
    font-size: 1rem; 
    font-weight: 700; 
    line-height: 1.4; 
    color: #111; 
    margin: 0 0 5px 0; 
    transition: color 0.2s; 
}

.sb-latest-item-text a { 
    text-decoration: none; 
}

.sb-latest-item-text a:hover h4 { 
    color: var(--color-logo-pink); 
}

.sb-latest-meta { 
    font-family: 'Roboto', sans-serif !important; 
    font-size: 13px !important; 
    font-weight: 500 !important; 
    text-transform: uppercase; 
    color: #888; 
}

.sb-latest-item-img { 
    width: 90px; 
    height: 75px; 
    flex-shrink: 0; 
    border-radius: 4px; 
    overflow: hidden; 
}

.sb-latest-item-img img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* ==========================================================================
   6. Sidebar Popular Listicle Widget
   ========================================================================== */
.sb-popular-listicle { 
    display: flex; 
    flex-direction: column; 
}

.sb-pop-featured { 
    margin-bottom: 20px; 
    padding-bottom: 20px; 
    border-bottom: 1px solid var(--color-border); 
}

.sb-pop-img { 
    width: 100%; 
    aspect-ratio: 16/9; 
    object-fit: cover; 
    border-radius: 4px; 
    margin-bottom: 12px; 
}

.sb-pop-title-main { 
    font-family: var(--font-sans); 
    font-size: 1.25rem; 
    font-weight: 700; 
    line-height: 1.3; 
    margin: 0 0 8px 0; 
}

.sb-pop-title-main a { 
    color: var(--color-text); 
    text-decoration: none; 
    transition: color 0.2s; 
}

.sb-pop-title-main a:hover { 
    color: #cc0000; 
}

.sb-pop-meta-main { 
    font-family: var(--font-meta); 
    font-size: 13px; 
    color: var(--color-text); 
    font-weight: 600; 
    text-transform: uppercase; 
}

.sb-pop-sep { 
    color: var(--color-border); 
    font-weight: 300; 
    margin: 0 6px; 
}

.sb-pop-list-items { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.sb-pop-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
}

.sb-pop-plus { 
    font-family: var(--font-meta); 
    font-size: 18px; 
    font-weight: 500; 
    color: var(--color-text); 
    line-height: 1.2; 
}

.sb-pop-title-list { 
    font-family: var(--font-sans); 
    font-size: 1.1rem; 
    font-weight: 500; 
    line-height: 1.4; 
    margin: 0; 
}

.sb-pop-title-list a { 
    color: var(--color-text); 
    text-decoration: none; 
    transition: color 0.2s; 
}

.sb-pop-title-list a:hover { 
    color: #cc0000; 
}

/* ==========================================================================
   7. Dark Mode Overrides for Sidebar
   ========================================================================== */
[data-theme="dark"] .sb-newsletter { 
    background-color: #1a1510; 
}

[data-theme="dark"] .sb-newsletter h3,
[data-theme="dark"] .sb-newsletter h3.cat-section-title { 
    color: #ffffff !important; 
}

[data-theme="dark"] .sb-newsletter p { 
    color: #cccccc !important; 
}

[data-theme="dark"] .sb-newsletter input[type="email"] { 
    background-color: #111; 
    color: #fff; 
}

[data-theme="dark"] .sb-newsletter button[type="submit"] { 
    background-color: var(--color-logo-pink) !important; 
    color: #ffffff !important; 
}

[data-theme="dark"] .sb-newsletter .cat-section-title-wrapper {
    border-top-color: #ffffff !important;
}

[data-theme="dark"] .sb-social-item { 
    border-color: #333; 
}

[data-theme="dark"] .sb-social-left { 
    color: #fff; 
}

[data-theme="dark"] .sb-social-card-v2 { 
    background-color: var(--color-surface); 
    border-color: var(--color-border); 
}

[data-theme="dark"] .sb-social-card-v2 .count { 
    color: #fff; 
}

[data-theme="dark"] .icon-wrap[style*="color: #000000;"] { 
    color: #ffffff !important; 
}

[data-theme="dark"] .sb-latest-item-text h4 { 
    color: #fff; 
}

[data-theme="dark"] .sb-pop-title-main a,
[data-theme="dark"] .sb-pop-meta-main,
[data-theme="dark"] .sb-pop-plus,
[data-theme="dark"] .sb-pop-title-list a { 
    color: #fff !important; 
}