/*
Theme Name: Shooters Toolbox
Theme URI: https://shooterstoolbox.app/
Author: Shooters Toolbox
Description: A lightweight product/documentation theme for ShootersToolbox.app, inspired by the clean editorial structure of the Skeptical Veteran site.
Version: 0.9.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: shooters-toolbox
*/

:root {
    --stbx-bg: #d6d5d4;
    --stbx-bg-soft: #e4e2df;
    --stbx-panel: #eceae7;
    --stbx-ink: #17191b;
    --stbx-muted: #62676c;
    --stbx-rule: #858789;
    --stbx-accent: #a12d27;
    --stbx-accent-hover: #771d19;
    --stbx-dark: #151a1d;
    --stbx-dark-2: #20272b;
    --stbx-white: #f8f7f4;
    --stbx-shadow: 0 12px 32px rgba(0,0,0,.10);
    --stbx-radius: 4px;
    --stbx-content: 1120px;
    --stbx-copy: 860px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--stbx-bg);
    color: var(--stbx-ink);
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--stbx-accent); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--stbx-accent-hover); }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }

.site-shell { width: min(calc(100% - 44px), var(--stbx-content)); margin-inline: auto; }
.narrow { width: min(calc(100% - 44px), var(--stbx-copy)); margin-inline: auto; }

.site-header { padding: 32px 0 0; }
.brand { text-align: center; padding: 0 16px 30px; }
.brand-title {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 5vw, 3.45rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.brand-title a { color: var(--stbx-ink); text-decoration: none; }
.brand-tagline {
    margin: 14px 0 0;
    font-size: .74rem;
    line-height: 1.6;
    letter-spacing: .34em;
    text-transform: uppercase;
}
.brand-mark {
    width: 40px;
    height: 40px;
    margin: 0 auto 18px;
    color: var(--stbx-accent);
}

.primary-nav { border-top: 1px solid var(--stbx-rule); }
.primary-nav .site-shell { position: relative; }
.primary-nav ul {
    display: flex;
    justify-content: center;
    gap: clamp(22px, 4vw, 48px);
    list-style: none;
    margin: 0;
    padding: 20px 0 21px;
}
.primary-nav a {
    position: relative;
    color: var(--stbx-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .79rem;
}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav a:hover { color: var(--stbx-ink); }
.primary-nav .current-menu-item > a::before,
.primary-nav .current_page_item > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -21px;
    height: 2px;
    background: var(--stbx-accent);
}
.nav-toggle { display:none; }

main { min-height: 55vh; }
.hero { padding: 88px 0 68px; }
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.07fr) minmax(300px, .93fr);
    align-items: center;
    gap: 72px;
}
.eyebrow {
    margin: 0 0 13px;
    color: var(--stbx-accent);
    font-size: .77rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
h1, h2, h3, h4 {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.12;
    color: var(--stbx-ink);
}
.hero h1 { font-size: clamp(2.55rem, 5vw, 4.8rem); margin: 0 0 24px; font-weight: 600; }
.hero-copy { font-size: 1.14rem; max-width: 680px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding: 10px 20px;
    border:1px solid var(--stbx-accent);
    color:var(--stbx-white);
    background:var(--stbx-accent);
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.76rem;
    font-weight:700;
}
.button:hover { background:var(--stbx-accent-hover); border-color:var(--stbx-accent-hover); color:white; }
.button.alt { background:transparent; color:var(--stbx-ink); border-color:var(--stbx-ink); }
.button.alt:hover { color:white; background:var(--stbx-ink); }
.hero-phone-stage { position:relative; min-height:590px; }
.phone-shot {
    position:absolute;
    border: 7px solid #111719;
    border-radius: 24px;
    box-shadow: var(--stbx-shadow);
    overflow:hidden;
    background:#111;
}
.phone-shot img { width:100%; height:100%; object-fit:cover; }
.phone-shot.one { width: 280px; right: 5%; top: 0; transform:rotate(2.5deg); }
.phone-shot.two { width: 245px; left: 2%; bottom: 0; transform:rotate(-4deg); }
.hero-note { margin-top: 22px; color: var(--stbx-muted); font-size:.84rem; }

.rule-mark { width: 86px; height: 2px; margin: 0 auto; background: rgba(255,255,255,.7); }
.intro-band { padding: 42px 0 68px; }
.intro-band p { margin:0 auto; max-width:900px; font-size:1.15rem; }

.feature-strip { padding: 4px 0 92px; }
.feature-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.feature-card { min-width:0; }
.feature-visual {
    position:relative;
    aspect-ratio: 1.35 / 1;
    margin-bottom:22px;
    overflow:hidden;
    background:var(--stbx-dark);
    box-shadow:0 1px 0 rgba(255,255,255,.45) inset;
}
.feature-visual img { width:100%; height:100%; object-fit:cover; object-position:top center; filter:saturate(.86) contrast(.96); }
.feature-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(8,12,14,.25)); }
.feature-card h3 { margin:0 0 8px; font-size:1.55rem; font-weight:500; }
.feature-card h3 a { color:var(--stbx-accent); }
.feature-card p { margin:0; font-size:.94rem; line-height:1.55; }

