/* ============================================================================
   TripMuse — cross-page mobile + polish. Loaded LAST so it wins.
   Applies to the homepage and single articles.
   ============================================================================ */

/* --- Skip link: keep it for accessibility, but hidden until keyboard focus --- */
.skip-link{
  position:absolute !important;
  left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important; white-space:nowrap !important;
  background:#fff; color:#173049; border:2px solid #173049; border-radius:10px;
  padding:8px 14px; font-family:'Fredoka',sans-serif; font-weight:600; z-index:100000;
}
.skip-link:focus{
  left:12px !important; top:12px !important;
  width:auto !important; height:auto !important; overflow:visible !important;
}

/* --- Never allow sideways scrolling --- */
html,body{ max-width:100%; overflow-x:hidden; }
img,svg{ max-width:100%; }

/* --- Archive pagination (category / blog index) --- */
.tm-pager{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:26px auto 6px; padding:0 16px; }
.tm-pager .page-numbers{
  display:inline-block; padding:9px 15px; border:2px solid #173049; border-radius:12px;
  background:#fff; color:#173049; font-family:'Fredoka',sans-serif; font-weight:600;
  text-decoration:none; box-shadow:2px 2px 0 #173049;
}
.tm-pager .page-numbers.current{ background:#FACC15; }
.tm-pager .page-numbers.dots{ border:0; box-shadow:none; background:transparent; padding:9px 6px; }
.tm-pager a.page-numbers:hover{ transform:translate(-1px,-1px); }

/* ---------------------------------------------------------------------------
   NAV — 4 items (Blog · Categories · Magazine · Open TripMerge), collapsing to
   a CSS-only hamburger on small screens (no JavaScript needed).
   --------------------------------------------------------------------------- */
.tm-burger{ display:none; }
.dnav-drop{ display:contents; }                       /* desktop: children flow into the nav row */
.dnav-drop .dnav-links{ display:flex; }
.dnav-drop .dnav-cta{ margin-left:auto; }

@media (max-width:960px){
  .dnav-in{ position:relative; padding:0 14px !important; gap:10px !important; height:62px !important; }
  .dbrand .by{ display:none !important; }
  .dbrand{ font-size:20px !important; gap:8px !important; }

  /* hamburger button */
  .tm-burger{
    display:flex !important; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; width:46px; height:46px; margin-left:auto; flex:0 0 auto;
    border:2px solid #173049; border-radius:12px; background:#fff; box-shadow:2px 2px 0 #173049; cursor:pointer;
  }
  .tm-burger span{ display:block; width:22px; height:2.6px; background:#173049; border-radius:2px; transition:transform .2s, opacity .2s; }
  .tm-navtoggle:checked ~ .tm-burger span:nth-child(1){ transform:translateY(7.6px) rotate(45deg); }
  .tm-navtoggle:checked ~ .tm-burger span:nth-child(2){ opacity:0; }
  .tm-navtoggle:checked ~ .tm-burger span:nth-child(3){ transform:translateY(-7.6px) rotate(-45deg); }

  /* dropdown panel */
  .dnav-drop{
    display:none !important; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:8px; padding:14px 16px 18px;
    background:var(--cream,#FBF7EC); border-bottom:2px solid #173049; box-shadow:0 12px 24px rgba(23,48,73,.12);
  }
  .tm-navtoggle:checked ~ .dnav-drop{ display:flex !important; }
  .dnav-drop .dnav-links{ display:flex !important; flex-direction:column; gap:0; margin:0 !important; }
  .dnav-drop .dnav-links a{ padding:13px 8px; font-size:18px; border-bottom:1px solid rgba(23,48,73,.08); }
  .dnav-drop .dnav-cta{ margin:10px 0 0 !important; }
  .dnav-drop .dnav-cta .dbtn{ width:100%; justify-content:center; }

  .chipbar{ top:62px !important; }
  .chipbar-in{ padding:12px 14px !important; }
}

/* ---------------------------------------------------------------------------
   HERO — edge-to-edge and comfortably sized on phones.
   --------------------------------------------------------------------------- */
@media (max-width:820px){
  .scene-hero{ border-left:0 !important; border-right:0 !important; width:100% !important; }
  .scene-intro{ padding:20px 16px 0 !important; }
  .scene-intro h1{ font-size:clamp(26px,7.6vw,40px) !important; line-height:1.03 !important; }
  .scene-intro p{ font-size:15px !important; }
  .scene-stage{ max-width:100% !important; }
}

/* ---------------------------------------------------------------------------
   ARTICLE + shared sections — readable padding, single-column stacks.
   --------------------------------------------------------------------------- */
@media (max-width:820px){
  .art-hero-in,.merge-in,.doc-news-in,.related,.art-tags,.art-bio{
    padding-left:18px !important; padding-right:18px !important;
  }
  .art-body{ padding-left:18px !important; padding-right:18px !important; font-size:18px; }
  .merge-in{ grid-template-columns:1fr !important; }
  .merge-in .art{ display:none !important; }
  .rel-grid{ grid-template-columns:1fr !important; }
  .art-hero h1{ font-size:clamp(28px,8vw,40px) !important; }
}

/* ---------------------------------------------------------------------------
   FOOTER — stack neatly on phones.
   --------------------------------------------------------------------------- */
@media (max-width:820px){
  .dfoot-in{ padding-left:18px !important; padding-right:18px !important; }
  .dfoot-top{ flex-direction:column; align-items:flex-start; gap:16px; }
  .dfoot-links{ flex-wrap:wrap; gap:14px 18px; }
  .dfoot-bot{ flex-direction:column; gap:6px; }
}