:root{
	--bg: #F9F9F9; /* Paper White */
	--surface: #FFFFFF; /* Card */
	--text: #2D3748; /* Charcoal */
	--heading: #1A202C; /* Deep Slate */
	--meta: #718096; /* Stone Grey */
	--accent: #008080; /* Deep Teal */
	--border: #E2E8F0; /* Lines */
	--radius-12: 12px;
	--shadow-card: 0px 4px 20px rgba(0,0,0,0.06);

	--space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px;

	--container: 1600px;
}

html{ box-sizing:border-box; min-height:100vh; }
*,*::before,*::after{ box-sizing:inherit; }
body{
	margin:0; 
	background:var(--bg); 
	color:var(--text);
	font-family: 'Lora', serif; 
	font-size:18px; 
	line-height:1.7;
	-webkit-font-smoothing: antialiased; 
	-moz-osx-font-smoothing: grayscale;
	min-height:100vh; 
	width:100%;
	overflow-x: hidden;
}
img{ max-width:100%; height:auto; border:0; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Main content wrapper - ensure it doesn't affect header/footer */
.site-content {
	display: block;
	width: 100%;
	touch-action: auto; /* Enable normal zoom for content area */
}

/* MOBILE: Allow FULL zoom capabilities for content, but NOT header/footer */
@media(max-width: 767px) {
	/* Enable zoom and all interactions on main content */
	.site-content,
	.site-content *,
	.entry-content,
	.entry-content *,
	.post-card,
	.post-card *,
	.archive-container,
	.archive-container *,
	.typography,
	.typography *,
	article,
	article *,
	.single-post,
	.single-post *,
	main,
	main * {
		touch-action: auto !important; /* Enable normal touch and zoom for main content */
		user-select: text !important; /* Allow text selection in content */
	}
}

.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 var(--space-48); }
@media(min-width: 1400px){ .container{ padding: 0 var(--space-64); } }
@media(min-width: 1600px){ .container{ padding: 0 120px; } }

/* ============================================
   🎯 UNIFIED FULL WIDTH SOLUTION
   Applied: 16/10/2025
   Ensures consistent header/footer across ALL pages
   
   ⚠️ CRITICAL PROTECTION ZONE ⚠️
   DO NOT MODIFY THIS SECTION!
   These rules ensure header/footer are ALWAYS full width
   regardless of any design changes to content areas.
   ============================================ */

/* CRITICAL: Force header/footer to ALWAYS be full width */
/* Target ALL body classes to override WordPress defaults */
body .site-header,
body.single .site-header,
body.single-post .site-header,
body.page .site-header,
body.wp-singular .site-header,
body.archive .site-header,
body.home .site-header,
.site-header,
body .site-footer,
body.single .site-footer,
body.single-post .site-footer,
body.page .site-footer,
body.wp-singular .site-footer,
body.archive .site-footer,
body.home .site-footer,
.site-footer {
    width: 100% !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* Inner content containers - keep content centered */
.header-inner,
.footer-widgets {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Prevent body/html constraints */
body, html {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

/* ============================================
   ✅ END OF PROTECTION ZONE
   ============================================ */

/* Typography */
h1,h2,h3,h4,h5,h6{ font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--heading); margin:0 0 var(--space-16); letter-spacing:-0.02em; }
h1{ font-size:48px; font-weight:700; }
h2{ font-size:36px; font-weight:700; }
h3{ font-size:28px; font-weight:600; }
h4{ font-size:22px; font-weight:600; }
p{ margin:0 0 var(--space-16); }
.meta{ font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size:15px; color:var(--meta); }

/* Header - FIXED: Always full width, never affected by page containers */
.site-header{ 
	position:sticky; 
	top:0; 
	z-index:1000; 
	background:var(--bg); 
	border-bottom:1px solid var(--border); 
	transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); 
	backdrop-filter: blur(8px);
	width: 100%;
	left: 0;
	right: 0;
}
.header-inner{ 
	display:flex; 
	justify-content:space-between; 
	align-items:center; 
	height:80px; 
	transition: height .3s ease; 
	padding: 0 var(--space-48); 
	max-width: var(--container); 
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}
@media(min-width: 1400px){ .header-inner{ padding: 0 var(--space-64); } }
@media(min-width: 1600px){ .header-inner{ padding: 0 120px; } }
.site-branding{ flex-shrink: 0; }
.primary-nav{ flex: 1; display: flex; justify-content: center; }
.header-actions{ flex-shrink: 0; display:flex; gap:var(--space-16); align-items:center; }
.site-header.shrink .header-inner{ height:64px; }
.site-header.shrink{ box-shadow: 0 2px 16px rgba(0,0,0,0.06); }

/* Logo with subtle animation & responsive sizing */
.site-logo{ 
	font-family:'Inter', sans-serif; 
	font-weight:700; 
	color:var(--heading); 
	font-size:20px; 
	transition: transform .3s ease, color .3s ease;
	display:inline-block;
	line-height: 1;
}
.site-logo:hover{ transform: translateY(-2px); color:var(--accent); text-decoration:none; }

/* Logo images - responsive with device-specific heights */
.logo-wrap {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}
.logo-img {
	display: block;
	object-fit: contain; /* Maintain aspect ratio */
	width: auto;
	height: auto;
	transition: opacity 0.3s ease;
}

/* Desktop - Use custom desktop height */
@media(min-width: 1025px) {
	.logo-img {
		max-height: var(--logo-height-desktop, 60px);
	}
}

/* Tablet - Use custom tablet height */
@media(min-width: 768px) and (max-width: 1024px) {
	.logo-img {
		max-height: var(--logo-height-tablet, 55px);
	}
}

/* Mobile - Use custom mobile height - Made BIGGER for better visibility */
@media(max-width: 767px) {
	.logo-img {
		max-height: var(--logo-height-mobile, 65px);
		min-height: 50px; /* Ensure good minimum size on mobile */
	}
}

/* Primary Nav with hover effects */
.primary-nav .menu{ list-style:none; margin:0; padding:0; display:flex; gap:var(--space-24); }
.primary-nav .menu li{ position:relative; }
.primary-nav .menu a{ 
	font-family:'Inter', sans-serif; 
	font-size:16px; 
	color:var(--meta); 
	position:relative;
	display:inline-block;
	padding:4px 0;
	transition: color .3s ease;
}
.primary-nav .menu a::after{
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	width:0;
	height:2px;
	background:var(--accent);
	transition: width .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.primary-nav .menu a:hover{ color:var(--accent); text-decoration:none; }
.primary-nav .menu a:hover::after{ width:100%; }

/* Animated hamburger */
.hamburger{ display:flex; flex-direction:column; gap:5px; width:24px; height:24px; justify-content:center; position:relative; }
.hamburger .line{ 
	width:100%; 
	height:2px; 
	background:currentColor; 
	border-radius:2px;
	transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin:center;
}
.menu-toggle.active .hamburger .line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.active .hamburger .line:nth-child(2){ opacity:0; transform: scaleX(0); }
.menu-toggle.active .hamburger .line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Icon buttons with effects */
.icon-btn{ 
	background:none; 
	border:1px solid transparent; 
	padding:8px; 
	border-radius:8px; 
	cursor:pointer; 
	color:var(--meta); 
	transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
	position:relative;
}
.icon-btn:hover{ 
	border-color:var(--border); 
	background:var(--surface);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.icon-btn:active{ transform: translateY(0); }
.icon{ width:24px; height:24px; display:block; transition: transform .3s ease; }
.theme-toggle:hover .icon{ transform: rotate(20deg); }
.search-toggle:hover .icon{ transform: scale(1.1); }

/* ============================================
   📱 MOBILE HEADER LAYOUT
   Full-width 3-column layout: Menu | Logo | Actions
   ============================================ */
@media(max-width: 767px) {
	/* MOBILE: Prevent zoom on header elements - STRONGER RULES */
	.site-header,
	.site-header *,
	.site-header input,
	.site-header button,
	.site-header a,
	.site-header .logo-img,
	.header-inner,
	.header-inner * {
		touch-action: manipulation !important; /* Disable double-tap zoom on header */
		user-select: none; /* Prevent text selection on header */
	}
	
	/* Allow logo to be clickable but not zoomable */
	.site-logo,
	.logo-wrap {
		pointer-events: auto;
		-webkit-tap-highlight-color: transparent;
	}
	
	.header-inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 8px;
		align-items: center;
		justify-items: center;
		padding: 0 16px;
		height: 70px; /* Increased height for bigger logo */
		width: 100%;
		box-sizing: border-box;
	}
	
	/* Left: Menu Burger */
	.header-left {
		justify-self: start;
		flex-shrink: 0;
	}
	
	/* Center: Logo - Always visible, flexible */
	.site-branding {
		justify-self: center;
		flex-shrink: 1;
		min-width: 0;
		display: flex;
		justify-content: center;
		overflow: hidden; /* Prevent logo from breaking layout */
		padding: 0 4px; /* Small padding for better spacing */
	}
	
	.site-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 100%;
		padding: 4px 0; /* Vertical padding for better touch target */
	}
	
	.logo-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 100%;
		height: 100%;
	}
	
	.logo-img {
		max-width: 100%;
		object-fit: contain;
		height: auto !important; /* Override any inline styles */
	}
	
	/* Right: Actions (Search + Dark Mode) - Always visible */
	.header-actions {
		justify-self: end;
		gap: 8px;
		flex-shrink: 0;
		display: flex !important; /* Force display on mobile */
		align-items: center;
	}
	
	/* Hide desktop navigation on mobile */
	.primary-nav {
		display: none;
	}
	
	/* Reduce icon button padding on mobile */
	.icon-btn {
		padding: 6px;
	}
	
	/* Ensure icons don't disappear */
	.search-toggle,
	.theme-toggle {
		flex-shrink: 0;
	}
}

