/* ---------------------------------------------------------------------------
 * header.css — header conversion CTAs, compact favourites, and the nav-sort
 * group; plus the mobile header (nav strip, Join Free, drawer CTA pair).
 *
 * Moved out of an inline <style> in templates/header.php. Loaded LAST from that
 * template (after site.css and mobilebar.css) so it stays the last word on the
 * cascade for the few rules that intentionally override those files — the mobile
 * .nav2 and the header CTAs.
 * ------------------------------------------------------------------------ */

/* ---------- desktop ---------- */
.top-right{display:flex;align-items:center;gap:10px}

/* Favourites: icon only, so it never competes with Join Free. The count badge
   appears (via favorites.js -> [data-fav-count]) once something is saved. */
.top-fav{position:relative;display:inline-flex;align-items:center;justify-content:center;
         width:38px;height:38px;color:var(--muted);border-radius:10px;
         transition:color .15s,background .15s}
.top-fav:hover{color:var(--pink);background:rgba(233,30,99,.10)}
.top-fav svg{width:22px;height:22px;fill:currentColor}
.top-fav .fav-count{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;
         padding:0 4px;background:var(--pink);color:#fff;font-size:10px;font-weight:800;
         line-height:16px;text-align:center;border-radius:9px;box-shadow:0 0 0 2px var(--bg,#0d0e14)}

/* Log In: quiet outline. Join Free: the loudest thing in the corner. */
.btn-login{border:1px solid var(--border,#232a41);color:var(--text,#e6e9f0);
         padding:8px 16px;border-radius:20px;font-weight:700;font-size:14px;white-space:nowrap;
         transition:border-color .15s,background .15s,color .15s}
.btn-login:hover{border-color:var(--pink);color:#fff}
.btn-join{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;
         padding:9px 20px;border-radius:20px;font-weight:800;font-size:14px;white-space:nowrap;
         box-shadow:0 10px 24px -12px var(--accent);transition:filter .15s,transform .1s}
.btn-join:hover{filter:brightness(1.07)}
.btn-join:active{transform:translateY(1px)}

/* Sort links pushed to the right end of the nav row. */
.nav2{display:flex;align-items:center;flex-wrap:wrap}
.nav2 .nav-sort{margin-left:auto;display:inline-flex;align-items:center}

/* ---------- mobile ---------- */
/* mobilebar.css collapses the header below 900px. These rules refine it:
   Join Free stays (it's the whole funnel and mobile is most of the traffic),
   the category row shows as one swipeable strip, and the gender pill is dropped
   so the header reads hamburger · logo · Join Free. */
@media (max-width:900px){
  /* Keep only Join Free in the top-right; heart is in the bottom bar, Log In in
     the drawer. */
  .top .top-right{order:4;display:flex;align-items:center;gap:6px}
  .top .top-right .top-fav,
  .top .top-right .btn-login{display:none}
  .top .top-right .btn-join{padding:8px 13px;font-size:12.5px;box-shadow:none}

  /* CTA pair injected at the top of the menu drawer by mobilebar.php. */
  .mb-account{display:flex;gap:8px;padding:12px 6px 4px}
  .mb-account a{flex:1;text-align:center;padding:11px;border-radius:10px;font-weight:800;font-size:14px;text-decoration:none}
  .mb-account .mb-join{background:linear-gradient(140deg,var(--accent),var(--accent-deep));color:#fff;box-shadow:0 8px 20px -6px rgba(255,45,120,.55)}
  .mb-account .mb-login{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--text,#e8ecf6);font-weight:700}
  .mb-menu-logo .dot{color:var(--accent)}   /* logo_html accent in the drawer logo */

  /* Categories as ONE swipeable strip (no wrapping). Horizontal padding is 18px
     to match .main's gutter in site.css, so HOME lines up exactly with the tag
     chips and the H1 below it; the first link's own left padding is zeroed so its
     TEXT — not its padding box — sits on that 18px line. Link side-padding is
     trimmed to 11px (desktop uses 15) to tighten the gaps between categories.
     Top/New/Random flow inline after World Map, set off by a thin divider. */
  .nav2{display:flex;flex-wrap:nowrap;align-items:center;
        overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;padding:0 18px}
  .nav2::-webkit-scrollbar{display:none}
  .nav2 a{padding-left:11px;padding-right:11px}
  .nav2>a,.nav2 .nav-sort>a{flex:0 0 auto;white-space:nowrap}
  .nav2>a:first-child{padding-left:0}
  /* Strip stays to the core tabs — Home + the four genders. Tags, World Map and
     the Top/New/Random group drop out of the mobile strip (still in the drawer
     and still in the HTML), so the row is short and fits without much scrolling. */
  .nav2 .nav-2nd,
  .nav2 .nav-sort{display:none}

  /* Gender pill (♂▾) dropped — genders are in the strip and the drawer, keeping
     the header to hamburger · logo · Join Free. */
  .top .mb-gender{display:none}
}

/* On a foldable / large portrait screen (Galaxy Fold ~884px) the header is the
   mobile one — hamburger · logo · Join Free — but on a screen nearly twice a
   phone's width. The 23px logo (site.css) is the right size for a phone and looks
   lost here, so size it up for this width band only. Phones (<700px) keep 23px;
   desktop is untouched. `.top .logo` and header.css loading last together keep
   this the last word over site.css / mobilebar.css. */
@media (min-width:700px) and (max-width:900px){
  .top .logo{font-size:30px}
}