/*
 * KartaNews.com Theme — kartanews_com_by_triwck_com
 * Custom CSS to complement Tailwind CSS utilities
 * Dark Navy + Amber accent palette
 */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Merriweather:wght@400;700&display=swap');

/* ── Root Variables ─────────────────────────────────────────── */
:root {
  --kn-bg: #0F172A;
  --kn-surface: #1E293B;
  --kn-surface2: #243447;
  --kn-border: #334155;
  --kn-text: #F1F5F9;
  --kn-muted: #94A3B8;
  --kn-accent: #F59E0B;
  --kn-accent-h: #ffaf26;
  --kn-link: #F1F5F9;
  --kn-heading: #F8FAFC;
  --kn-font: 'Inter', sans-serif;
  --kn-font-body: 'Inter', sans-serif;
  --kn-radius: 0.5rem;
  --kn-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* ── Light Mode Override ────────────────────────────────────── */
body:not(.dark-mode) {
  --kn-bg: #F8FAFC;
  --kn-surface: #FFFFFF;
  --kn-surface2: #F1F5F9;
  --kn-border: #E2E8F0;
  --kn-text: #1E293B;
  --kn-muted: #64748B;
  --kn-link: #0F172A;
  --kn-heading: #0F172A;
  --kn-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* ── Base Reset ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--kn-font);
  background-color: var(--kn-bg);
  color: var(--kn-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
}

a {
  color: var(--kn-accent);
  text-decoration: none;
  transition: color .2s;
}

a:hover {
  color: var(--kn-accent-h);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--kn-heading);
  font-weight: 700;
}

/* lazy image */
img.lazyload {
  opacity: 1;
  transition: opacity .4s;
}

img.lazyloaded {
  opacity: 1;
}

img[data-src],
img[data-lazy] {
  opacity: 1;
  transition: opacity .4s;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: .25rem;
  background-color: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: .25rem;
  max-width: 100%;
  height: auto;
}

.post-item,
.post-item-mid,
.post-item-small,
.menu-post-item {
  cursor: pointer;
}

.post-item .image,
.post-item-mid .image,
.post-item-small .image {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--kn-surface2);
  border-radius: var(--kn-radius);
  aspect-ratio: 16 / 9;
}

.post-item-small .image {
  aspect-ratio: 1.45 / 1;
  width: 80px;
  flex-shrink: 0;
  margin-bottom: 0;
  margin-right: 0.5rem;
}

.post-item-mid .image {
  aspect-ratio: 1.5 / 1;
}

.post-item .image img,
.post-item-mid .image img,
.post-item-small .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.post-item:hover .image img,
.post-item-mid:hover .image img,
.post-item-small:hover .image img {
  transform: scale(1.08);
}

/* ── Layout ─────────────────────────────────────────────────── */
.kn-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media(min-width:1024px) {
  .kn-container {
    padding: 0 1.5rem;
  }
}

/* ── Top Bar ─────────────────────────────────────────────────── */
#nav-top {
  background-color: var(--kn-surface);
  border-bottom: 1px solid var(--kn-border);
  font-size: 0.8rem;
  padding: 0.35rem 0;
}

#nav-top a {
  color: var(--kn-muted);
}

#nav-top a:hover {
  color: var(--kn-accent);
}

#nav-top .nav-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}

#nav-top .nav-top-date {
  color: var(--kn-muted);
}

#nav-top .nav-top-links {
  display: flex;
  gap: 1rem;
  align-items: center;
}

#nav-top .nav-top-links .nav-link-item {
  color: var(--kn-muted);
  font-size: .8rem;
}

.btn-dark-mode {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kn-muted);
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .4rem;
  border-radius: .3rem;
  transition: color .2s, background .2s;
}

.btn-dark-mode:hover {
  color: var(--kn-accent);
  background: rgba(245, 158, 11, .1);
}

.profile-dropdown .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.6rem 1rem !important;
  color: var(--kn-muted) !important;
  font-size: 0.85rem !important;
}

.profile-dropdown .dropdown-item-profile {
  justify-content: flex-start;
}

.profile-dropdown .dropdown-item:hover {
  color: var(--kn-accent) !important;
  background: rgba(245, 158, 11, 0.05) !important;
}

.profile-dropdown .dropdown-item .icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

.profile-dropdown .dropdown-item .icon svg {
  width: 18px !important;
  height: 18px !important;
}

.nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.btn-add-post {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--kn-surface2);
  border: 1px solid var(--kn-border);
  border-radius: 50%;
  color: var(--kn-text);
  transition: all .2s;
  cursor: pointer;
}

.btn-add-post:hover {
  border-color: var(--kn-accent);
  color: var(--kn-accent);
  transform: translateY(-2px);
}

/* ── Main Header / Navbar ───────────────────────────────────── */
#header {
  background-color: var(--kn-bg);
  border-bottom: 1px solid var(--kn-border);
  position: sticky;
  top: 0;
  z-index: 900;
}

.nav-desktop {
  position: relative;
}

.nav-main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.nav-logo img {
  max-height: 40px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.nav-links .nav-item {
  position: relative;
}

.nav-links .nav-item.has-mega-menu {
  position: static;
}

.nav-links .nav-link {
  color: var(--kn-text);
  font-size: .875rem;
  font-weight: bold;
  padding: .5rem .75rem;
  border-radius: .375rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  transition: color .2s, background .2s;
}

.nav-links .nav-link:hover,
.nav-links .nav-item.active .nav-link {
  color: var(--kn-accent);
}

.nav-links .nav-item svg.chevron {
  width: 12px;
  height: 12px;
  transition: transform .2s;
}

.nav-links .nav-item:hover svg.chevron {
  transform: rotate(180deg);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* search form */
.search-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kn-muted);
  padding: .4rem;
  border-radius: .375rem;
}

.search-icon:hover {
  color: var(--kn-accent);
}

.search-form {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius);
  padding: .75rem;
  width: 300px;
  box-shadow: var(--kn-shadow);
  z-index: 999;
}

.search-form.open {
  display: block;
}

.search-form form {
  display: flex;
  gap: .5rem;
  width: 100%;
}

.search-form input {
  flex: 1;
  background: var(--kn-surface2);
  border: 1px solid var(--kn-border);
  border-radius: .375rem;
  padding: .5rem .75rem;
  color: var(--kn-text);
  font-size: .875rem;
  outline: none;
}

.search-form input:focus {
  border-color: var(--kn-accent);
}

.search-form .btn-search {
  background: var(--kn-accent);
  border: none;
  border-radius: .375rem;
  color: #fff;
  padding: .5rem .75rem;
  cursor: pointer;
  font-weight: 600;
}

/* ── Mega Menu ───────────────────────────────────────────────── */
.mega-menu-container {
  position: relative;
}

.mega-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: var(--kn-bg);
  border: 1px solid var(--kn-border);
  border-top: 3px solid var(--kn-accent);
  border-radius: 0 0 var(--kn-radius) var(--kn-radius);
  box-shadow: var(--kn-shadow);
  z-index: 1000;
  animation: fadeSlideDown .2s ease;
  /* Transparent top padding acts as a bridge from the nav link above */
  margin-top: 0;
}

.nav-item:hover .mega-menu,
.nav-item.active .mega-menu,
.mega-menu.active {
  display: flex;
}

@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mega-menu .menu-left {
  background: var(--kn-surface);
  padding: 1rem 0;
  min-width: 180px;
  border-right: 1px solid var(--kn-border);
}

