/* ============================================================
   Ceric Campaign Signature Pages v3 - Self-contained styles
   All campaign theming is inside .csp-page-wrap
   No theme fighting needed.
   ============================================================ */

/* ---- Full-bleed page wrapper ---- */
.csp-page-wrap {
    background:  #0d1b2a;
    color:       #e8e0d0;
    font-family: Georgia, 'Times New Roman', serif;
    width:       100vw;
    position:    relative;
    left:        50%;
    right:       50%;
    margin-left: -50vw !important;
    margin-right:-50vw !important;
    box-sizing:  border-box;
}

/* ---- Hero header ---- */
.csp-hero {
    background:    #0d1b2a;
    border-bottom: 1px solid rgba(200,151,43,0.3);
    padding:       56px 24px 48px;
    text-align:    center;
}
.csp-hero-inner {
    max-width:    760px;
    margin:       0 auto;
}
.csp-star-row {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color:          #c8972b;
    margin-bottom:  18px;
}
.csp-topic-badge {
    display:        inline-block;
    background:     #c8972b;
    color:          #0d1b2a;
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      10px;
    font-weight:    900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding:        5px 18px;
    border-radius:  2px;
    margin-bottom:  20px;
}
.csp-petition-title {
    font-family:    'Oswald', Arial, Helvetica, sans-serif;
    font-size:      clamp(26px, 4vw, 42px);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color:          #fff;
    line-height:    1.15;
    margin:         0 0 28px;
}
.csp-sig-counter {
    display:         inline-flex;
    flex-direction:  column;
    align-items:     center;
    gap:             4px;
    border:          1px solid rgba(200,151,43,0.35);
    padding:         14px 44px;
    background:      rgba(200,151,43,0.06);
    border-radius:   3px;
}
.csp-count-num {
    font-family: Arial, Helvetica, sans-serif;
    font-size:   32px;
    font-weight: 900;
    color:       #c8972b;
    line-height: 1;
}
.csp-count-lbl {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.55);
}

/* ---- Petition body (description content) ---- */
.csp-petition-body {
    background:    #0d1b2a;
    border-bottom: 1px solid rgba(200,151,43,0.2);
    padding:       48px 24px;
}
.csp-petition-body-inner {
    max-width:    760px;
    margin:       0 auto;
    font-size:    16px;
    line-height:  1.80;
    color:        #e8e0d0;
}

