/* site.css: the landing page's own styles. Fiesta is loaded by its
   public URL and left as it is; what the page needs beyond it lives
   here. Every class is site- prefixed and every colour is a Fiesta
   token, so the page follows whichever theme and scheme the reader
   chose. */

/* The skip link: off screen until it has focus. */
.site-skip { position: absolute; inset-inline-start: 0; top: 0; z-index: 10; padding: 0.5rem 0.75rem; background: var(--rst-surface); color: var(--rst-text); transform: translateY(-200%); }
.site-skip:focus { transform: none; }

/* The top bar. */
.site-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; padding: 14px 28px; border-bottom: 1px solid var(--rst-line); font-size: 0.9rem; }
.site-brand { font-size: 1.05rem; letter-spacing: -0.01em; margin-inline-end: auto; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.site-nav > a:not([rst-btn]) { color: var(--rst-text-muted); text-decoration: none; }
.site-nav > a:not([rst-btn]):hover { color: var(--rst-text); }

/* The bunting: a still SVG for no JS and reduced motion; bunting.js
   hangs the same pennants on a canvas over it and hides the SVG. The
   row is clipped sideways, since the pennants run past the edges of a
   narrow page, and open below, where they hang over the headline. */
.site-bunting { position: relative; height: 84px; pointer-events: none; overflow-x: clip; }
.site-flags { display: block; width: 100%; height: 66px; overflow: visible; }
.site-bunting canvas { position: absolute; left: 0; top: 0; width: 100%; height: 112px; }
.site-bunting-live .site-flags { visibility: hidden; }
.site-span { fill: none; stroke: var(--rst-text-faint); stroke-width: 1.3; }
.site-tie { fill: none; stroke: var(--rst-text-faint); stroke-width: 1; }

/* The hero: headline, lede, the install line and the two buttons. */
.site-hero { text-align: center; padding: 34px 28px 0; }
/* Japanese has no spaces, so a heading would otherwise break anywhere,
   mid-word; auto-phrase breaks between phrases where the browser can
   (Chromium), and the rest fall back to the usual breaks. */
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
.site-hero h1 { font-size: 2.6rem; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 14px; }
.site-lede { font-size: 1.15rem; color: var(--rst-text-muted); margin: 0 auto 22px; max-width: 64ch; text-wrap: pretty; }
.site-install { padding: 6px 0 0; }
.site-inote { margin: 0 auto 10px; font-size: 0.95rem; font-weight: 400; color: var(--rst-text-muted); }
/* Fiesta's snippet hugs its line from the inline start; the hero is
   centred, so the box is too. */
#install [rst-snippet] { margin-inline: auto; }
.site-live { margin: 0; font-size: 0.85rem; color: var(--rst-text-muted); }
.site-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; justify-content: center; }

/* The stage the sample sits on, with the theme bar over its end corner. */
.site-stage { padding: 28px 60px 36px; margin-top: 26px; background: linear-gradient(var(--rst-bg), var(--rst-surface-2)); }
.site-themebar { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; font-size: 0.85rem; }
.site-themebar[hidden] { display: none; }
.site-themebar [rst-seg-tabs] { margin: 0; }
.site-themelabel { color: var(--rst-text-muted); }
/* The moon stands in for the scheme menu's name on a phone only. */
@media (min-width: 561px) {
  .site-scheme-icon { display: none; }
}

/* The sample: a small app window built only from Fiesta attributes. */
.site-window { background: var(--rst-surface); border: 1px solid var(--rst-line); border-radius: 10px; box-shadow: var(--rst-shadow-pop); overflow: hidden; text-align: start; }
.site-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--rst-line); }
.site-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--rst-line-strong); opacity: 0.5; }
/* The sample keeps the minimum height it had before it used rst-side,
   so its shortest pane still fills a window the size of an app's. */
.site-window [rst-side] { min-block-size: 300px; }
/* One column that never grows past the pane: an implicit auto column
   would widen to the course tabs' max-content (328px in Spanish, 338
   in Arabic), and Fiesta's seg-tabs wrap only against a width that
   holds them. */
