/* CWA Local 3106 – Sign-Up Page Styles (Scoped to itemid-1142) */

body.itemid-1142 {
  --purple:#5a2a82;
  --gold:#d4af37;
  --ink:#1a1a1a;
  --muted:#6b7280;
  --bg:#f8f7fb;
  --card:#ffffff;
  --ring:rgba(90,42,130,.25);
}

body.itemid-1142 *{box-sizing:border-box}
body.itemid-1142 html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
body.itemid-1142 a{color:var(--purple);text-decoration:none}
body.itemid-1142 a:focus{outline:3px solid var(--ring);outline-offset:2px}

body.itemid-1142 .wrap{max-width:1100px;margin:0 auto;padding:clamp(16px,3vw,32px)}
body.itemid-1142 header{
  background: radial-gradient(1000px 600px at 10% 10%,rgba(212,175,55,.25),transparent),
              radial-gradient(800px 500px at 90% 10%,rgba(90,42,130,.20),transparent),
              linear-gradient(135deg,var(--purple),#3e1d5a);
  color:#fff;
  position:relative;
  overflow:hidden;
}
body.itemid-1142 .brand{display:flex;align-items:center;gap:18px}
body.itemid-1142 .brand img{height:70px;width:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.25))}
body.itemid-1142 .brand h1{font-size:clamp(22px,3.4vw,36px);margin:0;font-weight:800;letter-spacing:.3px}
body.itemid-1142 .tag{display:inline-block;margin-top:6px;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:rgba(255,255,255,.15);backdrop-filter:blur(2px)}

body.itemid-1142 .hero{padding:22px 0 26px}
body.itemid-1142 .hero h2{font-size:clamp(22px,3vw,28px);margin:6px 0 8px}
body.itemid-1142 .hero p{margin:0;color:#f5eefc;max-width:75ch;line-height:1.45}

body.itemid-1142 .grid{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
body.itemid-1142 .col-12{grid-column:span 12}
body.itemid-1142 .col-6{grid-column:span 6}
@media (max-width:900px){body.itemid-1142 .col-6{grid-column:span 12}}

body.itemid-1142 .notice{background:#fff8e6;border:1px solid #f3e1a3;color:#6a5300;padding:14px;border-radius:12px}

body.itemid-1142 .card{background:var(--card);border:1px solid #ece7f3;border-radius:16px;padding:18px;box-shadow:0 6px 22px rgba(27,5,41,.06)}
body.itemid-1142 .card h3{margin:0 0 6px;font-size:clamp(18px,2.2vw,22px)}
body.itemid-1142 .card p{margin:0 0 12px;color:var(--muted);line-height:1.5}
body.itemid-1142 .badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--purple);background:#f3ecfa;border:1px dashed #e1d3f0;border-radius:999px;padding:6px 10px;margin-bottom:8px}

body.itemid-1142 .benefits{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
body.itemid-1142 .benefits li{display:flex;gap:10px;align-items:flex-start;background:#faf9fd;border:1px solid #eee6f8;border-radius:12px;padding:8px 10px}
body.itemid-1142 .benefits svg{flex:0 0 18px;margin-top:3px}

body.itemid-1142 .cta{display:inline-flex;align-items:center;gap:10px;border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;text-decoration:none}
body.itemid-1142 .cta.primary{background:var(--gold);color:#1e1600}
body.itemid-1142 .cta.secondary{background:#efe7fa;color:var(--purple)}
body.itemid-1142 .cta:focus{outline:3px solid var(--ring);outline-offset:2px}

body.itemid-1142 .section-title{font-size:clamp(20px,2.6vw,26px);margin:10px 0 8px}
body.itemid-1142 .footer{border-top:1px solid #ece7f3;margin-top:28px;padding-top:20px;color:var(--muted);font-size:14px}

body.itemid-1142 .faq summary{cursor:pointer;font-weight:700}
body.itemid-1142 .faq details{background:#ffffff;border:1px solid #ece7f3;border-radius:12px;padding:12px}

body.itemid-1142 .two-col{display:grid;gap:18px;grid-template-columns:2fr 1fr}
@media (max-width:980px){body.itemid-1142 .two-col{grid-template-columns:1fr}}

body.itemid-1142 .callout{background:linear-gradient(180deg,#fff,#faf7ff);border:1px solid #efe7fa;border-radius:16px;padding:16px}

/* ensures full width */
body.itemid-1142 .container,
body.itemid-1142 .content {
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Fix contract grid layout: use flexbox to avoid vertical gaps */
body.itemid-1142 .grid[role="list"] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
body.itemid-1142 .grid[role="list"] > .card {
    flex: 1 1 calc(50% - 18px);
}
@media (max-width: 900px) {
    body.itemid-1142 .grid[role="list"] > .card {
        flex-basis: 100%;
    }
}