/* Simply Kate's Cakes — site-wide styles */
:root {
  --bg: #fbf6ef;
  --surface: #ffffff;
  --ink: #3b2a20;
  --muted: #8a7263;
  --accent: #b4794a;
  --accent-dark: #5c3a28;
  --rose: #e8c8c4;
  --line: #eadfd2;
  --radius: 14px;
  --shadow: 0 2px 14px rgba(59, 42, 32, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, .brand { font-family: "Fraunces", Georgia, serif; font-weight: 600; }

a { color: var(--accent-dark); }

img { max-width: 100%; display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
header.site {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1080px; margin: 0 auto; padding: 14px 20px;
}
.brand { font-size: 1.35rem; color: var(--accent-dark); text-decoration: none; }
.nav-links { display: flex; gap: 22px; list-style: none; align-items: center; }
.nav-links a {
  text-decoration: none; color: var(--ink); font-size: 0.95rem;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.here { border-bottom-color: var(--accent); }
#navbtn { display: none; background: none; border: none; font-size: 1.6rem; color: var(--accent-dark); cursor: pointer; }

@media (max-width: 760px) {
  /* 44x44 is the minimum comfortable touch target; the glyph alone was 23x34.
     Negative margin keeps the header height unchanged despite the bigger hit area. */
  #navbtn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: -5px -10px -5px 0;
  }
  .nav { flex-wrap: wrap; }
  .nav-links {
    display: none; flex-direction: column; width: 100%;
    gap: 0; padding: 8px 0 4px;
  }
  .nav-links.open { display: flex; }
  /* Full-width rows: previously each link was only as wide as its text (e.g.
     "Locations" was 65x24), so most of the menu row was dead space. */
  .nav-links li { width: 100%; }
  .nav-links a {
    display: flex; align-items: center; min-height: 44px;
    width: 100%; padding: 0 4px; font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-links a:hover, .nav-links a.here {
    border-bottom-color: var(--line); color: var(--accent-dark); font-weight: 700;
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 62vh; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden;
}
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .veil { position: absolute; inset: 0; background: rgba(46, 28, 18, 0.45); }
.hero .inner { position: relative; padding: 60px 20px; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 600; }
.hero p { font-size: 1.15rem; margin-top: 10px; opacity: 0.95; }

.btn {
  display: inline-block; margin-top: 24px; padding: 12px 28px;
  background: var(--accent); color: #fff; text-decoration: none;
  border-radius: 999px; font-weight: 700; letter-spacing: 0.02em;
  border: none; font-size: 1rem; cursor: pointer;
}
.btn:hover { background: var(--accent-dark); }
/* The hero sits on a dark photo, so the default ghost outline is white. On light
   sections it needs the accent colour instead (see .order-cta below). */
.btn.ghost { background: transparent; border: 2px solid #fff; }

/* ---------- order call-to-action ---------- */
.order-cta { background: var(--surface); }
.order-cta .section-sub { max-width: 620px; margin-left: auto; margin-right: auto; margin-bottom: 0; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.order-cta .btn.ghost {
  border: 2px solid var(--accent);
  color: var(--accent-dark);
}
.order-cta .btn.ghost:hover { background: var(--accent); color: #fff; }

/* The primary conversion action on the locations page, so it gets a real button
   hit area rather than a 22px-tall text link. */
.msg-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; margin-top: 8px;
  background: var(--accent); color: #fff; font-weight: 700;
  text-decoration: none; border-radius: 999px;
}
.msg-link:hover { background: var(--accent-dark); }
.loc .msg-link { margin-top: 12px; }

/* Three Facebook pages cover the four branches (Ipil serves Yoho + Gaisano), so
   the footer lists them by town rather than linking one page for everyone.
   Each town is padded to a real tap target - they were 20px tall and adjacent,
   which is a mis-tap waiting to happen on a phone. */
.fb-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 4px; }
.fb-links a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 12px; font-weight: 700;
}

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 40px 0 20px; }
.nf-mark {
  font-family: "Fraunces", Georgia, serif; font-size: clamp(4.5rem, 16vw, 8rem);
  font-weight: 700; line-height: 1; color: var(--accent); opacity: 0.22; margin-bottom: -8px;
}
.nf-ghost { border: 2px solid var(--accent); color: var(--accent-dark); }
.nf-ghost:hover { background: var(--accent); color: #fff; }

/* ---------- sections ---------- */
section.pad { padding: 56px 0; }
.section-title { text-align: center; font-size: 2rem; margin-bottom: 8px; }
.section-sub { text-align: center; color: var(--muted); margin-bottom: 36px; }

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 820px) { .cards3 { grid-template-columns: 1fr; } }
.card {
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform 0.15s ease;
}
.card:hover { transform: translateY(-4px); }
.card img { height: 220px; width: 100%; object-fit: cover; }
.card .cap { padding: 18px 20px; }
.card .cap h3 { font-size: 1.2rem; }
.card .cap p { color: var(--muted); font-size: 0.92rem; margin-top: 4px; }

/* ---------- catalogue grid ---------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px;
}
.prod {
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); cursor: pointer;
}
/* Cards are keyboard-focusable (role=button), so the focus ring must be visible. */
.prod:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.prod img { height: 260px; width: 100%; object-fit: cover; background: var(--rose); }
.prod .cap { padding: 14px 16px; }
.prod .cap h3 { font-size: 1.02rem; font-weight: 600; font-family: "Nunito Sans", sans-serif; }
.prod .price { color: var(--accent-dark); font-weight: 800; margin-top: 4px; }

/* category filter chips — same pill look as .tabs, but a separate class on purpose:
   the generic .tabs handler in site.js swaps .tabpane elements, which this page has none of. */
.catfilter { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
/* nothing tagged yet (or only one category in use) — collapse the row, margin and all */
.catfilter:empty { display: none; }
.catfilter button {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  padding: 8px 20px; border-radius: 999px; font-size: 0.94rem; font-weight: 700; cursor: pointer;
}
.catfilter button:hover { border-color: var(--accent); }
.catfilter button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* hairline between the occasion chips and the style chips */
.catfilter .sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 4px; }
.catfilter-empty { text-align: center; color: var(--muted); }

/* Desktop wraps the chips, so there is no swipe gesture to advertise. This must
   sit BEFORE the mobile block: a media query adds no specificity, so an equally
   specific rule placed after it would win at every width and permanently hide
   the hint (which is exactly what happened on first attempt). */
.catfilter-hint { display: none; }

@media (max-width: 600px) {
  .catfilter .sep { display: none; }
  /* On mobile the 12 chips wrapped into ~6 rows (211px tall), pushing every cake
     below the fold. Switch to one horizontally-scrollable strip: same chips, one
     row, swipe to reach the rest. Negative margins let it bleed to the screen
     edges so it reads as scrollable rather than clipped. */
  .catfilter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* No scroll-snap here on purpose: combined with the 20px inline padding it
       made the resting scrollLeft 20 rather than 0, so the "have you scrolled
       yet" checks in site.js saw a fresh page as already-scrolled and hid the
       swipe hint immediately. Free scrolling is fine for a row of chips. */
    margin: 0 -20px 6px;
    padding: 2px 20px 10px;
    /* Hide the scrollbar; the fade + hint below carry the affordance instead. */
    scrollbar-width: none;
  }
  .catfilter::-webkit-scrollbar { display: none; }
  .catfilter button {
    flex: 0 0 auto;
    min-height: 40px;
  }

  /* Discoverability: a horizontally scrolling row is easy to miss entirely, so
     fade whichever edge still has chips beyond it. site.js toggles these classes
     from scrollLeft, so the fade disappears once you reach an end and never
     implies content that isn't there. Applied as a mask rather than an overlay
     because a pseudo-element inside a scroller would scroll away with the chips. */
  .catfilter.fade-r {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 99%);
    mask-image: linear-gradient(to right, #000 82%, transparent 99%);
  }
  .catfilter.fade-l {
    -webkit-mask-image: linear-gradient(to right, transparent 1%, #000 14%);
    mask-image: linear-gradient(to right, transparent 1%, #000 14%);
  }
  .catfilter.fade-l.fade-r {
    -webkit-mask-image: linear-gradient(to right, transparent 1%, #000 14%, #000 82%, transparent 99%);
    mask-image: linear-gradient(to right, transparent 1%, #000 14%, #000 82%, transparent 99%);
  }

  /* Explicit text hint, because the fade alone is subtle. Hidden as soon as the
     row is scrolled at all - by then the gesture has been discovered. */
  .catfilter-hint {
    display: block; text-align: center; color: var(--muted);
    font-size: 0.82rem; margin: 0 0 20px;
    transition: opacity 0.2s;
  }
  .catfilter-hint.gone { opacity: 0; visibility: hidden; }
  /* Every chip already fits - no gesture to advertise. */
  .catfilter.not-scrollable + .catfilter-hint { display: none; }
}

/* lightbox */
.lb {
  position: fixed; inset: 0; background: rgba(30, 18, 10, 0.75);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.lb.open { display: flex; }
.lb .box {
  background: var(--surface); border-radius: var(--radius); max-width: 560px; width: 100%;
  max-height: 92vh; overflow: auto;
}
.lb .box img { width: 100%; max-height: 62vh; object-fit: contain; background: #f3ebe0; }
.lb .box .cap { padding: 18px 22px 24px; }
.lb .box .price { font-size: 1.25rem; font-weight: 800; color: var(--accent-dark); margin-top: 4px; }
.lb .close { float: right; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--muted); padding: 8px 14px; }

/* ---------- menu (price lists) ---------- */
.tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.tabs button {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  padding: 10px 26px; border-radius: 999px; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 600px) {
  /* Sweet Corner's four "Combo X" tabs wrapped to two rows (90px). Fit them on
     one row instead. Sizes are deliberate: at 0.9rem "Combo A" measures ~64px,
     and (335 - 3x6 gap) / 4 = 79px per tab, so 6px side padding leaves room.
     No text-overflow here on purpose - an ellipsis would render all four as
     "Combo..." and make them indistinguishable, which is worse than wrapping. */
  .tabs { gap: 6px; flex-wrap: nowrap; }
  .tabs button {
    flex: 1 1 0; min-width: 0; min-height: 44px;
    padding: 10px 6px; font-size: 0.9rem;
    white-space: nowrap;
  }
}

.menu-group { max-width: 620px; margin: 0 auto 34px; }
.menu-group h3 { font-size: 1.35rem; margin-bottom: 4px; }
.menu-group .note { color: var(--muted); font-size: 0.9rem; margin-bottom: 12px; }
.mi { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.mi .n { font-weight: 600; }
.mi .p { color: var(--accent-dark); font-weight: 800; white-space: nowrap; margin-left: 16px; }
.tabpane { display: none; }
.tabpane.on { display: block; }

/* ---------- combos ---------- */
.combo {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 28px; max-width: 620px; margin: 0 auto;
}
.combo h3 { font-size: 1.3rem; }
.combo .price { font-size: 1.6rem; font-weight: 800; color: var(--accent-dark); margin: 6px 0 14px; }

/* ---------- link hubs (music/admin/staff) ---------- */
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.hub a.tile {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; text-decoration: none; color: var(--ink); text-align: center;
}
.hub a.tile:hover { transform: translateY(-3px); }
.hub a.tile img { border-radius: 10px; margin-bottom: 12px; height: 180px; width: 100%; object-fit: cover; }
.hub a.tile h3 { font-size: 1.1rem; }
.hub a.tile p { color: var(--muted); font-size: 0.88rem; margin-top: 4px; }

/* ---------- locations ---------- */
.loc { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; }
.loc h3 { font-size: 1.25rem; }
.loc p { color: var(--muted); margin-top: 4px; }

/* ---------- forms ---------- */
form.std { max-width: 560px; margin: 0 auto; }
form.std label { display: block; font-weight: 700; margin: 16px 0 6px; }
form.std input, form.std textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; background: var(--surface); color: var(--ink);
}
form.std textarea { min-height: 130px; resize: vertical; }
.form-msg { margin-top: 16px; font-weight: 700; }
.form-msg.ok { color: #2e7d46; }
.form-msg.err { color: #b3392f; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- footer ---------- */
footer.site {
  border-top: 1px solid var(--line); margin-top: 40px;
  padding: 36px 20px; text-align: center; color: var(--muted); font-size: 0.92rem;
}
footer.site a { color: var(--accent-dark); }
footer.site .credit { margin-top: 8px; font-size: 0.8rem; opacity: 0.8; }

/* ---------- mobile touch/scroll refinements (2026-07-20 mobile audit) ---------- */
@media (max-width: 600px) {
  /* Submit was 112x42 and floated left of a wide screen; full width is both a
     bigger target and the expected mobile form pattern. */
  form.std .btn { display: block; width: 100%; min-height: 48px; }

  /* The three "Message <branch>" buttons wrapped 2 + 1, which reads as ragged.
     Stack them so each is full width and unambiguous. */
  .order-cta .cta-row { flex-direction: column; align-items: stretch; }
  .order-cta .cta-row .btn { width: 100%; margin-top: 0; }
}

/* Back to top — /cakes/ is ~11 screens on a phone, so getting back to the
   filters otherwise means a long swipe. Shown by site.js once you're a screen
   or so down; hidden entirely on pages that don't opt in. */
#totop {
  position: fixed; right: 16px; z-index: 90;
  /* env() keeps it clear of the iOS/Android browser chrome that overlays the
     bottom of the viewport; falls back to plain 16px where unsupported. */
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  background: var(--accent); color: #fff; border: none;
  font-family: inherit; font-size: 0.95rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(60, 40, 25, 0.28);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
#totop .arrow { font-size: 1.05rem; line-height: 1; }
#totop.show { opacity: 1; visibility: visible; transform: none; }
#totop:hover { background: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) { #totop { transition: none; } }