/* ==========================================================================
   IP Cleaning Group — WordPress additions
   --------------------------------------------------------------------------
   What the static layout did not have, because WordPress draws it:
   Contact Form 7, text sections, blog lists, search, 404, admin bar.
   Loaded after main.css and content.css, so it overrides them without
   !important.

   1. Admin bar
   2. Contact Form 7
   3. Text sections and marks inside section texts
   4. Page header meta line
   5. Blog: cards, search, pagination, post footer
   6. 404
   7. Small things
   ========================================================================== */


/* ==========================================================================
   1. Admin bar
   --------------------------------------------------------------------------
   The bar hangs at the top of the screen, and the header is sticky with
   top: 0 — without the offset the header would slide under the bar.
   On phones up to 600px the bar scrolls away with the page (WordPress core),
   so the header sticks to the very top again.
   ========================================================================== */

body.admin-bar .header {
  top: 32px;
}

html:has(body.admin-bar) {
  scroll-padding-top: calc(var(--header-h) + 32px);
}

@media (max-width: 782px) {
  body.admin-bar .header {
    top: 46px;
  }

  html:has(body.admin-bar) {
    scroll-padding-top: calc(var(--header-h) + 46px);
  }

  body.admin-bar .header__menu {
    height: calc(100dvh - var(--header-h) - 46px);
  }
}

@media (max-width: 600px) {
  body.admin-bar .header {
    top: 0;
  }
}


/* ==========================================================================
   2. Contact Form 7
   --------------------------------------------------------------------------
   The plugin stylesheet is not loaded (inc/forms.php): fields already have
   the design, only what the plugin adds is styled here.
   ========================================================================== */

/* Service parts of the plugin */
.wpcf7 .screen-reader-response,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wpcf7 .hidden-fields-container {
  display: none;
}

.wpcf7-spinner {
  display: none;
}

/* Every control is wrapped in a <span>; inside the field it must behave as a block */
.wpcf7-form-control-wrap {
  position: relative;
  display: block;
}

/* The select arrow stays in the middle of the control, even when a hint appears under it */
.wpcf7 .field--select .field__icon {
  top: calc((var(--fs-body) * 1.5 + 24px) / 2);
}

/* Invalid field — the same look as .field.is-invalid in the static layout */
.field__control.wpcf7-not-valid {
  border-color: var(--c-error);
  box-shadow: inset 0 0 0 1px var(--c-error);
}

.field__control.wpcf7-not-valid::placeholder {
  color: var(--c-error);
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 5px;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  color: var(--c-error);
}

/* The form message — like .form__status of the static layout */
.wpcf7-response-output {
  margin: 15px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-olive);
}

.wpcf7-response-output:empty {
  display: none;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
  color: var(--c-error);
}

/* While the message is being sent */
.wpcf7-form.submitting .form__actions .btn {
  opacity: 0.6;
  pointer-events: none;
}

/* No form yet: contacts instead of fields */
.form--fallback .form__note {
  margin-top: 0;
  font-size: var(--fs-body);
}

.form--fallback a {
  color: var(--c-olive);
  font-weight: 600;
}


/* ==========================================================================
   3. Text sections and marks inside section texts
   ========================================================================== */

/* Regular blocks between sections (inc/template-tags.php → ipcg_the_content) */
.section--content {
  overflow-x: clip;
  background-color: var(--c-white);
}

/* A text section right under the page header starts closer, like service-intro */
.page-hero + .section--content {
  padding-top: clamp(1.875rem, 1.461rem + 1.768vw, 3.125rem); /* 30 → 50 */
}

.section--flush {
  padding-top: 0;
}

/* Lists and links typed into section fields (**bold**, [link](url), "- item") */
.about__body ul,
.service-intro__text ul,
.accordion__content ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about__body li,
.service-intro__text li,
.accordion__content li {
  position: relative;
  padding-left: 22px;
}

.about__body li::before,
.service-intro__text li::before,
.accordion__content li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 12px;
  height: 1px;
  background-color: var(--c-olive);
}

.accordion__content ul {
  padding: 0 15px 15px;
}

.about__body a,
.service-intro__text a,
.accordion__content a {
  color: var(--c-olive);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.about__body a:hover,
.service-intro__text a:hover,
.accordion__content a:hover {
  color: var(--c-olive-dark);
}

@media (min-width: 1024px) {
  .accordion__content ul {
    padding: 0 30px 15px;
  }
}

/* Video in the gallery grid: the same play icon as in the carousel */
.gallery__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  color: rgb(255 255 255 / 0.85);
  pointer-events: none;
  translate: -50% -50%;
  transition:
    color 0.3s var(--ease),
    scale 0.45s var(--ease-out);
}