/* Tablet adjustments */
@media(min-width: 768px) and (max-width: 1024px) {
	.header-inner {
		padding: 0 24px;
	}
}

.adsense-below-header{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding: var(--space-16) 0; }

/* ============================================
   🎨 HERO SECTION - CREATIVE SPLIT DESIGN
   Featured post + Trending sidebar (NO sliders!)
   ============================================ */

.home-hero {
  padding: 0;
  margin: 0;
}

.divider {
  display: none; /* Remove old divider */
}

/* Hero Container - Split layout */
.hero-section {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.hero-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: stretch;
}

/* ============================================
   LEFT SIDE - FEATURED POST
   ============================================ */

.hero-featured {
  position: relative;
  background: var(--surface);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-featured:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

/* Background Image with Overlay */
.featured-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-featured:hover .featured-image {
  transform: scale(1.08);
}

/* Animated Gradient Overlay */
.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.9) 100%
  );
  z-index: 2;
}

/* Content over image */
.featured-content {
  position: relative;
  z-index: 3;
  padding: 48px;
  color: white;
}

/* Featured Badge */
.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #00CED1 0%, var(--accent) 100%);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 20px;
  width: fit-content;
  box-shadow: 0 4px 12px rgba(0, 206, 209, 0.3);
  transition: all 0.3s;
}

.featured-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 206, 209, 0.4);
  text-decoration: none;
}

.featured-badge svg {
  width: 16px;
  height: 16px;
  fill: white;
}

/* Featured Title - Large and Bold */
.featured-title {
  font-family: 'Inter', sans-serif;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 16px;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.featured-title a {
  color: white;
  transition: color 0.3s;
}

.featured-title a:hover {
  color: #00CED1;
  text-decoration: none;
}

/* Featured Excerpt */
.featured-excerpt {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
  max-width: 90%;
}

/* Featured Meta */
.featured-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.meta-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.meta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: white;
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.meta-info .dot {
  color: rgba(255, 255, 255, 0.5);
}

/* Read More Button */
.read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  color: var(--accent);
  padding: 12px 24px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.read-more-btn:hover {
  background: var(--accent);
  color: white;
  transform: translateX(4px);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 128, 128, 0.4);
}

.read-more-btn svg {
  transition: transform 0.3s;
}

.read-more-btn:hover svg {
  transform: translateX(4px);
}

/* ============================================
   RIGHT SIDE - TRENDING POSTS
   ============================================ */

.hero-trending {
  background: var(--surface);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

/* Trending Header */
.trending-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border);
}

.trending-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  stroke-width: 2.5;
}

.trending-title {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--heading);
  margin: 0;
}

/* Trending List */
.trending-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Trending Item */
.trending-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform 0.2s;
}

.trending-item:hover {
  transform: translateX(4px);
}

/* Trending Number - Large accent number */
.trending-number {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--border);
  line-height: 1;
  min-width: 50px;
  text-align: center;
  transition: color 0.3s;
}

.trending-item:hover .trending-number {
  color: var(--accent);
}

/* Trending Content */
.trending-content {
  display: flex;
  gap: 12px;
  flex: 1;
  align-items: flex-start;
}

.trending-thumb {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  position: relative;
}

.trending-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.trending-item:hover .trending-thumb img {
  transform: scale(1.1);
}

.trending-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trending-category {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
}

.trending-post-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  color: var(--heading);
}

.trending-post-title a {
  color: var(--heading);
  transition: color 0.2s;
}

.trending-post-title a:hover {
  color: var(--accent);
  text-decoration: none;
}

.trending-date {
  font-size: 12px;
  color: var(--meta);
}

/* ============================================
   📱 RESPONSIVE - TABLET (768px - 1023px)
   ============================================ */
@media (max-width: 1023px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .hero-featured {
    min-height: 500px;
  }
  
  .featured-content {
    padding: 36px;
  }
  
  .featured-title {
    font-size: 36px;
  }
  
  .featured-excerpt {
    font-size: 16px;
    max-width: 100%;
  }
  
  .trending-list {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 20px;
  }
}

