/*
Theme Name: kitadahikari
Author: Hikari Kitada
Description: Hikari Kitada portfolio theme
Version: 1.0.4
Requires at least: 6.8
Text Domain: kitadahikari
*/


/* =========================================================
   KH SINGLE
   COMMON
   BLOG / NEWS / PORTFOLIO

   Desktop / Tablet: 12 Grid
   Mobile: 4 Grid
   ========================================================= */

.kh-single {
  padding-top: var(--kh-gap-xxl);
  padding-bottom: var(--kh-gap-xxl);
}


/* =========================================================
   PORTFOLIO
   Desktop / Tablet: 12 Grid
   Mobile: 4 Grid
   ========================================================= */

.wp-block-kitadahikari-grid.portfolio-single,
.wp-block-kitadahikari-grid.portfolio-archive {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--kh-gap-xxl);
  box-sizing: border-box;
}


/* =========================================================
   PORTFOLIO SINGLE
   ========================================================= */


/* ---------------------------------------------------------
   INFO
   --------------------------------------------------------- */

.portfolio-single__info {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.portfolio-single__title {
  margin: 0 !important;

  font-size: var(--kh-text-xl);
  line-height: var(--kh-leading-tight);
}


/* ---------------------------------------------------------
   META
   YEAR + MATERIAL
   --------------------------------------------------------- */

.portfolio-single__meta {
  display: grid !important;

  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--kh-gap-m);

  width: 100%;

  margin-top: var(--kh-gap-xl) !important;
  margin-bottom: 0 !important;
}


/* YEAR / MATERIAL */

.portfolio-single__meta-item {
  grid-column: 2 / span 4;

  width: 100%;

  margin: 0 0 var(--kh-gap-l) !important;
  padding: 0 !important;
}

.portfolio-single__meta-item:last-child {
  margin-bottom: 0 !important;
}


/* LABEL */

.portfolio-single__label {
  margin: 0 0 var(--kh-gap-xs) !important;

  font-size: var(--kh-text-s);
  line-height: var(--kh-leading-normal);
}


/* TERMS */

.portfolio-single__terms {
  margin: 0 !important;
}

.portfolio-single__terms a {
  color: inherit;
}


/* ---------------------------------------------------------
   FEATURED IMAGE
   --------------------------------------------------------- */

.portfolio-single__image {
  width: 100%;

  margin: 0 !important;
}

.portfolio-single__image img {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;

  margin: 0;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.portfolio-single__content {
  margin-top: 0;
  margin-bottom: var(--kh-gap-xxl);
}

.portfolio-single__content > :first-child {
  margin-top: 0;
}

.portfolio-single__content > :last-child {
  margin-bottom: 0;
}


/* =========================================================
   KH SINGLE NAVIGATION
   COMMON
   BLOG / NEWS / PORTFOLIO

   Desktop / Tablet: 12 Grid
   Mobile: 4 Grid
   ========================================================= */

.kh-single-nav {
  display: grid !important;

  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--kh-gap-m);

  align-items: center;

  width: 100%;
  min-width: 0;

  margin: var(--kh-gap-xxl) 0 0 !important;
  padding-top: var(--kh-gap-l);

  border-top: var(--kh-pixel) solid var(--kh-ink);
}


/* ---------------------------------------------------------
   PREVIOUS
   4 / 12
   --------------------------------------------------------- */

.kh-single-nav__previous {
  grid-column: 1 / span 4;

  min-width: 0;
  margin: 0 !important;

  text-align: left;
}


/* ---------------------------------------------------------
   BACK
   4 / 12
   --------------------------------------------------------- */

.kh-single-nav__back {
  grid-column: 5 / span 4;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  margin: 0 !important;
}


/* ---------------------------------------------------------
   NEXT
   4 / 12
   --------------------------------------------------------- */

.kh-single-nav__next {
  grid-column: 9 / span 4;

  min-width: 0;
  margin: 0 !important;

  text-align: right;
}


/* ---------------------------------------------------------
   POST NAVIGATION BLOCK
   --------------------------------------------------------- */