.gallery__play svg {
  width: 34px;
  height: 40px;
}

.gallery__link:hover .gallery__play {
  color: var(--c-white);
  scale: 1.12;
}

.gallery__link:has(.gallery__play)::after {
  display: none;
}


/* ==========================================================================
   4. Page header meta line (blog post: date · category)
   ========================================================================== */

.page-hero__meta {
  font-size: clamp(0.75rem, 0.646rem + 0.442vw, 1rem); /* 12 → 16 */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-light);
}

.page-hero__meta a {
  color: var(--c-white);
  transition: color 0.3s var(--ease);
}

.page-hero__meta a:hover {
  color: var(--c-olive-light);
}


/* ==========================================================================
   5. Blog: cards, search, pagination, post footer
   ========================================================================== */

.posts__head {
  margin-bottom: 30px;
}

.posts__grid {
  display: grid;
  gap: 30px;
}

.post-card .service-card__media {
  height: clamp(210px, 172.7px + 9.945vw, 300px);
}

.post-card .service-card__body {
  grid-template-areas:
    "meta  meta"
    "title btn"
    "text  text";
}

.post-card .service-card__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

.post-card__meta {
  grid-area: meta;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-olive);
}

@media (min-width: 768px) {
  .posts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px 30px;
  }
}

@media (min-width: 1024px) {
  .posts__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Service cards span columns of the 6-column services grid; here every card is one column */
  .posts__grid .post-card.service-card {
    grid-column: auto;
    gap: 30px;
  }

  .post-card .service-card__body {
    grid-template-areas:
      "meta  btn"
      "title btn"
      "text  btn";
    row-gap: 15px;
  }
}

.posts__intro,
.posts__search {
  margin-bottom: 45px;
}

.posts__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

/* Search form */
.search-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 645px;
  margin-inline: auto;
}

.search-form__input {
  -webkit-appearance: none;
  appearance: none;
}

@media (min-width: 768px) {
  .search-form {
    flex-direction: row;
  }

  .search-form__input {
    flex: 1;
  }
}

/* Pagination: squares like the tabs of "Our Work" */
.pagination {
  margin-top: 45px;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  font-weight: 600;
  color: var(--c-black);
  border: 1px solid var(--c-black);
  transition:
    color 0.35s var(--ease),
    background-color 0.35s var(--ease);
}

.pagination a.page-numbers:hover,
.pagination .page-numbers.current {
  color: var(--c-white);
  background-color: var(--c-black);
}

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

.pagination__arrow {
  width: 20px;
  height: 8px;
}

.pagination__arrow--prev {
  rotate: 180deg;
}

/* Post footer: tags and neighbours, in the column of the post text */
.post-footer__inner {
  max-width: 820px;
  margin-inline: auto;
  padding-top: 30px;
  border-top: 1px solid rgb(26 26 26 / 0.12);
}

.post-footer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

.post-footer__tags a {
  color: var(--c-olive);
}

.post-footer__nav {
  display: grid;
  gap: 15px;
  margin-top: 30px;
}

.post-footer__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background-color: var(--c-light);
  transition: background-color 0.35s var(--ease);
}

.post-footer__link:hover {
  background-color: #efece5;
}

.post-footer__dir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-olive);
}

.post-footer__arrow {
  flex: none;
  width: 20px;
  height: 8px;
}

.post-footer__link--prev .post-footer__arrow {
  rotate: 180deg;
}

.post-footer__title {
  font-family: var(--ff-serif);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-serif);
  color: var(--c-black);
}

@media (min-width: 768px) {
  .post-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-footer__link--next {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
  }
}


/* ==========================================================================
   6. 404
   ========================================================================== */

.error-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.error-404__code {
  font-family: var(--ff-serif);
  font-size: clamp(7.5rem, 5.428rem + 8.84vw, 12.5rem); /* 120 → 200 */
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-serif);
  color: var(--c-olive-light);
}

.error-404__text {
  max-width: 560px;
  margin-top: 20px;
}

.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 45px;
  margin-top: 45px;
}


/* ==========================================================================
   7. Small things
   ========================================================================== */

/* Hint for logged-in editors: something to fill in (never shown to visitors) */
.ipcg-admin-hint {
  margin-top: 30px;
  padding: 12px 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
  color: var(--c-charcoal);
  background-color: #fff8e5;
  border-left: 3px solid #dba617;
}