/*
Theme Name: Astro Syed Sahab
Author: Syed Sahab
Version: 1.0
*/

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Source Sans 3', Arial, sans-serif;
  background-color: #f5f5f5;
  color: #1a1f3c;
  line-height: 1.6;
  margin: 0;
}

.font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  transition: transform 0.3s ease-in-out;
  transform: translateY(0);

  /* Wrapper stays transparent */
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
  pointer-events: none;
  /* Allow clicks through transparent areas */
}

/* Inner Container - The Pill */
.header-container {
  pointer-events: auto;
  /* Re-enable clicks on the content */
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: relative;

  /* Default Top State */
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Smooth sleek transition */
}

/* Scrolled State - Floating Solid Pill */
.header.scrolled .header-container {
  background-color: #0B1120;
  /* Solid Dark Navy */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  /* Soft deep shadow */
  border-radius: 100px;
  /* Full Pill Shape */
  margin-top: 12px;
  /* Float effect */
  max-width: 1100px;
  /* Floating width */
  padding: 0 40px;
  /* Breathing room */
}

.header.nav-floating .header-container {
  background-color: #0B1120;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  border-radius: 100px;
  margin-top: 15px;
  max-width: 1100px;
  padding: 0 40px;
}

/* Force Floating Pill on Blog, Archive, and Single Post pages */
body.blog .header .header-container,
body.archive .header .header-container,
body.single .header .header-container,
body.single-post .header .header-container {
  background-color: #0B1120;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  border-radius: 100px;
  margin-top: 12px;
  max-width: 1100px;
  padding: 0 40px;
}

/* Add Top Padding to Main Content on Blog & Single Pages to prevent Header Overlap */
body.blog main,
body.archive main,
body.single main,
body.single-post main {
  padding-top: 150px !important;
}

