/*
 * btcp-patch4.css — v4.4 fixes
 * 1. Sidebar widgets dark theme (parent vmag widgets on article/archive pages)
 * 2. Google Auto Ads gap fix
 * 3. Placeholder image visibility improvement
 * 4. Article page layout refinements
 */

/* ============================================================
   FIX 1: SIDEBAR WIDGETS — override parent theme light styles
   ============================================================ */

/* Widget container */
#secondary .widget,
#secondary aside.widget {
    background:    var(--surface) !important;
    border:        1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding:       16px 18px !important;
    margin-bottom: 16px !important;
    color:         var(--text2) !important;
}

/* Widget titles */
#secondary .widget-title,
#secondary .widgettitle,
#secondary h2.widget-title,
#secondary h3.widget-title,
#secondary .widget h2,
#secondary .widget h3 {
    color:          var(--text) !important;
    font-size:      11px !important;
    font-weight:    800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-bottom:  2px solid var(--accent) !important;
    padding-bottom: 8px !important;
    margin-bottom:  12px !important;
    background:     none !important;
}

/* Search form inputs */
#secondary input[type="search"],
#secondary input[type="text"],
.widget_search input {
    background:    var(--surface2) !important;
    border:        1px solid var(--border) !important;
    color:         var(--text) !important;
    border-radius: var(--radius) !important;
    padding:       8px 12px !important;
    width:         100% !important;
    font-size:     13px !important;
}

#secondary input[type="search"]::placeholder,
#secondary input[type="text"]::placeholder {
    color: var(--text3) !important;
}

#secondary input[type="search"]:focus,
#secondary input[type="text"]:focus {
    outline:      none !important;
    border-color: var(--accent) !important;
}

/* Search submit button */
#secondary input[type="submit"],
#secondary button[type="submit"],
.widget_search .search-submit {
    background:  var(--accent) !important;
    color:       #000 !important;
    border:      none !important;
    padding:     8px 16px !important;
    font-weight: 700 !important;
    font-size:   13px !important;
    cursor:      pointer !important;
    border-radius: var(--radius) !important;
    margin-top:  6px !important;
    width:       100% !important;
}

/* Widget lists (recent posts, categories, archives) */
#secondary .widget ul {
    list-style: none !important;
    padding:    0 !important;
    margin:     0 !important;
}

#secondary .widget ul li {
    border-bottom: 1px solid var(--border) !important;
    padding:       8px 0 !important;
    font-size:     13px !important;
}

#secondary .widget ul li:last-child {
    border-bottom: none !important;
}

#secondary .widget ul li a {
    color:           var(--text2) !important;
    text-decoration: none !important;
    transition:      color var(--transition) !important;
    line-height:     1.4 !important;
}

#secondary .widget ul li a:hover {
    color: var(--accent) !important;
}

/* Categories with count */
#secondary .widget ul li .post-count,
#secondary .widget ul li span {
    color:     var(--text3) !important;
    font-size: 11px !important;
}

/* Tag cloud */
#secondary .tagcloud a {
    background:      var(--surface2) !important;
    border:          1px solid var(--border) !important;
    color:           var(--text2) !important;
    padding:         4px 10px !important;
    border-radius:   4px !important;
    font-size:       12px !important;
    text-decoration: none !important;
    display:         inline-block !important;
    margin:          2px !important;
    transition:      background var(--transition), color var(--transition) !important;
}

#secondary .tagcloud a:hover {
    background: var(--accent) !important;
    color:      #000 !important;
    border-color: var(--accent) !important;
}

/* Recent comments */
#secondary .recentcomments {
    color:     var(--text2) !important;
    font-size: 13px !important;
}

/* Calendar widget */
#secondary .calendar_wrap table {
    background:  var(--surface2) !important;
    color:       var(--text) !important;
    width:       100% !important;
    border:      none !important;
}

#secondary .calendar_wrap td,
#secondary .calendar_wrap th {
    border:  1px solid var(--border) !important;
    padding: 4px !important;
}

