/* ------------------------------
   Base font sizing
------------------------------ */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* ------------------------------
   Bootstrap focus styles
------------------------------ */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ------------------------------
   Old template rule (kept but harmless)
------------------------------ */
html {
    position: relative;
    min-height: 100%;
}

/* ------------------------------
   Floating label tweaks
------------------------------ */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================================
   FLEXBOX LAYOUT FOR STICKY FOOTER
   (This is the important part)
============================================================ */

/* Make the page stretch to full height */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Turn the body into a vertical flex container */
body {
    display: flex !important;
    flex-direction: column !important;
}

/* Make <main> expand to fill available space */
main[role="main"] {
    flex: 1 0 auto !important;
    display: block;
}

/* Ensure footer stays at the bottom and never shrinks */
footer {
    flex-shrink: 0 !important;
}




.app-footer {
    position: fixed !important;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

/* Add padding so content is not hidden behind the footer */
main[role="main"] {
    padding-bottom: 100px !important; /* fixed footer: © row + 2-line compliance line (_Layout) */
}


/* Fix the header to the top */
.app-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000; /* above footer */



}

/* Add padding so content doesn't hide behind the header */
body {
    padding-top: 80px !important; /* adjust if your header is taller/shorter */
}

/*header gradient*/

.app-header-gradient {
    background: linear-gradient( 135deg, #cf2013 55%, black 100% );
}

header.app-header > nav.app-header-gradient {
    border: 2px solid #000 !important;
    margin: 0 !important; /* removes the mb-3 gap */





}

/* Per-page body classes (2026-09-06) — set via ViewData["BodyClass"] in the view, applied by _Layout.
   Replaces the nested <body style="background-color:#000"> tags the dark pages used to emit. */
body.bz-page-dark { background-color: #000; }

/* ============================================================
   PHONE PERFORMANCE PROFILE (2026-10-11)
   Touch-screen devices only; desktop is untouched. Measured on a Galaxy A22 5G over USB (Chrome trace, scripted
   touch scroll): the page backgrounds animate every tile separately (48-160 pulsing/shimmering tiles per page,
   540 spinning axes on the account pages), and each animated tile is its own GPU layer - the GPU sat at ~90 % and
   30-60 % of scroll frames were dropped. With the rules below the backgrounds stay, and their rows still scroll;
   only the per-tile effects and the backdrop blur go. Dropped scroll frames before -> after: About 30 -> 1 %, Supply 45 -> 1,
   Mining 61 -> 2, HODL 41 -> 1, Network 14 -> 0, account 52 -> 6, block 74 -> 1, tx 35 -> 3.
   !important because each page sets these animations in its own <style> block, which loads after this file.
   Method + numbers: memory note phone-perf-usb-trace.
============================================================ */
@media (hover: none) and (pointer: coarse) {
    /* per-tile background effects (About, Supply, Mining, Network, HODL, Exchange, Wallet, explorer detail pages) */
    /* About: only the per-image shimmer (an animated filter) goes. The tiles' fade-in/out pulse STAYS - they start at
       opacity 0 and are only ever visible through it (switching it off blanked the background, 2026-10-11), and it
       costs nothing measurable: 2 % dropped with the pulse running. */
    .background-grid .bg-img img,
    .tile-row img, .tile-col img,
    .tile-bg::before, .tile-bg::after,
    .hodl-bg, .hodl-bg .vhs-tile, .hodl-bg .vhs-tile::before, .hodl-bg .vhs-tile::after,
    .exch-bg .im-tile, .exch-bg .im-field-row img,
    .exch-bg .im-ring, /* Exchange: the three rings stand still (54 % -> 17 %); the field rows still scroll */
    .coin-cell canvas,
    .mosaic-bg .mosaic-cell, .mosaic-bg .mosaic-cell img, .coincol-bg .diag-grid img,
    /* account pages: the axe background is left fully moving (spin, flowing tracks, stripe dashes) - Andrew's choice.
       With the backdrop blur gone (the main cost there) the phone measured: everything moving 6 % dropped / GPU 78 %,
       spin only 3 % / 60 %, nothing moving 1 % / 46 %. If it ever needs taming, stop the tracks and stripe lines first:
       .bz-axe-bg .bz-axe-track, .bz-axe-bg .bz-axe-stripe-line { animation: none !important; } */
    /* Mining Pool title: 21 letters each re-blurring a 32px glow */
    .header-text.settled .letter { animation: none !important; }
    /* Gallery: 12 falling sprites instead of 54, without the per-sprite drop-shadow (79 % -> 11 %) */
    .bz-rain-sprite:nth-child(n+13) { display: none !important; }
    .bz-rain-sprite { filter: none !important; }
    /* Exchange ring tiles: no per-tile shadow or image filter, and no standing layer hint on the (now still) rings -
       the 48 tiles stalled the GPU for 150-390 ms at a time (about 30-43 % dropped; 4-20 % without, a short noisy page) */
    .exch-bg .im-ring { will-change: auto !important; }
    .exch-bg .im-tile { box-shadow: none !important; }
    .exch-bg img { filter: none !important; }
    /* frosted glass re-blurs whatever moves behind it on every frame */
    *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ============================================================
   PHONE LAYOUT: PAGE TITLE BANNERS (2026-10-11)
   Below 768px. Every page's banner is  icon | title | icon  in one <h1>, spaced for a desktop (runs of &nbsp;, 4-5rem
   margins). On a 384px phone the title wrapped and the second icon dropped onto a line of its own, the Network and
   Mining Pool titles (one element per letter) broke mid-word, and the Exchange / block / transaction titles were pushed
   out of the box. Here the <h1> becomes a centred flex row: icon, title (wrapping inside its own box), icon.
   Checked by screenshot on a Galaxy A22 5G for Explorer, Supply, Network, HODL, Mining, Mining Pool, Exchange, Gallery,
   Wallet and the block / tx / address pages. !important throughout: the pages set these in their own <style> blocks.
============================================================ */
@media (max-width: 767.98px) {
    .Headers11 > h1 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; font-size: 1.5rem !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; padding: 10px 4px !important; margin: 0 !important; }
    .Headers11 > h1 > span { flex: 0 1 auto !important; min-width: 0 !important; }
    .Headers11 > h1 > span:first-child, .Headers11 > h1 > span:last-child { flex: 0 0 auto !important; }
    /* Titles typed one letter per element (Network, Mining Pool) cannot wrap at a word: one line, sized to fit, with the
       spacer text between icon and title collapsed. */
    .Headers11 > h1:has(> .matrix-decode), .Headers11 > h1:has(> .header-text) { font-size: 0 !important; }
    .Headers11 > h1:has(> .matrix-decode) > span, .Headers11 > h1:has(> .header-text) > span { font-size: 1.5rem !important; margin: 0 3px !important; }
    .Headers11 > h1:has(> .matrix-decode) > .matrix-decode { font-size: 1.25rem !important; letter-spacing: 0 !important; white-space: nowrap !important; }
    .Headers11 > h1:has(> .header-text) > .header-text { font-size: 1.2rem !important; white-space: nowrap !important; flex-wrap: nowrap !important; }
    .Headers11 > h1 > canvas { flex: 0 0 auto !important; margin: 0 8px !important; }   /* Wallet coins */
    /* Mining: three emoji a side */
    .Headers11 > h1 > .slide-in-left, .Headers11 > h1 > .slide-in-right { font-size: 1rem !important; }
    .Headers11 > h1 > .fade-in-center { font-size: 1.35rem !important; }
    /* Exchange + explorer detail banners: desktop margins of 4-5rem a side pushed the title out of the box */
    .bz-explorer .banner-title { font-size: 1.4rem !important; }
    .bz-explorer .banner-title .candles { margin: 0 10px !important; }
    .bz-explorer .banner-emoji { margin: 0 8px !important; }   /* 12px overflowed the transaction banner (two arrows a side) by 13px */
    .Headers11 > h1 > .flip-letter { flex: 0 0 auto !important; white-space: pre !important; }
}

/* ============================================================
   BLAZECOIN MARK (2026-10-17): the phoenix coin used in place of the 👤 emoji on the account pages'
   title and Account Details header. Sized in em so it follows each heading's own font size; the
   width/height attributes on the <img> only reserve its square box before it loads.
   ============================================================ */
.bz-mark {
    width: 1.15em;
    height: 1.15em;
    border-radius: 50%;
    vertical-align: -0.2em;
    margin-right: .45rem;
    display: inline-block;
    flex: 0 0 auto;
}
.bz-mark.bz-mark-sm {
    width: 1.35em;
    height: 1.35em;
    vertical-align: -0.3em;
    margin-right: .35rem;
}