/* ============================================================================
   LazarusVault stylesheet — "Analog Vault" theme
   MAINTAINER NOTES:
   - This is one plain CSS file for the whole site (no build step required).
   - All colors/fonts/spacing are CSS variables in :root. Change the palette
     there, not by hunting through selectors below.
   - Fonts are system-font stacks ONLY (no Google Fonts / CDN calls) to keep
     the site fully self-hosted per project requirements.
   - New optional classes you can start using in markup (all backward
     compatible — nothing breaks if you never use them):
       .lv-badge / .lv-badge-plus / .lv-badge-premium / .lv-badge-free
           -> small pill labels for pricing.php tiers
       .lv-eyebrow   -> small uppercase kicker text above headings
       .lv-divider   -> thin decorative horizontal rule with center dot
   - Search for "SECTION:" to jump between areas of the file.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   SECTION: Design tokens
   Change these to re-theme the entire site.
   ------------------------------------------------------------------------ */
:root {
    /* Core palette (kept from original brand) */
    --lv-dark: #16232c;          /* deepened slightly for more contrast */
    --lv-dark-2: #1f333f;        /* secondary dark, used for gradients   */
    --lv-primary: #2c5f6f;
    --lv-primary-dark: #1e434f;
    --lv-accent: #c0392b;        /* reserved for critical / danger actions */
    --lv-accent-dark: #922b21;

    /* New: brass/copper accent for premium & decorative details */
    --lv-brass: #b8905a;
    --lv-brass-dark: #8f6c3f;
    --lv-brass-light: #e4c896;

    --lv-bg: #f6f5f1;            /* warmer, paper-like off-white           */
    --lv-bg-alt: #efeee8;
    --lv-text: #262523;
    --lv-text-muted: #6b6a66;
    --lv-border: #ddd9cf;

    /* Success / error tones (used by alerts) */
    --lv-success: #1e7e4f;
    --lv-success-bg: #e8f6ef;
    --lv-success-border: #b7e4cd;
    --lv-error: #922b21;
    --lv-error-bg: #fdecea;
    --lv-error-border: #f5c6c1;

    /* Typography */
    --lv-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
    --lv-font-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lv-font-mono: "SF Mono", "Cascadia Code", "Consolas", "Roboto Mono", monospace;

    /* Spacing / shape */
    --lv-radius-sm: 4px;
    --lv-radius: 8px;
    --lv-radius-lg: 14px;
    --lv-max-width: 1100px;
    --lv-shadow-sm: 0 1px 2px rgba(22, 35, 44, 0.06);
    --lv-shadow: 0 4px 16px rgba(22, 35, 44, 0.08);
    --lv-shadow-lg: 0 12px 32px rgba(22, 35, 44, 0.16);
    --lv-transition: 180ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   SECTION: Reset & base
   ------------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--lv-font-body);
    background: var(--lv-bg);
    color: var(--lv-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--lv-brass-light); color: var(--lv-dark); }

a { color: var(--lv-primary); text-decoration: none; transition: color var(--lv-transition); }
a:hover { color: var(--lv-primary-dark); text-decoration: underline; }

/* Consistent, visible keyboard focus everywhere (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--lv-brass);
    outline-offset: 2px;
}

h1, h2, h3, h4 { font-family: var(--lv-font-display); color: var(--lv-dark); margin-top: 0; }

/* ---------------------------------------------------------------------------
   SECTION: Header
   Dark vault fascia with a faint hairline "blueprint" grid and a brass
   base-line. Pure CSS — no background images/requests.
   ------------------------------------------------------------------------ */
.lv-header {
    background:
        repeating-linear-gradient(
            0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px,
            transparent 1px, transparent 28px
        ),
        repeating-linear-gradient(
            90deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px,
            transparent 1px, transparent 28px
        ),
        linear-gradient(180deg, var(--lv-dark) 0%, var(--lv-dark-2) 100%);
    color: #fff;
    border-bottom: 2px solid var(--lv-brass-dark);
    position: relative;
}

