/*
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);
}

/* 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;
}