/*
Theme Name: Leflite child
Theme URI: https://lefcreative.nl/
Author: Lef Creative
Author URI: https://lefcreative.nl/
Description: Child thema van het thema Leflite
Version: 1.0.0
License: /
License URI: /
Template: leflite
*/

:root {
    --ode-border-soft: rgba(229, 228, 228, .35);
    --ode-border-line: rgba(229, 228, 228, .1);
    --ode-letterspacing-caps: .22em;
    --ode-letterspacing-kicker: .3em;
    --ode-letterspacing-topbar: .18em;
    --ode-topbar-height: 41px;
    --ode-transition: .3s ease;
}

/* ============================================================
   1. Basis
   ============================================================ */

body {
    background-color: var(--black);
    color: var(--black-content);
}

h1, h2, h3 {
    letter-spacing: -.015em;
}

h6 {
    font-size: 11px;
    letter-spacing: var(--ode-letterspacing-kicker);
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 24px;
}

.bg-primary p, .bg-secondary p, .bg-black p {
    color: var(--gray);
}

strong {
    font-weight: 500;
}

::selection {
    background-color: var(--tertiary);
    color: var(--black);
}

.bg-primary strong, .bg-secondary strong, .bg-black strong {
    color: var(--tertiary);
}

hr {
    border: 0;
    border-top: 1px solid var(--card-border-color);
    margin: 32px 0;
}

/* Lijstweergave label/waarde (openingstijden, prijzen): <li>Label <strong>Waarde</strong></li> */
.lef-rows ul {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.lef-rows ul li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--ode-border-line);
    color: var(--gray);
}

.lef-rows ul li:first-child {
    border-top: 1px solid var(--ode-border-line);
}

.lef-rows ul li strong {
    color: var(--white);
    white-space: nowrap;
    text-align: right;
}

/* ============================================================
   2. Layout
   ============================================================ */

.lef-section > .container > .row,
.lef-section > .container-fluid > .row {
    justify-content: center;
}

.lef-pattern-bg,
#footer {
    position: relative;
    overflow: hidden;
}

.lef-pattern-bg::after,
#footer::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(54vw, 640px);
    height: min(29vw, 342px);
    background: url(images/line-pattern.svg) no-repeat right bottom / contain;
    opacity: .05;
    pointer-events: none;
}

#footer::after {
    left: 0;
    width: auto;
    height: 100%;
    background-size: cover;
}

.lef-pattern-bg > .container,
.lef-pattern-bg > .container-fluid,
#footer .footer-inner,
#footer .socket {
    position: relative;
    z-index: 1;
}

/* ============================================================
   3. Topbar & header
   ============================================================ */

.topbar > .container-fluid,
#header .container-fluid {
    max-width: 1720px;
    margin-left: auto;
    margin-right: auto;
}

.topbar {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--ode-letterspacing-topbar);
}

/* Tekst gedempt zoals in het ontwerp; de rand van de topbar zelf blijft scherp */
.topbar > .container-fluid {
    opacity: .7;
}

.topbar a {
    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-decoration: none;
}

.topbar a:hover {
    color: var(--white);
}

/* Alleen kleur laten faden: een transition op `top` laat de header naschuiven
   bij de wissel absolute → fixed */
body.fixed-header header.navigation {
    transition-property: background-color, border-color;
}

/* De topbar staat buiten <header>; het thema kent geen transparante topbar boven de hero */
body.fixed-header .topbar.bg-transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    border-bottom: 1px solid var(--ode-border-line);
}

body.fixed-header header.bg-transparent:not(.scrolled):not(.scrolled-to-menu) {
    top: var(--ode-topbar-height);
}

body.admin-bar.fixed-header .topbar.bg-transparent {
    top: 32px;
}

body.admin-bar.fixed-header header.bg-transparent:not(.scrolled):not(.scrolled-to-menu) {
    top: calc(var(--ode-topbar-height) + 32px);
}

/* Ingelogd zet het thema de zwarte header op 30px onder de admin bar;
   de transparante fixed-fase moet dezelfde offset hebben, anders verspringt hij */
