:root{
  --logo-size-desktop: 94px;
  --logo-size-mobile: 36px;
}
@media (max-width: 600px){
  :root{ --logo-size-mobile: 66px; } /* change this for phone size */
}

/* === Brillia webfont (uses your local file) === */
@font-face {
  font-family: 'Brillia';
  src: url('fonts/brillia.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Apply Brillia ONLY to title elements */
.site-title,
.logo {
  font-family: 'Brillia', serif;
}

/* ===================== ORIGINAL + BANNER ADDITIONS ===================== */
:root {
  --bg: #ffe6f0;      /* Light pink background */
  --fg: #4a1c2a;      /* Darker text for contrast */
  --muted: #7a4b5b;
  --accent: #ff80ab;  /* Vibrant pink */
  --accent2: #ff4081; /* Deeper pink */
  --card: #fff;
  --shadow: 0 10px 25px rgba(74, 28, 42, 0.10);

  /* NEW: banner color (easy to tweak) */
  --banner-bg: #f783da;

  /* === Individual image customization === */
  --hero-img1-width: 130%;
  --hero-img1-max-width: 1620px;
  --hero-img1-radius: 16px;
  --hero-img1-shadow: var(--shadow);

  --hero-img2-width: 100%;
  --hero-img2-max-width: 1500px; /* adjust this to resize image #2 */
  --hero-img2-radius: 16px;
  --hero-img2-shadow: var(--shadow);
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

/* ===== NEW: Banner header layout (logo left, title centered beside it) ===== */
.site-header {
  border-radius: 0 0 1rem 1rem; /* Rounds bottom corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.582); /* Soft shadow under the banner */
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;     /* center the title horizontally in the bar */
  position: relative;          /* allow absolute-positioned logo */
  max-width: 1600px;
  margin: 0 auto;
}
.site-logo {
      border-radius: 50%; /* perfect circle if it's a square image */
  position: absolute;          /* keep logo anchored left without pushing title */
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  height: 38px;                /* tweak logo size here */
  width: auto;
}
.site-title {
  font-size: clamp(3rem, 7vw, 5rem);  /* big, responsive title */
  font-weight: 550;
  margin: 0;
  color: var(--fg);
  letter-spacing: 0.1em;
  text-transform: none;
}

/* ===================== Rest of your existing CSS ===================== */

.wrap {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 2rem;
}

.logo {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
}

/* Hero section layout */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  text-align: center; /* ensures inner text centers by default */
}

/* make hero-text full width so children can center to the screen */
.hero-text {
  width: 100%;
}

.hero-text h1 {
  margin: 0.2rem 0 0.5rem;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.08;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 1rem;
}

.subtitle {
  margin: 0.5rem 0 0.25rem;
  max-width: 52ch;
  color: var(--muted);
  /* explicit centering safeguards */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Base hero-media styling */
.hero-media img {
  background: var(--card);
  display: block;
}

/* First image style */
.hero-media img:first-child {
  width: var(--hero-img1-width);
  max-width: var(--hero-img1-max-width);
  border-radius: var(--hero-img1-radius);
  box-shadow: var(--hero-img1-shadow);
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* CTA form */
.cta {
  max-width: 700px;
  margin: 1.5rem auto 0;
  text-align: center; /* centers the button */
}

.cta-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.cta-row {
  display: inline-flex;
  gap: 0.5rem;
}

.cta input[type="email"] {
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1px solid #f8bcd0;
  background: #fff;
  color: var(--fg);
  width: min(300px, 65vw);
  outline: none;
}
.cta button {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.cta button:hover { filter: brightness(1.05); }

.privacy {
  display: block;
  color: var(--muted);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

footer {
  margin-top: 2rem;
  text-align: center;
  color: var(--muted);
}

/* Fade-in animations */
.fade-1, .fade-2, .fade-3, .fade-4, .fade-5 {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.7s ease forwards;
}
.fade-1 { animation-delay: 0.05s; }
.fade-2 { animation-delay: 0.18s; }
.fade-3 { animation-delay: 0.32s; }
.fade-4 { animation-delay: 0.46s; }
.fade-5 { animation-delay: 0.6s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .cta-row { flex-direction: column; }
  .cta button { width: 100%; }

  /* banner tweaks for small screens */
  .site-logo { height: 40px; left: 0.75rem; }
  .site-title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
}

/* Form message */
.form-msg {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--muted);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
  min-height: 1.2em;
  text-align: center;
}
.form-msg.show { opacity: 1; transform: translateY(0); }
.form-msg.success { color: #e64eb3; }
.form-msg.error { color: #b00020; }

/* Menu button */
.btn-menu {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  background: rgba(255, 128, 171, 0.8);
  color: white;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.btn-menu:hover {
  background: rgba(255, 64, 129, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* Space between hero images (inside the group) */
.hero-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}
.hero-media img + img { margin-top: 1rem; }

/* Stop horizontal scroll as a safeguard */
html, body { overflow-x: hidden; }

/* Independent second image (outside the hero section) */
.hero-img2{
  display: block;
  width: var(--hero-img2-width);
  max-width: clamp(280px, 90vw, var(--hero-img2-max-width));
  height: auto;
  margin: clamp(24px, 5vw, 56px) auto 0; /* spacing + centering */
  object-fit: contain;
  border-radius: var(--hero-img2-radius);
  box-shadow: var(--hero-img2-shadow);
}

/* Keep a single .hero .cta rule to center the button relative to screen */
.hero .cta {
  width: 100%;
  text-align: center !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Desktop/default */
.site-logo{
  height: var(--logo-size-desktop);
  width: auto;
}

/* ——— Mobile header: logo left, title perfectly centered, no overlap ——— */
@media (max-width: 600px) {
  /* 1) Grid layout + balanced spacer */
  .site-header { padding: 0.6rem 0.75rem; }

  .header-content{
    display: grid;
    grid-template-columns: minmax(var(--logo-size-mobile), auto) 1fr minmax(var(--logo-size-mobile), auto);
    align-items: center;
    column-gap: 0.5rem;
  }

  /* 2) Logo: make sure it's NOT absolute on mobile */
  .site-logo{
    position: static !important;   /* overrides any absolute rule */
    transform: none !important;
    justify-self: start;
    height: var(--logo-size-mobile);
    width: auto;
  }

  /* 3) Title: center, allow wrapping, and cap width so it doesn’t crowd */
  .site-title{
    grid-column: 2;
    justify-self: center;
    text-align: center;
    margin: 0;
    font-size: clamp(1.4rem, 6.5vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: 0.04em;
    max-width: calc(100vw - (var(--logo-size-mobile) + 16px) * 2); /* room for logo + spacer */
    text-wrap: balance; /* progressive enhancement */
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* 4) Right-side invisible spacer to balance the logo width */
  .header-content::after{
    content: "";
    width: var(--logo-size-mobile);
    height: 1px;
    justify-self: end;
  }
}
/* ==== MENU PAGE: full-screen on mobile, no "Our Menu" heading ==== */

/* Base menu layout */
.menu-page .menu-section {
  /* Fill viewport width/height without causing horizontal scroll */
  width: 100vw;
  min-height: 100svh; /* safe viewport units for mobile toolbars */
  margin: 0;
  padding: 0;

  /* Center contents and keep it simple */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  /* Prevent inherited body padding from affecting layout */
  box-sizing: border-box;
}

/* Menu image sizing */
.menu-page .menu-image {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  border-radius: 10px; /* keep your rounded look */
  /* remove any default margins that can create gaps */
  margin: 0;
  margin-top: 45px;
}

/* Back link styling (kept simple; tweak if you want it fixed) */
.menu-page .menu-back {
display: inline-block;
background-color: #ff80ab;
color: white;
padding: 12px 24px;
text-decoration: none;
border-radius: 6px;
font-weight: bold;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.menu-button:hover,
.menu-back:hover {
background-color: #ff4d94;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

/* Mobile-first: use full screen with minimal chrome */
@media (max-width: 600px) {
  .menu-page {
    overflow-x: hidden;
  }
  .menu-page .menu-section {
    padding: 0;   /* no extra padding on mobile */
  }
  .menu-page .menu-image {
    /* ensure no accidental overflow on small screens */
    max-width: 100%;
  }
}

/* Desktop/tablet: keep it clean but not forced to full height */
@media (min-width: 601px) {
  .menu-page .menu-section {
    /* still looks great on desktop; remove this if you want true full height there too */
    min-height: auto;
    padding: 2rem; /* give some breathing room on larger screens */
  }
  .menu-page .menu-image {
    max-width: min(1100px, 92vw); /* tasteful max size on big screens */
    margin: 0 auto;
  }
  .menu-page .menu-back {
    margin-top: 2.25rem;
  }
}
/* Banner color control */
:root { --banner-bg: #ffd6e8; } /* change this to any color */

.site-header {
  background: var(--banner-bg) !important; /* force this to win */
  /* optional polish: */
  /* border-radius: 0 0 1rem 1rem;
     box-shadow: 0 2px 8px rgba(0,0,0,.08); */
}

/* If you had a gradient earlier and want to keep it subtle, do this instead: */
/*
.site-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--banner-bg) 92%, white),
                                         color-mix(in srgb, var(--banner-bg) 70%, #ff6f91));
}
*/

/* Ensure mobile doesn’t override it */
@media (max-width: 600px) {
  .site-header { background: var(--banner-bg) !important; }
}
/* ===== Sticky header add-on (non-destructive) ===== */

/* Keep header above content */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* over images/content */
}

/* Ensure the inner header stays the same height you already have */
.site-header .header-content {
  height: 100%;
}

/* Push page content down exactly by the header’s real height (set via JS below) */
body {
  padding-top: var(--header-h, 80px); /* fallback 80px just in case */
}

/* Give the subtitle a little extra space below the sticky header */
.subtitle {
  /* keep your existing styles; just add a bit more top margin */
  margin-top: calc( (var(--subtitle-extra, 0px)) + 0.75rem );
}

/* Safeguard: keep the View Menu button centered without changing its look */
.hero .cta {
  width: 100%;
  text-align: center;
}

/* DO NOT change .btn-menu styles here; we’re just ensuring it stays centered */

/* === Logo dropdown (non-destructive add-on) === */

/* Make the logo button look like your current image (no default button chrome) */
.site-logo-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
  display: inline-block;
  cursor: pointer;
  /* preserve your existing absolute/static positioning from .site-logo rules */
}

/* Position the dropdown relative to the header content area */
.header-content { position: relative; } /* (you likely already have this) */

/* The menu panel */
.logo-menu {
  position: absolute;
  top: calc(100% + 8px);    /* drops just below the header bar */
  left: 1rem;               /* aligns under the logo on desktop */
  min-width: 180px;
  padding: 8px;
  border-radius: 12px;
  background: #ffe6f7;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  display: none;            /* hidden by default */
  z-index: 1200;            /* above header */
}

/* Show when active */
.logo-menu.is-open { display: block; }

/* Menu items */
.logo-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.logo-menu a:hover,
.logo-menu a:focus {
  background: rgba(0,0,0,.06);
  outline: none;
}

/* Mobile: keep it snug to the left and a bit wider for tapping */
@media (max-width: 600px) {
  .logo-menu {
    left: 0.75rem;
    min-width: 220px;
  }
}

/* --- Social icons row (footer) --- */
.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 1rem 0 0.5rem;
}

.social-links a img {
  width: 28px;    /* adjust size if you like */
  height: 28px;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.95;
}

.social-links a:hover img,
.social-links a:focus img {
  transform: scale(1.12);
  opacity: 1;
  outline: none;
}

.email-form {
  margin-bottom: 2px; /* reduces space below form */
}

.social-links {
  margin-top: 2px; /* reduces space above socials */
}

/* Make 'Back to Home' look like the pink menu button */
.menu-back {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: background .3s ease, transform .2s ease, box-shadow .2s ease;
  margin-top: 40px;
}
.menu-back:hover,
.menu-back:focus {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  outline: none;
}