/*
Theme Name:  KarmaFlex
Theme URI:   https://bigkarmatech.com/karmaflex
Author:      Bigkarmatech
Author URI:  https://bigkarmatech.com
Description: KarmaFlex is a bold, premium music blog WordPress theme with an audio player, dark/light mode toggle, animated reactions, social sharing, threaded comments, and a fully responsive layout. Perfect for music download blogs, entertainment sites, and media portals.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.2
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karmaflex
Tags:        music, blog, dark, entertainment, audio, download, responsive, custom-colors
*/

/* ==========================================
   CSS CUSTOM PROPERTIES — ROOT (Light Mode Default)
   ========================================== */
:root {
  /* Brand colours */
  --kf-green:        #16a34a;
  --kf-green-lt:     #22c55e;
  --kf-green-pale:   #dcfce7;
  --kf-green-glow:   rgba(22,163,74,0.15);

  /* Surface — Light */
  --kf-bg:           #ffffff;
  --kf-bg-2:         #f8fafc;
  --kf-bg-3:         #f1f5f9;
  --kf-bg-card:      #ffffff;
  --kf-bg-el:        #f0fdf4;

  /* Text — Light */
  --kf-text:         #0f172a;
  --kf-text-2:       #334155;
  --kf-text-3:       #64748b;
  --kf-text-muted:   #94a3b8;

  /* Accent */
  --kf-accent:       #16a34a;
  --kf-accent-2:     #22c55e;
  --kf-accent-glow:  rgba(22,163,74,0.12);

  /* Border */
  --kf-border:       #e2e8f0;
  --kf-border-2:     #cbd5e1;

  /* Shadows */
  --kf-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --kf-shadow-md:    0 4px 16px rgba(0,0,0,.08);
  --kf-shadow-lg:    0 10px 40px rgba(0,0,0,.10);

  /* Header (always dark) */
  --kf-header-bg:    #0f172a;
  --kf-header-text:  #f8fafc;
  --kf-header-nav:   rgba(248,250,252,0.75);

  /* Fonts */
  --kf-font-head:    'Space Grotesk', 'Syne', sans-serif;
  --kf-font-body:    'Inter', 'DM Sans', sans-serif;
  --kf-font-mono:    'JetBrains Mono', monospace;

  /* Radius */
  --kf-r-sm:   6px;
  --kf-r-md:   10px;
  --kf-r-lg:   16px;
  --kf-r-xl:   24px;
  --kf-r-full: 999px;

  /* Transitions */
  --kf-ease:  0.2s cubic-bezier(.4,0,.2,1);
}

/* ==========================================
   DARK MODE
   ========================================== */
[data-theme="dark"] {
  --kf-bg:         #09090b;
  --kf-bg-2:       #111113;
  --kf-bg-3:       #18181b;
  --kf-bg-card:    #141414;
  --kf-bg-el:      #1a1f1a;

  --kf-text:       #f8fafc;
  --kf-text-2:     #cbd5e1;
  --kf-text-3:     #94a3b8;
  --kf-text-muted: #475569;

  --kf-accent:     #22c55e;
  --kf-accent-2:   #4ade80;
  --kf-accent-glow:rgba(34,197,94,0.14);

  --kf-border:     rgba(255,255,255,0.08);
  --kf-border-2:   rgba(255,255,255,0.14);

  --kf-shadow:     0 1px 3px rgba(0,0,0,.4);
  --kf-shadow-md:  0 4px 16px rgba(0,0,0,.4);
  --kf-shadow-lg:  0 10px 40px rgba(0,0,0,.5);
}

/* ==========================================
   RESET & BASE
   ========================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--kf-font-body);
  background: var(--kf-bg);
  color: var(--kf-text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background var(--kf-ease), color var(--kf-ease);
}

img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--kf-accent); text-decoration: none; transition: color var(--kf-ease); }
a:hover { color: var(--kf-accent-2); }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--kf-font-head);
  color: var(--kf-text);
  line-height: 1.2;
  font-weight: 700;
}

/* ==========================================
   LAYOUT
   ========================================== */
