/* ---------- ROOT VARIABLES (dark theme) ---------- */
:root {
  --bg-color: #000000;
  --surface-color: #0a0a0a;
  --accent-color: #00f2ff;
  --text-primary: #ffffff;
  --text-secondary: #888888;
  --border-color: #1a1a1a;
  --header-height: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---------- CUSTOM NAVBAR (copied from home page) ---------- */
header {
  background-color: transparent !important;
  width: 100%;
  height: 6vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  font-family: "Inter", sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: background-color 0.3s ease-out;
}

header.menu-open {
  background-color: #fff !important;
  border-bottom: 1px solid #000;
}

header .menu button {
  width: 5.5vw;
  height: 2.3vw;
  border-radius: 30px;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-size: 0.9rem;
  background-color: transparent !important;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

header .menu button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff;
}

header.menu-open .menu button {
  border: 1px solid #333;
  color: #000;
}

header.menu-open .menu button:hover {
  background-color: #f5f1ed !important;
  color: #000;
}

header .logo-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

header.menu-open .logo-center {
  opacity: 1;
  pointer-events: auto;
}

header .logo-center img {
  width: 15vw;
  height: auto;
}

header .logo img {
  width: 15rem;
}

/* Hamburger Menu */
.hamburger-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;
  display: none;
  flex-direction: row;
  padding: 0;
}

.hamburger-menu.active {
  display: flex;
  animation: slideLeft 0.5s ease-out forwards;
}

.hamburger-menu.closing {
  display: flex;
  animation: slideLeftOut 0.5s ease-out forwards;
}

@keyframes slideLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideLeftOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.menu-content {
  display: flex;
  width: 100%;
  height: 100%;
}

.menu-left {
  /* width: 30%; */
  background-color: #f5f1ed;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  border-right: 1px solid #000;
}

.menu-right {
  /* width: 70%; */
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.menu-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.4s ease-out, transform 0.6s ease-out;
  transform: scale(1);
  display: block;
}

.menu-right img.active {
  transform: scale(1.05);
}

.hamburger-menu .menu-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.hamburger-menu .menu-items li a {
  color: #000;
  font-size: 18px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  transition: all 0.3s ease-out;
  display: block;
  padding: 0.5rem 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hamburger-menu .menu-items li a:hover {
  color: #666;
}

/* Ensure the menu content is above the background and clickable */
.hamburger-menu {
  pointer-events: none; /* Block clicks when hidden */
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.hamburger-menu.active {
  pointer-events: auto; /* Enable clicks when visible */
  opacity: 1;
  visibility: visible;
}

.menu-items li a {
  display: block;
  position: relative;
  z-index: 100; /* Force links to the top */
  cursor: pointer !important;
}

/* ---------- MOBILE NAVBAR STYLES (copied from home page) ---------- */
@media (max-width: 768px) {
  header {
    height: 20vw !important;
    padding: 0 1rem !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  header .logo {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  header .logo img {
    width: auto;
    height: 100%;
    max-height: 12vw;
    object-fit: contain;
    padding-right: 0;
  }

  header .logo-center img {
    display: none;
  }

  header.menu-open {
    background-color: #fff !important;
    border-bottom: 1px solid #000;
  }

  header .menu button {
    width: 60px !important;
    height: 40px !important;
    font-size: 0.8rem !important;
  }

  .hamburger-menu .menu-right {
    display: none;
  }

  .hamburger-menu .menu-left {
    width: 100%;
    border-right: none;
    padding: 0 1rem;
  }

  .hamburger-menu .menu-items li a {
    font-size: 1.2rem;
    padding: 0.3rem 0;
  }
}

/* ---------- BLOG DETAIL STYLES (Enhanced for professionalism) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@400;500&display=swap");

.mono {
  font-family: "JetBrains Mono", monospace;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.85rem;
}

/* Back link – consistent with dark theme */
.back-link {
  display: inline-block;
  margin: 6rem 2rem 2rem 2rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s;
  position: relative;
  padding-left: 1.5rem;
}

.back-link i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-color);
  transition: transform 0.2s;
}

.back-link:hover {
  color: var(--accent-color);
}

.back-link:hover i {
  transform: translateY(-50%) translateX(-3px);
}

/* Blog detail container – centered, readable width */
.blog-detail-container {
  max-width: 900px;
  margin: 2rem auto 4rem;
  padding: 0 2rem;
}

/* Featured image */
.blog-detail-image {
  width: 100%;
  height: 450px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  margin-bottom: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.blog-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) contrast(1.1);
  transition: filter 0.5s, transform 0.5s;
}

.blog-detail-image:hover img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.02);
}

/* Title and meta */
.blog-detail-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.blog-detail-meta {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.blog-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-detail-meta i {
  color: var(--accent-color);
}

/* Blog content */
.blog-detail-content {
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.8;
}

.blog-detail-content p {
  margin-bottom: 1.8rem;
}

.blog-detail-content h2 {
  color: var(--accent-color);
  font-size: 2rem;
  margin: 2.5rem 0 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.blog-detail-content h3 {
  color: var(--text-primary);
  font-size: 1.5rem;
  margin: 2rem 0 1rem;
  font-weight: 600;
}

.blog-detail-content blockquote {
  border-left: 4px solid var(--accent-color);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--text-primary);
  background-color: var(--surface-color);
  border-radius: 0 8px 8px 0;
  font-size: 1.15rem;
}

.blog-detail-content ul,
.blog-detail-content ol {
  margin: 1.5rem 0 1.5rem 2rem;
}

.blog-detail-content li {
  margin-bottom: 0.75rem;
}

.blog-detail-content strong {
  color: var(--text-primary);
}

.blog-detail-content a {
  color: var(--accent-color);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-color);
  transition: color 0.2s, border-bottom-color 0.2s;
}

