/* =========================================================
   SILO Friend pages — friendcommon.css (shared by every friend page)

   Holds everything the pages have in common: colors, fonts, text
   size, the header, buttons, cards, the van band, the footer and
   the food rows used by Shop and My Bag.

   Every friend page loads this FIRST, then its own file:
     <link rel="stylesheet" href="../../css/friendcommon.css">
     <link rel="stylesheet" href="../../css/homescreen.css">
   Page files should only hold styles that page alone uses.
   ========================================================= */

:root {
  /* ---- Colors ---- */
  --green: #5CB547;        /* SILO header green (dark text on top) */
  --green-deep: #2E7A21;   /* text-safe green: buttons, links, "selected" */
  --dark: #000000;         /* header pills, card borders, van band, footer */
  --forest: #1C3219;       /* dark green: borders on Shop and My Bag */
  --ink: #151A14;          /* main text */
  --muted: #3E4A3C;        /* quieter text */
  --paper: #FBFCF8;        /* page background */
  --white: #FFFFFF;
  --yellow: #FFE07A;
  --light-green: #BFE3B4;
  --pale-green: #EEF5EB;   /* hover / selected background */
  --track: #E4EBDF;        /* tags, thin dividers */
  --rule: #9AA697;         /* lines between food rows */
  --focus: #1A56DB;        /* keyboard focus ring */

  /* ---- Type and shape ---- */
  --font-head: "Lora", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", Verdana, "Segoe UI", sans-serif;
  --radius: 14px;
  --radius-sm: 12px;

  /* ---- Text size: 1 = normal, 1.2 = A+ ---- */
  --scale: 1;
  color-scheme: light;
}
html.text-large { --scale: 1.2; }

/* 1rem = 20px (24px with A+). Every size below is in rem/em, so A+ scales the whole page. */
html { font-size: calc(20px * var(--scale)); }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}
img { max-width: 100%; }
a, button, input, select, textarea { font: inherit; }
a { color: var(--green-deep); }
a:hover { color: var(--forest); }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

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

/* Hidden on screen, still read by screen readers */
.visually-hidden, .vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  padding: 12px 18px; border-radius: var(--radius-sm);
  background: var(--yellow); color: var(--ink); font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