/* ============================================
   📱 RESPONSIVE - MOBILE (≤767px)
   ============================================ */
@media (max-width: 767px) {
  .hero-section {
    padding: 32px 0;
  }
  
  .hero-container {
    padding: 0 16px;
    gap: 24px;
  }
  
  .hero-featured {
    min-height: 450px;
    border-radius: 16px;
  }
  
  .featured-content {
    padding: 24px;
  }
  
  .featured-badge {
    font-size: 10px;
    padding: 6px 12px;
  }
  
  .featured-title {
    font-size: 28px;
    margin-bottom: 12px;
  }
  
  .featured-excerpt {
    font-size: 15px;
    margin-bottom: 24px;
  }
  
  .featured-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .author-avatar {
    width: 40px;
    height: 40px;
  }
  
  .read-more-btn {
    width: 100%;
    justify-content: center;
  }
  
  .hero-trending {
    padding: 24px;
    border-radius: 16px;
  }
  
  .trending-title {
    font-size: 20px;
  }
  
  .trending-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .trending-number {
    font-size: 28px;
    min-width: 40px;
  }
  
  .trending-thumb {
    width: 64px;
    height: 64px;
  }
  
  .trending-post-title {
    font-size: 14px;
  }
}

/* ============================================
   📱 RESPONSIVE - SMALL PHONES (≤480px)
   ============================================ */
@media (max-width: 480px) {
  .hero-featured {
    min-height: 400px;
  }
  
  .featured-content {
    padding: 20px;
  }
  
  .featured-title {
    font-size: 24px;
  }
  
  .featured-excerpt {
    font-size: 14px;
  }
  
  .trending-number {
    font-size: 24px;
    min-width: 35px;
  }
  
  .trending-thumb {
    width: 56px;
    height: 56px;
  }
}

/* ============================================
   🌙 DARK MODE - HERO SECTION
   ============================================ */
body.dark .hero-section {
  background: linear-gradient(135deg, #0F1216 0%, #1A1F2E 100%);
}

body.dark .hero-featured {
  background: var(--surface);
}

body.dark .gradient-overlay {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.6) 70%,
    rgba(0, 0, 0, 0.95) 100%
  );
}

body.dark .hero-trending {
  background: var(--surface);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark .trending-number {
  color: rgba(255, 255, 255, 0.2);
}

body.dark .trending-item:hover .trending-number {
  color: var(--accent);
}

/* OLD SLIDER STYLES - DEPRECATED */
/* .latest-slider styles removed - using new hero-section instead */

/* Search overlay */
.search-overlay[hidden]{ display:none; }
.search-overlay{ 
	position:fixed; 
	inset:0; 
	background:rgba(26,32,44,0); 
	backdrop-filter: blur(0px); 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	padding: var(--space-32); 
	z-index:3000;
	animation: overlayFadeIn .3s ease forwards;
}
@keyframes overlayFadeIn{
	to{ background:rgba(26,32,44,.8); backdrop-filter: blur(4px); }
}
.search-overlay .search-form{ 
	background:var(--surface); 
	border-radius:var(--radius-12); 
	padding: var(--space-32); 
	width:100%; 
	max-width:720px; 
	box-shadow: 0 20px 60px rgba(0,0,0,0.3); 
	display:flex; 
	gap:var(--space-16);
	transform: scale(0.9) translateY(-20px);
	opacity:0;
	animation: searchPopIn .4s cubic-bezier(0.4, 0, 0.2, 1) .1s forwards;
}
@keyframes searchPopIn{
	to{ transform: scale(1) translateY(0); opacity:1; }
}
.search-overlay .search-field{ 
	flex:1; 
	padding: var(--space-16); 
	border:2px solid var(--border); 
	border-radius:8px; 
	font-size:16px; 
	transition: border-color .3s ease, box-shadow .3s ease;
}
.search-overlay .search-field:focus{ 
	outline:none; 
	border-color:var(--accent); 
	box-shadow: 0 0 0 3px rgba(0,128,128,0.1);
}
.overlay-close{ 
	position:absolute; 
	top:var(--space-24); 
	right:var(--space-24); 
	background:rgba(255,255,255,0.1); 
	border:2px solid rgba(255,255,255,0.2); 
	width:48px;
	height:48px;
	border-radius:50%;
	font-size:24px; 
	color:#fff; 
	cursor:pointer; 
	transition: all .3s ease;
	display:flex;
	align-items:center;
	justify-content:center;
}
.overlay-close:hover{ 
	background:rgba(255,255,255,0.2); 
	transform: rotate(90deg) scale(1.1);
}

/* Mobile drawer */
.mobile-drawer[hidden]{ display:none; }
.mobile-drawer{ 
	position:fixed; 
	inset:0; 
	background:rgba(26,32,44,0); 
	backdrop-filter: blur(0px); 
	z-index:2000;
	animation: overlayFadeIn .3s ease forwards;
}
.mobile-drawer .drawer-content{ 
	position:absolute; 
	top:0; 
	right:0; 
	height:100%; 
	width:85%; 
	max-width:380px; 
	background:var(--surface); 
	box-shadow: -8px 0 40px rgba(0,0,0,0.15); 
	display:flex; 
	flex-direction:column; 
	overflow-y:auto;
}
.mobile-drawer .overlay-close{ 
	position:absolute; 
	top:var(--space-16); 
	right:var(--space-16); 
	background:var(--bg); 
	border:1px solid var(--border); 
	width:40px;
	height:40px;
	border-radius:50%;
	font-size:20px; 
	color:var(--heading); 
	cursor:pointer; 
	z-index:10; 
	transition: all .3s ease;
	display:flex;
	align-items:center;
	justify-content:center;
}
.mobile-drawer .overlay-close:hover{ 
	background:var(--accent); 
	color:#fff;
	border-color:var(--accent);
	transform: rotate(90deg);
}
.mobile-drawer .drawer-search{ 
	padding: var(--space-64) var(--space-24) var(--space-24); 
	border-bottom:1px solid var(--border);
	opacity:0;
	transform: translateY(-20px);
	animation: slideDown .4s ease .2s forwards;
}
@keyframes slideDown{
	to{ opacity:1; transform: translateY(0); }
}
.mobile-drawer .drawer-search .search-form{ display:flex; flex-direction:column; gap:var(--space-16); }
.mobile-drawer .drawer-search .search-field{ 
	width:100%; 
	padding:var(--space-16); 
	border:2px solid var(--border); 
	border-radius:8px; 
	font-size:16px; 
	background:var(--bg); 
	color:var(--text);
	transition: border-color .3s ease, box-shadow .3s ease;
}
.mobile-drawer .drawer-search .search-field:focus{ 
	outline:none; 
	border-color:var(--accent); 
	box-shadow: 0 0 0 3px rgba(0,128,128,0.1);
}
.mobile-drawer .mobile-menu{ 
	list-style:none; 
	margin:0; 
	padding: var(--space-24); 
	flex:1; 
}
.mobile-drawer .mobile-menu li{ 
	margin-bottom: 0;
	padding-bottom: var(--space-24);
	border-bottom: 1px solid var(--border);
	opacity:0;
	transform: translateX(20px);
}
.mobile-drawer .mobile-menu li:last-child{ 
	border-bottom: none; 
	padding-bottom: 0;
}
.mobile-drawer .mobile-menu li:nth-child(1){ animation: slideInItem .4s ease .3s forwards; }
.mobile-drawer .mobile-menu li:nth-child(2){ animation: slideInItem .4s ease .35s forwards; }
.mobile-drawer .mobile-menu li:nth-child(3){ animation: slideInItem .4s ease .4s forwards; }
.mobile-drawer .mobile-menu li:nth-child(4){ animation: slideInItem .4s ease .45s forwards; }
.mobile-drawer .mobile-menu li:nth-child(5){ animation: slideInItem .4s ease .5s forwards; }
.mobile-drawer .mobile-menu li:nth-child(n+6){ animation: slideInItem .4s ease .55s forwards; }
@keyframes slideInItem{
	to{ opacity:1; transform: translateX(0); }
}
.mobile-drawer .mobile-menu a{ 
	font-family:'Inter', sans-serif; 
	font-size:18px; 
	color:var(--heading); 
	font-weight:500; 
	display:block;
	padding:12px 0;
	transition: all .3s ease;
	position:relative;
}
.mobile-drawer .mobile-menu a::before{
	content:'';
	position:absolute;
	left:-var(--space-24);
	top:50%;
	transform: translateY(-50%);
	width:3px;
	height:0;
	background:var(--accent);
	transition: height .3s ease;
}
.mobile-drawer .mobile-menu a:hover{ 
	color:var(--accent); 
	text-decoration:none; 
	padding-left:8px;
}
.mobile-drawer .mobile-menu a:hover::before{ height:100%; }
.mobile-drawer .drawer-social-section{
	border-top:1px solid var(--border);
	padding: var(--space-24);
	opacity:0;
	transform: translateY(20px);
	animation: slideUp .4s ease .6s forwards;
}
.mobile-drawer .social-title{
	font-family:'Inter', sans-serif;
	font-size:14px;
	font-weight:600;
	color:var(--meta);
	text-transform:uppercase;
	letter-spacing:1px;
	text-align:center;
	margin:0 0 var(--space-16);
}
.mobile-drawer .drawer-social{ 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	gap:var(--space-16); 
}
@keyframes slideUp{
	to{ opacity:1; transform: translateY(0); }
}
.mobile-drawer .drawer-social .social{ 
	color:var(--meta); 
	display:inline-flex; 
	align-items:center; 
	justify-content:center; 
	width:48px; 
	height:48px; 
	border:2px solid var(--border); 
	border-radius:50%;
	transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-drawer .drawer-social .social:hover{ 
	color:#fff; 
	border-color:var(--accent); 
	background:var(--accent);
	text-decoration:none; 
	transform: translateY(-4px) scale(1.05);
	box-shadow: 0 8px 20px rgba(0,128,128,0.3);
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding: 8px 16px; border-radius:8px; border:1px solid var(--border); color:var(--heading); background:var(--surface); cursor:pointer; }
.btn-accent{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-accent:hover{ filter: brightness(0.95); }

/* ============================================
   🏠 HOME PAGE - MODERN BLOG GRID DESIGN
   World-class responsive layout (PC/Tablet/Mobile)
   ============================================ */

/* Archive Container - Full width background */
.archive-container {
  background: var(--bg);
  padding: 80px 0;
  min-height: 60vh;
}

/* Post Grid - 3 columns on desktop, responsive */
.post-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Post Card - Modern elevated design */
.post-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.post-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Thumbnail - 16:9 aspect ratio */
.post-card .thumb {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  overflow: hidden;
  background: var(--border);
  display: block;
}

.post-card .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-card:hover .thumb img {
  transform: scale(1.05);
}

/* Card Content - Proper spacing */
.card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Category Pill - Modern badge */
.category-pill {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent) 0%, #006666 100%);
  color: white;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  width: fit-content;
  transition: transform 0.2s;
}

.category-pill:hover {
  transform: scale(1.05);
  text-decoration: none;
}

/* Card Title - Clean typography */
.card-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
  color: var(--heading);
}

.card-title a {
  color: var(--heading);
  transition: color 0.2s;
}

.card-title a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* Excerpt - Limited lines */
.excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Meta Bar - Author info */
.meta-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--meta);
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.meta-bar .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  flex-shrink: 0;
}

