/* dann.be – navbar style "D – Elegant goud" – 17 Oct 2026
   Loaded after theme.css and custom.css; overrides them without changing them.
   Page background (theme.css): html and .uk-block-default #1b1b1b, .uk-block-muted #1f1f1f.
   The navbar floats over the first block: on the home page that is .uk-block-muted (#1f1f1f),
   on all other pages .uk-block-default (#1b1b1b). */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/raleway-latin-600-normal.woff2) format('woff2');
}

/* ---------- Navbar background: same colour as the page, all states (incl. sticky .uk-active) ---------- */
.tm-block-header .tm-navbar-wrapper,
.tm-block-header .tm-navbar-wrapper.uk-active,
.tm-block-header .tm-navbar-wrapper-animate,
.tm-block-header .tm-navbar-wrapper-animate.uk-active,
.tm-block-header .tm-navbar.uk-navbar {
  background-color: #1b1b1b !important;
  box-shadow: none !important;
}
.tm-block-header .tm-navbar.uk-navbar { border: 0 !important; }
/* The theme gives the wrapper a transparent 15/25/40px border (background-clip: content-box), so the
   page content shows around the bar when it is sticky. Paint the border too: one solid strip. */
.tm-block-header .tm-navbar-wrapper,
.tm-block-header .tm-navbar-wrapper-animate {
  background-clip: border-box !important;
}
/* Home page: the theme offsets the first block with `.tm-block-header + .uk-block`, but on the home
   page a <main> sits in between, so the slideshow started under the bar. Same offsets as the theme. */
.tm-navbar-sticky.tm-header-offset .tm-block-header + main > .uk-block:first-child {
  padding-top: 135px;
}
@media (min-width: 768px) {
  .tm-navbar-sticky.tm-header-offset .tm-block-header + main > .uk-block:first-child { padding-top: 185px; }
}
@media (min-width: 960px) {
  .tm-navbar-sticky.tm-header-offset .tm-block-header + main > .uk-block:first-child { padding-top: 180px; }
}
/* Home page: the slideshow block behind the bar is #1f1f1f. Once sticky (.uk-active) the bar floats over
   the other blocks, which are mostly #1b1b1b, so it goes back to #1b1b1b there. */
body.home .tm-block-header .tm-navbar-wrapper:not(.uk-active),
body.home .tm-block-header .tm-navbar-wrapper-animate:not(.uk-active),
body.home .tm-block-header .tm-navbar-wrapper-animate:not(.uk-active) .tm-navbar.uk-navbar {
  background-color: #1f1f1f !important;
}

/* ---------- Logo (desktop): 260px, vertically centred ---------- */
.tm-navbar .uk-navbar-brand {
  align-items: center;          /* already display:flex via .uk-flex; hidden on phones via .uk-hidden-small */
}
.tm-navbar .uk-navbar-brand img {
  width: 260px !important;
  height: auto !important;
  margin-top: 0 !important;   /* custom.css sets margin-top: 20px */
}

/* ---------- Desktop menu ---------- */
.tm-navbar .uk-navbar-nav > li > a {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #e2b07a !important;
  padding: 0 13px !important;   /* ±26px between items */
  background: transparent !important;
}
.tm-navbar .uk-navbar-nav > li:not(.sd-lang):hover > a,
.tm-navbar .uk-navbar-nav > li > a:hover,
.tm-navbar .uk-navbar-nav > li > a:focus {
  color: #cc8843 !important;
}
.tm-navbar .uk-navbar-nav > li.uk-active > a {
  color: #cc8843 !important;
}
.tm-navbar .uk-navbar-nav > li.uk-active > a::after {
  content: '';
  position: absolute;
  left: 13px;
  right: calc(13px + .12em);    /* letter-spacing leaves a trailing gap after the last letter */
  top: calc(50% + 13px);
  height: 2px;
  background: #cc8843;
}

