/* Base theme variables and defaults */
:root {
  /* core colors */
  --bg: #0a0a0a;
  --text: #eee;
  --accent: #e60000;
  --accent-rgb: 230,0,0;
  --accent-contrast: #0a0a0a; /* used for text on accent backgrounds */
  --card-bg: #111;
  --card-alt: #1a1a1a;
  --muted: #ccc;
  --muted-2: #999;
  --link: white;
  --link-hover: black;
  --footer-bg: #000;
  --icon-color: red;
  --header-bg: rgba(0,0,0,0.6); /* default header text background (for dark themes) */
  --header-text: var(--text);   /* default header text color */
}

/* Theme overrides */
/* Red theme */
:root[data-theme="red"] {
  --accent: #ff4c4c;          /* slightly brighter red */
  --accent-rgb: 255,76,76;
  --accent-contrast: #ffffff;  /* white text on red */
  --bg: #1a0a0a;              /* slightly lighter black background */
  --text: #f0eaea;            /* softer text color */
  --card-bg: #2a0a0a;
  --card-alt: #3a0a0a;
  --muted: #d0bcbc;
  --muted-2: #a78f8f;
  --link: #ffcccc;
  --link-hover: #ff4c4c;
  --icon-color: #ff4c4c;
  --header-bg: rgba(26,10,10,0.8);
  --header-text: #f0eaea;
}

/* Naby theme */
:root[data-theme="navy"] {
  --accent: #0074d9; /* bright blue accent for navy theme */
  --accent-rgb: 0,116,217;
  --accent-contrast: #ffffff;
  --bg: #001f3f;
  --text: #f7fbff;
  --card-bg: #00182e;
  --card-alt: #002338;
  --muted: #cfe6ff;
  --muted-2: #99bfe8;
  --link: #f7fbff;
  --link-hover: #00182e;
  --icon-color: #0074d9;
}

/* Gray theme */
:root[data-theme="gray"] {
  --accent: #444444;
  --accent-rgb: 68,68,68;
  --accent-contrast: #ffffff;
  --bg: #080808;
  --text: #eaeaea;
  --card-bg: #151515;
  --card-alt: #1b1b1b;
  --muted: #cfcfcf;
  --muted-2: #9a9a9a;
  --link: #eaeaea;
  --link-hover: #111111;
  --icon-color: #888;
}

/* Lime theme  */
:root[data-theme="lime"] {
  --accent: #a6d608;           /* fresh lime green */
  --accent-rgb: 166,214,8;
  --accent-contrast: #000000;   /* black text on lime */
  --bg: #1a1f0a;               /* dark olive background */
  --text: #f2f5e6;             /* light text for contrast */
  --card-bg: #2a3014;
  --card-alt: #353918;
  --muted: #cfcf99;
  --muted-2: #999f66;
  --link: #d4e170;
  --link-hover: #a6d608;
  --icon-color: #a6d608;
  --header-bg: rgba(26,31,10,0.8);
  --header-text: #f2f5e6;
}

/* Base styles */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

a{
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "Merriweather Sans", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.8;
}

.site-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
}

main {
  width: 100%;
  padding: 2rem 5vw;
  box-sizing: border-box;
  flex: 1 0 auto;
}

/* pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}

.pagination-link {
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.pagination-link:hover {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent-contrast);
}

/* theme-selector */
.theme-selector {
  display: flex;
  gap: 1rem;
  margin: 2rem auto;
  justify-content: center;
  flex-wrap: wrap;
}