.kf-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.kf-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 960px) { .kf-grid { grid-template-columns: 1fr; } }

.kf-content-area { min-width: 0; }

/* ==========================================
   HEADER — always dark
   ========================================== */
#kf-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--kf-header-bg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
}

.kf-header-inner {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 20px;
}

/* Logo */
.kf-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.kf-logo__icon {
  width: 38px;
  height: 38px;
  background: var(--kf-accent);
  border-radius: var(--kf-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.kf-logo__text {
  font-family: var(--kf-font-head);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}

.kf-logo__text span { color: var(--kf-accent); }

/* Nav */
.kf-nav { flex: 1; display: flex; justify-content: center; }
.kf-nav ul { display: flex; gap: 2px; }
.kf-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kf-header-nav);
  text-decoration: none;
  border-radius: var(--kf-r-sm);
  transition: all var(--kf-ease);
  text-transform: uppercase;
  letter-spacing: .7px;
}

.kf-nav a svg { opacity: .7; }
.kf-nav a:hover, .kf-nav .current-menu-item > a {
  color: var(--kf-accent);
  background: var(--kf-accent-glow);
}
.kf-nav a:hover svg, .kf-nav .current-menu-item > a svg { opacity: 1; }

/* Header right */
.kf-header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.kf-header-btn {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--kf-r-sm);
  color: #f8fafc;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--kf-ease);
  text-decoration: none;
}

.kf-header-btn:hover {
  background: var(--kf-accent-glow);
  border-color: var(--kf-accent);
  color: var(--kf-accent);
}

/* Hamburger */
.kf-hamburger { display: none; flex-direction: column; gap: 4px; }
.kf-hamburger span {
  display: block; width: 22px; height: 2px;
  background: #f8fafc; border-radius: 2px; transition: all .3s;
}

/* Mobile nav */
.kf-mobile-nav {
  display: none;
  position: fixed;
  inset: 64px 0 0;
  background: rgba(9,9,11,0.98);
  backdrop-filter: blur(20px);
  z-index: 999;
  padding: 20px;
  overflow-y: auto;
}

.kf-mobile-nav.open { display: block; }

.kf-mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.kf-mobile-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--kf-r-md);
  font-size: 16px; font-weight: 600;
  color: rgba(248,250,252,0.8); text-decoration: none;
  transition: all var(--kf-ease);
}
.kf-mobile-nav a:hover { background: var(--kf-accent-glow); color: var(--kf-accent); }

@media (max-width: 768px) {
  .kf-nav { display: none; }
  .kf-hamburger { display: flex; }
}

/* ==========================================
   SECTION HEADERS
   ========================================== */
.kf-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 12px;
}

.kf-section-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--kf-font-head); font-size: 18px; font-weight: 800;
  color: var(--kf-text); text-transform: uppercase; letter-spacing: .5px;
}

.kf-section-title::before {
  content: ''; width: 4px; height: 22px;
  background: var(--kf-accent); border-radius: 4px; flex-shrink: 0;
}

.kf-section-title .kf-title-icon {
  width: 28px; height: 28px; background: var(--kf-accent);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: #fff;
}

.kf-more-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  padding: 7px 14px; border: 1px solid var(--kf-border-2);
  border-radius: var(--kf-r-full); color: var(--kf-text-3);
  transition: all var(--kf-ease);
}

.kf-more-link:hover { border-color: var(--kf-accent); color: var(--kf-accent); background: var(--kf-accent-glow); }

/* ==========================================
   BUTTONS
   ========================================== */
.kf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--kf-r-md);
  font-size: 13px; font-weight: 700; font-family: var(--kf-font-body);
  text-decoration: none; border: none; transition: all var(--kf-ease); cursor: pointer; line-height: 1;
}

