h1 {
  /* Font Size: 42px (Primary Page Title) */
  font-size: 4.2rem;
  /* (10px * 4.2 = 42px) */
  font-weight: 800;
  /* Extra bold for maximum impact */
  line-height: 1.1;
  letter-spacing: -1px;
  text-shadow: none;
  text-decoration: none;
}
h2 {
  /* Font Size: 28px for a good balance between H1 and H3 */
  font-size: 2.8rem;
  /* (10px * 2.8 = 28px) */
  /* Weight: Clearly bold for visibility */
  font-weight: 700;
  /* Line Height: Compact for a short headline */
  line-height: 1.2;
  /* Letter Spacing: A slight compression */
  letter-spacing: -0.5px;
  /* Text Shadow: Usually omitted for high readability */
  text-shadow: none;
  /* Text Decoration: Only used if it's a link */
  text-decoration: none;
  /* Optional: Ensure a clean break */
}
h3 {
  /* Font Size: 22px - the next level down from H2 (28px) */
  font-size: 2.2rem;
  /* (10px * 2.2 = 22px) */
  /* Weight: Should still be bold for easy scanning */
  font-weight: 700;
  /* Line Height: Still compact, slightly looser than H2 */
  line-height: 1.3;
  /* Letter Spacing: Neutral for smaller sizes */
  letter-spacing: normal;
  /* Text Shadow: Usually omitted for high readability */
  text-shadow: none;
  /* Text Decoration: Only used if it's a link */
  text-decoration: none;
  /* Optional: Ensure a clean break */
}
h4 {
  /* Font Size: 20px - used for widget titles or minor sub-sections */
  font-size: 2rem;
  /* (10px * 2.0 = 20px) */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-shadow: none;
  text-decoration: none;
}
h5 {
  /* Font Size: 16px - used for card titles or small element headings */
  font-size: 1.6rem;
  /* (10px * 1.6 = 16px) */
  font-weight: 600;
  /* Semibold */
  line-height: 1.4;
  letter-spacing: normal;
  text-shadow: none;
  text-decoration: none;
}
h6 {
  /* Font Size: 14px - used for meta data or captions */
  font-size: 1.4rem;
  /* (10px * 1.4 = 14px) */
  font-weight: 500;
  /* Medium */
  line-height: 1.5;
  letter-spacing: 0.5px;
  /* Slightly looser tracking often helps small text */
  text-shadow: none;
  text-decoration: none;
  text-transform: uppercase;
  /* Optional: Good for utility text */
}
/* --- Tablet Styles (max-width: 991px) --- */
@media (max-width: 991px) {
  h1 {
    /* Font Size: 36px (Slightly reduced from desktop 42px) */
    font-size: 3.6rem;
    /* (10px * 3.6 = 36px) */
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.7px;
  }
  h2 {
    /* Font Size: 26px (Slightly reduced from desktop 28px) */
    font-size: 2.6rem;
    /* (10px * 2.6 = 26px) */
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.3px;
  }
  h3 {
    /* Font Size: 20px (Reduced from desktop 22px) */
    font-size: 2rem;
    /* (10px * 2.0 = 20px) */
    font-weight: 700;
    line-height: 1.3;
  }
  h4 {
    /* Font Size: 18px (Reduced from desktop 20px) */
    font-size: 1.8rem;
    /* (10px * 1.8 = 18px) */
    font-weight: 700;
    line-height: 1.4;
  }
  h5 {
    /* Font Size: 16px (Matches body text, relies on weight) */
    font-size: 1.6rem;
    /* (10px * 1.6 = 16px) */
    font-weight: 600;
    line-height: 1.4;
  }
  h6 {
    /* Font Size: 14px (Utility text) */
    font-size: 1.4rem;
    /* (10px * 1.4 = 14px) */
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.5px;
  }
}
/* --- Mobile Landscape/Portrait Styles (max-width: 767px) --- */
@media (max-width: 767px) {
  h1 {
    /* Result: 32px (Reduced for small screens) */
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
  }
  h2 {
    /* Result: 24px */
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.2px;
  }
  h3 {
    /* Result: 18px */
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
  }
  h4 {
    /* Result: 17px (Relying heavily on bold weight for separation) */
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.4;
  }
  h5 {
    /* Result: 16px (Standard body size, but bold) */
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
  }
  h6 {
    /* Result: 14px (Smallest readable size) */
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.5px;
  }
}
/* --- Mobile Portrait Styles (max-width: 478px) --- */
@media (max-width: 478px) {
  h1 {
    /* Result: 28px (Significant drop for phone portrait title) */
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
  }
  h2 {
    /* Result: 22px */
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.1px;
  }
  h3 {
    /* Result: 17px */
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.3;
  }
  h4 {
    /* Result: 16px (Matches standard body size, relying only on weight) */
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
  }
  h5 {
    /* Result: 15px (Slightly smaller than body size, still bold) */
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
  }
  h6 {
    /* Result: 14px (No change, this is the minimum legible size) */
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.5px;
  }
  .dineinlocal__latest-articles__description {
    padding: 0 2em;
  }
}
/* -- The root styles must go in the element of the structure with the name "Post content". --*/
.single-blog-post-archive__content {
  /* -- Heading styles -- */
  /* -- Content paragraphs styles -- */
  /* -- List styles -- */
  /* -- Image styles -- */
  /* -- Blockquote styles -- */
}
.single-blog-post-archive__content h2, .single-blog-post-archive__content h3, .single-blog-post-archive__content h4, .single-blog-post-archive__content h5, .single-blog-post-archive__content h6 {
  font-weight: 700;
  color: var(--dark);
  margin-bottom: var(--space-s);
}
.single-blog-post-archive__content h2 {
  font-size: var(--text-xl);
}
.single-blog-post-archive__content h3 {
  font-size: var(--text-l);
}
.single-blog-post-archive__content h4, .single-blog-post-archive__content h5, .single-blog-post-archive__content h6 {
  font-size: var(--text-m);
}
.single-blog-post-archive__content p {
  /* - Bold text styles - */
  /* - Anchor text styles - */
}
.single-blog-post-archive__content p strong {
  color: var(--dark);
}
.single-blog-post-archive__content p a {
  color: var(--dark);
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s ease;
}
.single-blog-post-archive__content p a:hover, .single-blog-post-archive__content p a:focus {
  color: var(--primary);
}
.single-blog-post-archive__content ul, .single-blog-post-archive__content ol {
  margin: var(--space-m) 0;
}
.single-blog-post-archive__content ul li:not(:last-child), .single-blog-post-archive__content ol li:not(:last-child) {
  margin-bottom: 8px;
}
.single-blog-post-archive__content figure {
  margin-bottom: var(--space-l);
}
.single-blog-post-archive__content figure:has(figcaption) figcaption {
  margin-top: var(--space-xs);
  color: var(--dark);
}
.single-blog-post-archive__content blockquote.wp-block-quote {
  font-family: inherit;
  font-size: var(--text-l);
  text-align: center;
  font-weight: 600;
  color: var(--light);
  border: none;
  background-color: var(--dark);
  padding: var(--space-3xl) var(--space-xl);
  margin-bottom: var(--space-l);
}
@media (max-width: 767px) {
  .single-blog-post-archive__content blockquote.wp-block-quote {
    padding: var(--space-3xl) var(--space-l);
  }
}
.single-blog-post-archive__content blockquote.wp-block-quote cite {
  margin: 0;
  color: var(--dark);
  opacity: 1;
  text-align: center;
  text-transform: inherit;
}
/* -- The root styles must go in the element of the structure with the name "Card". --*/
.card-single-post-faq__wrapper {
  /* Styles applied to elements multiplied by 4 and multiplied by 4 +1 */
}
.card-single-post-faq__wrapper:nth-child(4n), .card-single-post-faq__wrapper:nth-child(4n+1) {
  grid-column: span 7;
  /* Tablet Styles */
}
@media (max-width: 991px) {
  .card-single-post-faq__wrapper:nth-child(4n), .card-single-post-faq__wrapper:nth-child(4n+1) {
    grid-column: auto;
  }
}
.dineinlocal__latest-articles {
  margin: 2rem 0;
}
.card-dineinlocal__latest-articles__img {
  width: 100%;
  border-radius: 25px;
  /* Set position for the absolute overlay */
  position: relative;
  /* Ensure the image container handles its own overflow and positioning */
  overflow: hidden;
  /* Make the container clickable/interactive with a subtle change */
  cursor: pointer;
  /* Overlay Element (::after) */
  /* When the user hovers over the parent container (.image-card) */
}
.card-dineinlocal__latest-articles__img img {
  /* Apply a smooth transition to both transform properties (scale and rotate) */
  transition: transform 0.4s ease-in-out;
  /* Ensure the image fills the container */
  width: 100%;
  height: 100%;
  /* Keep the image sharp when scaling */
  object-fit: cover;
  /* Set the initial state (no rotation or scaling) */
  transform: scale(1) rotate(0deg);
  /* Improve rendering performance */
  will-change: transform;
}
.card-dineinlocal__latest-articles__img::after {
  content: "Local Guides";
  /* Text to display */
  position: absolute;
  /* Position the overlay in the bottom-right quarter (50% x 50% = 1/4 area) */
  bottom: 0;
  right: 0;
  width: 30%;
  height: 100%;
  /* 0.5 black transparency */
  background-color: rgba(0, 0, 0, 0.7);
  /* Style the text and center it */
  color: yellow;
  font-size: 1.25rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Initial state: transparent and not visible */
  opacity: 0;
  visibility: hidden;
  /* Smooth transition for fade-in */
  transition: opacity 0.3s ease-in-out, visibility 0.3s;
  /* Ensure it is above the image */
  z-index: 10;
}
.card-dineinlocal__latest-articles__img:hover {
  /* Reveal the overlay */
}
.card-dineinlocal__latest-articles__img:hover img {
  /* Zoom OUT (scale down to 95%) and rotate 5 degrees clockwise */
  transform: scale(1.1) rotate(2deg);
}
.card-dineinlocal__latest-articles__img:hover::after {
  opacity: 1;
  visibility: visible;
}
.card-body {
  margin: 0 1rem;
}
.card-dineinlocal__latest-articles__btn {
  margin: 0 1rem;
}
p {
  font-family: Merriweather;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.6rem;
  color: #363636;
}
.card-dineinlocal__latest-articles__btn {
  /* Font Size: 16px, matching standard readable body text */
  font-size: 1.6rem;
  /* Font Weight: Semibold to make it stand out */
  font-weight: 600;
  /* Color: Use the Accent color for high visibility */
  color: #C96C4E;
  /* Line Height: Normal, as this is typically inline */
  line-height: normal;
  /* Letter Spacing: Neutral */
  letter-spacing: normal;
  /* Decoration: Standard underline for links */
  text-decoration: underline;
  /* Smooth transition for the hover effect */
  transition: color 0.2s ease, transform 0.2s ease;
}
.card-dineinlocal__latest-articles__btn:hover {
  /* Slightly darker color on hover for feedback */
  color: #af5335;
  /* Optional: A very slight lift on hover for feedback */
  transform: translateY(-1px);
}
.faq__answer-heading {
  color: #C96C4E;
}
.card-dineinlocal-blog-section__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}