.mega-menu .menu-left .link-sub-category {
  display: block;
  padding: .5rem 1.25rem;
  color: var(--kn-muted);
  font-size: .875rem;
  font-weight: 500;
  transition: color .2s, background .2s;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
}

.mega-menu .menu-left .link-sub-category:hover,
.mega-menu .menu-left .link-sub-category.active {
  color: var(--kn-accent);
  background: rgba(245, 158, 11, .08);
}

.mega-menu .menu-right {
  padding: 1.25rem;
  flex: 1;
}

.mega-menu .menu-category-items {
  display: none;
}

.mega-menu .menu-category-items.active {
  display: block;
}

.menu-post-item {
  padding: .5rem;
}

.menu-post-item .image {
  position: relative;
  border-radius: .375rem;
  overflow: hidden;
  margin-bottom: .5rem;
  aspect-ratio: 16/9;
}

.menu-post-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.menu-post-item:hover img {
  transform: scale(1.08);
}

.menu-post-item .title {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.menu-post-item .title a {
  color: var(--kn-text);
}

.menu-post-item .title a:hover {
  color: var(--kn-accent);
}

.menu-post-item .small-post-meta {
  font-size: .7rem;
  color: var(--kn-muted);
  margin: .25rem 0 0;
}

.mega-menu-inner {
  display: flex;
}

.width20 {
  width: 20%;
}

.width25 {
  width: 25%;
}

.width33 {
  width: 33.3333%;
}

.width50 {
  width: 50%;
}

.width100 {
  width: 100%;
}

/* ── Mobile Header ──────────────────────────────────────────── */
.header-mobile-container {
  display: none;
}

@media(max-width:1023px) {
  #nav-top {
    display: none;
  }

  .header-mobile-container {
    display: block;
  }

  .nav-desktop {
    display: none !important;
  }

  #header {
    position: relative;
  }
}

.header-mobile {
  background: var(--kn-bg);
  border-bottom: 1px solid var(--kn-border);
  padding: .75rem 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 950;
}

.header-mobile .hm-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu-button,
.mobile-search-button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kn-text);
  padding: .35rem;
}

.mobile-logo img {
  max-height: 36px;
}

.mobile-search-form {
  background: var(--kn-bg);
  border-top: 1px solid var(--kn-border);
  padding: .75rem 1rem;
  display: none;
}

.mobile-search-form.open {
  display: block;
}

.mobile-search-form form {
  display: flex;
  gap: .5rem;
}

.mobile-search-form input {
  flex: 1;
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: .375rem;
  padding: .5rem .75rem;
  color: var(--kn-text);
  font-size: .875rem;
  outline: none;
}

/* Mobile Nav Drawer */
.nav-mobile {
  position: fixed;
  top: 0;
  left: -100%;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  background: var(--kn-surface);
  border-right: 1px solid var(--kn-border);
  z-index: 1000;
  transition: left .3s ease;
  overflow-y: auto;
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.nav-mobile.open {
  left: 0;
}

.nav-mobile-inner {
  padding: 1rem;
}

.overlay-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 999;
}

.overlay-bg.active {
  display: block;
}

.nav-mobile .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .75rem;
  color: var(--kn-text);
  font-size: .9rem;
  font-weight: 500;
  border-radius: .375rem;
  transition: background .2s, color .2s;
}

.nav-mobile .nav-link:hover {
  color: var(--kn-accent);
  background: rgba(245, 158, 11, .07);
}

.nav-mobile ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Nav sub-menu (collapse/expand) — only targets <div> not Bootstrap <ul> dropdown */
.nav-mobile div.menu-sub-items {
  padding-left: .75rem;
  border-left: 2px solid var(--kn-border);
  margin: .25rem 0;
  display: none;
}

.nav-mobile div.menu-sub-items.open {
  display: block;
}

.nav-mobile div.menu-sub-items .nav-link {
  font-size: .85rem;
  font-weight: 400;
}

/* Mobile user profile menu */
.nav-mobile .mobile-user-menu {
  display: none;
  list-style: none;
  padding: .25rem 0;
  margin: .25rem 0;
  border-left: 2px solid var(--kn-border);
  padding-left: .5rem;
}

.nav-mobile .mobile-user-menu.open {
  display: block;
}

/* Mobile user dropdown-item: icon + label on same line */
.nav-mobile .mobile-user-menu .dropdown-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .55rem .75rem !important;
  font-size: .875rem;
  color: var(--kn-muted);
  white-space: nowrap;
  border-radius: .375rem;
}

.nav-mobile .mobile-user-menu .dropdown-item:hover {
  color: var(--kn-accent) !important;
  background: rgba(245, 158, 11, .07) !important;
}

.nav-mobile .mobile-user-menu .dropdown-item .icon {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
}

/* ── Newsticker ─────────────────────────────────────────────── */
.section-newsticker {
  padding: .5rem 0;
}

.section-newsticker .newsticker-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}

.newsticker-title {
  background: var(--kn-accent);
  color: #0F172A;
  font-weight: 700;
  font-size: .75rem;
  padding: .25rem .75rem;
  border-radius: .25rem 0 0 .25rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
  flex-shrink: 0;
  height: 100%;
  align-self: stretch;
}

.newsticker {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.newsticker li {
  display: none;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.newsticker li.active {
  display: flex;
}

.newsticker li a {
  color: var(--kn-text);
  font-size: .82rem;
  white-space: nowrap;
  font-weight: bold;
}

.newsticker li a:hover {
  color: var(--kn-accent);
}

.nav-sm-buttons {
  display: flex;
  gap: .25rem;
  flex-shrink: 0;
}

.nav-sm-buttons button {
  background: var(--kn-surface2);
  border: 1px solid var(--kn-border);
  color: var(--kn-muted);
  width: 28px;
  height: 28px;
  border-radius: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-sm-buttons button:hover {
  color: var(--kn-accent);
  border-color: var(--kn-accent);
}

/* ── Featured Hero Section ───────────────────────────────────── */
.section-featured {
  padding: 0 0 1.5rem 0;
}

/* ── Main Slider ─────────────────────────────────────────────── */
.main-slider-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--kn-radius);
  background: var(--kn-surface);
  height: 358px !important;
}

.main-slider {
  position: relative;
  overflow: hidden;
  height: 100% !important;
}

.main-slider-item {
  position: relative;
  height: 358px !important;
  overflow: hidden;
  display: none;
}

.main-slider-item.active {
  display: block !important;
}

@media(max-width:1023px) {
  .main-slider-container {
    height: 350px !important;
  }

  .main-slider-item {
    height: 350px !important;
  }
}

@media(max-width:767px) {
  .main-slider-container {
    height: 300px !important;
  }

  .main-slider-item {
    height: 300px !important;
  }
}

.main-slider-item .img-link {
  display: block;
  height: 100%;
}

.main-slider-item img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.main-slider-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 100%);
}

.main-slider-item .caption .title {
  color: #fff;
  font-size: 1.1rem;
  margin: .35rem 0 0;
  line-height: 1.35;
}

.main-slider-item .caption .title a {
  color: #fff;
}

.main-slider-item .caption .post-meta {
  color: rgba(255, 255, 255, .75);
  font-size: .775rem;
  margin: .35rem 0 0;
}

.main-slider-nav {
  position: absolute;
  bottom: .75rem;
  right: .75rem;
  display: flex;
  gap: .35rem;
  z-index: 5;
}

