/*
 * AskLevi — Custom styles
 * Loaded after Porto theme CSS. Use this file for project-specific overrides.
 */

/* -------------------------------------------------------------------------
 * Bridge Porto's class-based dark mode to Bootstrap's CSS variables.
 * Porto uses html.dark instead of [data-bs-theme="dark"], so Bootstrap's
 * vars don't switch automatically. We align them here so components can
 * just use var(--bs-body-bg), var(--bs-border-color), etc.
 * ------------------------------------------------------------------------- */
html.dark {
    --bs-body-bg:        #1e2129;
    --bs-body-bg-rgb:    30, 33, 41;
    --bs-secondary-bg:   #2e353e;
    --bs-border-color:   #282d36;
    --bs-body-color:     #eee;
}

/* Dropdown menu position — override Porto's media-query-specific rules at every breakpoint */
nav li.dropdown ul.dropdown-menu {
    margin-top: -20px !important;
}

@media (max-width: 575px) {
    nav li.dropdown ul.dropdown-menu { margin-top: -20px !important; }
}

@media (max-width: 767px) {
    nav li.dropdown ul.dropdown-menu { margin-top: -20px !important; }
}

@media (max-width: 991px) {
    nav li.dropdown ul.dropdown-menu { margin-top: -20px !important; }
}

@media (max-width: 1199px) {
    nav li.dropdown ul.dropdown-menu { margin-top: -20px !important; }
}

@media (min-width: 576px) {
    nav li.dropdown ul.dropdown-menu { margin-top: -20px !important; }
}

@media (min-width: 768px) {
    nav li.dropdown ul.dropdown-menu { margin-top: -20px !important; }
}

@media (min-width: 992px) {
    nav li.dropdown ul.dropdown-menu { margin-top: -20px !important; }
}

@media (min-width: 1200px) {
    nav li.dropdown ul.dropdown-menu { margin-top: -20px !important; }
}

@media (min-width: 1400px) {
    nav li.dropdown ul.dropdown-menu { margin-top: -20px !important; }
}

@media (min-width: 1440px) {
    nav li.dropdown ul.dropdown-menu { margin-top: -20px !important; }
}

/* Logos / trusted-by section — inherits Bootstrap's theme-aware variables */
.section-logos {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
}

/* Hide reCAPTCHA badge — disclosure text is included on forms per Google's ToS */
.grecaptcha-badge { display: none !important; }

/* Fix for floating label background and text color in dark theme */
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: transparent !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: rgb(128, 134, 151) !important; /* Matches other labels */
}

/* -------------------------------------------------------------------------
 * AskLevi brand logo (replaces Porto's text/image logo).
 * Two source PNGs (~517x128) in /assets/core/themes/kosher/img/:
 *   logo-light-mode.png — for light surfaces; logo-dark-mode.png — for dark.
 * Toggle by the universal dark-mode signal (html.dark); default = light mode.
 * The art is wide, so constrain by height — these heights are the tuning knobs.
 * On always-dark surfaces (public header/footer) use logo-dark-mode.png directly
 * with plain .brand-logo (no variant) so the light artwork always shows.
 * ------------------------------------------------------------------------- */
.brand-logo       { height: 36px; width: auto; max-width: 100%; vertical-align: middle; }
.brand-logo--auth { height: 48px; }                 /* login / signup splash */
.brand-logo--dark { display: none; }                /* light mode → show --light */
html.dark .brand-logo--light { display: none; }     /* dark mode  → show --dark  */
html.dark .brand-logo--dark  { display: inline-block; }

/* -------------------------------------------------------------------------
 * Header background — translucent dark (0.3) on EVERY page by default, so the
 * light menu/logo stay legible over the light content most pages open with.
 * The skin paints .header-body via `.bg-dark { background-color: var(--dark)
 * !important }` (--dark = #212529 in skin-seo-3); color-mix() makes that same
 * colour 30% opaque without hardcoding the hue (rgba fallback for old browsers).
 * The #header id out-specificities the skin's .bg-dark rule, so our !important
 * wins. (Tune the 30% / 0.3 to taste.)
 * ------------------------------------------------------------------------- */
/* Case 1 — when the header is NOT in its transparent-at-top state (i.e. it's
   sticky on any page), paint the translucent dark bg. */
#header .header-body {
    background-color: rgba(33, 37, 41, 0.3) !important;                       /* fallback: --dark @ 0.3 */
    background-color: color-mix(in srgb, var(--dark) 30%, transparent) !important;
}

/* Case 2 — at the top of the page Porto forces .header-transparent transparent
   with a high-specificity rule:
     html:not(.sticky-header-active) #header.header-transparent:not(.header-semi-transparent) .header-body
   On NON-hero pages we override that (legible menu over light content). We match
   Porto's exact chain + `body:not(.header-hero)` so this out-specificities it,
   while hero pages (body.header-hero) fall through and stay transparent over the
   video — then Case 1 gives them the bg once they stick. */
html:not(.sticky-header-active) body:not(.header-hero) #header.header-transparent:not(.header-semi-transparent) .header-body {
    background-color: rgba(33, 37, 41, 0.3) !important;
    background-color: color-mix(in srgb, var(--dark) 30%, transparent) !important;
}