/* Ideearendus Frontend Base — minimal, non-conflicting with template style.css */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }

/* Sticky footer — every template stacks its blocks (navbar, hero, ..., footer) as flat
   siblings inside <main> (see Blocks::renderPage()), so on a page short enough to not fill
   the viewport the footer would otherwise end right after the last block instead of sitting
   at the bottom of the screen. Blocks::renderPage() always wraps each block in
   `.cms-block cms-block--{type}`, so `.cms-block--footer` is a stable, template-agnostic
   hook — no per-template CSS needed.

   Targeted by the `main` element itself, not `#main-content` — templates author their own
   <main> tag and do not agree on its id (main-content, main, sisu, mp-main, ...), so an
   id-based selector silently fails to apply on any template that picked a different one.
   The landmark tag is the one thing every template actually shares. */
html, body { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { display: flex; flex-direction: column; flex: 1 0 auto; }
main > .cms-block--footer { margin-top: auto; }

/* Sticky navbar — every template's own navbar CSS sets `position: sticky` on the inner
   nav element, but that only actually works if ITS OWN containing block is taller than
   the navbar itself. Wrapped in a per-block `<section>` that's exactly navbar-height (see
   above), there's no room for it to ever visibly "stick" — it just scrolls away with its
   own tiny wrapper almost immediately, on every page rendered through the normal block
   stack. Moving position:sticky up to the wrapper itself fixes this for every template at
   once: the wrapper's containing block is now <main>, which spans the whole page.
   Matched by suffix, not the exact name `navbar` — custom templates namespace their block
   types with a short brand prefix (ap-navbar, mr-navbar, rr-navbar, ...), and an exact-match
   selector silently misses every one of them, leaving their header non-sticky. The block-type
   class is always last in `class="cms-block cms-block--{type}"` (Blocks::renderPage()), so
   matching the end of the whole `class` attribute string is safe. */
main > [class$="-navbar"] { position: sticky; top: 0; z-index: 100; }

/* Prose (rich text content from editor) */
.cms-prose h1,.cms-prose h2,.cms-prose h3,.cms-prose h4 { margin-top: 1.5em; margin-bottom: .5em; font-weight: 700; line-height: 1.3; }
.cms-prose p { margin-bottom: 1em; }
.cms-prose ul,.cms-prose ol { margin: 0 0 1em 1.5em; }
.cms-prose li { margin-bottom: .3em; }
.cms-prose a { color: var(--primary, #0d9488); text-decoration: underline; }
.cms-prose blockquote { border-left: 4px solid var(--primary, #0d9488); padding-left: 16px; color: var(--text-muted, #94a3b8); font-style: italic; margin: 1.5em 0; }
.cms-prose strong { font-weight: 700; }
.cms-prose img { border-radius: 8px; margin: 1em 0; }

/* Language switcher — shared across every template's navbar (Blocks::langSwitcherHtml()),
   styled once here rather than per-template so all 14+ templates without their own picked
   this up automatically. The trigger button inherits the surrounding nav text color so it
   blends into whichever template it's dropped into; the dropdown panel is a self-contained
   light card (works as a floating overlay regardless of whether the underlying template is
   a light or dark design — the same reasoning any native OS/browser dropdown uses). */
.cms-lang-switch { position: relative; display: inline-flex; align-items: center; }
.cms-lang-switch__btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px;
  background: none; border: none; color: inherit; font: inherit; font-size: .88em;
  font-weight: 600; cursor: pointer; line-height: 1;
}
.cms-lang-switch__btn svg { width: 11px; height: 11px; flex-shrink: 0; transition: transform .2s; opacity: .7; }
.cms-lang-switch.open .cms-lang-switch__btn svg { transform: rotate(180deg); }
.cms-lang-switch__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 200;
  min-width: 168px; background: #fff; color: #17171b;
  border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.25);
  padding: 6px; display: flex; flex-direction: column; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cms-lang-switch.open .cms-lang-switch__panel { opacity: 1; visibility: visible; transform: none; }
.cms-lang-switch__item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; color: #17171b; text-decoration: none; font-size: .88rem; font-weight: 500;
  transition: background .15s;
}
.cms-lang-switch__item:hover { background: rgba(0,0,0,.05); }
.cms-lang-switch__item.active { background: rgba(0,0,0,.06); font-weight: 700; }
.cms-lang-switch__item span { flex: 1; }
.cms-lang-switch__item svg { width: 14px; height: 14px; flex-shrink: 0; color: #16a34a; }