.main-slider-nav button {
  background: rgba(0, 0, 0, .55);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: .375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-slider-nav button:hover {
  background: var(--kn-accent);
}

/* Featured right column items */
.col-featured-right .item {
  position: relative;
  border-radius: var(--kn-radius);
  overflow: hidden;
  background: var(--kn-surface);
}

.col-featured-right .item-large {
  height: 220px;
  margin-bottom: .5rem;
}

.col-featured-right .item-small {
  height: 165px;
}

@media(max-width:991px) {
  .col-featured-right .item-large {
    height: 200px;
  }

  .col-featured-right .item-small {
    height: 150px;
  }
}

.col-featured-right .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.col-featured-right .item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, transparent 100%);
}

.col-featured-right .item .caption .title {
  color: #fff;
  font-size: .85rem;
  margin: .2rem 0 0;
}

.col-featured-right .item .caption .title a {
  color: #fff;
}

.col-featured-right .item .caption .post-meta {
  font-size: .7rem;
  color: rgba(255, 255, 255, .75);
  margin: .2rem 0 0;
}

/* ── Badge / Category Label ─────────────────────────────────── */
.badge-category {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: .25rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
}

.badge-breaking {
  background: #EF4444;
}

/* ── Post Card (post-item) ───────────────────────────────────── */
.post-item {
  background: var(--kn-surface);
  border-radius: var(--kn-radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  height: 100%;
  border: 1px solid var(--kn-border);
}

.post-item:hover {
  box-shadow: var(--kn-shadow);
}

.post-item .image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: var(--kn-radius) var(--kn-radius) 0 0;
}

.post-item .image .post-item-label-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2;
}

.post-item .image img,
.post-item .img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}

.post-item:hover .image img,
.post-item:hover .img-link img {
  transform: scale(1.08);
}

.post-item .caption {
  padding: .85rem;
}

.post-item .caption .title {
  font-size: .95rem;
  font-weight: 700;
  margin: .4rem 0 .5rem;
  line-height: 1.4;
}

.post-item .caption .title a {
  color: var(--kn-heading);
}

.post-item .caption .title a:hover {
  color: var(--kn-accent);
}

/* Mid and small variants */
.post-item-mid {
  display: flex;
  gap: .75rem;
  background: var(--kn-surface);
  border-radius: var(--kn-radius);
  padding: .75rem;
  border: 1px solid var(--kn-border);
}

.post-item-mid .image {
  width: 120px;
  height: 80px;
  flex-shrink: 0;
  border-radius: .375rem;
  overflow: hidden;
}

.post-item-mid .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}

.post-item-mid:hover .image img {
  transform: scale(1.08);
}

.post-item-mid .caption .title {
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 .3rem;
}

.post-item-mid .caption .title a {
  color: var(--kn-heading);
}

.post-item-mid .caption .title a:hover {
  color: var(--kn-accent);
}

.post-item-small {
  display: flex;
  gap: .65rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--kn-border);
}

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

.post-item-small .image {
  width: 80px;
  height: 55px;
  flex-shrink: 0;
  border-radius: .3rem;
  overflow: hidden;
}

.post-item-small .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}

.post-item-small:hover .image img {
  transform: scale(1.08);
}

.post-item-small .caption .title {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
  margin: .15rem 0;
}

.post-item-small .caption .title a {
  color: var(--kn-heading);
}

.post-item-small .caption .title a:hover {
  color: var(--kn-accent);
}

/* ── Post Meta ───────────────────────────────────────────────── */
.small-post-meta,
.post-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: #a8b8ce;
}

body:not(.dark-mode) .small-post-meta,
body:not(.dark-mode) .post-meta {
  color: #c4c4c4;
}

.small-post-meta svg,
.post-meta svg {
  width: 12px;
  height: 12px;
}

.small-post-meta span,
.post-meta span {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}

/* ── Media Icon (video/audio/gallery badge) ──────────────────── */
.media-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .55);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, transform .25s;
}

.media-icon-sm {
  width: 28px;
  height: 28px;
}

.media-icon-sm svg {
  width: 13px;
  height: 13px;
}

.media-icon-lg {
  width: 56px;
  height: 56px;
}

/* Highlight on card hover */
.post-item:hover .media-icon,
.post-item-mid:hover .media-icon,
.post-item-small:hover .media-icon,
.menu-post-item:hover .media-icon,
a:hover .media-icon {
  background: rgba(var(--kn-accent-rgb, 234, 88, 12), .85);
  transform: translate(-50%, -50%) scale(1.15);
}

.media-icon svg {
  color: #fff;
  width: 18px;
  height: 18px;
}

.media-icon-lg svg {
  width: 24px;
  height: 24px;
}

/* ── Section Headers ─────────────────────────────────────────── */
.section-title {
  margin-bottom: 1.25rem;
}

.section-title .title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--kn-heading);
  margin: 0;
}

.section-title a {
  color: var(--kn-muted);
  font-size: .8rem;
  font-weight: 600;
}

.section-title a:hover {
  color: var(--kn-accent);
}

/* ── Latest Posts Section ────────────────────────────────────── */
.section-latest {
  padding: 1.5rem 0;
}

/* ── Category Block Types ───────────────────────────────────── */
.section-category {
  padding: 1.5rem 0;
  border-top: 1px solid var(--kn-border);
}

/* ── Ad Spaces ───────────────────────────────────────────────── */
.ad-space {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.col-sidebar {
  /* padding-left: 1rem; */
  position: sticky;
  top: 5.5rem;
}

.sticky-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 1rem;
  z-index: 10;
}

@media(max-width:991px) {
  .col-sidebar {
    /* padding-left: 0;
    margin-top: 2rem; */
    position: sticky;
    top: 5.5rem;
  }
}

.widget {
  margin-bottom: 2rem;
}

.widget-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--kn-heading);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--kn-accent);
}

/* ── Page / Post Detail ──────────────────────────────────────── */
.section-page {
  padding: 2rem 0;
}

.page-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  gap: .3rem;
  font-size: .825rem;
}

.breadcrumb-item {
  color: var(--kn-muted);
}

.breadcrumb-item a {
  color: var(--kn-muted);
}

.breadcrumb-item a:hover {
  color: var(--kn-accent);
}

.breadcrumb-item+.breadcrumb-item::before {
  content: '/';
  margin-right: .3rem;
  color: var(--kn-border);
}

.breadcrumb-item.active {
  color: var(--kn-text);
}

@media (max-width: 767px) {
  .breadcrumb {
    display: none;
  }
}

/* Post single */
.post-content {
  max-width: 780px;
}

.post-title {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.25;
  margin: .5rem 0 1rem;
}

.post-summary {
  font-size: 1.1rem;
  color: var(--kn-muted);
  font-weight: 400;
  margin-bottom: 1rem;
  border-left: 4px solid var(--kn-accent);
  padding-left: .85rem;
}

.post-details-meta {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  font-size: .82rem;
  color: var(--kn-muted);
}

.post-content .img-description {
  display: block;
  text-align: left;
  font-size: 12px;
  font-style: italic;
  line-height: 18px;
  color: #666;
  margin-top: 5px;
}

.item-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.item-meta a {
  color: var(--kn-muted);
}

.item-meta a:hover {
  color: var(--kn-accent);
}

.item-meta img {
  border-radius: 50%;
}

.item-meta-author img {
  width: 28px;
  height: 28px;
}

.item-meta-author span {
  color: var(--kn-text);
  font-weight: 600;
}

