/* -----------------------------------------------------------------------------
   Council Watch: WordPress-specific styles and the templates the original
   design did not include (story pages, archives, search, 404, comments).
   Everything here uses the design's own tokens and type scale.
   Nothing in this file targets the front page.
   -------------------------------------------------------------------------- */

/* Accessibility ----------------------------------------------------------- */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

/* Utility panel ----------------------------------------------------------- */

.utility-panel[hidden],
.utility-panel [data-cw-panel][hidden],
.search-results[hidden] {
  display: none;
}

.search-panel form {
  margin: 0;
}

/* Placeholder artwork ----------------------------------------------------- */

.cw-placeholder-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #cce2e5;
}

.lead-image-wrap .cw-placeholder-image {
  height: 405px;
}

/* Story page -------------------------------------------------------------- */

.single-story {
  padding-bottom: 20px;
}

.single-head {
  padding-block: 42px 0;
}

.single-head h1 {
  max-width: 920px;
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(38px, 4.7vw, 64px);
  line-height: .99;
  letter-spacing: -.047em;
}

.single-head .standfirst {
  max-width: 790px;
}

.single-media {
  margin: 30px auto 0;
}

.single-media figcaption {
  padding-top: 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.single-body {
  width: min(760px, calc(100% - 48px));
  padding-block: 34px 10px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.62;
  color: #1d3547;
}

.single-body > * {
  margin-bottom: 24px;
}

.single-body > *:last-child {
  margin-bottom: 0;
}

.single-body p {
  margin: 0 0 24px;
}

.single-body h2 {
  margin: 42px 0 12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 3vw, 35px);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--ink);
}

.single-body h3 {
  margin: 34px 0 10px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--ink);
}

.single-body h4 {
  margin: 30px 0 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--coral);
}

.single-body a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: rgba(8, 104, 142, .38);
  text-underline-offset: 3px;
}

.single-body a:hover {
  text-decoration-color: var(--coral);
}

.single-body strong {
  font-weight: 700;
}

.single-body ul,
.single-body ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.single-body ul {
  list-style: disc;
}

.single-body ol {
  list-style: decimal;
}

.single-body li {
  margin-bottom: 8px;
}

.single-body blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 4px solid var(--coral);
  font-size: 23px;
  line-height: 1.4;
  color: var(--ink);
}

.single-body blockquote p:last-child {
  margin-bottom: 0;
}

.single-body figure,
.single-body img {
  max-width: 100%;
  height: auto;
}

.single-body figure {
  margin: 32px 0;
}

.single-body figcaption,
.single-body .wp-caption-text {
  padding-top: 9px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.single-body hr {
  margin: 36px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.single-body table {
  width: 100%;
  margin-bottom: 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.single-body th,
.single-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.single-body th {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue);
}

.single-body code,
.single-body pre {
  font-size: 14px;
}

.single-body pre {
  padding: 18px;
  background: var(--sand);
  overflow-x: auto;
}

.single-body .alignwide {
  width: min(1000px, 100vw - 48px);
  max-width: none;
  margin-inline: calc(50% - min(500px, 50vw - 24px));
}

.single-body .alignfull {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

.single-body .alignleft {
  float: left;
  margin: 6px 26px 18px 0;
  max-width: 46%;
}

.single-body .aligncenter {
  margin-inline: auto;
  text-align: center;
}

.single-body .alignright {
  float: right;
  margin: 6px 0 18px 26px;
  max-width: 46%;
}

.page-links {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

/* Story footer ------------------------------------------------------------ */

.single-foot {
  margin-top: 34px;
  padding-block: 20px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 11px;
}

.single-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  color: var(--muted);
}

.single-tags strong {
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.single-tags a {
  padding: 5px 9px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
}

.single-tags a:hover {
  border-color: var(--ink);
}

.single-share {
  display: flex;
  align-items: center;
  gap: 12px;
}

.single-share > strong {
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.single-share .social-buttons {
  margin: 0;
}

/* Archives, search and 404 ------------------------------------------------ */

.archive-section .story-grid {
  row-gap: 44px;
}

.archive-intro {
  max-width: 700px;
  margin: -12px 0 30px;
  color: var(--muted);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.5;
}

.pagination {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination .page-numbers {
  min-width: 38px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.pagination .page-numbers:hover {
  border-color: var(--ink);
}

.pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.pagination .page-numbers.dots {
  border-color: transparent;
}

.cw-empty {
  padding-block: 20px 60px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  color: var(--muted);
}

.error-actions {
  margin-bottom: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.cw-inline-search {
  display: grid;
  grid-template-columns: minmax(0, 320px) auto;
}

.cw-inline-search input {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
}

.cw-inline-search input:focus {
  border-color: var(--ink);
}

.cw-inline-search button {
  padding: 12px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

/* Pages ------------------------------------------------------------------- */

.page-story .single-head {
  padding-bottom: 6px;
}

/* Comments ---------------------------------------------------------------- */

.single-comments {
  width: min(760px, calc(100% - 48px));
  padding-block: 44px;
}

.single-comments h2,
.single-comments h3 {
  margin: 0 0 20px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  letter-spacing: -.03em;
}

.comment-list {
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.comment-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.comment-list .children {
  margin: 18px 0 0 26px;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}

.comment-list .children li {
  padding-left: 18px;
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--muted);
}

.comment-author .fn {
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
  color: var(--ink);
}

.comment-content {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.55;
}

.comment-respond label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue);
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.comment-respond .submit {
  padding: 13px 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

/* Embedded forms (Forminator) --------------------------------------------- */

.cw-embedded-form .forminator-ui,
.cw-embedded-form .forminator-custom-form {
  --forminator-accent: var(--ink);
}

.cw-embedded-form input[type="email"],
.cw-embedded-form input[type="text"] {
  border-radius: 0 !important;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 800px) {
  .single-body,
  .single-comments {
    width: min(100% - 30px, 680px);
  }

  .single-head {
    padding-top: 26px;
  }

  .single-head h1 {
    font-size: clamp(36px, 10.2vw, 52px);
  }

  .single-body {
    font-size: 18px;
  }

  .single-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .lead-image-wrap .cw-placeholder-image {
    height: 54vw;
    min-height: 260px;
  }
}

@media (max-width: 460px) {
  .cw-inline-search {
    grid-template-columns: 1fr;
  }

  .single-body .alignleft,
  .single-body .alignright {
    float: none;
    max-width: 100%;
    margin: 24px 0;
  }
}

/* Placeholder notice used on demo content during the build ----------------- */

.cw-placeholder-notice {
  padding: 14px 16px;
  margin-bottom: 28px;
  border: 1px dashed var(--coral);
  background: rgba(239, 91, 69, .06);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #7a2c1e;
}

.cw-placeholder-notice strong {
  color: var(--coral);
}