/* Glide Theme Styles */

:root {
  --primary-color: #007aff; /* Apple Blue */
  --accent-color: #5ac8fa; /* Apple Light Blue */
  --secondary-color: #86868b; /* Apple Gray */
  --tertiary-color: #c7c7cc; /* Apple Light Gray */
  --light-bg: #ffffff; /* Pure White */
  --dark-bg: #000000; /* Pure Black */
  --light-text: #1d1d1f; /* Apple Dark Gray */
  --dark-text: #f5f5f7; /* Apple Off-White */
  --border-color: #d2d2d7; /* Apple Border Gray */
  --dark-border: #424245; /* Apple Dark Border */
  --radius: 0.75rem; /* Apple Border Radius */
  --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-lg: 0 4px 16px 0 rgb(0 0 0 / 0.1);

  /* Ghost Font Variables */
  --gh-font-heading:
    "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gh-font-body:
    "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* San Francisco Font Family */
@font-face {
  font-family: "SF Pro Display";
  src: local("SFProDisplay-Regular"), local("SF Pro Display Regular");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: local("SFProDisplay-Medium"), local("SF Pro Display Medium");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: local("SFProDisplay-Semibold"), local("SF Pro Display Semibold");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: local("SFProDisplay-Bold"), local("SF Pro Display Bold");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: local("SFProText-Regular"), local("SF Pro Text Regular");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: local("SFProText-Medium"), local("SF Pro Text Medium");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: local("SFProText-Semibold"), local("SF Pro Text Semibold");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: local("SFProText-Bold"), local("SF Pro Text Bold");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
  transition:
    background-color 0.3s,
    color 0.3s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #1d1d1f;
  background: #ffffff;
}

body.light-mode {
  color: var(--light-text);
  background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
}

body.dark-mode {
  color: var(--dark-text);
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
}

/* Header - Mobile First */
.site-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

body.dark-mode .site-header {
  background: var(--dark-bg);
  border-bottom-color: var(--dark-border);
}

.nav-container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  gap: 1rem;
}

.nav-logo {
  flex-shrink: 0;
}

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

/* Mobile menu button - always visible on mobile */
.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--light-text);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.dark-mode .mobile-menu-btn {
  color: var(--dark-text);
}

.mobile-menu-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.dark-mode .mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Hide nav menu on tablets */
@media (min-width: 769px) and (max-width: 899px) {
  .nav-menu {
    display: none;
  }
}

/* Desktop navigation */
@media (min-width: 900px) {
  .site-header {
    padding: 1.5rem 0;
  }

  .nav-container {
    max-width: 1200px;
    padding: 0 2rem;
  }

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

  .nav-menu {
    margin-left: 2rem;
  }

  .nav-menu ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-menu li {
    display: flex;
  }

  .nav-menu a {
    color: var(--light-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
    padding: 0.5rem 0;
  }

  body.dark-mode .nav-menu a {
    color: var(--dark-text);
  }

  .nav-menu a:hover,
  .nav-menu .nav-current a {
    color: var(--primary-color);
  }

  .nav-spacer {
    flex: 1;
  }

  .mobile-menu-btn {
    display: none;
  }
}

/* Search Icon Button */
.search-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--light-text);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 1rem;
}

body.dark-mode .search-icon-btn {
  color: var(--dark-text);
}

.search-icon-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.dark-mode .search-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.search-icon-btn svg {
  width: 20px;
  height: 20px;
}

.nav-buttons {
  display: flex;
  gap: 1rem;
  margin-left: 1rem;
}

.btn-signin,
.btn-subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 2px solid var(--border-color);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.btn-signin {
  background-color: transparent;
  color: var(--light-text);
}

body.dark-mode .btn-signin {
  color: var(--dark-text);
  border-color: var(--dark-border);
}

