/* ============================================================
   Rossland Jiu Jitsu — shared styles
   Base styles come from the original design; most styling is
   inline in the HTML. This file holds global rules, hover
   effects, and the responsive header behaviour.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0F0F0E; color: #F2F0EB; font-family: 'Barlow', system-ui, sans-serif; text-wrap: pretty; }
* { box-sizing: border-box; }
a { color: #F2F0EB; text-decoration: none; }
a:hover { color: #FFFFFF; }
::selection { background: #F2F0EB; color: #0F0F0E; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- hover effects (replacing the original style-hover attributes) ---- */
.hov-white:hover { background: #FFFFFF !important; }
.hov-text:hover { color: #FFFFFF !important; }
.hov-card:hover { border-color: rgba(242,240,235,0.35) !important; }
.hov-panel:hover { background: #171715 !important; }
.hov-ghost:hover { border-color: #F2F0EB !important; background: rgba(242,240,235,0.07) !important; }
.hov-faint:hover { background: rgba(242,240,235,0.08) !important; }
.hov-border:hover { border-color: #F2F0EB !important; }
.inp:focus { border-color: #F2F0EB !important; }

/* ---- responsive header: desktop nav ≥1120px, menu button below ---- */
@media (max-width: 1119.98px) { .only-wide { display: none !important; } }
@media (min-width: 1120px) { .only-narrow { display: none !important; } }

/* [hidden] must always win, even over inline display styles
   (mobile menu, FAQ answers, interest-chip rings) */
[hidden] { display: none !important; }

/* ---- small screens ---- */
/* header: drop the Free Trial button so the bar fits (it's still in the hero, menu and footer) */
@media (max-width: 560px) { .hdr-trial { display: none !important; } }

/* compact header on phones so logo + Menu button fit within the screen */
@media (max-width: 700px) {
  header > div:first-child { padding: 0 16px !important; gap: 14px !important; }
  header a[href="index.html"] { gap: 10px !important; }
  header a[href="index.html"] img { height: 34px !important; }
  header a[href="index.html"] span span:first-child { font-size: 17px !important; }
  header a[href="index.html"] span span:last-child { font-size: 8.5px !important; letter-spacing: 0.16em !important; }
  header nav { gap: 14px !important; }
  #menuButton { padding: 8px 12px !important; font-size: 14px !important; }
  #mobileMenu { padding: 12px 16px 20px !important; }
}

/* home stats strip: stack in one column with matching alignment */
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr !important; }
  .stat { padding: 24px 0 !important; border-left: none !important; border-top: 1px solid rgba(242,240,235,0.12); }
  .stat:first-child { border-top: none; }
}