/* Global responsive utilities for Love Amaiah */
:root {
  --la-accent: #4B2E0E;
  --la-brown: #C4A07A;
  --la-white: #fff;
}

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }

/* Shared top-bar variants hookable by pages */
.top-bar { display:flex; justify-content: space-between; align-items:center; }
.logo-container { display:flex; align-items:center; gap:.75rem; }
.logo-container img { height:48px; width:48px; border-radius:50%; object-fit:cover; }
.logo-container span { font-weight: 800; }
.menu-toggle { display:none; }

@media (max-width: 1024px) {
  .top-bar { justify-content: space-between; }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); color:#fff; }
}

/* Container helpers */
.container, .main-content { padding-left: 5vw; padding-right: 5vw; }
@media (max-width: 768px) {
  .container, .main-content { padding-left: 1rem; padding-right: 1rem; }
  /* Compact sidebar spacing on tablets/phones */
  .la-sidebar { padding-left: 12px !important; padding-right: 12px !important; }
}

/* (Removed collapsible sidebar styles) */

/* Form elements on dark backgrounds */
.input-dark {
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  padding: 12px 14px;
  color: #111;
}
.input-dark::placeholder { color: rgba(17,17,17,0.55); }

/* Buttons */
.btn-la {
  background: var(--la-brown);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 700;
  transition: filter .2s ease, transform .1s ease;
}
.btn-la:hover { filter: brightness(1.05); }
.btn-la:active { transform: scale(0.98); }

/* Simple grid helper */
.grid-auto { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }

/* Footer spacing tune on small screens */
@media (max-width: 480px) {
  .footer-content { padding-left: 1rem; padding-right: 1rem; }
}

/* Highlight cards (rounded horizontal cards used on coffee.php) */
.scroll-gallery { display:flex; gap: 14px; overflow-x: auto; padding: 6px 2px 12px; scroll-snap-type: x proximity; }
.scroll-gallery > div { scroll-snap-align: start; flex: 0 0 auto; }
.scroll-gallery img { display:block; width:100%; height:220px; object-fit:cover; border-radius:inherit; }
.scroll-gallery .la-caption { position:absolute; left:14px; bottom:14px; color:#fff; font-weight:800; padding:.6rem 1rem; background:linear-gradient(180deg,transparent,rgba(0,0,0,.48)); border-radius:10px; }

/* Ensure the section heading and subtitle spacing is consistent */
.section-title { color: #fff; font-weight:800; }
.section-sub { color: rgba(255,255,255,0.92); }

@media (max-width: 768px) {
  .scroll-gallery img { height:180px; }
  #story .section-sub { max-width:100%; }
}

/* Visit / Map preview styles */
.visit-grid { display:grid; grid-template-columns: minmax(380px,1.9fr) minmax(340px,1fr); gap:2rem; align-items:center; }
.visit-map-wrap { border-radius:20px; overflow:hidden; box-shadow:0 10px 36px rgba(0,0,0,.45); max-width:100%; }
/* Slightly narrower container so map takes more visible space but text stays readable */
.visit-grid { max-width:1280px; margin-left:auto; margin-right:auto; }
.visit-map-link { display:block; width:100%; height:100%; }
.visit-map-wrap { position:relative; }
.visit-map-img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* Make preview box maintain a consistent aspect and not overflow */
/* Prefer native aspect-ratio when available, fallback to padding trick */
.visit-map-wrap { position: relative; }
.visit-map-wrap { aspect-ratio: 4 / 3; }
.visit-map-wrap::before { content: ""; display:block; padding-top:75%; /* fallback for browsers without aspect-ratio */ }
.visit-map-wrap > .visit-map-link, .visit-map-wrap > .visit-map-link > .visit-map-img, .visit-map-wrap > iframe { position:absolute; inset:0; }

@media (max-width:1024px) {
  /* on tablet and below make the preview a bit taller */
  .visit-map-wrap::before { padding-top:66.666%; }
  .visit-grid { grid-template-columns: 1fr; }
}

@media (max-width:480px) {
  .visit-map-wrap::before { padding-top:80%; }
}

/* Right-column copy tweaks */
.visit-copy .section-title { font-size: clamp(2.4rem, 6vw, 4rem); line-height:1.02; margin:0 0 .6rem; }
.visit-copy .section-sub { font-size: 1.15rem; max-width: 540px; color: rgba(255,255,255,0.95); margin:0 0 1rem; }
.visit-copy .btn { border-radius: 999px; padding: 0.7rem 1.2rem; }
.visit-copy .btn + .btn { margin-left: .6rem; }

/* If an iframe is used instead of an image, make it fill the preview box */
.visit-map-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.visit-copy { display:flex; flex-direction:column; gap:.8rem; justify-content:center; }

@media (max-width:480px) {
  .visit-map-img { height:200px; }
}