/* =====================================================================
   Bitcoin Britain — shared site stylesheet.
   Same design tokens, header, footer, and component primitives as the
   homepage. Link this from any subpage (books / wallets / calculator /
   archive / contact / terms etc.) so they all feel the same.
   ===================================================================== */

:root{
  --orange:#F7931A;
  --orange-dark:#d97c0a;
  --bg:#0e1116;
  --bg-card:#161b22;
  --bg-card-hover:#1c2230;
  --border:#262d38;
  --text:#e6e9ee;
  --text-dim:#8b94a3;
  --navy:#1b2a4a;
  --green:#3fb950;
  --red:#f85149;
  --blue:#58a6ff;
  --purple:#bb86fc;
  --yellow:#ffd166;
  --r-lg:14px; --r-md:12px; --r-sm:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="light"]{
  --bg:#FAFAFA; --bg-card:#FFFFFF; --bg-card-hover:#F4F6F9;
  --border:#E5E7EB; --text:#0a0d11; --text-dim:#4a5263; --navy:#dfe6f5;
}

*{margin:0;padding:0;box-sizing:border-box;}
/* Lock the page to viewport width so no stray wide element can expand
   the page beyond the device, which would prevent the mobile media
   query from firing. */
html,body{max-width:100vw;overflow-x:hidden;}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ===== Ticker ===== */
.ticker{background:#0a0d11;border-bottom:1px solid var(--border);font-size:13px;overflow:hidden;white-space:nowrap;}
.ticker .container{display:flex;gap:28px;padding:8px 20px;overflow-x:auto;scrollbar-width:none;align-items:center;color:#e6e9ee;}
.ticker .container::-webkit-scrollbar{display:none;}
.ticker span b{color:var(--orange);font-weight:600;font-variant-numeric:tabular-nums;}
.ticker .pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange);animation:pulse 1.6s infinite;flex-shrink:0;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.up{color:var(--green);} .down{color:var(--red);}

/* ===== Header (shared with homepage). Sticky so it stays visible on
   scroll across every page. ===== */
header{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:60;}
.nav{display:flex;align-items:center;gap:24px;padding:14px 20px;}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;border-radius:var(--r-md);padding:6px 18px 6px 8px;position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(247,147,26,0.18);}
.brand::before{content:'';position:absolute;inset:0;background-image:url('UK.jpg');background-size:cover;background-position:center;opacity:0.55;z-index:-2;}
.brand::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,13,17,0.7),rgba(10,13,17,0.3) 60%,rgba(10,13,17,0.6));z-index:-1;}
.brand .badge{width:44px;height:44px;border-radius:50%;background-image:url('flaglogo.jpeg');background-size:cover;background-position:center;flex-shrink:0;border:1px solid var(--border);}
.brand .word{font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:26px;letter-spacing:-0.02em;line-height:1;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,0.85),0 0 12px rgba(0,0,0,0.6);}
.brand .word .gold{color:var(--orange);text-shadow:0 2px 6px rgba(0,0,0,0.85),0 0 12px rgba(0,0,0,0.6);}
.brand .word small{display:block;font-family:var(--font);font-size:10px;font-weight:600;color:#cfd3d9;letter-spacing:0.18em;text-transform:uppercase;margin-top:4px;text-shadow:0 1px 4px rgba(0,0,0,0.85);}
nav.menu{display:flex;gap:22px;font-size:14.5px;font-weight:500;color:var(--text-dim);margin-left:auto;}
nav.menu a{transition:color 0.15s;}
nav.menu a:hover, nav.menu a.active{color:var(--orange);}

.btn{display:inline-block;background:var(--orange);color:#0e1116;font-weight:700;border-radius:var(--r-sm);padding:9px 16px;font-size:14px;border:none;font-family:inherit;transition:background 0.15s;text-decoration:none;}
.btn:hover{background:var(--orange-dark);color:#0e1116;}
.btn-ghost{background:transparent;color:var(--orange);border:1px solid var(--orange);}
.btn-ghost:hover{background:rgba(247,147,26,0.1);}

/* iPhone-style theme toggle */
.theme-toggle{position:relative;width:52px;height:28px;border:0;padding:0;background:none;cursor:pointer;flex-shrink:0;}
.theme-toggle .track{position:absolute;inset:0;border-radius:14px;background:var(--border);transition:background 0.2s;}
.theme-toggle .thumb{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.4);transition:left 0.2s;}
:root[data-theme="light"] .theme-toggle .track{background:var(--orange);}
:root[data-theme="light"] .theme-toggle .thumb{left:26px;}

/* ===== Section heads ===== */
.section-head{display:flex;align-items:center;justify-content:space-between;margin:42px 0 18px;}
.section-head h2{font-size:24px;letter-spacing:-0.3px;font-weight:800;color:var(--text);}
.section-head a.more{font-size:13.5px;color:var(--orange);font-weight:600;}

/* ===== Page-level layout ===== */
main.container{padding-top:28px;padding-bottom:48px;}
.page-title{font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:42px;letter-spacing:-0.02em;margin:18px 0 8px;}
.page-title .gold{color:var(--orange);}
.page-intro{color:var(--text-dim);font-size:16px;line-height:1.65;max-width:780px;margin-bottom:32px;}

/* ===== Cards ===== */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:background 0.15s,transform 0.15s,border-color 0.15s;display:flex;flex-direction:column;}
.card:hover{background:var(--bg-card-hover);border-color:var(--orange);transform:translateY(-2px);}
.card-img{height:160px;background:#0a0d11;overflow:hidden;flex-shrink:0;}
.card-img img{width:100%;height:100%;object-fit:cover;}
.card-body{padding:16px 18px;flex:1;display:flex;flex-direction:column;}
.card-body h4{font-size:15px;line-height:1.35;margin:0 0 8px;font-weight:700;}
.card-body p{font-size:13.5px;color:var(--text-dim);flex:1;line-height:1.55;}

/* Tag pills */
.tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:3px 10px;border-radius:20px;background:rgba(247,147,26,0.14);color:var(--orange);margin-right:8px;align-self:flex-start;margin-bottom:10px;}
.tag.policy,.tag.regulation{background:rgba(88,166,255,0.14);color:var(--blue);}
.tag.adoption,.tag.community{background:rgba(63,185,80,0.14);color:var(--green);}
.tag.markets{background:rgba(248,81,73,0.14);color:var(--red);}
.tag.mining{background:rgba(255,209,102,0.14);color:var(--yellow);}
.tag.education,.tag.lightning{background:rgba(187,134,252,0.14);color:var(--purple);}

/* ===== Grids ===== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

/* ===== Surface "panel" — content blocks on subpages ===== */
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 30px;margin-bottom:24px;}
.panel h2{font-size:22px;font-weight:800;margin-bottom:12px;letter-spacing:-0.3px;}
.panel h3{font-size:18px;font-weight:700;margin:18px 0 8px;}
.panel p{font-size:15px;color:var(--text-dim);line-height:1.7;margin-bottom:14px;}
.panel ul, .panel ol{padding-left:22px;margin-bottom:14px;color:var(--text-dim);font-size:15px;line-height:1.7;}
.panel li{margin-bottom:6px;}
.panel a{color:var(--orange);}
.panel a:hover{text-decoration:underline;}
.panel .row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}