.theme-option {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.theme-option:hover {
  transform: scale(1.2);
  box-shadow: 0 0 5px 2px rgba(var(--accent-rgb), 0.5);
}

/* active option */
.theme-option.active {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
  border-color: var(--accent);
}

/* Theme option swatches (visual only) */
.theme-option[data-theme="red"] {
  background-color: #e60000;
}

.theme-option[data-theme="navy"] {
  background-color: #001f3f;
}

.theme-option[data-theme="gray"] {
  background-color: #333;
}

.theme-option[data-theme="lime"] {
  background-color: #cfe8a9;
}

/* Header Section */
.page-header {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 30px;
  background-color: var(--bg);
}

.page-title {
  margin: 0;
  color: var(--accent);
  font-size: 2.5rem;
}

/* Home & Back Buttons */
.home-button,
.back-button {
  color: var(--accent);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.home-button:hover,
.back-button:hover {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent-contrast);
}

/* Header / Hero area */
.header-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bg);
}

.header-gif {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  display: block;
}

.header-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 2.5px), -50%);
  color: var(--header-text);
  background: var(--header-bg);
  padding: 20px 30px;
  border-left: 5px solid var(--accent);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header-logo {
  height: 10vh;
  width: auto;
  margin-bottom: 10px;
  display: block;
}

@media (max-width: 600px) {
  .header-gif {
    max-height: 250px;
  }

  .header-text {
    padding: 15px 20px;
    transform: translate(calc(-50% - 2.5px), -50%);
    font-size: 0.9rem;
  }

  .header-logo {
    height: 7vh;
    margin-bottom: 8px;
  }
}

/* Blog Listing & Previews */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 2rem 0;
}

