/* ============================================================
   GREENVALE BAKERY - THEME CHROME
   Nav, hero, footer. Page bodies are styled by kit.css.
   Tokens are re-declared on :root so chrome can use them
   outside a .gv-page wrapper.
   ============================================================ */

:root {
  --gv-teal:        #04D9C4;
  --gv-teal-light:  #99F2E2;
  --gv-teal-pale:   #e0f8f4;
  --gv-teal-wash:   #f0fbf9;
  --gv-teal-deep:   #03b8a8;
  --gv-teal-press:  #028f83;
  --gv-blush:       #FEDBD9;
  --gv-blush-pale:  #fff5f4;
  --gv-rose:        #E0759B;
  --gv-white:       #FFFFFF;
  --gv-ink:         #0D0D0D;
  --gv-gray-100:    #f5f5f5;
  --gv-gray-200:    #e8e8e8;
  --gv-gray-400:    #a0a0a0;
  --gv-gray-600:    #525252;

  --gv-font-display: 'Argue DEMO', 'Cormorant Garamond', Georgia, serif;
  --gv-font-script:  'Beatrica', cursive;
  --gv-font-body:    'Raleway', system-ui, sans-serif;

  --gv-container: 1100px;
  /* The nav bar is chrome, not text, so it may run wider than the content
     measure. Without this the logo + 6 links + CTA leave only 48px of slack
     and space-between collapses to the flex gap. */
  --gv-nav-w: 1320px;
  --gv-pad: 40px;
  --gv-nav-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--gv-font-body);
  font-weight: 300;
  color: var(--gv-ink);
  background: var(--gv-white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--gv-teal-deep); }

/* Skip link - visible only on focus */
.gv-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gv-ink); color: #fff; padding: 12px 20px;
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
}
.gv-skip:focus { left: 8px; top: 8px; }

.gv-shell { max-width: var(--gv-container); margin: 0 auto; padding: 0 var(--gv-pad); }

/* ============================================================
   NAV
   ============================================================ */
.gv-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gv-gray-100);
}
.gv-nav__inner {
  max-width: var(--gv-nav-w); margin: 0 auto; padding: 0 var(--gv-pad);
  height: var(--gv-nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
}
.gv-nav__logo { flex: none; display: block; line-height: 0; }
.gv-nav__logo img { height: 54px; width: auto; object-fit: contain; }
.gv-nav__logo--text {
  font-family: var(--gv-font-display); font-size: 1.5rem;
  color: var(--gv-ink); text-decoration: none; line-height: 1;
}

.gv-nav__links {
  display: flex; gap: 34px; align-items: center; list-style: none;
  margin: 0 0 0 auto; padding: 0; flex: 0 1 auto;
}
.gv-nav__links li { position: relative; }
.gv-nav__links a {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gv-gray-600); text-decoration: none;
  transition: color 0.18s ease; display: inline-block; padding: 6px 0;
  white-space: nowrap;
}
.gv-nav__links a:hover,
.gv-nav__links .current-menu-item > a,
.gv-nav__links .current-menu-ancestor > a { color: var(--gv-teal-deep); }

