/* Shared site styles: cookie consent banner, click-to-load Google Maps placeholders,
   footer legal row and small mobile layout fixes.
   Shared by every page. Colours fall back to the site palette if a page
   doesn't define the custom properties. */

/* ── BANNER ── */
.consent-banner {
  position: fixed; z-index: 150;
  left: 24px; bottom: 24px;
  width: calc(100% - 48px); max-width: 440px;
  background: var(--ink, #1A1A1A); color: var(--cream, #FDFBF8);
  padding: 22px 24px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
  font-family: 'Lato', system-ui, sans-serif; font-weight: 300;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.consent-banner.is-open { opacity: 1; transform: translateY(0); }
.consent-banner[hidden] { display: none; }

.consent-banner h2 {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 20px; line-height: 1.2; margin: 0 0 8px; color: var(--cream, #FDFBF8);
}
.consent-banner p {
  font-size: 13.5px; line-height: 1.7; margin: 0 0 16px;
  color: rgba(253,251,248,0.72);
}
.consent-status {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--oro, #B8860B); margin: -6px 0 14px;
}
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* both choices carry equal visual weight — declining is as easy as accepting */
.consent-btn {
  flex: 1 1 150px; min-height: 44px;
  font-family: 'Lato', system-ui, sans-serif; font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 12px 16px; cursor: pointer;
  border: 1px solid rgba(253,251,248,0.55);
  background: transparent; color: var(--cream, #FDFBF8);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.consent-btn:hover { background: var(--cream, #FDFBF8); color: var(--ink, #1A1A1A); border-color: var(--cream, #FDFBF8); }
.consent-link {
  display: inline-block; margin-top: 14px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(253,251,248,0.6); text-decoration: none;
  border-bottom: 1px solid rgba(253,251,248,0.25); padding-bottom: 1px;
}
.consent-link:hover { color: var(--cream, #FDFBF8); border-bottom-color: var(--cream, #FDFBF8); }
.consent-btn:focus-visible, .consent-link:focus-visible {
  outline: 2px solid var(--oro, #B8860B); outline-offset: 3px;
}

/* footer "Cookie settings" trigger, styled like the footer links around it */
.cookie-settings-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 300;
  color: var(--ink-faint, #8A8A8A); transition: color 0.5s;
}
.cookie-settings-btn:hover { color: var(--ink-muted, #5A5A5A); }
.cookie-settings-btn:focus-visible { outline: 2px solid var(--rosso, #8B3A3A); outline-offset: 3px; }

@media (max-width: 600px) {
  .consent-banner { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; padding: 20px 18px 18px; }
}

/* ── MAP PLACEHOLDER (shown until the visitor chooses to load Google Maps) ── */
.map-embed { position: absolute; inset: 0; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(15%); }

.map-consent {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 28px 24px;
  background:
    radial-gradient(circle at 50% 38%, rgba(184,134,11,0.10) 0, rgba(184,134,11,0) 42%),
    repeating-linear-gradient(0deg, rgba(26,26,26,0.035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(26,26,26,0.035) 0 1px, transparent 1px 34px),
    var(--cream-deep, #EDE8E0);
}
.map-consent-pin {
  width: 26px; height: 26px; margin-bottom: 14px;
  background: var(--rosso, #8B3A3A);
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 6px 14px rgba(139,58,58,0.28);
  position: relative;
}
.map-consent-pin::after {
  content: ''; position: absolute; inset: 8px;
  background: var(--cream, #FDFBF8); border-radius: 50%;
}
.map-consent-title {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 19px; line-height: 1.3; color: var(--ink, #1A1A1A); margin: 0 0 6px;
}
.map-consent-address {
  font-family: 'Lato', system-ui, sans-serif; font-size: 13px; font-weight: 300;
  color: var(--ink-muted, #5A5A5A); margin: 0 0 16px;
}
.map-consent-note {
  font-family: 'Lato', system-ui, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.65;
  color: var(--ink-faint, #8A8A8A); max-width: 330px; margin: 14px 0 0;
}
.map-consent-note a { color: var(--rosso, #8B3A3A); text-decoration: none; border-bottom: 1px solid rgba(139,58,58,0.3); }
.map-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.map-consent-actions button,
.map-consent-actions a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  font-family: 'Lato', system-ui, sans-serif; font-size: 10px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 11px 20px; cursor: pointer; transition: background 0.4s, color 0.4s;
}
.map-consent-actions button { background: var(--rosso, #8B3A3A); color: var(--cream, #FDFBF8); border: 1px solid var(--rosso, #8B3A3A); }
.map-consent-actions button:hover { background: var(--rosso-hover, #7A2E2E); }
.map-consent-actions a { background: transparent; color: var(--ink, #1A1A1A); border: 1px solid var(--ink, #1A1A1A); }
.map-consent-actions a:hover { background: var(--ink, #1A1A1A); color: var(--cream, #FDFBF8); }
.map-consent-actions button:focus-visible,
.map-consent-actions a:focus-visible { outline: 2px solid var(--rosso, #8B3A3A); outline-offset: 3px; }

/* without JavaScript the map can't be loaded, so only offer the Google Maps link */
html:not(.js) .map-consent-actions button,
html:not(.js) .map-consent-note { display: none; }

/* footer bottom row: company details on the left, legal links on the right */
.footer-bottom { gap: 16px 32px; flex-wrap: wrap; }
.footer-bottom > p { flex: 1 1 420px; line-height: 1.7; }
.footer-bottom-links { flex-wrap: wrap; align-items: center; }
html:not(.js) .cookie-settings-btn { display: none; }

/* Phones and tablets: slide-in animations move vertically instead of sideways, so
   nothing waits off the right edge of the screen before it animates in (on iPhone
   Safari that can make the whole page wobble sideways). The extra "body" in the
   selectors outranks each page's own animation rules. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js body .fade-left,
  html.js body .fade-right { transform: translateY(16px); }
  html.js body .fade-left.visible,
  html.js body .fade-right.visible { transform: none; }
}
/* Full-width two-column blocks (home: events teaser + find us; events: private dining;
   contact: map + details). On tablets and small laptops their columns touch the screen
   edge, so the sideways slide-in would start just off-screen. "clip" trims that without
   creating a scroll box; browsers that don't know it simply ignore the rule. */
.events-teaser-inner, .findus-inner, .pd-grid, .map-grid { overflow-x: clip; }

/* Phones and tablets: the footer stacks into a column, where the copyright line's
   420px flex-basis (meant for the side-by-side desktop row) became 420px of empty
   height above the Privacy / Terms links. */
@media (max-width: 900px) {
  .footer-bottom > p { flex: 0 0 auto; }
}

/* Phones: give map placeholders room for the pin, buttons and note, so nothing is
   cut off before a visitor chooses to show the map. "body" outranks page rules; the ratio is
   dropped because a min-height with an aspect-ratio also forces a matching min-width. */
@media (max-width: 600px) {
  body .findus-map, body .map-pane, body .visit-map { min-height: 320px; aspect-ratio: auto; }
}