/* ============================================================
   Focus rings — gentle garden treatment, not the browser default
   ============================================================
   Loaded once, site-wide, via the <link> in app/+html.tsx (Expo
   Router's custom web document — this project has no separate
   Tailwind/CSS build step, so this file is the actual global
   stylesheet for the web build only; native ignores it entirely).
*/

/* Remove the outline for mouse/pointer-triggered focus everywhere.
   Keyboard focus is handled separately below via :focus-visible, so
   keyboard-only navigation stays fully accessible — this only hides
   the ring for clicks, never for Tab/keyboard focus. */
*:focus {
  outline: none;
}

/* :focus-visible still fires for keyboard/programmatic focus, so this
   restores a visible indicator there — just a soft sage ring instead
   of the browser's harsh black default. */
*:focus-visible {
  outline: 2px solid #7A9A7E;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Any element that changes appearance on focus/hover gets a gentle
   fade instead of snapping in instantly. Includes #garden-search-box
   explicitly: it's a plain <div> (a React Native View), which the
   input/button/a/[role="button"] selectors below don't match, and
   it's the element whose border/shadow actually animates on focus
   (see the :focus-within rule below). */
input,
textarea,
button,
a,
[role="button"],
[tabindex],
#garden-search-box {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, outline-color 0.2s ease;
}

/* ============================================================
   Garden-themed input focus glow
   ============================================================
   Apply id="garden-search-box" to the *wrapping View*, not the
   TextInput itself — see app/menu.tsx. The visible pill border and
   background belong to that outer View (a <div>); the TextInput
   renders as a bare, borderless <input> inside it, so styling the
   input's own :focus does nothing visible. :focus-within on the
   wrapper fires whenever its descendant <input> has focus, which is
   exactly what we want here.

   Use id, not className, to hook this: React Native Web only forwards
   a fixed allowlist of extra DOM props (children, dataSet, dir, id,
   tabIndex, testID, nativeID, ...) to the underlying element for
   TextInput specifically, and className isn't on that list — it's
   silently dropped and never reaches the DOM for TextInput (it does
   work directly on View/Pressable/Text). id is on the list for every
   primitive, so it's the one hook that's reliable everywhere.

   !important is required on the two overridden properties below: this
   wrapper's border color is computed at runtime from the app's theme
   object (not a static style RN Web can precompile into a class), so
   React Native Web renders it as an inline style="..." attribute on
   the DOM node. Inline styles beat plain stylesheet rules regardless
   of selector specificity — only !important can win against that.
*/
#garden-search-box:focus-within {
  border-color: #7A9A7E !important;
  box-shadow: 0 0 0 4px rgba(226, 239, 224, 0.6) !important;
}

/* ============================================================
   Root transparency — let layout-page-backdrop garden art show
   ============================================================
   RN Web + React Navigation can paint fallback cream/white fills on
   html/body/#root and per-screen wrappers. Force those shells clear so
   only our explicit layout-page-backdrop owns the page tone. */
body,
#root,
[data-contents="true"],
[data-testid="layout-content"] {
  background-color: transparent !important;
}

/* React Navigation / Expo Router per-screen wrappers on web */
.react-navigation-screen,
[class*="screenContainer"] {
  background-color: transparent !important;
}