/* Dropdown */
.gv-nav__links .sub-menu {
  position: absolute; top: 100%; left: -18px; min-width: 230px;
  background: #fff; border: 1px solid var(--gv-gray-200); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 10px 0; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.gv-nav__links li:hover > .sub-menu,
.gv-nav__links li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.gv-nav__links .sub-menu a { display: block; padding: 9px 22px; letter-spacing: 0.1em; }

.gv-nav__cta {
  flex: none;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; color: var(--gv-teal-deep);
  border: 1.5px solid var(--gv-teal); border-radius: 9999px;
  padding: 9px 22px; text-decoration: none; white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.gv-nav__cta:hover { background: var(--gv-teal); color: #fff; }

/* Mobile toggle - CSS only, driven by a hidden checkbox */
.gv-nav__toggle { display: none; }
.gv-nav__burger { display: none; }

body { padding-top: var(--gv-nav-h); }

/* ============================================================
   HOME HERO - the mockup's split layout
   ============================================================ */
.gv-hero { padding: 96px 0 88px; }
.gv-hero__grid {
  max-width: var(--gv-container); margin: 0 auto; padding: 0 var(--gv-pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.gv-hero__eyebrow {
  font-family: var(--gv-font-script); font-size: 3rem; color: var(--gv-rose);
  margin: 0 0 -8px; line-height: 1; font-weight: 400;
}
.gv-hero__title {
  font-family: var(--gv-font-display); font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 400; color: var(--gv-ink); margin: 0 0 8px;
  line-height: 1.05; letter-spacing: -0.01em;
}
.gv-hero__location {
  font-family: var(--gv-font-display); font-size: 1.5rem;
  color: var(--gv-rose); margin: 0 0 28px; line-height: 1;
}
.gv-hero__body {
  font-size: 1.1rem; color: var(--gv-gray-600); line-height: 1.8;
  margin: 0 0 40px; font-weight: 300; max-width: 430px;
}
.gv-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.gv-hero__media img { width: 100%; }

/* ============================================================
   INTERIOR PAGE HERO
   ============================================================ */
.gv-phero { background: var(--gv-blush-pale); padding: 72px 0 68px; text-align: center; }
.gv-phero__inner { max-width: 780px; margin: 0 auto; padding: 0 var(--gv-pad); }
.gv-phero__eyebrow {
  font-family: var(--gv-font-script); font-size: clamp(2rem, 3.4vw, 2.75rem);
  color: var(--gv-rose); margin: 0 0 -4px; line-height: 1;
}
.gv-phero__title {
  font-family: var(--gv-font-display); font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400; margin: 0; line-height: 1.1; letter-spacing: -0.01em;
}
.gv-phero__crumbs {
  margin: 18px 0 0; font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gv-gray-400);
}
.gv-phero__crumbs a { color: var(--gv-gray-600); text-decoration: none; }
.gv-phero__crumbs a:hover { color: var(--gv-teal-deep); }
.gv-phero__crumbs span { margin: 0 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.gv-footer { background: var(--gv-ink); color: rgba(255,255,255,0.72); padding: 72px 0 32px; }
.gv-footer a { color: rgba(255,255,255,0.72); text-decoration: none; }
.gv-footer a:hover { color: var(--gv-teal-light); }
.gv-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 56px;
  padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.gv-footer__logo img { height: 46px; width: auto; margin-bottom: 20px; }
.gv-footer__blurb { font-size: 0.94rem; line-height: 1.8; margin: 0 0 20px; max-width: 340px; }
.gv-footer__heading {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; margin: 0 0 18px;
}
.gv-footer__list { list-style: none; margin: 0; padding: 0; }
.gv-footer__list li { margin-bottom: 11px; font-size: 0.94rem; }
.gv-footer__contact p { margin: 0 0 11px; font-size: 0.94rem; }
.gv-footer__bottom {
  padding-top: 28px; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: rgba(255,255,255,0.5);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .gv-hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .gv-hero__media { order: -1; max-width: 420px; }
  .gv-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ============================================================
   NAV COLLAPSE
   The horizontal nav needs roughly 1100px: logo (193) + six links
   (634) + CTA (145), plus gaps that actually read as gaps. Below
   that the logo was being squeezed and "Corporate Events" wrapped,
   so the burger takes over here rather than at the 768px content
   breakpoint.
   ============================================================ */
@media (max-width: 1100px) {
  .gv-nav__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 9px;
    background: none; border: 0; cursor: pointer;
  }
  .gv-nav__burger span { display: block; height: 1.5px; background: var(--gv-ink); transition: transform 0.2s ease, opacity 0.2s ease; }

  .gv-nav__links {
    position: fixed; top: var(--gv-nav-h); left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--gv-gray-200);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 20px; margin: 0;
    max-height: calc(100vh - var(--gv-nav-h)); overflow-y: auto;
    display: none;
  }
  .gv-nav__toggle:checked ~ .gv-nav__links { display: flex; }
  .gv-nav__toggle:checked ~ .gv-nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .gv-nav__toggle:checked ~ .gv-nav__burger span:nth-child(2) { opacity: 0; }
  .gv-nav__toggle:checked ~ .gv-nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .gv-nav__links > li { border-bottom: 1px solid var(--gv-gray-100); }
  .gv-nav__links > li:last-child { border-bottom: 0; }
  .gv-nav__links a { padding: 14px 0; font-size: 0.78rem; }

  /* Submenus render inline once the panel is vertical */
  .gv-nav__links .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 8px 16px; min-width: 0;
  }
  .gv-nav__links .sub-menu a { padding: 9px 0; opacity: 0.8; }

  .gv-nav__cta { display: none; }
}

@media (max-width: 768px) {
  :root { --gv-pad: 24px; }

  /* Shorter bar once we are properly on phones. */
  :root { --gv-nav-h: 72px; }
  .gv-nav__logo img { height: 42px; }

  .gv-hero { padding: 56px 0 56px; }
  .gv-hero__eyebrow { font-size: 2.25rem; }
  .gv-hero__body { margin-bottom: 30px; }

  .gv-phero { padding: 48px 0 44px; }
  .gv-footer { padding: 56px 0 28px; }
  .gv-footer__grid { grid-template-columns: 1fr; gap: 34px; }
}