body.fixed-header.logged-in.admin-bar header.scrolled-to-menu {
    top: 30px;
}

#header .menu > li > a,
.menu-item-button {
    text-transform: uppercase;
    letter-spacing: var(--ode-letterspacing-caps);
}

.navigation .navigation-inner.display-logo-menu-menu.alignment-left-right .nav-holder-primary-1 {
    margin-left: auto;
    margin-right: auto;
}

.main-nav-menu > li.menu-item-button:last-child {
    margin-right: var(--menu-items-padding-horizontal);
}

#header .menu > li:not(.menu-item-button) > a {
    position: relative;
    transition: color var(--ode-transition);
}

#header .menu > li:not(.menu-item-button) > a::after {
    content: "";
    position: absolute;
    left: var(--menu-items-padding-horizontal);
    right: var(--menu-items-padding-horizontal);
    top: 6px;
    height: 1px;
    background: var(--white);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ode-transition);
}

#header .menu > li:not(.menu-item-button) > a:hover {
    color: var(--white);
}

#header .menu > li:not(.menu-item-button) > a:hover::after,
#header .menu > li:not(.menu-item-button):hover > a::after,
#header .menu > li:not(.menu-item-button):focus-within > a::after {
    transform: scaleX(1);
}
/* Main menu: active item + parent of the active subpage */
  .main-nav-menu > li.current-menu-item > a,
  .main-nav-menu > li.current-menu-ancestor > a {
      font-weight: 700;
  }

  /* Submenu (incl. mega menu columns): active item */
  .main-nav-menu .sub-menu li.current-menu-item > a {
      font-weight: 700;
  }

/* Dropdown in de header: donker paneel in plaats van de witte themadefault */
#header .sub-menu {
    background-color: var(--black);
    border: 1px solid var(--card-border-color);
    padding: 8px 0;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .35);
    min-width: 220px;
}

#header .sub-menu li {
    width: 100%;
}

#header .sub-menu a {
    display: block;
    width: 100%;
    padding: var(--menu-items-padding-vertical) var(--menu-items-padding-horizontal);
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray);
    transition: color var(--ode-transition), background-color var(--ode-transition);
}

#header .sub-menu a:hover {
    color: var(--white);
    background-color: rgba(229, 228, 228, .06);
}

/* Padding op de <a> zodat de hele knop klikbaar is; het thema zet zelf
   `.menu-item-button>a{padding:unset!important}` */
.menu-item-button {
    background-color: transparent;
    border: 1px solid var(--ode-border-soft);
    font-size: var(--menu-items-font-size);
    line-height: 1;
    padding: 0;
}

.menu-item-button > a {
    display: block;
    padding: 16px 32px !important;
}

.menu-item-button:hover {
    background-color: var(--white);
    border-color: var(--white);
}

.menu-item-button:hover > a {
    color: var(--white-content);
}

/* ============================================================
   4. Knoppen
   ============================================================ */

/* Het thema zet alignment-classes op .buttons-holder maar heeft er geen CSS voor */
.buttons-holder.alignment-center { text-align: center; }
.buttons-holder.alignment-right { text-align: right; }

.btn, .button, input[type=submit], main button {
    text-transform: uppercase;
    letter-spacing: var(--ode-letterspacing-caps);
    font-size: var(--btn-medium-font-size);
    line-height: 1;
}

.btn.bg-transparent, .button.bg-transparent, input[type=submit].bg-transparent, main button.bg-transparent {
    border-color: var(--ode-border-soft);
    color: var(--tertiary);
}

/* Niet via --transparent-content: dat token kleurt ook de tekst in een transparante header */
.btn.bg-transparent:hover {
    border-color: var(--white);
    color: var(--white-content);
}

/* ============================================================
   5. Secties met afbeelding/video
   ============================================================ */

section.full-background-overlay .background-image-wrapper:after {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(38, 33, 32, .7) 0%, rgba(38, 33, 32, .25) 45%, rgba(38, 33, 32, .92) 100%);
    opacity: 1;
}

