/*
 * Narrow screen with large text: applies only while the window is narrower than 20 times the reader's text size
 * (index.html: media="(max-width: 19.99em)"), i.e. a phone with text at about 125 % or more. At normal text size it never applies.
 * The reader's text size is kept: these rules give the words more room by shrinking what is not text (side padding, icon-button
 * boxes) in px, which does not grow with the text. Plain CSS, outside the Tailwind layers, so it wins over utility padding.
 * Loaded as its own file (not part of the first page's styles); a browser whose window does not match downloads it at low priority.
 */

/* Page gutters and panels: 12 px instead of 1-2 rem (32-64 px at 200 % text). */
.container-page, .container-wide { padding-left: 12px; padding-right: 12px; }
.card { padding-left: 12px; padding-right: 12px; }
.card .card { padding-left: 8px; padding-right: 8px; }
.info-surface { padding-left: 12px; padding-right: 12px; }

/* Buttons: text keeps its size; side padding and gaps shrink, and a button with a label takes the full width of its column so the label
   wraps at most once or twice instead of being squeezed beside another control. Icon-only buttons keep a 44 px square. */
.btn { padding-left: 10px; padding-right: 10px; gap: 6px; }
main :is(form, .card) .btn:not(.btn-sm), dialog .btn:not(.btn-sm) { width: 100%; }
.btn > svg, .btn > app-icon { flex: none; }

/* Site header: one compact row of 44 px icon buttons beside the logo (the icons do not grow with the text), then the search. */
.site-header > div { gap: 6px; padding-top: 6px; padding-bottom: 6px; }
.site-header [role="group"] { gap: 2px; }
.site-header [role="group"] .btn, .site-header [role="group"] > a, .site-header [role="group"] button,
.site-header [data-testid="theme-toggle"] { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
.site-header [role="group"] .btn > span:not([aria-hidden]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-header app-icon svg, .site-header .btn svg { width: 22px; height: 22px; }
/* Search: the button shows the magnifier (its name stays "Search" for screen readers and voice control), so the area chip and the button
   share one row. The icon is the site's own search path, white on the button colour. */
.site-header form [type="submit"] { width: 44px; min-width: 44px; padding: 0; font-size: 0; flex: none;
  background: var(--color-brand-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 105 12l4 4M11 4a7 7 0 010 14'/%3E%3C/svg%3E") center / 22px no-repeat; }
.site-header form app-search-location { flex: 1 1 0; min-width: 0; }
.site-header form :is(button, input, select, .min-h-12, .min-h-11) { min-height: 44px; }
.site-header form [type="submit"] { height: 44px; align-self: center; }
.site-header form input, .site-header form .h-11 { height: 44px; }
.site-header form .flex-wrap { flex-wrap: nowrap; }

/* Banner slides: the text keeps its size; the space kept for the arrows is the arrows' own 44 px plus a gap, not 3 rem. */
app-banner [class~="px-12"] { padding-left: 52px; padding-right: 52px; }
app-banner .btn { width: 100%; flex: 1 1 auto; }


/* Footer language button (icon only here): a 44 px square pulled back 11 px, so the globe sits on the 12 px edge with the logo and the button stays in the window. */
.site-footer .footer-lang { margin-left: -11px; }
.site-footer .footer-lang > * > button, .site-footer .footer-lang button[aria-haspopup] { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
.site-footer .footer-lang button svg { width: 22px !important; height: 22px !important; } /* the icon component sets its size inline */