.btn-signin:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body.dark-mode .btn-signin:hover {
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

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

.btn-subscribe:hover {
  background-color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.btn-view-posts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  background-color: var(--primary-color);
  color: white;
  border: 2px solid var(--primary-color);
  margin-top: 1.5rem;
}

.btn-view-posts:hover {
  background-color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

/* Search Section */
.search-section {
  max-width: 1200px;
  margin: 8rem auto;
  padding: 0 4rem;
  text-align: center;
}

.search-container h1 {
  font-size: 3rem;
  margin-bottom: 2rem;
}

.search-form {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 4rem;
}

.search-form input {
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  background: var(--light-bg);
  color: var(--light-text);
  font-size: 1.1rem;
  width: 100%;
  max-width: 400px;
}

body.dark-mode .search-form input {
  background: var(--dark-bg);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

.search-form button {
  padding: 1rem 1.5rem;
  border: none;
  background: var(--primary-color);
  color: white;
  border-radius: 25px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.search-form button:hover {
  background: #1d4ed8;
}

.search-results {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4rem;
}

.no-results {
  text-align: center;
  padding: 4rem 0;
}

.no-results h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

.no-results p {
  font-size: 1.1rem;
  color: var(--secondary-color);
}

/* Hero Section - Mobile First */
.hero-section {
  margin: 4rem auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 2rem;
}

.hero-content {
  flex: 3;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.hero-intro {
  font-size: 1.2rem;
  color: var(--secondary-color);
  line-height: 1.6;
}

.hero-image {
  flex: 1;
}

.hero-image img {
  width: 100%;
  border-radius: 8px;
}

/* Desktop hero enhancements */
@media (min-width: 600px) {
  .hero-section {
    max-width: 1200px;
    margin: 8rem auto;
    padding: 0 4rem;
    flex-direction: row;
    text-align: left;
    gap: 6rem;
  }

  .hero-title {
    font-size: 4rem;
    line-height: 1.1;
  }

  .hero-intro {
    font-size: 1.5rem;
  }
}

/* Posts Section */
.posts-section {
  max-width: 1200px;
  margin: 6rem auto;
  padding: 0 4rem;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}

@media (max-width: 1024px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }
}

.post-card {
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  box-shadow: var(--shadow);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
}

.post-card-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  text-decoration: none;
  border-radius: 12px;
}

.post-card-link:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

body.dark-mode .post-card {
  background: var(--dark-bg);
  border-color: var(--dark-border);
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--tertiary-color);
}

body.dark-mode .post-card:hover {
  border-color: var(--secondary-color);
}

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

.post-card:hover .post-image {
  transform: scale(1.02);
}

.post-card h2 {
  margin: 2rem 1.75rem 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.post-card h2 a {
  color: var(--light-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

body.dark-mode .post-card h2 a {
  color: var(--dark-text);
}

.post-card h2 a:hover {
  color: var(--primary-color);
}

.post-card p {
  margin: 0.5rem 1.75rem 1.5rem;
  color: var(--secondary-color);
  line-height: 1.6;
  font-size: 0.925rem;
  font-weight: 400;
}

.post-tags {
  margin: 0 1.75rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.tag {
  background: rgba(0, 0, 0, 0.04);
  color: var(--secondary-color);
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}

body.dark-mode .tag {
  background: rgba(255, 255, 255, 0.08);
}

.tag:hover {
  background: rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

body.dark-mode .tag:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* CTA Section */
.cta-section {
  background: var(--dark-bg);
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
  border-radius: 12px;
  margin: 8rem auto;
  max-width: 1200px;
  padding: 6rem 4rem;
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  box-shadow: var(--shadow);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='%23000000' opacity='0.1'%3e%3c/rect%3e%3cpath d='M474.55 0C517.55 11.1 496.49 65.79 540 69.68C664.21 80.79 684.54 61.22 810 30C824.54 26.38 805.36 1.63 820 0C940.36 -13.37 950 0 1080 0C1215 0 1215 0 1350 0C1485 0 1485 0 1620 0C1755 0 1755 0 1890 0C2025 0 2092.5 -67.5 2160 0C2227.5 67.5 2160 135 2160 270C2160 385.72 2174.79 391.59 2160 501.43C2156.61 526.59 2123.65 521.56 2123.65 540C2123.65 556.86 2156.93 549.19 2160 572.03C2175.1 684.19 2160 691.01 2160 810C2160 916.37 2196.52 939.25 2160 1022.73C2137.46 1074.25 2104.47 1066.72 2041.88 1080C1969.47 1095.36 1965.94 1080 1890 1080C1755 1080 1755 1080 1620 1080C1485 1080 1485 1080 1350 1080C1215 1080 1215 1080 1080 1080C945 1080 945 1080 810 1080C675 1080 675 1080 540 1080C405 1080 405 1080 270 1080C135 1080 67.5 1147.5 0 1080C-67.5 1012.5 0 945 0 810C0 754.78 -23.63 699.55 0 699.55C34.22 699.55 51.93 762.65 115.71 810C186.93 862.87 201.84 900 270 900C313.09 900 338.21 861.24 338.21 810C338.21 700.52 312.76 689.35 270 578.57C260.65 554.35 257.26 551.72 234 540C122.26 483.69 69.62 522.83 0 442.5C-47.38 387.83 0 356.25 0 270C0 135 -67.5 67.5 0 0C67.5 -67.5 135 0 270 0C372.27 0 382.55 -23.74 474.55 0' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1080 260C1066.05 260 1061.79 259.64 1050 270C926.79 378.32 924.2 379.38 810 497.37C793.54 514.38 788.68 521.93 788.68 540C788.68 549.29 798.57 547.71 810 552.09C944.23 603.57 967.4 655.96 1080 651.72C1128.12 649.91 1129.72 599.28 1131.43 540C1135.23 408.42 1115.41 402.76 1091.02 270C1089.69 262.76 1086.56 260 1080 260' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M0 135C35.45 57.35 48.37 37.44 123.26 0C183.37 -30.06 196.63 0 270 0C321.13 0 332.51 -26.29 372.27 0C467.51 62.98 443.95 105.85 540 178.55C622.32 240.85 714.22 194.8 729 270C749.74 375.53 588.25 432.24 611.05 540C628.75 623.66 713.71 591.38 810 652.84C925.21 726.38 1034.04 717.12 1034.04 810C1034.04 927.32 948.11 1010.12 810 1073.25C701.09 1123.03 670.81 1033.27 540 1035.82C497.84 1036.64 506.13 1073.12 464.06 1080C371.13 1095.21 367.03 1080 270 1080C166.5 1080 63 1100.7 63 1080C63 1057.58 184.64 1060.31 270 993.75C357.77 925.31 367.43 913.77 409.26 810C458.88 686.9 492.8 643.13 452.9 540C423.17 463.13 363.78 489.6 270 450C137.33 393.98 106.04 419.44 0 348.75C-28.96 329.44 0 309.38 0 270C0 202.5 -26.18 192.35 0 135' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1080 135C1010.86 69.22 945 39.54 945 0C945 -27.96 1012.5 0 1080 0C1215 0 1215 0 1350 0C1469.12 0 1473 -10.97 1588.24 0C1608 1.88 1600.27 22.12 1620 25.71C1751.15 49.58 1759.31 63.81 1890 54.92C1948.31 50.95 1940.23 11.75 1998 0C2075.23 -15.71 2129.63 -50.63 2160 0C2210.63 84.38 2160 135 2160 270C2160 316.84 2183.16 326.03 2160 363.67C2100.09 461.03 1993.85 455.69 1993.85 540C1993.85 617.07 2106.68 599.78 2160 686.44C2189.75 734.78 2160 748.22 2160 810C2160 865.22 2197.48 891.44 2160 920.45C2062.48 995.95 1999.45 1048.45 1890 1019.03C1794.02 993.23 1782.56 925.64 1749.13 810C1713.33 686.13 1789.56 659.25 1751.54 540C1725 456.75 1683.37 405 1620 405C1560.6 405 1566.75 476.02 1506 540C1431.75 618.2 1421.78 689.36 1350 689.36C1288.07 689.36 1263.31 625.59 1238.57 540C1202.7 415.91 1274.25 386.14 1228.78 270C1194.97 183.64 1152.75 204.22 1080 135' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1163.08 1080C1163.08 1026.25 1253.13 895.91 1350 895.91C1455.07 895.91 1566.96 1027.78 1566.96 1080C1566.96 1119.82 1458.48 1080 1350 1080C1256.54 1080 1163.08 1118.3 1163.08 1080' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M51.43 270C51.43 166.93 160.72 0 270 0C379.28 0 488.57 166.93 488.57 270C488.57 338.36 379.28 342.86 270 342.86C160.72 342.86 51.43 338.36 51.43 270' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1080 10C1073.54 10 1070 2.93 1070 0C1070 -2.07 1075 0 1080 0C1102.5 0 1125 -2.47 1125 0C1125 2.53 1101.04 10 1080 10' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1677.86 270C1677.86 200.33 1784.62 169.32 1890 169.32C1989.69 169.32 2088 201.26 2088 270C2088 361.6 1990.89 490 1890 490C1785.82 490 1677.86 360.67 1677.86 270' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1345.71 540C1345.71 506.89 1347.43 472.5 1350 472.5C1352.57 472.5 1356 507.38 1356 540C1356 544 1352.76 545.74 1350 545.74C1347.62 545.74 1345.71 543.51 1345.71 540' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M480.32 810C480.32 733.68 479.21 662.9 540 652.5C644.05 634.69 679.32 694.85 810 753.58C854.53 773.6 890.43 776.66 890.43 810C890.43 852.12 865.15 888.27 810 904.5C689.94 939.82 654.4 945.88 540 913.09C489.56 898.63 480.32 863.98 480.32 810' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1980 810C1980 805.67 2074.35 800.85 2160 800.85C2164.35 800.85 2160 805.42 2160 810C2160 814.09 2163.91 818.18 2160 818.18C2073.91 818.18 1980 814.33 1980 810' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1266.92 1080C1266.92 1056.11 1306.94 998.18 1350 998.18C1396.7 998.18 1446.43 1056.79 1446.43 1080C1446.43 1097.7 1398.22 1080 1350 1080C1308.46 1080 1266.92 1097.02 1266.92 1080' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Match article width for screens smaller than 1300px */
@media (max-width: 1300px) {
  .cta-section {
    max-width: 800px;
    margin: 6rem auto;
  }
}

/* Additional margin for medium screens */
@media (max-width: 900px) {
  .cta-section {
    max-width: 800px;
    margin: 5rem auto;
  }
}

/* Match article width for tablet screens */
@media (max-width: 768px) {
  .cta-section {
    max-width: 800px;
    margin: 3rem auto;
    padding: 3rem 1rem;
    flex-direction: column;
    gap: 2rem;
  }
}

/* Ghost CTA Section Styles */
.gh-cta {
  background: var(--dark-bg);
  color: var(--dark-text);
  padding: 6rem 0;
  margin: 8rem 0;
}

.gh-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4rem;
}

.gh-cta-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
}

.gh-cta-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  color: var(--dark-text);
}

.gh-cta-description {
  font-size: 1.25rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

/* Email Subscription Form */
.gh-subscribe {
  max-width: 400px;
  margin: 0 auto;
}

.gh-subscribe-form {
  position: relative;
}

.gh-subscribe-fields {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.gh-subscribe-email {
  flex: 1;
  padding: 1rem 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--dark-text);
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

.gh-subscribe-email:focus {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
}

.gh-subscribe-email::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.gh-subscribe-btn {
  padding: 1rem 2rem;
  border: none;
  border-radius: 25px;
  background: var(--primary-color);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.gh-subscribe-btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.gh-subscribe-message {
  margin-top: 1rem;
  text-align: center;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.cta-main {
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cta-main h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: left;
}

.btn-subscribe-large {
  background: var(--primary-color);
  color: white;
  padding: 1rem 3rem;
  text-decoration: none;
  border-radius: 25px;
  border: 2px solid var(--primary-color);
  font-weight: 500;
  font-size: 1.1rem;
  display: inline-block;
  transition: all 0.3s;
  align-self: flex-start;
}

.btn-subscribe-large:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.cta-links {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 6rem;
  align-self: flex-start;
  margin-top: 0.5rem;
}

.site-links,
.social-links {
  flex: 1;
  min-width: 200px;
}

.site-links h3,
.social-links h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.site-links a,
.social-links a {
  color: white;
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.site-links a:hover,
.social-links a:hover {
  opacity: 1;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  text-decoration: none;
  padding: 0.5rem 0;
  transition: opacity 0.3s;
  border-radius: 8px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.social-link:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.link-arrow {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.social-link:hover .link-arrow {
  opacity: 1;
}

.site-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--primary-color);
  text-decoration: none;
  padding: 0.5rem 0;
  transition: opacity 0.3s;
  border-radius: 8px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.site-link:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.site-link .link-arrow {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.site-link:hover .link-arrow {
  opacity: 1;
}

/* Footer */
.site-footer {
  background: var(--light-bg);
  border-top: 1px solid var(--border-color);
  padding: 3rem 4rem;
}

body.dark-mode .site-footer {
  background: var(--dark-bg);
  border-top-color: var(--dark-border);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-content p {
  color: var(--secondary-color);
  margin: 0;
}

.theme-toggle {
  display: flex;
  align-items: center;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.theme-icon {
  width: 16px;
  height: 16px;
  stroke: var(--light-text);
  stroke-width: 2;
  transition: stroke 0.3s ease;
  -webkit-user-select: none;
  user-select: none;
}

body.dark-mode .theme-icon {
  stroke: var(--dark-text);
}

.theme-icon-sun {
  stroke: var(--light-text);
}

body.dark-mode .theme-icon-sun {
  stroke: var(--dark-text);
  opacity: 0.6;
}

.theme-icon-moon {
  stroke: var(--secondary-color);
  opacity: 0.8;
}

body.dark-mode .theme-icon-moon {
  stroke: var(--dark-text);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.25rem;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--secondary-color);
  transition: 0.3s;
  border-radius: 1rem;
}

body.dark-mode .toggle-slider {
  background-color: var(--dark-border);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 1rem;
  width: 1rem;
  left: 0.125rem;
  bottom: 0.125rem;
  background-color: var(--light-text);
  transition: 0.3s;
  border-radius: 50%;
}

body.dark-mode .toggle-slider:before {
  background-color: var(--dark-text);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(1.25rem);
}

/* Background Patterns */
.main-content-bg {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23007aff' fill-opacity='0.08'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}

.subscribe-bg {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M20 20l10-10H10z'/%3E%3Cpath d='M20 20L10 30h20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px 40px;
}

.cta-section {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='%23000000' opacity='0.1'%3e%3c/rect%3e%3cpath d='M474.55 0C517.55 11.1 496.49 65.79 540 69.68C664.21 80.79 684.54 61.22 810 30C824.54 26.38 805.36 1.63 820 0C940.36 -13.37 950 0 1080 0C1215 0 1215 0 1350 0C1485 0 1485 0 1620 0C1755 0 1755 0 1890 0C2025 0 2092.5 -67.5 2160 0C2227.5 67.5 2160 135 2160 270C2160 385.72 2174.79 391.59 2160 501.43C2156.61 526.59 2123.65 521.56 2123.65 540C2123.65 556.86 2156.93 549.19 2160 572.03C2175.1 684.19 2160 691.01 2160 810C2160 916.37 2196.52 939.25 2160 1022.73C2137.46 1074.25 2104.47 1066.72 2041.88 1080C1969.47 1095.36 1965.94 1080 1890 1080C1755 1080 1755 1080 1620 1080C1485 1080 1485 1080 1350 1080C1215 1080 1215 1080 1080 1080C945 1080 945 1080 810 1080C675 1080 675 1080 540 1080C405 1080 405 1080 270 1080C135 1080 67.5 1147.5 0 1080C-67.5 1012.5 0 945 0 810C0 754.78 -23.63 699.55 0 699.55C34.22 699.55 51.93 762.65 115.71 810C186.93 862.87 201.84 900 270 900C313.09 900 338.21 861.24 338.21 810C338.21 700.52 312.76 689.35 270 578.57C260.65 554.35 257.26 551.72 234 540C122.26 483.69 69.62 522.83 0 442.5C-47.38 387.83 0 356.25 0 270C0 135 -67.5 67.5 0 0C67.5 -67.5 135 0 270 0C372.27 0 382.55 -23.74 474.55 0' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1080 260C1066.05 260 1061.79 259.64 1050 270C926.79 378.32 924.2 379.38 810 497.37C793.54 514.38 788.68 521.93 788.68 540C788.68 549.29 798.57 547.71 810 552.09C944.23 603.57 967.4 655.96 1080 651.72C1128.12 649.91 1129.72 599.28 1131.43 540C1135.23 408.42 1115.41 402.76 1091.02 270C1089.69 262.76 1086.56 260 1080 260' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M0 135C35.45 57.35 48.37 37.44 123.26 0C183.37 -30.06 196.63 0 270 0C321.13 0 332.51 -26.29 372.27 0C467.51 62.98 443.95 105.85 540 178.55C622.32 240.85 714.22 194.8 729 270C749.74 375.53 588.25 432.24 611.05 540C628.75 623.66 713.71 591.38 810 652.84C925.21 726.38 1034.04 717.12 1034.04 810C1034.04 927.32 948.11 1010.12 810 1073.25C701.09 1123.03 670.81 1033.27 540 1035.82C497.84 1036.64 506.13 1073.12 464.06 1080C371.13 1095.21 367.03 1080 270 1080C166.5 1080 63 1100.7 63 1080C63 1057.58 184.64 1060.31 270 993.75C357.77 925.31 367.43 913.77 409.26 810C458.88 686.9 492.8 643.13 452.9 540C423.17 463.13 363.78 489.6 270 450C137.33 393.98 106.04 419.44 0 348.75C-28.96 329.44 0 309.38 0 270C0 202.5 -26.18 192.35 0 135' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1080 135C1010.86 69.22 945 39.54 945 0C945 -27.96 1012.5 0 1080 0C1215 0 1215 0 1350 0C1469.12 0 1473 -10.97 1588.24 0C1608 1.88 1600.27 22.12 1620 25.71C1751.15 49.58 1759.31 63.81 1890 54.92C1948.31 50.95 1940.23 11.75 1998 0C2075.23 -15.71 2129.63 -50.63 2160 0C2210.63 84.38 2160 135 2160 270C2160 316.84 2183.16 326.03 2160 363.67C2100.09 461.03 1993.85 455.69 1993.85 540C1993.85 617.07 2106.68 599.78 2160 686.44C2189.75 734.78 2160 748.22 2160 810C2160 865.22 2197.48 891.44 2160 920.45C2062.48 995.95 1999.45 1048.45 1890 1019.03C1794.02 993.23 1782.56 925.64 1749.13 810C1713.33 686.13 1789.56 659.25 1751.54 540C1725 456.75 1683.37 405 1620 405C1560.6 405 1566.75 476.02 1506 540C1431.75 618.2 1421.78 689.36 1350 689.36C1288.07 689.36 1263.31 625.59 1238.57 540C1202.7 415.91 1274.25 386.14 1228.78 270C1194.97 183.64 1152.75 204.22 1080 135' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1163.08 1080C1163.08 1026.25 1253.13 895.91 1350 895.91C1455.07 895.91 1566.96 1027.78 1566.96 1080C1566.96 1119.82 1458.48 1080 1350 1080C1256.54 1080 1163.08 1118.3 1163.08 1080' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M51.43 270C51.43 166.93 160.72 0 270 0C379.28 0 488.57 166.93 488.57 270C488.57 338.36 379.28 342.86 270 342.86C160.72 342.86 51.43 338.36 51.43 270' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1080 10C1073.54 10 1070 2.93 1070 0C1070 -2.07 1075 0 1080 0C1102.5 0 1125 -2.47 1125 0C1125 2.53 1101.04 10 1080 10' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1677.86 270C1677.86 200.33 1784.62 169.32 1890 169.32C1989.69 169.32 2088 201.26 2088 270C2088 361.6 1990.89 490 1890 490C1785.82 490 1677.86 360.67 1677.86 270' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1345.71 540C1345.71 506.89 1347.43 472.5 1350 472.5C1352.57 472.5 1356 507.38 1356 540C1356 544 1352.76 545.74 1350 545.74C1347.62 545.74 1345.71 543.51 1345.71 540' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M480.32 810C480.32 733.68 479.21 662.9 540 652.5C644.05 634.69 679.32 694.85 810 753.58C854.53 773.6 890.43 776.66 890.43 810C890.43 852.12 865.15 888.27 810 904.5C689.94 939.82 654.4 945.88 540 913.09C489.56 898.63 480.32 863.98 480.32 810' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1980 810C1980 805.67 2074.35 800.85 2160 800.85C2164.35 800.85 2160 805.42 2160 810C2160 814.09 2163.91 818.18 2160 818.18C2073.91 818.18 1980 814.33 1980 810' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1266.92 1080C1266.92 1056.11 1306.94 998.18 1350 998.18C1396.7 998.18 1446.43 1056.79 1446.43 1080C1446.43 1097.7 1398.22 1080 1350 1080C1308.46 1080 1266.92 1097.02 1266.92 1080' stroke='rgba(66%2c 66%2c 69%2c 0.5)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Add padding to main element for smaller screens */
@media (max-width: 768px) {
  main {
    padding: 0 1rem;
  }

  .cta-section {
    margin: 3rem 0.5rem;
  }
}

/* Apple-style responsive breakpoints */
@media (min-width: 640px) {
  /* Small screens and up */
}

@media (min-width: 768px) {
  /* Medium screens and up */
  main {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  /* Large screens and up */
  main {
    padding: 0 4rem;
  }

  .hero-section {
    gap: 3rem;
  }

  .hero-title {
    font-size: 3.5rem;
  }

  .cta-section {
    padding: 4rem 2rem;
  }

  .cta-main h2 {
    font-size: 2rem;
  }
}

@media (min-width: 1280px) {
  /* Extra large screens and up */
}

@media (min-width: 1536px) {
  /* 2X large screens and up */
}

/* Legacy max-width queries for backward compatibility */
@media (max-width: 768px) {
  /* Header */
  .site-header {
    padding: 0.75rem 0;
  }

  .nav-container {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1rem;
    gap: 0;
  }

  .search-icon-btn {
    margin-left: auto;
    margin-right: 0;
  }

  .mobile-menu-btn {
    margin-left: 0;
  }

  .nav-logo {
    flex-shrink: 0;
  }

  .nav-logo img {
    height: 28px;
  }

  .nav-menu {
    display: none;
  }

  /* Mobile menu navigation styling */
  .mobile-menu-nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  .mobile-menu-nav li {
    display: flex;
    width: 100%;
  }

  .mobile-menu-nav a {
    color: var(--light-text);
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
    padding: 0.75rem 0;
    transition: color 0.2s ease;
    border-radius: 8px;
    width: 100%;
    text-align: left;
  }

  body.dark-mode .mobile-menu-nav a {
    color: var(--dark-text);
  }

  .mobile-menu-nav a:hover,
  .mobile-menu-nav a.nav-current {
    color: var(--primary-color);
    background: rgba(0, 118, 255, 0.05);
  }

  .nav-buttons {
    display: none;
  }

  /* Hero Section */
  .hero-section {
    margin: 4rem auto;
    padding: 0 1rem;
    flex-direction: column;
    text-align: left;
    gap: 2rem;
  }

  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .hero-intro {
    font-size: 1.2rem;
  }

  /* Posts Section */
  .posts-section {
    margin: 3rem auto;
    padding: 0 1rem;
  }

  .posts-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .post-card h2 {
    font-size: 1.3rem;
  }

  /* CTA Section */
  .cta-section {
    max-width: 800px;
    margin: 3rem auto;
    padding: 3rem 1rem;
    flex-direction: column;
    gap: 2rem;
  }

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

  .cta-main h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-align: left;
  }

  .cta-main p {
    text-align: left;
    font-size: 1.25rem;
  }

  .btn-subscribe-large {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }

  .cta-links {
    flex-direction: column;
    gap: 2rem;
    align-self: stretch;
    margin-top: 0;
  }

  .site-links,
  .social-links {
    min-width: unset;
  }

  .site-links h3,
  .social-links h3 {
    font-size: 1.1rem;
  }

  /* Footer */
  .site-footer {
    padding: 2rem 1rem;
  }

  .footer-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  /* Post Template */
  .post-main {
    padding: 3rem 1rem;
  }

  .post-title {
    font-size: 2.2rem;
  }

  .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .post-author {
    order: 2;
  }

  .post-details {
    order: 1;
    align-self: flex-end;
  }

  /* Page Template */
  .page-main {
    padding: 3rem 1rem;
  }

  .page-title {
    font-size: 2.2rem;
  }

  /* Search Modal */
  .search-modal-content {
    width: 95%;
    padding: 1rem;
  }

  .search-modal-header {
    padding: 1rem;
  }

  .search-modal-body {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .hero-title {
    font-size: 2rem;
  }

  .cta-main h2 {
    font-size: 1.5rem;
  }

  .post-title,
  .page-title {
    font-size: 1.8rem;
  }

  .btn-subscribe-large {
    align-self: flex-start;
  }

  .cta-links {
    gap: 1.5rem;
  }
}

/* Search Modal */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-modal.active {
  opacity: 1;
  visibility: visible;
}

.search-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.search-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 600px;
  background: var(--light-bg);
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

body.dark-mode .search-modal-content {
  background: var(--dark-bg);
}

.search-modal.active .search-modal-content {
  transform: translate(-50%, -50%) scale(1);
}

.search-modal-header {
  display: flex;
  align-items: center;
  padding: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark-mode .search-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.search-modal-form {
  flex: 1;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-icon {
  position: absolute;
  left: 1rem;
  width: 20px;
  height: 20px;
  color: var(--secondary-color);
  pointer-events: none;
}

#search-input {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border: none;
  background: transparent;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--light-text);
  outline: none;
}

body.dark-mode #search-input {
  color: var(--dark-text);
}

#search-input::placeholder {
  color: var(--secondary-color);
}

.search-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--secondary-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 1rem;
}

.search-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--light-text);
}

body.dark-mode .search-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dark-text);
}

.search-modal-body {
  padding: 2rem;
  max-height: 400px;
  overflow-y: auto;
}

.search-suggestions {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.suggestion-category h4 {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary-color);
}

.suggestion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.suggestion-tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.04);
  color: var(--secondary-color);
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

body.dark-mode .suggestion-tag {
  background: rgba(255, 255, 255, 0.08);
}

.suggestion-tag:hover {
  background: rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

body.dark-mode .suggestion-tag:hover {
  background: rgba(255, 255, 255, 0.12);
}

.recent-posts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.recent-post {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.recent-post:hover {
  background: rgba(0, 0, 0, 0.02);
}

body.dark-mode .recent-post:hover {
  background: rgba(255, 255, 255, 0.02);
}

.recent-post img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.recent-post-content h5 {
  margin: 0 0 0.25rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--light-text);
  line-height: 1.3;
}

body.dark-mode .recent-post-content h5 {
  color: var(--dark-text);
}

.recent-post-content p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--secondary-color);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Post Template Styles */
.post-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 6rem 2rem;
  min-height: 100vh;
}

.post-article {
  margin-bottom: 4rem;
}

.post-header {
  margin-bottom: 3rem;
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--light-text);
}

body.dark-mode .author-name {
  color: var(--dark-text);
}

.author-bio {
  font-size: 0.8125rem;
  color: var(--secondary-color);
}

.post-details {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--secondary-color);
}

.post-date {
  color: var(--secondary-color);
}

.reading-time {
  color: var(--secondary-color);
}

.post-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 2rem;
  letter-spacing: -0.025em;
  color: var(--light-text);
}

body.dark-mode .post-title {
  color: var(--dark-text);
}

.post-feature-image {
  margin: 2rem 0;
  border-radius: 12px;
  overflow: hidden;
}

.post-feature-image img {
  width: 100%;
  height: auto;
  display: block;
}

.post-excerpt {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--secondary-color);
  margin-bottom: 2rem;
  font-style: italic;
}

.post-content {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #1d1d1f;
  margin-bottom: 3rem;
}

body.dark-mode .post-content {
  color: #f5f5f7;
}

.post-content * {
  color: inherit;
}

.post-content h2,
.post-content h3,
.post-content h4 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--light-text);
}

body.dark-mode .post-content h2,
body.dark-mode .post-content h3,
body.dark-mode .post-content h4 {
  color: var(--dark-text);
}

.post-content p {
  margin-bottom: 1.5rem;
}

.post-content blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--secondary-color);
}

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

