/* Remove the --- dash after post metadata */
.post-date::after,
.post-meta::after,
span.post-date::after {
  content: "" !important;
  display: none !important;
}

/* Style the byline (date, location, reading time) */
.post-meta,
.post-meta .post-date {
  font-size: 0.875rem;
  color: #999;
  font-weight: 400;
}

/* Darker text in dark mode */
@media (prefers-color-scheme: dark) {
  .post-meta,
  .post-meta .post-date {
    color: #888;
  }
}

[data-theme=dark] .post-meta,
[data-theme=dark] .post-meta .post-date {
  color: #888;
}

/* Post separator styling - thinner and grayer */
hr.post-separator {
  border: none;
  border-top: 0.5px solid #e5e5e5;
  margin: 0;
}

/* Darker separator in dark mode */
@media (prefers-color-scheme: dark) {
  hr.post-separator {
    border-top-color: #3a3a3a;
  }
}

[data-theme=dark] hr.post-separator {
  border-top-color: #3a3a3a;
}

/* Reduce top spacing on single pages (Projects, Restaurants, etc) */
.post {
  margin-top: 0 !important;
  padding-top: 40px !important;
}

.post-title {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

/* Fix post title size in lists (homepage and All Posts) */
.posts .post-title {
  font-size: 1rem !important;
}

/* Restaurant Cards Grid Layout */
.restaurant-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.restaurant-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  background: #fafafa;
}

/* Explicit light mode styles */
[data-theme=light] .restaurant-card {
  background: #fafafa;
  border-color: #e0e0e0;
}

[data-theme=light] .restaurant-name {
  color: #333;
}

[data-theme=light] .restaurant-cuisine {
  background: #f0f0f0;
  color: #555;
}

[data-theme=light] .restaurant-location {
  background: #e3f2fd;
  color: #1976d2;
}

[data-theme=light] .restaurant-dishes {
  color: #444;
}

[data-theme=light] .restaurant-dishes strong {
  color: #666;
}

[data-theme=light] .restaurant-notes {
  color: #666;
}

[data-theme=light] .restaurant-map {
  border-color: #e5e5e5;
}

.restaurant-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.restaurant-name {
  margin: 0 0 0.75rem 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
}

.restaurant-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.restaurant-cuisine {
  display: inline-block;
  background: #f0f0f0;
  color: #555;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.restaurant-location {
  display: inline-block;
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.restaurant-dishes {
  margin: 1rem 0;
  line-height: 1.6;
  color: #444;
}

.restaurant-dishes strong {
  color: #666;
  font-weight: 600;
}

.restaurant-notes {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 1rem 0;
}

.restaurant-map-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background: #28a745;
  color: white !important;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s ease;
}

.restaurant-map-btn:hover {
  background: #218838;
}

/* Dark mode support for restaurant cards */
@media (prefers-color-scheme: dark) {
  .restaurant-card {
    background: #1a1a1a;
    border-color: #3a3a3a;
  }

  .restaurant-name {
    color: #e0e0e0;
  }

  .restaurant-cuisine {
    background: #2a2a2a;
    color: #aaa;
  }

  .restaurant-location {
    background: #1a3a52;
    color: #64b5f6;
  }

  .restaurant-dishes {
    color: #ccc;
  }

  .restaurant-dishes strong {
    color: #aaa;
  }

  .restaurant-notes {
    color: #aaa;
  }

  .restaurant-card:hover {
    box-shadow: 0 4px 12px rgba(255,255,255,0.1);
  }
}

[data-theme=dark] .restaurant-card {
  background: #1a1a1a;
  border-color: #3a3a3a;
}

[data-theme=dark] .restaurant-name {
  color: #e0e0e0;
}

[data-theme=dark] .restaurant-cuisine {
  background: #2a2a2a;
  color: #aaa;
}

[data-theme=dark] .restaurant-location {
  background: #1a3a52;
  color: #64b5f6;
}

[data-theme=dark] .restaurant-dishes {
  color: #ccc;
}

[data-theme=dark] .restaurant-dishes strong {
  color: #aaa;
}

[data-theme=dark] .restaurant-notes {
  color: #aaa;
}

[data-theme=dark] .restaurant-card:hover {
  box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}

/* Interactive Map Styling */
.restaurant-map {
  width: 100%;
  height: 180px;
  border-radius: 6px;
  margin-bottom: 1rem;
  border: 1px solid #e5e5e5;
  overflow: hidden;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

.restaurant-map:hover {
  opacity: 0.85;
  transform: scale(0.995);
}

[data-theme=dark] .restaurant-map {
  border-color: #3a3a3a;
}

@media (prefers-color-scheme: dark) {
  .restaurant-map {
    border-color: #3a3a3a;
  }
}

/* Adjust map height on mobile */
@media (max-width: 768px) {
  .restaurant-map {
    height: 150px;
  }
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Table of Contents / Filter Styling */
.restaurant-toc a.toc-link {
  color: #007acc;
  text-decoration: none;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.restaurant-toc a.toc-link:hover {
  color: #005a9c;
  text-decoration: underline;
}

.restaurant-toc a.toc-link.active {
  font-weight: 600;
  color: #005a9c;
}

[data-theme=dark] .restaurant-toc a.toc-link {
  color: #5ba3d0;
}

[data-theme=dark] .restaurant-toc a.toc-link:hover {
  color: #7bb3d9;
}

[data-theme=dark] .restaurant-toc a.toc-link.active {
  color: #7bb3d9;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .restaurant-toc a.toc-link {
    color: #5ba3d0;
  }

  .restaurant-toc a.toc-link:hover {
    color: #7bb3d9;
  }

  .restaurant-toc a.toc-link.active {
    color: #7bb3d9;
    font-weight: 600;
  }
}

/* Add some spacing to section headings for scroll anchors */
.post-content h1[id] {
  scroll-margin-top: 2rem;
}

/* Remove extra padding from .posts container to align with other content */
.posts {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Mobile content padding to prevent edge-to-edge layout */
@media (max-width: 768px) {
  .content,
  .post,
  .posts {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Ensure header/navigation stays full width but add padding to inner elements */
  header,
  .header {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Add padding to navigation menu items */
  nav,
  .navigation,
  .menu {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Ensure logo/brand has padding */
  .logo,
  .brand {
    padding-left: 0.75rem !important;
  }
}