/**
 * Unified Separator System
 *
 * Consistent borders and dividers throughout the theme
 * @package Maharashtra_Today
 */

/* ========================================================================
   Separator Variables & Base Styles
   ======================================================================== */

:root {
    --separator-light: #f0f0f0;
    --separator-medium: #e5e5e5;
    --separator-dark: #d5d5d5;
    --separator-accent: #d32f2f;
    --separator-width: 1px;
}

/* ========================================================================
   Remove Existing Inconsistent Separators
   ======================================================================== */

/* Remove all conflicting borders from widgets */
.widget-title {
    border-bottom: none;
    padding-bottom: 16px;
    margin-bottom: 20px;
    position: relative;
}

.widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--separator-accent) 0%, var(--separator-accent) 50px, var(--separator-light) 50px, var(--separator-light) 100%);
}

/* ========================================================================
   Unified Card/Widget Separators
   ======================================================================== */

/* Widget spacing - no borders, just spacing */
.widget {
    border: none;
    border-radius: 0;
    padding: 24px 0;
    margin-bottom: 0;
    box-shadow: none;
    background: transparent;
    border-bottom: var(--separator-width) solid var(--separator-light);
}

.widget:hover {
    box-shadow: none;
}

.widget:last-child {
    border-bottom: none;
}

/* ========================================================================
   Section Separators
   ======================================================================== */

/* Top bar separator */
.header-top {
    border-bottom: var(--separator-width) solid var(--separator-medium);
    background: #f8f8f8;
}

/* Main navigation separator */
.main-navigation {
    border-bottom: var(--separator-width) solid var(--separator-light);
}

/* Footer separator */
.site-footer {
    border-top: var(--separator-width) solid var(--separator-medium);
}

/* ========================================================================
   List Item Separators
   ======================================================================== */

/* Latest updates - clean list separators */
.latest-update-item {
    border-bottom: var(--separator-width) solid var(--separator-light);
    padding: 14px 0;
}

.latest-update-item:last-child {
    border-bottom: none;
}

/* Trending posts - no borders, just spacing */
.trending-post-item {
    border: none;
    border-radius: 0;
    padding: 12px 0;
    border-bottom: var(--separator-width) solid var(--separator-light);
}

.trending-post-item:last-child {
    border-bottom: none;
}

.trending-post-item:hover {
    background: transparent;
    transform: none;
    padding-left: 8px;
}

/* Editor's pick - clean minimal style */
.editors-pick-item {
    border: none;
    border-left: 3px solid var(--separator-accent);
    border-radius: 0;
    background: transparent;
    padding: 12px 0 12px 16px;
    margin-bottom: 16px;
}

.editors-pick-item:last-child {
    margin-bottom: 0;
}

.editors-pick-item:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
    border-left-color: #c62828;
}

/* Cities widget - minimal grid */
.city-item a {
    border: var(--separator-width) solid var(--separator-light);
    border-radius: 0;
    background: transparent;
}

.city-item a:hover {
    background: #fafafa;
    border-color: var(--separator-accent);
    transform: none;
    box-shadow: none;
}

/* ========================================================================
   Article & Content Separators
   ======================================================================== */

/* Article cards */
.article-card,
.compact-card {
    border: none;
    border-radius: 0;
    border-bottom: var(--separator-width) solid var(--separator-light);
    box-shadow: none;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.article-card:last-child,
.compact-card:last-child {
    border-bottom: none;
}

/* Post meta separators */
.article-meta span:not(:last-child)::after,
.entry-meta span:not(:last-child)::after {
    content: '·';
    margin: 0 8px;
    color: var(--separator-dark);
}

/* Remove individual meta item borders */
.article-category,
.entry-date,
.reading-time {
    border: none;
    padding: 0;
}

/* ========================================================================
   Comment & Interaction Separators
   ======================================================================== */

/* Share buttons separator */
.share-buttons {
    border-top: var(--separator-width) solid var(--separator-light);
    border-bottom: var(--separator-width) solid var(--separator-light);
    padding: 20px 0;
    margin: 30px 0;
}

/* Post navigation */
.post-navigation {
    border-top: var(--separator-width) solid var(--separator-light);
    padding-top: 30px;
    margin-top: 40px;
}

/* ========================================================================
   Form Separators
   ======================================================================== */

/* Search form */
.search-form input[type="search"] {
    border: var(--separator-width) solid var(--separator-medium);
    border-right: none;
    border-radius: 0;
}

.search-form button {
    border: var(--separator-width) solid var(--separator-accent);
    border-radius: 0;
}

/* Newsletter form */
.newsletter-form input {
    border: var(--separator-width) solid var(--separator-medium);
    border-right: none;
    border-radius: 0;
}

.newsletter-submit {
    border: var(--separator-width) solid var(--separator-accent);
    border-radius: 0;
}

/* ========================================================================
   Blockquote Separator
   ======================================================================== */

blockquote {
    border-left: 3px solid var(--separator-accent);
    border-radius: 0;
    padding-left: 20px;
    margin: 24px 0;
}

/* ========================================================================
   Table Separators
   ======================================================================== */

table {
    border-collapse: collapse;
}

th,
td {
    border: var(--separator-width) solid var(--separator-light);
}

/* ========================================================================
   Section Dividers (Homepage)
   ======================================================================== */

.category-section {
    border-bottom: var(--separator-width) solid var(--separator-light);
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.category-section:last-child {
    border-bottom: none;
}

.section-header {
    border-bottom: none;
    padding-bottom: 12px;
    margin-bottom: 24px;
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--separator-accent) 0%, var(--separator-accent) 60px, var(--separator-light) 60px, var(--separator-light) 100%);
}

/* ========================================================================
   Responsive Adjustments
   ======================================================================== */

@media screen and (max-width: 768px) {
    .widget {
        padding: 20px 0;
    }

    .widget-title::after {
        background: linear-gradient(90deg, var(--separator-accent) 0%, var(--separator-accent) 40px, var(--separator-light) 40px, var(--separator-light) 100%);
    }
}