.kh-single-nav__previous .wp-block-post-navigation-link,
.kh-single-nav__next .wp-block-post-navigation-link {
  margin: 0;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

.kh-single-nav__previous a,
.kh-single-nav__next a {
  color: inherit;
  text-decoration: none;
}

.kh-single-nav__previous a:hover,
.kh-single-nav__previous a:focus-visible,
.kh-single-nav__next a:hover,
.kh-single-nav__next a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--kh-pixel);
}


/* ---------------------------------------------------------
   BACK BUTTON
   --------------------------------------------------------- */

.kh-single-nav__back .kh-button-wrap {
  margin: 0;
}


/* ---------------------------------------------------------
   NEWS
   NAV → FOOTER SPACE
   --------------------------------------------------------- */

.news-single .kh-single-nav {
  margin-bottom: var(--kh-gap-xxl) !important;
}


/* =========================================================
   PORTFOLIO ARCHIVE
   ========================================================= */

.wp-block-kitadahikari-grid.portfolio-archive {
  --portfolio-thumb-ratio: 4 / 3;

  padding-block: var(--kh-gap-xxl);
}

.portfolio-archive__title {
  margin: 0 0 var(--kh-gap-xl);
  padding: 0;
}


/* =========================================================
   PORTFOLIO FILTER
   ========================================================= */

.portfolio-filter {
  --p: calc(var(--kh-pixel) * 2);

  display: block !important;

  width: 100%;

  margin: 0 0 var(--kh-gap-xl);
  padding: 0;

  color: var(--kh-ink);

  font-size: var(--kh-text-s);
  line-height: var(--kh-leading-normal);
}


/* ---------------------------------------------------------
   FILTER TOGGLE
   --------------------------------------------------------- */

.portfolio-filter__toggle {
  display: block;

  width: 100%;

  margin: 0;
  padding: var(--kh-gap-s) var(--kh-gap-m);

  color: var(--kh-ink);
  background: var(--kh-paper);

  border: var(--p) solid var(--kh-ink);
  border-radius: 0;

  clip-path: polygon(
    var(--p) 0,
    calc(100% - var(--p)) 0,
    calc(100% - var(--p)) var(--p),
    100% var(--p),
    100% calc(100% - var(--p)),
    calc(100% - var(--p)) calc(100% - var(--p)),
    calc(100% - var(--p)) 100%,
    var(--p) 100%,
    var(--p) calc(100% - var(--p)),
    0 calc(100% - var(--p)),
    0 var(--p),
    var(--p) var(--p)
  );

  font: inherit;
  line-height: var(--kh-leading-normal);

  cursor: pointer;
  list-style: none;
}

.portfolio-filter__toggle::-webkit-details-marker {
  display: none;
}


/* + / − */

.portfolio-filter__toggle::after {
  content: " +";
}

.portfolio-filter[open] .portfolio-filter__toggle::after {
  content: " −";
}


/* ---------------------------------------------------------
   FILTER OPEN
   --------------------------------------------------------- */

.portfolio-filter[open] {
  border: var(--p) solid var(--kh-ink);

  clip-path: polygon(
    var(--p) 0,
    calc(100% - var(--p)) 0,
    calc(100% - var(--p)) var(--p),
    100% var(--p),
    100% calc(100% - var(--p)),
    calc(100% - var(--p)) calc(100% - var(--p)),
    calc(100% - var(--p)) 100%,
    var(--p) 100%,
    var(--p) calc(100% - var(--p)),
    0 calc(100% - var(--p)),
    0 var(--p),
    var(--p) var(--p)
  );
}

.portfolio-filter[open] .portfolio-filter__toggle {
  border: 0;
  border-bottom: var(--p) solid var(--kh-ink);

  clip-path: none;
}


/* ---------------------------------------------------------
   FILTER CONTENT
   --------------------------------------------------------- */

.portfolio-filter__content {
  padding:
    var(--kh-gap-l)
    var(--kh-gap-m);
}


/* ---------------------------------------------------------
   FILTER GROUP
   --------------------------------------------------------- */

.portfolio-filter__group {
  display: block !important;

  width: 100%;

  margin: 0 0 var(--kh-gap-xl) !important;
  padding: 0 !important;
}

