/*
 * seronecore shared mobile layer.
 * Loaded LAST on every page (end of <body>), so it wins over the page styles
 * with the same selectors. Keep page-specific blocks grouped by page.
 */

/* ===== Global safety net ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
@media (max-width:760px){
    img,video,iframe{max-width:100%;}
    video,iframe{height:auto;}
}

/* ===== Checkboxes: one seronecore style on every page (owner 2026-10-13) =====
 * Dark box, gold border, gold fill with a dark check mark when ticked. :where() keeps the specificity at 0, so a page
 * rule for its own checkboxes (size, display:none of a hidden switch input, margins) still wins. */
:where(input[type="checkbox"]){
    -webkit-appearance:none;appearance:none;
    display:inline-grid;place-content:center;flex:0 0 auto;
    width:16px;height:16px;margin:0 6px 0 0;vertical-align:-3px;
    border:1px solid rgba(211,174,99,.45);border-radius:4px;
    background:#0e0f12;box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
    cursor:pointer;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
:where(input[type="checkbox"])::before{
    content:"";width:10px;height:10px;transform:scale(0);transition:transform .12s ease-in-out;
    background:#16120a;
    clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);
}
:where(input[type="checkbox"]):hover{border-color:rgba(226,194,124,.85);}
:where(input[type="checkbox"]):checked{
    background:linear-gradient(180deg,#e6c681,#c79f55);border-color:#e1bd72;
    box-shadow:0 0 0 1px rgba(203,166,95,.18),0 0 8px rgba(203,166,95,.25);
}
:where(input[type="checkbox"]):checked::before{transform:scale(1);}
:where(input[type="checkbox"]):indeterminate::before{clip-path:none;height:2px;transform:scale(1);background:#d8c08c;}
:where(input[type="checkbox"]):focus-visible{outline:none;box-shadow:0 0 0 3px rgba(211,174,99,.32);}
:where(input[type="checkbox"]):disabled{opacity:.45;cursor:not-allowed;}

/* ===== Burger menu injected by mobile.js (guides, news) ===== */
.scm-nav-toggle,.scm-mobile-menu{display:none;}
body.scm-links-hidden .scm-nav-toggle{
    display:inline-flex;width:42px;height:42px;flex:0 0 42px;padding:0;margin-left:2px;
    border:1px solid rgba(211,174,99,.18);border-radius:7px;background:rgba(12,13,16,.78);color:#d8c08c;
    cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.scm-nav-toggle span{display:block;width:17px;height:1px;background:currentColor;transition:transform .2s ease,opacity .2s ease;}
.scm-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.scm-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.scm-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
body.scm-links-hidden .scm-mobile-menu{
    display:block;position:fixed;left:0;right:0;top:68px;bottom:0;z-index:4990;padding:12px 16px 24px;
    background:rgba(8,9,11,.975);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-top:1px solid rgba(255,255,255,.045);overflow:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
body.scm-links-hidden .scm-mobile-menu.is-open{opacity:1;visibility:visible;transform:none;}
.scm-mobile-links{width:min(100%,720px);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.scm-mobile-links a{
    min-height:46px;display:flex;align-items:center;padding:11px 13px;border:1px solid rgba(211,174,99,.10);
    border-radius:7px;background:#0c0d0f;color:#b8b1a7!important;text-decoration:none!important;
    font-size:13px;font-weight:680;text-transform:lowercase;
}
.scm-mobile-links a::after{display:none!important;}
.scm-mobile-links a:hover,.scm-mobile-links a.active{border-color:rgba(211,174,99,.28);color:#eee5d6!important;}
body.scm-menu-open{overflow:hidden!important;}
.scm-mobile-account{display:none;}
body.scm-links-hidden .sc9-nav-right .sc9-nav-btn{white-space:nowrap;}
@media (max-width:520px){
    .scm-mobile-links{grid-template-columns:1fr;}
    /* account buttons move into the menu, like on index.php */
    body.scm-links-hidden .sc9-nav-right{display:none!important;}
    body.scm-links-hidden .sc9-nav .scm-nav-toggle{margin-left:auto;}
    .scm-mobile-account{
        width:min(100%,720px);margin:12px auto 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.055);
        display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    }
    .scm-mobile-account>*{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;width:100%;}
    .scm-mobile-account .sc9-nav-btn{display:inline-flex!important;flex:1 1 140px;justify-content:center;min-height:42px;white-space:nowrap;}
    .scm-mobile-account .sc9-account-name{display:block!important;margin-right:auto;}
}
@media (prefers-reduced-motion:reduce){
    .scm-mobile-menu,.scm-nav-toggle span{transition:none!important;}
}

/* ===== index.php =====
 * Later desktop rules (max-width:1500px/1320px) re-set the two-column hero
 * after the 1040px rule, so phones got a 1000px-wide hero. */
@media (max-width:1040px){
    body.home-page .sc9-hero{grid-template-columns:minmax(0,1fr);gap:28px;}
    body.home-page .sc9-hero>*{min-width:0;max-width:100%;}
}