.post-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 3rem;
  margin-top: 3rem;
}

body.dark-mode .post-footer {
  border-top-color: var(--dark-border);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.post-tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--tertiary-color);
  color: var(--light-text);
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

body.dark-mode .post-tag {
  background: var(--secondary-color);
  color: var(--dark-text);
}

.post-tag:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-1px);
}

.post-author-bio {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  background: var(--tertiary-color);
  border-radius: 12px;
  margin-top: 2rem;
}

body.dark-mode .post-author-bio {
  background: var(--dark-border);
}

.author-bio-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.author-bio-content h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--light-text);
}

body.dark-mode .author-bio-content h3 {
  color: var(--dark-text);
}

.author-bio-content p {
  margin: 0 0 1rem 0;
  color: var(--secondary-color);
  line-height: 1.5;
}

.author-bio-content a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
}

.author-bio-content a:hover {
  text-decoration: underline;
}

.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
}

body.dark-mode .post-navigation {
  border-top-color: var(--dark-border);
}

.nav-prev,
.nav-next {
  flex: 1;
  padding: 1.5rem;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.2s ease;
  border: 1px solid var(--border-color);
}

body.dark-mode .nav-prev,
body.dark-mode .nav-next {
  border-color: var(--dark-border);
}

.nav-prev:hover,
.nav-next:hover {
  background: var(--tertiary-color);
  transform: translateY(-2px);
}

