/* Bonn theme: the real legacy shop (bonn.fc-web.de) does NOT use a solid
   brand-colored #categoryWrapper band like Kvb/Hno - its real "#desktop-nav"
   equivalent is a light-gray bar with a red top border and uppercase bold nav
   links (see the legacy css/style.scss: #desktop-nav { background-color: #F5F5F5;
   border-top: 1px solid $link-color; border-bottom: 1px solid #DDD; }), and the
   real footer is dark (#333333 background, light text) rather than the light
   #EAEEE6 footer Hno/Bridge use. */
#categoryWrapper {
  background-color: #F5F5F5;
  border-top: 1px solid var(--brand-primary);
  border-bottom: 1px solid #DDD;
}

/* Real legacy `a { color: $link-color; }` (the global default) applies unchanged
   inside #desktop-nav (no color override there in the real style.scss), so category
   links show in the brand red - only weight/case/size are genuinely #desktop-nav-
   specific. DefaultTemplate's own shared `.nav-link{color:var(--accent)}` rule would
   already paint them red too, but stating it explicitly here (rather than relying on
   that shared fallback) is what makes the real, DARKER `a:hover{color:$link-color-shade}`
   hover behavior possible - the shared rule has no hover variant at all. */
#categoryWrapper .nav-link {
  color: black;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 95%;
}

#categoryWrapper .navbar-nav li.nav-item:hover .nav-link,
#categoryWrapper .navbar-nav li.nav-item:focus .nav-link {
  color: var(--brand-primary-hover) !important;
}

/* Spread the category items across the whole bar instead of clustering them at the
   left (CategoryNav's shared markup is a plain flex row with no forced width of its
   own) - only takes effect above the navbar-expand-lg breakpoint; below that the nav
   collapses into a stacked mobile menu where a real width/justify-content split
   wouldn't mean anything, so left unset there. */
@media (min-width: 992px) {
  #categoryWrapper .navbar-nav {
    width: 100%;
    justify-content: space-between;
  }
}
/* Real legacy meta-nav links are muted gray ($menu-link-color: #777), not the brand
   red DefaultTemplate's shared `.nav-link` rule would otherwise paint them - only
   turning red on hover ($link-color-shade). */
#meta-nav {
  background-color: #eee;
}

#meta-nav .nav-link {
  color: #777;
  font-size: 12px;
}

#meta-nav .nav-link:hover {
  color: var(--brand-primary-hover);
}

/* DefaultTemplate's shared meta-nav row uses the Bootstrap utility class
   `.justify-content-end` (language switcher + account/Widerruf links pushed together
   as one right-aligned block) - Bonn wants the language switcher pinned to the LEFT
   edge instead, with the rest staying on the right. CSS-only override (space-between
   instead of flex-end) rather than opting into the shared Layout's "MetaNavContent"
   full-replacement section, since only the alignment differs, not the actual
   content/markup. Needs !important: Bootstrap's own utility classes are themselves
   generated with `!important` (confirmed in bootstrap.min.css:
   `.justify-content-end{justify-content:flex-end!important}`), so a plain
   higher-specificity rule alone isn't enough to beat it. */
#meta-nav .container {
  justify-content: space-between !important;
}

/* Real legacy social links (footer.php) are plain FontAwesome glyph + text, no
   colored badge background at all - Koelnshop's own badge treatment (tried here
   first) doesn't match Bonn's real design. No FontAwesome in this app (DefaultTemplate
   only loads Material Icons), so the SVGs stay, sized down to sit inline with text.
   Their fill is a hardcoded #bfbfbb (matching .footer-section's own muted text color)
   rather than `currentColor` - an <img src="*.svg"> loads the SVG as an isolated
   external resource with no access to the host page's CSS, so `currentColor` inside it
   would just resolve to SVG's own black default, not the surrounding text color. */
.social-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 15px;
}

.social-icon-link img {
  width: 16px;
  height: 16px;
}

/* Real legacy .lang img (meta-nav/footer language links) and .language-overlay-image
   (the first-visit overlay) are round, not the plain square/rectangular crop used on
   the first pass. */
.lang-icon {
  border-radius: 50%;
  object-fit: cover;
}

/* Forces the CURRENT language's plain <span> and the OTHER languages' <form>/<button>
   to the exact same fixed box (real bug: a bare <form>/<button> measured ~4px taller
   than the <span> and sat a couple px lower, via getBoundingClientRect - default
   browser form/button box-model quirks that "p-0 border-0" didn't fully cancel out) -
   put on the <span>, the <form>, AND the <button> inside it so the nesting can't
   reintroduce any size drift between the two code paths. 24px, not 20px, so the
   current-language icon's own 2px ring (see _LanguageSwitcher.cshtml) fits inside
   without growing the box past what the plain icons already occupy. */
.lang-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  line-height: 0;
}

.footer {
  background-color: #333333;
  color: #eee;
  min-height: 330px;
  margin-top: 20px;
}

.footer a {
  color: inherit;
}

/* No vertical divider between footer columns - confirmed the real legacy footer.php
   never actually uses the "footer-column" class at all (a leftover/unused rule
   elsewhere in the real style.scss, not something this footer should have copied).
   Class kept only for its padding. */
.footer-column {
  padding-right: 15px;
}

/* Real legacy .footer-section (css/style.scss) - every footer column in the real site
   wraps its content in this, and it's what actually gives the footer its real look:
   muted body text, an uppercase/bold/underlined heading (NOT just a plain <p>), and a
   bare <ul> with no bullets/padding for the link lists. Missed on the first footer
   pass (which just used plain <p class="footer-link"> + <br>-separated links) - a real
   gap, not a styling nuance. */
.footer-section {
  color: #bfbfbb;
}

.footer-section p {
  width: 100%;
  color: white;
  border-bottom: 1px solid #bfbfbb;
  text-transform: uppercase;
  font-weight: 700;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

/* Real legacy custom webfont (css/style.scss: @font-face "TartineScript", applied only
   via a scoped `.fancy-font` class on the homepage welcome heading - NOT the whole
   site's body font). Deliberately NOT wired through BrandingOptions.FontFamily/Fonturl(see _BrandingStyles.cshtml): that mechanism applies its font to the entire `body`,
   which would wrongly turn every button/paragraph/form label into a decorative script
   font - the real legacy site only ever uses TartineScript for this one heading. */
@font-face {
  font-family: "TartineScript";
  src: url("fonts/TartineScript.ttf");
}
.fancy-font {
  font-family: "TartineScript", Helvetica, Arial, sans-serif;
}