.meta-bar .author-name {
  font-weight: 600;
  color: var(--heading);
}

.meta-bar .dot {
  color: var(--border);
  margin: 0 2px;
}

.meta-bar .date {
  color: var(--meta);
}

/* Pagination - Modern centered style */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 64px;
  padding: 0 24px;
}

.pagination .nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--heading);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}

.pagination .page-numbers:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  text-decoration: none;
}

.pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.pagination .dots {
  color: var(--meta);
  padding: 0 8px;
}

/* ============================================
   📱 RESPONSIVE - TABLET (768px - 1023px)
   ============================================ */
@media (max-width: 1023px) {
  .post-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 0 20px;
  }
  
  .archive-container {
    padding: 60px 0;
  }
  
  .card-title {
    font-size: 18px;
  }
  
  .excerpt {
    font-size: 14px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* ============================================
   📱 RESPONSIVE - MOBILE (≤767px)
   ============================================ */
@media (max-width: 767px) {
  .archive-container {
    padding: 40px 0;
  }
  
  .post-list {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
  }
  
  .post-card {
    border-radius: 12px;
  }
  
  .post-card .thumb {
    padding-bottom: 60%; /* Shorter on mobile */
  }
  
  .card-content {
    padding: 20px;
  }
  
  .card-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .excerpt {
    font-size: 14px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 12px;
  }
  
  .meta-bar {
    font-size: 12px;
    padding-top: 12px;
  }
  
  .meta-bar .avatar {
    width: 28px;
    height: 28px;
  }
  
  .pagination {
    margin-top: 48px;
    padding: 0 16px;
  }
  
  .pagination .page-numbers {
    min-width: 40px;
    height: 40px;
    font-size: 13px;
  }
}

/* ============================================
   📱 RESPONSIVE - SMALL PHONES (≤480px)
   ============================================ */
@media (max-width: 480px) {
  .post-list {
    gap: 20px;
    padding: 0 12px;
  }
  
  .card-content {
    padding: 16px;
  }
  
  .card-title {
    font-size: 17px;
  }
  
  .category-pill {
    font-size: 10px;
    padding: 5px 12px;
  }
  
  .pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }
}

/* ============================================
   🌙 DARK MODE - HOME PAGE
   ============================================ */
