/*
 * Brewy look-and-feel adjustments (Oct 30 2026). Loaded by index.html after the Oct 25 stylesheet,
 * so these win. The portal doesn't load this file.
 *  1. Easier-to-read text: slightly larger small text, stronger grey for secondary text.
 *  2. Dark mode: the Oct 25 build already ships a full dark palette (.dark); this only fixes the few
 *     cards that were drawn "inverted" (dark-on-light) and would turn pale in dark mode.
 *  3. Explore search box: white, taller and outlined so it stands out.
 *  4. Bottom tab bar: pinned steady while scrolling (no floating on iPhone).
 * Light / Dark / Auto is applied by a small script in index.html's <head>; the Account → Appearance
 * card that changes it is in brewy-extras.js.
 */

/* ---------- 1. Easier-to-read text ---------- */
:root { --muted-foreground: 222 22% 25%; }
.dark { --muted-foreground: 222 20% 80%; }
.text-sm { font-size: 1rem; line-height: 1.5rem; }
.text-\[12px\] { font-size: 13px; }
body { line-height: 1.55; letter-spacing: .005em; text-rendering: optimizeLegibility; }
/* faded text (opacity-60/70/75) is too light to read comfortably */
.opacity-60 { opacity: .78; }
.opacity-70 { opacity: .82; }
.opacity-75 { opacity: .86; }

/* ---------- 2. Dark mode fixes ---------- */
html.dark { color-scheme: dark; }
/* Passport, Trails and similar header cards are drawn as "foreground on background" (navy in light);
   in dark that flips to a pale card, so keep them a deep brand navy. */
.dark .bg-foreground.text-background { background-color: hsl(222 58% 18%); color: hsl(45 60% 94%); border: 1px solid hsl(222 30% 24%); }
.dark .bg-foreground.text-background .bg-background\/15 { background-color: hsl(45 60% 94% / .14); }
.dark .bg-foreground.text-background .border-background { border-color: hsl(222 58% 18%); }
/* pale yellow date tiles on events stay pale but get their navy text */
.dark .bg-\[hsl\(47_95\%_88\%\)\] { background-color: hsl(47 70% 80%); }
/* the map pictures themselves stay light; soften them a touch so they don't glare at night */
.dark .leaflet-tile-pane { filter: brightness(.82) contrast(1.05); }
.dark .leaflet-container { background: hsl(222 48% 12%); }
.dark .leaflet-control-attribution { background: hsl(222 48% 12% / .85) !important; color: hsl(45 60% 94% / .8); }
.dark .leaflet-control-attribution a { color: hsl(47 95% 60%); }

/* ---------- 3. Explore search box ---------- */
input[data-testid="input-search"] {
  height: 3rem;
  font-size: 1.0625rem;
  background-color: #fff;
  color: hsl(222 58% 15%);
  border: 1.5px solid hsl(222 25% 72%);
  border-radius: .85rem;
  box-shadow: 0 1px 2px hsl(222 40% 20% / .06), 0 4px 12px hsl(222 40% 20% / .07);
}
input[data-testid="input-search"]::placeholder { color: hsl(222 15% 42%); opacity: 1; }
input[data-testid="input-search"]:focus-visible { border-color: hsl(222 61% 30%); }
.dark input[data-testid="input-search"] {
  background-color: hsl(222 35% 19%);
  color: hsl(45 60% 96%);
  border-color: hsl(222 25% 38%);
  box-shadow: 0 4px 14px hsl(0 0% 0% / .3);
}
.dark input[data-testid="input-search"]::placeholder { color: hsl(222 20% 76%); }
.dark input[data-testid="input-search"]:focus-visible { border-color: hsl(47 95% 55%); }
input[data-testid="input-search"] { padding-left: 2.6rem; }
/* the magnifying glass sits inside the box (just before it in the page) */
div:has(> input[data-testid="input-search"]) > svg { width: 1.15rem; height: 1.15rem; left: .85rem; color: hsl(222 25% 38%); z-index: 1; }
.dark div:has(> input[data-testid="input-search"]) > svg { color: hsl(222 20% 78%); }

/* ---------- 4. Steady bottom tab bar ---------- */
/* iPhone: the page "rubber-bands" past its ends and the blurred, see-through bar is repainted on
   every scroll frame, which makes it bob up and down. Stop the rubber-band, give the bar a solid
   background (no live blur) and its own layer so it stays put. */
html, body { overscroll-behavior-y: none; }
nav[aria-label="Tabs"] {
  bottom: 0;
  background-color: hsl(var(--card));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  contain: layout paint;
}

/* beer-mug ratings: the mug outline is drawn in navy, which vanishes on the dark background */
.dark svg [stroke="hsl(222 61% 20%)"] { stroke: hsl(45 60% 90%); }

/* map: the place button and "Add a brewery" share one row over the map; keep the place name whole */
.pointer-events-none.absolute.top-3 > [data-testid="button-change-location"] { font-size: .9375rem; padding-left: .65rem; padding-right: .65rem; }
.pointer-events-none.absolute.top-3 > button:not([data-testid="button-change-location"]) { font-size: .875rem; padding-left: .65rem; padding-right: .65rem; }