/* SPDX-FileCopyrightText: 2026 Huismus contributors
   SPDX-License-Identifier: AGPL-3.0-or-later */
/* De Huismus-site (huismus/core/site.py): alleen de opmaak die de app niet
   heeft (kop, voet, downloadknoppen). Kleuren, kaarten, knoppen en de
   hulptekst komen uit huismus.css. */

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-head, .site-main, .site-foot { width: 100%; max-width: var(--content-max); margin: 0 auto; padding-inline: var(--s-6); }
.site-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-block: var(--s-5); }
.site-head .brand { padding-inline: 0; }
.site-nav { display: flex; align-items: center; gap: var(--s-1) var(--s-5); flex-wrap: wrap; font-weight: var(--fw-medium); }
.site-nav a { color: var(--text-muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-main { flex: 1; display: flex; flex-direction: column; gap: var(--s-6); padding-block: var(--s-6) var(--s-12); }
.site-main.site-narrow { max-width: calc(820px + 2 * var(--s-6)); }
.site-main > .page-head { margin-bottom: 0; }
.site-foot { display: flex; flex-direction: column; gap: var(--s-2); padding-block: var(--s-6) var(--s-8); border-top: 1px solid var(--border); }

.hero { gap: var(--s-4); padding-block: var(--s-6) var(--s-2); }
.hero h1 { font-size: var(--fs-3xl); }
.hero .lede { font-size: var(--fs-lg); }
.downloads { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-2); }
.help-text h3 { margin-top: var(--s-2); }

@media (max-width: 640px) {
  .site-head, .site-main, .site-foot { padding-inline: var(--s-4); }
  .site-main.site-narrow { max-width: none; }
  .hero h1 { font-size: var(--fs-2xl); }
  .downloads { flex-direction: column; }
  .downloads .btn { width: 100%; }
}

/* De rondleiding op de home (site/index.html). Kaarten, pills, knoppen en
   meldingen zijn die van de app; hier alleen de indeling. */
.site-nav .btn { color: var(--on-primary); }
.site-nav .btn:hover { color: var(--on-primary); }
.site-main { gap: var(--s-12); }
.site-main.site-narrow { gap: var(--s-6); }
.section-head { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-6); }
.section-head h2, .final h2, .try h2 { font-size: var(--fs-2xl); }

.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-10); align-items: center; padding-block: var(--s-6) 0; }
.hero-text { gap: var(--s-4); align-items: flex-start; }
.hero-text .lede { font-size: var(--fs-lg); }

.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh-2, var(--sh-1)); background: var(--surface); }

.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.promises .card { display: flex; flex-direction: column; gap: var(--s-2); }
.promises .i-lg, .contribute-call > .i-lg { color: var(--primary); }
.promises h2 { font-size: var(--fs-md); }

.tour { display: flex; flex-direction: column; gap: var(--s-12); }
.tour-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-10); align-items: center; }
.tour .tour-row:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.tour .tour-row:nth-of-type(even) .tour-text { order: 2; }
.tour-text { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.tour-text h3 { font-size: var(--fs-xl); }
.tour-text p { color: var(--text-muted); }

.routes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.route { align-items: flex-start; }
.route.is-main { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--sh-1); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.checks li { display: flex; gap: var(--s-2); align-items: flex-start; }
.checks .i { color: var(--ok); margin-top: 3px; flex: none; }

.contribute-call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; }
.contribute-call h2 { font-size: var(--fs-lg); }

.final { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); padding: var(--s-10) var(--s-6); border-radius: var(--r-lg); background: var(--primary-soft); }
.final .downloads { justify-content: center; }

.help-text pre { overflow-x: auto; padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); }

@media (max-width: 900px) {
  .hero, .tour-row, .tour .tour-row:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .tour .tour-row:nth-of-type(even) .tour-text { order: 0; }
  .promises, .routes-grid { grid-template-columns: minmax(0, 1fr); }
  .contribute-call { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .site-main { gap: var(--s-10); }
  /* Logo en vlag op de eerste regel, het menu eronder. */
  .lang-switch { order: 1; margin-left: auto; }
  .site-nav { order: 2; width: 100%; margin-left: 0; }
  .site-nav .btn { display: none; }
}
.site-main .titles .pill { align-self: flex-start; }
.counter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* De taalkeuze rechtsboven: de ronde vlag en code van de huidige taal; een
   klik opent een menuutje (popover, zonder JS) met de andere taal. */
.site-nav { margin-left: auto; }
.lang-switch { anchor-name: --taal; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 600 var(--fs-sm)/1 var(--font-sans); cursor: pointer; }
.lang-switch:hover, .lang-switch:focus-visible { background: var(--surface-2); }
.lang-switch .i { width: 14px; height: 14px; color: var(--text-muted); }
.lang-menu { position-anchor: --taal; inset: auto; top: anchor(bottom); right: anchor(right); margin-top: 6px; min-width: 180px; }
@supports not (anchor-name: --taal) { .lang-menu { inset: 64px var(--s-6) auto auto; } }
.lang-menu .muted { margin-left: auto; font-weight: var(--fw-regular); }
.flag { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .12); flex: none; }
.btn .os { width: 18px; height: 18px; }

