/* static/css/custom.css */

/* Ensure the main overlay covers the whole screen and is fixed */
.lightboxOverlay {
    position: fixed !important; /* Force fixed position */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9998 !important; /* High z-index, but slightly below the lightbox itself */
    background-color: rgba(
        0,
        0,
        0,
        0.8
    ) !important; /* Ensure background opacity */
}

/* Ensure the lightbox container itself is fixed and centered */
.lightbox {
    position: fixed !important; /* Force fixed position */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* Center it */
    z-index: 9999 !important; /* Higher z-index than the overlay */
    outline: none !important;
}

/* Ensure images within lightbox are responsive and don't break layout */
.lightbox .lb-image {
    max-width: 90vw !important; /* Max width relative to viewport width */
    max-height: 90vh !important; /* Max height relative to viewport height */
    display: block !important;
    height: auto !important; /* Maintain aspect ratio */
    border-radius: 3px !important;
    border: 4px solid white !important; /* Example border */
}

/* Ensure data container (captions, close button) is properly positioned */
.lightbox .lb-dataContainer {
    width: 100% !important; /* Ensure it spans the width of the image */
}

/* Default styles for the gallery (can be moved from inline style) */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.gallery a {
    /* Style the link, not just the image, for better click targets */
    display: inline-block; /* Or block, depending on desired layout */
}
.gallery img {
    max-width: 200px; /* Default thumbnail size */
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    display: block; /* Removes extra space below image if 'a' is inline-block */
}
.gallery img:hover {
    transform: scale(1.05);
}

/* Example: For screens smaller than 600px */
@media (max-width: 600px) {
    .gallery img {
        max-width: 100px; /* Make thumbnails smaller on small screens */
    }
    .gallery {
        gap: 5px; /* Reduce gap on small screens */
    }
}

/* Example: For screens smaller than 400px - maybe 2 per row */
@media (max-width: 400px) {
    .gallery img {
        /* Adjust max-width so roughly two fit, considering gap.
          e.g., if container is ~380px wide, (380px - 5px_gap) / 2 = ~187px.
          But you might want them smaller.
       */
        max-width: calc(50% - 5px); /* Example: try to fit two per row */
    }
}

/* --- Markdown Table Styles --- */
/* Apply to tables generated from Markdown in the main content area */
/* The Ananke theme might have a specific class for the main content, e.g., .post-content or .content */
/* If these styles don't apply, you might need to inspect your page to find the correct parent class */
.content table, /* General content area */
.post-content table, /* Common class in many themes for article content */
article table {
    /* HTML5 article tag */
    width: 100%; /* Make tables full-width of their container */
    border-collapse: collapse; /* Collapse borders into a single line */
    margin-top: 1em; /* Space above the table */
    margin-bottom: 1em; /* Space below the table */
    font-size: 0.9em; /* Slightly smaller font for tables if desired */
}

.content th,
.post-content th,
article th,
.content td,
.post-content td,
article td {
    border: 1px solid #ccc; /* Border for all cells (header and data) */
    padding: 8px; /* Padding inside cells */
    text-align: left; /* Align text to the left by default */
}

.content th, /* Header cells specific styling */
.post-content th,
article th {
    background-color: #f2f2f2; /* Light grey background for header cells */
    font-weight: bold; /* Bold text for headers */
}

/* Optional: Add zebra striping for rows for better readability */
.content tbody tr:nth-child(even),
.post-content tbody tr:nth-child(even),
article tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Lighter grey for even rows */
}

.content tbody tr:hover, /* Hover effect for rows */
.post-content tbody tr:hover,
article tbody tr:hover {
    background-color: #e9e9e9; /* Slightly darker grey on hover */
}

/* In static/css/custom.css */
.language-selector ul {
    /* Add custom styles if needed */
}
.language-selector li a {
    text-decoration: none;
}
.language-selector li a.fw7 {
    /* Style for the active language */
    /* border-bottom: 2px solid white; */ /* Example: different underline */
}

/* Add button styling for back to home link */
.back-to-home-button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px; /* Add some space above the button */
    color: black;
    text-decoration: none;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-weight: bold;
    text-align: center;

    transition: background-color 0.3s ease;
}