.dark-band { background:var(--stbx-dark); color:#e8e6e0; padding:82px 0; border-top:2px solid var(--stbx-accent); }
.dark-band h2, .dark-band h3 { color:white; }
.dark-band .eyebrow { color:#dc7771; }
.dark-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:78px; align-items:start; }
.dark-band h2 { font-size:clamp(2rem,4vw,3.2rem); margin:0 0 20px; }
.point-list { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.point { padding-top:18px; border-top:1px solid #465158; }
.point h3 { margin:0 0 7px; font-size:1.18rem; }
.point p { margin:0; font-size:.91rem; color:#bec5c8; }

.section { padding:92px 0; }
.section-heading { text-align:center; max-width:760px; margin:0 auto 50px; }
.section-heading h2 { font-size:clamp(2rem,4vw,3rem); margin:0 0 15px; }
.section-heading p { margin:0; color:var(--stbx-muted); }
.screenshot-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
.screenshot-card { margin:0; }
.screenshot-frame {
    width:min(100%,310px);
    margin:0 auto;
    padding:9px;
    background:#121719;
    border-radius:22px;
    box-shadow:var(--stbx-shadow);
}
.screenshot-frame img { border-radius:14px; }
.screenshot-card figcaption { margin-top:13px; text-align:center; color:var(--stbx-muted); font-size:.82rem; font-style:italic; }

.workflow { background:var(--stbx-bg-soft); }
.workflow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid #aaa5a0; border-bottom:1px solid #aaa5a0; }
.workflow-step { padding:34px 30px; border-right:1px solid #aaa5a0; }
.workflow-step:last-child { border-right:0; }
.workflow-num { display:block; color:var(--stbx-accent); font-family:Georgia,serif; font-size:2rem; }
.workflow-step h3 { margin:7px 0 10px; font-size:1.26rem; }
.workflow-step p { margin:0; font-size:.91rem; }

.cta { text-align:center; padding:88px 0 96px; }
.cta h2 { font-size:clamp(2.2rem,4vw,3.35rem); margin:0 0 17px; }
.cta p { max-width:720px; margin:0 auto 30px; }

.content-area { padding: 74px 0 90px; }
.entry-header { text-align:center; margin-bottom:46px; }
.entry-title { font-size:clamp(2.2rem,5vw,3.5rem); margin:0; }
.entry-meta { margin-top:10px; color:var(--stbx-muted); font-size:.85rem; }
.entry-content { max-width:900px; margin:0 auto; }
.entry-content h2 { margin-top:2.1em; font-size:2rem; }
.entry-content h3 { margin-top:1.7em; font-size:1.5rem; }
.entry-content img { margin:36px auto; }
.entry-content pre { overflow:auto; background:#20272b; color:#f0eee9; padding:20px; }
.entry-content blockquote { margin:32px 0; padding-left:25px; border-left:3px solid var(--stbx-accent); color:#474b4e; font-family:Georgia,serif; font-size:1.12rem; }

.posts-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.post-card { border-top:1px solid #9b9997; padding-top:20px; }
.post-card h2 { margin:0 0 8px; font-size:1.65rem; }

.site-footer { background:var(--stbx-dark); color:#bac0c2; border-top:2px solid var(--stbx-accent); padding:42px 0 30px; }
.footer-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:end; }
.footer-brand { font-family:Georgia,serif; color:white; letter-spacing:.12em; text-transform:uppercase; font-size:1.15rem; }
.footer-copy { margin:8px 0 0; max-width:620px; font-size:.82rem; }
.footer-nav ul { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px 24px; list-style:none; margin:0; padding:0; }
.footer-nav a { color:#e1dfda; font-size:.82rem; }
.copyright { border-top:1px solid #343d42; margin-top:32px; padding-top:22px; font-size:.75rem; }

.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 980px) {
    .hero-grid, .dark-grid { grid-template-columns:1fr; }
    .hero { padding-top:64px; }
    .hero-phone-stage { width:min(100%,600px); margin:0 auto; }
    .feature-grid { grid-template-columns:repeat(2,1fr); }
    .feature-card:last-child { grid-column:1/-1; width:calc(50% - 9px); justify-self:center; }
    .workflow-grid { grid-template-columns:1fr 1fr; }
    .workflow-step:nth-child(2) { border-right:0; }
    .workflow-step:nth-child(-n+2) { border-bottom:1px solid #aaa5a0; }
}

@media (max-width: 720px) {
    body { font-size:17px; }
    .site-shell, .narrow { width:min(calc(100% - 28px), var(--stbx-content)); }
    .site-header { padding-top:22px; }
    .brand-title { letter-spacing:.10em; font-size:2.15rem; }
    .brand-tagline { letter-spacing:.20em; font-size:.64rem; }
    .nav-toggle {
        display:block;
        width:100%;
        padding:14px;
        border:0;
        background:transparent;
        color:var(--stbx-accent);
        text-transform:uppercase;
        font-weight:700;
        letter-spacing:.12em;
    }
    .primary-nav ul { display:none; flex-direction:column; align-items:center; gap:0; padding:0 0 14px; }
    .primary-nav.is-open ul { display:flex; }
    .primary-nav li { width:100%; text-align:center; }
    .primary-nav a { display:block; padding:10px; }
    .primary-nav .current-menu-item > a::before, .primary-nav .current_page_item > a::before { display:none; }
    .hero { padding:54px 0 48px; }
    .hero-grid { gap:35px; }
    .hero-phone-stage { min-height:440px; }
    .phone-shot.one { width:210px; right:4%; }
    .phone-shot.two { width:190px; left:5%; }
    .intro-band { padding-bottom:50px; }
    .feature-grid { grid-template-columns:1fr; gap:38px; }
    .feature-card:last-child { grid-column:auto; width:auto; }
    .feature-visual { aspect-ratio:1.75/1; }
    .point-list { grid-template-columns:1fr; }
    .section { padding:68px 0; }
    .screenshot-grid { grid-template-columns:1fr; gap:36px; }
    .workflow-grid { grid-template-columns:1fr; }
    .workflow-step, .workflow-step:nth-child(2) { border-right:0; border-bottom:1px solid #aaa5a0; }
    .workflow-step:last-child { border-bottom:0; }
    .posts-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-nav ul { justify-content:flex-start; }
}