/*
 * Responsive patch layer
 * -----------------------
 * Isolated override stylesheet, loaded AFTER the theme's compiled app.css.
 * Intentionally NOT folded into the MyTravel theme bundle so it survives theme
 * updates and is trivially revertible (delete this file + its <link> in
 * themes/Mytravel/Layout/app.blade.php).
 *
 * Rules are scoped to tablet & mobile. Most sit in a max-width: 1023.98px
 * block; the header dead-zone fix below reaches max-width: 1199.98px because
 * that is where the desktop topbar disappears. Desktop (>= 1200px) keeps its
 * own topbar and is untouched.
 */

@media (max-width: 1023.98px) {

  /*
   * Fix: the paginator is a Bootstrap `.pagination` flex row that does not
   * wrap. On listing pages with many pages (hotels, events, tours) the page
   * numbers run past the viewport edge, forcing the whole page to scroll
   * horizontally on phones. Allow it to wrap and centre it.
   * Ref: WCAG 1.4.10 Reflow (no two-axis scrolling at 320px).
   */
  ul.pagination {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    justify-content: center;
  }

  /*
   * Bring the pagination controls up to a comfortable tap size. The default
   * page links render ~36px; nudge to 40px and centre their glyphs.
   * Ref: WCAG 2.5.8 Target Size (Minimum, 24px) / 2.5.5 (Enhanced, 44px).
   */
  ul.pagination .page-link {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

@media (max-width: 1199.98px) {

  /*
   * Fix: tablet/large-tablet header "dead zone" (1024px - 1199px).
   *
   * The desktop topbar (.u-header__topbar-lg) carries the login link and the
   * language switcher and is hidden at <= 1199.98px. But the theme only wires
   * the off-canvas drawer to open at <= 1023px: both `.bravo-menu-mobile`'s
   * `display: block !important` and the `.active` slide-in transform live in a
   * max-width: 1023px block. So between 1024px and 1199px the hamburger button
   * shows yet its drawer can never open, leaving login + language unreachable
   * on iPad Pro (1024px) and 7" touch screens. Ref: UC-MVP-AC-03.
   *
   * Extend the drawer's open behaviour up to the topbar's own breakpoint so the
   * hamburger works across the whole range where the topbar is absent.
   */
  .bravo_wrap .bravo_header .bravo-more-menu {
    display: block;
  }
  .bravo_wrap .bravo_header .bravo-menu-mobile {
    display: block !important;
  }
  .bravo_wrap .bravo_header .bravo-menu-mobile.active {
    transform: translate(0);
  }

}

@media (max-width: 1199.98px) {

  /*
   * Mobile off-canvas drawer modernization (RETOURS TESTS: "this responsive
   * version is not modern at all"). Pure styling on the existing
   * .bravo-menu-mobile markup — no structure or behaviour change. Goals:
   *   - real tap targets (WCAG 2.5.5 Enhanced, >= 44px),
   *   - clear visual hierarchy + branded CTAs,
   *   - remove the large empty void left by the theme's always-printed but
   *     often-empty avatar / currency / primary-menu placeholders.
   * Brand tokens: navy #1a2b48, orange #fd7e14.
   */

  /* Surface: a touch wider, with depth so it reads as a real sheet. */
  .bravo_wrap .bravo_header .bravo-menu-mobile {
    width: min(88vw, 344px);
    box-shadow: 8px 0 40px rgba(16, 24, 40, 0.16);
  }

  /* Collapse the empty placeholders the theme always prints — these (not real
     content) are what create the big blank gap under the language row. */
  .bravo_wrap .bravo-menu-mobile .avatar:empty,
  .bravo_wrap .bravo-menu-mobile .user-profile > ul.multi-lang:empty,
  .bravo_wrap .bravo-menu-mobile .g-menu:empty { display: none; }

  .bravo_wrap .bravo-menu-mobile .user-profile { padding: 0.25rem 0.875rem 1.25rem; }
  .bravo_wrap .bravo-menu-mobile .user-profile > ul { list-style: none; margin: 0; padding: 0; }

  /* Close control: self-contained round 44px button. The theme's rule
     (.bravo_wrap .bravo_header .bravo-menu-mobile .user-profile .b-close) paints
     a 34px white glyph absolutely at top-right — fine over the old navy strip,
     invisible on the white surface. Match its 5-class specificity to give it a
     light chip + navy glyph that stays visible. Keep position:absolute. */
  .bravo_wrap .bravo_header .bravo-menu-mobile .user-profile .b-close {
    width: 44px; height: 44px; top: 10px; right: 10px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.15rem; line-height: 1;
    background: #eef1f6; color: #1a2b48;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .bravo_wrap .bravo_header .bravo-menu-mobile .user-profile .b-close i { color: inherit; }
  .bravo_wrap .bravo_header .bravo-menu-mobile .user-profile .b-close:hover {
    background: #e2e7f0; color: #0b1b3a;
  }

  /* Guest CTAs: promote the bare "Connexion / S'inscrire" text links to
     full-width branded buttons — primary (Sign up) vs secondary (Login). */
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.login,
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.signup {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 50px; margin: 0.375rem 0; padding: 0 1rem;
    font-size: 1rem; font-weight: 700; line-height: 1.1;
    border-radius: 12px; text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  }
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.login:active,
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.signup:active { transform: scale(0.985); }

  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.signup {
    background: #fd7e14; color: #fff;
    box-shadow: 0 8px 18px rgba(253, 126, 20, 0.28);
  }
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.signup:hover { background: #ec6f08; color: #fff; }

  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.login {
    background: #fff; color: #1a2b48; border: 1.5px solid #dfe4ee;
  }
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.login:hover { background: #f4f6fb; color: #1a2b48; }

  /* Leading icons via inline SVG (no icon-font dependency). */
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.login::before,
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.signup::before {
    content: ""; width: 18px; height: 18px; flex: 0 0 18px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
  }
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.login::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2b48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
  }
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a.signup::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
  }

  /* Logged-in account rows (profile / dashboard / logout): clean 48px rows. */
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a:not(.login):not(.signup) {
    display: flex; align-items: center; gap: 0.75rem;
    min-height: 48px; padding: 0.5rem 0.75rem;
    font-size: 1rem; font-weight: 600; color: #1a2b48;
    border-radius: 10px; text-decoration: none;
  }
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a:not(.login):not(.signup):hover { background: #f4f6fb; }
  .bravo_wrap .bravo-menu-mobile .user-profile ul li a:not(.login):not(.signup) i {
    color: #fd7e14; width: 1.25rem; text-align: center; font-size: 1.05rem;
  }

  /* Language switcher: every active locale as a flat row (no dropdown toggle) so
     all languages are visible at once. */
  .bravo_wrap .bravo-menu-mobile .user-profile ul.multi-lang {
    list-style: none; margin: 0.5rem 0 0; padding: 0.75rem 0 0;
    border-top: 1px solid #eef1f6;
  }
  .bravo_wrap .bravo-menu-mobile .user-profile ul.multi-lang > li > a {
    display: flex; align-items: center; gap: 0.6rem;
    min-height: 44px; padding: 0.25rem 0.75rem;
    font-weight: 600; color: #1a2b48; border-radius: 10px; text-decoration: none;
    transition: background-color 0.15s ease;
  }
  .bravo_wrap .bravo-menu-mobile .user-profile ul.multi-lang > li > a:hover {
    background: #f4f6fb;
  }
  /* The current locale: highlighted with a check, non-actionable. */
  .bravo_wrap .bravo-menu-mobile .user-profile ul.multi-lang > li.lang-current > a {
    background: #f4f6fb; cursor: default;
  }
  .bravo_wrap .bravo-menu-mobile .user-profile ul.multi-lang > li.lang-current > a::after {
    content: ""; margin-left: auto; width: 18px; height: 18px; flex: 0 0 18px;
    background: no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fd7e14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  }

}