/* =====================================================================
   Mobile Gallery + Footer Fix  (v2.1)
   For: GaryPalmerArt theme (grid.css / screen.css based)
   Scope: mobile only (max-width: 767px)

   v2.1 changes:
   - Scroll indicator: BOLD terracotta/coral progress bar, always visible.
   - Live position tracking (thumb grows + moves as you swipe).
   - Swipe hint text matches the bar colour, bold weight.
   - Header overlap fix retained.
   Load AFTER screen.css via the functions.php enqueue.

   THEME COLOUR: --gp-accent below controls the terracotta everywhere.
   Change that one value to recolour the bar + text in one place.
   ===================================================================== */

:root {
  --gp-accent: #c0552e;          /* terracotta / warm coral */
  --gp-accent-soft: rgba(192, 85, 46, 0.18);  /* track tint */
}


  /* -------------------------------------------------------------------
     1. HEADER OVERLAP FIX
     Keeps the logo/avatar from stacking onto the black menu bar.
     ------------------------------------------------------------------- */
  #header,
  .header,
  #masthead,
  header {
    flex: 0 0 auto;
    position: relative;
    z-index: 10;
  }

  #header .avatar,
  #header img.avatar,
  .site-logo,
  #logo {
    position: static;
    float: none;
    display: block;
    margin: 0 auto;
  }

  #content > h1:first-child,
  .entry-title,
  #content .post h2:first-child {
    margin-top: 18px;
  }

  /* -------------------------------------------------------------------
     2. HORIZONTAL GALLERY — keep theme scroll, hide flaky native bar
     (we draw our own bold indicator instead). Scrolling still works.
     ------------------------------------------------------------------- */
  #horizontal_gallery,
  .horizontal_gallery {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* old Edge */
  }

  #horizontal_gallery::-webkit-scrollbar,
  .horizontal_gallery::-webkit-scrollbar {
    height: 0;
    width: 0;
    display: none;
  }

  /* -------------------------------------------------------------------
     3. SCROLL INDICATOR — bold terracotta progress bar, always visible.
     A centered track with a strong coloured thumb that grows + slides
     to mirror the gallery scroll position.
     ------------------------------------------------------------------- */
  .gallery-scrollbar {
    display: block;
    position: relative;
    width: 50%;
    max-width: 180px;
    height: 6px;                 /* bold, clearly visible */
    margin: 16px auto 10px;
    background: var(--gp-accent-soft);
    border-radius: 6px;
    overflow: hidden;
  }

  .gallery-scrollbar__thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;                  /* updated live by JS */
    background: var(--gp-accent);
    border-radius: 6px;
    transition: left 0.06s linear, width 0.06s linear;
  }

  /* -------------------------------------------------------------------
     4. SWIPE HINT — matches bar colour, bold, always visible.
     ------------------------------------------------------------------- */
  .scroll-hint {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gp-accent);
    padding: 2px 0 4px;
    margin: 0 auto;
    pointer-events: none;
    user-select: none;
  }

  .scroll-hint .scroll-hint__arrow {
    display: inline-block;
    animation: scrollHintNudge 1.6s ease-in-out infinite;
  }
  .scroll-hint .scroll-hint__arrow--right { animation-delay: 0.2s; }

  @keyframes scrollHintNudge {
    0%, 100% { transform: translateX(0);  opacity: 0.5; }
    50%      { transform: translateX(3px); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-hint .scroll-hint__arrow { animation: none; }
    #horizontal_gallery,
    .horizontal_gallery { scroll-behavior: auto; }
  }

  /* -------------------------------------------------------------------
     5. FOOTER TO BOTTOM — sticky-footer flex pattern.
     If footer still floats, send footer.php + header.php to fine-tune.
     ------------------------------------------------------------------- */
  html,
  body {
    height: auto;
    min-height: 100%;
    margin: 0;
  }

  body > #wrapper,
  body > #container,
  body > .wrapper,
  #page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  #content,
  #main,
  .content,
  #primary {
    flex: 1 0 auto;
  }

  #footer,
  .footer,
  footer,
  #colophon {
    flex-shrink: 0;
    margin-top: 0;
    width: 100%;
  }

  #horizontal_gallery + *,
  .horizontal_gallery + * {
    margin-top: 0;
  }