header.site {
  background: var(--green);
  padding-block: 14px 0;
}
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { display: block; background: #fff; border-radius: 6px; padding: 4px; line-height: 0; }
.logo img { width: 150px; height: auto; display: block; }
.tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.seg { display: inline-flex; background: #fff; border: 2px solid var(--dark); border-radius: 999px; padding: 3px; }
.seg button {
  border: 0; background: transparent; color: var(--dark); font-weight: 700;
  min-height: 48px; min-width: 64px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font-size: 0.95rem;
}
.seg button[aria-pressed="true"] { background: var(--dark); color: #fff; }
.seg .sm { font-size: 0.85rem; }
.seg .lg { font-size: 1.15rem; }
.tool-label { font-size: 0.8rem; font-weight: 700; color: var(--dark); display: block; margin-bottom: 2px; }

header.site .search {
  margin-block: 14px 0;
  display: flex; background: #fff; border: 2px solid var(--dark); border-radius: 999px; overflow: hidden;
}
header.site .search input {
  flex: 1; min-width: 0; border: 0; padding: 0 20px; min-height: 56px; color: var(--ink); background: transparent;
}
header.site .search input::placeholder { color: #5b6658; }
header.site .search input:focus-visible { outline: none; }
header.site .search:focus-within { outline: 4px solid var(--focus); outline-offset: 3px; }
header.site .search button {
  border: 0; background: var(--dark); color: #fff; min-width: 64px; cursor: pointer;
  display: grid; place-items: center;
}

nav.main { margin-top: 12px; }
nav.main ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
nav.main a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 14px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.1rem;
  border-bottom: 5px solid transparent;
}
nav.main a:hover,
nav.main a[aria-current="page"] { border-bottom-color: var(--dark); color: var(--ink); }
nav.main svg { width: 34px; height: 34px; }

/* Number of foods in the bag, on the My Bag icon */
.bag-count {
  position: absolute; top: 2px; left: calc(50% + 6px);
  min-width: 30px; height: 30px; padding: 0 7px; border-radius: 15px;
  background: var(--dark); color: #fff; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}

/* Torn edge under the header */
.torn { display: block; width: 100%; height: 22px; color: var(--green); }

/* ---------- Page basics ---------- */
main { padding-block: 16px 0; }
.page { max-width: 960px; margin: 0 auto; padding: 24px 16px 40px; }

.hello h1,
.page-title {
  font-family: var(--font-head); font-weight: 700; line-height: 1.15;
  margin: 0 0 6px; text-wrap: balance;
}
.hello h1 { font-size: 2.1rem; }
.page-title { font-size: 1.8rem; margin: 0; }
.hello h1 em,
.page-title em { color: var(--green-deep); font-style: italic; }
.hello p { margin: 0 0 28px; color: var(--muted); font-size: 1.1rem; }

/* Highlighter bar behind a heading */
.hl {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 45%, var(--hl, var(--light-green)) 45%, var(--hl, var(--light-green)) 92%, transparent 92%);
  padding: 0 4px;
}

/* White cards with a heading and icon (home date cards, login card) */
.date-card,
.login-card {
  background: var(--white); border: 3px solid var(--dark); border-radius: var(--radius);
  padding: 22px 22px 24px; display: flex; flex-direction: column;
}
.date-card h2,
.login-card h2 {
  font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; margin: 0; line-height: 1.25;
  display: flex; align-items: center; gap: 12px;
}
.date-card h2 svg,
.login-card h2 svg { flex: none; width: 40px; height: 40px; }

.notice {
  margin: 16px 0; padding: 18px 20px;
  border: 3px solid var(--forest); border-radius: var(--radius);
  background: var(--yellow); font-size: 1rem;
}
.notice strong { display: block; font-size: 1.1rem; }

/* "Need help? Call the SILO office" */
.help,
.help-line { text-align: center; color: var(--muted); font-size: 1rem; }
.help { margin: 12px 0 0; }
.help-line { margin: 32px 0 0; }
.help strong { color: var(--ink); }

/* ---------- Buttons ----------
   Both class styles work: class="btn primary" (home, login)
   and class="btn btn-primary" (shop, bag). */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 72px; padding: 12px 24px; border-radius: var(--radius); text-decoration: none;
  font-weight: 700; font-size: 1.3rem; text-align: center; cursor: pointer;
}
.btn svg { width: 30px; height: 30px; flex: none; }
.btn.primary,
.btn-primary { background: var(--green-deep); color: #fff; border: 3px solid var(--green-deep); }
.btn.primary:hover,
.btn-primary:hover { background: #245F1A; border-color: #245F1A; color: #fff; }
.btn.secondary,
.btn-secondary { background: #fff; color: var(--dark); border: 3px solid var(--dark); }
.btn.secondary:hover,
.btn-secondary:hover { background: var(--pale-green); color: var(--dark); }
.btn:disabled { background: #9AAA95; border-color: #9AAA95; color: #fff; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---------- Van band + footer ---------- */
.band { margin-top: 40px; position: relative; }
.band .brush { display: block; width: 100%; height: 26px; color: var(--dark); }
.band-inner { background: var(--dark); color: #fff; padding-block: 8px 36px; }
.band-grid { display: grid; gap: 18px; align-items: center; }
.van-plate { background: #fff; border-radius: var(--radius); padding: 12px; line-height: 0; }
.van-plate img { width: 100%; height: auto; display: block; }
.band h2 {
  font-family: var(--font-head); font-style: italic; font-weight: 600;
  font-size: 1.9rem; margin: 0 0 6px; color: var(--light-green); line-height: 1.2;
}
.band p { margin: 0; font-size: 1.1rem; }
footer { background: var(--dark); color: #D7E4D3; padding-block: 0 28px; font-size: 0.9rem; }

/* ---------- Food rows (Shop and My Bag) ---------- */
.food-list,
.bag-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--rule); }
.food-row,
.bag-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 8px; border-bottom: 3px solid var(--rule);
}
.food-info,
.bag-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.food-name,
.bag-name { margin: 0; font-size: 1.1rem; font-weight: 400; line-height: 1.25; }

.food-photo {
  flex-shrink: 0; width: 112px; height: 112px;
  border-radius: var(--radius-sm); background: var(--white); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.food-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.food-photo .emoji { font-size: 3.2rem; line-height: 1; }

/* ---------- Wider and smaller screens ---------- */
@media (min-width: 760px) {
  .band-grid { grid-template-columns: 1.1fr 1fr; }
}
@media (max-width: 420px) {
  .hello h1 { font-size: 1.8rem; }
  .logo img { width: 120px; }
}
@media (max-width: 400px) {
  .food-row, .bag-row { gap: 12px; padding: 14px 4px; }
  .food-photo { width: 88px; height: 88px; }
  .food-photo .emoji { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Four menu buttons: keep labels centered when they wrap, and a little smaller on phones */
nav.main a { text-align: center; line-height: 1.2; }
@media (max-width: 480px) {
  nav.main a { font-size: 0.98rem; padding-inline: 2px; }
  nav.main svg { width: 30px; height: 30px; }
}