body.dark-mode .nav-prev:hover,
body.dark-mode .nav-next:hover {
  background: var(--dark-border);
}

.nav-prev {
  text-align: left;
}

.nav-next {
  text-align: right;
}

.nav-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary-color);
  margin-bottom: 0.5rem;
}

.nav-prev h4,
.nav-next h4 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--light-text);
}

body.dark-mode .nav-prev h4,
body.dark-mode .nav-next h4 {
  color: var(--dark-text);
}

/* Page Template Styles */
.page-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 6rem 2rem;
  min-height: 100vh;
}

.page-article {
  margin-bottom: 4rem;
}

.page-header {
  margin-bottom: 3rem;
  text-align: left;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 2rem;
  letter-spacing: -0.025em;
  color: var(--light-text);
}

body.dark-mode .page-title {
  color: var(--dark-text);
}

.page-feature-image {
  margin: 2rem 0;
  border-radius: 12px;
  overflow: hidden;
}

.page-feature-image img {
  width: 100%;
  height: auto;
  display: block;
}

.page-excerpt {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--secondary-color);
  margin-bottom: 2rem;
  font-style: italic;
}

.page-content {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #1d1d1f;
  margin-bottom: 3rem;
}

body.dark-mode .page-content {
  color: #f5f5f7;
}

