/* =============================================================
   Superbru — Supermarkt aan de jachthaven
   Stylesheet

   Sections:
     1. Design tokens (:root)
     2. Base / reset
     3. Layout helpers
     4. Navigation
     5. Hero
     6. Status sign
     7. Buttons
     8. Marina scene (animations)
     9. Generic section styling
    10. Offer cards
    11. Opening-times table
    12. Pizza cards
    13. Footer
   ============================================================= */

/* 1. Design tokens ------------------------------------------- */
:root {
  /* Surfaces */
  --bg: #fdf3e0;      /* page background (warm sand) */
  --paper: #fffaf1;   /* tinted section background */
  --surface: #ffffff; /* cards */
  --line: #ecd9b8;    /* borders */

  /* Text */
  --ink: #14384f;     /* deep navy, primary text + headings */
  --muted: #64727c;   /* secondary text */

  /* Brand palette — calming nautical
     (--sun / --sun-deep kept as names so the rest of the sheet is unchanged;
      they now hold a soft teal instead of orange) */
  --sun: #5cc2b6;      /* soft seafoam teal */
  --sun-deep: #2d9b8c; /* calming teal (primary accent) */
  --sea: #1f8ab3;      /* marina blue */
  --sea-deep: #0d5f80; /* deep water */
  --coral: #7fbfc9;    /* muted aqua accent */

  /* Deep navy — the dominant brand color (headings text uses --ink above,
     which is the same navy family). Teal (--sun/--sun-deep) is the secondary
     highlight. */
  --navy: #123b53;
  --navy-deep: #0e2f43;

  /* Primary call-to-action reuses the brand navy */
  --cta: var(--navy);
  --cta-hover: #1b4d6b;

  /* Status colors */
  --open: #1f9d57;
  --closed: #e0533f;

  /* Shape + shadow */
  --radius: 22px;
  --shadow: 0 22px 48px rgba(203, 139, 54, 0.20);

  /* Typography */
  --disp: "Fraunces", Georgia, "Times New Roman", serif; /* display headings */
  --hand: "Caveat", cursive;                             /* handwritten accents */
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* 2. Base / reset -------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body);
  color: var(--ink);
  line-height: 1.6;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--sun);
  color: var(--ink);
}

/* 3. Layout helpers ------------------------------------------ */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Offset anchor jumps so a section's heading clears the sticky nav
   (nav is 70px tall) instead of hiding underneath it. */
:target,
section[id],
footer[id] {
  scroll-margin-top: 70px;
}

/* 4. Navigation ---------------------------------------------- */
nav {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(255, 250, 241, 0.85);
  border-bottom: 2px solid var(--line);
}

nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  display: block;
  height: 52px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-links a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Animated underline on hover */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--sun-deep);
  transition: right 0.25s;
}

.nav-links a:hover::after {
  right: 0;
}

/* Hamburger toggle — hidden on desktop, shown on small screens */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s, opacity 0.2s;
}

/* Morph the three bars into an X when the menu is open */
.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 640px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Collapse the links into a dropdown panel below the bar */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
    background: rgba(255, 250, 241, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--line);
    box-shadow: 0 12px 24px rgba(18, 59, 83, 0.12);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 14px 24px;
    font-size: 1.05rem;
  }

  /* The sliding underline doesn't suit the stacked layout */
  .nav-links a::after {
    display: none;
  }
}

/* 5. Hero ---------------------------------------------------- */
header.hero {
  position: relative;
  padding: 76px 0 30px;
  text-align: center;
  overflow: hidden;
}

