/* ============================================================
   Fake Cloudflare Challenge — page (shell) styles
   The challenge WIDGET is a separate file (widget.html) with its
   own styles — this file only styles the page chrome around it.
   Page layout/text sizes mirror the real Managed Challenge.
   Light/dark switch automatically via prefers-color-scheme.
   ============================================================ */

:root{
  --bg:#ffffff;--fg:#0a0a0a;--muted:#595959;--link:#0051c3;--divider:#d9d9d9;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000;--fg:#f2f2f2;--muted:#b6b6b6;--link:#82b6ff;--divider:#f2f2f2;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{line-height:1.15;-webkit-text-size-adjust:100%;color:var(--fg);background:var(--bg);
  font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Helvetica Neue",Arial,sans-serif}
body{display:flex;flex-direction:column;height:100vh;min-height:100vh;background:var(--bg)}
.main-wrapper{display:flex;flex:1;flex-direction:column;align-items:center;width:100%}
.main-content{margin:8rem auto;padding:0 2rem;width:100%;max-width:60rem}
@media (width <= 1024px){.main-content{padding:0 1.5rem}}
@media (width <= 720px){.main-content{margin-top:4rem;padding:0 1rem}}

h1{line-height:125%;font-size:2.5rem;font-weight:600}
h2{margin-bottom:8px;line-height:125%;font-size:1.5rem;font-weight:600}
p{line-height:150%;font-size:1rem;font-weight:300}
.cf-headrow{display:flex;gap:16px;align-items:center}
.cf-fav{margin-right:.5rem;width:2rem;height:2rem}
.cf-h2{margin:8px 0}
.cf-desc{margin-top:0;margin-bottom:2rem;font-weight:400;color:var(--muted)}

/* widget iframe (300x65, real Turnstile size) + click overlay */
.cf-widget-wrap{position:relative;width:300px;height:65px;margin:2rem 0}
#cf-widget{display:block;width:300px;height:65px;border:0;overflow:hidden}
#cf-overlay{position:absolute;inset:0;pointer-events:none}
#cf-overlay.armed{pointer-events:auto;cursor:pointer}

/* footer — mirrors the real markup */
.footer{margin:0 auto;padding:0 2rem;width:100%;max-width:60rem;line-height:1.125rem;font-size:.75rem}
@media (width <= 1024px){.footer{padding:0 1.5rem}}
@media (width <= 720px){.footer{padding:0 1rem}}
.footer a{font-size:.75rem;color:var(--link);text-decoration:underline;display:inline-block}
.footer-inner{display:flex;justify-content:center;border-top:1px solid var(--divider);padding:1rem 0}
.footer-wrapper{text-align:center}
.ray-id{margin-bottom:8px}
.ray-id code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.footer-link-wrapper{display:flex;gap:8px;align-items:center;justify-content:center}
.footer-text{color:var(--fg)}
.footer-divider{border:1px solid var(--divider);height:12px}

/* fullscreen video overlay */
#cf-videoWrap{display:none;position:fixed;inset:0;background:#000;z-index:2147483647}
#cf-video{width:100%;height:100%;object-fit:cover}