/* My ePAY Meals home page.
 *
 * This is a closed meal-card system for workplaces and schools, not a
 * restaurant marketplace. The thing that decides whether someone can order is
 * the clock, so the week rail is the one loud element and everything else is
 * kept quiet. Colours come from the wordmark: navy globe, red type.
 *
 * Scoped under .home-* so it cannot reach the rest of the Argon theme.
 */

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

:root {
  --home-navy: #16224a;
  --home-red: #d7263d;
  --home-wash: #f4f6fb;
  --home-line: #dfe3ef;
  --home-muted: #5d6685;
  --home-open: #0b8f5d;
  --home-soon: #b8730a;
  --home-paper: #ffffff;
}

.home-lead,
.home-main,
.home-note {
  font-family: 'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- the navbar, over the navy band ----------
 *
 * The theme's navbar is .navbar-light: a dark hamburger meant for a pale
 * photo hero. This page puts a deep navy band behind it, where that icon is
 * close to invisible. White on #16224a clears WCAG AA comfortably.
 *
 * Scoped to body.home-page so every other page keeps the theme's own navbar.
 */

/* The theme's navbar has no background at all -- it was made to float over a
   full-bleed photo hero. Left transparent here, anything scrolling past shows
   straight through it and the wordmark ends up sitting on top of the page
   content. Give it the band's own colour so content passes behind it. */
/* The navbar is .fixed-top in the theme: lifted out of the flow, so anything
   below it has to reserve its height by hand. Every version of that reservation
   was wrong at some point -- before the script measured, while Archivo was
   swapping in, whenever the bar wrapped -- and the wordmark landed on the
   headline.
   Sticky instead. It still pins to the top when you scroll, but it occupies its
   own height in the document, so the band is pushed down by the bar itself and
   there is no number to get wrong. */
body.home-page nav.navbar {
  position: sticky;
  top: 0;
  background-color: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

body.home-page nav.navbar.is-solid {
  background-color: var(--home-navy);
  box-shadow: 0 2px 14px rgba(9, 14, 32, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  body.home-page nav.navbar { transition: none; }
}

body.home-page .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.45);
}

body.home-page .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

body.home-page .navbar-toggler:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Once the collapsed menu is open it drops onto a white sheet, so the dark
   icon is correct again there. */
body.home-page .navbar-collapse.show .navbar-toggler-icon,
body.home-page .navbar-collapse.collapsing .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2822,34,74,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* The page opens and closes on the same navy, so the white sheet of restaurants
   reads as one panel sitting between them rather than as the page's own colour.
   Argon's .footer is a pale grey, which left the page trailing off. */
/* Transparent, not navy: the page behind it already is navy, and letting it
   show through carries the artwork into the footer too. Painting the footer
   would have hidden it. */
body.home-page .footer {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

body.home-page .footer,
body.home-page .footer a,
body.home-page .footer .copyright {
  color: rgba(255, 255, 255, 0.75);
}

body.home-page .footer a:hover {
  color: #fff;
}

/* ---------- the band ---------- */

/* The navy and the artwork belong to the whole top of the page -- the bar and
   the band together -- so they live on their common ancestor. One image, one
   origin, so it runs through the bar with no seam and no second copy, and
   nothing has to be aligned by hand. */
body.home-page {
  position: relative;
  background-color: var(--home-navy);
}

body.home-page::before {
  content: '';
  position: absolute;
  /* The full height of the page, not one viewport, so the pattern reaches the
     footer as well as the band -- and reaches it from the same origin, so it is
     still one image rather than two that happen to look alike. The white sheet
     of restaurants covers the stretch in between. */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url('../img/item-bg.png');
  background-size: 1000px auto;
  background-position: center top;
  background-repeat: repeat;
  /* The source is black line work on white. invert() makes it white on black,
     and screen drops the black away -- black is neutral for screen -- so only
     the strokes survive, without needing a transparent PNG. */
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* Line art directly behind type is noise. Solid navy where the wordmark sits,
   gone by the headline -- the artwork is quieted there, not cut. */
body.home-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  background: linear-gradient(
    to bottom,
    rgb(22, 34, 74) 0%,
    rgba(22, 34, 74, 0.92) 42%,
    rgba(22, 34, 74, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.home-lead {
  /* Transparent: the navy and the artwork come from the page behind it. The
     bar is in the flow above, so there is no height to reserve here. */
  background: transparent;
  padding: 26px 0 0;
  position: relative;
  /* Above .home-sheet, which follows it in the document. The mode cards are
     lifted 24px past the band's bottom edge on purpose, and at equal z-index
     the later element wins -- the sheet painted over them and sheared off their
     bottom border and corners. */
  z-index: 2;
}

/* Keep the wording, the prompt and the cards above the texture. */
.home-lead__inner,
.home-modes__prompt,
.home-modes {
  position: relative;
  z-index: 1;
}

.home-lead__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.home-lead__title {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}

.home-lead__sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.0625rem;
  margin: 10px 0 0;
  max-width: 46ch;
}

/* ---------- the week rail ---------- */

.home-week {
  /* inline-flex so the rule underneath stops at Friday instead of running on
     into empty space. */
  display: inline-flex;
  gap: clamp(18px, 5vw, 54px);
  list-style: none;
  margin: 30px 0 0;
  padding: 0 0 26px;
  position: relative;
}

.home-week::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.home-week__day {
  position: relative;
  padding-top: 26px;
  color: rgba(255, 255, 255, 0.55);
  min-width: 34px;
}

.home-week__day::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.home-week__day.is-past {
  color: rgba(255, 255, 255, 0.3);
}

.home-week__day.is-past::before {
  background: rgba(255, 255, 255, 0.18);
}

.home-week__day.is-today {
  color: #fff;
}

.home-week__day.is-today::before {
  background: var(--home-red);
  width: 13px;
  height: 13px;
  top: 9px;
  left: -2px;
  box-shadow: 0 0 0 5px rgba(215, 38, 61, 0.28);
}

.home-week__name {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.home-week__num {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.1;
}

/* ---------- the two ways in ---------- */

/* The line that names the pair below as a choice. It sits on the dark band
   between the week rail and the cards, so it takes the lead's light treatment
   rather than the cards' paper -- and is a touch brighter and heavier than
   .home-lead__sub, so it reads as an instruction rather than more description.
   The width and padding match .home-modes so it lands on the same column edge
   as the cards it labels. No bottom margin: .home-modes is pulled down 24px by
   its own transform, which is the gap underneath. */
.home-modes__prompt {
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 0 24px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.home-modes {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  transform: translateY(24px);
}

.home-mode {
  appearance: none;
  border: 1px solid var(--home-line);
  background: var(--home-paper);
  border-radius: 14px;
  padding: 20px 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
  box-shadow: 0 10px 26px rgba(22, 34, 74, 0.12);
}

.home-mode:hover {
  border-color: #c3cade;
}

.home-mode:focus-visible {
  outline: 3px solid var(--home-red);
  outline-offset: 2px;
}

/* Not twins. Whichever mode is open reads as the live one; the other stays
   available but quiet, so the page never looks like two equal buttons. */
.home-mode.is-open {
  border-color: var(--home-red);
  /* Reads as a 2px red edge while staying a 1px border. Widening the border
     itself would be simpler, but everything here is border-box, so 1px -> 2px
     keeps the outer size and shrinks the content box instead -- shifting every
     label a pixel. The open card is chosen by toggling this class on the live
     element rather than by reloading, so that shift would twitch on each click.
     A ring hugging the border costs no layout at all. */
  box-shadow:
    0 0 0 1px var(--home-red),
    0 14px 34px rgba(22, 34, 74, 0.2);
}

/* The quiet card is the one that does not read as a button: .is-open earns a
   coloured border and a deeper shadow, and everything the other card has is an
   absence. A ring gives it an affordance of its own without making the pair
   look equal, so the "not twins" rule above still holds.

   The mid blue-grey is doing a specific job. These cards straddle the band's
   bottom edge, so the ring is drawn over navy along its top and over the white
   sheet along its bottom -- a navy ring sinks into the band, a white one into
   the sheet, and only a mid tone holds against both. It is deliberately neither
   --home-red nor --home-navy: both already mean "this is the open card", and
   spending them on "this is clickable" would blur the one distinction the pair
   carries. */
.home-mode:not(.is-open) {
  border-color: #cdd4e6;
  box-shadow:
    0 10px 26px rgba(22, 34, 74, 0.12),
    0 0 0 4px rgba(122, 140, 190, 0.22);
}

/* Hover has to out-state the resting ring. The shared .home-mode:hover above
   only nudges border-color, which the ring now covers -- without this the quiet
   card would stop answering the pointer the moment it started glowing. */
.home-mode:not(.is-open):hover {
  border-color: #aab4d0;
  box-shadow:
    0 12px 30px rgba(22, 34, 74, 0.16),
    0 0 0 6px rgba(122, 140, 190, 0.34);
}

.home-mode__name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--home-navy);
}

.home-mode.is-open .home-mode__name {
  color: var(--home-red);
}

.home-mode__what {
  font-size: 0.875rem;
  color: var(--home-muted);
  line-height: 1.45;
}

.home-mode__state {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--home-muted);
  margin-top: 6px;
}

.home-mode__state--open {
  color: var(--home-open);
}

.home-mode__state--shut {
  color: var(--home-soon);
}

/* ---------- the grids ---------- */

/* Covers the page's artwork once the band has finished. Full width, so the
   texture does not show either side of the centred grid. */
.home-sheet {
  width: 100%;
  align-self: stretch;
  position: relative;
  z-index: 1;
  background: var(--home-paper);
  /* Grow to fill .wrapper (see ui-fixes.css: .has-sticky-footer). Without this
     a short list leaves a band of bare navy between the white and the footer,
     which reads as the footer starting too high. The menu page carries the same
     fix for the same reason. */
  flex: 1 0 auto;
}

.home-main {
  /* .wrapper is a flex container, so a block child sizes to its content rather
     than filling the line. Without this the grid sat 230px right of the hero
     above it. */
  width: 100%;
  align-self: stretch;
  max-width: 1100px;
  margin: 0 auto;
  padding: 58px 24px 64px;
  background: transparent;
}

.home-panel__title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--home-navy);
  margin: 0 0 20px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.home-place__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--home-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--home-paper);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s;
}

