/* SPDX-License-Identifier: LicenseRef-Relocat-Proprietary
   Copyright (C) 2025-2026 Ruslan Zykun. All rights reserved.

   The shell every relocat.org page shares: container, sticky top bar, theme
   toggle, skip link, footer, and the vertical rhythm of a document page.
   Loaded after tokens.css by every public page; the page's own stylesheet
   (landing.css or prose.css) comes last.

   Split out of landing.css when the legal pages joined the same shell
   (spec 2026-09-16-public-shell-design.md). Rules here are unchanged from
   the landing's shipped styles apart from .site-footer (was .landing-footer)
   and .page (new). */

:root { --r: 10px; --r-sm: 7px; --r-lg: 14px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body { font-size: 16px; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.btn, .btn-icon, .theme-toggle { border-radius: var(--r-sm); }
.btn:hover { text-decoration: none; }

/* Keep the footer at the bottom of short pages (the 404 and 500 pages).
   Restored here when public.css was deleted; it is what pinned the footer
   before every page shared this shell. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* Vertical rhythm of a document page (the landing sets its own per section) */
.page { padding-top: 64px; padding-bottom: 88px; }

/* ============================================================
   Skip link — visible on focus only
   ============================================================ */

.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--accent-on);
  z-index: 100;
}

/* ============================================================
   Header
   ============================================================ */

.top { height: var(--topbar-h); border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 20; }
.top .wrap { height: 100%; display: flex; align-items: center; gap: 20px; }
.top .logo, .top .logo:hover { font-size: 24px; color: var(--brand); margin-right: auto; text-decoration: none; }
.top nav { display: flex; gap: 4px; }
.top nav a { color: var(--text-secondary); font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: var(--r-sm); }
.top nav a:hover { background: var(--surface); color: var(--text-primary); text-decoration: none; }

/* Theme toggle — markup public/_theme_toggle.html, behaviour theme-toggle.js.
   The moon offers dark, the sun offers light. */
.theme-toggle { background: transparent; color: var(--text-secondary); border: 1px solid transparent; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 100ms ease, color 100ms ease; }
.theme-toggle:hover { background: var(--surface); color: var(--text-primary); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  .theme-toggle .icon-sun { display: block; }
  .theme-toggle .icon-moon { display: none; }
}
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
.no-js .theme-toggle { display: none; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer { border-top: 1px solid var(--border); padding: 32px 0 40px; background: var(--bg); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-secondary); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-footer nav a { color: var(--text-secondary); }
.site-footer nav a:hover { color: var(--text-primary); text-decoration: none; }
.site-footer .logo { color: var(--brand); font-size: 18px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 860px) {
  .top nav a:not(.nav-phone) { display: none; }
  .page { padding-top: 40px; padding-bottom: 56px; }
}

@media (max-width: 480px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
}

/* Google Play badge — landing and /why */
.google-play-cta { display: inline-block; line-height: 0; }
.google-play-cta img { height: 60px; width: auto; }  /* Google's recommended desktop minimum */
a.google-play-cta:hover { opacity: .9; }
.google-play-cta.disabled { cursor: not-allowed; }
.google-play-cta.disabled img { filter: grayscale(100%); opacity: .5; }