/* ============================================================================
   Demo MaskinParken — portalens egen ramme (header, menu, main, footer).

   Farverne er MaskinParkens egne, hentet fra
   maskinparken.dk/assets/MaskinParken/css/overrides.css:
     --mp-primary       #2d6a2e   menubjælke, links, knapper
     --mp-primary-dark  #1e4d1f   brandingbjælke, footer
     --mp-primary-light #3d8b3e
     --mp-accent        #f5a623   eneste accent
     --body-bg          #f3f5fa

   Prefiks mpk- = MaskinParken-rammen. Selve maskin-modulets indhold er mpx-* og
   ligger i FrontEndShared (machines.css) — rammen og modulet kan skiftes hver for sig.

   SKRIFTER: maskinparken.dk henter Poppins og Open Sans fra Google Fonts. Det gør vi
   IKKE her. App.razor er fælles for alle Delr-portaler, så et par render-blokerende
   tredjeparts-requests ville ramme Ryslinge og resten med. Navnene står forrest i
   font-stakken, så de bruges hvis de findes lokalt, og ellers falder det til system-ui.
   Skal de rigtige skrifter med, er det rette sted en selv-hostet woff2 i wwwroot/lib/fonts
   — ikke et CDN.
   ============================================================================ */

.mpk {
  --mpk-primary: #2d6a2e;
  --mpk-primary-dark: #1e4d1f;
  --mpk-primary-light: #3d8b3e;
  --mpk-accent: #f5a623;
  --mpk-bg: #f3f5fa;
  --mpk-line: rgba(255, 255, 255, .15);
  --mpk-container: 76rem;

  background: var(--mpk-bg);
  font-family: "Open Sans", system-ui, sans-serif;
  color: #1a1a1a;
}

/* Footeren følger indholdet og bliver IKKE skubbet til bunden af viewporten.
   Ingen margin-top: auto og ingen min-height: 100vh på wrapperen: tilsammen er de
   sticky-footer-tricket, og på en kort side ender footeren så midt i skærmen med en
   tom flade under. En maskinliste kan være kort — én maskine i en snæver kategori. */
.mpk-footer { margin-top: 0; }

.mpk h1, .mpk h2, .mpk h3, .mpk h4 {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
}

.mpk-container { max-width: var(--mpk-container); margin: 0 auto; padding: 0 1rem; }

/* Skip-linket vises kun ved fokus. Ellers er det et link ingen bad om. */
.mpk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  background: var(--mpk-accent);
  color: #1a1a1a;
  padding: .6rem 1rem;
  font-weight: 600;
  border-radius: 0 0 6px 0;
}

.mpk-skip:focus { left: 0; }

/* ---- Header --------------------------------------------------------------- */

/* Sticky: paa en telefon i en gaardsplads skal man kunne soege videre uden at
   scrolle hele vejen op. Kun menubjælken bliver hængende — brandingen ruller væk,
   ellers spiser headeren en tredjedel af skærmen. */
.mpk-header { position: relative; }

.mpk-branding { background: var(--mpk-primary-dark); color: #fff; padding: .9rem 0; }

.mpk-branding__inner { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }

.mpk-logo { display: block; line-height: 0; }
.mpk-logo img { height: 72px; width: auto; display: block; }

.mpk-tagline { margin: 0; font-size: .9rem; font-style: italic; color: rgba(255, 255, 255, .85); }

.mpk-nav { position: sticky; top: 0; z-index: 1020; background: var(--mpk-primary); }

.mpk-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .4rem;
  padding-bottom: .4rem;
}

.mpk-nav__items { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }

.mpk-nav__items a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  color: #fff;
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  transition: background .2s;
}

.mpk-nav__items a:hover, .mpk-nav__items a:focus-visible { background: rgba(255, 255, 255, .15); color: #fff; }

.mpk-nav__search { flex: 0 1 22rem; min-width: 14rem; }

/* Soegefeltet staar paa den groenne bjælke: knappen skal derfor vaere amber og ikke
   groen, ellers forsvinder den i baggrunden. */
.mpk-nav__search .mpx-btn--primary {
  background: var(--mpk-accent);
  border-color: var(--mpk-accent);
  color: #1a1a1a;
}

.mpk-nav__search .mpx-btn--primary:hover { background: #e0940f; border-color: #e0940f; }
.mpk-nav__search .mpx-searchbox { max-width: none; }

@media (max-width: 48rem) {
  .mpk-nav__inner { flex-direction: column; align-items: stretch; }
  .mpk-nav__items { justify-content: center; }
  .mpk-nav__search { flex: 1 1 auto; }
  .mpk-logo img { height: 56px; }
}

/* ---- Main ----------------------------------------------------------------- */

/* height:auto + overflow:visible overskriver Blazor.Bootstraps globale
   `main{height:100vh;overflow-x:hidden}`. Uden dem bliver <main> en viewport-høj scroll-boks:
   maskinlisten scroller INDE i den, siden selv står stille, og footeren nedenunder ser
   permanent fastlåst ud i bunden af skærmen. Det var præcis symptomet "footeren er sticky".

   min-height er 100vh og ikke mindre af samme grund som i ryslinge.css: når Blazor-kredsen
   forbinder, udskifter hydreringen hele <main>-undertræet. Rammer en frame det vindue, står
   <main> et øjeblik med højde 0, og footeren springer op i viewporten og ned igen — et
   synligt layout-shift. Med 100vh kan den ikke nå ind i viewporten under udskiftningen. */
.mpk-main {
  padding: 1.5rem 0 3rem;
  min-height: 100vh;
  height: auto;
  overflow: visible;
}

.mpk-main:focus { outline: none; }

/* ---- Footer --------------------------------------------------------------- */

.mpk-footer { background: var(--mpk-primary-dark); color: rgba(255, 255, 255, .85); padding: 2.5rem 0 1.25rem; }

.mpk-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.75rem;
  margin-bottom: 1.75rem;
}

.mpk-footer__name {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .4rem;
}

.mpk-footer__head {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--mpk-accent);
  margin-bottom: .5rem;
}

.mpk-footer p { margin: 0; font-size: .9rem; line-height: 1.6; }
.mpk-footer ul { margin: 0; padding: 0; list-style: none; }
.mpk-footer li { margin-bottom: .3rem; }

.mpk-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; font-size: .9rem; }
.mpk-footer a:hover { color: #fff; text-decoration: underline; }

.mpk-footer address { font-style: normal; font-size: .9rem; line-height: 1.6; }

.mpk-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--mpk-line);
  font-size: .82rem;
  color: rgba(255, 255, 255, .7);
}