/* ============================================================================
   OVERCROSS - the one header.
   ============================================================================

   There used to be two: `header.blade.php` for the desktop shell and
   `header_m.blade.php` for the mobile one, carrying DIFFERENT navigation (the
   phone could not reach the blog at all).  They are now one markup, and this
   file is the only thing that decides where a part of it sits.

   THE LADDER.  600 / 900 / 1200 and no other width - mobile first, every
   wider rung ADDED through `min-width`.  `php artisan css:ladder` counts what
   is left.  Concept: docs/design/mobile-concept.md, characteristics 1, 2, 7
   and 11.

   WHAT LIVES WHERE

     .header, .nav-container, .nav-group*, .btn, .btn--circle*, .header_bg,
     .header_block            -> public/css/app_r.css   (NOT ours; loaded first)
     everything below 900, the off-canvas, the bar actions, the hamburger,
     the phone tooltip, the language dropdown, the category chooser
                              -> this file              (loaded after app_r.css)

   Rules that had to be OVERRIDDEN from app_r.css are marked `[override]` with
   the reason.  app_r.css is desktop-shaped for the parts the phone now uses
   differently, and it is owned by somebody else, so the correction lives here.

   Colours: #FF6A00 orange (CTA only), #111214 black, #EDE3D5 milk.
   ========================================================================= */


/* --- 0. The bar's own height ---------------------------------------------
   The destinations panel and the off-canvas both hang off it, and it is the
   one measurement that differs between the phone bar and the desktop bar.  */

:root {
  /* 8px `.header` padding + 8px `.nav-container` padding + the 48px touch row
     + 8 + 8. The desktop's 85px is app_r.css's own number for `.header_bg`. */
  --oc-header-h: 80px;
}


/* --- 1. Body ground ------------------------------------------------------
   One shell, one body colour. The retired css/m/app_r.css painted it black
   for phones; this is the colour the desktop has always had, and it is the
   one that serves both now.  */

body {
  background: var(--main-bg-color, #f9f7f2);
}


/* --- 2. The bar ----------------------------------------------------------
   [override] app_r.css gives `.nav-container` `flex-direction: column` and
   `min-height: 160px` below 600: that was the desktop header wrapping onto
   three rows, not a phone header.  The phone bar is one row - hamburger,
   logo, the two actions that never leave the bar.  */

#site-header .nav-container {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  min-height: 0;
  padding: 8px max(15px, env(safe-area-inset-left, 0px)) 8px max(15px, env(safe-area-inset-right, 0px));
}

/* [override] app_r.css gives every `.nav-group` `width: 100%` below 600. */
#site-header .nav-group {
  width: auto;
  flex-wrap: nowrap;
}

@media (min-width: 900px) {
  :root {
    --oc-header-h: 85px;
  }

  #site-header .nav-container {
    gap: 0;
  }
}


/* --- 3. The hamburger ----------------------------------------------------
   Characteristic 11: it is the primary navigation control of every phone
   page, so it is a 48px target and not the 24px box it used to be.  Scoped
   to the header because `.menu-btn` and `.search-btn` are also class names
   on the category page's tour tool.  */

#site-header .menu-btn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px 9px;
  margin: 0;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

#site-header .menu-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

#site-header .menu-btn span {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

#site-header .menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

#site-header .menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

#site-header .menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 900px) {
  /* From here the nav is in the bar, so the control that opens it is gone.
     This is the ONLY place the 900 rung is expressed - there is no width
     number anywhere in the header's JavaScript. */
  #site-header .menu-btn {
    display: none;
  }
}


/* --- 4. Logo and tagline -------------------------------------------------
   [override] app_r.css sizes the logo 56px (base), 85px (from 600) and 63px
   when scrolled, and absolutely centres the block from 600.  On a phone bar
   that is four times the height of the bar, so the phone keeps it in flow at
   34px and the desktop measurements come back at 900.  */

#site-header .nav-group--center {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  flex: 1 1 auto;
  align-items: center;
  margin: 0;
  min-width: 0;
}

#site-header .nav-group--center .logo,
#site-header.header--scrolled .nav-group--center .logo {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 1px;
}

/* The rotated Vineritc line needs room the phone bar does not have. */
#site-header .nav-group--center .tagline {
  display: none;
}

@media (min-width: 900px) {
  #site-header .nav-group--center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex: 0 0 auto;
  }

  #site-header .nav-group--center .logo {
    font-size: 85px;
  }

  #site-header.header--scrolled .nav-group--center .logo {
    font-size: 63px;
  }

  #site-header .nav-group--center .tagline {
    display: block;
  }
}


/* --- 5. The off-canvas ---------------------------------------------------
   Collapsed is not absent (characteristic 1): the nav is in the DOM at first
   paint at every width, nothing is built by JavaScript, and below 900 it is
   hidden by a TRANSFORM, never by `display: none` on the links.

   `visibility` rides along only so a closed panel cannot take the keyboard
   focus; it is transitioned, not switched, so the slide is still a slide.  */

