/* Base styles carried over from the original page, plus the rules that the
   artifact could not express: real hover states, a mobile layout, and a
   keyboard skip link. Component styling stays inline in index.html. */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #ffffff;
  color: #22323a;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a { color: #3f6d7e; }
a:hover { color: #f7922d; }

input:focus-visible,
button:focus-visible,
a:focus-visible { outline: 3px solid #f7922d; outline-offset: 2px; }

::selection { background: #fde3c8; }

/* The orange "Sign the petition" / "Take action" buttons. The artifact marked
   these with a style-hover attribute that nothing implemented. */
.cta { transition: background-color 150ms ease; }
.cta:hover,
.cta:focus-visible { background: #e07f1c !important; color: #fff; }

/* The article and the petition embed sit side by side on wide screens. The
   original grid kept both columns at every width, which squeezed the article
   to a sliver on phones, so it collapses to one column here. */
@media (max-width: 899px) {
  .content-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .content-grid > aside {
    justify-self: stretch !important;
    max-width: none !important;
  }
}

/* Placeholder height for the petition embed. The widget measures itself and
   posts the result, which petition-widget.js applies as an inline height —
   that wins over these rules. Until the first message lands, and permanently
   if scripting is off, this is the only thing holding the frame open, and the
   frame cannot scroll: too short and the Sign the Petition button is simply
   unreachable. One fixed value cannot do it, because the embed is a column of
   wrapping text that grows taller as it grows narrower — 1716px tall in the
   460px desktop column, but 2280px at 280px wide.

   So each step below carries the tallest the embed renders anywhere in its
   range, measured against the live widget, plus a little slack. The widget
   reports the frame's own height back when its content is shorter than the
   frame, so slack stays on the page as background rather than being tidied
   away — hence the steps rather than one generous value. Re-measure these if
   the campaign copy changes. */
#civiclick-widget { height: 1750px; }

@media (max-width: 519px) { #civiclick-widget { height: 1800px; } }
@media (max-width: 479px) { #civiclick-widget { height: 1880px; } }
@media (max-width: 439px) { #civiclick-widget { height: 2020px; } }
@media (max-width: 419px) { #civiclick-widget { height: 2110px; } }
@media (max-width: 359px) { #civiclick-widget { height: 2200px; } }
@media (max-width: 339px) { #civiclick-widget { height: 2310px; } }
@media (max-width: 319px) { #civiclick-widget { height: 2500px; } }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #3f6d7e;
  color: #fff;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta { transition: none; }
}