.portfolio-filter__group:last-child {
  margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   FILTER LABEL
   --------------------------------------------------------- */

.portfolio-filter__label {
  display: block;

  width: 100%;

  margin: 0 0 var(--kh-gap-m) !important;
  padding: 0 !important;

  color: var(--kh-ink);

  font: inherit;
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   FILTER ITEMS
   --------------------------------------------------------- */

.portfolio-filter__items {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: baseline !important;

  width: 100%;

  column-gap: var(--kh-gap-l);
  row-gap: var(--kh-gap-m);

  margin: 0 !important;
  padding: 0 !important;

  font: inherit;
}

.portfolio-filter__all {
  display: block !important;
  flex: 0 0 auto;

  margin: 0 !important;
  padding: 0 !important;

  font: inherit;
}

.portfolio-filter__terms,
.portfolio-filter__terms ul {
  display: contents !important;
}

.portfolio-filter__terms ul {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.portfolio-filter__terms ul > li {
  display: block !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  font: inherit;
  line-height: inherit;

  list-style: none !important;
}


/* ---------------------------------------------------------
   FILTER LINKS
   --------------------------------------------------------- */

.portfolio-filter a {
  color: var(--kh-ink);

  font: inherit;

  text-decoration: none;
  white-space: nowrap;
}

.portfolio-filter a:hover,
.portfolio-filter a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--kh-pixel);
}


/* ---------------------------------------------------------
   MATERIAL DIVIDER
   --------------------------------------------------------- */

.portfolio-filter__material {
  position: relative;

  margin-top: var(--kh-gap-l) !important;
  padding-top: 0 !important;
}

.portfolio-filter__material::before {
  content: "";

  display: block;

  width: 100%;
  height: calc(var(--kh-pixel) * 2);

  margin-bottom: var(--kh-gap-m);

  background:
    repeating-linear-gradient(
      to right,
      var(--kh-ink) 0 calc(var(--kh-pixel) * 2),
      transparent calc(var(--kh-pixel) * 2) calc(var(--kh-pixel) * 4)
    );
}

.portfolio-filter__material .portfolio-filter__label {
  margin: 0 0 var(--kh-gap-m) !important;
}


/* =========================================================
   PORTFOLIO GRID
   Desktop: 4 columns
   ========================================================= */

.portfolio-archive__query {
  width: 100%;
  min-width: 0;

  margin: 0;
}

.portfolio-archive__list {
  display: grid;

  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--kh-gap-m);
  row-gap: var(--kh-gap-l);

  width: 100%;

  margin: 0;
  padding: 0;

  list-style: none;
}

.portfolio-archive__list > li {
  grid-column: span 3;

  min-width: 0;

  margin: 0;
  padding: 0;

  list-style: none;
}


/* =========================================================
   PORTFOLIO THUMBNAIL
   4:3 / cover / center
   ========================================================= */

.portfolio-archive__image,
.portfolio-card__image,
.portfolio-archive__image.wp-block-post-featured-image,
.portfolio-card__image.wp-block-post-featured-image {
  display: block !important;

  width: 100% !important;

  aspect-ratio: 4 / 3 !important;

  overflow: hidden !important;

  margin: 0 0 var(--kh-gap-s) !important;
  padding: 0 !important;
}

.portfolio-archive__image a,
.portfolio-card__image a,
.portfolio-archive__image.wp-block-post-featured-image a,
.portfolio-card__image.wp-block-post-featured-image a {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  outline: calc(var(--kh-pixel) * 2) solid transparent;
  outline-offset: calc(var(--kh-pixel) * -2);
}