/* Remove old scrolled state from wrapper */
.header.scrolled {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Hide header when scrolling down (smart sticky) */
.header.nav-hidden {
  transform: translateY(-120%);
}

/* Premium Logo Animation */
.logo {
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 20;
}

.logo-image-container {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Original Logo Circle */
.logo-circle {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.logo-circle span {
  color: black;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Logo Circle Spring Entrance Animation */
.logo-circle {
  animation: logoSpringEntrance 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  transform: scale(0);
}

/* White Ripple Effects using pseudo-elements */
.logo-image-container::before,
.logo-image-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid;
  border-color: rgba(255, 255, 255, 0.6);
  /* Pure white with slight transparency */
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.logo-image-container::before {
  animation: rippleEffect 2s ease-out 0.8s forwards;
}

.logo-image-container::after {
  animation: rippleEffect 2s ease-out 1.2s forwards;
}

/* Default Logo Text (Desktop) */
.logo-text {
  opacity: 1;
  transform: none;
  max-width: none;
  display: block;
}

@media (max-width: 768px) {

  /* Restored original slide-up reveal animation for mobile */
  .logo-text {
    animation: textSlideUpReveal 0.6s ease-out 0.4s forwards;
    transform: translateY(20px);
    opacity: 0;
    display: inline-block;
  }
}

@keyframes textSlideUpReveal {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Keyframes - Sped up to 2.5s total */
@keyframes logoTextSequence {
  0% {
    opacity: 0;
    max-width: 0;
    transform: translateX(10px);
  }

  10% {
    opacity: 1;
    max-width: 200px;
    transform: translateX(0);
  }

  /* Reveal */
  85% {
    opacity: 1;
    max-width: 200px;
    transform: translateX(0);
  }

  /* Stay */
  100% {
    opacity: 0;
    max-width: 0;
    transform: translateX(-20px);
  }

  /* Slide back/in */
}

/* Keyframes */
@keyframes logoSpringEntrance {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes rippleEffect {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }

  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Removed mobile hero background animation */

/* Center Pill Menu */
.nav {
  display: flex;
  align-items: center;
  gap: 15px;
  /* Gap between menu items */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
  padding: 0;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  z-index: 20;
}

@media (max-width: 768px) {
  .nav {
    display: none !important;
  }
}

/* Hover effect for the pill container itself - REMOVED */
.nav:hover {
  background-color: transparent;
  border-color: transparent;
}

.nav a {
  font-size: 1rem;
  /* Increased font size */
  font-weight: 600;
  color: #ffffff !important;
  /* PURE WHITE always by default */
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 8px 24px;
  /* Balanced padding */
  border-radius: 50px;
  /* Pill shape for buttons only */
  display: inline-block;
  min-width: 120px;
  /* Uniform width for all pills */
  text-align: center;
  /* Center text within pill */
}

.nav a:hover,
.nav a.active,
.current-menu-item>a,
.current_page_item>a {
  color: #fdba74 !important;
  /* Gold/Orange (matches Email button) */
  background-color: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
  text-shadow: none !important;
  /* Ensure no text blur */
  backdrop-filter: none !important;
  /* Ensure no backdrop blur */
}

/* Scrolled State Overrides (Clean Up) */
.header.scrolled .nav {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.header.scrolled .nav a {
  color: #ffffff !important;
  /* Ensure White in scrolled state too */
}

.header.scrolled .nav a:hover,
.header.scrolled .nav a.active,
.header.scrolled .current-menu-item>a,
.header.scrolled .current_page_item>a {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #fdba74 !important;
  /* Gold/Orange */
  transform: translateY(-1px);
  text-shadow: none !important;
}

.right-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 20;
}

/* Specific spacing for language to avoid crowding */
.lang-switcher {
  margin-right: 5px;
}

/* Language Switcher */
.lang-switcher {
  position: relative;
}

@media (max-width: 768px) {
  .lang-switcher {
    display: none !important;
  }
}

/* Hide Google Translate Branding and UI */
#google_translate_element,
.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

body {
  top: 0 !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
}

.lang-btn:hover {
  color: #fdba74;
}

.lang-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 160px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  color: #1f2937;
}

.lang-switcher:hover .lang-dropdown {
  opacity: 1;
  visibility: visible;
}

.lang-item {
  display: block;
  padding: 8px 16px;
  color: #374151;
  text-decoration: none;
  font-size: 0.875rem;
}

.lang-item:hover {
  background-color: #fff7ed;
  color: #ea580c;
}

/* Nav Menu Dropdown (Mobile Only) */
.nav-menu-dropdown {
  position: relative;
  opacity: 0;
  display: none;
  /* Hide on desktop */
}

@media (max-width: 768px) {
  .nav-menu-dropdown {
    display: block;
    opacity: 1;
  }

  /* Bounce hint now only on the arrow icon itself to keep click area stable */
  .nav-menu-dropdown .nav-menu-btn svg {
    animation: navArrowBounceHint 11.6s ease-in-out 4s 1 forwards;
  }
}

@keyframes navMenuEntrance {
  from {
    opacity: 0;
    transform: translate3d(10px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes navArrowBounceHint {

  0%,
  3.44%,
  6.9%,
  93.1%,
  96.5%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  1.72%,
  5.17%,
  94.8%,
  98.2% {
    transform: translate3d(0, -8px, 0);
  }
}

.nav-menu-btn {
  width: auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
}

.nav-menu-btn:hover {
  color: #fdba74;
}

.nav-menu-btn svg {
  transition: transform 0.3s ease;
}

.nav-menu-dropdown.is-open .nav-menu-btn svg {
  transform: rotate(180deg);
}

.menu-dropdown-content {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 12px;
  width: 110px;
  /* Even slimmer */
  background: white;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: translateY(15px) scale(0.9);
  transform-origin: top right;
  overflow: hidden;
  z-index: 50;
}

.nav-menu-dropdown.is-open .menu-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.menu-dropdown-content a {
  display: block;
  padding: 10px 12px;
  color: #1f2937;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
}

/* Staggered Entrance for Links */
.nav-menu-dropdown.is-open .menu-dropdown-content a {
  opacity: 1;
  transform: translateY(0);
}

.nav-menu-dropdown.is-open .menu-dropdown-content a:nth-child(1) {
  transition-delay: 0.1s;
}

.nav-menu-dropdown.is-open .menu-dropdown-content a:nth-child(2) {
  transition-delay: 0.15s;
}

.nav-menu-dropdown.is-open .menu-dropdown-content a:nth-child(3) {
  transition-delay: 0.2s;
}

.nav-menu-dropdown.is-open .menu-dropdown-content a:nth-child(4) {
  transition-delay: 0.25s;
}

.menu-dropdown-content a:last-child {
  border-bottom: none;
}

.menu-dropdown-content a:hover {
  background-color: #fff7ed;
  color: #ea580c;
  padding-left: 15px;
}

/* Email Button */
.btn-email {
  background-color: #fdba74;
  color: black;
  padding: 8px 20px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.3s;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-email:hover {
  background-color: #fb923c;
  transform: translateY(-1px);
}

/* Page Title */
.page-title-section {
  background-color: white;
  padding: 48px 0;
  border-bottom: 1px solid #e5e7eb;
}

.page-title-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-title {
  font-size: 2.25rem;
  font-weight: 600;
  color: #1a1f3c;
}

.breadcrumb {
  font-size: 0.875rem;
  color: #6b7280;
}

.breadcrumb a {
  color: #6b7280;
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumb a:hover {
  color: #1a1f3c;
}

/* Main Content */
.main-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px;
  display: flex;
  gap: 32px;
}

/* Sidebar */
.sidebar {
  width: 288px;
  flex-shrink: 0;
}

.sidebar-section {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sidebar-section.pill-style {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}

.sidebar-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1f3c;
  margin-bottom: 16px;
}

.sidebar-pill {
  display: inline-block;
  background-color: #1a2332;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 9999px;
  margin-bottom: 12px;
}

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

.category-list li {
  margin-bottom: 10px;
}

.category-list a {
  color: #1a1f3c;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
  display: block;
}

.category-list a:hover {
  color: #ea580c;
}

.top-posts-section {
  margin-top: 12px;
}

.top-post-item {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.top-post-item:last-child {
  margin-bottom: 0;
}

.top-post-bullet {
  color: #1a1f3c;
  font-size: 0.875rem;
  line-height: 1.4;
  flex-shrink: 0;
}

.top-post-content {
  flex: 1;
}

.top-post-content a {
  font-size: 0.875rem;
  color: #1a1f3c;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}

.top-post-content a:hover {
  color: #ea580c;
}

.top-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #6b7280;
}

.category-tag {
  color: #3b82f6;
  text-transform: uppercase;
}

/* Removed logo animations */

/* Article */
.article-content {
  flex: 1;
}

.article {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.article-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.article-body {
  padding: 32px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  margin-bottom: 16px;
}

.article-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1a1f3c;
  margin-bottom: 24px;
  line-height: 1.3;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e5e7eb;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
}

.author-name {
  font-weight: 500;
  color: #1a1f3c;
}

.author-role {
  font-size: 0.875rem;
  color: #6b7280;
}

/* Article Prose */
.prose {
  color: #374151;
  font-size: 1.125rem;
  line-height: 1.8;
}

.prose p {
  margin-bottom: 1.5em;
}

.prose h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1f3c;
  margin-top: 2em;
  margin-bottom: 1em;
}

.prose blockquote {
  border-left: 4px solid #1a1f3c;
  padding-left: 24px;
  margin: 2em 0;
  font-style: italic;
  color: #6b7280;
}

.prose ul,
.prose ol {
  margin-bottom: 1.5em;
  padding-left: 1.5em;
}

.prose li {
  margin-bottom: 0.5em;
}

.prose img {
  max-width: 100%;
  height: auto;
  margin: 2em 0;
  border-radius: 8px;
}

/* Share */
.share-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #e5e7eb;
}

.share-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1f3c;
  margin-bottom: 16px;
}

.share-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.share-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: white;
  transition: opacity 0.3s;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.share-btn:hover {
  opacity: 0.8;
}

.share-whatsapp {
  background-color: #22c55e;
}

.share-link {
  background-color: #1a2332;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1a2332;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 0.875rem;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.toast.visible {
  opacity: 1;
}

/* Related Posts */
.related-section {
  margin-top: 40px;
}

.related-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1f3c;
  margin-bottom: 24px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.blog-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}

.blog-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.blog-card-image {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

/* Post Language Switcher */
.post-language-switcher {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  margin: 30px 0;
  /* 30px gap as requested */
  width: 100%;
}

.post-lang-btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #000;
  /* Solid Black border */
  background: transparent;
  color: #000;
  /* Black text */
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

.post-lang-btn:hover {
  background: #000;
  /* Black background on hover */
  color: #fff;
  /* White text on hover */
}

/* Toggle Content Styles */
#hindi-content {
  display: none;
}

.lang-content-section {
  transition: opacity 0.5s ease;
}

.lang-content-section.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.back-to-eng-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 6px 12px;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-to-eng-btn:hover {
  background: #000;
  color: #fff;
}

@media (max-width: 640px) {
  .post-language-switcher {
    gap: 10px;
    margin: 20px 0;
  }

  .post-lang-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

.blog-card-content {
  padding: 20px;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  margin-bottom: 12px;
}

.blog-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1f3c;
  margin-bottom: 8px;
  line-height: 1.4;
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.blog-card-title a:hover {
  color: rgba(26, 31, 60, 0.7);
}

.blog-card-excerpt {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
}

/* Sticky Contact */
.sticky-contact {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: none;
  flex-direction: column;
  gap: 12px;
}

.sticky-btn {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s;
  text-decoration: none;
}

.sticky-btn:hover {
  transform: scale(1.1);
}

.sticky-whatsapp {
  background-color: #22c55e;
  color: white;
}

.sticky-call {
  background-color: #1a1f3c;
  color: white;
}

/* Removed hero and icon animations */

/* Removed dropdown and help tooltip animations */

/* Removed scroll reveal */

/* Removed navbar slide animation */

/* Hero Staggered Reveal (no layout shift) */
.reveal-text {
  visibility: hidden;
  /* Prevent flash before JS splits */
  white-space: pre-wrap;
}

.reveal-char {
  display: inline-block;
  transform: translateY(1.1em);
  opacity: 0;
  will-change: transform, opacity;
}

.icon {
  width: 20px;
  height: 20px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

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

/* Responsive */
@media (max-width: 1024px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    order: 2;
  }

  .article-content {
    order: 1;
  }
}

@media (max-width: 768px) {

  .nav,
  .contact-buttons {
    display: none;
  }

  .btn-email {
    display: none;
  }

  /* Hide Email Me button on mobile */
  .sticky-contact {
    display: none !important;
  }

  /* Hide floating icons on mobile to avoid duplication */
  .related-grid {
    grid-template-columns: 1fr;
  }

  .page-title-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .article-body {
    padding: 24px;
  }

  .article-title {
    font-size: 1.5rem;
  }

  /* Hero Section Buttons Mobile Spacing */
  .hero-buttons {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Mobile navbar - disable sticky behavior */
  .header {
    position: absolute !important;
    transform: none !important;
    transition: none !important;
  }

  .header.nav-hidden {
    transform: none !important;
  }

  .header.scrolled .header-container,
  .header.nav-floating .header-container {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    max-width: 100% !important;
    padding: 0 24px !important;
  }
}

/* Desktop (>1024px) - Blog-style navbar behavior */
@media (min-width: 1025px) {

  /* Scrolled State - Floating Solid Pill (matches blog style) */
  .header.scrolled .header-container,
  .header.nav-floating .header-container {
    background-color: #0B1120;
    /* Solid Dark Navy */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    /* Soft deep shadow */
    border-radius: 100px;
    /* Full Pill Shape */
    margin-top: 12px;
    /* Float effect */
    max-width: 1100px;
    /* Floating width */
    padding: 0 40px;
    /* Breathing room */
  }

  /* Ensure smooth transitions */
  .header {
    transition: transform 0.3s ease-in-out;
  }

  .header-container {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.bounce-arrow {
  animation: bounceArrow 2s ease-in-out infinite;
  will-change: transform;
  display: inline-block
}

@keyframes bounceArrow {

  0%,
  100% {
    transform: translate3d(0, 0, 0)
  }

  50% {
    transform: translate3d(0, -10px, 0)
  }
}

@media (min-width: 768px) {
  #expertise .expertise-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto
  }
}

/* Text Rotator - Fixed alignment and no layout shift */
.role-rotator-container {
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
}

.rotator-word {
  display: inline-block;
  text-align: left;
  vertical-align: baseline;
  will-change: transform, opacity;
  transition: none;
}

.rotator-word.enter {
  animation: rotatorEnter 0.4s ease forwards;
}

.rotator-word.leave {
  animation: rotatorLeave 0.4s ease forwards;
}

@keyframes rotatorEnter {
  from {
    transform: translateY(0.6em);
    opacity: 0;
  }

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

@keyframes rotatorLeave {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-0.6em);
    opacity: 0;
  }
}