/*
 * MBG UI Enhancements
 * ---------------------------------------------------------------------------
 * Loaded AFTER theme.css (declared as a dependency), so everything here wins
 * without needing !important except where noted. Nothing in this file changes
 * markup or JS behaviour — it is layout, rhythm and responsiveness only.
 *
 * Sections:
 *   1. Spacing scale tokens
 *   2. Fixed desktop header (+ admin-bar and anchor-offset handling)
 *   3. Section rhythm normalisation
 *   4. Plan Your Trip — mobile optimisation
 *   5. Dashboard polish (partner portal + planner panels)
 *   6. Accessibility / motion
 */

/* ==========================================================================
   1. SPACING SCALE
   The theme currently uses ad-hoc clamp() values per section, which is why
   vertical rhythm drifts between pages. These tokens give one shared scale.
   ========================================================================== */
:root {
  --mbg-space-2xs: clamp(6px, 0.6vw, 10px);
  --mbg-space-xs:  clamp(10px, 1vw, 16px);
  --mbg-space-sm:  clamp(16px, 1.8vw, 24px);
  --mbg-space-md:  clamp(24px, 3vw, 40px);
  --mbg-space-lg:  clamp(36px, 4.5vw, 64px);
  --mbg-space-xl:  clamp(52px, 6.5vw, 92px);
  --mbg-space-2xl: clamp(68px, 8vw, 116px);

  /* One source of truth for section rhythm. */
  --mbg-section-y: var(--mbg-space-xl);

  /* Header metrics — consumed by the fixed-header rules in section 2. */
  --mbg-header-h: 82px;
  --mbg-utility-h: 38px;
  --mbg-admin-bar: 0px;
}

.admin-bar { --mbg-admin-bar: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar { --mbg-admin-bar: 46px; }
}

/* ==========================================================================
   2. FIXED DESKTOP HEADER
   The theme shipped position:sticky, which only pins after you scroll past
   the utility bar. This makes the menu genuinely fixed on desktop so it is
   visible immediately and never scrolls away, with body padding to stop the
   content jumping underneath it.
   ========================================================================== */
@media (min-width: 901px) {
  .mbg-header {
    position: fixed;
    top: var(--mbg-admin-bar);
    left: 0;
    right: 0;
    z-index: 200;
    /* Slightly stronger blur/opacity than sticky needed, since content now
       always passes underneath rather than only after the utility bar. */
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }
  .mbg-header.is-scrolled {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 30px rgba(13, 37, 23, .09);
  }

  /* Reserve the header's space so the first section isn't hidden behind it. */
  body { padding-top: var(--mbg-header-h); }

  /* The utility strip sits above the header and scrolls away normally; when
     it is present the body needs its height reserved too. */
  body:has(.mbg-utility) { padding-top: calc(var(--mbg-header-h) + var(--mbg-utility-h)); }
  .mbg-utility { position: relative; z-index: 199; }

  /* Anchor links (#ghana-trip-map, #plan-enquiry, …) must not land under the
     fixed bar. scroll-margin-top is the modern, layout-safe way to do this. */
  :target,
  [id] { scroll-margin-top: calc(var(--mbg-header-h) + var(--mbg-admin-bar) + 16px); }

  /* Existing sticky panels were offset against the old sticky header; realign
     them to the fixed header so they don't overlap it. */
  .mbg-booking-card { top: calc(var(--mbg-header-h) + var(--mbg-admin-bar) + 24px); }
  .mbg-explorer__filters { top: calc(var(--mbg-header-h) + var(--mbg-admin-bar) + 18px); }
  .mbg-planner-controls { top: calc(var(--mbg-header-h) + var(--mbg-admin-bar)); }
  .mbg-planner-discovery,
  .mbg-planner-itinerary {
    top: calc(var(--mbg-header-h) + var(--mbg-admin-bar) + 90px);
    max-height: calc(100vh - var(--mbg-header-h) - var(--mbg-admin-bar) - 110px);
  }
}

/* Compact the fixed header once scrolled, so it reclaims vertical space. */
@media (min-width: 901px) {
  .mbg-header__inner { transition: min-height .22s ease; }
  .mbg-header.is-scrolled .mbg-header__inner { min-height: 66px; }
}

/* ==========================================================================
   3. SECTION RHYTHM
   Normalises the drifting per-section clamp() values onto the shared scale so
   page-to-page spacing is consistent, and kills doubled gaps where two padded
   sections meet.
   ========================================================================== */
.mbg-journey-inspiration,
.mbg-journey-how,
.mbg-journey-builder,
.mbg-journey-help,
.mbg-journey-newsletter,
.mbg-shopl-categories,
.mbg-shopl-row,
.mbg-shopl-banners { padding-block: var(--mbg-section-y); }

/* Tighten a heading section immediately followed by its own content block. */
.mbg-journey-section-heading { margin-bottom: var(--mbg-space-md); }

/* Remove the double gap where consecutive full-width sections stack. */
.mbg-journey-how + .mbg-journey-builder,
.mbg-shopl-row + .mbg-shopl-row,
.mbg-shopl-banners + .mbg-shopl-row { padding-top: 0; }

/* Last section before the footer shouldn't leave a large dead gap. */
.mbg-main > section:last-of-type { padding-bottom: var(--mbg-space-lg); }