.lv-header-inner {
    max-width: var(--lv-max-width);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo: small "dial" mark + serif wordmark, wide letter-spacing for a
   stamped/engraved feel */
.lv-logo {
    color: #fff;
    font-family: var(--lv-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.lv-logo::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--lv-brass-light);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--lv-dark), inset 0 0 0 4px var(--lv-brass);
}

.lv-nav { display: flex; align-items: center; }
.lv-nav a {
    color: #cdd7dc;
    margin-left: 24px;
    font-family: var(--lv-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 4px;
}
/* Sliding underline on hover instead of default browser underline */
.lv-nav a:not(.lv-btn-nav) {
    text-decoration: none;
}
.lv-nav a:not(.lv-btn-nav)::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0%;
    height: 1px;
    background: var(--lv-brass-light);
    transition: width var(--lv-transition);
}
.lv-nav a:not(.lv-btn-nav):hover {
    color: #fff;
    text-decoration: none;
}
.lv-nav a:not(.lv-btn-nav):hover::after { width: 100%; }

.lv-btn-nav {
    background: linear-gradient(180deg, #d24a3a, var(--lv-accent));
    padding: 9px 18px;
    border-radius: var(--lv-radius-sm);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: var(--lv-shadow-sm);
    transition: transform var(--lv-transition), box-shadow var(--lv-transition);
}
.lv-btn-nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(192, 57, 43, 0.4);
}
.lv-btn-nav::after { display: none; } /* no sliding underline on the CTA */

/* ---------------------------------------------------------------------------
   SECTION: Main layout
   ------------------------------------------------------------------------ */
.lv-main {
    max-width: var(--lv-max-width);
    margin: 0 auto;
    padding: 48px 24px;
    min-height: 60vh;
}

/* Small uppercase kicker text, e.g. above a page <h1> ("SECURE STORAGE") */
.lv-eyebrow {
    display: inline-block;
    font-family: var(--lv-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lv-brass-dark);
    margin-bottom: 10px;
}

/* Thin decorative rule with a centered dot — use between sections */
.lv-divider {
    display: flex;
    align-items: center;
    text-align: center;
    border: 0;
    height: 1px;
    background: var(--lv-border);
    margin: 40px 0;
    position: relative;
}
.lv-divider::after {
    content: "•";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--lv-bg);
    color: var(--lv-brass);
    padding: 0 12px;
    font-size: 1rem;
}

/* ---------------------------------------------------------------------------
   SECTION: Footer
   ------------------------------------------------------------------------ */
