/* T176: moved verbatim from Views/Shared/_Layout.cshtml (inline <style> block).
   Linked at the exact position the <style> block occupied so the cascade is unchanged. */

#countryDropdownMenu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px; /* space between flag and text */
    padding: 6px 12px; /* consistent padding */
}

#countryDropdownMenu .fi {
    font-size: 1.2em; /* adjust flag size */
}

#countryDropdown {
    width: 100px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* adds "…" if text is too long */
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* T176: replacements for repeated inline style="" attributes in _Layout.cshtml */

.rv-preloader-dim {
    background-color: #1f1f1fa3 !important;
}

.rv-toastwrap-11 {
    z-index: 11;
}

.rv-toastwrap-9999 {
    z-index: 9999;
}

.rv-toast-closebtn {
    background-color: white;
    width: 20px;
    height: 20px;
}

/* ================================================================
   T408 — the sticky header row wrapped onto a second line
   ----------------------------------------------------------------
   .sticky-wrapper .menu-area .row is a Bootstrap row of three col-auto (logo,
   nav, actions). col-auto sizes to content, so as soon as the three exceed the
   row the ACTIONS column drops to a second line and the header doubles in height
   (measured 142-166px instead of 100px).

   Before this fix it wrapped at EVERY desktop width from 992 to 1600:

     width  row     logo + nav + actions  =  total   over
      1440  1425     238 + 746 + 643      =  1627    +202
      1200  1185     232 + 746 + 384      =  1362    +177
      1024  1009     232 + 746 + 198      =  1176    +167

   ⚠⚠ MEASURE THIS IN GERMAN, NEVER IN ENGLISH ALONE.
   The nav labels and the CTA are DB-driven and English dev data is far shorter
   than the real thing: "Book a Table" is ~170px but "Einen Tisch reservieren" is
   ~250px, and "Menu" becomes "Speisekarte". A first pass tuned on the English
   labels measured clean from 992px up and still wrapped in German at 1200, 1280,
   1366 and 1600. Every breakpoint below is set by what fits in GERMAN, so it has
   slack in English rather than the other way round.

   ⚠ ORGANISED BY BREAKPOINT BAND, WIDEST FIRST — not by property. Media queries
   add no specificity, so these rules are decided purely by source order. Written
   property-first, a narrow-band override placed above a wider-band rule silently
   loses; that happened during this fix (a 106px logo cap sat above the 132px one
   and never applied — computed max-width read 132px inside the band that was
   supposed to be 106px). Keep each band self-contained.
   ================================================================ */

/* --- the desktop nav now starts at 992, not 1200 (T482, 2026-08-24) --------
   T408 originally held the desktop nav back to 1200 because 7 German items
   didn't fit below it (measured 74px over at 992 with the tightest spacing
   that still looked deliberate). T482 recovers that 74px+ with the band
   directly below (flag-only country dropdown, a tighter logo cap, tighter
   nav-item margins, a tighter row gutter) and REMEASURED with the real
   headless-Chromium + real DB-localized EN/DE/FR labels (never English-only
   per the T408 note above) at 992/1024/1100/1199 WITH that recovery band
   applied:
     lang  992   1024  1100  1199   (all: single-line row, 100px height, 0px
     EN    fits  fits  fits  fits    page-level horizontal overflow)
     DE    fits  fits  fits  fits
     FR    fits  fits  fits  fits
   DE was the tightest case (logo+nav+actions summed ~6px over the row's
   inner width at exactly 992px with the FIRST recovery pass — logo cap
   106px/li margin 3px/guttter .5rem — and wrapped to a 142px 2nd line there
   only); the numbers above are the SECOND, shipped pass (logo cap 96px/li
   margin 2px/gutter .35rem) which closed that last 6px and is single-line
   at all 4 widths in all 3 languages. Branch A (this) was taken over the
   labelled-hamburger fallback (Branch B) because it genuinely fit — see
   02_plan.md / 03_progress.md for the full sweep JSON.

   Below 992 the hamburger takes over — it already carries the full menu.
   Safe to move here, unlike the equivalent change in the River Village
   client: this project's mobile menu (main.js "03. Mobile Menu") is a pure
   class toggle with no matchMedia and no hardcoded width, so the changeover
   lives entirely in these display rules. If that ever changes, the JS must
   move with them. */
@media (max-width: 991.98px) {
    .sticky-wrapper .menu-area .row > .col-auto.d-lg-block { display: none !important; }
    .sticky-wrapper .th-menu-toggle { display: block !important; }
}

/* --- 992-1199.98: nav is now shown here too, so buy back its width (T482) --
   #countryDropdown .rv-country-code is a new <span> wrapping the "DE"/"GB"/
   "FR"/"AE" text node in _Layout.cshtml (T221/T472 flag-only collapse
   pattern) — hiding it here keeps the flag + caret only, the dropdown still
   opens and each SetLanguage form still submits (unchanged markup/JS). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #countryDropdown { width: auto; padding-left: 8px; padding-right: 8px; }
    #countryDropdown .rv-country-code { display: none; }
    .sticky-wrapper .header-logo img { max-width: 96px; }
    .sticky-wrapper .main-menu > ul > li { margin: 0 2px; }
    .sticky-wrapper .menu-area > .container > .row { --bs-gutter-x: .35rem; }
}

/* --- 1200+: the desktop nav is shown, so buy back its width ------------------ */
@media (min-width: 1200px) {
    /* 12px each side on seven items is 168px spent on air; half is still clear */
    .sticky-wrapper .main-menu > ul > li { margin: 0 6px; }
    /* the logo renders at 188x60; height:auto preserves the aspect ratio */
    .sticky-wrapper .header-logo img { max-width: 150px; height: auto; }
    /* three col-auto at Bootstrap's default 1.5rem carry 72px of padding between
       them; 0.75rem is ample separation in a header row */
    .sticky-wrapper .menu-area > .container > .row { --bs-gutter-x: .75rem; }
}

/* --- 1200-1499: nav is present but the row is still tight ------------------- */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .sticky-wrapper .main-menu > ul > li { margin: 0 4px; }
    .sticky-wrapper .header-logo img { max-width: 132px; }
}

/* --- the reservation CTA waits until 1500 -----------------------------------
   The theme showed it from 1200 (d-xl-block). At 1200-1499 the German label
   ("Einen Tisch reservieren", ~250px) pushed the row over again — measured -14px
   at 1400. Safe to hold back because it is NOT the only route to booking: "Book
   Table" is its own top-level nav item pointing at the same action (the
   duplication is deliberate and documented at T175). */
@media (max-width: 1499.98px) {
    .sticky-wrapper .header-button > .th-btn { display: none !important; }
}

/* --- the phone block waits until 1800 ---------------------------------------
   .header-call is the single most expensive item in the actions cluster at 209px
   plus its gap. The theme held it back to 1400; in German that still overflowed
   by 135px at 1600 and 35px at 1700.
   ⚠ It is NOT duplicated in the top bar (that carries the address and opening
   hours), so do not "simplify" this by deleting the block — it must come back on
   a wide desktop, which is what this rule preserves. */
@media (max-width: 1799.98px) {
    .sticky-wrapper .header-call { display: none !important; }
}