section.full-background,
section.full-background-overlay {
    color: var(--tertiary);
}

section.full-background p,
section.full-background-overlay p {
    color: var(--gray);
}

.lef-section .background-image-wrapper {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* ============================================================
   6. Componenten
   ============================================================ */

ul li.single-list-dish {
    padding: 20px 0;
    border-bottom: 1px solid var(--card-border-color);
}

ul li.single-list-dish:nth-child(2n) {
    background: transparent;
}

.openinghours .single-day {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--card-border-color);
}

.openinghours .single-day:last-child {
    border-bottom: 0;
}

.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper textarea {
    background: transparent;
    border: 1px solid var(--card-border-color);
    color: inherit;
}

/* ============================================================
   7. Footer
   ============================================================ */

#footer {
    font-size: 15px;
    border-top: 1px solid var(--card-border-color);
}

#footer .footer-inner .row > div:nth-child(n+5) {
    margin-top: 40px;
    padding-top: 26px;
    padding-bottom: 26px;
}

#footer .footer-inner .row > div:nth-child(n+6) {
    border-left: 1px solid var(--card-border-color);
}

footer img {
    width: auto;
}

#footer figure img {
    max-height: 68px;
    width: auto;
    opacity: .75;
}

#footer .footer-inner p,
#footer .socket {
    color: var(--gray);
}

#footer .footer-inner p {
    line-height: 1.85;
}

#footer .footer-inner a,
#footer .socket a {
    color: var(--gray);
}

#footer .footer-inner a:hover,
#footer .socket a:hover {
    color: var(--white);
}

#footer .widget-menu {
    margin-top: 20px;
}

#footer .widget-menu li {
    margin-bottom: 9px;
}

#footer .image-outer {
    text-align: center;
}

#footer .image-outer img {
    display: inline-block;
}

#footer .footer-inner .row > div:nth-child(n+5) p {
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.5;
}

#footer .socket {
    font-size: 12px;
    letter-spacing: .06em;
    border-top: 1px solid var(--card-border-color);
}

.socket .socket-half {
    display: flex;
    align-items: center;
    gap: 26px;
}

.socket #socket-menu ul {
    display: flex;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   8. Mobiel
   ============================================================ */

/* body-prefix: de component-css laadt later en wint anders op volgorde */
body nav.mobile-navigation {
    background: var(--black);
    color: var(--black-content);
}

body nav.mobile-navigation .menu a {
    color: var(--tertiary);
    letter-spacing: .02em;
}

nav.mobile-navigation .menu li + li {
    border-top: 1px solid var(--card-border-color);
}

nav.mobile-navigation .menu li.menu-item-button {
    margin-top: 28px;
    border: 0;
    background-color: var(--white);
}

nav.mobile-navigation .menu li.menu-item-button > a {
    flex: 1;
    text-align: center;
    color: var(--white-content);
}

nav.mobile-navigation .hamburger-icon span {
    background: var(--tertiary);
}

@media only screen and (max-width: 768px) {
    /* Topbar is verborgen op mobiel, dus geen header-offset */
    body.fixed-header header.bg-transparent:not(.scrolled):not(.scrolled-to-menu) {
        top: 0;
    }

    body.admin-bar.fixed-header header.bg-transparent:not(.scrolled):not(.scrolled-to-menu) {
        top: 46px;
    }

    .lef-pattern-bg::after {
        width: 96vw;
        height: 52vw;
    }
}

/* Galerij: geen focus-ring op muisklik, toetsenbordfocus blijft zichtbaar */
.gallery-outer .image-gallery-outer:focus:not(:focus-visible) {
    outline: none;
}

/* CTA "Dokkum ligt niet om de hoek" (home): foto zichtbaarder, tekst prominenter.
   De standaard overlay (flat, opacity .9) verbergt de foto bijna volledig;
   een radiale scrim houdt het midden donker voor leesbaarheid en laat de
   randen van de foto doorschijnen. */
