/* Selfgags gold JOIN tile — header button for the Selfgags (Classic) FapHouse fan club.
   Two copies of the same link are used (same pill design): .sg-join--bar (phones, beside the hamburger)
   and .sg-join--nav (desktop, in the nav slot where "FEMDOM SITE" was). Only one is visible at a time. */
.sg-join{--sg-join-h:46px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  height:var(--sg-join-h);padding:0 14px;border-radius:9px;border:1px solid #fff0b8;
  background:linear-gradient(135deg,#ffe9a3 0%,#f2c94c 45%,#d8ad35 70%,#b88a1f 100%);
  color:#1f1a0e!important;text-decoration:none!important;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:900;font-size:13px;letter-spacing:.12em;line-height:1;text-transform:uppercase;white-space:nowrap;flex:0 0 auto;
  box-shadow:0 0 14px rgba(242,201,76,.32),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,85,10,.35);
  animation:sg-join-glow 3.5s ease-in-out infinite;transition:transform .2s ease,filter .2s ease;-webkit-tap-highlight-color:transparent}
.sg-join:hover,.sg-join:focus-visible{transform:translateY(-1px);filter:brightness(1.06)}
.sg-join:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sg-join-crown{width:16px;height:16px;flex:0 0 auto;display:block}
.sg-join-txt{position:relative;top:.5px}
/* Diagonal light sweep */
.sg-join::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:55%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 80%,transparent 100%);
  transform:translateX(-160%) skewX(-18deg);animation:sg-join-shine 3.5s ease-in-out infinite}
.sg-join>*{position:relative;z-index:2}
@keyframes sg-join-shine{0%{transform:translateX(-160%) skewX(-18deg)}28%,100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes sg-join-glow{0%,100%{box-shadow:0 0 10px rgba(242,201,76,.22),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,85,10,.35)}
  20%{box-shadow:0 0 20px rgba(242,201,76,.5),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,85,10,.35)}}

/* Phones (theme hamburger breakpoint is 720px): the same gold pill as desktop.
   .sg-join-slot is a flex:1 spacer between logo and hamburger that centres the pill, so the gap to the
   logo and the gap to the menu button are always equal. margin-inline:-12px only trims the theme's 22px
   header gap on both sides equally (to 10px minimum) so logo + pill + menu fit on one row from 320px up. */
.sg-join-slot{flex:1 1 0;min-width:0;display:flex;justify-content:center;align-items:center;margin-inline:-12px}
.sg-join--bar{--sg-join-h:34px;padding:0 14px;font-size:12px}
.sg-join--nav{display:none!important}
/* Small phones (360-380px): slightly smaller pill so the logo keeps its full size */
@media(max-width:380px){.sg-join--bar{--sg-join-h:32px;padding:0 8px;gap:4px;font-size:11px;letter-spacing:.06em}.sg-join--bar .sg-join-crown{width:13px;height:13px}}
/* Very small phones (under 345px, e.g. 320px): only here the logo is trimmed a little so everything stays on one row */
@media(max-width:344px){.header-inner .brand img{width:140px}}

/* Desktop: compact pill in the nav, replacing the Femdom site link (the Femdom link stays in the phone menu) */
@media(min-width:721px){
  .sg-join-slot,.sg-join--bar{display:none!important}
  .main-nav a.sg-join--nav{display:inline-flex!important;--sg-join-h:34px;padding:0 14px;border:1px solid #fff0b8;border-bottom:1px solid #fff0b8;font-size:12px}
  .main-nav .femdom-nav{display:none!important}
}

@media(prefers-reduced-motion:reduce){.sg-join,.sg-join::after{animation:none!important;transition:none!important}.sg-join::after{display:none}}
@media(forced-colors:active){.sg-join{background:ButtonFace;color:ButtonText!important;border:1px solid ButtonText;box-shadow:none}.sg-join::after{display:none}}