/* =====================================================================================================
   Header band and back button, v1. Pixel, desk 10, brief MK4 (Brain ruling MK, MR4, 05-11-2026). FOR RULING.
   Mockups: P:\SIG\02 Franco-Media\Agents\Pixel\TEMPLATE - Header band and back button v1 (05-11-2026).html

   Where: one strip at the bottom of the header, on every page, printed by header.php right after
   header.topbar (outside it, so the top bar stays sticky alone and the strip scrolls away with the page).
   What: the weather in Phuket (icon and temperature), visitors yesterday, readers online now, the date as
   DD-MM-YYYY, the time in Thailand on 24 hours. On every page but the home, the back button opens the strip.
   Desktop: one line, figures on the left, date and time on the right. Phone: the back button stays put and
   the figures scroll sideways in one row, never wrapping, never widening the page.

   Look: the strip continues the top bar (--os-chrome-dark), parted from it by a hairline; text in
   --on-dark-muted, figures in white bold, PT Sans 14 px. The back button is the MK2 secondary button set on
   the dark ground: a hairline frame, white text, no fill.

   Markup (printed by PHP, filled by the theme script): see the mockup section 6, data points for Nick.
   Tokens of tokens.css only: no hex, no important flag, no new font, no new token.
   ===================================================================================================== */


/* ----- 1. The strip ----- */
.gpcf-hband{
  position:relative;
  z-index:90;
  background:var(--os-chrome-dark);
  border-top:1px solid var(--on-dark-border);
  color:var(--on-dark-muted);
  font-family:var(--font-body);
  font-size:var(--size-chrome);
  line-height:1.3;
}
.gpcf-hband__wrap{
  display:flex;
  align-items:center;
  gap:var(--space-9);
  max-width:var(--content-max);
  min-height:var(--space-14);
  margin:0 auto;
  padding:0 var(--page-gutter);
}
.gpcf-hband__items{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  gap:var(--space-9);
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}
.gpcf-hb{
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:var(--space-3);
  white-space:nowrap;
}
.gpcf-hb[hidden]{ display:none; }
/* A hairline between two items. */
.gpcf-hb + .gpcf-hb::before{
  content:"";
  align-self:stretch;
  width:1px;
  margin:var(--space-2) var(--space-5) var(--space-2) calc(-1 * var(--space-5));
  background:var(--on-dark-border);
}
.gpcf-hb b{ font-weight:var(--weight-bold); color:var(--on-dark); }
.gpcf-hb svg{ flex:none; width:16px; height:16px; stroke:currentColor; }
/* Date and time on the right on a desktop. */
.gpcf-hb.gpcf-hb-date{ margin-left:auto; }
.gpcf-hb.gpcf-hb-date::before{ display:none; }

/* ----- 2. The weather: one icon of six, chosen by the script from the weather code ----- */
.gpcf-hb-wx .wx{ display:none; color:var(--on-dark); }
.gpcf-hb-wx[data-wx="sun"] .wx-sun,
.gpcf-hb-wx[data-wx="moon"] .wx-moon,
.gpcf-hb-wx[data-wx="part"] .wx-part,
.gpcf-hb-wx[data-wx="cloud"] .wx-cloud,
.gpcf-hb-wx[data-wx="rain"] .wx-rain,
.gpcf-hb-wx[data-wx="storm"] .wx-storm{ display:block; }
.gpcf-hb-wx .f{ color:var(--on-dark-muted); }

/* ----- 3. Readers online: the pulsing dot of N46c, moved here ----- */
.gpcf-hb-on .dot{
  position:relative;
  flex:none;
  width:var(--space-3);
  height:var(--space-3);
  border-radius:50%;
  background:var(--os-pearl-aqua);
}
.gpcf-hb-on .dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:inherit;
  animation:gpcf-hb-dot 1.8s ease-out infinite;
}
@keyframes gpcf-hb-dot{
  0%{ opacity:.65; transform:scale(1); }
  100%{ opacity:0; transform:scale(3); }
}
@media (prefers-reduced-motion:reduce){ .gpcf-hb-on .dot::after{ animation:none; } }

/* ----- 4. The back button: MK2 secondary, on the dark strip ----- */
.gpcf-back{
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:var(--space-2);
  min-height:30px;
  padding:0 var(--space-6) 0 var(--space-4);
  border:1px solid var(--on-dark-border);
  border-radius:var(--radius-sm);
  background:none;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-chrome);
  line-height:1;
  color:var(--on-dark);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}
.gpcf-back svg{ width:16px; height:16px; stroke:currentColor; transition:transform var(--duration-base) var(--ease); }
.gpcf-back:hover{ border-color:var(--on-dark); background:var(--on-dark-fill); color:var(--on-dark); text-decoration:none; }
.gpcf-back:hover svg{ transform:translateX(-2px); }
.gpcf-back:focus-visible{ outline:3px solid var(--os-cta); outline-offset:2px; }

/* ----- 5. The old readers online line in the page header goes (N46c item 10 moves here) ----- */
.pagehead .gpcf-hd-online{ display:none; }

/* ----- 6. Phone (768 px and below): one row, the figures scroll sideways ----- */
@media (max-width:768px){
  .gpcf-hband__wrap{
    gap:var(--space-5);
    min-height:var(--tap-min);
    padding:0 0 0 var(--page-gutter-mobile);
  }
  .gpcf-back{ min-height:34px; padding:0 var(--space-5) 0 var(--space-3); }
  .gpcf-hband__items{
    gap:var(--space-9);
    padding:var(--space-4) var(--page-gutter-mobile) var(--space-4) 0;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg, var(--os-chrome-dark) 88%, transparent);
  }
  .gpcf-hband__items::-webkit-scrollbar{ display:none; }
  .gpcf-hb{ scroll-snap-align:start; }
  .gpcf-hb.gpcf-hb-date{ margin-left:0; }
  .gpcf-hb.gpcf-hb-date::before{ display:block; }
}