body.dark .archive-container {
  background: var(--bg);
}

body.dark .post-card {
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark .post-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

body.dark .meta-bar {
  border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark .pagination .page-numbers {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}

body.dark .pagination .page-numbers:hover {
  border-color: var(--accent);
  background: rgba(0, 128, 128, 0.1);
}

body.dark .pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
}

/* Old styles commented for reference - DO NOT USE */
/* .post-list{ display:flex; flex-direction:column; gap: var(--space-64); padding: var(--space-32) 0; max-width:100%; margin:0 auto; } */
/* .post-card{ background:var(--surface); border-radius:var(--radius-12); box-shadow: var(--shadow-card); overflow:hidden; } */
/* .post-card .thumb img{ width:100%; height:auto; display:block; } */
/* .card-content{ padding: var(--space-32); } */
/* .category-pill{ display:inline-block; background:var(--accent); color:#fff; padding:8px 16px; border-radius:999px; font-family:'Inter', sans-serif; font-size:12px; margin-bottom: var(--space-16); } */
/* .card-title{ margin-bottom: var(--space-16); } */
/* .meta-bar{ display:flex; align-items:center; gap:8px; margin-top: var(--space-24); } */
/* .meta-bar .avatar{ width:24px; height:24px; border-radius:50%; } */
/* .meta-bar .dot{ color:var(--meta); } */
/* .excerpt{ display:-webkit-box; display:box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } */

/* Cards */

/* Single */
.single-post{ max-width:100%; margin:0 auto; }
.single-header{ text-align:center; margin-bottom: var(--space-24); }
.single-header .meta-bar{ justify-content:center; }
.single-title{ font-size:48px; }
.single-featured img{ border-radius: var(--radius-12); margin: var(--space-24) 0; }
.typography h2{ margin-top: var(--space-32); }
.typography blockquote{ margin: var(--space-24) 0; padding: var(--space-16) var(--space-24); border-left:4px solid var(--border); background:#fff; }

/* Note: Social Share styling is in Content Design Zone (new modern design with all platforms) */

/* Note: Author box styling is in Content Design Zone (new modern design) */

/* Related Posts Section */
.related-posts {
  margin-top: 80px;
  padding-top: 64px;
  border-top: 2px solid var(--border);
}

.related-posts .section-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 48px;
  color: var(--heading);
  position: relative;
}

.related-posts .section-title::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, #00a5a5 100%);
  border-radius: 2px;
}

.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .related-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .related-posts {
    margin-top: 48px;
    padding-top: 48px;
  }
  
  .related-posts .section-title {
    font-size: 26px;
    margin-bottom: 32px;
  }
}

/* ============================================
   🦶 FOOTER - PROFESSIONAL & SEO OPTIMIZED
   ============================================ */

.site-footer {
  background: var(--surface);
  border-top: 2px solid var(--border);
  margin-top: 80px;
  width: 100%;
  touch-action: manipulation !important; /* Disable double-tap zoom on footer */
}

.site-footer *,
.site-footer a,
.site-footer button,
.site-footer input {
  touch-action: manipulation !important; /* Disable zoom on ALL footer elements */
  user-select: none; /* Prevent text selection */
}

/* Footer Main - 4 Column Grid */
.footer-main {
  padding: 64px 0 48px;
  background: var(--surface);
}

.footer-main * {
  touch-action: manipulation !important; /* Disable double-tap zoom on all footer elements */
}

.footer-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

/* Footer Column */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* About Column */
.footer-about {
  grid-column: span 1;
}

/* Footer Logo - Responsive & Dark Mode */
.footer-logo-wrap {
  margin-bottom: 16px;
}

.footer-logo-link {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.footer-logo-link:hover {
  opacity: 0.8;
}

.footer-logo-img {
  max-width: 200px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.footer-logo img {
  max-width: 180px;
  height: auto;
}

.footer-brand {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--heading);
  margin: 0 0 12px 0;
}

.footer-description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

/* Footer Titles */
.footer-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Footer Social Links */
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--meta);
  transition: all 0.3s;
}

.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.social-facebook:hover { background: #1877F2; border-color: #1877F2; color: white; }
.social-twitter:hover { background: #000000; border-color: #000000; color: white; }
.social-instagram:hover { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); border-color: #E1306C; color: white; }
.social-linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: white; }
.social-youtube:hover { background: #FF0000; border-color: #FF0000; color: white; }

/* Footer Navigation */
.footer-nav {
  margin: 0;
}

.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-menu li a {
  font-size: 14px;
  color: var(--text);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-menu li a:hover {
  color: var(--accent);
  transform: translateX(4px);
  text-decoration: none;
}

.footer-menu .count {
  font-size: 12px;
  color: var(--meta);
}

/* Newsletter Column */
.footer-newsletter {
  grid-column: span 1;
}

.newsletter-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--meta);
  margin: 0 0 16px 0;
}

.newsletter-form {
  display: flex;
  gap: 0;
}

.form-group {
  display: flex;
  width: 100%;
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s;
}

.form-group:focus-within {
  border-color: var(--accent);
}

.newsletter-input {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  outline: none;
}

.newsletter-btn {
  padding: 12px 16px;
  background: var(--accent);
  border: none;
  color: white;
  cursor: pointer;
  transition: background 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.newsletter-btn:hover {
  background: #006666;
}

.newsletter-btn svg {
  transition: transform 0.3s;
}

.newsletter-btn:hover svg {
  transform: translateX(3px);
}

/* Trust Badges */
.footer-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--meta);
}

.badge-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

/* Sub Footer - Copyright & Legal */
.sub-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 24px 0;
}

.sub-footer-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.copyright,
.footer-copyright {
  font-size: 14px;
  color: var(--meta);
  margin: 0;
}

.copyright p,
.footer-copyright p {
  margin: 0;
}

.legal-links,
.footer-copyright-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.legal-links a,
.footer-copyright-links a {
  font-size: 13px;
  color: var(--meta);
  transition: color 0.2s;
}

.legal-links a:hover,
.footer-copyright-links a:hover {
  color: var(--accent);
  text-decoration: none;
}

.legal-links .separator,
.footer-copyright-links .separator {
  color: var(--border);
  font-size: 12px;
}

/* Developer Credit Link */
.footer-dev-credit {
  font-size: 13px;
  color: var(--meta);
  opacity: 0.8;
}

.footer-dev-credit a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}

.footer-dev-credit a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  opacity: 1;
}

/* ============================================
   📱 RESPONSIVE - FOOTER
   ============================================ */

/* Tablet */
@media (max-width: 1023px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  
  .footer-about {
    grid-column: span 2;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .footer-main {
    padding: 48px 0 32px;
  }
  
  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 16px;
  }
  
  .footer-about {
    grid-column: span 1;
  }
  
  .footer-social {
    justify-content: flex-start;
  }
  
  .social-link {
    width: 36px;
    height: 36px;
  }
  
  .sub-footer {
    padding: 20px 0;
  }
  
  .sub-footer-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 16px;
    gap: 16px;
  }
  
  .copyright {
    font-size: 13px;
  }
  
  .legal-links {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .legal-links a {
    font-size: 12px;
  }
}

