/* Small additions the WordPress build needs on top of the designer's CSS. */

/* Honeypot field: hidden from people, visible to bots. */
.honey,
.popup-form .honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status line under the lead forms. */
.form-status {
  margin: 12px 0 0;
  font-size: 0.95rem;
  min-height: 1.4em;
}
.form-status.is-success {
  color: #1f7a3d;
}
.form-status.is-error {
  color: #b3261e;
}
#download-status.is-success {
  color: #1f7a3d;
}
#download-status.is-error {
  color: #b3261e;
}

.popup-form .consent-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.85rem;
}
.popup-form .consent-line input {
  width: auto;
  margin-top: 3px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

/* Generic content pages (page.php / index.php / 404.php). */
.generic-content {
  padding: 160px 0 80px;
}
.generic-content .entry-content > * + * {
  margin-top: 1em;
}

/* Header on non-designed pages. */
.atd-plain .site-header {
  position: relative;
  background: #152019;
}
.atd-plain .generic-content {
  padding-top: 60px;
}

/* Green accent words in headings (*word* in the heading fields). */
.heading-green {
  color: #557b33;
}

/* Form status colours for the enquiry and discovery forms (lead script uses is-success / is-error). */
#form-status.is-success,
#discovery-status.is-success {
  color: #1f5c2b;
}
#form-status.is-error,
#discovery-status.is-error {
  color: #9a2828;
}

/* Notice shown to editors only when a template has nothing to render. */
.atd-editor-note {
  margin: 40px auto;
  padding: 16px 20px;
  border: 1px dashed #8aa06e;
  background: #f4f6ec;
  font-size: 15px;
}

/* Before / After showcase images (Service Detail (Before & After) template). */
.website-example img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e3e8dc;
}
.website-example [role="tabpanel"][hidden] {
  display: none;
}

/* ---------- Dynamic banner media (image / video set in the page editor) ---------- */
.has-banner-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Replace the built-in background artwork and watermark letter. */
.hero.has-banner-media,
.page-hero.has-banner-media {
  background-image: none;
  background-color: var(--forest, #0b1a10);
}
.hero.has-banner-media:before,
.page-hero.has-banner-media:before,
.page-hero.has-banner-media:after {
  display: none;
}
.atd-banner-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.atd-banner-img,
.atd-banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Same left-to-right darkening as the default banner; strength set per page. */
.atd-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(5, 12, 7, calc(var(--atd-ov, 0.65) * 1.35)) 8%,
    rgba(5, 12, 7, var(--atd-ov, 0.65)) 50%,
    rgba(5, 12, 7, calc(var(--atd-ov, 0.65) * 0.6))
  );
}
/* Page content sits above the media. */
.has-banner-media > .wrap {
  position: relative;
  z-index: 1;
}
@media (max-width: 760px) {
  /* On small screens the text spans the full width, so darken evenly. */
  .atd-banner-overlay {
    background: rgba(5, 12, 7, calc(var(--atd-ov, 0.65) * 1.1));
  }
}

/* ---------- Article text written in the post editor (single.php) ---------- */
.article-content > *:first-child {
  margin-top: 0;
}
.article-content h2 {
  /* font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin: 36px 0 17px; */
}
.article-content h3 {
  font-size: 20px;
  line-height: 1.4;
  margin: 28px 0 12px;
}
.article-content p,
.article-content li {
  font-size: 18px;
  line-height: 1.9;
  color: #46513f;
}
.article-content p {
  margin: 0 0 18px;
}
.article-content ul,
.article-content ol {
  margin: 0 0 22px;
  padding-left: 1.3em;
}
.article-content li {
  margin-bottom: 6px;
}
.article-content a {
  color: inherit;
  text-decoration: underline;
}
.article-content img {
  max-width: 100%;
  height: auto;
}
.article-content blockquote {
  margin: 28px 0;
  padding-left: 22px;
  border-left: 3px solid var(--leaf, #a3d45f);
}
.article-body .article-content + aside {
  margin-top: 45px;
}
@media (max-width: 1000px) {
  .article-content h2 {
    font-size: 22px;
  }
  .article-content p,
  .article-content li {
    font-size: 17px;
  }
}

/* Featured client work cards on the extended service page: "Read more" is a plain link. */
.case-card .case-more {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.case-card .case-read-more {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.case-card:hover .case-more,
.case-card:focus-within .case-more {
  border-color: #627956;
}