.home .lef-section.full-background-overlay.align-center {
	min-height: 72vh;
	display: flex;
	align-items: center;
}
.home .lef-section.full-background-overlay.align-center .background-image-wrapper:after {
	background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(20, 16, 15, 0.8) 0%, rgba(20, 16, 15, 0.55) 45%, rgba(20, 16, 15, 0.18) 100%);
	opacity: 1;
}
.home .lef-section.full-background-overlay.align-center h6 {
	color: rgba(255, 255, 255, 0.75);
	letter-spacing: 0.35em;
}
.home .lef-section.full-background-overlay.align-center h2 {
	font-size: clamp(2.4rem, 4.5vw, 3.5rem);
	font-weight: 400;
	color: #fff;
	text-shadow: 0 2px 28px rgba(0, 0, 0, 0.6);
}
.home .lef-section.full-background-overlay.align-center p {
	color: #f4f2ef;
	font-size: 1.05em;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65);
}

/* ---------- Taalwisselaar (lefcreative-multisite-sync) ----------
   De plugin levert alleen de flag- en flex-basis; het uiterlijk in de header
   komt van het thema-menu. Deze regels brengen dat naar het design.

   !important staat hier bewust: het thema zet .main-nav-menu li .sub-menu vol
   (witte achtergrond, #ddd rand, box-shadow, padding 10px, max-width 250px) en
   de component-CSS laadt lui, dus na dit bestand. De plugin zet daarnaast
   display:flex!important op de link. Zonder !important winnen die.

   De caret is absoluut gepositioneerd in plaats van als flex-item, want de
   display:flex!important van de plugin maakt de ::after van het thema anders
   tot een flex-item dat naast de code gaat zweven. */

body .main-nav-menu li.lef-switcher-menu-item {
	position: relative;
	margin-right: 20px;
}

/* Trigger */
body .main-nav-menu li.lef-switcher-menu-item > a {
	position: relative;
	/* De plugin zet display:flex!important; zonder nowrap wrapt de caret naar een
	   eigen regel zodra de padding-right de contentbreedte krap maakt. */
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	padding: 16px 36px 16px 18px !important;
	border: 1px solid var(--card-border-color);
	color: var(--tertiary);
	font-family: var(--btn-font);
	font-size: var(--btn-small-font-size);
	font-weight: var(--btn-font-weight);
	line-height: 1;
	letter-spacing: var(--ode-letterspacing-topbar);
	text-transform: uppercase;
	transition: var(--ode-transition);
}
/* Het thema zet hier een gedraaid "›"-teken neer. Dat vervangen we door de
   SVG-chevron uit het design: exact hetzelfde pad (M1 1l4 4 4-4, 9x6), en een
   achtergrondafbeelding heeft geen last van de display:flex!important die de
   plugin op de link zet. */
body .main-nav-menu li.lef-switcher-menu-item.menu-item-has-children > a::after {
	content: "" !important;
	position: absolute;
	/* Het thema gebruikt dit pseudo-element ook als onderstrepings-indicator
	   (height 1px + background-shorthand) en is daar specifieker, dus top,
	   height en background moeten hier met !important. */
	top: 50% !important;
	/* Het thema zet left:0 op dit pseudo-element (onderstreping). Bij een
	   absoluut element met left EN right EN een breedte wint left, waardoor de
	   chevron links bleef plakken. Vandaar left:auto. */
	left: auto !important;
	right: 15px !important;
	width: 9px;
	height: 6px !important;
	margin: 0 !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23E5E4E4' stroke-width='1'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 9px 6px !important;
	transform: translateY(-50%) !important;
	/* Het thema zet transform-origin op links (voor de scaleX van zijn
	   onderstreping). Zonder !important draait de chevron bij hover om zijn
	   linkerrand in plaats van om zijn eigen midden. */
	transform-origin: center !important;
	transition: transform var(--ode-transition);
}
body .main-nav-menu li.lef-switcher-menu-item:hover > a,
body .main-nav-menu li.lef-switcher-menu-item:focus-within > a {
	border-color: var(--white);
	color: var(--white);
}
body .main-nav-menu li.lef-switcher-menu-item:hover > a::after,
body .main-nav-menu li.lef-switcher-menu-item:focus-within > a::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 9px 6px !important;
	transform: translateY(-50%) rotate(180deg) !important;
}