/* Post body text */
.post-text {
  font-family: var(--kn-font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--kn-text);
}

.post-text p {
  margin-bottom: 1.2rem;
}

.post-text h2,
.post-text h3,
.post-text h4 {
  margin: 1.5rem 0 .75rem;
}

.post-text img {
  border-radius: var(--kn-radius);
  margin: 1rem auto;
}

.post-text a {
  color: var(--kn-accent);
  text-decoration: underline;
}

.post-text blockquote {
  border-left: 4px solid var(--kn-accent);
  background: var(--kn-surface2);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--kn-radius) var(--kn-radius) 0;
  margin: 1.25rem 0;
  color: var(--kn-muted);
  font-style: italic;
}

.post-text pre,
.post-text code {
  background: var(--kn-surface2);
  border-radius: .375rem;
  padding: .2rem .5rem;
  font-size: .875rem;
}

/* Post share buttons */
.post-share-buttons {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.btn-share {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .85rem;
  border-radius: .375rem;
  font-size: .8rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity .2s;
  text-decoration: none;
  color: #fff;
}

.btn-share:hover {
  opacity: .85;
  color: #fff;
}

.btn-share-whatsapp {
  background: #25D366;
}

.btn-share-facebook {
  background: #1877F2;
}

.btn-share-twitter {
  background: #1DA1F2;
}

.btn-share-telegram {
  background: #2AABEE;
}

.btn-share-copy {
  background: var(--kn-surface2);
  color: var(--kn-text);
  border: 1px solid var(--kn-border);
}

.btn-share-copy:hover {
  color: var(--kn-text);
}

/* Post tags */
.post-tags {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--kn-border);
}

.post-tags .title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--kn-muted);
  margin: 0;
}

.post-tags ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.post-tags li a {
  display: inline-block;
  background: var(--kn-surface2);
  border: 1px solid var(--kn-border);
  color: var(--kn-text);
  padding: .25rem .65rem;
  border-radius: 2rem;
  font-size: .8rem;
  font-weight: 500;
  transition: border-color .2s, color .2s;
}

.post-tags li a:hover {
  color: var(--kn-accent);
  border-color: var(--kn-accent);
}

.about-author {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius);
}

.img-author {
  border-radius: .5rem;
  width: 90px;
  height: 90px;
  object-fit: cover;
  flex-shrink: 0;
}

.author-rss-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--kn-surface2);
  border-radius: 50%;
  color: var(--kn-muted);
  margin-top: .75rem;
}

.author-rss-link:hover {
  color: var(--kn-accent);
}

.about-author .username a {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--kn-heading);
}

.about-author .username a:hover {
  color: var(--kn-accent);
}

.profile-social-links {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
  display: flex;
  gap: .5rem;
}

.profile-social-links a {
  color: var(--kn-muted);
}

.profile-social-links a:hover {
  color: var(--kn-accent);
}

/* Post files */
.post-files {
  margin-top: 1.25rem;
}

.post-files .title {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

.post-files .file {
  display: inline-flex;
  margin: .3rem .3rem 0 0;
}

.post-files .file button {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  color: var(--kn-text);
  padding: .4rem .85rem;
  border-radius: .375rem;
  font-size: .83rem;
  cursor: pointer;
  transition: border-color .2s;
}

.post-files .file button:hover {
  border-color: var(--kn-accent);
}

/* Next/Prev post */
.post-next-prev {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem 0;
}

.post-next-prev .item {
  flex: 1;
}

.post-next-prev .item-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--kn-muted);
  text-transform: uppercase;
  margin-bottom: .25rem;
}

.post-next-prev .item-label a {
  color: var(--kn-muted);
}

.post-next-prev .item-label a:hover {
  color: var(--kn-accent);
}

.post-next-prev .item-title {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.post-next-prev .item-title a {
  color: var(--kn-heading);
}

.post-next-prev .item.text-end .item-title a {
  display: block;
}

.post-next-prev .item.text-end {
  text-align: right;
}

.post-next-prev .item.text-end .item-label {
  justify-content: flex-end;
}

/* Emoji Reactions */
.emoji-reactions-container {
  padding: 2rem 0;
  border-bottom: 1px solid var(--kn-border);
}

.title-reactions {
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: var(--kn-text);
}

.emoji-reactions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.reaction-container {
  position: relative;
  cursor: pointer;
}

.reaction-container .reaction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.reaction-container .emoji {
  width: 48px;
  height: 48px;
  object-fit: contain;
  transition: transform .2s;
}

.reaction-container:hover .emoji {
  transform: scale(1.1);
}

.reaction-container .text {
  font-size: .75rem;
  font-weight: 500;
  color: var(--kn-muted);
}

.reaction-container .vote {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #FF4D4D;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--kn-bg);
}

.reaction-container.selected .text {
  color: var(--kn-accent);
}

/* Comments section */
.section-comments {
  margin-top: 2.5rem;
}

.nav-tabs-comment {
  display: flex;
  gap: .5rem;
  border-bottom: 2px solid var(--kn-border);
  margin-bottom: 1.25rem;
}

.nav-tabs-comment button {
  background: none;
  border: none;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--kn-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.nav-tabs-comment button.active {
  color: var(--kn-accent);
  border-bottom-color: var(--kn-accent);
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment-list li {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--kn-border);
}

.comment-list li:last-child {
  border-bottom: none;
}

.comment-list .left {
  flex-shrink: 0;
}

.comment-list .left img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-list .right {
  flex: 1;
}

.comment-list .username {
  font-weight: 700;
  font-size: .95rem;
  color: var(--kn-heading);
  text-decoration: none;
  margin-bottom: .25rem;
  display: block;
}

.comment-list .comment {
  font-size: .9rem;
  color: var(--kn-text);
  line-height: 1.6;
  margin-bottom: .75rem;
}

.comment-meta {
  display: flex;
  gap: 1rem;
  font-size: .8rem;
  color: var(--kn-muted);
}

.comment-meta a {
  color: var(--kn-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.comment-meta a:hover {
  color: var(--kn-accent);
}

.comment-meta svg {
  opacity: .7;
}

.row-sub-comment {
  margin-top: 1rem;
  padding-left: 3rem;
  border-left: 2px solid var(--kn-border);
}

/* Related posts */
.section-related-posts {
  margin-top: 2.5rem;
}

.section-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.section-title::before {
  content: "";
  display: block;
  width: 4px;
  height: 24px;
  background: var(--kn-accent);
  border-radius: 4px;
}

.section-title .title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  text-transform: capitalize;
}

/* ── Post Format: Gallery ────────────────────────────────────── */
.gallery-filters {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.gallery-filters .btn-filter {
  background: var(--kn-surface2);
  border: 1px solid var(--kn-border);
  color: var(--kn-text);
  padding: .35rem .85rem;
  border-radius: .375rem;
  font-size: .82rem;
  cursor: pointer;
}

.gallery-filters .btn-filter.active {
  background: var(--kn-accent);
  color: #0F172A;
  border-color: var(--kn-accent);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
}

.gallery-item img {
  width: 100%;
  border-radius: .375rem;
}

/* ── Post Format: Sorted List ────────────────────────────────── */
.sorted-list-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--kn-surface);
  border-radius: var(--kn-radius);
  margin-bottom: 1rem;
  border: 1px solid var(--kn-border);
}

.sorted-list-num {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--kn-accent);
  line-height: 1;
  min-width: 2rem;
}

.sorted-list-content .title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .4rem;
}