/* ============================================================
   FIX 2: GOOGLE AUTO-PLACED ADS — prevent ugly layout gaps
   ============================================================ */

/* Auto-placed ad container — transparent, no extra spacing */
.google-auto-placed {
    background: transparent !important;
    border:     none !important;
    padding:    0 !important;
    margin:     0 !important;
    overflow:   hidden !important;
}

/* Collapse the ins when no ad has loaded yet (no data-ad-status attr)
   or when Google marked it unfilled. Overrides inline height:280px. */
.google-auto-placed > ins.adsbygoogle:not([data-ad-status]),
.google-auto-placed > ins.adsbygoogle[data-ad-status="unfilled"],
.google-auto-placed > ins.adsbygoogle[data-ad-status=""] {
    height:     0 !important;
    min-height: 0 !important;
    margin:     0 !important;
    padding:    0 !important;
    overflow:   hidden !important;
}

/* Any adsbygoogle inserted directly into page flow */
body > ins.adsbygoogle,
#btc-content > ins.adsbygoogle,
.btcp-page > ins.adsbygoogle {
    display:    block !important;
    text-align: center !important;
    padding:    0 !important;
    margin:     0 !important;
}

/* ============================================================
   FIX 3: PLACEHOLDER IMAGES — more visible on dark background
   ============================================================ */

/* Any broken or placeholder img inside card containers */
.btcp-hero-feature-img img[src^="data:image/svg"],
.btcp-card-img img[src^="data:image/svg"],
.btcp-hero-secondary-img-link img[src^="data:image/svg"] {
    opacity: 0.6 !important;
    filter:  brightness(1.8) !important;
}

/* Add subtle border to image containers with no real image */
.btcp-hero-feature-img,
.btcp-card-img {
    background: var(--surface2) !important;
}

/* ============================================================
   FIX 4: ARTICLE PAGE — vmag parent template overrides
   ============================================================ */

/* vmag-container on single posts */
body.single .vmag-container,
body.page .vmag-container {
    background: transparent !important;
    padding-top: 28px !important;
}

/* Remove any white/light backgrounds from vmag elements */
body.single #primary,
body.single #main,
body.page #primary,
body.page #main {
    background: transparent !important;
    color:      var(--text) !important;
}

/* Entry content text colors */
body.single .entry-content,
body.single .entry-content p,
body.page .entry-content,
body.page .entry-content p {
    color:       var(--text) !important;
    font-size:   16px !important;
    line-height: 1.75 !important;
}

/* Post meta (author, date, category) */
body.single .entry-meta,
body.single .post-meta,
body.single .vmag-post-meta {
    color:     var(--text3) !important;
    font-size: 13px !important;
    padding:   12px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 24px !important;
}

body.single .entry-meta a,
body.single .post-meta a {
    color:           var(--text2) !important;
    text-decoration: none !important;
}

body.single .entry-meta a:hover,
body.single .post-meta a:hover {
    color: var(--accent) !important;
}

/* Post navigation (prev/next) */
.post-navigation {
    background:    var(--surface) !important;
    border:        1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding:       16px 20px !important;
    margin:        24px 0 !important;
}

.post-navigation a {
    color:           var(--accent) !important;
    text-decoration: none !important;
}

.post-navigation .nav-subtitle {
    color:     var(--text3) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Comments area */
#comments {
    background:    var(--surface) !important;
    border:        1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding:       24px !important;
    margin-top:    24px !important;
}

#comments .comment-list {
    list-style: none !important;
    padding:    0 !important;
}

#comments input,
#comments textarea {
    background:    var(--surface2) !important;
    border:        1px solid var(--border) !important;
    color:         var(--text) !important;
    border-radius: var(--radius) !important;
    padding:       10px 12px !important;
}

#comments .submit {
    background:  var(--accent) !important;
    color:       #000 !important;
    border:      none !important;
    padding:     10px 24px !important;
    font-weight: 700 !important;
    cursor:      pointer !important;
    border-radius: var(--radius) !important;
}