/* ==========================================================================
   Restaurang 3:an: stylesheet

   Written phone-first. The rules below describe how the page looks on a
   phone. The two @media blocks at the very bottom change what needs to be
   different on wider screens: from 701px (tablets) and from 961px (laptops).

   Contents
     1. Colours and basics
     2. Shared pieces (buttons, headings, links)
     3. Top bar
     4. Hero
     5. Info strip
     6. Veckans lunch
     7. Meny
     8. Boka bord
     9. Hitta hit
    10. Footer and the phone call bar
    11. Wider screens
   ========================================================================== */


/* ---------- 1. Colours and basics ---------------------------------------- */

:root {
  --bg: #141110;          /* page background, dark like the wood inside */
  --panel: #1d1816;       /* slightly lighter boxes */
  --wood: #5a3f2b;        /* brown detail colour */
  --stone: #e9e1d4;       /* cream, used for the lunch card */
  --red: #b3262d;         /* buttons */
  --orange: #f08a2c;      /* accent */
  --text: #f3ece2;        /* normal text */
  --muted: #b8ab9b;       /* less important text */
  --faint: #a39382;       /* small print (still readable on the dark background) */
  --line: #3a302a;        /* thin divider lines */
  --field-line: #7a6858;  /* borders of form fields */
  --topbar-height: 58px;
}

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

html {
  scroll-behavior: smooth;
  /* When a menu link jumps to a section, stop a bit below the sticky top bar */
  scroll-padding-top: calc(var(--topbar-height) + 12px);
  -webkit-text-size-adjust: 100%;
}

/* Some people turn off animations in their system settings. Respect that. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
  /* Leave room at the bottom for the fixed call bar on phones */
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* A clear outline on whatever has keyboard focus */
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* The page content is centred and never wider than 1180px */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

/* Hidden on screen, but still read by screen readers and reachable by keyboard */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Skip to content" link: only appears when you press Tab */
.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 20;
  background: var(--stone);
  color: #221a14;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
}
.skip-link:focus { top: 12px; }

.noscript { padding: 16px 18px; background: var(--panel); text-align: center; }


/* ---------- 2. Shared pieces ---------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;            /* big enough to tap with a thumb */
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #c5313a; }
.btn-ghost { border: 1.5px solid var(--stone); color: var(--stone); }
.btn-ghost:hover { background: rgba(233, 225, 212, .12); }

