/*
Filename: style.css
Last Edit Date: 2026-11-05 EST
Purpose: Styling for the pages of ghostwolftools.com: lavender page, deep purple header, logo navy and red as accents (always light).
*/
:root { --ink: #1b1f2a; --muted: #5b6372; --accent: #1f3a73; --line: #d8cfeb; --soft: #faf8fe; --purple: #5b3fa0; --red: #d6283a; }
body { margin: 0; background: #ece6f7; color: var(--ink); font: 17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { position: relative; background: var(--purple); box-shadow: 0 0 0 100vmax var(--purple); clip-path: inset(0 -100vmax); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; max-width: 52rem; margin: 0 auto; padding: 12px 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: #fff; text-decoration: none; }
.brand img { height: 40px; width: auto; }
nav { display: flex; gap: 20px; }
nav a { color: #fff; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
nav a:hover, nav a[aria-current] { border-bottom-color: #fff; }
main { max-width: 42rem; margin: 0 auto; padding: 32px 16px 24px; }
h1 { margin: 0 0 8px; font-size: 2rem; }
h2 { margin: 28px 0 8px; font-size: 1.2rem; }
.lead { font-size: 1.15rem; color: var(--muted); margin-top: 0; }
.small { color: var(--muted); font-size: .9rem; }
a { color: var(--accent); }
li { margin-bottom: 6px; }
.hero { text-align: center; padding: 16px 0 8px; }
.hero img { width: min(200px, 50vw); height: auto; }
.hero h1 { margin-top: 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; margin: 20px 0; }
.cards section { border: 1px solid var(--line); border-radius: 10px; background: var(--soft); padding: 4px 18px 14px; }
.cards h2 { margin-top: 14px; }
.price { font-size: 2rem; font-weight: 700; margin: 0; color: var(--red); }
.price span { font-size: 1rem; font-weight: 400; color: var(--muted); }
.button { display: inline-block; padding: 10px 18px; border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; margin: 4px 8px 4px 0; }
.button.plain { background: #fff; color: var(--accent); border: 2px solid var(--accent); padding: 8px 16px; }
footer { max-width: 42rem; margin: 0 auto; padding: 24px 16px 48px; color: var(--muted); font-size: .9rem; }
form { display: grid; gap: 14px; max-width: 32rem; }
form label { display: grid; gap: 4px; font-weight: 600; }
form label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
input[type=text], input[type=email], select, textarea { font: inherit; padding: 8px 10px; border: 1.5px solid #9aa3b5; border-radius: 6px; width: 100%; box-sizing: border-box; background: #fff; color: var(--ink); }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; }
fieldset { border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 14px 10px; display: grid; gap: 6px; }
legend { font-weight: 600; padding: 0 6px; }
button.button { border: 0; font: inherit; font-weight: 600; cursor: pointer; justify-self: start; padding: 10px 24px; }
.trap { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.note { margin: 0 0 12px; }
.note.good { padding: 12px 14px; border-radius: 8px; background: #e8f5e9; color: #1b5e20; }
.note.bad { padding: 12px 14px; border-radius: 8px; background: #fdecea; color: #8a1c14; }
.card-link { display: block; color: inherit; text-decoration: none; }
.cards section:hover { border-color: var(--accent); }
.more { color: var(--accent); font-weight: 600; margin-bottom: 0; }
figure { margin: 24px 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
figcaption { color: var(--muted); font-size: .95rem; margin-top: 6px; }