.portfolio-archive__image img,
.portfolio-card__image img,
.portfolio-archive__image .wp-post-image,
.portfolio-card__image .wp-post-image {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  aspect-ratio: 4 / 3 !important;

  object-fit: cover !important;
  object-position: center !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* IMAGE HOVER / FOCUS */

.portfolio-card__image a:hover,
.portfolio-card__image a:focus-visible,
.portfolio-card__image a:active,
.portfolio-archive__image a:hover,
.portfolio-archive__image a:focus-visible,
.portfolio-archive__image a:active {
  outline-color: var(--kh-ink);
}


/* =========================================================
   PORTFOLIO CARD TITLE
   1 line + ellipsis + pixel line
   ========================================================= */

.portfolio-card__title {
  position: relative;

  min-width: 0;

  margin: 0;
  padding-bottom: var(--kh-gap-s);
}

.portfolio-card__title a {
  display: block;

  width: 100%;

  color: inherit;
  text-decoration: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* PIXEL LINE */

.portfolio-card__title::after {
  content: "";

  display: block;

  width: 100%;
  height: 2px;

  margin-top: var(--kh-gap-s);

  background:
    repeating-linear-gradient(
      to right,
      var(--kh-ink) 0 2px,
      transparent 2px 4px
    );
}


/* =========================================================
   PORTFOLIO PAGINATION / TAXONOMY
   ========================================================= */

.portfolio-archive__pagination {
  width: 100%;

  margin-top: var(--kh-gap-xxl);
  margin-bottom: 0;

  font-size: var(--kh-text-s);
  line-height: var(--kh-leading-normal);
}

.portfolio-archive__empty {
  margin-top: var(--kh-gap-xl);
  margin-bottom: 0;
}

.portfolio-taxonomy__title {
  margin: 0 0 var(--kh-gap-xl);
}

.portfolio-taxonomy__back {
  margin-top: var(--kh-gap-xl);
  margin-bottom: 0;
}

.portfolio-taxonomy__back a {
  color: inherit;
  text-decoration: none;
}

.portfolio-taxonomy__back a:hover {
  text-decoration: underline;
}


/* =========================================================
   PORTFOLIO TABLET
   3 columns
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

  .portfolio-archive__list > li {
    grid-column: span 4;
  }

}


/* =========================================================
   PORTFOLIO MOBILE
   2 columns
   ========================================================= */

@media (max-width: 767px) {

  .wp-block-kitadahikari-grid.portfolio-single,
  .wp-block-kitadahikari-grid.portfolio-archive {
    padding-inline: var(--kh-gap-m);
  }

  .portfolio-single__title {
    font-size: var(--kh-text-xl);
  }


  /* PORTFOLIO SINGLE META */

  .portfolio-single__meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--kh-gap-s);

    margin-top: var(--kh-gap-l) !important;
  }

  .portfolio-single__meta-item {
    grid-column: 1 / span 4;

    margin-bottom: var(--kh-gap-m) !important;
  }

  .portfolio-single__meta-item:last-child {
    margin-bottom: 0 !important;
  }

  .portfolio-single__image {
    margin: 0 !important;
  }

  .portfolio-single__content {
    margin-bottom: var(--kh-gap-xxl);
  }


  /* PORTFOLIO ARCHIVE */

  .wp-block-kitadahikari-grid.portfolio-archive {
    padding-top: var(--kh-gap-xl);
    padding-bottom: var(--kh-gap-xxl);
  }

  .portfolio-archive__title,
  .portfolio-filter {
    margin-bottom: var(--kh-gap-xl);
  }

  .portfolio-archive__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--kh-gap-s);
    row-gap: var(--kh-gap-m);
  }

  .portfolio-archive__list > li {
    grid-column: span 2;
  }

  .portfolio-archive__pagination {
    margin-top: var(--kh-gap-xl);
  }

  .portfolio-taxonomy__title {
    margin-bottom: var(--kh-gap-l);
  }

  .portfolio-taxonomy__back {
    margin-top: var(--kh-gap-xl);
  }


  /* PORTFOLIO FILTER */

  .portfolio-filter__toggle {
    padding:
      var(--kh-gap-s)
      var(--kh-gap-m);
  }

  .portfolio-filter__content {
    padding:
      var(--kh-gap-l)
      var(--kh-gap-m);
  }

  .portfolio-filter__group {
    margin-bottom: var(--kh-gap-l) !important;
  }

  .portfolio-filter__items {
    column-gap: var(--kh-gap-m);
    row-gap: var(--kh-gap-s);
  }

}


/* =========================================================
   BLOG CARD
   KH 12 GRID
   ========================================================= */

.blog-list__posts > li {
  display: grid !important;

  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: var(--kh-gap-m);

  align-items: start;

  width: 100%;
  min-width: 0;

  margin: 0 0 var(--kh-gap-xxl) !important;
  padding: 0 !important;

  list-style: none !important;
}


/* ---------------------------------------------------------
   IMAGE / NO IMAGE
   2 / 12
   --------------------------------------------------------- */