.blog-preview {
  border-left: 5px solid var(--accent);
  background-color: var(--card-bg);
  padding: 2rem;
  border-radius: 6px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.blog-preview:hover {
  background-color: var(--card-alt);
  transform: scale(1.01);
}

.blog-preview h2 {
  margin-top: 0;
  color: var(--accent);
  font-size: 2rem;
}

.blog-preview a {
  text-decoration: none;
  color: var(--accent);
}

.blog-preview .blog-date {
  color: var(--muted-2);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.blog-preview .blog-excerpt {
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.read-more {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.read-more:hover {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent-contrast);
}

/* Blog post */
.post-content {
  background: rgba(var(--accent-rgb), 0.6);
  border-radius: 10px;
  padding: 2rem;
  margin: 2rem auto;
  color: var(--text);
  line-height: 1.8;
  box-sizing: border-box;
  width: 40%;
  max-width: 800px;
}

/* Links inside post content */
.post-content a {
  color: var(--link-hover); /* uses contrast color for emphasis */
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  border-radius: 6px;
  padding: 2px 6px;
  position: relative;
}

/* Add a 🔗 emoji before the link text */
.post-content a::before {
  content: "🔗 ";
  font-size: 1rem;
  vertical-align: middle;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* Hover effect for links */
.post-content a:hover {
  color: var(--link);
  background-color: var(--link-hover);
}

/* Make the icon brighter on hover */
.post-content a:hover::before {
  opacity: 1;
}

.post-date {
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
  border-left: 4px solid var(--accent);
  padding-left: 10px;
  display: inline-block;
}

/* --- Images inside posts --- */
.post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 8px;
}
/* --- Inline code --- */
.post-content code {
  font-family: "Courier New", Courier, monospace;
  font-style: italic;
  font-size: 0.95em;
  border-radius: 6px;
  padding: 0.2em 0.4em;
  background: rgba(0, 0, 0, 0.2); /* default (for red/navy/light themes) */
  color: var(--text);
  word-wrap: break-word;
}

/* Light variant for gray theme */
[data-theme="gray"] .post-content code {
  background: rgba(255, 255, 255, 0.2);
}

/* --- Code blocks (``` ... ```) --- */
.post-content pre {
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  border-radius: 10px;
  padding: 1rem;
  margin: 1.5rem 0;
  font-family: "Courier New", Courier, monospace;
  line-height: 1.5;
  white-space: pre-wrap;     
  word-wrap: break-word;    
  overflow-x: hidden;       
}

/* Adjust code block background for gray theme */
[data-theme="gray"] .post-content pre {
  background: rgba(255, 255, 255, 0.2);
}

/* Remove background from nested code to avoid double styling */
.post-content pre code {
  background: none;
  padding: 0;
  font-style: italic;
  white-space: inherit;       /* inherit wrapping from <pre> */
}

/* Mobile-specific override */
@media (max-width: 1023px) {
  .post-content {
    width: 90%;
    max-width: 90%;
  }
}

/* Tiles Section */
.tiles-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 40px 20px;
  background: rgba(var(--accent-rgb), 0.12);
}

.tile {
  position: relative; /* for clickable area */
  background: var(--card-alt);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0; /* Removed padding to ensure no extra margin around the tile */
  flex: 1 1 300px;
  max-width: 300px;
  height: 300px;
  box-sizing: border-box;
  color: var(--muted);
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center the content */
  align-items: center; /* Horizontally center the content */
}

.tile:hover {
  transform: scale(1.03);
  border-color: var(--accent-contrast);
  background-color: var(--accent);
  color: var(--accent-contrast);
}

.tile:hover h2,
.tile:hover p {
  color: var(--accent-contrast);
}

.tile h2 {
  color: var(--accent);
  margin-bottom: 10px;
}

.tile p {
  color: var(--muted);
  margin-bottom: 20px; /* adjusted for no button space */
}

/* Tile link (making the entire tile clickable) */
.tile-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  text-decoration: none;
  color: inherit; /* inherit color from the tile */
  padding: 20px; /* Ensure padding inside the tile */
  box-sizing: border-box; /* Include padding in size calculation */
  display: flex;
  justify-content: center; /* Center the content inside the tile */
  align-items: center; /* Center the content vertically */
}

/* Hover effect for the tile link */
.tile-link:hover {
  background-color: rgba(var(--accent-rgb), 0.85);
}

/* Disabled tile link (for disabled tiles) */
.tile-link.disabled {
  background-color: rgba(var(--accent-rgb), 0.2); /* Darker, transparent shade */
  cursor: not-allowed;
  pointer-events: none; /* Disable clicks */
  color: var(--muted); /* Use muted color for disabled text */
  position: absolute; /* Ensure it's full-size */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-color: #ccc; /* Lighter border for disabled tiles */
  background: rgba(var(--accent-rgb), 0.12); /* Ensure this applies over the entire tile */
  padding: 0; /* Ensure no padding around the content */
  display: flex; /* Allow content to center properly */
  justify-content: center; /* Center the content inside */
  align-items: center; /* Center the content vertically */
}

/* Lock emoji for disabled tile, 50% of tile width */
.tile-link.disabled::before {
  content: "🔒"; /* Lock emoji */
  width: 50%; /* Make the lock 50% of the tile's width */
  height: 50%; /* Make the lock 50% of the tile's height */
  font-size: 5rem; /* Use a larger font size to scale the emoji */
  color: rgba(255, 255, 255, 0.5); /* White color with 50% opacity */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center it within the tile */
  pointer-events: none; /* Ensure lock emoji doesn’t interfere with hover or clicks */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tiles-section {
    flex-direction: column;
    align-items: center;
  }

  .tile-link {
    left: 10px;
    right: 10px;
    width: auto;
  }

  .tile {
    width: 100%;
    max-width: 90%;
    height: auto;
  }

  .tile p {
    margin-bottom: 0;
  }
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  background-color: var(--footer-bg);
  color: var(--muted-2);
  font-size: 0.9em;
}

.footer-col-2 {
  text-align: center;
}

.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.social-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  transition: color 0.3s ease;
  color: var(--icon-color);
}

.social-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.social-icon.hover-white:hover {
  color: var(--link);
}

/* Carousel */
.carousel-container {
  position: relative;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vh 0;
  overflow: hidden;
}

.carousel-viewport {
  width: calc(80vh * 2 / 3);
  height: 80vh;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
  margin-left: 0;
  gap: 2vw;
}

