/**
 * Gapim.uz - Modern News Portal Theme
 * Inspired by BBC, The Guardian, Medium
 * 
 * Design Philosophy:
 * - Clean, professional news aesthetic
 * - Strong visual hierarchy
 * - Readable typography
 * - Bold category branding
 * - Card-based articles with clear separation
 */

/* ==========================================================================
   1. FONTS - Professional News Typography
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   2. CSS CUSTOM PROPERTIES
   ========================================================================== */
:root {
  /* News Brand Colors */
  --brand-primary: #c41e3a;
  /* News red - like BBC */
  --brand-secondary: #1a1a2e;
  /* Deep navy */
  --brand-accent: #16213e;
  /* Dark blue accent */

  /* Category Colors - Each category gets a color */
  --cat-uzbekistan: #c41e3a;
  /* Red */
  --cat-cis: #0066cc;
  /* Blue */
  --cat-world: #2d8a4e;
  /* Green */
  --cat-society: #8b5cf6;
  /* Purple */

  /* Neutral Palette */
  --white: #ffffff;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  --black: #000000;

  /* Text */
  --text-headline: #1a1a1a;
  --text-body: #333333;
  --text-secondary: #666666;
  --text-muted: #999999;
  --text-inverse: #ffffff;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-nav: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* Spacing */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 32px;
  --gap-2xl: 48px;

  /* Typography Scale - Matched to Kun.uz (Fixed Pixel Values) */
  /* Root size ambiguity causing issues, switching to px */

  --text-xs: 14px;
  --text-sm: 16px;

  /* Body Text: Kun.uz uses 20px */
  --text-base: 18px;
  --text-lg: 22px;

  /* Headlines: Kun.uz uses 26px-27px */
  --text-xl: 26px;
  --text-2xl: 30px;
  --text-3xl: 36px;
  --text-4xl: 42px;
}

/* ==========================================================================
   3. BASE STYLES
   ========================================================================== */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-body);
  background-color: var(--gray-100);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

/* Article Image Spacing Fix */
.article-image-full,
.article-full-image,
.pull-left.item-image {
  margin-bottom: var(--gap-lg) !important;
}

/* ==========================================================================
   4. TYPOGRAPHY APPLIED
   ========================================================================== */
h1,
.h1,
.page-header h1,
.article-title,
.article-header h1 {
  font-size: var(--text-2xl) !important;
  line-height: 1.35;
  /* Kun.uz ~1.37 */
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  /* Kun.uz uses Inter for headings */
  font-weight: 700;
  color: #fff;
  /* Kun.uz Dark Blue */
  margin: 0 0 var(--gap-sm);
}

.page-header.clearfix h1 {
  color: #000 !important;
}

.page-header p {
  color: #fff;
}

.article-header.clearfix h1 {
  color: #000 !important;
}

.resume-section h2,
.resume-section p {
  color: #fff !important;
}

.item-page .article-aside {
  font-size: 15px;
  margin-top: 2px;
  margin-bottom: 20px;
}

.blog .page-header h1 {
  color: #000 !important;
}

h2,
.h2,
.page-header h2,
.moduletable h3,
.module-title {
  font-size: var(--text-xl) !important;
  line-height: 1.3;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #000;
  margin: 0 0 var(--gap-sm);
}

h3,
.h3 {
  font-size: var(--text-lg) !important;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: var(--text-headline);
  line-height: 1.2;
  margin: 0 0 var(--gap-sm);
}

p,
.article-intro,
.article-content {
  font-size: var(--text-base) !important;
  line-height: 1.6;
  /* Kun.uz uses 1.5, slightly looser for readability */
  margin: 0 0 var(--gap-md);
  color: #333;
  font-family: 'Georgia', 'Times New Roman', Times, serif;
  /* Match Kun.uz Serif style for body */
}

/* Article Image Spacing - Stronger Selector */
.article-content img,
.pull-left.item-image,
.item-page .img-intro-left,
.item-page .img-fulltext-left {
  margin-bottom: var(--gap-lg) !important;
  margin-right: var(--gap-md) !important;
  display: block;
}

.article-content {
  margin-top: var(--gap-md);
}

/* Fix for grid layouts */
.magazine-item-ct {
  font-size: var(--text-sm);
  /* Keep magazine items slightly smaller or use base */
}

.page-header {
  margin-top: 0px !important;
}

h4,
h5,
h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--text-headline);
  line-height: 1.3;
  margin: 0 0 var(--gap-sm);
}

