/* Prototype-specific base, typography and print rules. */
@font-face {
  font-family: 'Swegon Brown';
  src: url('../media/fonts/SwegonBrownTT-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Swegon Brown';
  src: url('../media/fonts/SwegonBrownTT-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Swegon Brown';
  src: url('../media/fonts/SwegonBrownTT-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Swegon Brown';
  src: url('../media/fonts/SwegonBrown-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

body {
  font-family: 'Swegon Brown', sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
  min-height: 100vh;
}

.swegon-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  border-radius: 0.25rem;
}

.swegon-input {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

.swegon-input:focus {
  border-color: #00794D;
  box-shadow: 0 0 0 2px rgba(0, 121, 77, 0.15);
  outline: none;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 121, 77, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 121, 77, 0.4); }

@font-face {
  font-family: 'SwegonIcon';
  src: url('../media/SwegonIcon.eot');
  src: url('../media/SwegonIcon.eot?#iefix') format('embedded-opentype'),
       url('../media/SwegonIcon.woff') format('woff'),
       url('../media/SwegonIcon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.swegon-icon {
  font-family: 'SwegonIcon', sans-serif;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Popovers (search and compact language menu) stay mounted so opening and
   closing can be communicated with a short fade/slide instead of an abrupt
   display toggle. */
.menu-popover {
  opacity: 0;
  transform: translateY(-0.35rem) scale(0.98);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.menu-popover.menu-popover-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 160ms ease, transform 180ms ease, visibility 0s linear 0s;
}

/* The drawer already uses a transform transition; this backdrop adds the
   matching fade and keeps it inert while the drawer is closed. */
#sidebar-overlay {
  transition: opacity 200ms ease;
}

#sidebar-overlay.sidebar-overlay-closed {
  opacity: 0;
  pointer-events: none;
}

#sidebar-overlay.sidebar-overlay-open {
  opacity: 1;
  pointer-events: auto;
}

/* Route changes replace the navigation markup. A brief transition still
   makes nested-menu changes readable when a link opens or closes a branch. */
/* Shared accordion primitive for the sidebar guide sections and nested links.
   Grid rows animate to the content's natural height without JavaScript
   measuring each menu level. */
.nav-menu-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: grid-template-rows 220ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 160ms ease, visibility 0s linear 220ms;
}

.nav-menu-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: grid-template-rows 220ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 160ms ease, visibility 0s linear 0s;
}

.nav-menu-panel-inner {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu-panel,
  .nav-menu-panel.is-open,
  #sidebar,
  #sidebar-overlay,
  #nav-tree,
  #lang-dropdown,
  #search-results {
    transition: none !important;
  }
}

/* On phones and tablets the content pane owns scrolling. Hide the utility
   header while reading down the page and bring it back as soon as the user
   scrolls up (or reaches the top). Desktop keeps the header fixed as before. */
@media (max-width: 1023px) {
  #app-header {
    max-height: 10rem;
    overflow: visible;
    transition: transform 180ms ease, max-height 180ms ease, min-height 180ms ease,
      padding-top 180ms ease, padding-bottom 180ms ease, border-bottom-width 180ms ease;
    will-change: transform, max-height;
  }

  #app-header.mobile-header-hidden {
    transform: translateY(-100%);
    max-height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-width: 0 !important;
    overflow: hidden !important;
  }
}

@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  html, body {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }
  body { display: block !important; }
  body * { visibility: hidden; }
  #content-card, #content-card * { visibility: visible; }
  header, aside, #sidebar-overlay, #breadcrumbs, #page-ver, .no-print, .no-print * {
    display: none !important;
    visibility: hidden !important;
  }
  main, main > div {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: #fff !important;
  }
  #content-card {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 8mm !important;
    display: block !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }
  #content-card h2, #content-card h3 { break-after: avoid; page-break-after: avoid; }
  #content-card img, #content-card table, #content-card pre, #content-card blockquote {
    max-width: 100% !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #content-card img { height: auto !important; }
  #content-card a { color: #005f3c !important; text-decoration: none !important; }
}