.lv-footer {
    background: var(--lv-dark);
    border-top: 2px solid var(--lv-brass-dark);
    margin-top: 60px;
}
.lv-footer-inner {
    max-width: var(--lv-max-width);
    margin: 0 auto;
    padding: 28px 24px;
    font-size: 0.85rem;
    color: #8fa0a8;
    text-align: center;
    font-family: var(--lv-font-mono);
}
.lv-footer-inner a { color: #cdd7dc; }
.lv-footer-inner a:hover { color: var(--lv-brass-light); }

/* ---------------------------------------------------------------------------
   SECTION: Cards
   Styled like a dossier / index card: subtle top accent bar, corner fold,
   gentle lift on hover.
   ------------------------------------------------------------------------ */
.lv-card {
    background: #fff;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius);
    padding: 30px 28px;
    margin-bottom: 24px;
    box-shadow: var(--lv-shadow-sm);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--lv-transition), transform var(--lv-transition);
}
.lv-card::before {
    /* top accent bar */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lv-primary), var(--lv-brass));
}
.lv-card::after {
    /* subtle corner fold, purely decorative */
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 22px 22px 0;
    border-color: transparent var(--lv-bg-alt) transparent transparent;
}
.lv-card:hover {
    box-shadow: var(--lv-shadow);
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   SECTION: Buttons
   Tactile: slight gradient, lift on hover, press-down on click.
   ------------------------------------------------------------------------ */
.lv-btn {
    display: inline-block;
    background: linear-gradient(180deg, var(--lv-primary), var(--lv-primary-dark));
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--lv-radius-sm);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: var(--lv-font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: var(--lv-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform var(--lv-transition), box-shadow var(--lv-transition);
}
.lv-btn:hover {
    background: linear-gradient(180deg, #2f6c7e, var(--lv-primary-dark));
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--lv-shadow), inset 0 1px 0 rgba(255,255,255,0.15);
}
.lv-btn:active { transform: translateY(0); box-shadow: var(--lv-shadow-sm); }

/* Danger/critical button — used for irreversible actions like triggering
   a release. Slightly glowing to signal weight of the action. */
.lv-btn-danger {
    background: linear-gradient(180deg, #d24a3a, var(--lv-accent));
    box-shadow: var(--lv-shadow-sm), 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.lv-btn-danger:hover {
    background: linear-gradient(180deg, #d75847, var(--lv-accent-dark));
    box-shadow: var(--lv-shadow), 0 0 0 4px rgba(192, 57, 43, 0.18);
}

/* ---------------------------------------------------------------------------
   SECTION: Tier badges (for pricing.php: Free / Plus / Premium)
   ------------------------------------------------------------------------ */
.lv-badge {
    display: inline-block;
    font-family: var(--lv-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--lv-border);
    color: var(--lv-text-muted);
    background: var(--lv-bg-alt);
}
.lv-badge-plus {
    color: var(--lv-primary-dark);
    background: #e4eef0;
    border-color: #c7dde1;
}
.lv-badge-premium {
    color: #6a4d24;
    background: linear-gradient(180deg, #f3e2c4, #e8cf9f);
    border-color: var(--lv-brass);
}
.lv-badge-free {
    color: var(--lv-text-muted);
    background: #f0f0ec;
}

/* ---------------------------------------------------------------------------
   SECTION: Forms
   ------------------------------------------------------------------------ */
.lv-form input,
.lv-form textarea,
.lv-form select {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 16px;
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius-sm);
    font-size: 1rem;
    font-family: var(--lv-font-body);
    background: #fff;
    color: var(--lv-text);
    transition: border-color var(--lv-transition), box-shadow var(--lv-transition);
}
.lv-form input:focus,
.lv-form textarea:focus,
.lv-form select:focus {
    outline: none;
    border-color: var(--lv-primary);
    box-shadow: 0 0 0 3px rgba(44, 95, 111, 0.12);
}
.lv-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    color: var(--lv-dark);
}

/* ---------------------------------------------------------------------------
   SECTION: Alerts
   Left accent bar + inline glyph instead of flat color fill.
   ------------------------------------------------------------------------ */
.lv-alert {
    padding: 14px 18px;
    padding-left: 16px;
    border-radius: var(--lv-radius-sm);
    margin-bottom: 20px;
    border-left: 4px solid transparent;
    position: relative;
}
.lv-alert-error {
    background: var(--lv-error-bg);
    color: var(--lv-error);
    border: 1px solid var(--lv-error-border);
    border-left: 4px solid var(--lv-error);
}
.lv-alert-success {
    background: var(--lv-success-bg);
    color: var(--lv-success);
    border: 1px solid var(--lv-success-border);
    border-left: 4px solid var(--lv-success);
}

/* ---------------------------------------------------------------------------
   SECTION: Hero
   Serif headline over a faint radial "vault dial" motif, built in pure CSS.
   ------------------------------------------------------------------------ */
.lv-hero {
    text-align: center;
    padding: 72px 20px;
    position: relative;
}
.lv-hero::before {
    /* concentric rings behind the headline, evoking a vault dial */
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 340px; height: 340px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(184, 144, 90, 0.18);
    box-shadow: 0 0 0 28px rgba(184, 144, 90, 0.06),
                0 0 0 56px rgba(184, 144, 90, 0.03);
    z-index: 0;
}
.lv-hero h1, .lv-hero p { position: relative; z-index: 1; }
.lv-hero h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--lv-dark);
    letter-spacing: -0.01em;
    animation: lv-fade-up 600ms var(--lv-transition) both;
}
.lv-hero p {
    font-size: 1.15rem;
    color: var(--lv-text-muted);
    max-width: 600px;
    margin: 18px auto 32px;
    animation: lv-fade-up 600ms var(--lv-transition) 100ms both;
}

@keyframes lv-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who've asked the OS to reduce motion */
@media (prefers-reduced-motion: reduce) {
    .lv-hero h1, .lv-hero p { animation: none; }
    .lv-card, .lv-btn, .lv-btn-nav { transition: none; }
}

/* ---------------------------------------------------------------------------
   SECTION: Tables
   ------------------------------------------------------------------------ */
table.lv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
table.lv-table th {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 2px solid var(--lv-dark);
    font-family: var(--lv-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lv-text-muted);
}
table.lv-table td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid var(--lv-border);
}
table.lv-table tbody tr:hover { background: var(--lv-bg-alt); }

/* ---------------------------------------------------------------------------
   SECTION: Responsive
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
    .lv-header-inner { flex-direction: column; gap: 12px; align-items: flex-start; }
    .lv-nav { flex-wrap: wrap; gap: 4px 0; }
    .lv-nav a { margin-left: 0; margin-right: 18px; }
    .lv-hero { padding: 48px 16px; }
    .lv-hero::before { width: 240px; height: 240px; }
}/* ---------------------------------------------------------------------------
   SECTION: Pricing page (pricing.php)
   ------------------------------------------------------------------------ */
.lv-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    align-items: start;
    margin-top: 32px;
}