/* ── Post Format: Table of Contents ─────────────────────────── */
.toc-item {
  position: relative;
  margin-bottom: 1rem;
}

.toc-scroll {
  overflow: hidden;
}

.toc-item .item-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  background: var(--kn-surface);
  border-radius: var(--kn-radius);
  border: 1px solid var(--kn-border);
  cursor: pointer;
}

.toc-item .item-num {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--kn-accent);
  min-width: 2rem;
}

.toc-item .item-title {
  font-weight: 600;
}

.toc-item .item-content {
  padding: .75rem 1rem;
  background: var(--kn-surface2);
  border-radius: 0 0 var(--kn-radius) var(--kn-radius);
}

/* ── Post Format: Quiz ───────────────────────────────────────── */
.quiz-container {
  max-width: 680px;
}

.quiz-question {
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.quiz-question .question-text {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.quiz-answers {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.quiz-answer {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  background: var(--kn-surface2);
  border: 2px solid var(--kn-border);
  border-radius: .375rem;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  font-size: .9rem;
}

.quiz-answer:hover {
  border-color: var(--kn-accent);
}

.quiz-answer.correct {
  border-color: #22C55E;
  background: rgba(34, 197, 94, .1);
}

.quiz-answer.wrong {
  border-color: #EF4444;
  background: rgba(239, 68, 68, .1);
}

/* ── Post Format: Poll ───────────────────────────────────────── */
.poll-option {
  margin-bottom: .75rem;
}

.poll-option .option-label {
  display: flex;
  justify-content: space-between;
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: .3rem;
}

.poll-bar {
  background: var(--kn-surface2);
  border-radius: 2rem;
  height: 8px;
  overflow: hidden;
}

.poll-bar-fill {
  height: 100%;
  background: var(--kn-accent);
  border-radius: 2rem;
  transition: width .5s;
}

.btn-vote {
  margin-top: 1rem;
  background: var(--kn-accent);
  color: #0F172A;
  border: none;
  padding: .55rem 1.25rem;
  border-radius: .375rem;
  font-weight: 700;
  cursor: pointer;
}

/* ── Post Format: Recipe ─────────────────────────────────────── */
.recipe-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.recipe-meta-item {
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius);
  padding: .65rem 1rem;
  text-align: center;
  min-width: 100px;
}

.recipe-meta-item .label {
  font-size: .7rem;
  color: var(--kn-muted);
  text-transform: uppercase;
  font-weight: 700;
}

.recipe-meta-item .value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--kn-heading);
  margin-top: .2rem;
}

.recipe-ingredients,
.recipe-steps {
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius);
  padding: 1.25rem;
  margin-top: 1.25rem;
}

.recipe-ingredients h3,
.recipe-steps h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--kn-border);
}

.recipe-ingredients ul {
  list-style: none;
  padding: 0;
}

.recipe-ingredients li {
  padding: .35rem 0;
  border-bottom: 1px solid var(--kn-border);
  font-size: .9rem;
}

.recipe-steps ol {
  padding-left: 1.25rem;
}

.recipe-steps li {
  padding: .5rem 0;
  font-size: .9rem;
}

/* ── Post Format: Video ──────────────────────────────────────── */
.post-video-container {
  border-radius: var(--kn-radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: #000;
}

.post-video-container .plyr {
  border-radius: var(--kn-radius);
}

.video-embed {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--kn-radius);
  overflow: hidden;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Post Format: Audio ──────────────────────────────────────── */
.post-audio-container {
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

/* ── Profile Page ────────────────────────────────────────────── */
.profile-header {
  background: var(--kn-surface);
  border-radius: var(--kn-radius);
  margin-bottom: 2rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  border: 1px solid var(--kn-border);
}

@media(max-width:576px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
}

.profile-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--kn-accent);
}

.profile-info .name {
  font-size: 1.4rem;
  font-weight: 800;
}

.profile-info .bio {
  color: var(--kn-muted);
  margin: .5rem 0;
}

.profile-social-links {
  display: flex;
  gap: .75rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}

.profile-social-links a {
  color: var(--kn-muted);
  font-size: 1.1rem;
}

.profile-social-links a:hover {
  color: var(--kn-accent);
}

.profile-stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
}

.profile-stat {
  text-align: center;
}

.profile-stat .num {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--kn-accent);
}

.profile-stat .label {
  font-size: .75rem;
  color: var(--kn-muted);
}

/* ── Footer ──────────────────────────────────────────────────── */
#footer {
  background: var(--kn-surface);
  border-top: 1px solid var(--kn-border);
  margin-top: 3rem;
}

.footer-inner {
  padding: 2.5rem 0;
}

.footer-widget .widget-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--kn-heading);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--kn-accent);
}

.footer-widget {
  padding: 0 1rem 2.5rem;
}

.footer-logo {
  margin-bottom: 1rem;
}

.footer-logo img {
  max-height: 36px;
}

.footer-about {
  color: var(--kn-muted);
  font-size: .875rem;
  line-height: 1.7;
}

.footer-social-links ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.footer-social-links li {
  line-height: 1;
}

.footer-social-links a i {
  font-style: normal !important;
  display: inline-block;
  line-height: 1;
}

.footer-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--kn-surface2);
  border: 1px solid var(--kn-border);
  border-radius: 50%;
  color: var(--kn-muted);
  font-size: 1rem;
  transition: all .25s ease;
}