.home-place__link:hover {
  border-color: var(--home-navy);
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
}

.home-place__link:focus-visible {
  outline: 3px solid var(--home-red);
  outline-offset: 2px;
}

.home-place__shot {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--home-wash);
  overflow: hidden;
}

.home-place__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-place__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 15px 16px;
}

.home-place__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--home-navy);
  letter-spacing: -0.01em;
}

.home-place__desc {
  font-size: 0.8125rem;
  color: var(--home-muted);
  line-height: 1.4;
}

.home-place__min {
  font-size: 0.75rem;
  color: var(--home-muted);
  margin-top: 5px;
}

/* Each restaurant states its own deadline, because they differ within one
   company. */
.home-place__cutoff {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--home-open);
  margin-top: 4px;
}

.home-place__cutoff.is-shut {
  color: var(--home-soon);
}

/* Past its cut-off, a restaurant stays visible and reachable -- the menu is
   still worth reading for tomorrow -- but should not look like the ones you
   can still order from. */
.home-place__link.is-shut .home-place__shot {
  opacity: 0.45;
}

.home-place__link.is-shut .home-place__name {
  color: var(--home-muted);
}

.home-grid__empty {
  color: var(--home-muted);
  grid-column: 1 / -1;
  margin: 0;
}

.home-note {
  max-width: 1100px;
  margin: 0 auto 48px;
  padding: 16px 20px;
  border-left: 3px solid var(--home-soon);
  background: #fdf6ec;
  color: #6b4a12;
}