/* ---------- Language choice: own small line top right, above the bar (not part of the menu) ---------- */
.tm-navbar .uk-navbar-nav > li.sd-lang {
  position: absolute !important;
  right: 13px;
  bottom: 100%;
  margin: 0 0 6px !important;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: 13px !important;
  line-height: 20px;
  white-space: nowrap;
  color: #9c958c;
}
.tm-navbar .uk-navbar-nav > li.sd-lang > a {
  font-size: 13px !important;
  letter-spacing: .08em !important;
  color: #9c958c !important;
  padding: 0 4px !important;
  height: auto !important;
  line-height: 20px !important;
}
.tm-navbar .uk-navbar-nav > li.sd-lang > a:hover,
.tm-navbar .uk-navbar-nav > li.sd-lang > a:focus {
  color: #cc8843 !important;
}
.tm-navbar .uk-navbar-nav > li.sd-lang > strong {
  color: #e2b07a;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 0 4px !important;
}

/* ---------- Menu button ---------- */
.tm-navbar .uk-navbar-toggle {
  color: #e2b07a !important;
  font-size: 30px !important;
}
.tm-navbar .uk-navbar-toggle:hover,
.tm-navbar .uk-navbar-toggle:focus {
  color: #cc8843 !important;
}

/* ---------- 960–1219px: menu button instead of the 6 menu items (they would slide under the logo).
   The theme container only grows from 980px to 1200px at 1220px, so 1199px is not enough. ---------- */
@media (min-width: 960px) and (max-width: 1219px) {
  .tm-navbar .tm-navbar-right.uk-hidden-small.uk-hidden-medium .uk-navbar-nav > li:not(.sd-lang) {
    display: none !important;
  }
  .tm-navbar .uk-navbar-nav > li.sd-lang { right: 6px; }
  .tm-navbar .uk-navbar-toggle.uk-hidden-large {
    display: block !important;
  }
}

/* ---------- Offcanvas (mobile menu) ---------- */
.uk-offcanvas .uk-offcanvas-bar {
  background: #1b1b1b !important;
  width: 300px !important;      /* theme: 200px, too narrow for 19px labels */
  max-width: 85vw !important;
  padding: 40px 0 !important;
}
body.home .uk-offcanvas .uk-offcanvas-bar {
  background: #1f1f1f !important;
}
html .uk-offcanvas .uk-nav-offcanvas > li > a {
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 19px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #e2b07a !important;
  padding: 12px 24px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #2c2c2c;
  border-left: 3px solid transparent;
  background: transparent !important;
  box-shadow: none !important;
}
html .uk-offcanvas .uk-nav-offcanvas > li > a:hover,
html .uk-offcanvas .uk-nav-offcanvas > li > a:focus {
  background: #262626 !important;
  color: #e2b07a !important;
  box-shadow: none !important;
}
html .uk-offcanvas .uk-nav.uk-nav-offcanvas > li.uk-active > a {
  color: #cc8843 !important;
  background: #262626 !important;
  border-left-color: #cc8843;
  box-shadow: none !important;
}

/* Language choice in the offcanvas: small buttons */
.uk-offcanvas .uk-nav-offcanvas > li.sd-lang {
  padding: 22px 24px !important;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: 0 !important;      /* hides the " | " separators between the buttons */
  color: transparent;
}
.uk-offcanvas .uk-nav-offcanvas > li.sd-lang > a,
.uk-offcanvas .uk-nav-offcanvas > li.sd-lang > strong {
  display: inline-block !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: .08em;
  padding: 5px 12px !important;
  margin-right: 8px;
  border: 1px solid #444;
  border-radius: 4px;
  color: #e2b07a !important;
  background: transparent;
  text-decoration: none;
}
.uk-offcanvas .uk-nav-offcanvas > li.sd-lang > a:hover,
.uk-offcanvas .uk-nav-offcanvas > li.sd-lang > a:focus {
  border-color: #cc8843;
  color: #cc8843 !important;
}
.uk-offcanvas .uk-nav-offcanvas > li.sd-lang > strong {
  background: #cc8843;
  border-color: #cc8843;
  color: #111 !important;
}