#site-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3005;
  display: flex;
  flex-direction: column;
  width: min(88vw, 360px);
  max-width: 100%;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: #111214;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* `body.menu-open` sets `touch-action: none` to stop the page behind from
     scrolling, and that inherits: without this the panel itself could not be
     scrolled with a thumb. */
  touch-action: pan-y;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}

#site-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.28s ease, visibility 0s linear 0s;
}

.nav-panel__head {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.nav-panel__close {
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.nav-panel__close:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Inside the panel the two groups are stacked lists of 48px rows. */
#site-nav .nav-group {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

#site-nav .nav-group--left .btn,
#site-nav .nav-group--right .btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  margin: 0;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 18px;
  text-align: left;
  white-space: normal;
}

#site-nav .nav-group--right {
  margin-top: 14px;
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 3004;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.nav-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 900px) {
  /* In the bar: the panel becomes a plain flex row that takes the width the
     centred logo is floating over, with the two groups at its ends - which is
     the layout app_r.css was written against, minus the wrapper.

     `display: contents` would also have worked and is one rule shorter; it is
     not used because it takes the element's box away, and with it the <nav>
     landmark in some screen readers. */
  #site-nav {
    position: static;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    transform: none;
    visibility: visible;
  }

  #site-nav .nav-group {
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  #site-nav .nav-group--left .btn,
  #site-nav .nav-group--right .btn {
    display: inline-flex;
    min-height: 0;
    padding: 5px 8px;
    border-bottom: none;
    font-size: 15px;
  }

  #site-nav .nav-group--right {
    margin-top: 0;
  }

  .nav-panel__head,
  .nav-panel__contact {
    display: none;
  }

  .nav-scrim {
    display: none;
  }
}


/* --- 6. The left group's type scale --------------------------------------
   Was an inline <style> at the top of header.blade.php.  Four items share the
   row and an 85px logo sits on top of them, so from 1200 they step up rather
   than wrap under it.  */

/* The destinations toggle is a real <button>, not an <a href="javascript:">:
   it is a control, and a control gets keyboard activation for free. It has to
   lose the UA button chrome that `.btn` (written for an <a>) never had to. */
#site-header button.btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  text-align: inherit;
}

#site-header .nav-group--left {
  margin-left: 0;
}

/* Was four copies of `style="text-transform: uppercase"` in the blade. */
#site-header .nav-group--left .btn {
  display: flex;
  align-items: center;
  gap: 2px;
  text-transform: uppercase;
}

#site-header .nav-group--left .btn-arrow {
  display: none;
  margin-left: 0;
}

#site-header .nav-group--left .btn-arrow svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 900px) {
  #site-header .nav-group--left .btn {
    font-size: 13px;
    padding: 4px 6px;
    margin: 0 1px;
    white-space: nowrap;
  }

  #site-header .nav-group--left .btn-arrow {
    display: inline-flex;
  }
}

@media (min-width: 1200px) {
  #site-header .nav-group--left {
    margin-left: -70px;
  }

  #site-header .nav-group--left .btn {
    font-size: 15px;
    padding: 5px 8px;
    margin: 0 2px;
  }

  #site-header.header--scrolled .nav-group--left .btn {
    font-size: 14px;
  }
}


/* --- 7. The panel's contact block ---------------------------------------- */

.nav-panel__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  flex: 0 0 auto;
}

.nav-panel__contact a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px;
  border-radius: 9px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.nav-panel__email {
  background: #FF6A00;
  color: #fff;
}

.nav-panel__login {
  background: #EDE3D5;
  color: #111214;
}


/* --- 8. The actions that never leave the bar -----------------------------
   Language and search sit beside the hamburger on a phone and at the end of
   the bar on a desktop, so they are a sibling of the nav, not part of it.  */

.nav-bar-actions {
  position: relative;   /* so the language dropdown's z-index has an owner */
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  z-index: 3010;
}

.nav-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.nav-search:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FF6A00;
}

.nav-search svg {
  width: 22px;
  height: 22px;
}


/* --- 9. Language switcher ------------------------------------------------
   Was an inline <style> inside header.blade.php.  One implementation for
   both widths: the one that builds its targets from the hreflang tags
   server-side, so a locale with no translation of the current page cannot
   produce a dead link.  */

#languageSelect {
  position: relative;
  display: inline-block;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  z-index: 3010;
}

#langTrigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 7px 10px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.2s, border-color 0.2s;
}

#langTrigger:hover,
#languageSelect.open #langTrigger {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

#lang_flag svg,
.lang-dd-flag svg {
  display: block;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

#lang_flag .lang-dd-flag-emoji {
  display: block;
  font-size: 16px;
  line-height: 16px;
}

#lang_flag .lang-dd-flag-img {
  display: block;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

