/* Taevaskoja – header + tablet tweaks that the Breakdance breakpoints (1119 / 1023) cannot express.
   1. The mobile header (hamburger + sheet) starts already at 1150px, not 1023px: the desktop nav
      with its mega panels needs ~1150px before it stops crowding the logo.
   2. On desktop the logo always keeps 2rem of air on its right so the menu never touches it.
   3. Tablet (768–1150px): the page content uses the same 1.5rem side spacing as the mobile header,
      and the section rhythm is the tablet value (9rem = 144px, between phone 132px and desktop 160px).
      Phones keep their own 1.25rem / 8.25rem. tablet.css replays Breakdance's ≤1023 class rules for
      1024–1150 so that whole range behaves as tablet.
   4. Stacked text+photo blocks (.meist-split) always show the photo first on phones AND tablets, so two
      photos never land next to each other where blocks alternate on desktop (Figma "Parandused").
   Selectors carry `.menu` / `html:root:root` so they outrank the Breakdance rules (which use
   `:root:root`) whatever the load order. menu.js closes the mobile sheet above the same width. */

.menu .logo {
  margin-right: 2rem;
}

@media (max-width: 1150px) {
  .menu {
    --page-padding: 1.5rem;
  }
  .menu .primary-menu {
    height: 4.375rem;
  }
  .menu .primary-menu__inner {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .menu .secondary-menu__actions,
  .menu .primary-menu__right,
  .menu .mega-panels {
    display: none;
  }
  .menu .menu-toggle {
    display: flex;
    width: 2rem;
    height: 2rem;
  }
  .menu .logo {
    height: 100%;
    margin-right: 0;
  }
  .menu .logo img {
    width: auto;
    height: 100%;
  }
  .meist-split .meist-split__media {
    order: -1;
  }
}

@media (max-width: 1150px) and (min-width: 768px) {
  html:root:root {
    --page-padding: 1.5rem;
    --section-space: 9rem;
  }
}