.carousel-card {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  padding: 0 1vw;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  border-left: 5px solid var(--accent);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease;
}

/* Hover effect for carousel card */
.carousel-card:hover {
  transform: scale(1.03);
  background-color: var(--accent);
  color: var(--accent-contrast);
}

.carousel-image {
  width: 100%;
  height: 70%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
  margin: 0;
}

.carousel-text {
  margin-top: 2vh;
  font-size: 2vh;
}

.carousel-card.disabled {
  background-color: rgba(var(--accent-rgb), 0.2); /* Darker background for disabled slides */
  cursor: not-allowed;
  pointer-events: none; /* Disable click events */
}

/* Lock emoji for disabled slides */
.carousel-lock {
  font-size: 5rem; /* Lock emoji size */
  color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the lock emoji */
  pointer-events: none; /* Ensure it doesn't block clicks */
}

/* The link that wraps the entire clickable card */
.carousel-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  text-decoration: none;
  color: inherit; /* inherit text color */
  z-index: 1; /* Ensure the link is above background, but below lock for disabled tiles */
}

/* Arrow buttons */
.arrow-button {
  background: rgba(0, 0, 0, 0.6);
  border-left: 5px solid var(--accent);
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  font-size: 4vh;
  padding: 1vh 1.5vh;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  z-index: 2;
}

/* Hover for all arrow buttons */
.arrow-button:hover {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent-contrast);
}

/* Carousel-specific arrows */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.carousel-btn.left {
  left: 2vw;
}

.carousel-btn.right {
  right: 2vw;
  border-left: none;
  border-right: 5px solid var(--accent);
}

/* Lightbox-specific arrows */
.carousel-btn-lightbox {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  border-left: 5px solid var(--accent);
  border-radius: 5px;
  color: var(--text);
  font-size: 5vh;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5em;
  height: 6em;
  user-select: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  padding: 0;
  line-height: 1;
  text-align: center;
}

/* Remove border-left for right button, add border-right */
.carousel-btn-lightbox.next {
  border-left: none;
  border-right: 5px solid var(--accent);
}

/* Positioning */
.carousel-btn-lightbox.prev {
  top: 50%;
  left: 1em;
  transform: translateY(-50%);
}

.carousel-btn-lightbox.next {
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
}

/* Hover effect */
.carousel-btn-lightbox:hover {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent-contrast);
}

#lightbox-img {
  max-width: 90%;
  max-height: 80vh;
  transition: transform 0.3s ease;
  transform-origin: center center;
  cursor: zoom-in;
  user-select: none; /* Prevent accidental text/image selection */
  touch-action: none; /* Allow custom touch dragging */
}


/* Lightbox Top Bar */
.lightbox-top-bar {
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between; /* Buy left, Close right */
  align-items: center;
  padding-left: 1.5em;
  padding-right: 2.5em; /* Extra space so close button isn’t cut off */
  width: 100%;
  box-sizing: border-box;
  z-index: 3;
}

/* Ensure buttons don’t overlap or get cut */
.lightbox-top-bar button {
  flex-shrink: 0;
  position: relative;
  z-index: 4;
}

/* Shared button style (overrides old absolute rules) */
.lightbox-close,
.lightbox-buy {
  position: static !important;
  background: rgba(var(--accent-rgb), 0.9);
  border: none;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  color: var(--accent-contrast);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  user-select: none;
  line-height: 1;
  font-size: 3vh;
}

.lightbox-close:hover,
.lightbox-buy:hover {
  background-color: var(--accent);
  color: var(--accent-contrast);
}

