/* Logue & Brotz campaign site. Campaign colors: purple and yellow, in
   deep/pale pairs so text always has contrast (purple carries text and
   solid grounds, yellow carries accents, rules, and highlight buttons).
   Yellow is never used for small text on a light background. The yard-sign
   watermark is original inline SVG. */

/* Palette drawn from the campaign yard sign: soft lavender-purple and a soft
   gold, in deep/pale pairs so text always keeps its contrast. The deep tones
   carry text and solid grounds; the pale lavender and pale gold are the sign's
   own block colors, used here for washes, frames, and accents. */
:root {
  --purple: #5a5480;        /* primary brand: the sign's lavender-purple */
  --purple-deep: #3c3656;   /* hero gradient base, footer, admin bar */
  --purple-ink: #2b2740;    /* text on gold */
  --yellow: #e4cd5c;        /* accent: rules, borders, highlight buttons */
  --yellow-deep: #c9b141;   /* hover state */
  --yellow-pale: #f6f0c4;   /* pale wash, portrait frames: the sign's gold block */
  --ink: #2a2734;           /* body text */
  --slate: #5d586f;         /* secondary text, meta */
  --paper: #f8f7fb;         /* page ground */
  --cream: #edecf4;         /* warm panels */
  --line: #d6d3e2;          /* hairlines, borders: the sign's lavender-gray */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
}

/* Faded yard-sign watermark tiled across the page ground. Solid panels (cards,
   the cream band, the hero) sit on top of it. */
body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='250' viewBox='0 0 300 250'%3E%3Cg transform='translate(75,66)' fill='none' stroke='%235a5480' stroke-opacity='0.07'%3E%3Crect x='0' y='0' width='150' height='120' rx='7' stroke-width='2.5'/%3E%3Cline x1='0' y1='58' x2='150' y2='58' stroke-width='1.5'/%3E%3Cline x1='14' y1='95' x2='136' y2='95' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(75,66)' fill='%235a5480' fill-opacity='0.075' font-family='Helvetica, Arial, sans-serif' font-weight='800' text-anchor='middle'%3E%3Ctext x='75' y='42' font-size='30'%3ELOGUE%3C/text%3E%3Ctext x='75' y='87' font-size='30'%3EBROTZ%3C/text%3E%3Ctext x='75' y='111' font-size='8.5' font-weight='700' letter-spacing='1.2'%3EFOR FIRE COMMISSIONER%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 250px;
}
.admin { background-image: none; }

/* Masthead: evening sky gradient with the town silhouette along the bottom.
   When the campaign uploads a "hero" photo it sits behind a purple wash. */