/* Plan card variants -- layered on top of the base .lv-card styles */
.lv-plan-highlight {
    border-color: var(--lv-brass);
    box-shadow: var(--lv-shadow-lg);
    transform: translateY(-6px);
}
.lv-plan-highlight::before {
    background: linear-gradient(90deg, var(--lv-brass-dark), var(--lv-brass-light));
    height: 4px;
}

/* "Most Popular" ribbon, corner-pinned */
.lv-plan-ribbon {
    position: absolute;
    top: 14px;
    right: -34px;
    transform: rotate(40deg);
    background: linear-gradient(180deg, var(--lv-brass-light), var(--lv-brass));
    color: var(--lv-dark);
    font-family: var(--lv-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 38px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 2;
}

.lv-plan-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.lv-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 8px 0 4px;
}
.lv-price-amount { font-family: var(--lv-font-display); font-size: 2.4rem; font-weight: 700; color: var(--lv-dark); }
.lv-price-period { font-family: var(--lv-font-mono); font-size: 0.8rem; color: var(--lv-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.lv-plan-tagline { color: var(--lv-text-muted); font-size: 0.9rem; margin-bottom: 20px; min-height: 1.2em; }

.lv-feature-list { list-style: none; margin: 0 0 26px; padding: 0; }
.lv-feature-list li {
    padding: 8px 0 8px 26px;
    position: relative;
    border-bottom: 1px solid var(--lv-bg-alt);
    font-size: 0.92rem;
}
.lv-feature-list li:last-child { border-bottom: none; }
.lv-feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--lv-primary);
    font-weight: 700;
}

/* CTA area pinned to the bottom of each card */
.lv-plan-cta { margin-top: auto; padding-top: 4px; }
.lv-plan-cta .lv-btn { width: 100%; text-align: center; }

.lv-buy-note {
    font-size: 0.8rem;
    color: var(--lv-text-muted);
    margin-top: 10px;
    text-align: center;
}
.lv-buy-note::before { content: "🔒 "; }

/* Box that visually contains the live PayPal button so it doesn't look
   like a bare unstyled widget floating in the card */
.lv-paypal-box {
    border: 1px dashed var(--lv-border);
    border-radius: var(--lv-radius-sm);
    padding: 10px;
    background: var(--lv-bg-alt);
}

.lv-plan-included {
    font-size: 0.85rem;
    color: var(--lv-success);
    background: var(--lv-success-bg);
    border: 1px solid var(--lv-success-border);
    border-radius: var(--lv-radius-sm);
    padding: 10px 12px;
    text-align: center;
}

.lv-plan-soon {
    font-size: 0.85rem;
    color: var(--lv-text-muted);
    text-align: center;
    font-style: italic;
}