.blog-card__image,
.blog-card__image.wp-block-post-featured-image,
.kh-noimage {
  grid-column: 1 / span 2;
  grid-row: 1;

  width: 100%;
  aspect-ratio: 4 / 3;

  margin: 0 !important;
}


/* ---------------------------------------------------------
   TEXT
   8 / 12
   --------------------------------------------------------- */

.blog-card__body {
  grid-column: 3 / span 8;
  grid-row: 1;

  min-width: 0;

  margin: 0 !important;
}


/* =========================================================
   NEWS SINGLE
   ========================================================= */

.news-single {
  width: 100%;
  max-width: none;

  padding-inline: var(--kh-gap-l);
}

.news-single__header,
.news-single__body {
  display: grid;

  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--kh-gap-l);

  width: 100%;
  max-width: 1440px;

  margin-inline: auto;
}


/* ---------------------------------------------------------
   NEWS HEADER
   上余白は .kh-single で共通管理
   --------------------------------------------------------- */

.news-single__header {
  padding-top: 0;
  padding-bottom: var(--kh-gap-xl);
}

.news-single__title {
  grid-column: 2 / span 10;

  margin: 0;

  font-size: var(--kh-text-xl);
  font-weight: 400;
  line-height: var(--kh-leading-tight);
}

.news-single__body > * {
  grid-column: 2 / span 10;
}


/* ---------------------------------------------------------
   NEWS DETAIL
   --------------------------------------------------------- */

.news-detail {
  display: grid;

  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--kh-gap-l);
}


/* ---------------------------------------------------------
   NEWS INFO
   --------------------------------------------------------- */

.news-info {
  grid-column: 1 / span 10;

  display: grid;

  grid-template-columns: repeat(10, minmax(0, 1fr));

  margin-bottom: var(--kh-gap-xxl);

  border-top: var(--kh-pixel) solid currentColor;
}

.news-info__row {
  grid-column: 1 / span 10;

  display: grid;

  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--kh-gap-l);

  padding-block: var(--kh-gap-s);

  border-bottom: var(--kh-pixel) solid currentColor;
}

.news-info__label {
  grid-column: 1 / span 2;

  font-size: var(--kh-text-s);
  line-height: var(--kh-leading-normal);
}

.news-info__value {
  grid-column: 3 / span 8;

  line-height: var(--kh-leading-normal);

  overflow-wrap: anywhere;
}

.news-info__value a {
  color: inherit;
  text-decoration: underline;
}


/* ---------------------------------------------------------
   NEWS CONTENT
   --------------------------------------------------------- */

.news-comment {
  grid-column: 3 / span 6;

  margin-bottom: var(--kh-gap-xxl);
}

.news-comment > :first-child {
  margin-top: 0;
}

.news-comment > :last-child {
  margin-bottom: 0;
}

.news-featured-image {
  grid-column: 1 / span 10;

  margin: 0 0 var(--kh-gap-xxl);
}

.news-featured-image img {
  display: block;

  width: 100%;
  height: auto;
}

.news-content {
  grid-column: 2 / span 8;

  width: 100%;
}

.news-content > :first-child {
  margin-top: 0;
}

.news-content .wp-block-image {
  margin-block: var(--kh-gap-xl);
}

.news-content .wp-block-image img {
  display: block;

  max-width: 100%;
  height: auto;
}

.news-content .wp-block-gallery {
  margin-block: var(--kh-gap-xxl);
}


/* =========================================================
   NEWS ARCHIVE
   ========================================================= */

.news-archive {
  width: 100%;
  max-width: none;

  padding-inline: var(--kh-gap-l);
}

.news-archive__inner {
  display: grid;

  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--kh-gap-l);

  width: 100%;
  max-width: 1440px;

  margin-inline: auto;
}

.news-archive__heading {
  grid-column: 1 / span 12;

  margin: 0;

  padding-block: var(--kh-gap-xxl);

  font-size: var(--kh-text-xl);
  font-weight: 400;
  line-height: var(--kh-leading-tight);
}

.news-archive__query {
  grid-column: 1 / span 12;
}

.news-list {
  display: grid !important;

  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: var(--kh-gap-l);
  row-gap: var(--kh-gap-xxl);

  margin: 0;
  padding: 0;

  list-style: none;
}