/* Small Phones */
@media (max-width: 480px) {
  .footer-main {
    padding: 40px 0 24px;
  }
  
  .footer-container {
    gap: 28px;
  }
  
  .footer-social {
    gap: 10px;
  }
  
  .social-link {
    width: 34px;
    height: 34px;
  }
}

/* ============================================
   🌙 DARK MODE - FOOTER
   ============================================ */

body.dark .site-footer {
  background: var(--surface);
  border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark .footer-main {
  background: var(--surface);
}

body.dark .social-link {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark .form-group {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

body.dark .form-group:focus-within {
  border-color: var(--accent);
}

body.dark .newsletter-input {
  background: transparent;
  color: var(--text);
}

body.dark .sub-footer {
  background: var(--bg);
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* OLD FOOTER STYLES - DEPRECATED */
/* Keeping for backwards compatibility but overridden */

/* Responsive header */
.menu-toggle{ display:inline-flex; }
.primary-nav{ display:none; }
@media(min-width: 992px){
	.menu-toggle{ display:none; }
	.primary-nav{ display:flex; }
}

/* ============================================
   🔥 NUCLEAR FIX: Force body to NEVER constrain
   ============================================ */
body,
body.single,
body.single-post,
body.page,
body.wp-singular,
body.post-template-default,
html body {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* Responsive content widths for posts/pages (NOT for post-list grid) */
@media (max-width: 767px) {
  .single-post, .comments-area { max-width: 100% !important; padding-left: 0; padding-right: 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .single-post, .comments-area { max-width: 720px !important; }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .single-post, .comments-area { max-width: 960px !important; }
}
@media (min-width: 1400px) {
  .single-post, .comments-area { max-width: 1140px !important; }
}

/* ============================================
   🌙 DARK MODE - COMPLETE STYLING
   ============================================ */
.dark body, body.dark {
	--bg: #0F1216;
	--surface: #1A1F2E;
	--text: #CDD5E0;
	--heading: #E5EAF0;
	--meta: #9AA4B2;
	--border: #273244;
	background: var(--bg);
	color: var(--text);
}

/* Dark mode - Full page background (PC) */
body.dark .single-container,
body.dark .page-container {
  background: var(--bg) !important;
}

body.dark .single-post,
body.dark .page {
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Dark mode - Sections */
body.dark .single-header {
  border-bottom-color: var(--border);
}

body.dark .author-box {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--border);
}

body.dark .social-share {
  border-top-color: var(--border);
  background: transparent;
}

body.dark .share-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}

/* Dark mode - Keep platform colors on hover */
body.dark .share-facebook:hover {
  background: #1877F2;
  border-color: #1877F2;
  color: white;
}

body.dark .share-x:hover {
  background: #000000;
  border-color: #000000;
  color: white;
}

body.dark .share-linkedin:hover {
  background: #0A66C2;
  border-color: #0A66C2;
  color: white;
}

body.dark .share-reddit:hover {
  background: #FF4500;
  border-color: #FF4500;
  color: white;
}

body.dark .share-pinterest:hover {
  background: #E60023;
  border-color: #E60023;
  color: white;
}

body.dark .share-medium:hover {
  background: #000000;
  border-color: #000000;
  color: white;
}

body.dark .share-whatsapp:hover {
  background: #25D366;
  border-color: #25D366;
  color: white;
}

body.dark .share-instagram:hover {
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
  color: white;
}

body.dark .typography blockquote {
  background: rgba(0, 128, 128, 0.1);
  border-left-color: var(--accent);
  color: var(--meta);
}

body.dark .typography code {
  background: rgba(255, 255, 255, 0.1);
  color: #ff6b6b;
}

body.dark .related-posts {
  border-top-color: var(--border);
}

/* Dark mode - Mobile adjustments */
@media (max-width: 767px) {
  body.dark .single-container,
  body.dark .page-container {
    background: var(--bg) !important;
  }
  
  body.dark .single-post,
  body.dark .page {
    background: var(--surface);
  }
  
  body.dark .single-header {
    background: var(--surface);
  }
  
  body.dark .entry-content {
    background: transparent;
  }
  
  body.dark .social-share,
  body.dark .author-box,
  body.dark .related-posts {
    background: rgba(0, 0, 0, 0.3);
  }
}

/* ============================================
   💬 COMMENTS SECTION - PROFESSIONAL DESIGN
   PC & Mobile Optimized
   ============================================ */

/* Comments Container */
.comments-area {
  max-width: 820px;
  margin: 80px auto 0;
  padding: 64px 72px;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.05),
    0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.comments-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
  color: var(--heading);
  position: relative;
  padding-bottom: 16px;
}

.comments-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, #00a5a5 100%);
  border-radius: 2px;
}

/* Comment List */
.comment-list {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  gap: 24px;
}

/* Individual Comment */
.comment-body {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  background: var(--bg);
  transition: all 0.3s ease;
  position: relative;
}

.comment-body:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0, 128, 128, 0.1);
  transform: translateY(-2px);
}

/* Comment Meta */
.comment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.comment-author .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  flex-shrink: 0;
}

.comment-author .fn {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
  font-style: normal;
}

.comment-metadata {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--meta);
}

.comment-metadata a {
  color: var(--meta);
  text-decoration: none;
  transition: color 0.2s;
}

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

/* Comment Content */
.comment-content {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

.comment-content p {
  margin-bottom: 12px;
}

.comment-content p:last-child {
  margin-bottom: 0;
}

/* Reply Link */
.reply {
  margin-top: 12px;
}

.reply a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  padding: 6px 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.reply a:hover {
  background: var(--accent);
  color: white;
  text-decoration: none;
  transform: translateX(4px);
}

/* Nested Comments */
.children {
  list-style: none;
  margin: 24px 0 0 40px;
  padding: 0;
}

.children .comment-body {
  background: var(--surface);
  border-left: 3px solid var(--accent);
}

/* Comment Form */
.comment-respond {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 2px solid var(--border);
}

.comment-reply-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 32px;
  color: var(--heading);
}

.comment-form {
  display: grid;
  gap: 20px;
}

.comment-form p {
  margin-bottom: 0;
}

.comment-form label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 8px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  transition: all 0.3s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.1);
}

.comment-form textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.comment-form .submit {
  padding: 14px 32px;
  border-radius: 12px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: auto;
  justify-self: start;
}

.comment-form .submit:hover {
  background: #00a5a5;
  border-color: #00a5a5;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 128, 128, 0.3);
}

.comment-form .submit:active {
  transform: translateY(0);
}

/* Form Notes */
.comment-notes,
.form-allowed-tags {
  font-size: 13px;
  color: var(--meta);
  line-height: 1.6;
}