/* Consistent inner gutter on small screens across every shell. */
@media (max-width: 600px) {
  :root { --mbg-shell: min(1240px, calc(100vw - 28px)); }
  .mbg-main > section { padding-block: var(--mbg-space-lg); }
}

/* ==========================================================================
   4. PLAN YOUR TRIP — MOBILE
   The planner is a two-pane desktop tool. On small screens theme.css switches
   the workspace to display:block, which stacks a tall map above a very long
   sidebar and forces heavy scrolling. These rules give the map a sensible
   fixed viewport height, make the panel scroll internally, and keep the
   primary actions reachable.
   ========================================================================== */
@media (max-width: 768px) {
  /* Map gets a predictable, thumb-friendly height instead of collapsing or
     dominating the screen. dvh accounts for mobile browser chrome. */
  .mbg-trip-planner .mbg-ghana-map__viewport {
    height: min(52dvh, 420px);
    min-height: 280px;
  }
  .mbg-trip-planner .mbg-ghana-map__head {
    position: sticky;
    top: 0;
    z-index: 6;
    background: #fff;
    padding-block: var(--mbg-space-xs);
  }

  /* Legend and notes are secondary on a small screen — reduce their weight. */
  .mbg-trip-planner .mbg-map-legend {
    gap: 8px;
    font-size: .66rem;
    flex-wrap: wrap;
  }
  .mbg-trip-planner .mbg-map-note,
  .mbg-trip-planner .mbg-map-guidance { font-size: .68rem; }

  /* Sidebar sections: tighter padding, clearer separation. */
  .mbg-trip-planner .mbg-sidebar-section { padding: var(--mbg-space-sm); }
  .mbg-trip-planner .mbg-sidebar-section + .mbg-sidebar-section {
    border-top: 1px solid rgba(15, 110, 86, .1);
  }

  /* Filter chips scroll horizontally rather than wrapping into a tall stack. */
  .mbg-trip-planner .mbg-planner-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .mbg-trip-planner .mbg-planner-filters::-webkit-scrollbar { display: none; }
  .mbg-trip-planner .mbg-planner-filters button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Interest chips and duration/pace buttons: bigger tap targets (44px min). */
  .mbg-trip-planner .mbg-interest-chips label span,
  .mbg-trip-planner .mbg-duration-options button,
  .mbg-trip-planner .mbg-pace-options button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Results list gets its own scroll area so the page doesn't grow unbounded. */
  .mbg-trip-planner .mbg-planner-results {
    max-height: 60dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Summary grid: 2-up instead of 4-up so numbers stay readable. */
  .mbg-trip-planner .mbg-plan-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mbg-space-xs);
  }

  /* Route action buttons pinned to the bottom of the viewport, thumb-reachable,
     clear of iOS home indicator via safe-area inset. */
  .mbg-trip-planner .mbg-planner-sidebar__footer {
    position: sticky;
    bottom: 0;
    z-index: 8;
    padding-bottom: calc(var(--mbg-space-xs) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(15, 110, 86, .12);
  }
  .mbg-trip-planner .mbg-route-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .mbg-trip-planner .mbg-route-actions button { min-height: 44px; font-size: .72rem; }

  /* Mobile filter toggle: full-width, unmistakable. */
  .mbg-trip-planner .mbg-planner-mobile-toggle {
    position: sticky;
    top: calc(var(--mbg-admin-bar) + 56px);
    z-index: 9;
    width: 100%;
    min-height: 48px;
  }

  /* Toast shouldn't cover the pinned action bar. */
  .mbg-planner-toast {
    right: 12px;
    left: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }
}

/* Very small phones: stop the 4-up summary and 3-up actions from cramping. */
@media (max-width: 380px) {
  .mbg-trip-planner .mbg-route-actions { grid-template-columns: 1fr 1fr; }
  .mbg-trip-planner .mbg-route-actions button:last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   5. DASHBOARD POLISH
   Applies to the partner portal shell and the planner's panel chrome. Adds
   depth, clearer focus states and smoother interaction feedback.
   ========================================================================== */
.mbgp-card,
.mbgm-card,
.mbg-planner-sidebar,
.mbg-ghana-map {
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Stat tiles read as live data rather than flat boxes. */
.mbgp-stats article,
.mbgm-stats article,
.mbg-plan-summary > div {
  position: relative;
  overflow: hidden;
}
.mbgp-stats article::after,
.mbgm-stats article::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mbg-green, #006b3f), var(--mbg-gold, #f4c430));
  opacity: .8;
}

/* Animated value changes: the planner already animates numbers in JS; this
   gives the same affordance to any element flagged with data-number. */
[data-number] { font-variant-numeric: tabular-nums; transition: color .3s ease; }

/* Tables in dashboards scroll rather than breaking layout on narrow screens. */
.mbgp-table-wrap,
.mbgm-table-wrap,
.mbg-lf-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Consistent, visible focus ring across every interactive dashboard control. */
.mbgp-card :focus-visible,
.mbgm-card :focus-visible,
.mbg-planner-sidebar :focus-visible {
  outline: 2px solid var(--mbg-gold, #f4c430);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ==========================================================================
   6. ACCESSIBILITY / MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ensure every control meets the 44px touch target minimum on coarse pointers. */
@media (pointer: coarse) {
  button,
  .button,
  [role="button"],
  input[type="submit"] { min-height: 44px; }
}

/* Print: never print the fixed header over content. */
@media print {
  .mbg-header { position: static !important; }
  body { padding-top: 0 !important; }
}