/* VBUSA Legacy Core — front-end styling for /veteran-legacy/*.
Deliberately theme-agnostic (spec §68: warm, patriotic, premium,
family-oriented — never a government-portal feel). VBUSA's active theme
supplies header/footer/typography; these rules only style the
plugin-owned content inside them. */
:root {
--vbusa-accent: #9c6b2e;
--vbusa-ribbon: #7c2d26;
--vbusa-ink: #1e2a38;
--vbusa-ink-soft: #5b6472;
--vbusa-bg-soft: #faf6ec;
--vbusa-line: #e4dac5;
--vbusa-good: #3f7a5d;
--vbusa-warn: #a9691f;
/* 2026-09-04: Brent asked for the command buttons to match the main
site's theme instead of this plugin's own bronze accent. #7887ab is
the exact color veteranbenefitsusa.com's own Divi buttons already use
(confirmed live against "Start My Free Assessment" / "Explore
Benefits" on the homepage), not a new blue invented for this plugin. */
--vbusa-button-blue: #7887ab;
}
.vbusa-coming-soon, .vbusa-auth-page, .vbusa-app-page {
max-width: 780px;
margin: 0 auto;
padding: 2.5rem 1.25rem 4rem;
color: var(--vbusa-ink);
}
.vbusa-hero { text-align: center; padding: 2rem 0 3rem; }
.vbusa-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--vbusa-ribbon); font-weight: 600; }
.vbusa-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: .5rem 0 1rem; }
.vbusa-lede { max-width: 46ch; margin: 0 auto 1.5rem; color: var(--vbusa-ink-soft); }
.vbusa-secondary { margin-top: 1.25rem; color: var(--vbusa-ink-soft); font-style: italic; }
.vbusa-cta {
display: inline-block; background: var(--vbusa-button-blue); color: #fff; text-decoration: none;
padding: .8rem 1.6rem; border-radius: 8px; font-weight: 600; border: none; cursor: pointer;
}
.vbusa-cta:hover { filter: brightness(1.06); }
.vbusa-cta:disabled { opacity: .6; cursor: not-allowed; }
/* "Delete This Legacy Book" (2026-09-04) — reuses --vbusa-ribbon (already
the app's own dark-red accent, e.g. .vbusa-eyebrow) rather than a new
color, so the danger button reads as "this app's red", not a jarring
unrelated shade. */
.vbusa-cta-danger { background: var(--vbusa-ribbon); }
.vbusa-delete-panel { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--vbusa-line); }
.vbusa-delete-panel .vbusa-notice-error { margin-top: .6rem; }
.vbusa-delete-panel .vbusa-notice-error button { margin-top: .6rem; margin-right: .6rem; }
.vbusa-steps { list-style: none !important; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0; }
.vbusa-steps .vbusa-step { list-style: none !important; background: var(--vbusa-bg-soft); border: 1px solid var(--vbusa-line); border-radius: 10px; padding: 1rem; text-align: center; }
.vbusa-steps .vbusa-step span { display: block; font-weight: 700; color: var(--vbusa-accent); font-size: 1.3rem; margin-bottom: .35rem; }
.vbusa-receives ul { columns: 2; gap: 2rem; }
.vbusa-samples { text-align: center; }
.vbusa-samples-intro { max-width: 52ch; margin: 0 auto 1.5rem; color: var(--vbusa-ink-soft); }
.vbusa-samples-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
margin: 0 0 1.25rem; text-align: left;
}
.vbusa-sample-card {
margin: 0; background: var(--vbusa-bg-soft); border: 1px solid var(--vbusa-line);
border-radius: 12px; padding: .6rem .6rem .9rem; box-shadow: 0 2px 6px rgba(30, 42, 56, .06);
}
.vbusa-sample-card img { display: block; width: 100%; height: auto; border-radius: 7px; border: 1px solid var(--vbusa-line); }
.vbusa-sample-card figcaption { margin-top: .6rem; font-size: .85rem; font-style: italic; color: var(--vbusa-ink-soft); text-align: center; }
.vbusa-samples-note { font-size: .8rem; color: var(--vbusa-ink-soft); font-style: italic; max-width: 52ch; margin: 0 auto; }
@media (max-width: 640px) {
.vbusa-samples-grid { grid-template-columns: 1fr; }
}
.vbusa-form { display: flex; flex-direction: column; gap: .9rem; max-width: 460px; }
.vbusa-field-row { display: flex; flex-direction: column; gap: .3rem; }
.vbusa-field-row label { font-size: .85rem; font-weight: 600; }
.vbusa-field-row input, .vbusa-field-row select {
padding: .6rem .7rem; border: 1px solid var(--vbusa-line); border-radius: 7px; font-size: .95rem;
}
.vbusa-checkbox-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.vbusa-form-error { color: #b3261e; font-size: .85rem; }
.vbusa-auth-links { margin-top: 1.1rem; font-size: .85rem; }
.vbusa-auth-links a { color: var(--vbusa-accent); }
/* 2026-09-04: the "Built by.../more books by..." credit links on the sign-up
page - separate from .vbusa-auth-links (primary account-nav actions like
"Forgot your password?") since these are attribution, not navigation. */
.vbusa-auth-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--vbusa-line); font-size: .8rem; line-height: 1.8; color: var(--vbusa-ink-soft); }
.vbusa-auth-footer a { color: inherit; }
.vbusa-notice { background: var(--vbusa-bg-soft); border: 1px solid var(--vbusa-line); border-radius: 8px; padding: .9rem 1rem; }
.vbusa-notice-error { border-color: #e3b3ad; background: #fbeceb; color: #7a241d; }
.vbusa-notice-success { border-color: #bcd9c9; background: #eaf5ef; color: #245a3f; }
.vbusa-security-grid { display: flex; flex-direction: column; gap: .8rem; margin: 1.5rem 0; }
.vbusa-security-row { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--vbusa-line); border-radius: 8px; }
.vbusa-security-row span { width: 90px; color: var(--vbusa-ink-soft); font-size: .85rem; }
.vbusa-verified { color: var(--vbusa-good); font-size: .8rem; }
.vbusa-unverified { color: var(--vbusa-warn); font-size: .8rem; }
/* My Books rows + the questionnaire's own title row (2026-09-04, Brent:
"I need to be able to name my books so that I can distinguish them") -
both reuse .vbusa-security-row's card look, but need their own layout:
a title/subtitle block that grows to fill the space, pushed apart from
the Open control, and an un-fixed-width sub-line (the base
".vbusa-security-row span { width: 90px }" rule above was sized for
short Account Security labels like "Email", not a line like
"self — draft — v0"). 2026-09-05: both rows used to also have an inline
"Rename" control (.vbusa-book-rename) - removed per Brent's "remove the
ability to change the name just rely on the veteran story for the name";
the name is read-only display now, so only the layout rules below (still
needed) remain. */
.vbusa-book-row { justify-content: space-between; flex-wrap: wrap; }
.vbusa-book-info { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 auto; min-width: 160px; }
.vbusa-book-row .vbusa-book-sub, .vbusa-book-title-row .vbusa-book-sub { width: auto; }
.vbusa-book-untitled { font-style: italic; color: var(--vbusa-ink-soft); font-weight: 400; }
.vbusa-book-title-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.vbusa-book-title-row > span:first-child { font-size: 1.1rem; font-weight: 600; }
/* #vbusa-email-verify-widget ("Verify Your Email", account-security.php) is
built client-side by legacy-core.js's mountEmailVerifyWidget() - a plain
h2/p/button/p(notice) stack, appended with no wrapper markup. Without
these rules it still reads fine (no bare here, unlike the old
mobile-OTP widget this replaced on 2026-09-04), but gets default browser
block spacing rather than matching the rest of the app's rhythm. */
#vbusa-email-verify-widget { margin-top: .5rem; }
#vbusa-email-verify-widget h2 { margin: 0 0 .4rem; }
#vbusa-email-verify-widget p:not(.vbusa-notice) { color: var(--vbusa-ink-soft); font-size: .9rem; margin: 0 0 .8rem; }
#vbusa-email-verify-widget .vbusa-notice { margin-top: .6rem; }
.vbusa-account-nav { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.vbusa-account-nav a { text-decoration: none; color: var(--vbusa-ink); border: 1px solid var(--vbusa-line); border-radius: 7px; padding: .5rem .9rem; font-size: .9rem; }
.vbusa-env-badge {
display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
background: var(--vbusa-warn); color: #fff; padding: .25rem .6rem; border-radius: 999px; margin-bottom: 1rem;
}
/* #vbusa-app-mount (app-shell.php: create/my-books/review) is built entirely
by raw JS DOM appends - mountApp()/renderMyBooks()/renderReview() in
legacy-core.js - with no wrapper spacing on most elements. The theme's
global CSS zeroes default
/
margins, so with nothing here to
replace them the heading, notice box, and button ended up touching with
no gap - reported by Brent as "too close" on /veteran-legacy/my-books/ on
2026-09-04 (same root cause as the OTP-widget/email-verify-widget fixes
above). mount's own first-level heading gets a fixed margin; deeper
multi-element wrapper divs (the "no projects yet" block, the review
status block) opt into the .vbusa-stack utility instead of one-off rules,
since new app-shell views will keep hitting this same gap otherwise. */
#vbusa-app-mount > h1 { margin: 0 0 1rem; }
.vbusa-stack { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.vbusa-section-nav { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.vbusa-section-nav button {
background: var(--vbusa-bg-soft); border: 1px solid var(--vbusa-line); border-radius: 7px;
padding: .5rem .8rem; font-size: .85rem; cursor: pointer;
}
.vbusa-section-nav button[aria-current="true"] { background: var(--vbusa-accent); color: #fff; border-color: transparent; }
.vbusa-section-nav button:disabled { opacity: .6; cursor: not-allowed; }
/* 2026-09-05: shown between the section nav and the form itself when a
tab-switch autosave fails (legacy-core.js's renderQuestionnaire ->
navSaveError) - same raw-appended-element spacing gap as Updates
u/v/w's JS-built widgets, just for this one message. */
.vbusa-nav-save-error { margin: 0 0 1.5rem; }
.vbusa-progress-track { height: 6px; border-radius: 999px; background: var(--vbusa-line); overflow: hidden; margin-bottom: 1.5rem; }
.vbusa-progress-fill { height: 100%; background: linear-gradient(90deg, var(--vbusa-accent), var(--vbusa-ribbon)); }
/* 2026-09-04: the questionnaire's "review" tab and the standalone
/veteran-legacy/review/ page both list every section's saved answers
before Approve & Lock - these boxes keep each section visually separate
instead of running together like the .vbusa-form fields above them. */
.vbusa-review-section { border: 1px solid var(--vbusa-line); border-radius: 8px; padding: .9rem 1rem; width: 100%; max-width: 620px; margin-bottom: .8rem; }
.vbusa-review-section h3 { margin: 0 0 .5rem; font-size: 1rem; }
.vbusa-review-section p { margin: .3rem 0; }
.vbusa-review-section p strong { text-transform: capitalize; }