/* Small orange label above headings */
.tag {
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section { padding: 54px 0; }
.section-tight { padding-top: 0; }

h2 {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 8px;
  overflow-wrap: break-word;   /* a very long word may break instead of sticking out */
}

.sub { color: var(--muted); margin-bottom: 34px; }

/* A link inside a sentence */
.text-link { color: var(--orange); text-decoration: underline; font-weight: 600; }


/* ---------- 3. Top bar ------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(20, 17, 16, .92);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
}
.logo { font-weight: 900; font-size: 26px; letter-spacing: -.5px; }
.logo span { color: var(--orange); }

/* On phones the links and the phone button are hidden.
   The call bar at the bottom of the screen does that job instead. */
.links, .topbar-call { display: none; }

/* What phones get instead of the links: one small button to the other page
   ("Meny" on the start page, "Startsida" on the menu page) */
.topbar-mobile { padding: 8px 18px; font-size: 14px; }


/* ---------- 4. Hero ---------------------------------------------------------- */

.hero {
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  /* Two layers: a dark fade on top, a wood-plank pattern underneath */
  background:
    linear-gradient(180deg, rgba(20, 17, 16, .15) 0%, rgba(20, 17, 16, .55) 55%, var(--bg) 100%),
    repeating-linear-gradient(90deg, #4a3424 0 46px, #3f2c1f 46px 48px, #523a28 48px 94px, #3a2a1d 94px 96px);
}

/* Used when a real photo exists. Add the class "hero--photo" in index.html
   after saving the photo as images/hero.jpg. Same dark fade, photo underneath. */
.hero--photo {
  background:
    linear-gradient(180deg, rgba(20, 17, 16, .15) 0%, rgba(20, 17, 16, .55) 55%, var(--bg) 100%),
    url("../images/hero.jpg") center / cover no-repeat;
}

.hero .wrap { width: 100%; padding-top: 40px; padding-bottom: 44px; }

h1 {
  /* clamp(smallest, preferred, largest): the size follows the screen width */
  font-size: clamp(38px, 12vw, 46px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
  max-width: 760px;
}
h1 em { font-style: normal; color: var(--orange); }

.hero-text { font-size: 16px; color: #e2d6c6; max-width: 560px; margin: 18px 0 28px; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* The big heading on the menu page (it has no hero around it) */
.page-title { margin-bottom: 16px; }


/* ---------- 5. Info strip ----------------------------------------------------- */

.strip {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.strip .wrap { display: grid; grid-template-columns: 1fr 1fr; }   /* 2 x 2 on phones */
.strip .cell { padding: 16px 12px 16px 0; border-top: 1px solid var(--line); }
.strip .cell:nth-child(-n+2) { border-top: 0; }                   /* no line above the first row */
.strip small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.strip b { font-size: 16px; }
.strip a:hover { text-decoration: underline; }

/* "Öppet till 19" / "Stängt, öppnar 11". home.js sets the class open or closed.
   The words say the same thing as the colour, so nobody has to rely on colour. */
.status span { white-space: nowrap; }      /* each piece stays on one line */
.status::before {                          /* the round dot in front */
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;                /* same colour as the text */
}
.open { color: #6fd08c; }
.closed { color: #f2a08a; }


/* ---------- 6. Veckans lunch ---------------------------------------------------- */

.lunch { display: grid; }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2a201b;
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

.lunchcard {
  background: var(--stone);
  color: #221a14;
  border-radius: 18px;
  padding: 24px 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.lunchcard h3 {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}
.week { font-size: 28px; font-weight: 900; margin-bottom: 18px; }

/* One row per weekday: short day name to the left, the dish to the right */
.day {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #d3c7b4;
}
.day b { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #6b5847; }

/* Today's dish: a lighter box that sticks out a little on both sides */
.day.today {
  background: #fff6e6;
  margin: 0 -14px;
  padding: 12px 14px;
  border-radius: 10px;
  border-top-color: transparent;
}
.day.today b { color: var(--red); }

.day-message { padding: 12px 0; border-top: 1px solid #d3c7b4; }

.price { display: flex; justify-content: space-between; margin-top: 16px; font-weight: 700; font-size: 15px; }
.price-amount { color: var(--red); }
.inc { font-size: 13px; color: #6b5847; margin-top: 4px; }


/* ---------- 7. Meny --------------------------------------------------------------- */

/* The darker background: used by the short "Meny" part of the start page
   and by the whole menu page (meny.html) */
.menu-bg { background: #0b0908; }

/* On the menu page the dark part fills most of the screen, even when a
   tab has only a few dishes in it */
.menu-page { min-height: 75vh; }

.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.tab {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #4d4037;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.on { background: var(--orange); border-color: var(--orange); color: #1b120a; }   /* the chosen tab */

/* One menu row: number | name + ingredients | price */
.item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px dashed #3b302a;
  break-inside: avoid;         /* never split one row across two columns */
}
.item .n { color: var(--faint); font-size: 13px; font-weight: 700; }
.item-name { font-size: 18px; color: var(--orange); font-weight: 800; }
.item-ingredients { font-size: 14px; color: var(--muted); }
.item-ingredients::first-letter { text-transform: uppercase; }   /* "skinka, ananas" is shown as "Skinka, ananas" */
.item .p { font-weight: 800; font-size: 17px; white-space: nowrap; }

/* The little "HUSETS" label */
.star {
  font-size: 11px;
  background: var(--red);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: 3px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.menu-message { padding: 16px 0; color: var(--muted); }
.extra { margin-top: 26px; font-size: 14px; color: var(--muted); }

/* The two lines under the menu: "ring och beställ" and "till startsidan" */
.menu-end { margin-top: 22px; }


/* ---------- 8. Boka bord ------------------------------------------------------------ */

.book { display: grid; gap: 28px; }

.steps li { display: flex; gap: 14px; margin-bottom: 18px; }
.step-number {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wood);
  font-weight: 800;
  color: var(--orange);
}
.steps b { display: block; }
.step-text { color: var(--muted); }

.form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 18px;
}

/* The line at the top of the form that explains the star */
.form-hint { font-size: 13px; color: var(--muted); margin-bottom: 18px; }

/* The star after the label of a field that must be filled in */
.required-mark { color: var(--orange); font-weight: 700; }

/* A row holds one or two fields. On phones: name and phone number are stacked,
   date and time sit side by side (the date gets a bit more room). */
.row { display: grid; grid-template-columns: 1fr; column-gap: 14px; }
.row-date { grid-template-columns: 1.4fr 1fr; }

.f { margin-bottom: 16px; min-width: 0; border: 0; }
.f > label, .f > legend {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}

.inp {
  display: block;
  width: 100%;
  min-height: 48px;
  background: #0f0c0b;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;             /* 16px or more stops iPhones from zooming in when you tap a field */
  color: var(--text);
  color-scheme: dark;          /* makes the built-in date and time pickers dark too */
}
.inp::placeholder { color: #9a8c7d; opacity: 1; }
textarea.inp { resize: vertical; }

/* "Antal personer": the labels are the visible buttons */
.guests { display: flex; gap: 8px; }
.guests label {
  flex: 1;
  padding: 11px 0;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
}
.guests input:checked + label { background: var(--orange); border-color: var(--orange); color: #1b120a; }
.guests input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Small help text under a field ("Fler än 6 personer? Ring ...") */
.field-hint { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* The list of times ("Tid"). Less padding on the right, because the little
   arrow the browser draws there already takes up room. */
select.inp { padding-right: 6px; }
/* Greyed out until a date has been chosen */
select.inp:disabled { opacity: .55; cursor: not-allowed; }

/* A message under a field that needs fixing. booking.js writes the text
   and shows the <p>; until then it is hidden. */
.field-error { font-size: 13px; font-weight: 600; color: #ffa391; margin-top: 6px; }

/* The messages for date and time sit under the row that holds both fields.
   The negative margin pulls them up close to the fields. */
.row-error { margin-top: -10px; margin-bottom: 16px; }

/* A field with a problem gets a red border. booking.js sets aria-invalid. */
.inp[aria-invalid="true"] { border-color: #ff7b63; }
.f[aria-invalid="true"] .guests label { border-color: #ff7b63; }

/* The line under the "Skicka förfrågan" button, after it has been pressed */
.form-status { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.form-status.error { background: #3a1a17; border: 1px solid #ff7b63; color: #ffd9d1; }
.form-status.info { background: #2a201b; border: 1px solid var(--field-line); }
.form-status.success { background: #16301f; border: 1px solid #6fd08c; color: #dcf5e4; font-size: 15px; }

/* The trap field for spam robots: far outside the screen, so nobody sees it */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The box the spam protection (Cloudflare Turnstile) is drawn in */
.turnstile { margin-bottom: 18px; }

/* The button while the booking is on its way */
.btn:disabled { opacity: .6; cursor: wait; }

.form .btn { width: 100%; font-size: 16px; padding: 15px; }
.note { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: center; }

/* The privacy note at the bottom of the form */
.privacy { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.privacy summary { margin-top: 10px; padding: 6px 0; color: var(--text); font-weight: 600; cursor: pointer; }
.privacy ul { margin-top: 6px; padding-left: 18px; list-style: disc; }
.privacy li { margin-bottom: 6px; }


/* ---------- 9. Hitta hit --------------------------------------------------------------- */

.contact { display: grid; gap: 28px; }

.hours { margin-bottom: 24px; }
.hours li {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.hours li.today { color: var(--orange); font-weight: 700; }   /* today's row */

/* The box that holds the map. The iframe fills the whole box. */
.map {
  position: relative;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ---------- 10. Footer and the phone call bar ---------------------------------------------- */

footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--faint); font-size: 13px; }
footer .wrap { display: flex; flex-direction: column; gap: 6px; }
footer a:hover { text-decoration: underline; }

/* Fixed to the bottom of the screen on phones */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(20, 17, 16, .96);
  border-top: 1px solid var(--line);
}
.callbar .btn { flex: 1; }


/* ---------- 11. Wider screens -------------------------------------------------------------- */

/* Tablets and everything wider: bigger text, more air, top bar links */
@media (min-width: 701px) {
  :root { --topbar-height: 68px; }

  body { padding-bottom: 0; }           /* no call bar here, so no extra room needed */
  .callbar { display: none; }
  .wrap { padding: 0 32px; }

  .section { padding: 80px 0; }
  .section-tight { padding-top: 0; }
  h2 { font-size: 40px; }

  /* Top bar: show the links and the phone button, hide the phone-only button */
  .links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: var(--muted); }
  .links a:hover { color: var(--text); }
  .links a[aria-current="page"] { color: var(--text); font-weight: 700; }   /* the page you are on */
  .topbar-call { display: inline-flex; }
  .topbar-mobile { display: none; }

  /* Hero */
  .hero { min-height: 560px; }
  .hero .wrap { padding-bottom: 56px; }
  h1 { font-size: clamp(46px, 7vw, 76px); letter-spacing: -2px; }
  .hero-text { font-size: 19px; }

  .lunchcard { padding: 30px 32px; }

  /* Menu: two columns. The numbers run down the left column, then the right. */
  .grid { columns: 2; column-gap: 56px; }

  /* Form: name + phone number side by side, date + time side by side */
  .form { padding: 30px; }
  .row { grid-template-columns: 1fr 1fr; }

  .map { min-height: 340px; }

  footer .wrap { flex-direction: row; justify-content: space-between; }
}

/* Laptops and desktops: here there is room to put things side by side */
@media (min-width: 961px) {
  /* Info strip: four cells in one row */
  .strip .wrap { grid-template-columns: repeat(4, 1fr); }
  .strip .cell { padding: 22px 20px; border-top: 0; border-left: 1px solid var(--line); }
  .strip .cell:first-child { border-left: 0; padding-left: 0; }

  /* Lunch: card to the left, text to the right.
     "order: -1" moves the card first, even though it comes second in the HTML. */
  .lunch { grid-template-columns: 1fr 1.35fr; gap: 40px; align-items: start; }
  .lunchcard { order: -1; }
  .lunchside h2 { margin-top: 8px; }

  /* Booking: text to the left, form to the right */
  .book { grid-template-columns: 1fr 1.1fr; gap: 48px; }

  /* Hitta hit: map to the left, text to the right */
  .contact { grid-template-columns: 1.2fr 1fr; gap: 40px; }
  .map { order: -1; }
}