/* ============================================
   📱 COMMENTS - MOBILE RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 1023px) {
  .comments-area {
    max-width: 700px;
    padding: 48px 40px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .comments-area {
    max-width: 100%;
    margin: 0;
    padding: 40px 20px;
    border-radius: 0;
    box-shadow: none;
    border-left: none;
    border-right: none;
    background: var(--bg);
  }
  
  .comments-title {
    font-size: 24px;
    margin-bottom: 32px;
  }
  
  .comment-list {
    gap: 20px;
    margin-bottom: 40px;
  }
  
  .comment-body {
    padding: 20px 16px;
    border-radius: 12px;
  }
  
  .comment-author .avatar {
    width: 40px;
    height: 40px;
    border-width: 2px;
  }
  
  .comment-author .fn {
    font-size: 15px;
  }
  
  .comment-metadata {
    font-size: 12px;
  }
  
  .comment-content {
    font-size: 15px;
  }
  
  .children {
    margin-left: 20px;
  }
  
  .comment-respond {
    margin-top: 40px;
    padding-top: 40px;
  }
  
  .comment-reply-title {
    font-size: 22px;
    margin-bottom: 24px;
  }
  
  .comment-form {
    gap: 16px;
  }
  
  .comment-form label {
    font-size: 13px;
  }
  
  .comment-form input[type="text"],
  .comment-form input[type="email"],
  .comment-form input[type="url"],
  .comment-form textarea {
    padding: 12px 16px;
    font-size: 15px;
  }
  
  .comment-form textarea {
    min-height: 120px;
  }
  
  .comment-form .submit {
    padding: 12px 24px;
    font-size: 15px;
    width: 100%;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .comments-area {
    padding: 32px 16px;
  }
  
  .comments-title {
    font-size: 22px;
  }
  
  .comment-body {
    padding: 16px 12px;
  }
  
  .comment-author .avatar {
    width: 36px;
    height: 36px;
  }
  
  .children {
    margin-left: 16px;
  }
}

/* Dark Mode - Comments */
body.dark .comments-area {
  background: var(--surface);
  border-color: var(--border);
}

body.dark .comment-body {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--border);
}

body.dark .comment-body:hover {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.4);
}

body.dark .children .comment-body {
  background: rgba(0, 0, 0, 0.2);
}

body.dark .comment-form input[type="text"],
body.dark .comment-form input[type="email"],
body.dark .comment-form input[type="url"],
body.dark .comment-form textarea {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--border);
  color: var(--text);
}

body.dark .comment-form input:focus,
body.dark .comment-form textarea:focus {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.4);
}

@media (max-width: 767px) {
  body.dark .comments-area {
    background: rgba(0, 0, 0, 0.2);
  }
}
/* ============================================
   🎨 CONTENT DESIGN ZONE - SAFE TO MODIFY
   ============================================
   
   This section controls ONLY the content area design
   (posts, pages, comments, etc.)
   
   ✅ SAFE: Modify anything in this section
   ❌ NEVER touch: header/footer styles above
   
   Changes here will NOT affect header/footer!
   ============================================ */

/* ============================================
   🎯 MODERN SINGLE POST DESIGN
   Optimized for PC & Mobile
   ============================================ */

/* Main Container - Full width background */
.single-container, .page-container {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  padding: 80px 24px;
  position: relative;
  
  /* Keep full width - NEVER constrain! */
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  min-height: 60vh;
}

/* Article Card - Elevated design */
.single-post, .page {
  max-width: 820px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.05),
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.05);
  padding: 64px 72px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease;
}

.single-post:hover, .page:hover {
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.06),
    0 15px 40px rgba(0, 0, 0, 0.1),
    0 25px 70px rgba(0, 0, 0, 0.06);
}

/* Post Header - Hero section */
.single-header {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--border);
}

.single-title {
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 24px;
  color: var(--heading);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Meta info styling */
.single-header .meta-bar {
  justify-content: center;
  gap: 16px;
  font-size: 15px;
}

.single-header .meta-bar .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

/* Featured Image - Full bleed effect */
.single-featured {
  margin: 0 -72px 48px;
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

.single-featured img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.single-post:hover .single-featured img {
  transform: scale(1.02);
}

/* Content Typography - Enhanced readability */
.entry-content {
  font-size: 19px;
  line-height: 1.8;
  color: var(--text);
}

.typography h2 {
  font-size: 36px;
  font-weight: 700;
  margin-top: 56px;
  margin-bottom: 24px;
  color: var(--heading);
  position: relative;
  padding-left: 24px;
}

.typography h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  background: linear-gradient(180deg, var(--accent) 0%, #00a5a5 100%);
  border-radius: 3px;
}

.typography h3 {
  font-size: 28px;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--heading);
}

.typography p {
  margin-bottom: 24px;
}

.typography blockquote {
  margin: 40px 0;
  padding: 32px 40px;
  background: linear-gradient(135deg, rgba(0, 128, 128, 0.05) 0%, rgba(0, 128, 128, 0.02) 100%);
  border-left: 5px solid var(--accent);
  border-radius: 12px;
  font-style: italic;
  font-size: 21px;
  color: var(--meta);
  position: relative;
}

.typography blockquote::before {
  content: '"';
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 72px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.2;
  font-family: Georgia, serif;
}

.typography ul,
.typography ol {
  margin: 24px 0;
  padding-left: 32px;
}

.typography li {
  margin-bottom: 12px;
  line-height: 1.7;
}

.typography a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(0, 128, 128, 0.3);
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.typography a:hover {
  text-decoration-color: var(--accent);
  color: #00a5a5;
}

.typography code {
  background: rgba(0, 0, 0, 0.05);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'Monaco', 'Courier New', monospace;
  color: #e74c3c;
}

.typography pre {
  background: #2d3748;
  color: #e2e8f0;
  padding: 24px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 32px 0;
  line-height: 1.6;
}

.typography pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* Author Box - Professional card */
.author-box {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: linear-gradient(135deg, #f8fafc 0%, #e8f4f5 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  margin-top: 64px;
}

.author-box .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid var(--accent);
  box-shadow: 0 4px 12px rgba(0, 128, 128, 0.2);
}

.author-box .author-details strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 8px;
}

.author-box .author-details .meta {
  margin: 0;
  line-height: 1.6;
}

/* Social Share - Modern buttons with all platforms */
.social-share {
  padding-top: 40px;
  margin-top: 40px;
  border-top: 2px solid var(--border);
}

.social-share .share-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--meta);
  margin-bottom: 20px;
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--meta);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.share-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}

.share-btn:hover {
  transform: translateY(-3px);
  text-decoration: none;
}

/* Facebook */
.share-facebook {
  border-color: #1877F2;
  color: #1877F2;
}

.share-facebook:hover {
  background: #1877F2;
  color: white;
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.3);
}

/* X (Twitter) */
.share-x {
  border-color: #000000;
  color: #000000;
}