.footer-social-links a:hover {
  background: var(--kn-accent);
  color: #0F172A;
  border-color: var(--kn-accent);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Social Icon Glyphs using FontAwesome 6 */
.facebook i::before {
  content: "\f09a";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.twitter i::before {
  content: "\f099";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.x-twitter i::before {
  content: "\e61b";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.instagram i::before {
  content: "\f16d";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.youtube i::before {
  content: "\f167";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.tiktok i::before {
  content: "\e07b";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.linkedin i::before {
  content: "\f08c";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.pinterest i::before {
  content: "\f0d2";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.whatsapp i::before {
  content: "\f232";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.telegram i::before {
  content: "\f2c6";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.vk i::before {
  content: "\f189";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.rss i::before {
  content: "\f09e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}


.footer-copyright {
  background: var(--kn-bg);
  border-top: 1px solid var(--kn-border);
  padding: 1rem 0;
  font-size: .82rem;
  color: var(--kn-muted);
}

.nav-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.nav-footer a {
  color: var(--kn-muted);
}

.nav-footer a:hover {
  color: var(--kn-accent);
}

/* Newsletter */
.newsletter .description {
  font-size: .875rem;
  color: var(--kn-muted);
  margin-bottom: .85rem;
}

.newsletter-inputs {
  display: flex;
  gap: .5rem;
}

.newsletter-input {
  flex: 1;
  background: var(--kn-surface2);
  border: 1px solid var(--kn-border);
  border-radius: .375rem;
  padding: .55rem .85rem;
  color: var(--kn-text);
  font-size: .875rem;
  outline: none;
}

.newsletter-input:focus {
  border-color: var(--kn-accent);
}

.newsletter-button {
  background: var(--kn-accent);
  color: #0F172A;
  border: none;
  padding: .55rem 1rem;
  border-radius: .375rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-size: .875rem;
}

.newsletter-button:hover {
  background: var(--kn-accent-h);
}

/* ── Cookies Warning ─────────────────────────────────────────── */
.cookies-warning {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: 480px;
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius);
  padding: 1.25rem;
  box-shadow: var(--kn-shadow);
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cookies-warning .text {
  flex: 1;
  font-size: .875rem;
  color: var(--kn-text);
}

.cookies-warning .close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kn-muted);
  margin-left: auto;
}

/* ── Scroll Up Button ────────────────────────────────────────── */
.scrollup {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--kn-accent);
  color: #0F172A;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 500;
}

.scrollup.visible {
  opacity: 1;
  pointer-events: auto;
}

.scrollup:hover {
  color: #0F172A;
  transform: translateY(-3px);
}

/* ── Buttons (shared) ────────────────────────────────────────── */
.btn-custom {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--kn-accent);
  color: #FFFFFF;
  border: none;
  padding: .55rem 1.25rem;
  border-radius: .375rem;
  font-weight: 700;
  font-size: .875rem;
  cursor: pointer;
  transition: background .2s;
}

.btn-custom:hover {
  background: var(--kn-accent-h);
  color: #ffffff;
}

.btn-default {
  background: var(--kn-surface2);
  color: var(--kn-text);
  border: 1px solid var(--kn-border);
  padding: .5rem 1.1rem;
  border-radius: .375rem;
  font-size: .875rem;
  cursor: pointer;
  transition: border-color .2s;
}

.btn-default:hover {
  border-color: var(--kn-accent);
}

.btn-load-more {
  background: var(--kn-accent);
  color: #ffffff;
  border: none;
  padding: .65rem 2rem;
  border-radius: .375rem;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.btn-load-more:hover {
  background: var(--kn-accent-h);
}

.spinner-load-more {
  display: none;
}

.btn-load-more.loading .spinner-load-more {
  display: inline-block;
}

.btn-load-more.loading svg,
.btn-load-more.loading svg path {
  display: none;
}

/* ── Form Elements ───────────────────────────────────────────── */
.form-control,
.form-input {
  width: 100%;
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: .375rem;
  padding: .6rem .85rem;
  color: var(--kn-text);
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
}

.form-control:focus,
.form-input:focus {
  border-color: var(--kn-accent);
}

/* ── Modals ──────────────────────────────────────────────────── */
/* Keep Bootstrap modal animations but override visual styles */
.modal-content {
  background: var(--kn-surface) !important;
  border: 1px solid var(--kn-border) !important;
  border-radius: var(--kn-radius) !important;
  color: var(--kn-text) !important;
}

.modal-header {
  border-bottom-color: var(--kn-border) !important;
}

.modal-footer {
  border-top-color: var(--kn-border) !important;
}

.modal-title {
  color: var(--kn-heading) !important;
  font-weight: 700 !important;
}

.btn-close {
  filter: var(--bs-btn-close-filter, invert(1)) !important;
}

.btn-close-custom {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--kn-muted);
  font-weight: 300;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 10;
}

.btn-close-custom:hover {
  color: #ef4444;
}

/* Add-post modal */
#modalAddPost .modal-dialog {
  max-width: 900px !important;
}

/* CSS Grid container */
.addpost-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .addpost-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.col-add-post a {
  text-decoration: none;
  display: block;
  height: 100%;
}

.col-add-post .item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem 1.25rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dark-mode .col-add-post .item {
  background: var(--kn-surface2);
  border-color: var(--kn-border);
}

.col-add-post .item:hover {
  border-color: var(--kn-accent);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.dark-mode .col-add-post .item:hover {
  background: var(--kn-surface);
}

.col-add-post .item-icon {
  width: 72px;
  height: 72px;
  background: #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #64748b;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.dark-mode .col-add-post .item-icon {
  background: var(--kn-surface);
  color: var(--kn-muted);
}

.col-add-post .item:hover .item-icon {
  background: var(--kn-accent);
  color: #fff;
}

.col-add-post .item .title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  color: #1e293b;
}

.dark-mode .col-add-post .item .title {
  color: var(--kn-heading);
}

.col-add-post .item .desc {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.dark-mode .col-add-post .item .desc {
  color: var(--kn-muted);
}

/* Newsletter modal */


/* Newsletter modal */
.modal-newsletter .image {
  background-size: cover;
  background-position: center;
  height: 240px;
  border-radius: var(--kn-radius) var(--kn-radius) 0 0;
}

.modal-newsletter .content {
  padding: 1.5rem;
}

.modal-newsletter .title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: .5rem;
}

/* ── Auth Pages ──────────────────────────────────────────────── */
.auth-section {
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.auth-box {
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius);
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.auth-box .title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* ── Search Page ─────────────────────────────────────────────── */
.search-text {
  color: var(--kn-accent);
}

/* ── Pager ───────────────────────────────────────────────────── */
.pagination {
  display: flex;
  gap: .4rem;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 .5rem;
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: .375rem;
  color: var(--kn-text);
  font-size: .875rem;
  transition: border-color .2s, background .2s;
}

.page-item .page-link:hover {
  border-color: var(--kn-accent);
  color: var(--kn-accent);
}

.page-item.active .page-link {
  background: var(--kn-accent);
  color: #0F172A;
  border-color: var(--kn-accent);
  font-weight: 700;
}

/* ── Maintenance ─────────────────────────────────────────────── */
.maintenance-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.maintenance-page .logo {
  max-height: 50px;
  margin: 0 auto 1.5rem;
}

.maintenance-page h1 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.maintenance-page p {
  color: var(--kn-muted);
  font-size: 1rem;
  max-width: 480px;
  margin: 0 auto;
}

/* ── Reading List ────────────────────────────────────────────── */
.reading-list-section {
  padding: 2rem 0;
}

.title-index {
  display: none;
  position: absolute;
  pointer-events: none;
}

/* ── RSS Feeds ───────────────────────────────────────────────── */
.rss-feed-item {
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius);
  padding: 1rem;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rss-feed-item .icon {
  color: #F97316;
}

.rss-feed-item .title {
  font-weight: 600;
  font-size: .9rem;
  margin: 0;
}

.rss-feed-item .url {
  font-size: .78rem;
  color: var(--kn-muted);
}

/* ── Tags Page ───────────────────────────────────────────────── */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.tag-cloud a {
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  color: var(--kn-text);
  padding: .3rem .85rem;
  border-radius: 2rem;
  font-size: .82rem;
  font-weight: 500;
}

.tag-cloud a:hover {
  border-color: var(--kn-accent);
  color: var(--kn-accent);
}

/* ── Utilities ───────────────────────────────────────────────── */
.text-accent {
  color: var(--kn-accent) !important;
}

.text-muted-kn {
  color: var(--kn-muted) !important;
}

.border-accent {
  border-color: var(--kn-accent) !important;
}

.bg-surface {
  background: var(--kn-surface) !important;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.justify-content-between {
  justify-content: space-between;
}

.ms-auto {
  margin-left: auto;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.5rem;
}

.mb-3 {
  margin-bottom: .75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.text-center {
  text-align: center;
}

.container-xl {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media(min-width:1024px) {
  .container-xl {
    padding: 0 1.5rem;
  }
}

/* row + col grid shims */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem;
}

.col-12 {
  width: 100%;
  padding: 0 .5rem;
}

.col-6 {
  width: 50%;
  padding: 0 .5rem;
}

.col-md-6 {
  padding: 0 .5rem;
}

.col-md-12 {
  padding: 0 .5rem;
}

@media(min-width:1024px) {
  .col-md-6 {
    width: 50%;
  }

  .col-md-12 {
    width: 100%;
  }
}

.col-lg-4 {
  padding: 0 .5rem;
}

.col-lg-8 {
  padding: 0 .5rem;
}

.col-lg-6 {
  padding: 0 .5rem;
}

@media(min-width:1024px) {
  .col-lg-4 {
    width: 33.333%;
  }

  .col-lg-8 {
    width: 66.666%;
  }

  .col-lg-6 {
    width: 50%;
  }
}

.col-sm-12 {
  width: 100%;
  padding: 0 .5rem;
}

.gx-1 {
  margin: 0 -.25rem;
}

.gx-1>* {
  padding: 0 .25rem;
}

.gy-1>* {
  padding-bottom: .25rem;
}

.mt-1 {
  margin-top: .25rem;
}

.mb-1 {
  margin-bottom: .25rem;
}

.no-select,
.noselect {
  user-select: none;
}

/* Custom scrollbar */
.vr-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.vr-scrollbar::-webkit-scrollbar-track {
  background: var(--kn-surface2);
}

.vr-scrollbar::-webkit-scrollbar-thumb {
  background: var(--kn-border);
  border-radius: 3px;
}

.vr-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--kn-accent);
}

/* Icon font aliases for custom icon classes used by the base script */
/* These map to SVG icons loaded by the base CMS script */
.icon-arrow-up::before {
  content: '↑';
}

.icon-arrow-down::before {
  content: '';
}

.icon-arrow-left::before {
  content: '';
}

.icon-arrow-right::before {
  content: '';
}

.icon-comment::before {
  content: '💬';
  font-style: normal;
}

.icon-eye::before {
  content: '👁';
  font-style: normal;
}

.icon-rss::before {
  content: '📡';
  font-style: normal;
}

.icon-close::before {
  content: '✕';
}

.icon-globe::before {
  content: '🌐';
  font-style: normal;
}

/* ── Bootstrap Modal Base Rules (required since we don't load Bootstrap CSS) ── */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1055;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal.show {
  display: block;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: .5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform .3s ease-out;
  transform: translate(0, -50px);
}

.modal.show .modal-dialog {
  transform: none;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 1;
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  padding: .75rem;
  gap: .5rem;
}

@media(min-width:576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }

  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }

  .modal-sm {
    max-width: 300px;
  }
}

@media(min-width:992px) {

  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media(min-width:1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

/* btn-close (Bootstrap) */
.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em;
  color: var(--kn-muted);
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: .375rem;
  opacity: .5;
  cursor: pointer;
}

.btn-close:hover {
  opacity: .75;
}

/* ── form-label ─────────────────────────────────────────────── */
.form-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--kn-text);
}

/* ── show-on-page-load (hide spinner placeholders) ──────────── */
.show-on-page-load {
  opacity: 1;
}

/* ── Dropdown (Bootstrap shim) ──────────────────────────────── */
.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1000;
  min-width: 10rem;
  padding: .5rem 0;
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius);
}

.dropdown-menu.show {
  display: block;
}

/* Dropdown hover via jQuery in script.js */
.nav-item:hover>.dropdown-menu,
.nav-item:hover>.nav-dropdown-menu {
  display: block;
  margin-top: 0;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: .35rem 1rem;
  color: var(--kn-text);
  background: none;
  border: 0;
  font-size: .875rem;
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--kn-surface2);
  color: var(--kn-accent);
}

.dropdown-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.dropdown-item svg.chevron-down {
  width: 12px;
  height: 12px;
  color: var(--kn-muted);
}

.dropdown-item:hover svg.chevron-down {
  color: var(--kn-accent);
}

.nav-item-has-submenu {
  position: relative;
}

.nav-sub-dropdown-menu {
  top: 0 !important;
  left: auto !important;
  right: 100% !important;
  margin-top: -1px !important;
  margin-right: 0 !important;
  border-radius: var(--kn-radius) 0 0 var(--kn-radius) !important;
}

.nav-item-has-submenu:hover>.nav-sub-dropdown-menu {
  display: block;
}

/* fix Bootstrap grid shims needed by CMS core JS */
.col-sm-3 {
  width: 100%;
  padding: 0 .5rem;
}

@media(min-width:576px) {
  .col-sm-3 {
    width: 25%;
  }
}

.col-sm-6 {
  width: 100%;
  padding: 0 .5rem;
}

@media(min-width:576px) {
  .col-sm-6 {
    width: 50%;
  }
}

.col-sm-12 {
  width: 100%;
  padding: 0 .5rem;
}

.col-md-3 {
  width: 100%;
  padding: 0 .5rem;
}

.col-md-4 {
  width: 100%;
  padding: 0 .5rem;
}

.col-md-9 {
  width: 100%;
  padding: 0 .5rem;
}

@media(min-width:1024px) {
  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.333%;
  }

  .col-md-9 {
    width: 75%;
  }
}

.col-lg-3 {
  width: 100%;
  padding: 0 .5rem;
}

@media(min-width:1024px) {
  .col-lg-3 {
    width: 25%;
  }
}

/* mb / mt spacing utilities */
.mb-2 {
  margin-bottom: .5rem;
}

.mb-5 {
  margin-bottom: 1.5rem;
}

.me-1 {
  margin-right: .25rem;
}

.me-2 {
  margin-right: .5rem;
}

.float-end {
  float: right;
}

.display-block {
  display: block;
}

.display-flex {
  display: flex;
}

.display-inline-block {
  display: inline-block;
}

.text-muted {
  color: var(--kn-muted) !important;
}

.text-success {
  color: #4ade80 !important;
}

.text-danger {
  color: #f87171 !important;
}

.text-start {
  text-align: left;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.img-thumbnail {
  border-radius: 50%;
  border: 2px solid var(--kn-border);
}

.img-responsive {
  width: 100%;
  height: auto;
}

/* ── Profile Page Refinements ───────────────────────────────── */
.section-profile {
  padding-top: 0;
}

@media(max-width:1023px) {
  .section-page {
    padding-top: 80px;
  }

  .section-newsticker {
    margin-top: 75px;
  }

  .section-profile {
    padding-top: 59px;
  }
}

.profile-header {
  position: relative;
  height: 320px;
  border-radius: 0;
  overflow: visible;
  border: none;
  margin-bottom: 0;
  display: block;
}

.profile-cover-image {
  height: 100%;
  background-color: #0f172a;
  background-size: cover;
  background-position: center;
  background-image: var(--profile-cover-url);
}

.profile-cover-empty {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  position: relative;
}

.profile-cover-empty::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://www.transparenttextures.com/patterns/cubes.png');
  opacity: 0.1;
}

.profile-info-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 1.5rem;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.profile-header-content {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  pointer-events: auto;
}

.profile-image {
  margin-bottom: -3rem;
  position: relative;
  z-index: 10;
}

.profile-image img {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.profile-text {
  flex: 1;
  min-width: 0;
  padding-bottom: 0.5rem;
}

.profile-text .username {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.profile-last-seen {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.profile-last-seen.online svg {
  color: #22c55e;
}

.profile-action {
  margin-left: auto;
  padding-bottom: 1rem;
}

.widget-profile-info {
  padding: 0;
  border: none;
  background: transparent;
}

.about-me-text {
  font-size: 0.95rem;
  color: var(--kn-text);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.info-item {
  font-size: 0.825rem;
  color: var(--kn-muted);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-sidebar-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.rss-link {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kn-surface);
  border-radius: 50%;
  color: var(--kn-muted);
  border: 1px solid var(--kn-border);
  transition: all 0.2s;
}

.rss-link:hover {
  background: var(--kn-accent);
  color: #fff;
  border-color: var(--kn-accent);
}

.profile-social-links {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-social-links a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kn-surface);
  border-radius: 50%;
  color: var(--kn-muted);
  border: 1px solid var(--kn-border);
  transition: all 0.2s;
  font-size: 0.9rem;
}

.profile-social-links a:hover {
  background: var(--kn-accent);
  color: #fff;
  border-color: var(--kn-accent);
}

.widget-followers {
  margin-top: 2rem;
  border-top: 1px solid var(--kn-border);
  padding-top: 1.5rem;
}

.widget-followers .widget-title {
  border: none;
  padding: 0;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  text-transform: none;
  border-bottom: none;
}

.followers-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.followers-grid img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--kn-border);
}

@media (max-width: 768px) {
  .profile-header {
    height: 200px;
  }

  .profile-header-content {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.75rem;
    text-align: left;
  }

  .profile-image {
    margin-bottom: -1.5rem;
  }

  .profile-image img {
    width: 90px;
    height: 90px;
    border-width: 3px;
  }

  .profile-info-container {
    padding-bottom: 1rem;
  }

  .profile-text {
    padding: 0;
    margin: 0;
    flex: 1;
  }

  .profile-text .username {
    font-size: 1.2rem;
  }

  .profile-last-seen {
    justify-content: flex-start;
    font-size: 0.75rem;
  }

  .profile-action {
    margin-left: auto;
    padding-bottom: 0.25rem;
  }

  .profile-action .btn-custom {
    padding: 0.5rem;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .profile-action .btn-custom .btn-text {
    display: none;
  }

  .profile-action .btn-custom svg {
    margin: 0 !important;
  }
}

/* ── Edit Profile Page ─────────────────────────────────────── */
.edit-profile-cover {
  position: relative;
  height: 250px;
  background-color: var(--kn-surface2);
  background-size: cover;
  background-position: center;
  border-radius: var(--kn-radius);
  margin-bottom: 3.5rem;
  background-image: var(--profile-cover-url);
}

.edit-profile-cover.edit-cover-no-image {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.edit-avatar {
  position: absolute;
  bottom: -40px;
  left: 1.5rem;
  z-index: 10;
}

.edit-avatar img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--kn-surface);
  object-fit: cover;
  background-color: var(--kn-surface);
  box-shadow: var(--kn-shadow);
}

.btn-upload-icon {
  position: absolute;
  width: 36px;
  height: 36px;
  background: var(--kn-accent);
  color: #fff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  border: 4px solid var(--kn-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-upload-icon:hover {
  background: var(--kn-accent-h);
  transform: scale(1.1);
}

.btn-upload-icon input {
  display: none;
}

.btn-cover-upload {
  top: 1rem;
  right: 1rem;
}

.btn-avatar-upload {
  bottom: 0;
  right: 0;
}

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE REDESIGN — Hero Slider, Featured Cards, Category Grid
   ════════════════════════════════════════════════════════════════ */

/* ── Section Featured wrapper ─────────────────────────────────── */
.section-featured {
  padding: 1rem 0 2rem;
}

/* ── Hero Slider Wrap ─────────────────────────────────────────── */
.hero-slider-wrap {
  position: relative;
  border-radius: 0.875rem;
  overflow: hidden;
  background: var(--kn-surface2);
  height: 430px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1023px) {
  .hero-slider-wrap {
    height: 360px;
  }
}

@media (max-width: 767px) {
  .hero-slider-wrap {
    height: 260px;
  }
}

/* ── Hero Slider ─────────────────────────────────────────────── */
.hero-slider {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  cursor: grab;
}

.hero-slider:active {
  cursor: grabbing;
}

.hero-slider-inner {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hero-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.hero-slide-img-link {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-slide-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block !important;
  max-width: none;
}

/* Gradient caption overlay */
.hero-slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.5rem 3rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .5) 55%, transparent 100%);
  z-index: 10;
  pointer-events: none;
  /* Let clicks pass through to the main post link beneath */
}

@media (max-width: 767px) {
  .hero-slide-caption {
    padding: 1rem 1rem 2rem;
  }
}

.hero-slide-badge-link {
  display: inline-block;
  margin-bottom: 0.4rem;
  z-index: 11;
  position: relative;
  pointer-events: auto;
  /* Re-enable for the badge link */
}

.hero-slide-title {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.4rem;
  z-index: 11;
  position: relative;
  pointer-events: auto;
  /* Re-enable for the title link */
}

.hero-slide-title a {
  color: #fff;
  text-decoration: none;
  transition: color .2s;
}

.hero-slide-title a:hover {
  color: var(--kn-accent);
}

.hero-slide-meta {
  color: rgba(255, 255, 255, .7);
  font-size: .75rem;
  margin: 0;
  z-index: 11;
  position: relative;
  pointer-events: auto;
  /* Re-enable for the meta links */
}

@media (max-width: 767px) {
  .hero-slide-title {
    font-size: 1rem;
  }
}

/* ── Hero Slider Arrow Nav ───────────────────────────────────── */
/* Unique ID isolation and perfect centering */
#hero-main-nav.main-slider-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hero-slider-wrap:hover #hero-main-nav.main-slider-nav {
  opacity: 1;
  visibility: visible;
}