.page-content * {
  color: inherit;
}

.page-content h2,
.page-content h3,
.page-content h4 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--light-text);
  text-align: left;
}

body.dark-mode .page-content h2,
body.dark-mode .page-content h3,
body.dark-mode .page-content h4 {
  color: var(--dark-text);
}

.page-content p {
  margin-bottom: 1.5rem;
  text-align: left;
}

.page-content blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--secondary-color);
}

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

.page-footer {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-color);
}

body.dark-mode .page-footer {
  border-top-color: var(--dark-border);
}

.page-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
  margin-top: 2rem;
  padding-top: 2rem;
}

body.dark-mode .page-author {
  border-top-color: var(--dark-border);
}

.page-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
}

body.dark-mode .page-author-avatar {
  border-color: var(--dark-border);
}

.page-author-content {
  flex: 1;
}

.page-author-content h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--light-text);
  line-height: 1.3;
}

body.dark-mode .page-author-content h3 {
  color: var(--dark-text);
}

.page-author-content p {
  margin: 0;
  color: var(--secondary-color);
  font-size: 0.875rem;
  line-height: 1.4;
}

.page-author-content a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
}

.page-author-content a:hover {
  text-decoration: underline;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background: var(--light-bg);
  box-shadow: none;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

body.dark-mode .mobile-menu-content {
  background: var(--dark-bg);
}

.mobile-menu.active .mobile-menu-content {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

body.dark-mode .mobile-menu-header {
  border-bottom-color: var(--dark-border);
}

.mobile-menu-logo img {
  height: 32px;
  width: auto;
}

.mobile-menu-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--light-text);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.dark-mode .mobile-menu-close {
  color: var(--dark-text);
}

.mobile-menu-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.dark-mode .mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mobile-menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem;
}