#lang_code {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#lang_chevron {
  transition: transform 0.25s ease;
  opacity: 0.75;
}

#languageSelect.open #lang_chevron {
  transform: rotate(180deg);
  opacity: 1;
}

#languageDropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 3020;
  min-width: 155px;
  overflow: hidden;
  padding: 4px 0;
  animation: langDdFadeIn 0.18s ease;
}

@keyframes langDdFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#languageDropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  color: #e0e0e0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

#languageDropdown a:hover {
  background: rgba(238, 125, 0, 0.18);
  color: #EE7D00;
}

#languageDropdown a.lang-active {
  color: #EE7D00;
  font-weight: 700;
  background: rgba(238, 125, 0, 0.10);
}

#languageDropdown a .lang-dd-flag {
  flex-shrink: 0;
}

#languageDropdown a span.lang-dd-name {
  flex: 1;
}

#languageDropdown a .lang-dd-check {
  margin-left: auto;
  opacity: 0;
  color: #EE7D00;
  font-size: 13px;
}

#languageDropdown a.lang-active .lang-dd-check {
  opacity: 1;
}


/* --- 10. Phone button and its opening hours ------------------------------ */

#phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 3010;
}

.btn--phone-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
  text-transform: none;
}

.btn--phone-link:hover {
  background: rgba(238, 125, 0, 0.18);
  border-color: #EE7D00;
  color: #EE7D00;
}

/* On a phone the tooltip is not a tooltip: there is no hover, so the hours
   are printed under the number inside the panel. */
#phone-tooltip {
  padding: 8px 10px 0;
  color: #bbb;
  white-space: nowrap;
}

.pht-status {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.2;
}

.pht-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.pht-open { color: #2ecc71; }
.pht-open .pht-status-dot { background: #2ecc71; box-shadow: 0 0 5px #2ecc71aa; }
.pht-closed { color: #999; }
.pht-closed .pht-status-dot { background: #aaa; }

.pht-berlin-sub {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
  font-weight: 400;
}

@media (min-width: 900px) {
  #phone-wrap {
    display: inline-flex;
  }

  .btn--phone-link {
    font-size: 13px;
    gap: 0;
  }

  .btn--phone-link svg {
    margin-right: 6px;
  }

  #phone-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13), 0 1px 4px rgba(0, 0, 0, 0.07);
    padding: 10px 16px 9px;
    display: none;
    z-index: 3020;
    animation: phtFadeIn 0.18s ease;
    pointer-events: none;
  }

  #phone-wrap:hover #phone-tooltip {
    display: block;
  }

  .pht-open { color: #1a7a4a; }
  .pht-closed { color: #666; }
}

@keyframes phtFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* --- 11. The destinations panel -----------------------------------------
   The same panel at every width - category > continent > country, 140 real
   anchors rendered on the server.  The phone used to get a JavaScript
   category chooser instead, which carried no link to the landing cluster at
   all (characteristic 7).

   [override] app_r.css pins `.header_bg` at `top: 85px`, which is the desktop
   bar.  Below 900 the bar is 64px and the panel has to be able to scroll to
   the bottom of a phone screen.  */

#site-header .header_bg {
  top: var(--oc-header-h);
  bottom: 0;
  z-index: 3006;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#site-header .header_bg .container-menu {
  margin: 0;
  padding: 16px 15px calc(24px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
  #site-header .header_bg {
    bottom: auto;
    z-index: auto;
    overflow-y: visible;
  }

  #site-header .header_bg .container-menu {
    padding: 16px 24px 24px;
  }
}


/* --- 12. The category chooser -------------------------------------------
   Was an inline <style> in header_m.blade.php, and the phone was the only
   place it was defined - while the homepage tiles, the continent map and the
   Tourkalender button all open it on both shells.  */

body.menu-open {
  overflow: hidden;
  touch-action: none;
}

.choose_cat_block {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(126, 126, 126, 0.212);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  backdrop-filter: blur(7px);
}

.choose_cat_block.show {
  opacity: 1;
  visibility: visible;
}

.choose_cat_block .container_cat {
  width: 100%;
  max-width: 560px;
  height: 320px;
  border-radius: 9px;
  background-color: #141414;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.choose_cat_block .links {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}

.jeep-nav-ico {
  content: url(/icon/JeepIcon.svg);
  height: 44px;
}

.choose_cat_block .container_cat a {
  align-items: center;
  display: flex;
  text-decoration: none;
  flex-direction: column;
  color: #ffffff;
  min-height: 48px;
}

.choose_cat_block .container_cat p {
  color: #ffffff !important;
  text-align: center;
  margin-top: 30px;
  font-size: 32px;
  font-weight: 400;
}

.choose_cat_block .container_cat a:hover div {
  color: #FF6A00;
}

.choose_cat_block .container_cat .close-cat-block {
  position: absolute;
  top: 18px;
  left: 18px;
  right: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  z-index: 10;
}