/*
Theme Name: DJ Mido Lite
Version: 13.0
*/

body{font-family:Arial;margin:0;background:#f5f5f5}

/* HEADER */
.site-header{background:#000;position:sticky;top:0;z-index:999}
.nav-container{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:10px}
.logo img{height:50px}
.nav-menu{list-style:none;display:flex;gap:25px;margin:0;padding:0}
.nav-menu a{color:#fff;text-decoration:none}
.nav-menu a:hover{color:#e25680}

/* LAYOUT */
.container{
 max-width:1100px;
 margin:20px auto;
 display:grid;
 grid-template-columns:2fr 1fr;
 gap:25px;
 align-items:start;
 padding:0 10px;
}

.main-content{
 display:flex;
 flex-direction:column;
 gap:20px;
}

/* CARD */
.post-card{
 display:flex;
 gap:18px;
 background:#fff;
 padding:16px;
 border-radius:14px;
 box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.post-card img{
 width:160px;
 height:110px;
 object-fit:cover;
 border-radius:10px;
}

.post-content{flex:1}
.post-content a{text-decoration:none;color:#000}
.post-content a:hover h2{color:#e25680}
.post-content h2{margin:5px 0;font-size:17px}

.category{
 background:#000;
 color:#fff !important;
 padding:4px 8px;
 border-radius:6px;
 font-size:11px;
 margin-bottom:6px;
 display:inline-block;
}

/* SIDEBAR */
.sidebar{
 background:#fff;
 padding:20px;
 border-radius:12px;
 position:sticky;
 top:80px;
}

/* FOOTER */
.site-footer{
 background:#000;
 color:#fff;
 padding:20px;
 margin-top:30px;
}

/* MOBILE */
@media(max-width:900px){
.container{grid-template-columns:1fr}
.post-card{flex-direction:column}
.post-card img{width:100%;height:200px}
}

/* === V15 UI Upgrade === */

/* Top Menu */
.main-navigation a {
  font-weight: 700;
  font-size: 16px;
}
@media (min-width:768px){
  .main-navigation a { font-size:17px; }
}

/* Top Ten Posts Cards */
.top-posts-widget .post-item {
  display:flex;
  gap:10px;
  margin-bottom:12px;
  background:#111;
  padding:10px;
  border-radius:8px;
}
.top-posts-widget img {
  width:80px;
  height:60px;
  object-fit:cover;
}
.top-posts-widget .post-title {
  font-size:14px;
  font-weight:600;
  color:#fff;
}

/* Hover Color */
a:hover { color:#e25680; }

/* Featured Image */
.post-thumbnail img {
  width:100%;
  height:400px;
  object-fit:cover;
}
@media (max-width:768px){
  .post-thumbnail img { height:220px; }
}

/* Related Posts */
.related-posts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}
.related-post img {
  width:100%;
  height:140px;
  object-fit:cover;
}

/* === Featured Image FINAL FIX === */
.post-thumbnail,
.single-post .post-thumbnail {
  width:100%;
  overflow:hidden;
  border-radius:10px;
}

.post-thumbnail img,
.single-post .post-thumbnail img {
  width:100%;
  height:380px;
  object-fit:cover;
  display:block;
}

@media (max-width:768px){
  .post-thumbnail img,
  .single-post .post-thumbnail img {
    height:220px;
  }
}

/* safety for content images */
.entry-content img:first-child{
  max-height:380px;
  width:100%;
  object-fit:cover;
}

/* === V17 FINAL IMAGE FIX (ALL CASES) === */

/* Featured Image (consistent banner style) */
.post-thumbnail img,
.single-post .post-thumbnail img {
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
  border-radius:10px;
}

/* Content Images (uniform square style like your 2nd screenshot) */
.entry-content img {
  width:100% !important;
  max-width:100%;
  height:320px !important;
  object-fit:cover;
  display:block;
  margin:20px 0;
  border-radius:8px;
}

/* Prevent giant stretched images */
.entry-content img[width],
.entry-content img[height] {
  width:100% !important;
  height:320px !important;
}

/* Fix embeds */
.entry-content iframe,
.entry-content video {
  width:100%;
  height:360px;
  border-radius:10px;
}

/* Mobile */
@media (max-width:768px){
  .post-thumbnail img,
  .single-post .post-thumbnail img {
    height:220px;
  }

  .entry-content img {
    height:220px !important;
  }

  .entry-content iframe,
  .entry-content video {
    height:220px;
  }
}

/* === V18 CLEAN IMAGE SYSTEM (layout + alignment + max size only) === */

/* Featured Image */
.post-thumbnail img,
.single-post .post-thumbnail img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* Content Images */
.entry-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 8px;
  max-height: 500px;
}

/* Alignment Fix */
.entry-content .alignleft {
  float: left;
  margin: 10px 15px 10px 0;
  max-width: 50%;
}

.entry-content .alignright {
  float: right;
  margin: 10px 0 10px 15px;
  max-width: 50%;
}

.entry-content .aligncenter {
  display: block;
  margin: 20px auto;
}

/* Clear floats */
.entry-content::after {
  content: "";
  display: block;
  clear: both;
}

/* Embeds */
.entry-content iframe,
.entry-content video {
  width: 100%;
  max-width: 100%;
  height: 380px;
  border-radius: 10px;
}

@media (max-width:768px){
  .entry-content iframe,
  .entry-content video {
    height: 220px;
  }

  .entry-content .alignleft,
  .entry-content .alignright {
    float: none;
    max-width: 100%;
    margin: 15px auto;
  }
}


/* v19 fixes */

.featured-image {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 20px;
}
.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .featured-image { max-height: 250px; }
  .post-card img { height: 140px; }
}

/* RELATED POSTS GRID */
.related-title{margin:30px 0 15px;font-size:20px;font-weight:700;}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.related-card{background:#fff;border-radius:12px;overflow:hidden;transition:.3s ease;box-shadow:0 4px 12px rgba(0,0,0,.08);}
.related-card:hover{transform:translateY(-4px);}
.related-thumb img{width:100%;height:140px;object-fit:cover;display:block;}
.related-content{padding:10px;}
.related-content h4{font-size:14px;font-weight:600;color:#111;line-height:1.4;}
@media(max-width:768px){.related-grid{grid-template-columns:1fr;}}


/* SIDEBAR MODERN CARDS */
.sidebar-widget {
  background: #fff;
  padding: 15px;
  border-radius: 12px;
}

.sidebar-widget h3 {
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 700;
}

.sidebar-card {
  margin-bottom: 12px;
}

.sidebar-card a {
  display: flex;
  gap: 10px;
  text-decoration: none;
  align-items: center;
}

.sidebar-thumb img {
  width: 75px;
  height: 75px;
  object-fit: cover;
  border-radius: 8px;
}

.sidebar-info span {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  line-height: 1.3;
}

.sidebar-card a:hover span {
  color: #e25680;
}


.sidebar-widget button:hover {
  opacity: 0.9;
}

/* PAGINATION MODERN */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 30px 0;
}

.pagination a,
.pagination span {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #0f766e;
  color: #0f766e;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: 0.2s ease;
}

.pagination .current {
  background: #0f766e;
  color: #fff;
}

.pagination a:hover {
  background: #0f766e;
  color: #fff;
}

/* PAGINATION COLOR FIX */
.pagination a,
.pagination span {
  border: 1px solid #e25680;
  color: #e25680;
}

.pagination .current {
  background: #e25680;
  color: #fff;
}

.pagination a:hover {
  background: #e25680;
  color: #fff;
}

/* CATEGORY LABEL FIX */
.category,
.post-category,
.cat-label {
  background: #e25680;
  color: #fff !important;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.category a,
.post-category a,
.cat-label a {
  color: #fff !important;
  text-decoration: none;
}

/* PARAGRAPH SPACING FIX */
.entry-content p {
  margin-bottom: 12px;
  line-height: 1.6;
}

/* TAGS + CATEGORY STYLE */
.post-meta {
  margin: 15px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post-meta a {
  background: #e25680;
  color: #fff !important;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none;
}

/* =========================
   SHARE BUTTONS FINAL
========================= */

.share-buttons {
  margin: 20px 0;
  display: flex;
  gap: 12px;
}

/* clean circle buttons */
.share-buttons a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  transition: 0.2s ease;
}

/* colors */
.share-facebook { background:#1877f2; }
.share-twitter { background:#000; }
.share-whatsapp { background:#25d366; }
.share-email { background:#777; }
.share-link { background:#e25680; }

/* hover */
.share-buttons a:hover {
  transform: scale(1.1);
}


/* CATEGORY ABOVE TITLE */
.post-category-top a {
  background:#e25680;
  color:#fff!important;
  padding:4px 10px;
  border-radius:6px;
  font-size:12px;
  text-decoration:none;
}

/* DATE */
.post-date {
  margin-top:8px;
  color:#777;
  font-size:14px;
}

/* TAGS BELOW CONTENT */
.post-tags {
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.post-tags a {
  background:#111;
  color:#fff!important;
  padding:4px 10px;
  border-radius:6px;
  font-size:12px;
  text-decoration:none;
}

/* FIX TAGS SAME AS CATEGORY */
.post-tags a {
  background:#e25680;
  color:#fff !important;
  padding:4px 10px;
  border-radius:6px;
  font-size:12px;
  text-decoration:none;
}



.share-facebook { background:#1877f2; }
.share-twitter { background:#000; }
.share-whatsapp { background:#25d366; }
.share-email { background:#777; }
.share-link { background:#e25680; }

/* FIX POSSIBLE LAYOUT BREAK */
.main-content {
  overflow:hidden;
}

/* === SINGLE POST WHITE CARD v31 === */
.single-post-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    max-width: 750px;
}

/* === MENU FONT WEIGHT FIX === */
header nav a,
.menu a,
.primary-menu a {
    font-weight: 600 !important;
}

/* === RELATED CARD CLICK FIX === */
.related-card {
    cursor: pointer;
}

/* FINAL MOBILE FIX */
.mobile-controls {
    display: none;
    gap: 15px;
}

.mobile-toggle,
.mobile-search {
    font-size: 22px;
    color: #fff;
    cursor: pointer;
}

@media (max-width:768px){

    .mobile-controls {
        display: flex !important;
    }

    nav.site-menu {
        display: none !important;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #000;
        padding: 60px 20px;
        z-index: 9999;
    }

    nav.site-menu.active {
        display: block !important;
    }

    .nav-menu {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

.menu-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
}

/* SEARCH OVERLAY v37 */
.mobile-search-box {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 9999;
    padding: 80px 20px;
}

.mobile-search-box.active {
    display: block;
}

.search-inner {
    max-width: 500px;
    margin: 0 auto;
}

.search-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}

.search-inner input[type="search"],
.search-inner input[type="text"] {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.search-inner input[type="submit"],
.search-inner button {
    margin-top: 10px;
    width: 100%;
    background: #e25680;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: 600;
}

/* FINAL SEARCH FIX */
.mobile-search-box {
    display: none !important;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#fff;
    z-index:9999;
    padding:80px 20px;
}

.mobile-search-box.active {
    display:block !important;
}

.search-close {
    position:absolute;
    top:20px;
    right:20px;
    font-size:24px;
    cursor:pointer;
}

.search-inner {
    max-width:500px;
    margin:0 auto;
}

.search-inner input {
    width:100%;
    padding:12px;
}







/* === MOBILE SEARCH BOX (SMALL POPUP) === */
.mobile-search-box {
    display: none !important;
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 9999;
    padding: 20px;
}

.mobile-search-box.active {
    display: block !important;
}

.search-close {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 18px;
    cursor: pointer;
}

/* SEARCH INPUT */
.search-inner input[type="search"],
.search-inner input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.search-inner input[type="submit"] {
    width: 100%;
    margin-top: 10px;
    background: #e25680;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
}


/* === POST LINKS MODERN STYLE === */
.single-post-card a,

.single-post-card a:hover,
.main-content a:hover {
    text-decoration: underline !important;
}







/* === HIDE CLOSE ICON ON DESKTOP === */
.menu-close {
    display: none;
}

@media (max-width: 768px) {
    .menu-close {
        display: block;
    }
}

/* === LINK ISOLATION (ARTICLE ONLY) === */
.single-post-card .post-content a {
    color: #e25680 !important;
    text-decoration: none !important;
}
.single-post-card .post-content a:hover {
    text-decoration: underline !important;
}

/* KEEP CATEGORY & TAGS WHITE */
.post-category-top a,
.post-tags a,
.tags a,
.category a {
    color: #fff !important;
    text-decoration: none !important;
}


/* === FINAL NO-LEAK ARTICLE LINKS === */
.post-content p a,
.post-content li a,
.post-content span a {
    color: #e25680 !important;
    text-decoration: none !important;
}

.post-content p a:hover,
.post-content li a:hover,
.post-content span a:hover {
    text-decoration: underline !important;
}

/* RESET NON-ARTICLE LINKS */
.post-card a,
.related-card a,
.share-buttons a,
.nav-menu a {
    color: inherit !important;
    text-decoration: none !important;
}

/* KEEP CATEGORY & TAGS WHITE */
.post-category-top a,
.post-tags a {
    color: #fff !important;
}

/* === CATEGORY BADGE LOCK (HOMEPAGE & CARDS) === */
.post-card .post-category-top a,
.related-card .post-category-top a,
.top-posts .post-category-top a {
    color: #fff !important;
    text-decoration: none !important;
}

.post-card .post-category-top a:hover,
.related-card .post-category-top a:hover {
    color: #fff !important;
}

/* === SHARE BUTTON ICON COLOR LOCK === */
.share-buttons a {
    color: inherit !important;
    text-decoration: none !important;
}

.share-facebook i { color: #1877f2 !important; }
.share-twitter i { color: #000 !important; }
.share-whatsapp i { color: #25d366 !important; }
.share-email i { color: #555 !important; }
.share-link i { color: #999 !important; }

/* === FORCE MAIN MENU TEXT WHITE === */
.nav-menu a {
    color: #fff !important;
    text-decoration: none !important;
}

/* === FORCE CATEGORY BADGE WHITE (HOMEPAGE CARDS) === */
.post-card .post-category-top a,
.related-card .post-category-top a {
    color: #fff !important;
    text-decoration: none !important;
}
/* ================= FINAL LOCK PATCH (NO CONFLICT) ================= */

/* 1. FIX GLOBAL RESET THAT WAS BREAKING COLORS */
.post-card a,
.related-card a,
.share-buttons a,
.nav-menu a {
    text-decoration: none !important;
}

/* 2. FORCE MENU WHITE (OVERRIDE EVERYTHING) */
header nav a,
.nav-container nav a,
.nav-menu li a {
    color: #fff !important;
}

header nav a:hover,
.nav-menu li a:hover {
    color: #fff !important;
}

/* 3. FORCE CATEGORY BADGE WHITE (HOMEPAGE CARDS) */
.post-card .post-category-top a,
.related-card .post-category-top a,
.top-posts .post-category-top a {
    color: #fff !important;
}

.post-card .post-category-top a:hover,
.related-card .post-category-top a:hover {
    color: #fff !important;
}

/* 4. HARD ISOLATION OF ARTICLE LINKS */
.post-content p a,
.post-content li a,
.post-content span a {
    color: #e25680 !important;
    text-decoration: none !important;
}

.post-content p a:hover,
.post-content li a:hover,
.post-content span a:hover {
    text-decoration: underline !important;
}



/* =========================
   FIX: CATEGORY BADGES (FINAL CLEAN)
========================= */

/* GLOBAL SAFE DEFAULT */
.category,
.post-category,
.cat-label {
  display: inline-flex !important;
  align-items: center;
  width: fit-content !important;
  max-width: 100%;
  padding: 6px 12px;
  white-space: nowrap;
}

/* 🔹 TOP CATEGORY (single post) — keep bar style */
.post-category-top {
  display: inline-flex !important;
  width: auto !important;
  max-width: 300px; /* prevents full stretch */
}

/* 🔹 RELATED POSTS — FORCE SMALL BADGE */
.related-posts .category,
.related-posts .post-category,
.related-posts .cat-label {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: fit-content !important;
}

/* 🔹 CARD FIX (HOMEPAGE + RELATED) */
.post-card .category,
.related-post-card .category {
  display: inline-flex !important;
  width: fit-content !important;
}

/* === FINAL: FORCE WHITE TEXT ON CATEGORY (HOMEPAGE CARDS ONLY) === */

.post-card .category,
.post-card .post-category,
.post-card .cat-label {
  color: #fff !important;
}

.post-card .category a,
.post-card .post-category a,
.post-card .cat-label a {
  color: #fff !important;
}

/* prevent hover turning black */
.post-card .category:hover,
.post-card .category a:hover {
  color: #fff !important;
}


/* =========================
   CUSTOM SIDEBAR SEARCH (FINAL CLEAN)
========================= */

.custom-search {
  display: flex;
  gap: 10px;
  width: 100%;
}

/* INPUT */
.custom-search input {
  flex: 1;
  height: 50px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #f5f5f5;
  font-size: 16px;
  outline: none;
}

/* BUTTON */
.custom-search button {
  width: 60px;
  height: 50px;
  border-radius: 10px;
  border: none;
  background: #e25680;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ICON */
.custom-search i {
  color: #fff;
}

/* FOCUS */
.custom-search input:focus {
  background: #fff;
  border-color: #e25680;
}

/* FINAL SHARE ICON FIX */
.share-buttons i {
  color: #fff !important;
  font-size: 16px;
}

.share-buttons a {
  color: #fff !important;
}