p {
  margin: 0 0 var(--gap-md);
  color: var(--text-secondary);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* ==========================================================================
   5. HEADER / NAVIGATION - News Style Top Bar
   ========================================================================== */
#t3-mainnav,
.t3-mainnav,
.navbar-default {
  background: var(--brand-secondary) !important;
  border: none !important;
  box-shadow: var(--shadow-nav);
  padding: 0 !important;
  min-height: 56px;
  margin-bottom: 0 !important;
}

/* Logo */
.logo a,
.logo-text span {
  color: var(--white) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

/* Navigation Links */
.navbar-default .navbar-nav>li>a,
.t3-navbar .nav>li>a {
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 18px 20px !important;
  transition: all 0.2s ease;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
}

.navbar-default .navbar-nav>li>a:hover {
  color: var(--white) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-bottom-color: var(--brand-primary);
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover {
  color: var(--white) !important;
  background: rgba(196, 30, 58, 0.2) !important;
  border-bottom-color: var(--brand-primary);
}

/* Navigation container improvements */
.t3-mainnav .container,
.navbar-default .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   HEADER SEARCH & LANGUAGE REFACTOR
   ========================================================================== */

/* Main header container as flex */
.header-portal-layout {
  padding: 0 !important;
  background: #fff !important;
}

.header-flex-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0 15px !important;
}

.header-top-block {
  background: #fff !important;
  border-bottom: 1px solid #e0e0e0 !important;
  padding: 15px 0 !important;
}

.header-menu-block {
  background: var(--brand-secondary) !important;
  /* Dark blue */
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
}

.header-portal-layout .navbar-header {
  flex: 1 1 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: unset !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.t3-navbar {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  float: none !important;
}

.head-search {
  flex: 1 1 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 15px !important;
  float: none !important;
  margin: 0 !important;
  position: relative !important;
}

/* Ensure fixed header height is accounted for */
body {
  padding-top: 80px !important;
  /* Adjusted for two rows */
}

/* Language Dropdown */
.gapim-lang-dropdown {
  position: relative !important;
  display: inline-block !important;
  margin-right: 10px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.gapim-lang-dropdown .dropdown-toggle {
  background: #1a1a2e !important;
  border: 1px solid #1a1a2e !important;
  color: #fff !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
  min-width: 100px !important;
  justify-content: space-between !important;
  position: relative !important;
  z-index: 1001 !important;
  visibility: visible !important;
}

.gapim-lang-dropdown .dropdown-toggle:hover {
  background: #c41e3a !important;
  border-color: #c41e3a !important;
}

.gapim-lang-dropdown .lang-name {
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: block !important;
}

.gapim-lang-dropdown i {
  font-size: 12px !important;
  opacity: 0.9 !important;
  margin-left: 4px !important;
  color: #fff !important;
  display: inline-block !important;
}

.gapim-lang-dropdown .dropdown-menu {
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
  min-width: 140px !important;
  padding: 0 !important;
  margin-top: 5px !important;
  left: auto !important;
  right: 0 !important;
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  z-index: 1002 !important;
  visibility: visible !important;
}

.gapim-lang-dropdown.open .dropdown-menu,
.gapim-lang-dropdown .dropdown-menu.show {
  display: block !important;
  animation: fadeIn 0.2s ease !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

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

.gapim-lang-dropdown .dropdown-item {
  display: block !important;
  padding: 10px 15px !important;
  color: #333 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
  background: #fff !important;
  border: none !important;
  visibility: visible !important;
}

.gapim-lang-dropdown .dropdown-item:hover {
  background: #f5f5f5 !important;
  color: #c41e3a !important;
}

.gapim-lang-dropdown .dropdown-item .lang-name {
  color: inherit !important;
  display: block !important;
}

/* Search Toggle & Overlay */
.gapim-search-wrapper {
  position: relative !important;
  display: inline-block !important;
  visibility: visible !important;
}

.gapim-search-wrapper .search-toggle {
  background: #1a1a2e !important;
  border: 1px solid #1a1a2e !important;
  color: #fff !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  visibility: visible !important;
}

.gapim-search-wrapper .search-toggle i {
  color: #fff !important;
  font-size: 16px !important;
  display: block !important;
}

.gapim-search-wrapper .search-toggle:hover {
  background: #c41e3a !important;
  border-color: #c41e3a !important;
}

.gapim-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: var(--brand-secondary);
  z-index: 2147483647 !important;
  display: flex;
  align-items: center;
  transform: translateY(-100%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.gapim-search-overlay.is-visible {
  transform: translateY(0);
  opacity: 1;
  background-color: #19428f;
  border-radius: 20px;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.search-input-wrapper .form-control {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  color: #fff !important;
  height: 48px;
  padding: 10px 20px;
  font-size: 18px;
  flex: 1;
}

.search-input-wrapper .form-control:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 10px rgba(196, 30, 58, 0.3) !important;
}

.search-input-wrapper .search-submit,
.search-input-wrapper .search-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-input-wrapper .search-submit:hover,
.search-input-wrapper .search-close:hover {
  opacity: 1;
}

/* Dropdown */
.dropdown-menu {
  background: var(--white);
  border: none;
  border-radius: 4px;
  box-shadow: var(--shadow-card-hover);
  padding: 8px 0;
  margin-top: 0;
}

.dropdown-menu>li>a {
  color: var(--text-body) !important;
  padding: 10px 20px;
  font-size: var(--text-sm);
}

.dropdown-menu>li>a:hover {
  background: var(--gray-100) !important;
  color: var(--brand-primary) !important;
}

/* ==========================================================================
   6. MAIN CONTENT WRAPPER
   ========================================================================== */

/* Account for fixed navbar height (approx 94px) */
/* Removed redundant mainbody padding as it creates extra gap since body already has padding-top */
.t3-wrapper {
  padding-top: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.t3-content,
#t3-content {
  padding: var(--gap-xl) 0;
}

/* ==========================================================================
   7. MAGAZINE CATEGORY SECTIONS - News Style
   ========================================================================== */
.magazine-category {
  background: var(--white);
  margin-bottom: var(--gap-lg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* Category Header - Bold colored bar */
.magazine-category-title {
  background: linear-gradient(135deg, var(--brand-primary) 0%, #a01830 100%);
  color: var(--white) !important;
  padding: var(--gap-md) var(--gap-lg);
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  position: relative;
}

.magazine-category-title::after {
  display: none;
  /* Remove the old accent line */
}

.magazine-category-title a {
  color: var(--white) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.magazine-category-title a:hover {
  color: var(--white) !important;
}

.magazine-category-title strong {
  font-weight: 700;
}

.magazine-category-title i,
.magazine-category-title .icon-angle-right {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.2em;
  transition: transform 0.2s ease;
}

.magazine-category-title a:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   CATEGORY COLORS - Using :has() to target parent based on link href
   Actual site hrefs: /uzbekistan, /sng, /mir, /obshestvo
   ========================================================================== */

/* Default: Red (fallback for all category titles) */
.magazine-category-title {
  background: linear-gradient(135deg, #c41e3a 0%, #a01830 100%) !important;
}

/* УЗБЕКИСТАН - Red (Primary brand color) */
.magazine-category-title:has(a[href*="uzbekistan"]) {
  background: linear-gradient(135deg, #c41e3a 0%, #a01830 100%) !important;
}

/* СНГ - Blue */
.magazine-category-title:has(a[href*="sng"]) {
  background: linear-gradient(135deg, #0066cc 0%, #004999 100%) !important;
}

/* МИР - Green */
.magazine-category-title:has(a[href*="mir"]) {
  background: linear-gradient(135deg, #2d8a4e 0%, #1e6b3a 100%) !important;
}

/* ОБЩЕСТВО - Purple (note: site uses "obshestvo" not "obshhestvo") */
.magazine-category-title:has(a[href*="obshestvo"]) {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d3dd1 100%) !important;
}

/* Fallback for browsers that don't support :has() - use nth-of-type on magazine-category only */
@supports not selector(:has(*)) {
  .magazine-category:nth-of-type(1) .magazine-category-title {
    background: linear-gradient(135deg, #c41e3a 0%, #a01830 100%) !important;
  }

  .magazine-category:nth-of-type(2) .magazine-category-title {
    background: linear-gradient(135deg, #0066cc 0%, #004999 100%) !important;
  }

  .magazine-category:nth-of-type(3) .magazine-category-title {
    background: linear-gradient(135deg, #2d8a4e 0%, #1e6b3a 100%) !important;
  }

  .magazine-category:nth-of-type(4) .magazine-category-title {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d3dd1 100%) !important;
  }
}

/* ==========================================================================
   EMPTY CATEGORY HANDLING
   ========================================================================== */

/* When row-articles is empty or only has whitespace */
.row-articles:empty,
.magazine-category .row-articles:not(:has(.magazine-item)) {
  padding: var(--gap-xl) var(--gap-lg);
  text-align: center;
  color: var(--gray-500);
  font-size: var(--text-sm);
  font-style: italic;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Add "No articles yet" message for empty categories */
.row-articles:empty::before,
.magazine-category .row-articles:not(:has(.magazine-item))::before {
  content: 'Скоро здесь появятся новости...';
  color: var(--gray-400);
}

/* Hide completely empty categories (alternative - uncomment to use) */
/*
.magazine-category:has(.row-articles:empty) {
  display: none;
}
*/

/* Articles Container */
.row-articles {
  padding: var(--gap-lg);
  background: var(--white);
  min-height: 100px;
}

/* ==========================================================================
   8. MAGAZINE ARTICLE ITEMS - News Cards
   ========================================================================== */
.magazine-item {
  background: var(--white);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--gap-md);
  margin-bottom: var(--gap-md);
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--gray-200);
}

.magazine-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.magazine-item:hover {
  background: var(--gray-50);
  transform: none;
  box-shadow: none;
}

/* Article Headlines - Homepage List */
.magazine-item h2,
.magazine-item .page-header h2 {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 16px !important;
  /* Standard list size matching Kun.uz */
  font-weight: 700;
  line-height: 1.4;
  /* Slightly tighter for smaller text */
  margin: 0 0 var(--gap-xs);
  /* Reduced margin */
  color: #000;
}

/* Featured Article Override - Removed to prevent uneven grid layout */
/* .row-articles .magazine-item:first-child h2 {
   font-size: 26px !important;
   line-height: 1.3;
} */

.magazine-item h2 a,
.magazine-item .page-header a {
  color: var(--text-headline);
  transition: color 0.2s ease;
}

.magazine-item h2 a:hover,
.magazine-item .page-header a:hover {
  color: var(--brand-primary);
}

/* Article Images */
.magazine-item img,
.magazine-item-media img {
  border-radius: 4px;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.magazine-item:hover img {
  opacity: 0.9;
  transform: none;
}

/* Article Content/Intro - Homepage Summaries */
.magazine-item .article-content,
.magazine-item section,
.magazine-item p {
  color: var(--text-secondary);
  font-size: 14px !important;
  /* Match Kun.uz summary size */
  line-height: 1.5;
  margin: 0;
}

/* Featured/Lead Article - Removed override to keep consistent with other items */
/* .row-articles .magazine-item:first-child h2 {
  font-size: var(--text-2xl);
} */

/* ==========================================================================
   8.5 CATEGORY BLOG ITEMS (.blog-item)
   ========================================================================== */
.blog-item {
  background: var(--white);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--gap-md) 0;
  margin-bottom: var(--gap-md);
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--gray-200);
}

.blog-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.blog-item:hover {
  background: var(--gray-50);
}

.blog-item .article-title,
.blog-item .page-header h2 {
  font-family: 'Inter', Helvetica, Arial, sans-serif !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 var(--gap-sm) !important;
  color: #000 !important;
  word-wrap: break-word;
  /* Prevent long words like 'Региональное' from overlapping sidebar */
  overflow-wrap: break-word;
  margin-bottom: 20px !important;
}

.blog-item .article-title a {
  color: var(--text-headline) !important;
  transition: color 0.2s ease !important;
}

.blog-item .article-title a:hover {
  color: var(--brand-primary) !important;
}

/* Fix floated image on category list */
.blog-item .item-image {
  margin-bottom: var(--gap-md) !important;
  margin-right: var(--gap-md) !important;
  width: 100%;
}

.blog-item .item-image img {
  border-radius: 4px;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   9. SIDEBAR / MODULES
   ========================================================================== */
.sidebar .module,
.t3-sidebar .module {
  background: var(--white);
  border-radius: 8px;
  padding: var(--gap-lg);
  margin-bottom: var(--gap-lg);
  box-shadow: var(--shadow-card);
}

.sidebar .module-title,
.t3-sidebar .module-title,
.module-title {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-headline);
  padding-bottom: var(--gap-sm);
  margin-bottom: var(--gap-md);
  border-bottom: 2px solid var(--brand-primary);
  position: relative;
}

.sidebar .module-title::after,
.t3-sidebar .module-title::after {
  display: none;
}

/* ==========================================================================
   10. BUTTONS
   ========================================================================== */
.btn,
button,
input[type="submit"] {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 10px 20px;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.btn-primary {
  background: var(--brand-primary);
  color: var(--white);
}

.btn-primary:hover {
  background: #a01830;
  transform: translateY(-1px);
}

.btn-default {
  background: var(--gray-200);
  color: var(--text-body);
}

.btn-default:hover {
  background: var(--gray-300);
}

/* Read More Links */
.readmore a,
a.readmore {
  color: var(--brand-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.readmore a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   11. FOOTER - Professional News Footer
   ========================================================================== */
#t3-footer,
.t3-footer {
  background: var(--brand-secondary);
  color: var(--gray-400);
  padding: var(--gap-2xl) 0 var(--gap-lg);
  margin-top: var(--gap-2xl);
}

.t3-footer a {
  color: var(--gray-300);
  transition: color 0.2s ease;
}

.t3-footer a:hover {
  color: var(--white);
}

.t3-footer .module-title {
  color: var(--white);
  border-bottom-color: var(--brand-primary);
}

.t3-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--gap-lg);
  margin-top: var(--gap-lg);
  font-size: var(--text-sm);
  color: var(--gray-500);
  text-align: center;
}

/* Back to Top */
#back-to-top .btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--white);
  box-shadow: var(--shadow-card-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#back-to-top .btn:hover {
  background: #a01830;
  transform: translateY(-2px);
}

/* ==========================================================================
   12. FORMS
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-base);
  padding: 12px 16px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--white);
  color: var(--text-body);
  transition: border-color 0.2s ease;
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand-primary);
}

/* ==========================================================================
   13. PAGINATION
   ========================================================================== */
.pagination {
  display: flex;
  gap: var(--gap-xs);
  justify-content: center;
  margin: var(--gap-xl) 0;
}

.pagination li a,
.pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  font-weight: 500;
  font-size: var(--text-sm);
  background: var(--white);
  color: var(--text-body);
  border: 1px solid var(--gray-300);
  transition: all 0.2s ease;
}

.pagination li a:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.pagination li.active a,
.pagination li.active span {
  background: var(--brand-primary);
  color: var(--white);
  border-color: var(--brand-primary);
}

/* ==========================================================================
   14. LANGUAGE FLAGS
   ========================================================================== */
.mod-languages {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.mod-languages img {
  width: 24px;
  height: auto;
  border-radius: 2px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.mod-languages img:hover {
  opacity: 1;
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1050px) {
  .navbar-default .navbar-toggle {
    border: none;
    background: transparent;
    padding: 10px;
  }

  .gapim-search-overlay.is-visible {
    margin-left: 50px;
  }

  .navbar-default .navbar-toggle .icon-bar {
    background: var(--white);
    width: 22px;
    height: 2px;
  }

  .navbar-default .navbar-collapse {
    background: var(--brand-secondary);
    border: none;
    box-shadow: var(--shadow-nav);
  }

  .navbar-default .navbar-nav>li>a {
    padding: 12px 16px !important;
    border-bottom: none;
  }
}

@media (max-width: 820px) {
  :root {
    --text-xl: 24px;
    --text-2xl: 26px;
    --text-3xl: 30px;
  }

  .blog-items.clearfix {
    margin-left: 26px;
  }

  .page-header {
    margin-left: 10px;
  }

  .t3-content,
  #t3-content {
    margin: 0 5px;
  }

  /* .col-md-4 {
    float: left;
    width: 39%;
  } */

  /* .col-md-8 {
    float: right;
    width: 59%;
  } */

  .magazine-category-title {
    padding: var(--gap-sm) var(--gap-md);
    font-size: var(--text-sm);
  }

  .row-articles {
    padding: var(--gap-md);
  }

  .magazine-item {
    padding: var(--gap-sm);
  }
}

@media (max-width: 430px) {
  .gapim-lang-dropdown .dropdown-toggle {
    min-width: 50px !important;
  }

  .gapim-lang-dropdown .lang-name {
    overflow: hidden;
    width: 30px
  }

  .gapim-lang-dropdown .dropdown-menu {
    min-width: 70px !important;
  }

  #t3-mainnav .head-search {
    gap: 0px !important;
  }

  .gapim-search-wrapper {
    margin-right: -24px !important;
  }

  #t3-mainnav .navbar-toggle {
    right: 0 !important;
  }

  .gapim-lang-dropdown {
    margin-right: 0px !important;
  }
}

/* ==========================================================================
   16. PRINT STYLES
   ========================================================================== */
@media print {

  #t3-mainnav,
  #t3-footer,
  #back-to-top {
    display: none !important;
  }

  body {
    background: white;
  }

  .magazine-category {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ==========================================================================
   17. UTILITY & POLISH
   ========================================================================== */
::selection {
  background: var(--brand-primary);
  color: var(--white);
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Better scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--gray-200);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* Focus states */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Breaking News Ticker (if you add one) */
.breaking-news {
  background: var(--brand-primary);
  color: var(--white);
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.breaking-news strong {
  text-transform: uppercase;
  margin-right: 8px;
}

/* ==========================================================================
   18. FOOTER LINKS SECTION
   ========================================================================== */
.footer-links {
  background: var(--brand-secondary);
  padding: 50px 0 30px;
  border-top: 4px solid var(--brand-primary);
}

.footer-col {
  margin-bottom: 30px;
}

.footer-col h4 {
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-primary);
  display: inline-block;
}

.footer-col p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px !important;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Footer Menu Lists */
.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 10px;
}

.footer-menu li a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.footer-menu li a:hover {
  color: var(--white);
  padding-left: 5px;
}

/* Footer Contact List */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-bottom: 12px;
}

.footer-contact li i {
  color: var(--brand-primary);
  margin-right: 10px;
  width: 16px;
}

/* Footer Social Icons */
.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-radius: 50%;
  font-size: 18px;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  background: var(--brand-primary);
  transform: translateY(-3px);
}

/* Copyright Section */
.t3-copyright {
  background: rgba(0, 0, 0, 0.2);
  padding: 20px 0;
}

.t3-copyright p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px !important;
  margin: 0;
  text-align: left;
}

.text-right p {
  text-align: right !important;
}

.t3-copyright .text-right {
  text-align: right;
}

/* ==========================================================================
   19. FOOTER GRID FIX - Proper Column Alignment
   ========================================================================== */

/* Footer main container */
#t3-footer .t3-footer-inner,
.t3-footer .container,
#t3-footer .container {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

/* Footer row */
#t3-footer .row,
.t3-footer .row {
  display: flex !important;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
}

/* Footer columns - ensure proper spacing */
#t3-footer [class*="col-"],
.t3-footer [class*="col-"] {
  padding: 0 15px;
  margin-bottom: 30px;
}

/* Footer module containers */
#t3-footer .module,
.t3-footer .module {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Footer module titles */
#t3-footer .module-title,
.t3-footer .module-title,
#t3-footer h3.module-title,
.t3-footer h3.module-title {
  color: var(--white) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--brand-primary) !important;
  display: inline-block !important;
}

/* Footer menu lists - Joomla menu classes */
#t3-footer ul.menu,
#t3-footer ul.nav,
#t3-footer .menu,
.t3-footer ul.menu,
.t3-footer ul.nav,
.t3-footer .menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#t3-footer ul.menu li,
#t3-footer ul.nav li,
.t3-footer ul.menu li,
.t3-footer ul.nav li {
  margin-bottom: 10px !important;
  list-style: none !important;
  padding-left: 0 !important;
}

#t3-footer ul.menu li::before,
.t3-footer ul.menu li::before {
  content: "•" !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-right: 8px !important;
  display: inline-block !important;
}

#t3-footer ul.menu li a,
#t3-footer ul.nav li a,
.t3-footer ul.menu li a,
.t3-footer ul.nav li a {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

#t3-footer ul.menu li a:hover,
.t3-footer ul.menu li a:hover {
  color: var(--white) !important;
  padding-left: 5px !important;
}

/* Footer custom HTML content */
#t3-footer .custom,
.t3-footer .custom {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.7;
}

/* Footer contact info */
#t3-footer .custom a,
.t3-footer .custom a {
  color: rgba(255, 255, 255, 0.8);
}

#t3-footer .custom a:hover,
.t3-footer .custom a:hover {
  color: var(--white);
}

/* Footer social icons in footer */
#t3-footer .footer-social a,
.t3-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-radius: 50%;
  font-size: 16px;
  margin-right: 8px;
  transition: all 0.3s ease;
}

#t3-footer .footer-social a:hover,
.t3-footer .footer-social a:hover {
  background: var(--brand-primary);
  transform: translateY(-2px);
}

/* Footer Responsive */
@media (max-width: 991px) {

  #t3-footer .row,
  .t3-footer .row {
    flex-direction: row;
  }

  #t3-footer [class*="col-"],
  .t3-footer [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 767px) {
  .footer-links {
    padding: 30px 0 15px;
  }

  #t3-footer [class*="col-"],
  .t3-footer [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  .footer-col h4,
  #t3-footer .module-title,
  .t3-footer .module-title {
    margin-bottom: 15px;
  }

  .t3-copyright .col-md-6 {
    text-align: center !important;
    margin-bottom: 10px;
  }

  .footer-social,
  #t3-footer .footer-social {
    justify-content: center;
    margin-bottom: 20px;
  }

  #t3-footer ul.menu,
  .t3-footer ul.menu {
    text-align: center;
  }
}

/* ---------------------------------------------------------
 * KUN.UZ STYLE HEADER - WHITE THEME
 * --------------------------------------------------------- */
.header-kunuz,
.header-kunuz.navbar-default,
.header-kunuz.t3-mainnav,
#t3-mainnav.header-kunuz,
#t3-header.header-kunuz {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e1e1e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Force dark logo */
.header-kunuz .logo a,
.header-kunuz .logo-text a,
#t3-mainnav.header-kunuz .logo a,
#t3-mainnav.header-kunuz .logo-text a {
  color: #1a1a2e !important;
}

/* ---------------------------------------------------------
 * KUN.UZ STYLE ARTICLE LAYOUT - LIST VIEW
 * --------------------------------------------------------- */

/* wrapper modification if needed */
.row-articles {
  display: flex;
  flex-wrap: wrap;
}

/* Standard Article Item - List View */
.magazine-item {
  width: 100% !important;
  /* Force full width, override col-sm-6 */
  flex: 0 0 100%;
  max-width: 100%;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}

/* Flex container for the inner row of the article */
.magazine-item .row {
  display: flex;
  flex-direction: row;
  /* Default: Image Left, Content Right... wait, we want Image Right? */
  align-items: flex-start;
}

/* Kun.uz Style: Text LEFT, Image RIGHT for standard list */
/* We need to swap order or use flex-direction logic */

/* Target the Content Column (usually col-md-8) */
.magazine-item .col-md-8 {
  order: 1;
  /* First */
  width: 65% !important;
  /* Adjust width */
  padding-right: 20px;
}

/* Target the Media Column (usually col-md-4) */
.magazine-item .magazine-item-media {
  order: 2;
  /* Second */
  width: 35% !important;
  /* Adjust width */
}

/* Make images fill their container */
.magazine-item-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}


/* ---------------------------------------------------------
 * FEATURED / HERO ARTICLE (First in List)
 * --------------------------------------------------------- */
.row-articles .magazine-item:first-child {
  border-bottom: 4px solid #eee;
  margin-bottom: 25px;
}

.row-articles .magazine-item:first-child .row {
  flex-direction: column-reverse;
  /* Image Top, Text Bottom? Or Image Right, Text Left Large? */
  /* Kun.uz Hero often has Image Top or Large Image Right. Let's try Large Image Right logic or simple block */
  display: block;
  /* Let it be standard block for Hero */
}

.row-articles .magazine-item:first-child .col-md-8,
.row-articles .magazine-item:first-child .magazine-item-media {
  width: 100% !important;
  order: initial;
  padding: 0 15px;
}

.row-articles .magazine-item:first-child .magazine-item-media {
  margin-bottom: 15px;
}

/* Hero Typography */
.row-articles .magazine-item:first-child h2 {
  font-size: 26px !important;
  font-weight: 800;
}

.row-articles .magazine-item:first-child .article-intro {
  font-size: 16px !important;
}

/* ---------------------------------------------------------
 * SIDEBAR — LATEST NEWS (Kun.uz style)
 * --------------------------------------------------------- */
.t3-sidebar .module {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 30px;
}

.t3-sidebar .module-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 18px;
  border-bottom: 3px solid #e74c3c;
  padding-bottom: 10px;
  margin-bottom: 0;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Latest news list items */
.t3-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.t3-sidebar ul li {
  border-bottom: 1px solid #f0f0f0;
  padding: 12px 0;
}

.t3-sidebar ul li:last-child {
  border-bottom: none;
}

.t3-sidebar ul li a {
  color: #222;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  display: block;
  transition: color 0.15s ease;
}

.t3-sidebar ul li a:hover {
  color: #e74c3c;
  text-decoration: none;
}

/* Sticky sidebar on scroll */
.t3-sidebar-right {
  position: sticky;
  top: 80px;
  align-self: flex-start;
}

/* ---------------------------------------------------------
 * NAVBAR LINKS — Kun.uz style
 * --------------------------------------------------------- */
.header-kunuz .navbar-nav>li>a,
html body .t3-wrapper .header-kunuz .navbar-nav>li>a {
  color: #333 !important;
  font-weight: 700;
  font-size: 15px;
  text-shadow: none !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.header-kunuz .navbar-nav>.active>a,
.header-kunuz .navbar-nav>.open>a {
  color: #e74c3c !important;
  background: transparent !important;
  box-shadow: none !important;
}

.header-kunuz .navbar-nav>li>a:hover,
.header-kunuz .navbar-nav>li>a:focus {
  color: #e74c3c !important;
  background: transparent !important;
  text-decoration: none;
}

/* Logo */
.header-kunuz .logo a,
.header-kunuz .logo-text a {
  color: #1a1a2e !important;
}

/* Mainbody row flex for sticky sidebar */
#t3-mainbody>.row {
  display: flex;
  flex-wrap: wrap;
}

/* Latest News Sidebar Styling */
.t3-sidebar .module-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: #000;
  margin-bottom: 20px;
  text-transform: none;
  border: none;
  padding: 0;
}

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

.mod-articleslatest li {
  padding: 12px 0;
  border-top: 1px solid #efefef;
  margin: 0;
}

.mod-articleslatest li:first-child {
  border-top: none;
  padding-top: 0;
}

.mod-articleslatest-title {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: #222 !important;
  margin-bottom: 6px;
  transition: color 0.2s ease;
}

.mod-articleslatest-title:hover {
  color: #e74c3c !important;
}

.mod-articleslatest-meta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #999;
  font-weight: 500;
}

.mod-articleslatest-category {
  color: #999;
}

.mod-articleslatest-divider {
  margin: 0 4px;
  font-size: 11px;
}

.mod-articleslatest-date {
  color: #999;
}

/* Kun.uz Homepage Layout */
.magazine-kunuz {
  margin-top: 20px;
}

.kunuz-hero-wrapper {
  margin-bottom: 30px;
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #efefef;
}

.kunuz-hero {
  position: relative;
  display: flex;
  justify-content: flex-end;
  /* Push image to the right */
  text-decoration: none !important;
  color: inherit !important;
  background: #ffffff;
}

.kunuz-hero-content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 48%;
  /* Adjust to cover left side */
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  z-index: 2;
  overflow: hidden;
}

.kunuz-hero-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 10px;
  color: #1a1a2e;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kunuz-hero-intro {
  font-size: 13px;
  line-height: 1.55;
  color: #444;
  margin: 0;
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hero Carousel Styling */
.kunuz-hero-wrapper.carousel {
  position: relative;
}

.kunuz-hero-wrapper .carousel-inner {
  border-radius: 8px;
  overflow: hidden;
}

.kunuz-hero-wrapper .carousel-control {
  background-image: none !important;
  width: 5%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kunuz-hero-wrapper:hover .carousel-control {
  opacity: 0.7;
}

.kunuz-hero-wrapper .carousel-control:hover {
  opacity: 1;
}

.kunuz-hero-wrapper .carousel-indicators {
  bottom: 10px;
  margin-bottom: 0;
  left: 20%;
  /* Align indicators slightly under content, not over image */
  width: 60%;
}

.kunuz-hero-wrapper .carousel-indicators li {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background-color: rgba(200, 200, 200, 0.5);
  width: 10px;
  height: 10px;
  margin: 1px 3px;
}

.kunuz-hero-wrapper .carousel-indicators .active {
  background-color: #e74c3c;
  border-color: #e74c3c;
  width: 12px;
  height: 12px;
  margin: 0 3px;
}

.kunuz-hero-image {
  flex: 0 0 52%;
  max-width: 52%;
  display: block;
  background: #ffffff;
  /* Remove grey gap color */
}

.kunuz-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

.kunuz-list {
  display: flex;
  flex-direction: column;
}

.kunuz-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid #efefef;
  text-decoration: none !important;
  color: inherit !important;
  transition: background 0.2s ease;
}

.kunuz-item:hover .kunuz-item-title {
  color: #e74c3c;
}

.kunuz-item-content {
  flex: 1;
  padding-right: 20px;
}

.kunuz-item-category {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  color: #999;
  font-weight: 700;
  margin-bottom: 5px;
}

.kunuz-item-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: #222;
  margin: 0;
}

.kunuz-item-image {
  flex: 0 0 160px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
}

.kunuz-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .kunuz-hero {
    flex-direction: column-reverse;
  }

  .kunuz-hero-content,
  .kunuz-hero-image {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .kunuz-hero-image {
    height: 250px;
  }

  .kunuz-item-image {
    flex: 0 0 100px;
    height: 70px;
  }

  .kunuz-item-title {
    font-size: 16px;
  }
}

/* ==========================================================================
   Magazine list card — title & intro font size tuning
   ========================================================================== */

/* Card title (h2 inside .page-header) */
.magazine-item .page-header h2 {
  font-size: 18px !important;
  line-height: 1.3;
}

/* Card intro text */
.magazine-item-ct p {
  font-size: 13px !important;
  line-height: 1.55;
  color: #555;
  margin: 0;
}

/* Latest News section title */
.kunuz-list-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #111;
  margin: 0 0 4px 0;
  padding-bottom: 10px;
  border-bottom: 3px solid #e74c3c;
}


/* Marker to verify custom.css is loaded */
body::after {
  content: "CUSTOM_CSS_V2_LOADED";
  display: none !important;
}

/* --- Site Width Adjustment (Kun.uz Style) --- */
@media (min-width: 1370px) {

  /* Increase the main container width to 1320px */
  .container {
    width: 1320px !important;
    max-width: none !important;
  }

  /* Adjust column widths to keep sidebar fixed at ~390px */
  /* Sidebar Ratio: 390 / 1320 = 29.5% */
  /* Content Ratio: 930 / 1320 = 70.5% */
  .t3-content.col-md-8 {
    width: 70.5% !important;
  }

  .t3-sidebar-2.col-md-4 {
    width: 29.5% !important;
  }

  /* Internal Pages Sidebar Proportions */
  .t3-content.col-md-9 {
    width: 70.5% !important;
  }

  .t3-sidebar-right.col-md-3 {
    width: 29.5% !important;
  }
}

/* --- Internal Pages Latest News block fix --- */
/* Internal pages use standard module styling (.module) which forces white bg and duplicate titles.
   The main page uses raw rendering (no .module wrapper).
   We target the custom module class suffix to fix ONLY internal pages. */
.module.latest-news-sidebar {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.module.latest-news-sidebar .module-title {
  display: none !important;
}

/* --- Layout Override Fixes --- */
@media (min-width: 768px) {
  .col-sm-8 {
    width: 59.66666667% !important;
  }
}

@media (min-width: 992px) {
  .col-md-8 {
    width: 59.66666667% !important;
  }
}

/* Share Buttons */
.article-share-buttons {
  margin: 30px 0;
  padding: 20px 0;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  gap: 15px;
}

.article-share-buttons .share-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 10px;
}

.article-share-buttons .share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.article-share-buttons .share-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  color: #fff;
  text-decoration: none;
}

.article-share-buttons .share-facebook {
  background-color: #1877f2;
}

.article-share-buttons .share-x {
  background-color: #000000;
}

.article-share-buttons .share-vk {
  background-color: #4c75a3;
}

.article-share-buttons .share-ok {
  background-color: #f2720c;
}