/*
* Navigation styles — De Graanrepubliek child theme
* Drop into your child theme's style.css (or enqueue as a separate file)
*
* Structure supported:
* Level 0 — top bar items
* Level 1 — dropdown (opens downward)
* Level 2 — fly-out (opens rightward)
*
* Icons are optional: wrap an emoji or SVG in
* …
* before the link text. Omitting the span has no layout effect.
*
* Accessibility included:
* - Skip-to-content link (add #main-content id to your element)
* - focus-visible outlines on all interactive elements
* - aria-* attributes are set in the preview; add them in your nav block
* or via a small functions.php nav_walker filter
*/
/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
--nav-accent: #c89a3a; /* amber gold — hover / active / borders */
--nav-accent-hover: #e8b84b; /* lighter amber — text on hover */
--nav-accent-glow: rgba(200, 154, 58, 0.08); /* subtle bg tint */
--nav-bg: #2a2a2a; /* top bar background */
--nav-bg-drop: #222222; /* level-1 dropdown background */
--nav-bg-fly: #1e1e1e; /* level-2 fly-out background */
--nav-text: #c8c4b8; /* default link colour */
--nav-text-sub: #a8a49a; /* level-1 dropdown text */
--nav-text-fly: #9a9690; /* level-2 fly-out text */
--nav-sep: rgba(255, 255, 255, 0.05); /* row separators */
--nav-border-soft: rgba(200, 154, 58, 0.22); /* dropdown frame */
--nav-border-fly: rgba(200, 154, 58, 0.18); /* fly-out frame */
--nav-transition: 0.18s ease;
}
/* ── Skip-to-content link ───────────────────────────────────────────────── */
/*
* Add this anchor as the very first element inside :
* Skip to main content
* It is invisible until focused (keyboard Tab), then slides in.
*/
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--nav-accent);
color: #1a1a1a;
padding: 8px 16px;
font-size: 13px;
font-weight: 700;
border-radius: 0 0 4px 0;
z-index: 9999;
text-decoration: none;
}
.skip-link:focus {
left: 0;
}
/* ── Top bar ────────────────────────────────────────────────────────────── */
.wp-block-navigation {
background: var(--nav-bg);
border-bottom: 1px solid rgba(200, 154, 58, 0.20);
}
/* ── Level 0 — top bar items ───────────────────────────────────────────── */
.wp-block-navigation-item__content {
color: var(--nav-text);
padding: 0.9rem 0.95rem;
font-size: 15px; /* bumped from 13.5px */
letter-spacing: 0.02em;
border-bottom: 2px solid transparent;
transition: color var(--nav-transition),
border-color var(--nav-transition),
background var(--nav-transition);
white-space: nowrap;
}
/* Hover & keyboard focus */
.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
color: var(--nav-accent-hover);
border-bottom-color: var(--nav-accent);
background: var(--nav-accent-glow);
outline: none;
}
/* Active / current page */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation-item.current-page-ancestor > .wp-block-navigation-item__content {
color: var(--nav-accent-hover);
border-bottom-color: var(--nav-accent);
}
/* Submenu toggle arrow */
.wp-block-navigation__submenu-icon {
opacity: 0.5;
transition: transform var(--nav-transition), opacity var(--nav-transition);
}
.wp-block-navigation-item:hover > .wp-block-navigation-item__content
.wp-block-navigation__submenu-icon {
transform: rotate(180deg);
opacity: 0.9;
}
/* ── Level 1 — dropdown ─────────────────────────────────────────────────── */
.wp-block-navigation-item .wp-block-navigation__submenu-container {
background: #222222 !important; /* forced: TT24 overrides vars on submenus */
border: 0.5px solid var(--nav-border-soft);
border-top: 2px solid var(--nav-accent);
min-width: 220px;
padding: 5px 0;
}
/* Row separators */
.wp-block-navigation-item .wp-block-navigation__submenu-container
.wp-block-navigation-item {
border-bottom: 0.5px solid var(--nav-sep);
}
.wp-block-navigation-item .wp-block-navigation__submenu-container
.wp-block-navigation-item:last-child {
border-bottom: none;
}
/* Level-1 link */
.wp-block-navigation-item .wp-block-navigation__submenu-container
.wp-block-navigation-item__content {
color: #a8a49a !important; /* forced: TT24 overrides vars on submenus */
padding: 9px 1rem;
font-size: 14px;
border-bottom: none;
border-left: 2px solid transparent;
}
.wp-block-navigation-item .wp-block-navigation__submenu-container
.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation-item .wp-block-navigation__submenu-container
.wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
color: var(--nav-accent-hover);
border-left-color: var(--nav-accent);
background: var(--nav-accent-glow);
border-bottom-color: transparent;
outline: none;
}
/* Level-1 arrow points right for items that have a child fly-out */
.wp-block-navigation-item .wp-block-navigation__submenu-container
.wp-block-navigation-item:hover > .wp-block-navigation-item__content
.wp-block-navigation__submenu-icon {
transform: rotate(-90deg);
opacity: 0.9;
}
/* ── Level 2 — fly-out ──────────────────────────────────────────────────── */
.wp-block-navigation-item .wp-block-navigation__submenu-container
.wp-block-navigation__submenu-container {
background: #1e1e1e !important; /* forced: variable not picked up here */
border: 0.5px solid var(--nav-border-fly);
border-left: 2px solid var(--nav-accent);
border-top: 0.5px solid var(--nav-border-fly); /* override level-1 top */
min-width: 210px;
padding: 5px 0;
top: -6px;
left: 100%;
}
/* Level-2 link */
.wp-block-navigation-item .wp-block-navigation__submenu-container
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content {
color: #9a9690 !important; /* forced: variable not picked up here */
padding: 9px 1rem;
font-size: 14px;
border-left: 2px solid transparent;
border-bottom: none;
}
.wp-block-navigation-item .wp-block-navigation__submenu-container
.wp-block-navigation__submenu-container
.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation-item .wp-block-navigation__submenu-container
.wp-block-navigation__submenu-container
.wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
color: var(--nav-accent-hover);
border-left-color: var(--nav-accent);
background: var(--nav-accent-glow);
border-bottom-color: transparent;
outline: none;
}
/* ── Optional inline icon ───────────────────────────────────────────────── */
/*
* Wrap an emoji or inline SVG with:
* 🌾
* Omitting it causes no layout shift.
*/
.d-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
font-size: 14px;
opacity: 0.75;
flex-shrink: 0;
}
/* ── Mobile — hamburger button ──────────────────────────────────────────── */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
color: var(--nav-text);
border-radius: 4px;
padding: 6px;
transition: background var(--nav-transition);
}
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
background: rgba(200, 154, 58, 0.12);
outline: 2px solid var(--nav-accent);
}
/* ── Mobile — open overlay ──────────────────────────────────────────────── */
/*
* color-scheme: only light forces Chrome/Brave to stop inheriting the system
* dark/light preference on this compositing layer, which was causing the
* white fallback background in Chromium-based browsers despite our !important
* background declaration.
*/
.wp-block-navigation__responsive-container.is-menu-open {
color-scheme: only light;
background: #2a2a2a !important;
background-color: #2a2a2a !important; /* belt-and-braces for Chrome */
}
/* The inner content wrapper also needs explicit colouring in Chrome */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
background: #2a2a2a !important;
background-color: #2a2a2a !important;
border-top: 1px solid rgba(200, 154, 58, 0.20);
}
/* ── Level 0 — main items ── */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
color: #c8c4b8 !important;
background: transparent !important;
font-size: 17px !important;
font-weight: 500 !important;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.07) !important;
border-left: 3px solid transparent !important;
padding: 14px 1.5rem !important;
transition: color var(--nav-transition),
border-color var(--nav-transition),
background var(--nav-transition);
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
color: #e8b84b !important;
border-left-color: #c89a3a !important;
background: rgba(200, 154, 58, 0.08) !important;
}
/* Close button */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
color: #c8c4b8 !important;
}
/* ── Level 1 — first submenu ── */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container {
background: #212121 !important;
border-left: 3px solid rgba(200, 154, 58, 0.30) !important;
margin-left: 1.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content {
color: #b0aca0 !important;
background: transparent !important;
font-size: 15px !important;
font-weight: 400 !important;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.05) !important;
border-left: 3px solid transparent !important;
padding: 11px 1.25rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation-item:hover > .wp-block-navigation-item__content {
color: #e8b84b !important;
border-left-color: #c89a3a !important;
background: rgba(200, 154, 58, 0.07) !important;
}
/* ── Level 2 — second submenu ── */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation__submenu-container {
background: #181818 !important;
border-left: 3px solid rgba(200, 154, 58, 0.18) !important;
margin-left: 1rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content {
color: #8a8680 !important;
background: transparent !important;
font-size: 13.5px !important;
font-weight: 400 !important;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.04) !important;
border-left: 3px solid transparent !important;
padding: 10px 1.25rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation__submenu-container
.wp-block-navigation-item:hover > .wp-block-navigation-item__content {
color: #e8b84b !important;
border-left-color: #c89a3a !important;
background: rgba(200, 154, 58, 0.06) !important;
}