.back-to-home-button:hover {
    color: black;
}

.back-to-home-button:visited {
    color: black;
}

/* Styling for the testimonial block */
.testimonial {
    background-color: #f9f9f9; /* A very light grey background */
    border-left: 5px solid #007bff; /* A blue left border, change color to match your site */
    padding: 1.5rem; /* More space inside */
    margin: 2rem 0; /* Space above and below */
    font-style: italic;
    color: #333;
    border-radius: 0 5px 5px 0; /* Slightly rounded corners */
}

/* Make the quote text itself look a bit nicer */
.testimonial p {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.6;
}

/* Styling for the author's name */
.testimonial-author {
    text-align: right;
    font-style: normal;
    font-weight: bold;
    color: #555;
    margin-top: 1rem;
}

/* Styling for the Google Reviews call-to-action block */
.reviews-callout {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2.5rem;
    text-align: center;
    margin: 3rem auto;
    max-width: 600px; /* Constrains width for a neat look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.reviews-callout .reviews-logo img {
    height: 30px; /* Adjust size as needed */
    margin-bottom: 1rem;
}

.reviews-callout h3 {
    margin-top: 0;
    font-size: 1.8em;
}

.reviews-callout p {
    font-size: 1.1em;
    color: #555;
}

.reviews-callout .reviews-button {
    display: inline-block;
    background-color: #4285f4; /* Official Google Blue */
    color: white !important; /* Use !important if theme CSS overrides color */
    padding: 12px 28px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 1.5rem;
    transition:
        background-color 0.2s ease-in-out,
        transform 0.2s ease;
}

.reviews-callout .reviews-button:hover {
    background-color: #3367d6;
    transform: translateY(-2px); /* Slight lift on hover */
}

/* Container for the grid of review buttons */
.reviews-grid {
  display: grid;
  /* Creates 3 columns of equal width on larger screens */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; /* The space between the buttons */
  margin: 2rem 0;
}

/* Styling for each individual button in the grid */
.grid-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: #4285F4; /* Google Blue */
  color: white !important;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  text-align: center;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.grid-button:hover {
  background-color: #3367D6;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* --- Responsive Styling for Mobile --- */
/* On screens smaller than 768px (tablets/phones), stack the buttons */
@media (max-width: 768px) {
  .reviews-grid {
    /* Switch to 2 columns on tablets */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .reviews-grid {
    /* Switch to 1 column on phones */
    grid-template-columns: 1fr;
  }
}

/*
 * FINAL ATTEMPT: Using a highly specific selector and the !important
 * flag to guarantee an override of the theme's text-align class.
 */

/* Main container for your text. */
main > article.cf {
  /* The !important flag ensures this rule wins against any other style */
  text-align: justify !important;
}

/* Style the H2 headings inside the content */
main > article.cf h2 {
  text-align: left !important; /* Keep headings left-aligned */
  font-weight: 300;
  font-size: 2.25rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

/* Style the paragraphs and list items */
main > article.cf p,
main > article.cf li {
  font-weight: 400;
  line-height: 1.7;
  font-size: 1.15rem;
}

/* Style the final call to action button if needed */
main > article.cf .back-to-home-button {
  margin-top: 2rem;
  display: inline-block;
}

/*
 * --- FINAL FIX for Single Page Fonts (Corrected Selector) ---
 * This version removes 'body.single' and targets the content container
 * class directly, which will work with your theme's structure.
 */

/*
 * This selector targets the paragraphs, lists, and table cells
 * inside the main content container of your apartment pages.
*/
.nested-copy-line-height p,
.nested-copy-line-height li,
.nested-copy-line-height td {
  /* The !important flag is still needed to override the theme's .serif class */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  font-size: 1.15rem !important;
  text-align: left !important;
}

/* Style the section headings (h2, h3, etc.) within that container */
.nested-copy-line-height h2,
.nested-copy-line-height h3 {
  font-weight: 300 !important;
  text-align: left !important;
  font-size: 2rem !important;
}