/* fw-nav.css - search, menu extras, tool directory, Help me fix, problem pages, breadcrumbs, related tools and the
   sticky Try / Buy bar (2026-10-22). Everything is namespaced "fwn-". Colours come from the visitor's theme
   (--fw-text-color, --fw-panel-bg, --fw-accent) so every skin works. Phones: the masters' viewport is
   initial-scale 0.7 and Bootstrap makes 1rem = 10px, so sizes are in px, with bigger ones under 768px. */

:root { --fwn-accent: var(--fw-accent, #00BFFF); --fwn-line: rgba(127, 127, 127, 0.35); --fwn-fill: rgba(127, 127, 127, 0.12);
        --fwn-mono: "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace; }

/* ── Menu ─────────────────────────────────────────────────────────────────────────────────────────────── */
.navbar .fwn-nav-right { float: right; margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 10px; height: 60px; padding-top: 18px; }
.navbar .fwn-search-btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.25); color: #fff !important; font-family: var(--fwn-mono); font-size: 14px; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.navbar .fwn-search-btn:hover, .navbar .fwn-search-btn:focus { border-color: var(--fwn-accent); color: #fff !important; box-shadow: 0 0 10px rgba(0, 191, 255, 0.35); }
.navbar .fwn-search-btn svg { width: 15px; height: 15px; }
.navbar .fwn-search-btn kbd { font-family: var(--fwn-mono); font-size: 11px; padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: none; }
.navbar .fwn-try { display: inline-block; padding: 6px 16px; border-radius: 999px; font-weight: bold; font-size: 15px; white-space: nowrap;
    background: var(--fwn-accent); color: #001018 !important; text-decoration: none !important; border: 2px solid var(--fwn-accent); }
.navbar .fwn-try:hover, .navbar .fwn-try:focus { background: transparent; color: #fff !important; }
.navbar .dropdown-menu .divider { background-color: rgba(127, 127, 127, 0.4); }
.navbar .dropdown-menu .fwn-menu-h { padding: 6px 20px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.navbar .fwn-xs { display: none; }
@media (max-width: 1240px) { .navbar .fwn-search-btn kbd { display: none; } }
/* Tablets and small laptops (768-1260 px): keep the menu on one row */
@media (min-width: 768px) and (max-width: 1260px) {
    .navbar-inverse .navbar-nav > li > a { padding-left: 7px !important; padding-right: 7px !important; font-size: 15px !important; }
    .navbar-inverse .navbar-brand { font-size: 15px !important; padding-left: 6px; padding-right: 6px; }
    .navbar .fwn-nav-right { gap: 6px; }
    .navbar .fwn-try { font-size: 14px; padding: 5px 12px; }
}
@media (min-width: 768px) and (max-width: 1100px) { .navbar .fwn-md-hide { display: none; } }
@media (max-width: 1100px) { .navbar .fwn-nav-right .fwn-search-label { display: none; } }
@media (max-width: 767px) {
    .navbar .fwn-nav-right { display: none; }
    .navbar .fwn-xs { display: flex; float: right; align-items: center; gap: 10px; margin: 10px 8px 0 0; }
    .navbar .fwn-xs .fwn-try { font-size: 17px; padding: 7px 16px; }
    .navbar .fwn-xs .fwn-search-btn { font-size: 17px; padding: 7px 11px; }
    .navbar .fwn-xs .fwn-search-btn svg { width: 19px; height: 19px; }
}

/* ── Search overlay (terminal) ────────────────────────────────────────────────────────────────────────── */
html.fwn-locked, html.fwn-locked body { overflow: hidden; }
.fwn-ov { position: fixed; inset: 0; z-index: 100001; display: none; align-items: flex-start; justify-content: center; padding: 9vh 16px 16px;
    background: rgba(0, 0, 0, 0.66); }
@media (min-width: 769px) { .fwn-ov { backdrop-filter: blur(3px); } }   /* phones: the blur showed mirrored text at the edges */
.fwn-ov.is-open { display: flex; }
.fwn-term { width: 100%; max-width: 760px; max-height: 78vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px;
    background: var(--fw-panel-bg, #000); color: var(--fw-text-color, #fff); border: 1px solid var(--fwn-accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 32px rgba(0, 191, 255, 0.28), 0 22px 60px rgba(0, 0, 0, 0.6); font-family: var(--fwn-mono);
    animation: fwn-pop .16s ease-out; }
@keyframes fwn-pop { from { transform: translateY(-8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.fwn-term-bar { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--fwn-line); background: var(--fwn-fill); font-size: 13px; }
.fwn-dots { display: inline-flex; gap: 6px; } .fwn-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; display: block; }
.fwn-dots i + i { background: #febc2e; } .fwn-dots i + i + i { background: #28c840; }
.fwn-term-title { flex: 1; opacity: .75; }
.fwn-x { font-family: var(--fwn-mono); font-size: 12px; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--fwn-line); background: transparent; color: inherit; cursor: pointer; }
.fwn-prompt { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--fwn-line); font-weight: normal; }
.fwn-prompt span { color: var(--fwn-accent); font-size: 22px; font-weight: bold; }
.fwn-prompt input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font-family: var(--fwn-mono); font-size: 18px; caret-color: var(--fwn-accent); }
.fwn-prompt input::placeholder { color: inherit; opacity: .45; }
.fwn-prompt input::-webkit-search-cancel-button { display: none; }
.fwn-list { overflow-y: auto; padding: 6px 0 8px; }
.fwn-h { padding: 10px 18px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
.fwn-r { display: flex; align-items: center; gap: 12px; padding: 8px 18px; color: inherit !important; text-decoration: none !important; border-left: 3px solid transparent; font-family: "Segoe UI", system-ui, sans-serif; }
.fwn-r.is-active { background: var(--fwn-fill); border-left-color: var(--fwn-accent); }
.fwn-r-ico { width: 28px; height: 28px; flex: 0 0 28px; display: flex; align-items: center; justify-content: center; }
.fwn-r-ico img { width: 28px; height: 28px; }
.fwn-glyph { font-family: var(--fwn-mono); font-size: 18px; color: var(--fwn-accent); }
.fwn-glyph.fwn-fix { font-size: 17px; }
.fwn-r-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fwn-r-t { font-size: 16px; font-weight: 600; }
.fwn-r-s { font-size: 13.5px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fwn-r-tag { font-family: var(--fwn-mono); font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--fwn-line); opacity: .8; white-space: nowrap; max-width: 34%; overflow: hidden; text-overflow: ellipsis; }
.fwn-empty { padding: 16px 18px; font-family: "Segoe UI", system-ui, sans-serif; font-size: 15px; opacity: .85; }
.fwn-empty a { color: var(--fwn-accent); }
.fwn-term-foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--fwn-line); background: var(--fwn-fill); font-size: 12px; opacity: .8; }
.fwn-term-foot a { margin-left: auto; color: var(--fwn-accent); }
.fwn-term kbd { font-family: var(--fwn-mono); font-size: 11px; padding: 1px 5px; margin-right: 3px; border-radius: 4px; border: 1px solid var(--fwn-line); background: transparent; color: inherit; box-shadow: none; }
@media (max-width: 768px) {
    .fwn-ov { padding: 12px 8px; }
    .fwn-term { max-height: 92vh; }
    .fwn-prompt input { font-size: 20px; }
    .fwn-r-t { font-size: 19px; } .fwn-r-s { font-size: 16px; white-space: normal; } .fwn-r-tag { display: none; }
    .fwn-term-foot span { display: none; }
}

/* ── Breadcrumbs and related tools (tool pages) ───────────────────────────────────────────────────────── */
.fwn-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 14px; font-family: var(--fwn-mono); font-size: 14px; opacity: .9; }
.fwn-crumbs a { color: inherit; text-decoration: underline; text-decoration-color: rgba(127, 127, 127, 0.6); text-underline-offset: 3px; }
.fwn-crumbs a:hover { color: var(--fwn-accent); }
.fwn-crumbs span[aria-hidden] { opacity: .5; }
.fwn-crumbs [aria-current] { opacity: .75; }
.fwn-rel { margin: 30px 0 10px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--fwn-line); background: var(--fwn-fill); }
.fwn-rel-h { font-weight: bold; font-size: 1.1em; margin: 4px 0 10px; }
.fwn-rel-h + .fwn-chips { margin-bottom: 14px; }
.fwn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fwn-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--fwn-line); color: inherit !important; text-decoration: none !important; background: rgba(0, 0, 0, 0.12); line-height: 1.3; }
.fwn-chip:hover, .fwn-chip:focus { border-color: var(--fwn-accent); box-shadow: 0 0 8px rgba(0, 191, 255, 0.3); }
.fwn-chip img { width: 20px; height: 20px; }
.fwn-chip-all { font-weight: bold; }
.fwn-rel-fix { margin: 0 0 12px; padding-left: 22px; line-height: 1.75; }
.fwn-badge { font-family: var(--fwn-mono); font-size: 11.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--fwn-accent); color: var(--fwn-accent); white-space: nowrap; }
.fwn-rel-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.fwn-rel-foot .fw-btn { margin: 0; }