.hero {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='250' viewBox='0 0 300 250'%3E%3Cg transform='translate(75,66)' fill='none' stroke='%23ffffff' stroke-opacity='0.10'%3E%3Crect x='0' y='0' width='150' height='120' rx='7' stroke-width='2.5'/%3E%3Cline x1='0' y1='58' x2='150' y2='58' stroke-width='1.5'/%3E%3Cline x1='14' y1='95' x2='136' y2='95' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(75,66)' fill='%23ffffff' fill-opacity='0.11' font-family='Helvetica, Arial, sans-serif' font-weight='800' text-anchor='middle'%3E%3Ctext x='75' y='42' font-size='30'%3ELOGUE%3C/text%3E%3Ctext x='75' y='87' font-size='30'%3EBROTZ%3C/text%3E%3Ctext x='75' y='111' font-size='8.5' font-weight='700' letter-spacing='1.2'%3EFOR FIRE COMMISSIONER%3C/text%3E%3C/g%3E%3C/svg%3E") repeat top center,
    linear-gradient(180deg, var(--purple-deep) 0%, var(--purple) 60%, #6f6798 100%);
  background-size: 300px 250px, auto;
  color: #fff;
  text-align: center;
  padding: 4rem 1.25rem 3.5rem;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.hero-content { position: relative; max-width: 46rem; margin: 0 auto; }
.hero-kicker {
  display: inline-block;
  border: 1px solid var(--yellow);
  color: var(--yellow-pale);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  margin: 0 0 1.25rem;
}
.hero h1 {
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  margin: 0 0 0.75rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.hero-sub { font-size: 1.05rem; margin: 0 auto; max-width: 40rem; opacity: 0.92; }
.slogan { font-style: italic; margin: 1rem 0 0; font-size: 1.2rem; color: var(--yellow-pale); }

/* The campaign yard sign, rebuilt as the masthead: real text (so it stays the
   page's h1 and scales crisply), in the campaign's purple and gold with
   high-contrast panels. "LOGUE" reads deep purple on gold, "BROTZ" and the
   office line read light on purple. The white frame and drop shadow read as a
   physical sign standing against the evening-sky hero. */
.hero h1.yardsign {
  display: inline-block;
  width: min(90vw, 32rem);
  margin: 0 auto;
  padding: 0.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
  text-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 800;
  overflow: hidden;
}
.yardsign .ys-line,
.yardsign .ys-office {
  display: block;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: 0.01em;
}
.yardsign .ys-logue,
.yardsign .ys-brotz { font-size: clamp(2.6rem, 13vw, 5rem); padding: 0.12em 0.1em; }
.yardsign .ys-logue {
  background: var(--yellow);
  color: var(--purple-ink);
  border-radius: 5px 5px 0 0;
}
.yardsign .ys-brotz {
  background: var(--purple);
  color: #fff;
  border-bottom: 5px solid var(--yellow);
}
.yardsign .ys-office {
  background: var(--purple);
  color: var(--yellow-pale);
  font-size: clamp(0.8rem, 3.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.55em 0.4em 0.65em;
  border-radius: 0 0 5px 5px;
}

/* Featured photo of the two candidates together, shown below the masthead. */
.together-band { padding: 2.25rem 1.25rem 0; text-align: center; }
.together-photo {
  display: block;
  width: 100%;
  max-width: 62rem;
  max-height: 460px;
  object-fit: cover;
  margin: 0 auto;
  border: 4px solid var(--purple);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(43, 17, 64, 0.12);
  user-select: none;
}

.btn-row { margin-top: 1.75rem; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  background: var(--yellow);
  color: var(--purple-ink);
  padding: 0.65rem 1.5rem;
  border: 2px solid var(--yellow);
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.btn:hover { background: var(--yellow-deep); border-color: var(--yellow-deep); }
.btn-donate { background: transparent; border-color: var(--yellow); color: var(--yellow); }

.hero-date {
  position: relative;
  margin: 1.75rem 0 0.5rem;
  color: var(--yellow-pale);
  letter-spacing: 0.06em;
  font-size: 0.95rem;
}

.section { max-width: 46rem; margin: 0 auto; padding: 2.75rem 1.25rem; }
.section--wide { max-width: 74rem; }
/* Semi-transparent cream so the page's faint sign watermark shows through the
   band instead of a flat blank block. */
.section--alt { background: rgba(237, 236, 244, 0.72); max-width: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--alt .inner { max-width: 46rem; margin: 0 auto; }
.section h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.65rem;
  margin-top: 0;
  padding-bottom: 0.35rem;
  border-bottom: 3px solid var(--yellow);
  color: var(--purple-deep);
}

.divider { text-align: center; padding: 0.5rem 0; }
.divider svg { width: 120px; height: 20px; }

/* Two candidates side by side; collapses to one column under 860px. */
.candidate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.75rem;
}
@media (max-width: 860px) {
  .candidate-grid { grid-template-columns: minmax(0, 1fr); }
}

.candidate {
  padding: 1.75rem;
  background: #fff;
  border: 3px solid var(--purple);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(43, 17, 64, 0.08);
}
/* Portrait sits above the name inside each card. */
.candidate .portrait { margin: 0 auto 1.25rem; }
.candidate h3, .candidate .role { text-align: center; }
.candidate h3 { margin: 0 0 0.2rem; font-size: 1.35rem; }
.role { color: var(--purple); font-weight: bold; margin: 0 0 0.75rem; letter-spacing: 0.02em; }
/* The portrait is a fixed square frame; the photo fills it and is clipped, so
   both candidate cards stay the same size regardless of how each photo is
   framed. */
.portrait {
  width: 224px;
  height: 224px;
  max-width: 100%;
  border-radius: 6px;
  border: 3px solid var(--yellow-pale);
  outline: 1px solid var(--line);
  overflow: hidden;
  flex-shrink: 0;
}
.portrait--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Enlarge a subject that sits smaller in frame so both faces read at a similar
   size. Origin biased upward, where a head-and-shoulders face sits. */
.portrait--zoom img {
  transform: scale(1.3);
  transform-origin: 50% 22%;
}
/* Photo protection, deterrent layer: the images also carry draggable="false".
   A screenshot still works; this only removes the one-gesture copy. */
.portrait--photo img,
.hero-bg {
  user-select: none;
}

.portrait--placeholder {
  background: var(--cream);
}
.portrait--placeholder svg { display: block; width: 100%; height: 100%; }

/* Ghosted bio lines: show the shape of the coming text without inventing
   any words. */
.ghost-lines { max-width: 30rem; }
.ghost-lines span {
  display: block;
  height: 0.85rem;
  margin: 0.55rem 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cream), #e7ddf0);
}
.ghost-lines .short { width: 55%; }

.issue {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  border-radius: 6px;
}
.issue h3 { margin: 0 0 0.3rem; }
.issue p { margin: 0; color: var(--slate); }

.pending { color: var(--slate); font-style: italic; }

/* Bio structure: subheadings and record bullets */
.bio-head {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.05rem;
  color: var(--purple);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bio-list { margin: 0.75rem 0; padding-left: 1.1rem; }
.bio-list li { margin: 0.55rem 0; }
.bio-list li::marker { color: var(--yellow); }

/* Per-candidate support button */
.candidate-support {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.btn-support {
  display: inline-block;
  background: var(--purple);
  border: 2px solid var(--purple);
  color: #fff;
  padding: 0.55rem 1.3rem;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
}
.btn-support:hover { background: var(--purple-deep); border-color: var(--purple-deep); }
.support-note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--slate);
}

.footer {
  background: var(--purple-deep);
  color: #e0d6ec;
  text-align: center;
  padding: 1.75rem 1.25rem 2.5rem;
  font-size: 0.9rem;
}
.paidforby { font-weight: bold; color: #fff; }

/* Footer social icons: shown only for the profiles the campaign has set. */
.social-row { display: flex; justify-content: center; gap: 1rem; margin: 0 0 1.25rem; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--yellow);
  color: var(--yellow-pale);
}
.social-link:hover { background: var(--yellow); color: var(--purple-ink); }
.social-link svg { width: 20px; height: 20px; display: block; }

/* Admin dashboard */
.admin { background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.admin-bar {
  background: var(--purple-deep);
  color: #fff;
  padding: 0.75rem 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
}
.admin-bar a { color: #fff; }
.admin .btn { box-shadow: none; }
.admin h2 { display: block; border-bottom: 3px solid var(--yellow); margin-top: 2.25rem; }
.field { display: block; margin: 1rem 0; }
.field span { display: block; font-weight: bold; margin-bottom: 0.3rem; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
}
.field small { color: var(--slate); }
.notice {
  background: #e6f2e6;
  border: 1px solid #b7d8b7;
  padding: 0.6rem 1rem;
  border-radius: 4px;
}
.warn {
  background: var(--yellow-pale);
  border: 1px solid var(--yellow);
  border-left: 5px solid var(--yellow);
  padding: 0.75rem 1rem;
  border-radius: 4px;
}