/* Dropdown. De transform laten we met rust: daar hangt de reveal-animatie
   van het thema aan. */
body .main-nav-menu li.lef-switcher-menu-item > .sub-menu {
	top: calc(100% + 8px) !important;
	left: auto !important;
	right: 0 !important;
	min-width: 180px !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	background-color: var(--black) !important;
	border: 1px solid var(--card-border-color) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
body .main-nav-menu li.lef-switcher-menu-item > .sub-menu > li {
	margin: 0;
	padding: 0;
}
body .main-nav-menu li.lef-switcher-menu-item > .sub-menu > li + li > a {
	border-top: 1px solid var(--card-border-color);
}
body .main-nav-menu li.lef-switcher-menu-item > .sub-menu > li > a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 14px 18px !important;
	color: var(--gray) !important;
	font-family: var(--body-font);
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: .1em;
	text-transform: none;
	white-space: nowrap;
	transition: var(--ode-transition);
}
body .main-nav-menu li.lef-switcher-menu-item > .sub-menu > li > a:hover,
body .main-nav-menu li.lef-switcher-menu-item > .sub-menu > li > a:focus-visible {
	background-color: rgba(229, 228, 228, .05) !important;
	color: var(--white) !important;
}
.ode-lang-code {
	opacity: .5;
}

/* ------------------------------------------------------------
   Taalwissel in het mobiele menu

   De switcher-regels in blok 7 hangen aan .main-nav-menu (desktop). Mobiel is
   de opbouw anders: de <li> is een flexrij met een aparte toggle-knop naast de
   link, en het thema geeft die knop een vlak in --primary met een icomoon-pijl.
   Hier zetten we er hetzelfde kader + chevron omheen als op desktop, in een
   kleiner corps dan de menu-items zodat hij niet als navigatie leest.

   NB: de component-css van het thema laadt na dit bestand, dus bij gelijke
   specificiteit wint het thema. Vandaar de body-prefix en li./ul.-elementen.
   De sub-items dragen dezelfde .lef-switcher-menu-item class als de trigger,
   dus het kader hangt aan de directe child van .menu, niet aan de class alleen.
   ------------------------------------------------------------ */

body nav.mobile-navigation .menu > li.lef-switcher-menu-item {
    margin-bottom: 24px;
    border: 1px solid var(--card-border-color);
}

body nav.mobile-navigation .menu > li.lef-switcher-menu-item > a {
    padding: 14px 18px;
    font-size: var(--btn-small-font-size);
    letter-spacing: var(--ode-letterspacing-topbar);
    text-transform: uppercase;
}

/* Toggle: geen gekleurd blok maar de chevron uit het design (zelfde pad als de
   desktop-switcher). Het thema zet hier content + font-family icomoon neer, dus
   allebei overschrijven. */
body nav.mobile-navigation .menu > li.lef-switcher-menu-item > button.sub-menu-toggle {
    min-width: 0;
    height: auto;
    padding: 14px 18px;
    background-color: transparent;
}

body nav.mobile-navigation .menu > li.lef-switcher-menu-item > button.sub-menu-toggle::after {
    content: "";
    width: 9px;
    height: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23E5E4E4' stroke-width='1'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 9px 6px;
    transition: transform var(--ode-transition);
}

/* Uitgeklapte lijst: binnen hetzelfde kader, gescheiden door een lijn. Het
   grijze vlak van het thema moet weg, dat vloekt met het zwarte menu. De lijn
   tussen de talen onderling komt al van .menu li + li. */
body nav.mobile-navigation .menu > li.lef-switcher-menu-item > ul.sub-menu {
    background-color: transparent;
    border-top: 1px solid var(--card-border-color);
}

body nav.mobile-navigation .menu > li.lef-switcher-menu-item > ul.sub-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    color: var(--tertiary);
    font-family: var(--body-font);
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: none;
}