/* Headings inside description */
.csp-petition-body-inner h1,
.csp-petition-body-inner h2,
.csp-petition-body-inner h3,
.csp-petition-body-inner h4 {
    font-family:    'Oswald', Arial, Helvetica, sans-serif;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin:         32px 0 12px;
    line-height:    1.2;
}
.csp-petition-body-inner h1 { font-size:32px; color:#fff; border-bottom:2px solid rgba(200,151,43,0.4); padding-bottom:10px; }
.csp-petition-body-inner h2 { font-size:24px; color:#c8972b; }
.csp-petition-body-inner h3 { font-size:19px; color:#c8972b; }
.csp-petition-body-inner h4 { font-size:14px; color:rgba(200,151,43,0.80); font-family:Arial,sans-serif; letter-spacing:0.10em; }

.csp-petition-body-inner p  { margin-bottom:16px; }
.csp-petition-body-inner strong,
.csp-petition-body-inner b  { color:#fff; font-weight:700; }
.csp-petition-body-inner em,
.csp-petition-body-inner i  { color:#c8972b; font-style:italic; }
.csp-petition-body-inner a  { color:#c8972b; text-decoration:underline; }
.csp-petition-body-inner a:hover { color:#e0b050; }
.csp-petition-body-inner hr {
    border:     none;
    border-top: 2px solid rgba(200,151,43,0.4);
    margin:     28px 0;
}
.csp-petition-body-inner blockquote {
    border-left:  4px solid #c8972b;
    background:   rgba(200,151,43,0.07);
    padding:      14px 20px;
    margin:       20px 0;
    font-style:   italic;
    color:        rgba(232,224,208,0.90);
    border-radius:0 3px 3px 0;
}
.csp-petition-body-inner ul,
.csp-petition-body-inner ol { padding-left:24px; margin-bottom:16px; }
.csp-petition-body-inner li { margin-bottom:6px; }

/* Court-style left-aligned block helper */
.csp-petition-body-inner .court-block {
    font-family:  'Times New Roman', Georgia, serif;
    font-size:    15px;
    line-height:  1.85;
    border-left:  4px solid rgba(200,151,43,0.4);
    padding:      16px 20px;
    margin:       20px 0;
    background:   rgba(255,255,255,0.03);
}

/* ---- Signature form section ---- */
.csp-form-section {
    background: #111e2d;
    padding:    52px 24px 60px;
    border-top: 1px solid rgba(200,151,43,0.2);
}
.csp-form-inner {
    max-width:  680px;
    margin:     0 auto;
}

.csp-form-hd-row {
    display:         flex;
    align-items:     center;
    gap:             14px;
    margin-bottom:   28px;
    text-align:      center;
}
.csp-form-hd-line {
    flex:       1;
    height:     1px;
    background: rgba(200,151,43,0.40);
}
.csp-form-hd-text {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          #c8972b;
    white-space:    nowrap;
}
.csp-form-note {
    font-family:   Arial, Helvetica, sans-serif;
    font-size:     13px;
    color:         rgba(232,224,208,0.55);
    margin-bottom: 28px;
    text-align:    center;
}
.csp-req { color:#c8972b; font-weight:700; }
.csp-opt { font-size:11px; color:rgba(232,224,208,0.45); font-weight:400; font-style:normal; }

/* Field layouts */
.csp-field { margin-bottom:18px; }
.csp-row   { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.csp-row-addr { grid-template-columns:1fr 70px 90px; }
.csp-col {}

/* Labels */
.csp-sig-form label {
    display:        block;
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          #c8972b;
    margin-bottom:  7px;
}

/* Inputs */
.csp-sig-form input[type="text"],
.csp-sig-form input[type="email"],
.csp-sig-form input[type="tel"],
.csp-sig-form textarea {
    width:        100%;
    padding:      11px 15px;
    background:   rgba(255,255,255,0.06);
    border:       1.5px solid rgba(255,255,255,0.12);
    border-radius:3px;
    color:        #fff;
    font-family:  Georgia, serif;
    font-size:    15px;
    box-sizing:   border-box;
    transition:   border-color 0.2s, background 0.2s;
}
.csp-sig-form input::placeholder,
.csp-sig-form textarea::placeholder { color:rgba(255,255,255,0.25); }
.csp-sig-form input:focus,
.csp-sig-form textarea:focus {
    outline:      none;
    border-color: #c8972b;
    background:   rgba(200,151,43,0.07);
    box-shadow:   0 0 0 3px rgba(200,151,43,0.10);
}
.csp-sig-form textarea { resize:vertical; min-height:100px; }

/* Photo */
.csp-photo-wrap  { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.csp-sig-form input[type="file"].csp-photo-input { display:none; }
.csp-photo-btn   { display:inline-block; padding:9px 18px; background:rgba(255,255,255,0.08); border:1.5px solid rgba(255,255,255,0.18); border-radius:3px; cursor:pointer; font-family:Arial,sans-serif; font-size:13px; font-weight:700; color:rgba(232,224,208,0.80); transition:background 0.2s; }
.csp-photo-btn:hover { background:rgba(200,151,43,0.15); border-color:#c8972b; color:#fff; }
.csp-photo-name  { font-size:12px; color:rgba(232,224,208,0.45); font-family:Arial,sans-serif; }
.csp-photo-preview { display:flex; align-items:center; gap:10px; }
.csp-photo-preview img { width:56px; height:56px; object-fit:cover; border-radius:3px; border:1px solid rgba(200,151,43,0.4); }
.csp-photo-remove { font-size:11px; color:#c0392b; background:none; border:1px solid #c0392b; padding:3px 8px; border-radius:3px; cursor:pointer; }

/* Privacy */
.csp-privacy {
    font-family:  Arial, Helvetica, sans-serif;
    font-size:    12px;
    color:        rgba(232,224,208,0.45);
    border-left:  2px solid rgba(200,151,43,0.4);
    padding:      9px 14px;
    margin:       22px 0 26px;
    background:   rgba(200,151,43,0.04);
}

/* Submit */
.csp-submit-row { text-align:center; }
.csp-submit-btn {
    background:     #c8972b;
    color:          #0d1b2a;
    border:         none;
    padding:        15px 54px;
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      14px;
    font-weight:    900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius:  3px;
    cursor:         pointer;
    transition:     background 0.2s, transform 0.1s;
}
.csp-submit-btn:hover   { background:#e0b050; }
.csp-submit-btn:active  { transform:scale(0.98); }
.csp-submit-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* Response */
.csp-response {
    margin-top:   20px;
    padding:      14px 18px;
    border-radius:3px;
    font-family:  Arial, Helvetica, sans-serif;
    font-size:    15px;
    font-weight:  700;
    text-align:   center;
}
.csp-response.csp-ok  { background:rgba(46,125,50,0.15); border:1.5px solid #4caf50; color:#81c784; }
.csp-response.csp-err { background:rgba(192,57,43,0.15);  border:1.5px solid #c0392b; color:#ef9a9a; }

/* Page footer */
.csp-page-footer {
    background:     #080f18;
    border-top:     1px solid rgba(200,151,43,0.2);
    padding:        24px;
    text-align:     center;
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          rgba(232,224,208,0.40);
}

/* ---- Listing page ---- */
.csp-listing-page { background:#0d1b2a; color:#e8e0d0; font-family:Georgia,serif; width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw !important; margin-right:-50vw !important; box-sizing:border-box; }
.csp-listing-hero { padding:56px 24px 44px; text-align:center; border-bottom:1px solid rgba(200,151,43,0.25); }
.csp-listing-title { font-family:'Oswald',Arial,sans-serif; font-size:clamp(24px,3.5vw,40px); font-weight:700; text-transform:uppercase; color:#fff; margin:0 0 14px; letter-spacing:0.03em; }
.csp-listing-intro { font-size:16px; line-height:1.6; color:rgba(232,224,208,0.75); max-width:560px; margin:0 auto; }
.csp-listing-grid { max-width:960px; margin:0 auto; padding:40px 24px 56px; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.csp-listing-empty { text-align:center; padding:48px; color:rgba(232,224,208,0.45); font-family:Arial,sans-serif; }
.csp-list-card { display:block; background:#111e2d; border:1px solid rgba(200,151,43,0.25); border-radius:3px; padding:24px 26px; text-decoration:none; transition:border-color 0.2s,background 0.2s; }
.csp-list-card:hover { border-color:#c8972b; background:rgba(200,151,43,0.07); text-decoration:none; }
.csp-list-card-topic { font-family:Arial,sans-serif; font-size:10px; font-weight:900; letter-spacing:0.14em; text-transform:uppercase; color:#c8972b; margin-bottom:8px; }
.csp-list-card-title { font-family:'Oswald',Arial,sans-serif; font-size:18px; font-weight:700; text-transform:uppercase; color:#fff; margin:0 0 10px; line-height:1.2; }
.csp-list-card-desc  { font-size:14px; line-height:1.55; color:rgba(232,224,208,0.65); margin-bottom:16px; }
.csp-list-card-foot  { display:flex; justify-content:space-between; align-items:center; }
.csp-list-card-count { font-family:Arial,sans-serif; font-size:12px; font-weight:700; color:#c8972b; }
.csp-list-card-cta   { font-family:Arial,sans-serif; font-size:11px; font-weight:900; letter-spacing:0.10em; text-transform:uppercase; color:#c8972b; border-bottom:1px solid rgba(200,151,43,0.4); padding-bottom:1px; }

/* ---- Responsive ---- */
@media (max-width:600px) {
    .csp-hero     { padding:36px 20px 32px; }
    .csp-petition-body { padding:32px 20px; }
    .csp-form-section  { padding:36px 20px 44px; }
    .csp-row      { grid-template-columns:1fr; }
    .csp-row-addr { grid-template-columns:1fr; }
    .csp-submit-btn { width:100%; padding:15px 20px; }
}