@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');


/* NFCTags / Menu styles - responsive with Galaxy S21 reference */
:root{
  --page-bg: #f0fbfb; /* soft mint-cyan that pairs with teal-cyan CTA */
  --bg-gradient: radial-gradient(1200px 400px at 10% 10%, rgba(13,110,253,0.04), transparent 10%), radial-gradient(1000px 300px at 90% 90%, rgba(99,102,241,0.02), transparent 8%), linear-gradient(180deg, #f8fbff 0%, #f2f6fb 100%);
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,249,250,0.9) 100%);
  --hero-small: 160px;
  --hero-medium: 220px;
  --hero-large: 260px;
  --max-card-width: 640px;

  /* modern accent colors (teal-cyan) */
  --accent-1: #0ea5a4; /* teal-500 */
  --accent-2: #06b6d4; /* cyan-500 */
  --accent-shadow: rgba(6,182,212,0.12);

  /* stronger border color for reviews button */
  --reviews-border: rgba(11,81,83,0.18);

  /* Theme variables (light by default) */
  --bg-page: #f0fbfb;
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,249,250,0.9) 100%);
  --text: #0b3940;
  --muted: rgba(0,0,0,0.55);
}

/* Dark mode overrides */
.dark-mode{
  --bg-page: #07121a;
  --card-bg: linear-gradient(180deg, rgba(12,18,26,0.95) 0%, rgba(18,25,33,0.9) 100%);
  --text: #e6f7f7;
  --muted: rgba(255,255,255,0.6);
  background-color: var(--bg-page)!important;
}

/* Apply page background from variable */
body{ background: var(--bg-page); }

html, body { height:100%; }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--page-bg); /* solid background for testing */
  /* fallback gradient lightly layered above solid color */
  background-image: var(--bg-gradient);
  background-blend-mode: overlay;
  -webkit-font-smoothing:antialiased;
}

.nfctags-layout{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}

.nfctags-container{
  width:100%;
  max-width:var(--max-card-width);
  background: var(--card-bg);
  border-radius:18px;
  box-shadow:0 12px 36px rgba(11, 81, 173, 0.08);
  padding:22px 18px 28px;
  box-sizing:border-box;
}

/* Make the card itself transparent so the page background shows through */
.menu-card{
  background: transparent;
}

/* card-body now a separate area below the image that holds CTA and has bottom rounded corners */
.menu-card .card-body{
  background: transparent; /* ensure transparent */
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:72px; /* slightly taller for larger CTA */
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
  border-bottom-left-radius:12px !important;
  border-bottom-right-radius:12px !important;
  backdrop-filter: blur(2px);
  box-sizing: border-box;
}

/* Hover: do not translate/move — use subtle darken and shadow instead */
.menu-card:hover{
  box-shadow: 0 14px 36px rgba(2,6,23,0.10);
  filter: brightness(0.985);
}
.menu-card:active{
  box-shadow: 0 8px 20px rgba(2,6,23,0.06);
  filter: brightness(0.96);
}

/* Remove default focus outline on the whole card to avoid visible border on click; keep focus styles for inner controls */
.menu-card:focus{ outline: none; }

/* subtle overlay gradient at bottom of image to improve contrast */
.menu-card::before{
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.12) 100%);
  mix-blend-mode: normal;
  opacity: 0.95;
}

/* Menu CTA fills the bottom area; top corners square so it visually continues from image */
.menu-cta{
  position:static;
  width:100%;
  height:100%;
  margin:8px 0 0 0; /* top margin only */
  border-radius: 0 0 12px 12px !important; /* bottom corners rounded only */
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1.2rem;
  letter-spacing: .6px;
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  color:#fff;
  box-shadow:none;
  text-decoration:none;
  border:0;
  transition: filter .12s ease, box-shadow .12s ease;
}
.menu-cta:hover{ filter: brightness(0.95); box-shadow: 0 8px 20px rgba(2,6,23,0.08); }
.menu-cta:active{ filter: brightness(0.92); }

/* Menu CTA icon sizing */
.menu-cta i {
  font-size: 1.35rem; /* larger icon */
  margin-right: 10px;
  line-height: 1; /* keep icon vertically centered */
}

@media (min-width:360px) and (max-width:412px){
  .menu-cta i { font-size: 1.45rem; }
}

@media (min-width:768px){
  .menu-cta i { font-size: 1.25rem; }
}

