/* Site-wide styles, loaded after Bootstrap so they override it. The home page adds home.css. */

@font-face {
  font-family: 'opaline-nottela';
  src: url('../assets/fonts/opaline-nottela.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --primary-red: #FAD4D4;
  --primary-blue: #D4FAFA;
  --primary-grey: #FFFDF7;
  --secondary-grey: #FFF0F0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--primary-grey);
}

/* The image plugin wraps every <img> in a <picture>. Let the <img> lay out as if the wrapper weren't there,
   so selectors like `.row > img` and flex/grid layouts keep working. */
picture {
  display: contents;
}

/* ── Page shell ──────────────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.hover-button {
  background-color: var(--primary-red) !important;
  transition: all 0.3s;
  border-radius: 0.5rem;
  color: #000 !important;
  border: none;
}

.selected-button {
  background-color: var(--primary-blue) !important;
}

.hover-button:hover {
  background-color: var(--primary-blue) !important;
  transform: translateY(-2px);
}

.hover-button.active {
  background-color: var(--primary-blue);
  font-weight: bold;
}

/* Vertical divider */
.divider-vertical {
  width: 2px;
  background-color: #f1cfcf;
  height: 100%;
  min-height: 150px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  max-height: 200px; /* larger than the header will ever be */
}

/* Set by the home page script while the hero animation is playing. */
.navbar-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
}

/* Mega dropdowns, opened by hovering (or tabbing into) their nav item, and kept open while the pointer is
   over them. Closing waits a moment, so the pointer can cross the gap between the nav item and the panel. */
.site-header .dropdown {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--primary-blue);
  z-index: 1000;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
  visibility: hidden;
  transition: visibility 0s linear 0.15s;
}

.site-header:has([data-dropdown="recipes"]:hover, [data-dropdown="recipes"]:focus-within) #dropdown-recipes,
.site-header:has([data-dropdown="shop"]:hover, [data-dropdown="shop"]:focus-within) #dropdown-shop,
.site-header .dropdown:hover,
.site-header .dropdown:focus-within {
  visibility: visible;
  transition-delay: 0s;
}

/* Their nav items only exist on wider screens. Hidden panels still take up room, and the shop one is wider
   than a phone, so take them out of the layout entirely. */
@media (max-width: 767.98px) {
  .site-header .dropdown {
    display: none;
  }
}

/* Hovering one menu closes the other right away instead of letting them overlap. */
.site-header:has([data-dropdown="shop"]:hover) #dropdown-recipes,
.site-header:has([data-dropdown="recipes"]:hover) #dropdown-shop {
  visibility: hidden;
  transition-delay: 0s;
}

.dropdown-item-link {
  text-decoration: none;
  transition: transform 0.3s;
}

.dropdown-item-link:hover {
  transform: scale(1.05);
}

.dropdown-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

.dropdown-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.8rem;
  background-color: var(--primary-red);
  padding: 4px;
  color: #000;
}

.view-all-link {
  background: none;
  border: none;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Small screens: the ☰ <details> toggles the menu below it. */
.mobile-menu-toggle > summary {
  list-style: none;
}

.mobile-menu-toggle > summary::-webkit-details-marker {
  display: none;
}

/* The open menu is a full-width panel that drops down from the header, over the page, with its own backing
   so the links stay readable whatever is underneath. (Left in the header's flow, it would spill past the
   header's max-height and float over the page with nothing behind it.) */
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 1rem;
  background-color: #fff;
  border-bottom: 1px solid var(--secondary-grey);
  border-radius: 0 0 15px 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  z-index: 1001;
}

.container:has(> .mobile-menu-toggle[open]) > .mobile-menu {
  display: block;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.social-link {
  font-size: 2rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.social-link:hover {
  transform: translateY(-3px) scale(1.1);
}

/* ── Recipe listings ─────────────────────────────────────────────────────── */
.recipe-card-img {
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s;
}

.recipe-card:hover .recipe-card-img {
  transform: scale(1.1);
}

/* ── Recipe page ─────────────────────────────────────────────────────────── */
.recipe-img-limit {
  object-fit: cover;
  /* Square on desktop, but allows flexibility on smaller screens */
  aspect-ratio: 1 / 1;
}

@media (max-width: 768px) {
  .recipe-img-limit {
    /* Shorter on phones so images don't push text too far down */
    height: 25vh;
  }
}

.reel-container {
  width: 100%;
  /* Limits size on desktop so it stays a "vertical" reel */
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 15px;
  /* Black looks better while the video loads */
  background: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-height: 80vh;
}

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

@media (max-width: 576px) {
  .reel-container {
    max-width: 90%;
  }
}

/* ── Lifestyle listing ───────────────────────────────────────────────────── */
.lifestyle-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.57;
  object-fit: cover;
  transition: transform 0.3s;
}

.lifestyle-card:hover .lifestyle-card-img {
  transform: scale(1.1);
}

/* ── Lifestyle post ──────────────────────────────────────────────────────── */
.lifestyle-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

.content-container {
  line-height: 1.8;
}

.content-container h1 {
  margin: 30px 0 20px 0;
  color: #2c3e50;
  font-family: 'opaline-nottela', serif;
}

.content-container p {
  margin-bottom: 20px;
  color: #2c3e50;
  font-size: 1.1rem;
}

.content-link {
  display: inline-block;
  margin: 10px 0;
  padding: 10px 20px;
  background: #42b983;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
}

.content-link:hover {
  background: #35a372;
}

.image-gallery {
  display: flex;
  gap: 1.25rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}

.gallery-image {
  flex: 1;
  min-width: 5rem;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Single image */
.image-gallery:has(> :only-child) .gallery-image {
  aspect-ratio: 16 / 9;
}

/* Tablet and up: 2 images per row */
@media (min-width: 48rem) {
  .gallery-image {
    max-width: calc(50% - 0.625rem);
  }
}

/* Desktop: 3 images per row if 3+ images */
@media (min-width: 64rem) {
  .image-gallery:has(> :nth-child(3)) .gallery-image {
    max-width: calc(33.333% - 0.875rem);
  }
}

/* ── About ───────────────────────────────────────────────────────────────── */
.about-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
}

.about-greeting,
.about-signature {
  font-family: 'opaline-nottela', serif;
  color: #2d2d2d;
}

.about-greeting {
  font-size: 3.5rem;
}

.about-signature {
  font-size: 1.8rem;
  line-height: 1.3;
  margin-top: 1.5rem;
}

/* ── Shop ────────────────────────────────────────────────────────────────── */
.shop-logo {
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s;
}

.recipe-card:hover .shop-logo {
  transform: scale(1.1);
}

/* ── Comments ────────────────────────────────────────────────────────────── */
.comments {
  max-width: 45rem;
}

.comment {
  padding: 1rem 0;
  border-bottom: 1px solid var(--secondary-grey);
}

.comment-meta {
  margin-bottom: 0.25rem;
}

.comment-meta time {
  color: #6c757d;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

.comment-body p {
  margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
}

/* The comment service sends people back to #comment-<id> once their comment is up. */
.comment:target {
  background-color: var(--primary-blue);
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ...or to #comment-pending when it's waiting for approval. */
.comment-notice {
  display: none;
  background-color: var(--primary-blue);
  border-radius: 0.5rem;
  padding: 1rem;
}

.comment-notice:target {
  display: block;
}

.comment-form {
  background-color: var(--secondary-grey);
  border-radius: 15px;
  padding: 1.5rem;
}

/* The honeypot field: off-screen rather than display: none, which some bots know to skip. */
.comment-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}