.news-list > li {
  grid-column: span 4;

  margin: 0;
  padding: 0;

  list-style: none;
}

.news-item {
  width: 100%;

  margin: 0;
}


/* ---------------------------------------------------------
   NEWS ITEM IMAGE
   --------------------------------------------------------- */

.news-item__image {
  width: 100%;

  margin: 0 0 var(--kh-gap-m);

  overflow: hidden;
}

.news-item__image a {
  display: block;
}

.news-item__image img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  transition: opacity .2s ease;
}

.news-item__image a:hover img {
  opacity: .75;
}


/* ---------------------------------------------------------
   NEWS ITEM META
   --------------------------------------------------------- */

.news-item__meta {
  width: 100%;

  margin: 0;
}

.news-item__date {
  margin: 0 0 var(--kh-gap-xs);

  font-size: var(--kh-text-s);
  line-height: var(--kh-leading-normal);
}

.news-item__title {
  margin: 0;

  font-size: var(--kh-text-m);
  font-weight: 400;
  line-height: var(--kh-leading-normal);
}

.news-item__title a {
  color: inherit;
  text-decoration: none;
}

.news-item__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--kh-pixel);
}


/* ---------------------------------------------------------
   NEWS PAGINATION
   --------------------------------------------------------- */

.news-pagination {
  margin-block: var(--kh-gap-xxl);
  padding-top: var(--kh-gap-m);

  border-top: var(--kh-pixel) solid currentColor;

  font-size: var(--kh-text-s);
  line-height: var(--kh-leading-normal);
}

.news-pagination a {
  color: inherit;
  text-decoration: none;
}

.news-pagination a:hover {
  text-decoration: underline;
}


/* =========================================================
   KH SINGLE / PORTFOLIO / NEWS MOBILE
   ========================================================= */

@media (max-width: 767px) {

  /* -------------------------------------------------------
     KH SINGLE
     ------------------------------------------------------- */

  .kh-single {
    padding-top: var(--kh-gap-xl);
    padding-bottom: var(--kh-gap-xxl);
  }


  /* -------------------------------------------------------
     KH SINGLE NAVIGATION
     ------------------------------------------------------- */

  .kh-single-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--kh-gap-s);
    row-gap: var(--kh-gap-l);

    margin-top: var(--kh-gap-xl) !important;
    padding-top: var(--kh-gap-m);
  }

  .kh-single-nav__previous {
    grid-column: 1 / span 2;
    grid-row: 1;

    font-size: var(--kh-text-s);
  }

  .kh-single-nav__next {
    grid-column: 3 / span 2;
    grid-row: 1;

    font-size: var(--kh-text-s);
  }

  .kh-single-nav__back {
    grid-column: 1 / span 4;
    grid-row: 2;

    justify-content: center;
  }


  /* -------------------------------------------------------
     NEWS SINGLE
     ------------------------------------------------------- */

  .news-single {
    padding-inline: var(--kh-gap-m);
  }

  .news-single__header,
  .news-single__body {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--kh-gap-s);
  }

  .news-single__header {
    padding-top: 0;
    padding-bottom: var(--kh-gap-l);
  }

  .news-single__title,
  .news-single__body > * {
    grid-column: 1 / span 4;
  }

  .news-detail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--kh-gap-s);
  }

  .news-info {
    grid-column: 1 / span 4;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-bottom: var(--kh-gap-xl);
  }

  .news-info__row {
    grid-column: 1 / span 4;

    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--kh-gap-s);
  }

  .news-info__label {
    grid-column: 1;
  }

  .news-info__value {
    grid-column: 2 / span 3;
  }

  .news-comment,
  .news-featured-image,
  .news-content {
    grid-column: 1 / span 4;
  }

  .news-comment,
  .news-featured-image {
    margin-bottom: var(--kh-gap-xl);
  }


  /* -------------------------------------------------------
     NEWS ARCHIVE
     ------------------------------------------------------- */

  .news-archive {
    padding-inline: var(--kh-gap-m);
  }

  .news-archive__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--kh-gap-s);
  }

  .news-archive__heading {
    grid-column: 1 / span 4;

    padding-block: var(--kh-gap-xl);
  }

  .news-archive__query {
    grid-column: 1 / span 4;
  }

  .news-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: var(--kh-gap-s);
    row-gap: var(--kh-gap-xl);
  }

  .news-list > li {
    grid-column: 1 / span 4;
  }

  .news-item__image {
    margin-bottom: var(--kh-gap-s);
  }

  .news-item__title {
    font-size: var(--kh-text-m);
  }

  .news-pagination {
    margin-block: var(--kh-gap-xxl);
  }

}