.blog-detail-content a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* Code blocks (if any) */
.blog-detail-content pre,
.blog-detail-content code {
  font-family: "JetBrains Mono", monospace;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.2rem 0.4rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.blog-detail-content pre {
  padding: 1rem;
  overflow-x: auto;
}

.blog-detail-content pre code {
  background-color: transparent;
  border: none;
  padding: 0;
}

/* Responsive adjustments for blog detail (only) */
@media (max-width: 768px) {
  .back-link {
    margin: 5rem 1rem 1.5rem 1rem;
  }

  .blog-detail-container {
    padding: 0 1rem;
    margin: 1rem auto 3rem;
  }

  .blog-detail-image {
    height: 280px;
    border-radius: 12px;
    margin-bottom: 1.5rem;
  }

  .blog-detail-title {
    font-size: 2rem;
  }

  .blog-detail-meta {
    font-size: 0.9rem;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
  }

  .blog-detail-content {
    font-size: 1rem;
    line-height: 1.7;
  }

  .blog-detail-content h2 {
    font-size: 1.6rem;
    margin: 2rem 0 1rem;
  }

  .blog-detail-content h3 {
    font-size: 1.3rem;
  }

  .blog-detail-content blockquote {
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .blog-detail-title {
    font-size: 1.6rem;
  }

  .blog-detail-image {
    height: 200px;
  }

  .blog-detail-content h2 {
    font-size: 1.4rem;
  }

  .blog-detail-content h3 {
    font-size: 1.2rem;
  }
}

/* ---------- MODERN FOOTER ---------- */
footer {
  background-color: var(--bg-color);
  color: var(--text-primary);
  padding: 4rem 2rem 2rem;
  font-family: "Inter", sans-serif;
  border-top: 1px solid var(--border-color);
  position: relative;
  z-index: 10;
}

.footer-container {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
}

.footer-left {
  flex: 0 0 250px;
}

.footer-left img {
  width: 200px;
  height: 150px;
}

.footer-left a {
  text-transform: uppercase;
  font-size: 0.7rem;
  text-decoration: none;
  color: var(--text-primary);
}

.footer-left h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.social-links {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.social-links a {
  color: var(--text-secondary);
  font-size: 1.3rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-links a:hover {
  color: var(--accent-color);
  transform: translateY(-3px);
}

.copyright {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 2rem;
  line-height: 1.5;
}

.footer-right {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: flex-end;
}

.footer-column {
  min-width: 160px;
}

.footer-column h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent-color);
  padding-left: 5px;
}

.footer-bottom {
  max-width: 1400px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center; /* ensure links are centered */
}

.legal-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.legal-links a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Mobile copyright – hidden on desktop, visible on mobile */
.mobile-copyright {
  display: none;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  width: 100%;
  margin-top: 1rem;
}

.footer-year {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.footer-bottom a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-bottom a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.website-developer {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .footer-container {
    gap: 2rem;
  }
  .footer-left {
    flex: 0 0 200px;
  }
  .footer-right {
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  footer {
    padding: 3rem 1.5rem 1.5rem;
  }

  /* Make footer a column and reorder children */
  footer {
    display: flex;
    flex-direction: column;
  }

  /* Hide original copyright inside footer-left */
  .footer-left .copyright {
    display: none;
  }

  /* Show mobile copyright */
  .mobile-copyright {
    display: block;
  }

  /* Footer container becomes a column */
  .footer-container {
    flex-direction: column;
    gap: 2.5rem;
  }

  /* Left section (logo, social) appears after the columns */
  .footer-left {
    order: 2;
    width: 100%;
    flex: none;
    margin-top: 2rem;
  }

  /* Right section (columns) appears first */
  .footer-right {
    order: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns */
    gap: 2rem;
    justify-content: flex-start;
  }

  /* Remove previous flex‑based sizing for columns */
  .footer-column {
    min-width: 0; /* reset min-width */
    width: 100%;
  }

  /* First two columns (Quick Links, Company) – they will naturally fill grid cells */
  .footer-column:nth-child(1),
  .footer-column:nth-child(2) {
    width: auto;
  }

  /* Third column (Media) spans both columns? Actually we want it to start a new row.
     With grid-template-columns: 1fr 1fr, the third item will automatically go to the next row.
     We can optionally make it span both columns if desired, but the user likely wants it below.
     Leave as is – it will occupy the first column of the second row.
     To make it full width, uncomment the following:
  */
  .footer-column:nth-child(3) {
    grid-column: 1 / -1; /* make it span both columns */
    margin-top: 1rem;
  }

  /* Footer bottom (legal links) appears before the mobile copyright */
  .footer-bottom {
    order: 3;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  .legal-links {
    order: 1;
    justify-content: center;
    width: 100%;
  }

  .mobile-copyright {
    order: 2;
  }
}

@media (max-width: 480px) {
  .footer-right {
    gap: 1.5rem;
  }
  .footer-column {
    min-width: 100%; /* ensure columns stack on very small screens */
  }
  /* On very small screens, maybe keep legal links centered */
  .legal-links {
    justify-content: center;
    gap: 1rem;
  }
}