/* WMBO skin for phpList public pages (lists.wmbrewoff.com).
   Loaded from the "Header of public pages" setting. Matches wmbrewoff.com. */
@font-face { font-family: "Archivo Black"; src: url("fonts/ArchivoBlack-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "League Spartan"; src: url("fonts/LeagueSpartan-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "League Spartan"; src: url("fonts/LeagueSpartan-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root { --accent: #7ed957; --on-accent: #000; --accent-ink: #4c8234; --ink: #111; --muted: #555; --line: #d9d9d9; --paper: #f4f2ee; }

html, body { background: var(--paper) !important; }
body, body.fixed { margin: 0 !important; padding: 0 !important; color: var(--ink); font-family: "League Spartan", system-ui, sans-serif; font-size: 18px; line-height: 1.5; visibility: visible !important; }
body.invisible { visibility: visible !important; }
a { color: var(--accent-ink); font-weight: 700; }

/* Hide the stock phpList header; ours replaces it */
#header, #footer { display: none !important; }

.wmbo-bar { background: #000; color: #fff; border-bottom: 2px solid #fff; }
.wmbo-bar-in { max-width: 760px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 14px; }
.wmbo-bar img { width: 56px; height: auto; display: block; }
.wmbo-bar a { color: #fff; text-decoration: none; font-family: "Archivo Black", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 20px; line-height: 1; letter-spacing: -0.01em; }
.wmbo-hero { background: #000; color: #fff; }
.wmbo-hero-in { max-width: 760px; margin: 0 auto; padding: 40px 20px 44px; }
.wmbo-eyebrow { margin: 0 0 10px; font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.wmbo-hero h1 { margin: 0 0 12px; font-family: "Archivo Black", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 7vw, 56px); line-height: 0.95; letter-spacing: -0.02em; color: #fff; }
.wmbo-hero p { margin: 0; max-width: 46ch; color: #e6e6e6; }

#container, #wrapper, #mainContent, .panel { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }
#wrapper.container { max-width: 760px !important; margin: 0 auto !important; padding: 0 20px !important; }
.panel > br { display: none; }
.content.well, .content { background: #fff !important; border: 0 !important; border-top: 8px solid #000 !important; border-radius: 0 !important; box-shadow: none !important; margin: 32px 0 !important; padding: 28px 24px 24px !important; }
/* Card headings: bold sentence case (phpList puts whole sentences in h3 on the confirm/unsubscribe pages) */
.content h3, .content h2 { margin: 0 0 16px; font-family: "League Spartan", sans-serif; font-weight: 700; text-transform: none; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: #000; }
/* List names on the confirm / preferences pages */
.content ul { padding: 0; margin: 0 0 12px; }
.content li.list { list-style: none; margin: 0 0 12px; padding: 0 0 0 30px; position: relative; }
.content li.list::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: var(--accent); border: 2px solid #000; }
.content li.list b { display: block; background: none !important; border: 0 !important; padding: 0 !important; font-size: 18px; color: #000; }
.content li.list .listdescription { display: block; margin: 2px 0 0 !important; padding: 0 !important; color: var(--muted); font-size: 16px; }
.content p { margin: 0 0 14px; }

/* Form */
.content form table, .content form tbody, .content form tr, .content form td { display: block; width: 100%; border: 0; padding: 0; }
.content form tr { margin-bottom: 16px; }
.content table, .content tbody, .content tr, .content td, .content .well { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.content table { margin: 0 0 8px !important; padding: 0 !important; }
.content td { padding: 0 !important; }
.content .required { display: inline; }
.error .required { display: none; }
.content label, .attributename { font-weight: 700; font-size: 16px; color: #000; }
.required label { color: #000; }
.error .required { color: var(--muted); font-size: 15px; font-weight: 400; }
.error { color: #b00020; }
.content input[type=text], .content input[type=email], .content input[type=password], .content select, .content textarea { box-sizing: border-box; width: 100%; max-width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; font-size: 18px; color: #000; background: #fff; border: 2px solid #000; border-radius: 0; box-shadow: none; }
.content input:focus, .content select:focus, .content textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; }
.content input[type=checkbox] { width: 20px; height: 20px; accent-color: #000; vertical-align: -4px; margin-right: 8px; }
.content input[type=submit], .content button, .content .button { display: inline-block; margin: 8px 12px 8px 0; padding: 14px 22px; font-family: "League Spartan", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border: 2px solid #000; border-radius: 0; cursor: pointer; }
.content input[type=submit]:hover, .content button:hover { background: #000; color: #fff; }
.content form a { color: var(--muted); font-weight: 400; font-size: 15px; }
.listname, .listdescription { font-size: 17px; }
ul.list { list-style: none; padding: 0; margin: 0 0 12px; }

/* Captcha image */
.content img[src*="captcha"], .content img[src*="Captcha"] { display: block; margin: 8px 0; border: 2px solid #000; }

/* phpList credit: keep it, quietly */
.poweredby { margin: 24px 0 0 !important; opacity: 0.55; }
.poweredby img { height: 22px; width: auto; }

.wmbo-foot { max-width: 760px; margin: 0 auto; padding: 0 20px 40px; color: var(--muted); font-size: 15px; }
.wmbo-foot a { color: var(--ink); }

@media (max-width: 480px) {
  .content.well, .content { padding: 22px 16px 18px !important; }
  #wrapper.container { padding: 0 12px !important; }
}