/* Soft sun + water glow behind the hero content */
header.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(560px 380px at 84% -8%, #c7ede6 0%, rgba(199, 237, 230, 0) 62%),
    radial-gradient(620px 420px at 8% 4%, #cdeef6 0%, rgba(205, 238, 246, 0) 60%);
}

.tagline {
  display: inline-block;
  font-family: var(--hand);
  color: var(--sun-deep);
  font-size: 1.8rem;
  line-height: 1;
  transform: rotate(-3deg);
}

h1.mark {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(3.4rem, 11vw, 6.6rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 6px 0 4px;
  color: var(--ink);
}

/* The wordmark is two parts; each part is a single, consistent color. */
.mark-super {
  color: var(--ink);
}

.mark-bru {
  color: var(--sun-deep);
}

.hero p.lead {
  color: var(--muted);
  font-size: 1.12rem;
  max-width: 540px;
  margin: 18px auto 30px;
}

/* 6. Status sign --------------------------------------------- */
.status-card {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 300px;
  padding: 22px 44px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* The "string" the sign hangs from */
.status-card::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 2px;
  height: 16px;
  background: var(--muted);
  opacity: 0.5;
  transform: translateX(-50%);
}

/* The sun bead at the top of the string */
.status-card::after {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 3px #fff6e3;
  transform: translateX(-50%);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--disp);
  font-weight: 900;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
}

.status-pill .beacon {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

/* Pulsing ring around the status beacon */
.beacon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  opacity: 0.5;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%   { transform: scale(0.8); opacity: 0.6; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { opacity: 0; }
}

/* Open / closed state colors (toggled from JS on .status-card) */
.is-open .beacon,
.is-open .beacon::after { background: var(--open); }
.is-open .status-pill   { color: var(--open); }

.is-closed .beacon,
.is-closed .beacon::after { background: var(--closed); }
.is-closed .status-pill   { color: var(--closed); }

.status-detail {
  color: var(--muted);
  font-size: 0.98rem;
}

/* 7. Buttons ------------------------------------------------- */
.btn-row {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s;
}

.btn-primary {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 8px 20px rgba(18, 59, 83, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--cta-hover);
  box-shadow: 0 12px 26px rgba(18, 59, 83, 0.45);
}

.btn-ghost {
  border: 2px solid var(--navy);
  color: var(--navy);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(18, 59, 83, 0.08);
}

/* 8. Marina scene (animations) ------------------------------- */
.scene {
  position: relative;
  margin-top: 26px;
  line-height: 0;
}

.scene svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Slowly rotating sun rays.
   transform-box must be pinned to view-box so the 620px 92px origin is read in
   the SVG's own coordinate system on every engine. Without it, Safari/iOS (and
   older browsers) resolve the origin against a different box and the rays spin
   around the wrong point. */
.sun-rays {
  transform-box: view-box;
  transform-origin: 620px 92px;
  animation: spin 60s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Boat bobbing on the water.
   transform-box: fill-box + transform-origin: center makes the boat rotate and
   bob about its OWN centre on every browser. Browsers disagree on the default
   transform-box for SVG elements (Chrome/Firefox use view-box, Safari/iOS use a
   collapsed box that pushes the origin far away), which is what let the 1.5deg
   tilt swing the boat right out of the water band on some devices. Pinning it
   keeps the motion small and self-contained. */
.boat {
  transform-box: fill-box;
  transform-origin: center;
  animation: bob 5s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(7px) rotate(1.5deg); }
}

/* Seagulls drifting across the sky */
.gull {
  animation: drift 9s ease-in-out infinite;
}

.gull.b {
  animation-duration: 12s;
  animation-delay: -3s;
}

@keyframes drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(26px, -10px); }
  100% { transform: translate(0, 0); }
}

/* 9. Generic section styling --------------------------------- */
section {
  padding: 62px 0;
}

section.tint {
  background: var(--paper);
}

.section-head {
  text-align: center;
  margin-bottom: 42px;
}

.section-head .kicker {
  font-family: var(--hand);
  color: var(--sea);
  font-size: 1.5rem;
  line-height: 1;
}

.section-head h2 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  letter-spacing: -0.02em;
  margin-top: 2px;
}

.section-head p {
  color: var(--muted);
  margin-top: 8px;
}