.kf-btn--primary { background: var(--kf-accent); color: #fff; }
.kf-btn--primary:hover { background: var(--kf-accent-2); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px var(--kf-accent-glow); }

.kf-btn--ghost { background: transparent; color: var(--kf-text-2); border: 1px solid var(--kf-border-2); }
.kf-btn--ghost:hover { border-color: var(--kf-accent); color: var(--kf-accent); background: var(--kf-accent-glow); }

.kf-btn--dark { background: var(--kf-bg-3); color: var(--kf-text); border: 1px solid var(--kf-border); }
.kf-btn--sm { padding: 7px 14px; font-size: 12px; }

/* ==========================================
   BADGES & TAGS
   ========================================== */
.kf-badge {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: var(--kf-r-full);
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  background: var(--kf-bg-3); color: var(--kf-text-2);
  border: 1px solid var(--kf-border); transition: all var(--kf-ease);
}

.kf-badge--genre { background: var(--kf-green-pale); color: var(--kf-green); border-color: rgba(22,163,74,.2); }
[data-theme="dark"] .kf-badge--genre { background: var(--kf-accent-glow); color: var(--kf-accent-2); }

/* ==========================================
   WIDGETS / SIDEBAR CARDS
   ========================================== */
.kf-widget {
  background: var(--kf-bg-card);
  border: 1px solid var(--kf-border);
  border-radius: var(--kf-r-lg);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--kf-shadow);
}

.kf-widget__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--kf-text-3); padding: 14px 18px;
  border-bottom: 1px solid var(--kf-border);
}

.kf-widget__title svg { color: var(--kf-accent); }
.kf-widget__body { padding: 14px 18px; }

/* ==========================================
   PAGINATION
   ========================================== */
.kf-pagination { display: flex; gap: 6px; flex-wrap: wrap; margin: 32px 0; justify-content: center; }
.kf-pagination .page-numbers {
  min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--kf-r-sm); border: 1px solid var(--kf-border);
  background: var(--kf-bg-card); color: var(--kf-text-2); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all var(--kf-ease);
}
.kf-pagination .page-numbers:hover { border-color: var(--kf-accent); color: var(--kf-accent); }
.kf-pagination .current { background: var(--kf-accent); color: #fff; border-color: var(--kf-accent); }

/* ==========================================
   FOOTER
   ========================================== */
#kf-footer {
  background: var(--kf-header-bg);
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 60px;
  color: rgba(248,250,252,0.6);
}

.kf-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 48px 0 32px;
}

@media (max-width: 768px) { .kf-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 480px) { .kf-footer-grid { grid-template-columns: 1fr; } }

.kf-footer-brand { }
.kf-footer-logo { margin-bottom: 14px; }
.kf-footer-desc { font-size: 13px; line-height: 1.7; color: rgba(248,250,252,0.5); max-width: 260px; }

.kf-footer-col h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 14px; }
.kf-footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.kf-footer-col a { font-size: 13px; color: rgba(248,250,252,0.55); text-decoration: none; transition: color var(--kf-ease); }
.kf-footer-col a:hover { color: var(--kf-accent); }

.kf-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; gap: 12px; flex-wrap: wrap;
}

.kf-footer-social { display: flex; gap: 8px; }
.kf-footer-social a {
  width: 32px; height: 32px; border-radius: var(--kf-r-sm);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(248,250,252,0.6); text-decoration: none; transition: all var(--kf-ease);
}
.kf-footer-social a:hover { background: var(--kf-accent-glow); border-color: var(--kf-accent); color: var(--kf-accent); }

/* ==========================================
   BACK TO TOP
   ========================================== */
#kf-back-top {
  position: fixed; bottom: 90px; right: 20px; z-index: 500;
  width: 40px; height: 40px; border-radius: var(--kf-r-md);
  background: var(--kf-accent); color: #fff; border: none;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px var(--kf-accent-glow); cursor: pointer;
  transition: all var(--kf-ease);
}
#kf-back-top.visible { display: flex; }
#kf-back-top:hover { background: var(--kf-accent-2); transform: translateY(-2px); }

/* ==========================================
   UTILITIES
   ========================================== */
.kf-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.kf-mt-0 { margin-top: 0 !important; }