/*
Theme Name: FSC Knowledge
Description: An editorial theme for Firewall Support Center.
Version: 0.1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: fsc-knowledge
*/
:root {
    --navy: #0b1220;
    --panel: #111d30;
    --paper: #f8fafc;
    --ink: #0f172a;
    --muted: #475569;
    --line: #dbe3ed;
    --accent: #38bdf8;
    --link: #075985;
    --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.65 Inter, system-ui, sans-serif; }
a { color: var(--link); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 4px; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0 0 .65rem; line-height: 1.13; letter-spacing: -.035em; }
h1 { font-size: clamp(2.3rem, 5.5vw, 4.2rem); overflow-wrap: anywhere; }
h2 { font-size: clamp(1.65rem, 3.5vw, 2.45rem); }
p { margin: 0 0 1rem; }
.shell { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.section { padding-block: clamp(2.25rem, 6vw, 4.5rem); }
.section + .section { border-top: 1px solid var(--line); }
.skip-link, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip-link:focus { z-index: 10; width: auto; height: auto; clip-path: none; padding: .75rem; background: white; }
.masthead, .hero, .site-footer { color: #eef5ff; background: var(--navy); }
.masthead { border-bottom: 1px solid #26374d; }
.masthead-inner, .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 1.1rem; }
.masthead a, .site-footer a { color: inherit; text-decoration: none; }
.masthead a:hover, .site-footer a:hover { text-decoration: underline; }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 750; }
.brand-mark { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--accent); border-radius: .55rem; color: var(--accent); font-family: var(--mono); }
.masthead ul { display: flex; flex-wrap: wrap; gap: .45rem 1.35rem; margin: 0; padding: 0; list-style: none; }
.hero { background: radial-gradient(ellipse at 84% 35%, #162b46, var(--navy) 65%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); padding-block: clamp(3rem, 8vw, 7rem); }
.eyebrow { margin-bottom: .7rem; color: var(--link); font: 700 .75rem/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.hero .eyebrow, .hero-link { color: var(--accent); }
.hero h1 { font-size: clamp(3rem, 8vw, 6rem); letter-spacing: -.07em; line-height: .98; }
.hero em { color: var(--accent); font-style: normal; }
.hero-copy { margin: 1.3rem 0 1.5rem; max-width: 36rem; color: #c5d3e5; font-size: 1.12rem; }
.signal { display: inline-block; width: .5rem; height: .5rem; margin-inline-end: .4rem; border-radius: 50%; background: var(--accent); }
.guide-search { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.guide-search label { flex: 1 1 15rem; min-width: 0; }
.guide-search input[type="search"] { width: 100%; padding: .78rem; border: 1px solid #64748b; border-radius: .4rem; background: white; color: var(--ink); font: inherit; }
button, .button { display: inline-block; padding: .78rem 1rem; border: 1px solid transparent; border-radius: .4rem; color: var(--navy); background: var(--accent); font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
button:hover, .button:hover { background: #7dd3fc; }
.hero-link { display: inline-block; margin-top: .3rem; font-weight: 700; }
.diagnostics { border: 1px solid #39516d; border-radius: .85rem; background: var(--panel); padding: 1.4rem; }
.diagnostics-label { color: #bfdbfe; font: 700 .78rem/1.4 var(--mono); text-transform: uppercase; }
.diagnostics ol { margin: 0; padding: 0; list-style: none; }
.diagnostics li { display: flex; gap: .9rem; border-top: 1px solid #39516d; padding-block: .85rem; }
.diagnostics li > span { color: var(--accent); font-family: var(--mono); }
.diagnostics small { display: block; color: #c5d3e5; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.topic-card, .guide-card, .support { padding: 1.35rem; border: 1px solid var(--line); border-radius: .75rem; background: white; overflow-wrap: anywhere; }
.topic-card { text-decoration: none; color: var(--ink); }
.topic-card:first-child { border-top: 3px solid #0284c7; }
.topic-card:hover { border-color: var(--link); }
.topic-card h3 { margin-top: .5rem; }
.topic-card h3 span { color: var(--link); }
.guide-card .card-title { font-size: 1.27rem; }
.topic-card p, .guide-card p, .article-meta { color: var(--muted); }
.guide-card p:last-child, .topic-card p:last-child { margin-bottom: 0; }
.support { background: #edf7ff; padding: clamp(1.35rem, 4vw, 3rem); }
.reading { max-width: 46rem; margin-inline: auto; }
.reading h1 { font-size: clamp(2rem, 5.5vw, 3.5rem); }
.article-content { font-size: 1.1rem; overflow-wrap: anywhere; }
.article-content :is(h2, h3) { margin-top: 1.6em; }
.article-content pre { overflow: auto; padding: 1rem; border-radius: .5rem; background: var(--navy); color: #e2e8f0; }
.article-content :is(pre, code) { font-family: var(--mono); }
.article-content .wp-block-table { overflow-x: auto; }
.article-cover { margin: 1.5rem 0; }
.navigation { margin-top: 1.5rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-inner { padding-block: 2rem; }
.site-footer p { margin: .3rem 0 0; color: #c5d3e5; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 800px) {
    .hero-grid { grid-template-columns: 1fr; }
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .card-grid { grid-template-columns: 1fr; }
}