/* Reviews button - more tactile (no movement on hover) */
.reviews-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:64px;
  padding:.6rem 1rem;
  background: #ffffff; /* white background for clarity */
  border-radius:12px;
  color: #0b5e5d;
  text-decoration:none;
  border: 1.5px solid var(--reviews-border); /* more visible border */
  box-shadow: 0 6px 18px rgba(6,182,212,0.06); /* soft shadow to feel clickable */
  transition: box-shadow .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
}
.reviews-btn:hover{ box-shadow: 0 10px 28px rgba(2,6,23,0.06); background: #f7f9f9; border-color: rgba(11,81,83,0.2); filter: brightness(0.98); }
.reviews-btn:active{
  box-shadow: 0 6px 16px rgba(6,182,212,0.04);
  filter: brightness(0.97);
}

/* Google icon and reviews styling adjustments */
.google-icon{ width:32px; height:32px; display:inline-block; object-fit:contain }
.reviews-stars{ margin-left:6px; display:inline-flex; gap:4px; align-items:center; font-size:1.1rem }
.reviews-text{ font-weight:700; font-size:1.18rem; margin-left:6px }
.reviews-left{ display:flex; align-items:center; gap:6px; justify-content:center }

/* Review subtitle */
.reviews-sub{ font-weight:400; font-size:0.88rem; color: rgba(0,0,0,0.55); margin-left:6px }

/* Adjust reviews-text spacing in tight layouts */
.reviews-text{ display:inline-flex; align-items:center }

/* Ensure left part stays compact */
.reviews-left{ display:flex; align-items:center; gap:6px }

/* remove default button look */
.reviews-btn:focus{ outline:none }

/* Buttons - responsive and touch friendly */
.btn-lg{ font-weight:700; font-size:1.12rem; padding:.9rem 1.1rem; border-radius:12px; }

.buttons .btn{ box-shadow: 0 8px 22px rgba(13,110,253,0.06); }

.social .btn{ min-height:56px; border-radius:12px }

/* Ratings inside reviews button */
.reviews-rating{ display:inline-flex; gap:4px, align-items:center }

/* card-gap: visible white spacer between image and CTA */
.card-gap{
  flex: 0 0 4px;
  min-height:4px;
  background: #ffffff; /* white spacer */
}

/* follow label */
.follow-label{ font-weight:600; color:#334; padding-left:4px; margin-top:6px; margin-bottom:6px }

/* Ensure consistent spacing between reviews button and social grid */
.buttons .reviews-btn{ margin-bottom:10px }
.buttons .social-grid{ margin-top:6px }

/* Ensure menu CTA icon displays correctly */
.menu-cta i{ font-size:1.05rem; margin-right:6px }

/* Galaxy S21 reference and similar devices (width ~360-412 CSS px) */
@media (min-width:360px) and (max-width:412px){
  :root{ --hero-medium: 260px; --hero-small: 160px; }
  .nfctags-container{ padding:20px 18px 26px; border-radius:14px; }
  .btn-lg{ font-size:1.16rem; padding:1rem 1.05rem }
  .menu-card .card-img-top{ height: var(--hero-medium); }
  .menu-cta{ height:72px; font-size:1.18rem }
  .reviews-btn{ height:72px }

}

/* Small phones (iPhone SE etc) */
@media (max-width:359px){
  :root{ --hero-medium: 220px }
  .nfctags-container{ padding:14px 12px 20px }
  .btn-lg{ font-size:1.12rem; padding:.95rem 1rem }
  .menu-cta{ height:64px }
}

/* Larger phones / phablets */
@media (min-width:413px) and (max-width:575px){
  :root{ --hero-medium: 300px }
  .nfctags-container{ max-width:600px }
  .btn-lg{ font-size:1.18rem; padding:1.05rem 1.2rem }
  .menu-cta{ height:80px; font-size:1.24rem }
}

/* Desktop: center card and slightly larger */
@media (min-width: 768px){
  .nfctags-layout{ padding:40px 0 }
  .nfctags-container{ max-width:860px; border-radius:18px; padding:28px 22px 36px }
  :root{ --hero-medium: 360px }
  .menu-card .card-img-top{ height: var(--hero-medium); }
  .btn-lg{ font-size:1.12rem; padding:1rem 1.4rem }
  .menu-cta{ height:84px }
}

/* Accessibility focus: hide outline on mouse focus, show for keyboard (focus-visible) */
.menu-card:focus{ outline: none; }
.menu-card:focus-visible{ outline: 3px solid rgba(13,110,253,0.18); outline-offset: 3px; }
.menu-card .menu-cta:focus{ outline: none }


/* Section gap used between blocks */
:root { --section-gap: 0.35rem; }

/* Ensure gap between menu card and reviews button matches gap between reviews and social icons */
.buttons{ margin-top: var(--section-gap) !important; }
.reviews-btn{ margin-bottom: var(--section-gap); }
.social-row{ margin-top: var(--section-gap); }

 /* keep social-row layout */
.social-row{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--section-gap); padding-left:0; margin-top:var(--section-gap) }

/* Social grid for icons-only compact layout */
.social-grid{
  display:grid;
  gap:12px; /* increased horizontal spacing */
  grid-template-columns: repeat(auto-fit, 48px); /* fixed-size squares */
  justify-content:center; /* center items */
  width:100%;
  margin-bottom:8px;
  padding-left: 0; /* ensure centered */
  margin-top: 1.6rem; /* space from reviews button */
}

@media (min-width:420px){
  .social-grid{ gap:10px; grid-template-columns: repeat(auto-fit, 56px); padding-left: calc(1px + 0.2rem); margin-top: 1.25rem }
  .social-btn{ width:56px; height:56px; border-radius:12px }
  .social-btn i{ font-size:1.9rem }
}

/* Social buttons: white tiles with accent-colored icons (light mode) */
.social-btn{
  width:48px; height:48px; /* fixed square */
  display:flex;
  align-items:center;
  justify-content:center;
  background: #ffffff; /* white tile */
  border-radius:10px;
  border: 1.5px solid rgba(11,81,83,0.08); /* subtle border to match reviews button */
  color: var(--accent-1); /* icon color */
  text-decoration:none;
  transition: filter .12s ease, box-shadow .12s ease, transform .12s ease;
}
.social-btn i{ font-size:1.8rem; color: currentColor; }
.social-btn:hover{ filter: brightness(0.98); box-shadow:0 8px 18px rgba(2,6,23,0.06); }

/* Dark mode: make social tiles suitable for dark background */
.dark-mode .social-btn{
  background: rgba(255,255,255,0.04); /* subtle light tile on dark bg */
  border: 1.5px solid rgba(255,255,255,0.06);
  color: #ffffff; /* white icons for contrast */
}
.dark-mode .social-btn:hover{ box-shadow:0 10px 24px rgba(6,182,212,0.08); filter: brightness(0.95); }

/* Ensure follow-text adapts in dark mode via var(--text) */
.dark-mode .follow-text{ color: var(--text); }

/* follow text uses theme text color so it adapts */
.follow-text{ display:block; text-align:center; font-weight:700; color:var(--text); font-size:1.12rem; margin-top:0; margin-bottom:16px }

/* Remove direct bottom/top margins and use social-row margin for spacing */
.reviews-btn{ margin-bottom: 0.4rem; }
.social-grid{ margin-top: 0; }
.social-row{ margin-top: 0.5rem; }
/* Social row: align icons and follow text vertically centered */
.social-row{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding-left:0; margin-top:0.5rem }

.menu-icon{ width:65px; height:auto; display:inline-block; object-fit:contain; vertical-align:middle }

/* Theme toggle switched to sliding switch (ensure visible styles) */
.theme-toggle{ display:flex; justify-content:center; align-items:center; margin:8px 0 12px; }
.theme-toggle input[type="checkbox"]{ position:absolute; left:-9999px; }
.theme-switch{ display:inline-block; width:64px; height:28px; border-radius:999px; background: rgba(11,81,83,0.04); position:relative; cursor:pointer; border:1px solid rgba(11,81,83,0.08); overflow:visible }
/* thumb sits above icons and is slightly larger to fully cover icons */
.theme-switch .switch-thumb{ width:24px; height:24px; border-radius:50%; background:#fff; position:absolute; left:6px; top:2px; transition:left .18s cubic-bezier(.2,.9,.2,1), transform .12s ease; box-shadow: 0 6px 18px rgba(2,6,23,0.12); z-index:4; }
.theme-switch .switch-thumb:active{ transform:scale(0.98); }
/* icons sit under the thumb (lower z-index) and are non-interactive */
.theme-switch .switch-icon{ position:absolute; top:50%; transform:translateY(-50%); font-size:0.95rem; color: var(--text); opacity:0.95; z-index:1; pointer-events:none; }
.theme-switch .switch-sun{ left:8px; }
.theme-switch .switch-moon{ right:8px; }
/* Checked state - move thumb to right and colorize track */
.theme-toggle input[type="checkbox"]:checked + .theme-switch{ background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); border-color: rgba(11,81,83,0.06); }
.theme-toggle input[type="checkbox"]:checked + .theme-switch .switch-thumb{ left: calc(100% - 6px - 24px); }

@media (max-width:420px){
  .theme-switch{ width:56px; height:26px }
  .theme-switch .switch-thumb{ width:20px; height:20px; left:4px; top:3px }
  .theme-switch .switch-sun{ left:6px }
  .theme-switch .switch-moon{ right:6px }
  .theme-toggle input[type="checkbox"]:checked + .theme-switch .switch-thumb{ left: calc(100% - 4px - 20px); }
}

/* Increased typography sizes for key elements (updated) */
.menu-text{ font-weight:800; font-size:1.9rem; color: var(--text); letter-spacing:.6px }

.reviews-text{ font-weight:700; font-size:1.5rem; margin-left:6px }

.follow-text{ display:block; text-align:center; font-weight:700; color:var(--text); font-size:1.35rem; margin-top:0; margin-bottom:16px }

/* Responsive adjustments so text doesn't overflow on narrow screens */
@media (max-width:420px){
  .menu-text{ font-size:1.45rem }
  .reviews-text{ font-size:1.25rem }
  .follow-text{ font-size:1.12rem }
}

/* If you want menu text same color as reviews-text (accent dark) instead of white, override as needed */
.menu-cta.alt-text .menu-text{ color: var(--text) }

/* If menu-icon needs tint in dark mode, ensure it has no forced white fill */
.menu-icon{ display:inline-block; vertical-align:middle }

/* Ensure footer has extra spacing above so follow-text doesn't touch it and make footer less dominant */
.app-footer{
  width:100%;
  margin-top:1.2rem; /* smaller gap so it's visually inside */
  padding:10px 8px 0;
  text-align:center;
  background: transparent; /* let container background show through */
  opacity:0.75;
  font-family: var(--font-hand);
  font-size: 0.92rem;
  box-sizing: border-box;
}

.app-footer a{ color: rgba(0,0,0,0.42); font-weight:600; text-decoration:none }
.dark-mode .app-footer a{ color: rgba(255,255,255,0.5) }

/* Self-hosted hand font (Caveat) - use variable TTF as primary to avoid missing WOFF2/WOFF warnings */
@font-face {
  font-family: 'CaveatLocal';
  src: url('/fonts/Caveat/Caveat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root{ --font-hand: 'CaveatLocal', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif }

/* Apply hand font to CTAs and labels */
.menu-text, .reviews-text, .follow-text { font-family: var(--font-hand); }

/* Stronger horizontal letter-spacing for clearer visual difference */
.menu-text{ letter-spacing: 0.08em; }
.reviews-text{ letter-spacing: 0.06em; }
.follow-text{ letter-spacing: 0.06em; }
.app-footer{ letter-spacing: 0.05em; }

@media (max-width:420px){
  .menu-text{ letter-spacing: 0.06em }
  .reviews-text{ letter-spacing: 0.045em }
  .follow-text{ letter-spacing: 0.045em }
  .app-footer{ letter-spacing: 0.03em }
}

/* Reset letter-spacing for key text elements (remove custom spacing) */
.menu-text, .reviews-text, .follow-text, .app-footer { letter-spacing: normal !important; }
/* Responsive scaling for icons and CTA on smaller viewports */
@media (max-width:575px){
  /* medium-small phones / phablets */
  .menu-icon{ width:48px }
  .menu-cta{ font-size:1.05rem }
  .menu-text{ font-size:1.15rem }
  .reviews-btn{ height:60px }
  .reviews-text{ font-size:1.05rem }
}

@media (max-width:420px){
  /* small phones: make icons and text more compact */
  .menu-icon{ width:36px }
  .menu-cta{ font-size:0.98rem }
  .menu-text{ font-size:1.0rem }
  .reviews-btn{ height:52px; padding:.45rem .9rem }
  .reviews-text{ font-size:0.98rem }
  .google-icon{ width:28px; height:28px }
}

@media (max-width:320px){
  /* very small phones */
  .menu-icon{ width:32px }
  .menu-cta{ font-size:0.92rem }
  .menu-text{ font-size:0.95rem }
  .reviews-btn{ height:48px }
  .reviews-text{ font-size:0.9rem }
}