/* =========================================================
   WPFORMS
   KH DESIGN SYSTEM ADAPTER
   ========================================================= */

.wpforms-container {
  width: 100%;

  margin: 0;
}

.wpforms-container .wpforms-form {
  width: 100%;
}


/* ---------------------------------------------------------
   FIELD
   --------------------------------------------------------- */

.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form input[type="url"],
.wpforms-container .wpforms-form input[type="number"],
.wpforms-container .wpforms-form select,
.wpforms-container .wpforms-form textarea {
  width: 100% !important;
  max-width: none !important;

  background: transparent !important;
  color: inherit !important;

  border-color: currentColor !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  font: inherit !important;
}


/* TEXTAREA */

.wpforms-container .wpforms-form textarea {
  resize: vertical;
}


/* LABEL */

.wpforms-container .wpforms-form .wpforms-field-label {
  color: inherit !important;

  font: inherit !important;
  font-weight: inherit !important;
}


/* REQUIRED */

.wpforms-container .wpforms-form .wpforms-required-label {
  color: inherit !important;
}


/* FIELD ALIGNMENT */

.wpforms-container .wpforms-form .wpforms-field {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* FOCUS */

.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form select:focus,
.wpforms-container .wpforms-form textarea:focus {
  border-color: currentColor !important;

  box-shadow: none !important;
}


/* SUBMIT AREA */

.wpforms-container .wpforms-form .wpforms-submit-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =========================================================
   SOLID
   KH Button + WPForms Submit
   ========================================================= */

.kh-button-solid,
.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form input[type="submit"] {
  color: #f5f0dc !important;
  background: #252525 !important;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.kh-button-solid:hover,
.kh-button-solid:focus-visible,
.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form button[type="submit"]:focus-visible,
.wpforms-container .wpforms-form input[type="submit"]:hover,
.wpforms-container .wpforms-form input[type="submit"]:focus-visible {
  color: #f5f0dc !important;
  background: #252525 !important;

  transform: translate(-2px, -2px);

  box-shadow: 3px 3px 0 #e44b3a !important;
}


/* ---------------------------------------------------------
   ACTIVE
   --------------------------------------------------------- */

.kh-button-solid:active,
.wpforms-container .wpforms-form button[type="submit"]:active,
.wpforms-container .wpforms-form input[type="submit"]:active {
  transform: translate(1px, 1px);

  box-shadow: none !important;
}


/* ---------------------------------------------------------
   WPFORMS CONFIRMATION
   --------------------------------------------------------- */

.wpforms-confirmation-container-full {
  color: inherit !important;

  margin: 0 !important;
  padding: 0 !important;

  background: none !important;

  border: none !important;
}


/* =========================================================
   KH TABLE OF CONTENTS
   ========================================================= */

.kh-toc {
  margin: 0 0 var(--kh-gap-xl);
  padding: var(--kh-gap-l) 0;

  border-top: var(--kh-pixel) solid var(--kh-ink);
  border-bottom: var(--kh-pixel) solid var(--kh-ink);
}

.kh-toc__title {
  margin: 0 0 var(--kh-gap-m);

  font-size: var(--kh-text-s);
  line-height: var(--kh-leading-normal);
}

.kh-toc__list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.kh-toc__item {
  margin: 0 0 var(--kh-gap-s);

  font-size: var(--kh-text-m);
  line-height: var(--kh-leading-normal);
}

.kh-toc__item:last-child {
  margin-bottom: 0;
}

.kh-toc__item--h3 {
  padding-left: var(--kh-gap-m);

  font-size: var(--kh-text-s);
}

.kh-toc__item a {
  color: var(--kh-ink);

  text-decoration: none;
}

.kh-toc__item a:hover {
  color: var(--kh-accent);
}