.mobile-menu-nav a {
  color: var(--light-text);
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 0.75rem 0;
  transition: color 0.2s ease;
  border-radius: 8px;
  width: 100%;
  text-align: left;
}

body.dark-mode .mobile-menu-nav a {
  color: var(--dark-text);
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a.nav-current {
  color: var(--primary-color);
  background: rgba(0, 118, 255, 0.05);
}

.mobile-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mobile-menu-nav hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 2rem 0;
  width: 100%;
}

body.dark-mode .mobile-menu-nav hr {
  border-top-color: var(--dark-border);
}

.mobile-menu-actions .btn-signin,
.mobile-menu-actions .btn-subscribe {
  width: 100%;
  max-width: 100vw;
  text-align: center;
  padding: 0.75rem 0;
  font-size: 0.9rem;
}

/* Responsive adjustments for mobile menu */
@media (max-width: 480px) {
  .mobile-menu-content {
    width: 280px;
  }
}

/* Mobile responsive subscribe form */
@media (max-width: 768px) {
  .gh-subscribe-fields {
    flex-direction: column;
    gap: 0.5rem;
  }

  .gh-subscribe-btn {
    width: 100%;
    padding: 1.25rem 2rem;
  }
}

/* Koenig editor width classes */
.kg-width-wide {
  max-width: 1040px;
  width: 100%;
}

.kg-width-full {
  max-width: none;
  width: 100vw;
}