.share-x:hover {
  background: #000000;
  color: white;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* LinkedIn */
.share-linkedin {
  border-color: #0A66C2;
  color: #0A66C2;
}

.share-linkedin:hover {
  background: #0A66C2;
  color: white;
  box-shadow: 0 8px 20px rgba(10, 102, 194, 0.3);
}

/* Reddit */
.share-reddit {
  border-color: #FF4500;
  color: #FF4500;
}

.share-reddit:hover {
  background: #FF4500;
  color: white;
  box-shadow: 0 8px 20px rgba(255, 69, 0, 0.3);
}

/* Pinterest */
.share-pinterest {
  border-color: #E60023;
  color: #E60023;
}

.share-pinterest:hover {
  background: #E60023;
  color: white;
  box-shadow: 0 8px 20px rgba(230, 0, 35, 0.3);
}

/* Medium */
.share-medium {
  border-color: #000000;
  color: #000000;
}

.share-medium:hover {
  background: #000000;
  color: white;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* WhatsApp */
.share-whatsapp {
  border-color: #25D366;
  color: #25D366;
}

.share-whatsapp:hover {
  background: #25D366;
  color: white;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

/* Instagram */
.share-instagram {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4) border-box;
  color: #E1306C;
}

.share-instagram:hover {
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
  color: white;
  box-shadow: 0 8px 20px rgba(225, 48, 108, 0.3);
}

/* ============================================
   📱 MOBILE RESPONSIVE DESIGN - OPTIMIZED
   ============================================ */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .single-post, .page {
    max-width: 700px;
    padding: 48px 40px;
  }
  
  .single-title {
    font-size: 40px;
  }
  
  .entry-content {
    font-size: 18px;
  }
  
  .typography h2 {
    font-size: 32px;
  }
  
  .single-featured {
    margin: 0 -40px 40px;
  }
}

/* Mobile (max 767px) - CLEAN & PRO */
@media (max-width: 767px) {
  /* Container - Clean spacing */
  .single-container, .page-container {
    padding: 0;
    background: var(--surface);
    min-height: auto;
  }
  
  /* Article - No rounded corners on mobile for cleaner look */
  .single-post, .page {
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface);
  }
  
  /* Header - Clean padding */
  .single-header {
    padding: 32px 20px 24px;
    margin-bottom: 0;
    background: var(--surface);
  }
  
  .single-title {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 16px;
    text-align: left;
  }
  
  .single-header .meta-bar {
    font-size: 13px;
    gap: 12px;
    justify-content: flex-start;
  }
  
  .single-header .meta-bar .avatar {
    width: 28px;
    height: 28px;
    border-width: 2px;
  }
  
  /* Featured Image - Full width, no margins */
  .single-featured {
    margin: 0;
    border-radius: 0;
  }
  
  .single-featured img {
    border-radius: 0;
  }
  
  /* Content - Proper reading padding */
  .entry-content {
    padding: 32px 20px;
    font-size: 17px;
    line-height: 1.75;
  }
  
  .typography h2 {
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 16px;
    padding-left: 16px;
  }
  
  .typography h2::before {
    width: 4px;
    left: 0;
  }
  
  .typography h3 {
    font-size: 21px;
    margin-top: 32px;
    margin-bottom: 12px;
  }
  
  .typography p {
    margin-bottom: 20px;
  }
  
  .typography blockquote {
    padding: 20px;
    font-size: 17px;
    margin: 28px 0;
    border-radius: 8px;
  }
  
  .typography blockquote::before {
    font-size: 40px;
    top: 8px;
    left: 8px;
  }
  
  .typography ul,
  .typography ol {
    padding-left: 24px;
    margin: 20px 0;
  }
  
  .typography li {
    margin-bottom: 10px;
  }
  
  /* Social Share - Clean mobile layout */
  .social-share {
    padding: 24px 20px;
    margin-top: 0;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  
  .social-share .share-label {
    width: 100%;
    margin-bottom: 16px;
    font-size: 12px;
  }
  
  .share-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .share-btn {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 8px;
    justify-content: center;
  }
  
  .share-btn svg {
    width: 18px;
    height: 18px;
  }
  
  .share-btn span {
    display: inline;
  }
  
  /* Author Box - Clean mobile card */
  .author-box {
    margin: 0;
    padding: 24px 20px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    gap: 16px;
    flex-direction: row;
    align-items: center;
    background: var(--bg);
  }
  
  .author-box .avatar {
    width: 56px;
    height: 56px;
    border-width: 3px;
    flex-shrink: 0;
  }
  
  .author-box .author-details {
    flex: 1;
  }
  
  .author-box .author-details strong {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
  }
  
  .author-box .author-details .meta {
    font-size: 13px;
    line-height: 1.5;
  }
  
  /* Related Posts - Mobile optimized */
  .related-posts {
    margin-top: 0;
    padding: 40px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  
  .related-posts .section-title {
    font-size: 22px;
    margin-bottom: 24px;
    text-align: left;
  }
  
  .related-posts .section-title::after {
    left: 30px;
    transform: translateX(0);
    width: 50px;
  }
  
  .related-grid {
    gap: 20px;
  }
}

/* Very small phones (max 480px) - EXTRA COMPACT */
@media (max-width: 480px) {
  .single-header {
    padding: 24px 16px 20px;
  }
  
  .single-title {
    font-size: 24px;
    line-height: 1.35;
  }
  
  .single-header .meta-bar {
    font-size: 12px;
    gap: 10px;
  }
  
  .entry-content {
    padding: 24px 16px;
    font-size: 16px;
  }
  
  .typography h2 {
    font-size: 22px;
    margin-top: 32px;
    padding-left: 12px;
  }
  
  .typography h3 {
    font-size: 19px;
  }
  
  .typography blockquote {
    padding: 16px;
    font-size: 16px;
  }
  
  .social-share {
    padding: 20px 16px;
  }
  
  .share-buttons {
    gap: 8px;
  }
  
  .share-btn {
    padding: 8px 12px;
    font-size: 12px;
    gap: 6px;
  }
  
  .share-btn svg {
    width: 16px;
    height: 16px;
  }
  
  .author-box {
    padding: 20px 16px;
  }
  
  .author-box .avatar {
    width: 48px;
    height: 48px;
  }
  
  .author-box .author-details strong {
    font-size: 15px;
  }
  
  .author-box .author-details .meta {
    font-size: 12px;
  }
  
  .related-posts {
    padding: 32px 16px;
  }
  
  .related-posts .section-title {
    font-size: 20px;
  }
}

/* End of Mobile Responsive Design */

/* ============================================
   💬 COMMENTS SECTION
   ============================================ */

/* CRITICAL: Ensure header and footer are NEVER affected by container styles */
body .site-header,
body .site-footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
}

body .site-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

body .site-footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
}

/* Ensure header-inner and footer sections always use full container width */
.site-header .header-inner,
.site-footer .footer-widgets,
.site-footer .sub-footer-inner {
  max-width: var(--container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}