/* 10. Offer cards -------------------------------------------- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.offer-card {
  position: relative;
  overflow: hidden;
  padding: 30px 26px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.18s;
}

/* Color-coded top bar per time of day */
.offer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.offer-card.morning::before { background: var(--sea); }
.offer-card.day::before     { background: var(--open); }
.offer-card.evening::before { background: var(--sun-deep); }

.offer-card:hover {
  transform: translateY(-5px) rotate(-0.4deg);
}

.offer-icon {
  display: block;
  margin-bottom: 14px;
  font-size: 2.4rem;
}

.offer-card h3 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.offer-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

/* 11. Opening-times table ------------------------------------ */
.hours {
  max-width: 620px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
}

.hours-row:last-child {
  border-bottom: none;
}

/* Current period is highlighted (class added from JS) */
.hours-row.active {
  background: linear-gradient(90deg, rgba(92, 194, 182, 0.22), transparent);
}

.hours-row .m {
  font-weight: 700;
}

.hours-row .t {
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hours-row.active .t {
  color: var(--ink);
  font-weight: 600;
}

.tag {
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--sun-deep);
  color: #fff;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

/* On small screens the "Langer open" and "Korter open" badges collapse to a
   dot. The label text stays in the DOM (font-size: 0) for screen readers, and
   the title attribute still surfaces it on long-press. */
@media (max-width: 640px) {
  .tag-langer,
  .tag-korter {
    display: inline-block;
    width: 10px;
    height: 10px;
    padding: 0;
    margin-left: 8px;
    border-radius: 50%;
    font-size: 0;
    letter-spacing: 0;
    color: transparent;
    overflow: hidden;
    vertical-align: middle;
  }
}

.season-note {
  margin-top: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

/* 12. Pizza cards -------------------------------------------- */
.pizza-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.pizza {
  padding: 24px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.18s, border-color 0.2s;
}

.pizza:hover {
  transform: translateY(-4px);
  border-color: var(--sun-deep);
}

.pizza .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.pizza h3 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 1.25rem;
}

.pizza .price {
  font-family: var(--disp);
  font-weight: 900;
  color: var(--sun-deep);
  white-space: nowrap;
}

.pizza .desc {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.92rem;
}

.placeholder-note {
  margin-top: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* 13. Footer ------------------------------------------------- */
footer {
  position: relative;
  padding: 54px 0 40px;
  background: var(--navy-deep);
  color: #eaf6fb;
  text-align: center;
}

footer .wave {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
}

/* Fill matches the tinted section directly above the footer so the
   wave's top edge blends seamlessly. */
footer .wave path {
  fill: var(--paper);
}

.footer-logo {
  display: block;
  height: 104px;
  width: auto;
  margin: 0 auto 14px;
}

footer p {
  color: #b9dced;
  font-size: 0.92rem;
}

/* 14. Dev time-travel panel (local testing only) ------------
   The panel is injected by script.js's setupDevTimeTravel(), which only
   runs on a local host / with ?devtime, so these rules never affect
   anything on the live site. Safe to remove together with that code. */
#devTime {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  width: 260px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(17, 24, 28, 0.92);
  color: #f4f1e8;
  font: 13px/1.4 Inter, system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}

#devTime h4 {
  margin: 0 0 2px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  font-weight: 600;
}

#devTime .dt-now {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
}

#devTime label {
  display: block;
  font-size: 11px;
  opacity: 0.7;
  margin: 8px 0 3px;
}

#devTime input[type="date"] {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 7px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #fff;
  color: #111;
}

#devTime input[type="range"] {
  width: 100%;
  accent-color: #ffb703;
  margin-top: 2px;
}

#devTime .dt-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

#devTime button {
  flex: 1;
  padding: 6px 8px;
  border-radius: 7px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  background: #ffb703;
  color: #3a2b06;
}

#devTime button.dt-live {
  background: rgba(255, 255, 255, 0.15);
  color: #f4f1e8;
}

#devTime button.dt-live.on {
  background: #3fa9d1;
  color: #062733;
}