/* ============================================================
   venturenorth.com.au — Mobile Overrides (Dash, Apr 2026)
   Quote #600. Loaded AFTER main.<hash>.css. Mobile-only.
   Breakpoint matches existing site: 320–599px.

   Specificity rules:
   - Most existing rules use `.js .selector` (specificity 0,2,0)
   - Site shell rules like .labelled_nav__top_bar use
     `.js body.labelled_nav .selector` (0,3,1) — match this
     prefix to win cascade ties without !important.

   Per-template scoping: body class is identical site-wide
   (`labelled_nav`), so we scope via unique structural
   selectors that only exist on each template:
     - homepage:    .tour_grid, .wrap.awards
     - tour archive: .wrap.tour_listing
     - tour detail: .tour_dates__day_container
     - region:      .two_col_sidebar:not(.blog)
     - blog post:   .two_col_sidebar.blog--article
     - team:        .team_list

   CARP design principles guide the changes:
     C — Contrast: stronger text-on-image legibility
     A — Alignment: consistent baselines on cards & CTAs
     R — Repetition: unified button styling
     P — Proximity: tight gaps within groups, breathing room between
   ============================================================ */

@media screen and (min-width: 320px) and (max-width: 599px) {

  /* ============================================================
     GLOBAL — Top bar layout + icon visibility
     ============================================================ */

  /* Top bar layout: logo LEFT, phone + menu paired RIGHT.
     Visual goals (CARP):
       - Repetition: logo / phone / menu should share visual rhythm,
         not three different weights
       - Alignment: all three vertically centered cleanly inside 56px
       - Proximity: phone and menu live as a paired right-side cluster;
         logo lives alone on the left
       - Contrast: all three items white-on-dark-green, equal visual weight

     The DOM is <section><ul.contact><a.logo><a#nav-toggle></section>.
     Flex with `order` reorders visually without touching markup.

     Force everything to 44px height target boxes so all three items
     match. Override existing height: 60px on .labelled_nav__contact and
     existing position:absolute on #nav-toggle. */

  .js body.labelled_nav .labelled_nav__top_bar {
    background-color: #1f2a24;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    height: 56px;
  }
  .js body.labelled_nav .labelled_nav__top_bar > section {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 56px;
    padding: 0 12px;
    gap: 0;
    box-sizing: border-box;
  }

  /* Logo — leftmost, smaller so it doesn't dominate the bar */
  .js body.labelled_nav .labelled_nav__top_bar .logo {
    order: 0;
    margin: 0;
    padding: 0;
    height: 56px;
    display: inline-flex;
    align-items: center;
  }
  .js body.labelled_nav .labelled_nav__top_bar .logo img {
    height: 30px;
    width: auto;
    display: block;
    margin-top: 0;
  }

  /* Phone link — single 44x44 icon button, paired with menu on the right.
     Override existing `.labelled_nav__contact { height: 60px }` and
     `background-color: cream` on the inner link. */
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__contact,
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__contact li {
    order: 1;
    margin: 0;
    padding: 0;
    height: 56px;
    display: inline-flex;
    align-items: center;
    list-style: none;
    float: none;
    line-height: 1;
  }
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__contact {
    margin-left: auto;
  }
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__phone {
    color: transparent;
    background-color: transparent;
    font-size: 0;
    padding: 0;
    text-decoration: none;
    line-height: 1;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }
  /* Align the icon-font ::before pseudo within its span using flex centering.
     The venture-north font's phone glyph sits in the upper portion of its
     character cell, so we need to constrain the cell to the glyph height
     (line-height: 1) and use flex on the parent span so align-items
     centers the pseudo's actual rendered box, not just its line-box. */
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__phone .icon-phone {
    color: #fef2ed;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
  }
  /* Replace the legacy handset glyph (from the venture-north icon font)
     with a modern smartphone outline rendered as an inline SVG mask.
     `background-color: currentColor` means the icon picks up whatever
     text colour the header is using, so it stays in lock-step with
     any future top-bar theming. */
  .js body.labelled_nav .labelled_nav__top_bar .labelled_nav__phone .icon-phone::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='6.5' y='2.5' width='11' height='19' rx='2.25'/><line x1='10.5' y1='5.5' x2='13.5' y2='5.5'/><circle cx='12' cy='18.75' r='0.6' fill='black' stroke='none'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='6.5' y='2.5' width='11' height='19' rx='2.25'/><line x1='10.5' y1='5.5' x2='13.5' y2='5.5'/><circle cx='12' cy='18.75' r='0.6' fill='black' stroke='none'/></svg>");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    line-height: 1;
    vertical-align: middle;
    align-self: center;
  }

  /* Menu — rightmost, same 44x44 visual rhythm as the phone, with
     "Menu" label tucked next to the hamburger icon for clarity.
     Reset existing position:absolute + drop the white border box.
     Padding is symmetric (4px each side) so the hamburger and Menu text
     are visually balanced inside the click target. */
  .js body.labelled_nav .labelled_nav__top_bar #nav-toggle {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    padding: 0 4px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
  }
  /* Existing CSS sets `.menu_outline { margin: 10px 0 0 10px; padding: 0 7px 0 25px; border: 1px solid }`
     — that pushes the inner content down and right, breaking vertical alignment with
     the logo and phone. Zero margin/padding/border so the inner items flex-center
     cleanly within the 44px-tall #nav-toggle. */
  .js body.labelled_nav .labelled_nav__top_bar #nav-toggle .menu_outline {
    color: #fef2ed;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    margin: 0;
    padding: 0;
    height: auto;
    border: 0;
    background: transparent;
    vertical-align: middle;
  }
  /* Existing CSS sets `.icon-menu { position: absolute; top: 8px }` which
     pulls the icon out of flex flow and pins it below the "Menu" text.
     Force position:static so it sits inline next to the text label. */
  .js body.labelled_nav .labelled_nav__top_bar #nav-toggle .icon-menu {
    color: #fef2ed;
    font-size: 22px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    position: static;
    top: auto;
    left: auto;
  }


  /* ============================================================
     GLOBAL — Off-canvas nav drawer: open from the RIGHT (not left)
     ============================================================
     The site uses responsiveNav with `animate: false`, meaning JS only
     toggles the `body.nav-open` class — the slide animation is pure CSS.

     Existing rules (in main.<hash>.css, all inside the same mobile @media):
       .js body.labelled_nav #primary-nav            { left: -60%; }
       .js.csstransforms3d body.labelled_nav.nav-open #primary-nav
                                                     { transform: translate3d(100%, 0, 0); }
       .js.no-csstransforms3d body.labelled_nav.nav-open #primary-nav
                                                     { left: 0; }

     We mirror to the right: closed state sits off-canvas right, open state
     transforms LEFT (-100%) to slide into view from the right edge.
     Specificity matches the existing rules exactly so source order
     (override file loads after main.css) wins the cascade. */
  .js body.labelled_nav #primary-nav {
    left: auto;
    right: -60%;
  }
  .js.csstransforms3d body.labelled_nav.nav-open #primary-nav {
    transform: translate3d(-100%, 0, 0);
  }
  .js.no-csstransforms3d body.labelled_nav.nav-open #primary-nav {
    left: auto;
    right: 0;
  }


  /* ============================================================
     GLOBAL — Top bar shrink-on-scroll (CSS scroll-driven animation)
     ============================================================
     At the top of the page the bar is 112px tall with a 60px logo
     (twice the scrolled state) — gives more visual presence on landing.
     As the user scrolls past 80px, it interpolates down to the standard
     56px bar / 30px logo.

     Pure CSS via animation-timeline: scroll() — no JS required.
     Wrapped in @supports so older browsers fall back to the static 56px bar. */

  @supports (animation-timeline: scroll()) {
    .js body.labelled_nav .labelled_nav__top_bar {
      animation: vnTopBarShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    .js body.labelled_nav .labelled_nav__top_bar > section {
      animation: vnTopBarSectionShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    .js body.labelled_nav .labelled_nav__top_bar .logo {
      animation: vnLogoBoxShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    .js body.labelled_nav .labelled_nav__top_bar .logo img {
      animation: vnLogoImgShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    /* Hero needs more top padding when bar is taller, so content isn't
       hidden under the expanded bar. Animate padding in lock-step. */
    .js .top_block {
      animation: vnHeroPaddingShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
    /* Off-canvas drawer top edge follows the top bar height so the menu
       isn't cut off when the bar is in its expanded state. Same scroll
       range and easing as the bar shrink, so they move in lock-step. */
    .js body.labelled_nav #primary-nav {
      animation: vnDrawerTopShrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }
  }


  /* NOTE: No global .btn overrides. The site's existing button styles are
     fine — earlier global .btn rules inflated padding/size on every
     button across the entire site. Only override buttons where explicitly
     needed (e.g. the fixed tour-detail CTA). */


  /* ============================================================
     HOMEPAGE — scoped via .tour_grid + .wrap.awards
     ============================================================ */

  /* Collapse the header CTA wrap so it takes no space, but children
     remain visible if present on other templates. */
  .js .header_cta__wrap {
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: visible;
  }

  /* H1. Hero: shrink heading, clip wall-of-text, raise contrast (CARP: Contrast).
     The hero image is a vibe/atmosphere background, not content the user
     needs to study — so tighten vertical padding around the H1 to half.
     Visual centering: zero out h1's bottom margin and equalise the wrapper
     padding-top/bottom so the h1 sits visually centered in its breathing room. */
  .js .top_block .main_heading {
    font-size: 1.85em;
    line-height: 1.18;
    text-shadow: 0 2px 12px rgba(0,0,0,0.55);
    margin: 0;
  }
  .js .top_block .main_heading__wrapper {
    padding-top: 1.5em;
    padding-bottom: 0;
    margin-top: -9px;
    background-color: rgba(0, 0, 0, 0.65);
  }
  .js .top_block .intro_text {
    min-height: 2rem;
  }
  .js .top_block .intro_text p:nth-of-type(n+2) {
    display: none;
  }
  .js .top_block .intro_text p:first-of-type {
    font-size: 0.95em;
    line-height: 1.4;
  }

  /* Homepage-only hero restructure (2026-04-28).
     Scoped to template-16 (homepage). Reveal the hero rotation image fully
     instead of cropping to cover, pin it to the top, and push the heading
     wrapper down so it sits below the image rather than over it.
     Specificity: .js body.template-16 .top_block ... = (0,4,1) — wins over
     the (0,3,0) hero rules above without !important. */
  .js body.template-16 .top_block {
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
  }
  .js body.template-16 .top_block .main_heading__wrapper {
    margin-top: 16vh;
  }

  /* Hero rotation — coordinate the BGToggle overlay with the J4 fix above.
     BGToggle (in plugins.30505.js → renamed bundle) now fires on mobile
     after the gate was widened from min-width:600px to min-width:300px.
     It appends a .bgtoggle__overlay child to .top_block and cross-fades
     the overlay's background-image into a different one every 6s. The
     base CSS paints the overlay background-size:cover / position:center,
     which clashes with the J4 .top_block contain/top treatment — mid-fade
     the image would visibly resize and shift. Mirror the J4 sizing on the
     overlay so both layers stay aligned through the fade.
     Specificity: (0,3,1) — wins over base .bgtoggle__overlay (0,1,0). */
  .js body.template-16 .top_block .bgtoggle__overlay {
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
  }

  /* Mobile nav drawer — escape the .bgtoggle stacking-context trap.
     #primary-nav (position:fixed, z-index:99) is a descendant of
     .header_cta__wrap, which gets z-index:2 from `.bgtoggle > *` in the base
     CSS. Once BGToggle fires on mobile (gate widened to 300px), that rule
     traps the drawer inside .header_cta__wrap's stacking context — its z=99
     becomes effective z=2 in the parent context, the SAME level as siblings
     .main_heading__wrapper and .intro_text, which paint AFTER it in DOM
     order and cover the open drawer.

     Fix: lift .header_cta__wrap above its siblings so its nested stacking
     context (containing the drawer) wins. Pre-existing z-index inside the
     base CSS ladder caps at ~80–99, so 1000 keeps comfortable headroom for
     anything else (sticky CTA, etc.) without going thermonuclear. */
  .js body.template-16 .top_block.bgtoggle > .header_cta__wrap {
    z-index: 1000;
  }

  /* H2. Awards row — all 6 across in a single row on mobile.
     Structure: .wrap.awards > section > article.awards__item > img

     Visual goals (CARP):
       - Repetition: Brolga circle badges (square) and ATA ribbon
         plates (taller) must read as one rhythmic row. Cap a uniform
         vertical height and let widths flow naturally per aspect.
       - Proximity: breathing room above + below the row inside the
         brown band, instead of butting against the dark green top
         bar and the leather body section. */
  .js .wrap.awards > section {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0.6rem 0.5rem;
    gap: 10px;
  }
  .js .wrap.awards {
    margin-bottom: 1rem;
  }
  .js .wrap.awards .awards__item {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .js .wrap.awards .awards__item img {
    width: auto !important;
    height: 60px !important;
    max-width: 100%;
    display: block;
    object-fit: contain;
  }

  /* H3. Tour cards — single-column stacked layout on mobile.
         jCarousel only initializes at ≥600px, so on mobile we keep the
         native block-stacked flow. Every element inside the card uses the
         same 1rem horizontal inset so everything aligns to a single column. */
  /* Put the horizontal gutter on the tour_grid only. The inner <section>
     must NOT duplicate the padding, and box-sizing: border-box keeps the
     padding inside the element's width instead of pushing content past
     the viewport edge. */
  .js .tour_grid {
    display: block;
    padding: 0 14px;
    box-sizing: border-box;
  }
  .js .tour_grid > section {
    display: block;
    padding: 0;
  }
  .js .tour_grid__item {
    display: block;
    margin: 0 0 1.5em;
    list-style: none;
    overflow: hidden;
  }
  /* Reset the <header> padding/margin so we control insets on h2 directly */
  .js .tour_grid__header {
    padding: 0;
    margin: 0;
  }
  /* H2 sits inside the brown header with consistent 1rem horizontal padding
     matching the white body below — establishes one vertical column. */
  .js .tour_grid__item h2,
  .js .tour_grid__header h2 {
    font-size: 1.15em;
    line-height: 1.25;
    margin: 0;
    padding: 0.9rem 1rem 0.75rem;
  }
  /* Image goes edge-to-edge of the card (between header and white body). */
  .js .tour_grid__item img {
    aspect-ratio: 3;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
  }
  /* White body: same 1rem inset as the h2 so description, "Read More" and
     button all share the same left edge as the title. */
  .js .tour_grid__item .tour_grid__white_bg {
    display: block;
    padding: 1rem;
  }
  .js .tour_grid__item .tour_grid__content_wrapper {
    margin: 0 0 0.75em;
  }
  .js .tour_grid__item .tour_grid__summary {
    margin: 0;
    padding: 0;
    max-height: 7rem;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
  }
  .js .tour_grid__item .tour_grid__summary:focus {
    max-height: 40rem;
    outline: none;
  }
  .js .tour_grid__item .tour_grid__summary:focus::after {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .js .tour_grid__item .tour_grid__summary::after {
    content: "Read More";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.2em;
    background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1) 60%);
    display: flex;
    align-items: flex-end;
    font-size: 0.85em;
    color: #e97c1f;
    font-weight: 600;
    pointer-events: none;
  }
  .js .tour_grid__item .tour_grid__white_bg > .btn,
  .js .tour_grid__item .tour_grid__white_bg > a[class*="btn"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    margin: 0;
    box-sizing: border-box;
  }

  /* H4. Reduce testimonials to first two on mobile */
  .js .testimonial:nth-of-type(n+3) {
    display: none;
  }
  /* NOTE: Removed the generic `.wrap + .wrap` spacing rule that was
     indiscriminately tightening ALL section gaps across the site.
     Let the original site spacing stand — only override specific
     sections where the spacing is demonstrably too large. */


  /* Reduce H2 size so it sits clearly below H1 (~29.6px) and above
     any H3. On mobile the original H2 at 28px is too close to H1
     and wraps excessively. Scoped to .wrap content — footer headings
     keep their own specific rules. */
  .js .wrap h2 {
    font-size: 1.4em;
    line-height: 1.25;
  }


  /* Stronger text-shadow for readability on tour_listing photo backgrounds */
  .js .wrap.tour_listing,
  .js .wrap.tour_listing h2,
  .js .wrap.tour_listing p,
  .js .wrap.tour_listing li,
  .js .wrap.tour_listing .tour_listing__dot_points::before {
    text-shadow: 0px 0px 10px black;
  }
  /* Buttons don't need a text-shadow — clear the inherited one */
  .js .wrap.tour_listing .btn,
  .js .wrap.tour_listing a[class*="btn"] {
    text-shadow: none;
  }


  /* ============================================================
     TOUR ARCHIVE — expandable blurb pattern
     Same truncation + "Read More" + tap-to-focus expand as the homepage
     tour cards, adapted for the dark photo background.

     Requires markup: <p class="tour_listing__blurb needsclick" tabindex="0">
     (needsclick excludes the element from FastClick so single tap focus
     works; tabindex="0" makes the <p> focusable.)
     ============================================================ */
  /* Clip the blurb to 5 lines via explicit max-height (line-height 28px × 5 = 140px).
     Hard max-height + overflow:hidden clips text cleanly with no ellipsis. */
  .js .wrap.tour_listing .tour_listing__blurb {
    max-height: 4rem;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .js .wrap.tour_listing .tour_listing__blurb:focus {
    max-height: 40rem;
    outline: none;
  }
  /* "Read More" lives as a pseudo on the NEXT sibling (the dot_points <ul>),
     so it sits cleanly between the clipped blurb and the metadata list —
     no overlap with the truncated text, no gradient over the photo. */
  .js .wrap.tour_listing .tour_listing__blurb + .tour_listing__dot_points::before {
    content: "Read More";
    display: block;
    font-size: 0.9em;
    color: #e97c1f;
    font-weight: 600;
    margin: 0 0 0.75em;
  }
  /* When the blurb has focus (expanded), hide the "Read More" affordance */
  .js .wrap.tour_listing .tour_listing__blurb:focus + .tour_listing__dot_points::before {
    display: none;
  }

  /* Tighten metadata rows (price, people, dates, departs) to reduce
     vertical space per listing. Also scale the icons down to match the
     tighter text row height. */
  .js .wrap.tour_listing .tour_listing__dot_points {
    margin: 0.5em 0 0.75em;
    padding: 0;
  }
  .js .wrap.tour_listing .tour_listing__dot_points li {
    padding-top: 0;
    padding-left: 26px;
    margin-bottom: 0;
    line-height: 1.4;
    font-size: 0.95em;
    position: relative;
  }
  .js .wrap.tour_listing .tour_listing__dot_points li + li {
    margin-top: 0.35em;
  }
  .js .wrap.tour_listing .tour_listing__dot_points li [class^="icon-"] {
    font-size: 16px;
    line-height: 1;
    top: 2px;
  }

  /* Side-by-side CTAs on mobile — cuts ~100px per listing of vertical space */
  .js .wrap.tour_listing .tour_listing__cta {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  .js .wrap.tour_listing .tour_listing__cta .btn,
  .js .wrap.tour_listing .tour_listing__cta a[class*="btn"] {
    flex: 1 1 0;
    min-width: 0;
    height: 50px;
    padding: 0 0.5em;
    white-space: nowrap;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
  }


  /* ============================================================
     INDIVIDUAL TOUR — scoped via .tour_dates__day_container
     ============================================================ */

  /* TD1. Always-visible floating Book CTA via TEMPLATE DUPLICATION.
     The MODX template has two copies of the "Book this tour" button:
       • The original `.btn--tall` inside `.tour_dates__cta_wrap` sits
         in its natural inline position in the Book Now section.
       • The duplicate has an extra `.sticky-bottom` class and is
         the one we pin to the bottom of the viewport.
     This pattern is why we don't need `position: sticky` — sticky is
     blocked by `#outer-wrap { overflow: hidden }` and by containing-
     block constraints. A template-level duplicate is the CSS-only way
     to have both "always visible floating CTA" AND "inline CTA in
     the Book Now section" at the same time. */
  .js .btn--tall.sticky-bottom {
    display: block !important;
    position: fixed;
    bottom: 12px;
    left: 14px;
    right: 14px;
    width: auto;
    z-index: 50;
    margin: 0;
    background-color: #e97c1f;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    text-align: center;
  }
  /* Reserve bottom space so the last bit of page content isn't hidden
     under the sticky button. Only applies on pages that actually have
     a `.sticky-bottom` button, so non-tour pages don't get padding. */
  .js body.labelled_nav:has(.btn--tall.sticky-bottom) #inner-wrap {
    padding-bottom: 80px;
  }

  /* TD2. Bring the tour-day tab interface from ≥600 px down to mobile.
     TourNav (in plugins.30505.js) already runs on mobile — it adds
     .tour_dates__day--active to one day and .tour_dates__day--inactive
     to the others on page load and on tab/hashchange. Those class toggles
     have no visual effect on mobile today because the CSS that interprets
     them is gated at ≥600 px in the base stylesheet. We duplicate the
     minimum set of rules needed for the tab mechanic into the mobile
     media query, adjusted for smaller screens. */

  /* Reveal the sub-menus (both top and bottom, matching desktop). */
  .js .tour_dates__sub_menu {
    display: block;
    padding-top: 0;
  }
  .js .tour_dates__sub_menu nav::before,
  .js .tour_dates__sub_menu nav::after {
    content: " ";
    display: table;
  }
  .js .tour_dates__sub_menu nav::after {
    clear: both;
  }

  /* Tab sizing tuned for 320-599 px. Desktop uses width: 70 / padding: 22px;
     we narrow slightly so 5 tabs + the "You're viewing day..." heading fit
     within the 341 px .wrap on mobile. */
  .js .tour_dates__menu_item {
    width: 56px;
  }
  .js .tour_dates__menu_item a {
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* The tab-switch mechanic: stack every day panel at (0,0) inside the
     container; the active one is in normal flow and fully opaque, the
     inactive ones are absolute-positioned underneath with opacity 0. */
  .js .tour_dates__day_container {
    position: relative;
    background-color: white;
  }
  .js .tour_dates__day--active {
    position: relative;
    opacity: 1;
    transition: opacity 300ms ease-in 200ms;
  }
  .js .tour_dates__day--inactive {
    position: absolute;
    z-index: 98;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease-out;
  }

  /* Hide the "back to top" link inside each day (redundant when tabs
     are visible, same as desktop). */
  .js .tour_dates__top_link {
    display: none;
  }

  /* Zero the inherited margin-top on every day panel. Our TD3 rule
     (`.tour_dates__day_container > * + * { margin-top: 1em }`) adds
     16 px to the 2nd-5th day panels on the assumption that they
     stack vertically. With tabs they overlap at position (0,0), so
     that margin turns into 16 px of dead space at the top of Day
     2-5 — absent on Day 1 because `:first-child` has no `+` match. */
  .js .tour_dates__day_container > .tour_dates__day {
    margin-top: 0;
  }

  /* TD2b. Hide the "About day N" h3 sub-heading inside each day's
     summary block. The Day N H2 above already tells the reader which
     day they're on, so this h3 is redundant repetition. */
  .js .tour_dates__summary h3 {
    display: none;
  }

  /* TD3. Tighten Day N sections so itinerary scans faster (CARP: Proximity) */
  .js .tour_dates__day_container > * + * {
    margin-top: 1em;
  }
  /* NOTE: Removed h2/h3/p styling overrides that changed the Day heading
     from brand-orange to dark green, uppercased "Highlights", and shrunk
     body text. Original styling retained — the brand's orange Day headings
     are intentional and should not be overridden. */


  /* ============================================================
     CONTACT PAGE — put the enquiry form above the "Get in touch"
     intro on mobile. The two articles (.contact__form_content and
     .contact__enquiry_container) sit inside an unclassed <section>
     inside .contact__form_wrap. We flip the inner section to flex
     column and use `order` so the form (our conversion point)
     appears first, with the contact details / intro text below it.
     ============================================================ */
  .js .contact__form_wrap > section {
    display: flex;
    flex-direction: column;
  }
  .js .contact__form_wrap > section > .contact__enquiry_container {
    order: 1;
    /* Base stylesheet sets margin: 42px 0 on the article. That
       vertical margin made sense when the intro text was above
       it — now that the form is the first flex item, the 42px
       becomes a hard gap between the top bar and the form. */
    margin-top: 0;
  }
  .js .contact__form_wrap > section > .contact__form_content {
    order: 2;
  }


  /* Hide sidebar newsletter form on mobile — footer version
     appears immediately below, so showing both is redundant. */
  .form--sidebar {
    display: none;
  }


  /* ============================================================
     GLOBAL — scroll progress indicator
     A thin orange bar at the top of the viewport shows how far
     the reader has scrolled. Pure CSS via scroll-driven animation
     — no JS. @supports gate means older browsers silently skip.
     ============================================================ */
  @supports (animation-timeline: scroll()) {
    .js body::before {
      content: "";
      position: fixed;
      top: 56px;
      left: 0;
      height: 3px;
      background: #e97c1f;
      z-index: 101;
      animation: vnScrollProgress linear both;
      animation-timeline: scroll(root block);
    }
  }


  /* ============================================================
     BLOG — category/tag pills (sidebar list + inline tags)
     Two structures share the same pill styling:
       1. sidebar:  .blog__tags ul > li > a
       2. inline:   span.tags > a.tl-tag  (comma-separated)
     For inline tags, font-size:0 on the span collapses the comma
     text nodes; restored font-size on the <a> pills.
     ============================================================ */
  .js .blog__tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0.5em 0 0;
  }
  .js .blog__tags ul li {
    display: inline-flex;
    margin: 0;
    padding: 0;
    line-height: 1;
  }
  .js span.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0;
  }
  .js .blog__tags ul li a,
  .js span.tags a.tl-tag {
    padding: 5px 12px;
    border: 1px solid #e97c1f;
    border-radius: 20px;
    font-size: 0.8rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }
  .js .blog__tags ul li a {
    display: inline-block;
  }
  .js span.tags a.tl-tag {
    display: none;
  }
  .js span.tags a.tl-tag:nth-child(-n+5) {
    display: inline-block;
  }


  /* ============================================================
     FOOTER — body styling left intact. Earlier overrides added
     uppercase letter-spacing and tightened padding which didn't
     match the brand's warm natural voice. Reverted.

     Two targeted footer layout overrides below:
       1. .footer__lists_grid — 3 link articles (Venture North /
          Regions / More information) stack vertically by default,
          each consuming ~200-240px for columns that use less than
          half the page width. We put them in a 2-column grid so
          two sit side-by-side and the third falls to row 2 alone.
       2. .footer__gallery_list — accreditation/recognition logos:
          base site floats them 3-across on mobile (7 logos → 3
          rows, ~400px tall). With Hugh's 2026-04-28 update down
          to 5 logos, we switch to a 5-across single-row grid that
          mirrors the top-of-page awards strip (visual Repetition,
          CARP). Each logo also gets a uniform white card so the
          DAE transparent PNG no longer reads as orphaned against
          the leather body.
     ============================================================ */
  .js .footer__lists_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.25em;
    row-gap: 0.5em;
  }
  .js .footer__lists_grid > .footer__links {
    min-width: 0; /* prevent long link text from forcing columns wider than 50% */
  }

  .js .footer__gallery_list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding-top: 6px;
  }
  /* Neutralise the base clearfix pseudos — they become grid items
     when the parent flips to display:grid and would steal the first
     and last cells, pushing the logos to an off-by-one layout. */
  .js .footer__gallery_list::before,
  .js .footer__gallery_list::after {
    display: none;
  }
  .js .footer__gallery_list li {
    float: none;
    width: auto;
    margin: 0;
    padding: 5px;
    text-align: center;
    background: #ffffff;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .js .footer__gallery_list li img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
  }

  /* Centre the copyright/ABN/privacy + Dash credit line at the
     very bottom. Reads better once the link columns and logo
     grid above it are also tidier. */
  .js section.footer__credits {
    text-align: center;
  }


  /* ============================================================
     UTILITY: .vn-expandable -- tap/click "Read More" expander
     ============================================================
     CSS-only expanding content area, modelled on the tour-card
     summary pattern. Drop onto any block element that needs to
     truncate then expand on tap/click.

     USAGE:
       <article class="vn-expandable" tabindex="0"> ... </article>
       <div class="vn-expandable" tabindex="0"> ... </div>

     IMPORTANT: tabindex="0" is REQUIRED. The expand mechanic is
     :focus -- the element must be focusable. Tap (or click) on
     touch/mouse = focus = expand. Tap/click outside = blur =
     collapse. Without tabindex="0" the expand never fires.

     Customise per-instance via CSS variables (inline style works):
       --expandable-collapsed   collapsed max-height (default 7rem)
       --expandable-expanded    expanded max-height (default 40rem)
       --expandable-fade        parent bg colour the gradient fades
                                TO (default #fff -- override when the
                                parent background isn't white, or
                                the gradient will look wrong)
       --expandable-label-color "Read More" colour (default VN orange)

     Example with overrides:
       <div class="vn-expandable" tabindex="0"
            style="--expandable-fade:#f6f3ee;
                   --expandable-collapsed:5rem;">
         ...
       </div>
     ============================================================ */
  .js .vn-expandable {
    --expandable-collapsed: 7rem;
    --expandable-expanded: 40rem;
    --expandable-fade: #ffffff;
    --expandable-label-color: #e97c1f;

    max-height: var(--expandable-collapsed);
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
    cursor: pointer;
  }
  .js .vn-expandable:focus {
    max-height: var(--expandable-expanded);
    outline: none;
  }
  .js .vn-expandable::after {
    content: "Read More";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.2em;
    background: linear-gradient(rgba(0,0,0,0), var(--expandable-fade) 60%);
    display: flex;
    align-items: flex-end;
    font-size: 0.85em;
    color: var(--expandable-label-color);
    font-weight: 600;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .js .vn-expandable:focus::after {
    opacity: 0;
  }

}

/* ============================================================
   Keyframes for top-bar shrink-on-scroll
   (must live outside @media — keyframes are global definitions)
   ============================================================ */
@keyframes vnTopBarShrink {
  from { height: 112px; }
  to   { height: 56px; }
}
@keyframes vnTopBarSectionShrink {
  from { height: 112px; }
  to   { height: 56px; }
}
@keyframes vnLogoBoxShrink {
  from { height: 112px; }
  to   { height: 56px; }
}
@keyframes vnLogoImgShrink {
  from { height: 60px; }
  to   { height: 30px; }
}
@keyframes vnHeroPaddingShrink {
  from { padding-top: 4em; }
  to   { padding-top: 2em; }
}
@keyframes vnDrawerTopShrink {
  from { top: 112px; }
  to   { top: 56px; }
}
@keyframes vnScrollProgress {
  from { width: 0; }
  to   { width: 100%; }
}