#hero-main-nav.main-slider-nav button {
  pointer-events: auto;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s, border-color .2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#hero-main-nav.main-slider-nav button:hover {
  background: var(--kn-accent);
  border-color: var(--kn-accent);
  transform: scale(1.08);
}

/* Mobile: always show nav but smaller, or keep hidden? 
   Usually on mobile we hide arrows and rely on dots/swipe. 
   But user asked for swipe, so I'll keep arrows visible on touch if they want.
   Actually, I'll keep them visible on mobile briefly or hide them as they take up space.
*/
@media (max-width: 767px) {
  #hero-main-nav.main-slider-nav {
    display: none;
    /* Hide arrows on mobile, rely on swipe + dots */
  }
}

/* ── Dot Navigation ─────────────────────────────────────────── */
.hero-slider-dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 10;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width .3s ease, background .3s ease;
}

.hero-dot.active {
  width: 24px;
  background: var(--kn-accent);
}

/* ── Featured Right Cards ────────────────────────────────────── */
.feat-card {
  overflow: hidden;
  border-radius: 0.875rem;
  flex-shrink: 0;
  background: var(--kn-surface2);
}

.feat-card-lg {
  height: 230px;
}

.feat-card-sm {
  height: 188px;
}

@media (max-width: 1023px) {
  .feat-card-lg {
    height: 190px;
  }

  .feat-card-sm {
    height: 158px;
  }
}

@media (max-width: 767px) {
  .feat-card-lg {
    height: 200px;
  }

  .feat-card-sm {
    height: 160px;
  }
}

.feat-card a img,
.hero-slide a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.feat-card:hover a img,
.hero-slide:hover a img {
  transform: scale(1.08);
}

.feat-card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.85rem 0.9rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 100%);
}

.feat-card-caption-sm {
  padding: 0.6rem 0.75rem;
}

.feat-card-title {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0.3rem 0 0;
}

.feat-card-title a {
  color: #fff;
  transition: color .2s;
}

.feat-card-title a:hover {
  color: var(--kn-accent);
}

.feat-card-title-sm {
  font-size: 0.8rem;
}

.feat-card-meta {
  color: rgba(255, 255, 255, .7);
  font-size: .7rem;
  margin: 0.25rem 0 0;
}