/* On mobile/touch devices: both move to top-right */
@media (hover: none), (pointer: coarse) {
  .lightbox-top-bar {
    justify-content: flex-end;
    gap: 0.5rem;
    padding-right: 1.5em; /* slightly smaller on mobile */
  }

  .lightbox-buy,
  .lightbox-close {
    font-size: 2.5vh;
    padding: 0.4em 0.8em;
  }
  
  .custom-lightbox {
    flex-direction: column;
    align-items: center;
  }

  .carousel-btn-lightbox.prev,
  .carousel-btn-lightbox.next {
    position: static;
    transform: none;
    width: 80%;
    max-width: 300px;
    height: 4.5em;
    margin: 1rem 0;
    font-size: 2.5rem;
    padding: 0.7rem 0;
    border-radius: 8px;
    border-left: 5px solid var(--accent);
    border-right: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .carousel-btn-lightbox.next {
    border-left: 5px solid var(--accent);
    border-right: none;
  }
}

/* Gallery / Lightbox */
.gallery-tile {
  display: block;
  width: 30%;
  min-width: 250px;
  margin: 10px;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 6px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.gallery-thumb {
  width: 100%;
  padding-top: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
}

.gallery-tile:hover {
  transform: scale(1.03);
  background-color: var(--accent);
  border-color: var(--accent-contrast);
}

.custom-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 2vh;
}

.custom-lightbox.hidden {
  display: none;
}

.custom-lightbox img {
  max-width: 90%;
  max-height: 70vh;
  border: 5px solid var(--accent);
  border-radius: 6px;
}

/* Blog section */

/* Search bar styling */
.search-bar {
  width: 100%;
  max-width: 700px;
  display: block;
  margin: 2rem auto;
  padding: 0.75rem 1rem;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1.25rem;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background-color: var(--card-alt);
  color: var(--text-color);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-bar:focus {
  outline: none;
  border-color: var(--accent-contrast);
  box-shadow: 0 0 6px var(--accent);
}

/* Blog post cards list */
.blog-list-cards {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Each blog card */
.blog-card {
  background: var(--card-alt);
  border: 1px solid var(--accent);
  border-radius: 6px;
  overflow: hidden; /* ensures hover border doesn’t bleed */
  transition: transform 0.3s ease, background-color 0.3s ease,
              border-color 0.3s ease, color 0.3s ease;
}

/* The clickable link wrapper */
.blog-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 20px;
  height: 100%;
}

/* Hover state for entire card */
.blog-card:hover {
  transform: scale(1.03);
  border-color: var(--accent-contrast);
  background-color: var(--accent);
  color: var(--accent-contrast);
}

/* Ensure text color switches on hover */
.blog-card:hover .blog-card-title,
.blog-card:hover .blog-card-date,
.blog-card:hover .tag {
  color: var(--accent-contrast);
}

/* Card title styling */
.blog-card-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: inherit;
  margin: 0;
}

/* Date styling */
.blog-card-date {
  display: block;
  color: var(--muted-2);
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* Tags */
.blog-card-tags {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--accent);
  background: var(--card-bg);
  transition: all 0.3s ease;
}

.blog-card:hover .tag {
  border-color: var(--accent-contrast);
  background: var(--accent-contrast);
  color: var(--accent);
}


/* Books section */
.book-tile {
  background: var(--card-alt);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 20px;
  flex: 1 1 300px;
  max-width: 300px;
  height: auto;
  box-sizing: border-box;
  text-align: center;
  color: var(--muted);
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.book-thumb {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 400px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.book-description p {
  color: var(--muted);
  margin-bottom: 15px;
  font-size: 1rem;
}

.book-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--accent);
  color: var(--accent-contrast);
  text-decoration: none;
  font-size: 1rem;
  border-radius: 4px;
  font-weight: bold;
  font-family: inherit;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: none;
  cursor: pointer;
}

.book-button:hover {
  background-color: var(--accent-contrast);
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* Reset default button styles */
button.book-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: inherit;
  color: inherit;
  font: inherit;
  border: none;
  padding: inherit;
  cursor: pointer;
}

.book-content-column button.book-button {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-radius: 4px;
  margin-bottom: 2rem;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media (max-width: 768px) {
  .book-tile {
    max-width: 100%;
    width: 90%;
  }

  .book-thumb {
    height: 300px;
  }
}

/* Book detail */
.book-detail-wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.book-image-column {
  flex: 1;
  position: relative;
  background-color: var(--footer-bg);
}

.book-full-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-content-column {
  flex: 1;
  padding: 3rem;
  background-color: var(--card-bg);
  color: var(--text);
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.book-content-column h1 {
  color: var(--accent);
  font-size: 3rem;
  margin-bottom: 1rem;
}

.book-content-column p {
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.book-content-column .book-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--accent);
  color: var(--accent-contrast);
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin-bottom: 2rem;
}

.book-content-column .book-button:hover {
  background-color: var(--accent-contrast);
  color: var(--accent);
  border: 1px solid var(--accent);
}

.book-content {
  font-size: 1rem;
  color: var(--muted);
}

/* Responsive layout for small screens */
@media (max-width: 768px) {
  .book-detail-wrapper {
    flex-direction: column;
    height: auto;
  }

  .book-image-column {
    height: 50vh;
  }

  .book-content-column {
    padding: 2rem 1rem;
  }

  .book-full-image {
    height: 100%;
    object-fit: cover;
  }
}

/* Kindle Instant Preview */
/* Modal styles */
.preview-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
}

.preview-content {
  width: 80%;
  height: 80%;
  margin: 5% auto;
  background: white;
  padding: 10px;
}

.preview-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.close-button {
  font-family: "Merriweather Sans", sans-serif;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10000;
}

/* RSS SUBSCRIBE */
.copy-button {
  font-family: "Merriweather Sans", sans-serif;
  margin-top: 1vh;
  padding: 1.5vh 3vh;
  font-size: 2vh;
  background-color: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: 0.8vh;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.copy-button:hover {
  background-color: var(--accent-contrast);
  color: var(--accent);
}

/* ABOUT */
.about-button {
  font-family: "Merriweather Sans", sans-serif;
  color: var(--link);
  background-color: transparent;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
}

/* DISABLED PAGE */
.disabled-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
  text-align: center;
  font-size: 2rem;
  color: var(--muted);
}

.disabled-page h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Share buttons container */
.share-buttons {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.share-buttons p {
  margin-right: 1rem;
  font-weight: bold;
}

/* Share buttons to look like links */
.share-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 2px solid var(--accent);
  border-radius: 6px;
  text-decoration: none;
  font-size: 1rem;
  color: var(--link-hover); /* Same color as links */
  background-color: transparent; /* No background to make it look like a link */
  transition: all 0.3s ease;
}

/* Hover effect for share buttons */
.share-btn:hover {
  color: var(--link);
  background-color: var(--link-hover); /* Same hover effect as links */
  border-color: var(--link-hover); /* Same border effect as links */
}

/* Add a 🔗 emoji before the share button text */
.share-btn::before {
  content: "🔗 ";
  font-size: 1rem;
  vertical-align: middle;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* Make the icon brighter on hover */
.share-btn:hover::before {
  opacity: 1;
}

/* Specific styling for the copy link button */
.share-btn.copy-link {
  cursor: pointer;
  font-family: inherit;  /* Inherit font family from .share-btn */
  font-size: inherit;    /* Inherit font size from .share-btn */
  padding: inherit;      /* Inherit padding from .share-btn */
  border: inherit;       /* Inherit border style from .share-btn */
  background-color: inherit; /* Inherit background color */
  color: var(--link-hover); /* Ensure the color matches other share buttons */
}

/* Adjust copy link button hover state */
.share-btn.copy-link:hover {
  color: var(--link);
  background-color: var(--link-hover);
  border-color: var(--link-hover);
}

/* Ensure proper visibility of share buttons and links */
.share-btn > a {
  color: inherit; /* Inherit color to make sure anchor tags look consistent */
  text-decoration: none; /* No underlining */
}