.home-note p { margin: 0; }

/* ---------- lunch or dinner ---------- */

.home-dialog .modal-content {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  font-family: 'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.home-dialog .modal-header {
  align-items: flex-start;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--home-line);
}

/* The restaurant is what the question is about, so it is the heading. */
.home-dialog__place {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--home-navy);
  margin: 0;
  line-height: 1.2;
}

/* Address, phone and hours are context. One quiet stack, not three centred
   paragraphs competing with the name. */
.home-dialog__where {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  color: var(--home-muted);
  line-height: 1.5;
}

.home-dialog__where span { display: block; }

.home-dialog .modal-body { padding: 20px 24px 24px; }

.home-dialog__ask {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--home-navy);
  margin: 0 0 14px;
}

.home-dialog__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 575px) {
  .home-dialog__options { grid-template-columns: 1fr; }
}

.home-meal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--home-line);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.home-meal:hover {
  border-color: var(--home-navy);
  box-shadow: 0 6px 18px rgba(22, 34, 74, 0.12);
  color: inherit;
  text-decoration: none;
}

.home-meal:focus-visible {
  outline: 3px solid var(--home-red);
  outline-offset: 2px;
}

.home-meal__name { font-weight: 800; font-size: 1.125rem; color: var(--home-navy); }
.home-meal__what { font-size: 0.875rem; color: var(--home-muted); line-height: 1.45; }

/* Pinned to the bottom so both cards line up however long the descriptions
   run -- the old pair left a gap under the shorter one. */
.home-meal__facts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
  padding-top: 12px;
}

/* Only actual good news is green. "Fee set by the restaurant" is a thing to
   know, not a benefit, and colouring both the same said they were alike. */
.home-meal__fee { font-size: 0.8125rem; font-weight: 600; color: var(--home-muted); }
.home-meal__fee--free { color: var(--home-open); }

.home-meal__cutoff { font-size: 0.8125rem; font-weight: 600; color: var(--home-navy); }
.home-meal__cutoff.is-shut { color: var(--home-soon); }

/* ---------- smaller screens ---------- */

@media (max-width: 767px) {
  .home-lead { padding-top: 18px; }
  .home-modes { grid-template-columns: 1fr; }
  .home-week { gap: 0; justify-content: space-between; }
  .home-main { padding-top: 46px; }
}

/* The panel swap is the one piece of motion: it answers a click and shows what
   changed. Nothing else on the page animates on load. */
@media (prefers-reduced-motion: no-preference) {
  .home-panel.is-open {
    animation: home-panel-in 0.22s ease-out;
  }
}

@keyframes home-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}