/* bridge.css
   Verbindt het FQG-frame (navbar + footer) met de Nordic Foliage pagina.
   Alles wat hier staat is met de hand geschreven; branding.css en home.css zijn
   afgeleiden van de originele Nordic-stylesheet.

   Twee dingen gebeuren hier:
   1. De Nordic merkbalk onder de FQG-navbar, zodat bezoekers zien dat ze bij
      Floral Quality Group zitten maar wel op de Nordic-pagina.
   2. Het opvangen van de plekken waar het Nordic-ontwerp uitging van zijn eigen
      vaste navbar, die er nu niet meer is.
   ========================================================================= */

:root{
  --nordic-green:      #294140;
  --nordic-ink:        #1d2e2b;
  --nordic-bar-h:      54px;
  /* Hoogte van de FQG-balk; --bar-h komt uit de navbar zelf. */
  --nordic-top:        var(--bar-h, 72px);
}

/* ---------------------------------------------------------------
   Merkbalk: plakt onder de FQG-navbar
   --------------------------------------------------------------- */
.nordic-bar{
  position: sticky;
  top: var(--nordic-top);
  z-index: 50;                      /* onder de FQG-navbar (60) */
  height: var(--nordic-bar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: var(--nordic-green);
  color: #fff;
}
.nordic-bar__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
.nordic-bar__brand img{
  height: 30px;
  width: auto;
  display: block;
}
.nordic-bar__by{
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}
.nordic-bar__links{
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  margin-left: auto;
  list-style: none;
  padding: 0;
}
.nordic-bar__links a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .95rem;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nordic-bar__links a:hover{
  color: #fff;
  border-bottom-color: #fff;
}

@media (max-width: 720px){
  .nordic-bar{ gap: 12px; }
  .nordic-bar__by{ display: none; }
  .nordic-bar__links{ gap: 14px; }
  .nordic-bar__links a{ font-size: .85rem; }
}
@media (max-width: 460px){
  /* Op heel smalle schermen alleen het logo en het contactanker. */
  .nordic-bar__links li:not(:last-child){ display: none; }
}

/* ---------------------------------------------------------------
   Aansluiting van de Nordic-inhoud
   --------------------------------------------------------------- */

/* De hero was gemaakt voor een transparante navbar over de video heen. Nu
   staan er twee balken boven, dus die hoogte halen we eraf. Anders steekt de
   hero onderaan door en moet je scrollen voor de knop. */
.nordic .hero-video-container{
  height: calc(100vh - var(--nordic-top) - var(--nordic-bar-h));
  min-height: 460px;
}

/* Ankers moeten onder beide balken uitkomen in plaats van eronder te verdwijnen. */
.nordic [id]{
  scroll-margin-top: calc(var(--nordic-top) + var(--nordic-bar-h) + 16px);
}

/* De Nordic-reset zet een marge op alles; de FQG-footer die erna komt mag daar
   niets van meekrijgen, vandaar dat de wrapper zijn eigen achtergrond sluit. */
.nordic{
  background: #fff;
  position: relative;
  z-index: 1;
}

/* Kruimelpad boven de hero, in de FQG-huisstijl. */
.nordic-crumbs{
  background: #fff;
  padding: 10px clamp(16px, 4vw, 48px);
  font-size: .85rem;
  color: #8A8A8A;
}
.nordic-crumbs a{ color: #8A8A8A; text-decoration: none; }
.nordic-crumbs a:hover{ color: #B88724; }
.nordic-crumbs span{ margin: 0 6px; }