.site-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.site-pane[hidden] { display: none; }
/* With no script every pane shows, one under the next, and a rule
   divides them. A hidden pane is still a sibling, so the divider names
   shown panes on both sides: written as .site-pane + .site-pane it
   drew a gap and a rule above every pane but the first when site.js
   showed it alone. */
.site-pane:not([hidden]) ~ .site-pane:not([hidden]) { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rst-line); }
.site-pane h2 { margin: 0; font-size: 1.05rem; }
.site-pane h3 { margin: 0 0 4px; font-size: 0.95rem; }
.site-pane p { margin: 0; font-size: 0.85rem; color: var(--rst-text-muted); }
.site-pane [rst-row] { font-size: 0.85rem; }
.site-pane [rst-row-sub] { display: block; font-size: 0.78rem; color: var(--rst-text-muted); font-weight: 400; }
.site-pane [rst-seg-tabs] { margin: 0; }
.site-pane [rst-switch] { font-size: 0.85rem; }
.site-course[hidden] { display: none; }
.site-search { display: grid; gap: 8px; }
.site-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.site-dur, .site-price { color: var(--rst-text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.site-pane [rst-form] { display: grid; gap: 10px; max-width: 420px; }
.site-pane [rst-form-foot] { margin: 4px 0 0; }
.site-pane [rst-card] { padding: 12px 16px; }

/* The six reasons. */
.site-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 28px; border-top: 1px solid var(--rst-line); }
.site-why [rst-card] { padding: 16px; }
.site-why h2 { margin: 8px 0 4px; font-size: 0.95rem; }
.site-why p { margin: 0; font-size: 0.87rem; color: var(--rst-text-muted); }
.site-why svg { width: 22px; height: 22px; stroke: var(--rst-accent); }

/* The footer. */
.site-foot { border-top: 1px solid var(--rst-line); background: var(--rst-surface-2); padding: 28px 28px 36px; font-size: 0.87rem; }
.site-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 24px; color: var(--rst-text-muted); }
.site-facts div { display: flex; gap: 6px; }
.site-facts dt { font-weight: 600; color: var(--rst-text); }
.site-facts dd { margin: 0; }
.site-foot-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 24px; }
.site-foot-brand b { font-size: 1.05rem; display: block; margin-bottom: 4px; }
.site-foot-brand p { margin: 0; color: var(--rst-text-muted); max-width: 30ch; }
.site-foot h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rst-text-muted); margin: 0 0 8px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-foot a { color: var(--rst-text-muted); text-decoration: none; }
.site-foot a:hover { color: var(--rst-text); text-decoration: underline; }

/* Narrower screens: the reasons stack, the footer's columns pair up. */
@media (max-width: 760px) {
  .site-stage { padding: 20px 12px 28px; }
  .site-why { grid-template-columns: 1fr; }
  .site-foot { padding: 24px 14px 32px; }
  .site-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot-brand { grid-column: 1 / -1; }
}

/* On a phone the window runs edge to edge, so its padding is the only
   margin: the stage drops its inline padding, and the window its side
   borders and corners. */
@media (max-width: 560px) {
  /* The headline's longest word has to fit a 320px phone in every
     language: Russian's Отпразднуйте is 329px at 2.6rem, so the size
     follows the viewport down to 1.9rem (240px at 320). */
  .site-hero h1 { font-size: clamp(1.9rem, 9.5vw, 2.6rem); }
  .site-stage { padding-inline: 0; }
  /* The theme bar stays one row, as the Row Rule asks: on a phone the
     label, three buttons and a worded menu need about 475px in Portuguese.
     So the label and the menu's name are hidden from sight but stay
     their group's and their summary's names, the moon shows instead of
     the name, and the gaps close up. */
  .site-themebar { padding-inline: 14px; gap: 8px; }
  .site-themebar [rst-seg-tabs] > button { padding-inline: 10px; }
  .site-themelabel, .site-scheme-name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-window { border-inline: 0; border-radius: 0; }
}