@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
  margin: 0;  background-color: #212F63;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:1em;
}

.header {background:#212F63;}
.content {margin: 0 auto; width:90%;}
.banner {margin: 0 auto;width:90%;}
.nav {margin: 0 auto; width:90%;}
.footer {background:#212F63; color:white;margin: 0 auto;}

p, li {font-size:1em;}
h1,h2, {font-size:1.5em;margin-left:5%;margin-right:5%;}
h3,h4 {font-size:1.2em;margin-left:5%;margin-right:5%;}
a {color:black;text-decoration:underline;}

.footer p {margin: 0 auto;width:90%;color:#cccccc;font-size:0.7em;padding:20px;}
.footer a {color:#cccccc;text-decoration:underline;}

.left {float:left;width:46%;margin-left:2%;margin-top:2%;margin-bottom:2%;background:#ffffff;border:5px solid #FAA31B;border-radius: 20px;}
.right {float:right;width:46%;margin-right:2%;margin-top:2%;margin-bottom:2%;background:#c9ceef;border:5px solid #9C2328;border-radius: 20px;}
.singleleft {float:left;width:70%;margin:1%;background:#ffffff;border:5px solid #FAA31B;border-radius: 20px;}
.singleright {float:left;width:24%;margin:1%;background:#c9ceef;border:5px solid #9C2328;border-radius: 20px;}
.full {margin: 0 auto;width:96%;background:#ffffff;border:5px solid #FAA31B;border-radius: 20px;float:none;clear:both;}

@media (max-width: 1300px) {
.left {margin:2%;width:96%;background:#ffffff;border:5px solid #FAA31B;border-radius: 20px;float:none;clear:both;}
.right {margin:2%;width:96%;background:#c9ceef;border:5px solid #9C2328;border-radius: 20px;float:none;clear:both;}
.singleleft {margin:2%;width:96%;background:#ffffff;border:5px solid #FAA31B;border-radius: 20px;float:none;clear:both;}
.singleright {margin:2%;width:96%;background:#c9ceef;border:5px solid #9C2328;border-radius: 20px;float:none;clear:both;}
.content, .banner, .nav {margin: 0 auto; width:96%;}
}

.left p, .right p, .full p, .singleleft p, .singleright p {margin-left:5%;margin-right:5%;}
.left h2, .right h2, .singleleft h2, .singleright h2 {margin-left:5%;margin-right:5%;color:#212F63;}

.full h2 {text-align:center;padding:10px;color:#212F63;}
.full img {float:left;width:21%;margin:2%;}

.social {float:right;width:25%;}
.social img {float:right;width:12.5%;margin-bottom:10px;}
.footsoc img {width:6.25%;}

.footsoc {text-align:left;margin-left:13.5%;width:45%;}

.button {
  background-color: #212F63;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.9em;
  font-weight:bold;
  border-radius: 20px;
}

.hotbutton {
  background-color: #9C2328;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.9em;
  font-weight:bold;
  border-radius: 20px;
}

.button:hover, .footer .button:hover {
  background-color: #9C2328;
  color: white;
  text-shadow: 2px 8px 8px #000000;
  transform: translateY(-3px);
  border-radius: 20px;
}

.button2 {
  background-color: #9C2328;
  border: none;
  color: white;
  float:right;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.8em;
  border-radius: 20px;
}

.button3 {
  background-color: #FAA31B;
  border: none;
  color: black;
  float:right;
  padding: 8px 16px;margin-bottom:10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.8em;
  border-radius: 20px;
}

.button2:hover, .footer .button2:hover {
  background-color: #FAA31B;
  color: white;
}

.button3:hover, .footer .button3:hover {
  background-color: #9C2328;
  color: white;
}

.footer .button {
  background-color: #212F63;
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.7em;
  font-weight:normal;
}

.footer .button2 {
  background-color: #9C2328;
  border: none;
  color: white;
  float:right;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.5em;
}

.footer .button3 {
  background-color: #FAA31B;
  border: none;
  color: black;
  float:right;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.5em;
  border-radius: 20px;
}

#popupAd {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;border-radius:20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000; /* Ensure it's above other content */
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    height: 80%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999; /* Below the popup but above other content */
    display: none;
}

table {border-collapse: collapse;text-align: left; font-size: 1em} td{border:0px; padding: 10px; vertical-align: top;}
th {border:0px; padding: 10px; vertical-align: top;}
tr {border-bottom:1px solid gray;}
.note-text {word-wrap: break-word; word-break: break-word; font-size: 1em; padding: 10px 0px;}
.note-commenter-name, .report-note-header {top: 15px;left: 10px; color: #5a6674; z-index: 999; font-size: 0.9em; padding: 0.5em 0em 0em 0em;}
td:nth-child(1) a { display: inline-block;}
td:nth-child(6){min-width: 150px; }
td:nth-child(6){min-width: 50px; }
.billcard-bill-tag, .billcard-client-by-client-tag {padding:5px;}
.bill-action-date {padding-top: 5px; padding-bottom: 5px;}
.bill-action-list {margin-top: 5px; margin-bottom: 0px; padding: 0px;}
.billcard-companion-bills{margin-top: 15px; font-size: 0.9em;}
.bill-list-category-section{margin-bottom: 20px;}
.bill-list-category-title{padding-bottom: 5px; color: #27649c;}
.billcard-bill-title{margin-bottom: 10px;font-size: 1.4em;font-weight:bold;}
.billcard-bill-summary{margin-top: 15px; font-size: 0.6em; color: #667093}
.hearing-title{font-weight: bold}
.titles {background:#212F63;color:#ffffff;font-size:1.4em;font-weight:bold;}
.support {background:#018529;color:#ffffff;}
.support a {color:#ffffff;}
.support span, .oppose span {font-size:1.4em;font-weight:bold;}
.oppose {background:#9c2328;color:#ffffff;}
.oppose a {color:#ffffff;}
.hdist{margin: 20px;}

/* ===== responsive + mobile nav (added 2026-10-25) ===== */
.nav-toggle { display: none; }

@media (max-width: 1024px) {
  .content, .banner, .nav { width: 92%; }
  .singleleft, .singleright { width: 96%; float: none; clear: both; margin: 2%; }
}

@media (max-width: 768px) {
  .content, .banner, .nav { width: 96%; }
  .nav-toggle {
    display: flex; align-items: center; gap: 8px;
    width: 100%; box-sizing: border-box; margin: 0 0 8px 0;
    padding: 12px 16px; background: #212F63; color: #ffffff;
    border: 2px solid #FAA31B; border-radius: 12px;
    font-family: inherit; font-size: 1em; font-weight: 700; text-align: left;
    cursor: pointer;
  }
  .nav-links { display: none; }
  .nav-links.open { display: block; }
  .nav-links .button {
    display: block; width: 100%; box-sizing: border-box; margin: 6px 0;
    text-align: center;
  }
  .banner > a > img { width: 38% !important; }
  .banner > a { display: block; text-align: center; }
  .banner > a > img { display: inline-block; margin: 0 auto; }
  .social { float: none; width: 100%; text-align: center; }
  .social img { float: none; width: 40px; height: auto; margin: 6px 8px; }
  /* CTA buttons under the social icons: they float right on desktop; on narrow screens
     stack them centred and a size down instead of hugging the right edge. */
  .social .button2, .social .button3 {
    float: none; display: table; margin: 6px auto; padding: 7px 14px;
    font-size: 0.72em; max-width: 90%;
  }
  h1, h2 { font-size: 1.3em; }
  .full img { width: 46%; }
  /* homepage bottom box: the GabeWatch column is inline 21% and would otherwise stay
     squeezed beside full-width images on narrow screens */
  .gabewatch-col { float: none !important; width: auto !important; margin: 0 2% !important; }
  .footer p { width: 96%; }
  iframe { max-width: 100%; }
}

@media (max-width: 480px) {
  body { font-size: 0.95em; }
  .content, .banner, .nav { width: 98%; }
  .banner > a > img { width: 56% !important; }
  .full img { float: none; width: 90%; margin: 4% 5%; }
  .button, .hotbutton, .button2, .button3 { padding: 12px 16px; font-size: 0.85em; }
  .social img { width: 36px; }
  .left, .right, .singleleft, .singleright { border-width: 4px; }
}

/* ===== body-wrapper gutters (added 2026-10-25) =====
   The single/left/right templates wrap article bodies in a <div>, so bare text (no <p>)
   lost the 5% gutter the old <p> wrapper provided. Unstyled direct-child wrappers get the
   same indent; headings inside them use the wrapper's gutter instead of doubling it. */
.left > div:not([style]),
.right > div:not([style]),
.singleleft > div:not([style]),
.singleright > div:not([style]),
.full > div:not([style]) {
  margin-left: 5%;
  margin-right: 5%;
}
.left > div:not([style]) > h1, .left > div:not([style]) > h2, .left > div:not([style]) > h3,
.right > div:not([style]) > h1, .right > div:not([style]) > h2, .right > div:not([style]) > h3,
.singleleft > div:not([style]) > h1, .singleleft > div:not([style]) > h2,
.singleleft > div:not([style]) > h3,
.singleright > div:not([style]) > h1, .singleright > div:not([style]) > h2,
.singleright > div:not([style]) > h3,
.full > div:not([style]) > h1, .full > div:not([style]) > h2, .full > div:not([style]) > h3 {
  margin-left: 0;
  margin-right: 0;
}
/* the wrapper already supplies the gutter: strip the inner block margins that would double it */
.left > div:not([style]) > p, .left > div:not([style]) > ul, .left > div:not([style]) > ol,
.right > div:not([style]) > p, .right > div:not([style]) > ul, .right > div:not([style]) > ol,
.singleleft > div:not([style]) > p, .singleleft > div:not([style]) > ul,
.singleleft > div:not([style]) > ol,
.singleright > div:not([style]) > p, .singleright > div:not([style]) > ul,
.singleright > div:not([style]) > ol,
.full > div:not([style]) > p, .full > div:not([style]) > ul, .full > div:not([style]) > ol {
  margin-left: 0;
  margin-right: 0;
}

/* ===== section pagination (added 2026-10-25) ===== */
.pager { margin: 26px auto; width: 96%; text-align: center; }
.pager a {
  display: inline-block; margin: 4px 6px; padding: 10px 20px;
  background: #212F63; color: #ffffff; text-decoration: none;
  font-weight: 700; font-size: 0.9em; border-radius: 999px;
  border-bottom: 4px solid #FAA31B;
}
.pager a:hover { background: #9C2328; border-bottom-color: #212F63; }
.pager:empty { display: none; }
@media (max-width: 480px) {
  .pager a { padding: 9px 14px; font-size: 0.82em; margin: 3px 4px; }
}

/* ===== section index card list (added 2026-10-25) ===== */
.directory-wrap {
  margin: 26px auto; width: 96%; background: #ffffff;
  border: 5px solid #FAA31B; border-radius: 20px; box-sizing: border-box;
}
ul.directory { list-style: none; margin: 0; padding: 10px 24px; }
ul.directory li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid #e6e8ef;
}
ul.directory li:last-child { border-bottom: none; }
ul.directory .entry-title a { color: #212F63; font-weight: 700; text-decoration: none; }
ul.directory .entry-title a:hover { color: #9C2328; text-decoration: underline; }
ul.directory .published { color: #5a5f6a; font-size: 0.85em; white-space: nowrap; }
@media (max-width: 480px) {
  ul.directory { padding: 8px 16px; }
  ul.directory li { flex-direction: column; gap: 2px; padding: 11px 0; }
}

/* ===== section index: full feed entries (added 2026-10-25) ===== */
.feed-list {
  margin: 26px auto; width: 96%; background: #ffffff;
  border: 5px solid #FAA31B; border-radius: 20px; box-sizing: border-box;
  padding: 16px 26px 22px 26px;
}
.feed-list h4 { margin: 18px 0 8px 0; }
.feed-list h4 a { color: #212F63; text-decoration: none; }
.feed-list h4 a:hover { color: #9C2328; text-decoration: underline; }
.feed-list > hr:last-child { display: none; }
/* some GabeWatch excerpts contain the video player itself — keep the index a list */
.feed-list iframe, .feed-list .vimeo-embed { display: none; }
.feed-list img { max-width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 480px) { .feed-list { padding: 12px 16px 16px 16px; } }