/* Het vogeltje van het logo (site/_mus.html). Op de home zit het op de rand
   van de schermafbeelding: het pikt, hupt, en vliegt af en toe weg en terug.
   Onderaan vliegt het binnen terwijl je scrolt en landt het op een dakgoot.
   Zittend zie je de ingevouwen vleugel, vliegend flappert de opgeslagen
   vleugel. Alleen CSS; met "minder beweging" zit het stil. */
.hero-shot { position: relative; }
.mus { position: absolute; z-index: 1; display: block; width: 46px; height: 46px; pointer-events: none; }
.mus-body { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.mus svg { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--primary); }
.mus .mus-accent { fill: var(--accent); }
.mus .mus-eye { fill: var(--surface); }
.mus .mus-wing-up { opacity: 0; transform-box: view-box; transform-origin: 10.8px 14px; }
.mus .mus-wing { transform-box: view-box; transform-origin: 11.5px 14.6px; }
@keyframes mus-flap { from { transform: rotate(-6deg); } to { transform: scaleY(-.75) rotate(10deg); } }

/* Bovenaan: een rondje van 18 seconden. */
.mus-hero { top: -68px; right: calc(50% - 23px); animation: mus-hero-route 18s ease-in-out infinite; }
.mus-hero .mus-body { animation: mus-hero-pose 18s ease-in-out infinite; }
.mus-hero .mus-wing-up { animation: mus-flap .16s ease-in-out infinite alternate, mus-hero-flying 18s step-end infinite; }
.mus-hero .mus-wing { animation: mus-hero-sitting 18s step-end infinite; }
@keyframes mus-hero-route {
  0%, 52% { transform: none; opacity: 1; }
  54% { transform: translate(-8px, -10px) rotate(-6deg); }           /* opstijgen */
  62% { transform: translate(240px, -200px) rotate(-14deg) scale(.8); opacity: 1; }
  63% { opacity: 0; }
  72% { transform: translate(-520px, -160px) rotate(8deg) scale(.8); opacity: 0; }
  73% { opacity: 1; }
  84% { transform: translate(-30px, -18px) rotate(10deg); }
  87% { transform: none; }                                           /* landen */
  100% { transform: none; opacity: 1; }
}
@keyframes mus-hero-pose {
  0%, 12%, 52%, 87%, 100% { transform: none; }
  14% { transform: rotate(14deg); } 16% { transform: rotate(4deg); } 18% { transform: rotate(14deg); } 20% { transform: none; }  /* pikken */
  32% { transform: scaleY(.92); } 34% { transform: translateY(-12px) rotate(-6deg); } 36% { transform: scaleY(.94); } 38% { transform: none; }  /* hupje */
  88% { transform: scaleY(.9); } 90% { transform: none; }            /* neerkomen */
}
@keyframes mus-hero-flying { 0% { opacity: 0; } 53% { opacity: 1; } 87% { opacity: 0; } }
@keyframes mus-hero-sitting { 0% { opacity: 1; } 53% { opacity: 0; } 87% { opacity: 1; } }

/* Onderaan: binnenvliegen, aan het scrollen gekoppeld. Browsers zonder
   scroll-animaties tonen het vogeltje gewoon op de goot. */
.mus-gutter { position: relative; width: 120px; height: 56px; margin-bottom: calc(-1 * var(--s-2)); view-timeline: --mus-goot block; }
.mus-gutter::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 4px; border-radius: 2px; background: var(--border-strong); }
.mus-goot { left: 37px; bottom: 7px; }
.mus-goot .mus-body { animation: mus-idle 7s ease-in-out 2.5s infinite; }
@keyframes mus-idle {
  0%, 52%, 100% { transform: none; }
  55% { transform: rotate(14deg); } 58% { transform: rotate(4deg); } 61% { transform: rotate(14deg); } 64% { transform: none; }
  76% { transform: scaleY(.92); } 80% { transform: translateY(-12px) rotate(-6deg); } 84% { transform: scaleY(.94); } 87% { transform: none; }
}
@supports (animation-timeline: view()) {
  .mus-goot { animation: mus-goot-route linear both; animation-timeline: --mus-goot; animation-range: entry 0% cover 50%; }
  .mus-goot .mus-wing-up { animation: mus-flap .16s ease-in-out infinite alternate, mus-goot-flying linear both; animation-timeline: auto, --mus-goot; animation-range: normal, entry 0% cover 50%; }
  .mus-goot .mus-wing { animation: mus-goot-sitting linear both; animation-timeline: --mus-goot; animation-range: entry 0% cover 50%; }
}
@keyframes mus-goot-route {
  0% { transform: translate(-320px, -150px) rotate(-12deg) scale(.8); }
  55% { transform: translate(-110px, -70px) rotate(-6deg) scale(.92); }
  92% { transform: translate(-6px, -8px) rotate(8deg); }
  100% { transform: none; }
}
@keyframes mus-goot-flying { 0%, 94% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes mus-goot-sitting { 0%, 94% { opacity: 0; } 95%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .mus, .mus .mus-body, .mus .mus-wing-up, .mus .mus-wing { animation: none !important; }
}
@media (max-width: 900px) {
  .mus-hero { top: -58px; right: calc(50% - 22px); width: 44px; height: 44px; }
  .hero-shot { margin-top: var(--s-12); }
}

/* Het logo bovenaan: groter dan in de zijbalk van de app. */
.site-head .brand { gap: 10px; font-size: var(--fs-xl); }
.site-head .brand .mark { width: 40px; height: 40px; }