/* ============================================================
   HashScanner — aMember skin
   Brands the /cp login / signup / dashboard pages with the site
   header + footer. Loaded ONLY on /cp pages (via the Hs plugin's
   onBeforeRender hook), so it must be self-contained — it does NOT
   load app.css, whose global resets (*{margin:0}, a, ul, p, h*)
   would distort aMember's own form layout. The .nav / .footer
   classes below are duplicated from app.css but scoped so they
   only affect the injected chrome.
   ============================================================ */

:root {
    --hs-bg:        #ffffff;
    --hs-primary:   #0f62fe;
    --hs-primary-h: #0043ce;
    --hs-text:      #1c1c1e;
    --hs-muted:     #6b7280;
    --hs-border:    #e5e7eb;
    --hs-surface:   #f9fafb;
    --hs-navy:      #1a1a2e;
    --hs-font:      system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --hs-radius:    8px;
    --hs-nav-h:     60px;
    --hs-max-w:     1120px;
}

/* ── Hide aMember's default chrome (we inject our own) ── */
.am-header, .am-header-line, .am-footer { display: none !important; }

/* ── Page frame ── */
body.am-logged-in, body.am-logged-out, body.am-page-login {
    background: var(--hs-bg); color: var(--hs-text);
    font-family: var(--hs-font); margin: 0;
    display: flex; flex-direction: column; min-height: 100vh;
}
.am-layout, .am-body { background: transparent; }
/* Even breathing room above (from the nav) and below (toward the footer) the
   aMember content box. body is a flex column so this margin won't collapse. */
body.am-logged-in  .am-layout,
body.am-logged-out .am-layout,
body.am-page-login .am-layout { margin: 40px 0; }
.am-body-content-wrapper.am-main, .am-body-content-wrapper {
    max-width: var(--hs-max-w); margin: 0 auto; padding: 40px 24px; width: 100%;
}
/* Narrow, centered card area for the login screen */
body.am-page-login .am-body-content-wrapper { max-width: 480px; padding-top: 56px; padding-bottom: 56px; }

/* ── Injected site nav (mirrors app.css .nav*) ── */
.nav { position: sticky; top: 0; z-index: 100; height: var(--hs-nav-h);
       background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
       border-bottom: 1px solid var(--hs-border); font-family: var(--hs-font); }
.nav * { box-sizing: border-box; }
.nav a { text-decoration: none; }
.nav__inner { max-width: var(--hs-max-w); margin: 0 auto; padding: 0 24px; height: 100%;
              display: flex; align-items: center; justify-content: space-between; }
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 36px; width: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__links a { padding: 6px 12px; border-radius: 6px; font-size: .9rem; font-weight: 500;
                color: var(--hs-text); transition: background .12s; }
.nav__links a:hover { background: var(--hs-surface); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__actions .btn-login { font-size: .9rem; font-weight: 500; color: var(--hs-muted);
                           padding: 6px 12px; border-radius: 6px; }
.nav__actions .btn-login:hover { color: var(--hs-text); background: var(--hs-surface); }
.nav .btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
            border-radius: var(--hs-radius); font-weight: 600; font-size: .875rem; cursor: pointer;
            border: 1.5px solid transparent; transition: all .15s ease; white-space: nowrap; }
.nav .btn-primary { background: var(--hs-primary); color: #fff; border-color: var(--hs-primary); }
.nav .btn-primary:hover { background: var(--hs-primary-h); border-color: var(--hs-primary-h); }
.nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--hs-text); margin: 5px 0; }

/* ── Injected site footer (mirrors app.css .footer*) ── */
.footer { background: var(--hs-navy); color: rgba(255,255,255,.7); padding: 56px 0 32px;
          margin-top: auto; font-family: var(--hs-font); }
.footer * { box-sizing: border-box; }
.footer a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .12s; }
.footer a:hover { color: #fff; }
.footer .container { max-width: var(--hs-max-w); margin: 0 auto; padding: 0 24px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 32px; }
.footer__brand img { filter: invert(1) brightness(2); height: 32px; margin-bottom: 14px; display: block; }
.footer__brand p { font-size: .875rem; max-width: 240px; line-height: 1.6; margin: 0; color: rgba(255,255,255,.7); }
.footer__col h4 { color: #fff; font-size: .875rem; font-weight: 600; margin: 0 0 16px; }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.footer__col ul li a { font-size: .875rem; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
                  gap: 12px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px;
                  font-size: .8125rem; }
.footer__bottom a { color: rgba(255,255,255,.55); }

/* ── Light polish on aMember content to match the palette ── */
.am-body input[type=submit], .am-body button[type=submit], .am-body .am-button {
    background: var(--hs-primary); border: 1.5px solid var(--hs-primary); color: #fff;
    border-radius: var(--hs-radius); font-weight: 600; cursor: pointer; }
.am-body input[type=submit]:hover, .am-body button[type=submit]:hover, .am-body .am-button:hover {
    background: var(--hs-primary-h); border-color: var(--hs-primary-h); }
.am-body a { color: var(--hs-primary); }

/* Cloudflare Turnstile widget — keep it at its standard width so it never
   overflows the offset field column / card edge on login or signup. */
.cf-turnstile { max-width: 300px; margin: 14px 0; }
/* On login the widget is in a full-width row → centre it in the card. The widget
   renders as an inline-block, so centre via the parent's text-align (margin:auto
   has no effect on it). Signup keeps it left-aligned in its field column. */
.am-login-form-form .am-row-wide .am-element { text-align: center; }
.am-login-form-form .cf-turnstile { display: inline-block; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .nav__links { display: none; flex-direction: column; gap: 4px; position: absolute;
                  top: var(--hs-nav-h); left: 0; right: 0; background: #fff;
                  padding: 12px 24px 20px; border-bottom: 1px solid var(--hs-border); }
    .nav__links.open { display: flex; }
    .nav__toggle { display: block; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .footer__grid { grid-template-columns: 1fr; }
}