/* mudayo.com — one stylesheet for every page.
   Look (decided 2026-11-15): blue geometric mountains with small trees behind a 3 × 3 grid of white tiles.
   Square corners everywhere except the tiles (the developer asked for rounded tiles only).
   Light and dark follow the visitor's device setting. Colours live in the tokens below; never hard-code them. */

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Sky and scenery */
  --sky-top: #b9d7f1;
  --sky-bottom: #eaf4fb;
  --orb: #fff4d8;
  --star: #ffffff;
  --star-opacity: 0;
  --far-a: #a3c5e6;
  --far-b: #8bb3da;
  --mid-a: #6497cb;
  --mid-b: #4d82ba;
  --near-a: #2f6aa3;
  --near-b: #255a8f;
  --ground: #1d4c7c;
  --tree: #1f6470;
  --tree-shade: #164a54;

  /* Text and surfaces */
  --text: #0e2640;
  --text-muted: #34506e;
  --tile: #ffffff;
  --tile-text: #0e2640;
  --tile-muted: #4a5d74;
  --tile-shadow: 0 1px 2px rgb(14 38 64 / 0.12), 0 8px 24px rgb(14 38 64 / 0.14);
  --tile-shadow-hover: 0 2px 4px rgb(14 38 64 / 0.16), 0 14px 32px rgb(14 38 64 / 0.2);
  --accent: #1f5c99;
  --focus: #0b57d0;
  --panel: #ffffff;
  --panel-text: #0e2640;
  --panel-muted: #4a5d74;
  --footer-bg: #0f3358;
  --footer-text: #e3edf8;
  --toggle-border: #8fb0d3;
}

/* Dark colours apply when the device asks for dark and the visitor has not picked light with the switch
   (theme.js sets data-theme on <html>), or when the visitor picked dark. The two blocks must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --sky-top: #070f1f;
    --sky-bottom: #17284a;
    --orb: #dfe7f5;
    --star: #e8eef9;
    --star-opacity: 0.85;
    --far-a: #2b4169;
    --far-b: #23375c;
    --mid-a: #1e335a;
    --mid-b: #182b4d;
    --near-a: #132441;
    --near-b: #0f1e38;
    --ground: #0b172d;
    --tree: #11414b;
    --tree-shade: #0b2f37;

    --text: #eef3fb;
    --text-muted: #c3cfe0;
    /* Tiles stay white as asked, a little dimmer so they do not glare at night. */
    --tile: #e4ebf4;
    --tile-text: #0e2640;
    --tile-muted: #46576d;
    --tile-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px rgb(0 0 0 / 0.45);
    --tile-shadow-hover: 0 2px 4px rgb(0 0 0 / 0.45), 0 16px 36px rgb(0 0 0 / 0.55);
    --accent: #1f5c99;
    --focus: #8ab4ff;
    --panel: #12203a;
    --panel-text: #eef3fb;
    --panel-muted: #b9c6d8;
    --footer-bg: #050c18;
    --footer-text: #c9d5e6;
    --toggle-border: #2e4469;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --sky-top: #070f1f;
  --sky-bottom: #17284a;
  --orb: #dfe7f5;
  --star: #e8eef9;
  --star-opacity: 0.85;
  --far-a: #2b4169;
  --far-b: #23375c;
  --mid-a: #1e335a;
  --mid-b: #182b4d;
  --near-a: #132441;
  --near-b: #0f1e38;
  --ground: #0b172d;
  --tree: #11414b;
  --tree-shade: #0b2f37;

  --text: #eef3fb;
  --text-muted: #c3cfe0;
  --tile: #e4ebf4;
  --tile-text: #0e2640;
  --tile-muted: #46576d;
  --tile-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px rgb(0 0 0 / 0.45);
  --tile-shadow-hover: 0 2px 4px rgb(0 0 0 / 0.45), 0 16px 36px rgb(0 0 0 / 0.55);
  --accent: #1f5c99;
  --focus: #8ab4ff;
  --panel: #12203a;
  --panel-text: #eef3fb;
  --panel-muted: #b9c6d8;
  --footer-bg: #050c18;
  --footer-text: #c9d5e6;
  --toggle-border: #2e4469;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom)) fixed;
  background-color: var(--sky-bottom);
  color: var(--text);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

main {
  flex: 1;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--panel);
  color: var(--panel-text);
  border: 2px solid var(--focus);
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Light/dark switch (top right of every page; shown by theme.js) ---------- */

.theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--panel);
  color: var(--panel-text);
  border: 1px solid var(--toggle-border);
  cursor: pointer;
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle:hover {
  border-color: var(--panel-text);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* The icon shows the mode the button switches TO: a moon in light mode, a sun in dark mode. */
.theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

/* ---------- Scenery (home page) ---------- */

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scene .orb { fill: var(--orb); }
.scene .star { fill: var(--star); opacity: var(--star-opacity); }
.scene .far-a { fill: var(--far-a); }
.scene .far-b { fill: var(--far-b); }
.scene .mid-a { fill: var(--mid-a); }
.scene .mid-b { fill: var(--mid-b); }
.scene .near-a { fill: var(--near-a); }
.scene .near-b { fill: var(--near-b); }
.scene .ground { fill: var(--ground); }
.scene .tree { fill: var(--tree); color: var(--tree-shade); }

/* ---------- Home page ---------- */

.hero {
  padding: 3.5rem 0 1.75rem;
  text-align: center;
}

/* Logo to the left of the name (decided 2026-11-16), a little smaller than the letters. It sits on a square
   white tile in both modes: its black outlines and navy shapes need a light background, as in the artwork. */
.hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.hero-logo {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.1rem;
  background: #ffffff;
  box-shadow: var(--tile-shadow);
}

.hero h1 {
  margin: 0;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.hero p {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 1.125rem;
}

.grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
  max-width: 48rem;
}

.grid > li {
  display: flex;
}

.tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  /* Phones: roughly square, but only ever taller (never wider) when the text needs room;
     a forced square would push the whole row off the screen on narrow phones. */
  min-height: 7.5rem;
  padding: 0.5rem;
  background: var(--tile);
  color: var(--tile-text);
  border-radius: 14px;
  box-shadow: var(--tile-shadow);
  text-align: center;
  text-decoration: none;
}

.tile-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Short description under a business name. One line on wider screens; on phones it wraps in small type
   (the row grows a little if needed; all tiles in a row keep the same height). */
.tile-desc {
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--tile-muted);
  text-wrap: balance;
}

.tile-action {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 500;
}

.tile-soon {
  color: var(--tile-muted);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

a.tile {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

a.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--tile-shadow-hover);
}

a.tile:hover .tile-action {
  text-decoration: underline;
}

a.tile:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (min-width: 40rem) {
  .hero {
    padding: 1.75rem 0 1.75rem;
  }

  .hero h1 {
    font-size: 3.75rem;
  }

  .hero-logo {
    width: 3rem;
    height: 3rem;
  }

  .grid {
    gap: 1.25rem;
  }

  .tile {
    min-height: 0;
    aspect-ratio: 3 / 2;
    padding: 1rem;
  }

  .tile-name {
    font-size: 1.375rem;
  }

  .tile-desc {
    font-size: 0.875rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
  }

  .tile-action,
  .tile-soon {
    font-size: 1rem;
  }
}

/* About Mudayo: text on a solid panel so it stays readable over the scenery. Square corners. */
.about {
  max-width: 48rem;
  margin: 2rem auto 3rem;
  padding: 1.25rem 1.25rem 1.5rem;
  background: var(--panel);
  color: var(--panel-text);
  box-shadow: var(--tile-shadow);
}

.about h2 {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
  font-weight: 600;
}

.about p {
  margin: 0.5rem 0 0;
  color: var(--panel-muted);
}

@media (min-width: 40rem) {
  .about {
    padding: 1.75rem 2rem 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.tile {
    transition: none;
  }

  a.tile:hover {
    transform: none;
  }
}

/* ---------- Inner pages (privacy, 404): a plain panel on the sky ---------- */

header.site {
  padding: 1.5rem 0;
}

.brand {
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
}

.panel {
  margin: 0 auto 3rem;
  padding: 1.5rem 1.25rem 2rem;
  max-width: 44rem;
  background: var(--panel);
  color: var(--panel-text);
}

.panel h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.panel h2 {
  font-size: 1.25rem;
  margin: 2rem 0 0.5rem;
  font-weight: 600;
}

.panel .lead {
  color: var(--panel-muted);
  font-size: 1.125rem;
  margin-top: 0;
}

@media (min-width: 40rem) {
  .panel {
    padding: 2.5rem 2.5rem 3rem;
  }
}

/* ---------- Footer ---------- */

footer.site {
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 0.9375rem;
  padding: 1.25rem 0 1.5rem;
}

footer.site ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}