/* ============================================================================
   Nabolo — salgssitets ramme (header, menu, main, footer) til NaboloLayout.

   Farver og skrift er Nabolo-identiteten, kopieret fra
   G:\Mit drev\Comito\Projekter\CMS\02_Design_og_Brand\Designsystem\Nabolo\nabolo-tokens.css:
     kobolt  #2253D6   primær: knapper, links (6,4:1 mod hvid)
     mursten #E2683C   accent — IKKE brødtekst (3,3:1 mod hvid)
     nat     #14213B   tekst og mørke flader
     sand    #F4EEE4   varm baggrund
     lyng    #D9E2FB   lys blå flade til bokse

   Prefiks nbl- = Nabolo-rammen. Variablerne hedder --nb-* som i tokens-filen, men er
   scopet til .nbl, så de ikke lækker ud i andre portaler (App.razor er fælles).

   SKRIFTER: self-hostede i wwwroot/lib/fonts. @font-face henter først filen når en
   regel bruger familien, så de andre portaler betaler ikke for dem.
   ============================================================================ */

@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(../lib/fonts/familjen-grotesk-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(../lib/fonts/familjen-grotesk-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans';  font-style: normal; font-weight: 400; font-display: swap; src: url(../lib/fonts/instrument-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans';  font-style: normal; font-weight: 500; font-display: swap; src: url(../lib/fonts/instrument-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans';  font-style: normal; font-weight: 600; font-display: swap; src: url(../lib/fonts/instrument-sans-latin-600-normal.woff2) format('woff2'); }

.nbl {
  --nb-kobolt: #2253D6;
  --nb-kobolt-700: #1A41AB;
  --nb-mursten: #E2683C;
  --nb-nat: #14213B;
  --nb-sand: #F4EEE4;
  --nb-lyng: #D9E2FB;
  --nb-kobolt-lys: #7D9BFF;
  --nb-tekst-2: #4A5468;
  --nb-linje: #DCD5C8;
  --nb-display: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nb-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nb-radius: 10px;
  --nbl-container: 74rem;

  background: var(--nb-sand);
  color: var(--nb-nat);
  font-family: var(--nb-body);
}

.nbl h1, .nbl h2, .nbl h3, .nbl h4 {
  font-family: var(--nb-display);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--nb-nat);
}

.nbl a { color: var(--nb-kobolt); }
.nbl a:hover { color: var(--nb-kobolt-700); }

.nbl :focus-visible { outline: 3px solid var(--nb-kobolt); outline-offset: 2px; }

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

/* Skip-linket vises kun ved fokus. */
.nbl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  background: var(--nb-nat);
  color: #fff;
  padding: .6rem 1rem;
  font-weight: 600;
  border-radius: 0 0 var(--nb-radius) 0;
}

.nbl-skip:focus { left: 0; color: #fff; }

/* ---- Knap ------------------------------------------------------------------ */

.nbl .nbl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .55rem 1.2rem;
  border-radius: 999px;
  background: var(--nb-kobolt);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}

.nbl .nbl-btn:hover { background: var(--nb-kobolt-700); color: #fff; }

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

/* Hvid flade over sand-baggrunden: logoet står på den baggrund det er tegnet til. */
.nbl-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: #fff;
  border-bottom: 1px solid var(--nb-linje);
}

.nbl-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.nbl-logo { display: block; line-height: 0; flex: none; }
.nbl-logo img { height: 34px; width: auto; display: block; }

.nbl-nav { flex: 1 1 auto; min-width: 0; }

.nbl-nav__items { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }

.nbl .nbl-nav__items a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .5rem .8rem;
  border-radius: var(--nb-radius);
  color: var(--nb-nat);
  font-weight: 500;
  font-size: .97rem;
  text-decoration: none;
  white-space: nowrap;
}

.nbl .nbl-nav__items a:hover { background: var(--nb-lyng); color: var(--nb-nat); }

.nbl-header__cta { flex: none; }

/* Under tablet-bredde: menuen lægges på sin egen række under logo + knap og kan
   scrolles vandret. Ingen burger — så virker den også uden JS og for bots. */
@media (max-width: 52rem) {
  .nbl-header__inner { flex-wrap: wrap; gap: .25rem 1rem; padding-top: .6rem; }
  .nbl-logo { margin-right: auto; }
  .nbl-nav { order: 3; flex-basis: 100%; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem .25rem; }
  .nbl .nbl-nav__items a { padding: .5rem .6rem; }
  .nbl .nbl-header__cta { min-height: 2.5rem; padding: .45rem 1rem; font-size: .9rem; }
}

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

/* height:auto + overflow:visible overskriver Blazor.Bootstraps globale
   `main{height:100vh;overflow-x:hidden}` — ellers bliver <main> en scroll-boks.
   min-height 100vh forhindrer at footeren hopper op i viewporten mens hydreringen
   udskifter <main>-undertræet (se samme note i ryslinge.css). */
.nbl-main {
  padding: 2rem 0 4rem;
  min-height: 100vh;
  height: auto;
  overflow: visible;
}

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

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

.nbl-footer { background: var(--nb-nat); color: rgba(255, 255, 255, .8); padding: 3rem 0 1.25rem; }

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

.nbl-footer__logo { height: 32px; width: auto; display: block; margin-bottom: .75rem; }

/* Mursten er lovlig her: overskrifterne er store/fede og står på nat, ikke på hvid. */
.nbl-footer__head {
  font-family: var(--nb-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nb-mursten);
  margin-bottom: .6rem;
}

.nbl-footer p { margin: 0; font-size: .92rem; line-height: 1.6; }
.nbl-footer ul { margin: 0; padding: 0; list-style: none; }
.nbl-footer li { margin-bottom: .35rem; }

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

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