/* Form inputs */
.input, input.text-input{width:100%;background:#0e1116;border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;color:var(--text);font-size:14px;font-family:inherit;outline:none;}
:root[data-theme="light"] .input,:root[data-theme="light"] input.text-input{background:#fff;}
.input:focus, input.text-input:focus{border-color:var(--orange);}

/* ===== Footer ===== */
footer{margin-top:54px;border-top:1px solid var(--border);padding:32px 0 40px;font-size:13px;color:var(--text-dim);background:var(--bg);}
footer b{color:var(--text);}
footer .links{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;}
footer a:hover{color:var(--orange);}

/* ===== Responsive ===== */
@media(max-width:1100px){
  .grid.grid-4{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:980px){
  .grid{grid-template-columns:1fr 1fr;}
  .grid.grid-4{grid-template-columns:1fr 1fr;}
  nav.menu{display:none;}
  .brand .word small{display:none;}
  .panel .row{grid-template-columns:1fr;}
  .page-title{font-size:32px;}
}
@media(max-width:560px){
  .grid,.grid.grid-4,.grid-2{grid-template-columns:1fr;}
}

/* ===================================================================
   Mobile hamburger + slide-down menu — shared across every page.
   Desktop above 768px renders the regular nav.menu; below 768px the
   regular nav and Advertise/theme-toggle buttons are hidden, and the
   hamburger reveals an accessible full-screen menu panel.
   =================================================================== */
.hamburger{display:none;}
.mobile-menu{display:none;}
@media(max-width:768px){
  .desktop-only{display:none !important;}
  nav.menu{display:none;}
  .hamburger{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;margin-left:auto;background:none;border:1px solid var(--border);
    border-radius:var(--r-sm);padding:0;
  }
  .hamburger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform 0.2s,opacity 0.2s;}
  .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-menu{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);z-index:80;opacity:0;pointer-events:none;transition:opacity 0.18s ease;}
  .mobile-menu.open{opacity:1;pointer-events:auto;}
  .mobile-menu[hidden]{display:none;}
  .mobile-menu .mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--bg);border-bottom:1px solid var(--border);}
  .mobile-menu-title{font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);}
  .mobile-close{width:44px;height:44px;border:1px solid var(--border);border-radius:var(--r-sm);background:none;color:var(--text);font-size:24px;line-height:1;cursor:pointer;}
  .mobile-menu-list{background:var(--bg);border-bottom:1px solid var(--border);padding:8px 0;transform:translateY(-12px);transition:transform 0.22s ease;}
  .mobile-menu.open .mobile-menu-list{transform:translateY(0);}
  .mobile-menu-link{display:flex;align-items:center;min-height:52px;padding:0 20px;font-size:16px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);}
  .mobile-menu-link:hover,.mobile-menu-link:active{color:var(--orange);background:var(--bg-card-hover);}
  .mobile-menu-link.sub{padding-left:36px;font-size:15px;font-weight:500;color:var(--text-dim);}
  .mobile-menu-link.advertise{color:var(--orange);font-weight:700;}
  .mobile-menu-details summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 20px;font-size:16px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);list-style:none;cursor:pointer;}
  .mobile-menu-details summary::-webkit-details-marker{display:none;}
  .mobile-menu-details summary::after{content:'\2228';font-size:14px;color:var(--text-dim);transition:transform 0.2s;}
  .mobile-menu-details[open] summary::after{transform:rotate(180deg);}
  .mobile-menu-theme{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:6px 20px;font-size:14px;color:var(--text-dim);}
}