/* Computers and tablets (html.wide, set by app/mobile.js): the phone's layout, sized for a big screen.
   The name and search along the top; the three tabs and Menu float in a bar at the bottom centre; the filters,
   Church Near Me, favorites, tours, language and theme all live in the same four-part menu, which opens above
   that bar. The side buttons keep only Near Me, zoom and the whole globe. */
:root.wide { --dock: 62px; }

/* top: the name on the left, search in the middle; the tabs move to the bottom bar */
.wide .modes, .wide .brand .season-row { display: none; }
.wide header.top { align-items: center; flex-wrap: nowrap; }
.wide header.top::before { inset: 0 0 -30px; }
.wide .search { flex: 0 1 560px; margin: 0 auto; }
.wide .brand { flex: 0 1 auto; }
/* the search sits in the true middle, over the globe; a long name wraps instead of pushing it aside */
@media (min-width: 1000px) {
  :root.wide { --sw: min(520px, calc(100vw - 480px)); }
  .wide .search { position: absolute; left: 50%; top: max(14px, env(safe-area-inset-top, 0px)); width: var(--sw); margin: 0; transform: translateX(-50%); }
  .wide .brand { max-width: calc(50vw - var(--sw) / 2 - 36px); }
}
@media (max-width: 999px) { .wide header.top::after { content: ''; flex: 0 1 120px; } }

/* the bottom bar: the three tabs and Menu, the same buttons as on phones */
.wide .mnav {
  display: flex; position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  gap: 2px; padding: 4px; border-radius: 26px; border: 1px solid var(--line); background: var(--panel);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px #0008;
}
.wide .mnav button {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 21px;
  color: var(--gold-soft); font-size: 14px; position: relative;
}
.wide .mnav button:hover { background: rgba(232, 184, 74, 0.1); }
.wide .mnav svg { width: 18px; height: 18px; }
.wide .mnav .ic { font-size: 16px; line-height: 18px; height: 18px; }
.wide .mnav button[aria-pressed="true"] { background: var(--gold); color: #1a1406; font-weight: 600; }
.wide .mnav #mnavMenu { color: var(--ink); }
.wide .mnav #mnavMenu[aria-expanded="true"] { background: rgba(232, 184, 74, 0.16); color: var(--gold-soft); }
.wide .mnav #mnavMenu[data-n]:not([data-n=""])::after { top: 2px; left: auto; right: 4px; }

/* everything that sat along the bottom now sits above the bar */
.wide .life { bottom: calc(40px + var(--dock) + 10px + env(safe-area-inset-bottom, 0px)); right: calc(max(16px, env(safe-area-inset-right, 0px)) + 54px); }
.wide .float-card { bottom: calc(40px + var(--dock) + 10px + env(safe-area-inset-bottom, 0px)); }

/* side buttons: Near Me, zoom, whole globe, all the same round button in one straight column (the names show
   on hover); everything else is in the menu */
.wide .ctrls > :not(#nearBtn):not(#zin):not(#zout):not(#home) { display: none !important; }
.wide .ctrls { justify-items: center; gap: 10px; }
.wide .ctrls button { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.wide .ctrls svg { width: 20px; height: 20px; }
.wide .ctrls .lbl { display: none; }

/* the menu: a panel above the bottom bar, in two columns; a click anywhere else closes it */
.wide .msheet { position: fixed; inset: 0; z-index: 14; background: transparent; }
.wide .ms-box {
  display: block; columns: 2; column-gap: 28px;
  left: 50%; right: auto; top: auto; transform: translateX(-50%); bottom: calc(40px + var(--dock) + 10px + env(safe-area-inset-bottom, 0px));
  width: min(780px, calc(100vw - 32px)); max-height: calc(100% - 40px - var(--dock) - 90px); padding: 20px 22px 18px;
  border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px #000c; animation: msRise .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes msRise { from { transform: translate(-50%, 12px); opacity: 0; } }
.wide .ms-box > * { break-inside: avoid; margin: 0 0 14px; }
.wide .ms-box > .ms-h { margin: 0 0 10px; }
.wide .ms-box > .ms-h ~ .ms-h { padding-top: 14px; }
/* Find a Church fills the left column; My Churches starts the right */
.wide .ms-box > h3[data-i18n="mMine"] { break-before: column; border-top: 0; padding-top: 0; }
.wide #msHead:empty, .wide #msFoot:empty { display: none; }
.wide .ms-acts button { min-height: 0; }
.wide .ms-x { z-index: 1; }
@media (max-width: 760px) { .wide .ms-box { columns: 1; } .wide .ms-box > h3 { break-before: auto !important; } }
@media (prefers-reduced-motion: reduce) { .wide .ms-box { animation: none; } }

/* an open details card takes the right side: the bar centres in what is left, and on smaller screens the
   side buttons give way (the mouse wheel still zooms) */
.wide body.card-open .mnav { left: calc((100vw - min(420px, calc(100vw - 32px)) - 28px) / 2); }
[dir="rtl"].wide body.card-open .mnav { left: calc(100vw - (100vw - min(420px, calc(100vw - 32px)) - 28px) / 2); }
@media (max-width: 1239px) { .wide body.card-open .ctrls { display: none; } }

/* the search bar stands out in every theme: a light bar on the dark themes (a dark one on Parchment),
   taller, with a soft shadow */
:root.wide { --sw: min(580px, calc(100vw - 480px)); }
.wide .search input {
  height: 50px; border-radius: 25px; font-size: 15px; padding-left: 46px;
  background: color-mix(in srgb, var(--ink) 94%, transparent); color: var(--space);
  border: 1.5px solid color-mix(in srgb, var(--ink) 60%, transparent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.wide .search input::placeholder { color: color-mix(in srgb, var(--space) 85%, var(--ink)); opacity: 1; }
.wide .search input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent), 0 8px 28px rgba(0, 0, 0, 0.5); }
.wide .search > svg { left: 17px; top: 16px; width: 18px; height: 18px; stroke: var(--space); }
[dir="rtl"].wide .search input { padding: 0 46px 0 16px; }
[dir="rtl"].wide .search > svg { left: auto; right: 17px; }
.wide .results { top: 58px; }
.wide .search input { color-scheme: light; }  /* the clear (×) button reads dark on the light bar */
:root.wide[data-theme="parchment"] .search input { color-scheme: dark; }