/* ── Sticky Try / Buy bar ─────────────────────────────────────────────────────────────────────────────── */
.fwn-sticky { position: fixed; left: 50%; bottom: 66px; z-index: 2990; transform: translate(-50%, 140%); transition: transform .3s ease;
    display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 24px); padding: 9px 10px 9px 18px; border-radius: 14px;
    background: var(--fw-panel-bg, #000); color: var(--fw-text-color, #fff); border: 1px solid var(--fwn-accent);
    box-shadow: 0 0 22px rgba(0, 191, 255, 0.25), 0 10px 30px rgba(0, 0, 0, 0.5); font-size: 15px; line-height: 1.35; }
.fwn-sticky.is-in { transform: translate(-50%, 0); }
.fwn-sticky-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.fwn-btn { display: inline-block; padding: 6px 16px; border-radius: 999px; border: 2px solid var(--fw-text-color, #fff); color: inherit !important; text-decoration: none !important; font-weight: bold; white-space: nowrap; }
.fwn-btn:hover, .fwn-btn:focus { border-color: var(--fwn-accent); }
.fwn-btn-go { background: var(--fwn-accent); border-color: var(--fwn-accent); color: #001018 !important; }
.fwn-btn-go:hover, .fwn-btn-go:focus { background: transparent; color: var(--fw-text-color, #fff) !important; }
.fwn-btn-alt { font-weight: normal; }
.fwn-sticky-x { border: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; padding: 0 6px; cursor: pointer; opacity: .7; }
.fwn-sticky-x:hover { opacity: 1; }
body.fwn-has-sticky { padding-bottom: 130px !important; }
@media (max-width: 1100px) { .fwn-sticky-long { display: none; } }
@media (max-width: 768px) {
    .fwn-sticky { bottom: 8px; font-size: 17px; gap: 10px; padding: 8px 8px 8px 14px; }
    .fwn-btn { font-size: 17px; padding: 7px 14px; }
    .fwn-btn-alt { display: none; }
    body.fwn-has-sticky { padding-bottom: 80px !important; }
}

/* ── Generated pages: tool directory, Help me fix, problem pages, pricing ─────────────────────────────── */
.fwn-page { text-align: left; }
.fwn-body { max-width: 1180px; margin: 0 auto; padding: 26px 30px 30px; font-size: 16px; line-height: 1.6; }
.fwn-body h1 { margin: 6px 0 8px; font-size: 34px; line-height: 1.2; }
.fwn-body h2 { margin: 30px 0 10px; font-size: 25px; line-height: 1.25; }
.fwn-body h3 { margin: 18px 0 6px; font-size: 19px; }
.fwn-lead { font-size: 18px; max-width: 860px; margin: 0 0 16px; opacity: .95; }
.fwn-prompt-big { display: flex; align-items: center; gap: 12px; max-width: 860px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--fwn-accent);
    background: rgba(0, 0, 0, 0.25); box-shadow: 0 0 16px rgba(0, 191, 255, 0.18); font-family: var(--fwn-mono); }
.fwn-prompt-big span { color: var(--fwn-accent); font-size: 22px; font-weight: bold; }
.fwn-prompt-big input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font-family: var(--fwn-mono); font-size: 18px; caret-color: var(--fwn-accent); }
.fwn-prompt-big input::placeholder { color: inherit; opacity: .45; }
.fwn-chipbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.fwn-chipbar button { font-family: inherit; font-size: 14px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--fwn-line); background: rgba(0, 0, 0, 0.12); color: inherit; cursor: pointer; }
.fwn-chipbar button:hover { border-color: var(--fwn-accent); }
.fwn-chipbar button.is-on { background: var(--fwn-accent); border-color: var(--fwn-accent); color: #001018; font-weight: bold; }
.fwn-count { font-family: var(--fwn-mono); font-size: 13px; opacity: .7; margin: 6px 0 0; }
.fwn-cat h2 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fwn-cat h2 small { font-family: var(--fwn-mono); font-size: 13px; font-weight: normal; opacity: .65; }
.fwn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
.fwn-card { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; padding: 13px 14px; border-radius: 12px;
    border: 1px solid var(--fwn-line); background: var(--fwn-fill); color: inherit !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
.fwn-card:hover, .fwn-card:focus { border-color: var(--fwn-accent); box-shadow: 0 0 14px rgba(0, 191, 255, 0.25); transform: translateY(-1px); }
.fwn-card img, .fwn-card .fwn-noicon { grid-row: 1 / span 2; width: 32px; height: 32px; }
.fwn-card .fwn-noicon { display: flex; align-items: center; justify-content: center; font-family: var(--fwn-mono); color: var(--fwn-accent); }
.fwn-card-n { font-weight: bold; line-height: 1.3; }
.fwn-card-d { font-size: 14px; line-height: 1.4; opacity: .8; }
.fwn-card[hidden], .fwn-cat[hidden] { display: none; }
.fwn-none { padding: 18px; border: 1px dashed var(--fwn-line); border-radius: 10px; margin: 16px 0; }
.fwn-box { padding: 16px 20px; border-radius: 12px; border: 1px solid var(--fwn-line); background: var(--fwn-fill); margin: 18px 0; }
.fwn-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--fwn-accent); margin: 22px 0;
    background: rgba(0, 191, 255, 0.06); }
.fwn-cta p { margin: 0; flex: 1 1 320px; }
.fwn-cta .fwn-btn { font-size: 16px; padding: 8px 20px; }
.fwn-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.fwn-area { display: block; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--fwn-line); background: var(--fwn-fill); color: inherit !important; text-decoration: none !important; }
.fwn-area:hover, .fwn-area:focus { border-color: var(--fwn-accent); box-shadow: 0 0 14px rgba(0, 191, 255, 0.25); }
.fwn-area b { display: block; font-size: 17px; margin-bottom: 2px; }
.fwn-area span { font-size: 14px; opacity: .8; }
.fwn-area ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.fwn-results { margin: 14px 0 6px; max-width: 920px; }
.fwn-res { padding: 14px 18px; border-radius: 12px; border: 1px solid var(--fwn-line); border-left: 3px solid var(--fwn-accent); background: var(--fwn-fill); margin-bottom: 10px; }
.fwn-res-t { font-size: 19px; font-weight: bold; color: inherit !important; }
.fwn-res-s { opacity: .85; margin: 2px 0 6px; }
.fwn-res ol, .fwn-res ul { margin: 4px 0 6px; padding-left: 22px; }
.fwn-res-more { font-size: 14px; color: var(--fwn-accent) !important; }
.fwn-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; align-items: center; font-size: 14px; }
.fwn-examples button { font-family: var(--fwn-mono); font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px dashed var(--fwn-line); background: transparent; color: inherit; cursor: pointer; }
.fwn-examples button:hover { border-color: var(--fwn-accent); color: var(--fwn-accent); }
.fwn-problem { padding: 18px 22px; border-radius: 12px; border: 1px solid var(--fwn-line); background: var(--fwn-fill); margin: 16px 0; scroll-margin-top: 90px; }
.fwn-problem:target { border-color: var(--fwn-accent); box-shadow: 0 0 18px rgba(0, 191, 255, 0.3); }
.fwn-problem h2 { margin-top: 0; }
.fwn-steps { counter-reset: fwn; list-style: none; margin: 10px 0 4px; padding: 0; }
.fwn-steps li { counter-increment: fwn; position: relative; padding: 8px 0 8px 46px; border-top: 1px solid var(--fwn-line); }
.fwn-steps li:first-child { border-top: 0; }
.fwn-steps li::before { content: counter(fwn); position: absolute; left: 0; top: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--fwn-accent);
    color: var(--fwn-accent); font-family: var(--fwn-mono); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.fwn-steps .fwn-step-tool { font-weight: bold; }
.fwn-steps .fwn-step-d { display: block; font-size: 14px; opacity: .72; }
.fwn-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.fwn-toc a { font-size: 14px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--fwn-line); color: inherit !important; text-decoration: none !important; }
.fwn-toc a:hover { border-color: var(--fwn-accent); }
.fwn-muted { opacity: .75; font-size: 14px; }
@media (max-width: 768px) {
    .fwn-body { padding: 16px 12px 22px; font-size: 19px; line-height: 1.55; }
    .fwn-body h1 { font-size: 32px; } .fwn-body h2 { font-size: 26px; } .fwn-body h3 { font-size: 21px; }
    .fwn-lead { font-size: 20px; }
    .fwn-crumbs { font-size: 16px; }
    .fwn-chipbar button { font-size: 17px; padding: 7px 14px; }
    .fwn-grid { grid-template-columns: 1fr; }
    .fwn-card-d, .fwn-area span, .fwn-area ul, .fwn-steps .fwn-step-d, .fwn-toc a, .fwn-muted, .fwn-res-more { font-size: 17px; }
    .fwn-count, .fwn-cat h2 small { font-size: 16px; }
    .fwn-examples button { font-size: 16px; }
    .fwn-problem { padding: 14px 14px; }
}