/*
Theme Name: Khorash Type
Author: Paul Wischnewski
Author URI: https://paulwischnewski.com/
Description: Wordpress Theme by Paul Wischnewski
Version: 0.1
*/

/* 
Root Variables 
*/
:root {
  --full: none;
  --content: 1280px;
  --article: 860px;
  --h-gutter: 1.5rem;
  --v-gutter: clamp(3rem, 8vw, 10vh);
  --section-spacing: clamp(3rem, 8vw, 10vh);
  --text-xs: clamp(0.75rem, 0.6967rem + 0.1333vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8217rem + 0.1333vw, 1rem);
  --text-base: clamp(1rem, 0.9467rem + 0.1333vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.0717rem + 0.1333vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1433rem + 0.2667vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2867rem + 0.5333vw, 2rem);
  --text-3xl: clamp(1.75rem, 1.43rem + 0.8vw, 2.5rem);
  --text-4xl: clamp(2rem, 1.3rem + 2.6667vw, 4.5rem);
  --gray-00: #ffffff;
  --gray-01: #fdfdfc;
  --gray-02: #f9f9f8;
  --gray-03: #f1f0ef;
  --gray-04: #e9e8e6;
  --gray-05: #e2e1de;
  --gray-06: #dad9d6;
  --gray-07: #cfceca;
  --gray-08: #bcbbb5;
  --gray-09: #8d8d86;
  --gray-10: #82827c;
  --gray-11: #63635e;
  --gray-12: #21201c;
  --primary-01: #fcfffe;
  --primary-02: #e9f7f1;
  --primary-03: #d6f5e7;
  --primary-04: #b1e9d3;
  --primary-05: #7ed7ba;
  --primary-06: #49be9b;
  --primary-07: #26a381;
  --primary-08: #188369;
  --primary-09: #136956;
  --primary-10: #125345;
  --primary-11: #0f453b;
  --primary-12: #0a332c;
  --success: #c4e8d1;
  --warning: #ffee9c;
  --error: #e5484d;
  --border-radius: 0.75rem;
  --p-xs: 0.25rem;
  --p-sm: 0.5rem;
  --p-base: 1rem;
  --p-md: 1.5rem;
  --p-lg: 2rem;
  --p-xl: 3rem;
}

/*
Fonts
*/

@font-face {
  font-family: "CoFo Sans";
  src: url("./assets/fonts/CoFoSans/CoFoSans-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "CoFo Sans Mono";
  src: url("./assets/fonts/CoFoSansMono/CoFoSansMono-Regular.woff2")
    format("woff2");
  font-weight: 400;
}

body {
  font-family: "CoFo Sans";
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
.content {
  padding: 0;
}
.mono {
  font-family: "CoFo Sans Mono";
}
/*
Header
*/
.header {
  width: 100%;
  z-index: 999;
  border-bottom: 1px solid var(--gray-04);
  position: fixed;
  background-color: var(--gray-00);
}
.header__wrapper {
  max-width: var(--content);
  width: 100%;
  margin: 0 auto;
  padding: calc(var(--h-gutter) / 2) var(--h-gutter);
  font-size: var(--text-sm);
}
.header__wrapper > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__logo {
  width: fit-content;
  z-index: 1;
  transition: all 300ms ease;
}
.nav__list {
  display: flex;
  gap: 1rem;
}
.nav__list li {
  color: var(--gray-10);
  line-height: 1;
}
.nav__list li:hover {
  color: var(--gray-12);
}
.nav__list li.current {
  color: var(--gray-12);
}
.header__button-open svg {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
}
.header__button-close svg {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
}
.header__button {
  display: none;
  z-index: 1;
}
.header-active .header__nav {
  transform: translate(0, 0);
}
.content {
  padding-top: 45px;
}

@media (max-width: 480px) {
  .content {
    padding-top: 56px;
  }
  .header {
    background-color: var(--gray-02);
    border-bottom: 1px solid var(--gray-03);
  }
  .header__wrapper {
    padding: 1rem var(--h-gutter);
  }
  .header__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gray-02);
    height: 100vh;
    transform: translate(0, -120%);
  }
  .nav__list {
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
    position: relative;
    padding: calc(var(--v-gutter) * 2) var(--h-gutter);
  }
  .nav__list li {
    font-size: var(--text-xl);
  }
  .header__button {
    display: flex;
  }
  .header__button-close {
    display: none;
  }
  .header {
    position: fixed;
    top: 0;
    left: 0;
  }
  .header-active .header__button-close {
    display: block;
  }
  .header-active .header__button-open {
    display: none;
  }
}

.button {
  width: fit-content;
  line-height: 1;
  padding: var(--p-sm) var(--p-base);
  border-radius: calc(var(--border-radius) * 2);
  font-size: var(--text-sm);
  display: inline-block;
}
.button-outline {
  background-color: transparent;
  border: 1px solid var(--gray-08);
}
.button-outline:hover {
  border-color: var(--gray-12);
}
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-sm);
}
.w-full {
  max-width: 100%;
  margin: 0 auto;
}
.w-content {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0;
}
.gutter {
  padding: 0 var(--h-gutter);
}
.hero__single,
.hero__page {
  padding-top: var(--section-spacing) !important;
}
.typography-hero-headline {
  font-size: var(--text-3xl);
}
.typography-hero-subheadline {
  font-size: var(--text-xs);
  text-wrap: balance;
  color: var(--gray-10);
  margin-top: var(--p-sm);
}
.typography-subheadline {
  font-size: var(--text-xl);
  text-wrap: balance;
}
.section-subheadline + p {
  margin-top: var(--p-sm);
}
.divider {
  max-width: 68ch;
  margin: 0 auto;
}
.section {
  padding: 0 var(--h-gutter);
}
.section + .section {
  margin-top: calc(var(--section-spacing) / 2);
  padding-top: calc(var(--section-spacing) / 2);
}
.blog .section + .section {
  border-top: 0;
}
.blog .hero__blog + .section {
  border-top: 1px solid var(--gray-04);
}
.section-text,
.hero__blog-copy {
  max-width: 68ch;
  margin: 0 auto;
}
/*
Swiper
*/
.gallery-slider {
  overflow: hidden;
  position: relative;
}
.gallery-slider .swiper-wrapper {
  align-items: center;
}
.swiper {
  display: flex;
  flex-direction: column;
  position: relative;
  touch-action: pen-x;
}
.swiper-slide-img {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.swiper-slide-img img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  max-width: none;
  max-height: none;
}
.swiper-nav {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}
.swiper-pagination {
  margin-top: 0.5rem;
  position: relative;
  display: block;
  bottom: unset !important;
  top: unset !important;
}
.swiper-pagination-bullet-active {
  background-color: var(--gray-12);
}
.swiper-nav-next,
.swiper-nav-prev {
  width: 10vw;
  color: var(--gray-12);
  height: 100%;
}
.swiper-nav-next svg,
.swiper-nav-prev svg {
  width: 100%;
  height: 1.25rem;
}

.section-typeface-info {
  margin-bottom: var(--section-spacing);
  margin-top: var(--section-spacing);
}

.section-image {
  max-width: 80ch;
  margin: 0 auto;
  overflow: hidden;
}
.section-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.section-image figcaption {
  font-size: var(--text-xs);
  color: var(--gray-10);
  margin-top: var(--p-xs);
}
.hero__blog-cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: var(--p-lg) auto;
}
.section-font-tester {
  transition: all 300ms ease;
}
.section + .section-font-tester {
  padding-top: calc(var(--section-spacing) / 2);
}
.font-tester__settings {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--h-gutter);
  row-gap: calc(var(--h-gutter) / 2);
  font-size: var(--text-xs);
  position: relative;
  z-index: 9999;
  padding-bottom: var(--p-lg);
}
.font-tester__settings.active {
  display: grid;
}
.font-tester__settings svg {
  width: 1rem;
  height: auto;
  fill: currentColor;
  flex-shrink: 0;
}
.variable-font-tester .font-tester {
  outline: 1px solid var(--gray-04);
  outline-offset: 1rem;
}
.text {
  will-change: font-size;
}

.font-tester__headline .font-tester__text {
  line-height: 1;
  margin: 0 -1rem;
  padding: 0 1rem;
  text-align: center;
}
/* @keyframes ginto-animation {
  from {
    font-variation-settings: "wght" 0, "ital" 0;
  }
  to {
    font-variation-settings: "wght" 1000, "ital" 1000;
  }
}
.font-tester__headline .font-tester__text {
  transition: font-variation-settings 2s ease;
  animation-name: ginto-animation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
} */
.font-tester__text:focus-visible {
  all: unset;
  line-height: 1.2;
}
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
  /*   overflow-wrap: break-word;
 */
  outline: none;
}
.font-tester__body .text {
  column-gap: var(--h-gutter);
}
.font-tester__range-wrapper,
.font-tester__align-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

input[type="range"] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
  flex-shrink: 1;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: var(--gray-12);
  border-radius: 2rem;
  cursor: pointer;
  margin-top: -5px;
}

input[type="range"]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: var(--gray-08);
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: var(--gray-08);
}

input[type="range"]::-moz-range-track {
  width: 100%;
  max-width: 12rem;
  height: 1px;
  cursor: pointer;
  background: var(--gray-08);
}

input[type="range"]::-ms-track {
  width: 100%;
  max-width: 12rem;
  height: 1px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: var(--gray-08);
}
input[type="range"]:focus::-ms-fill-lower {
  background: var(--gray-08);
}
input[type="range"]::-ms-fill-upper {
  background: var(--gray-08);
}
.font-tester__text-align {
  opacity: 0.25;
}
.font-tester__text-align.active {
  opacity: 1;
}
.font-tester__fw,
.font-tester__otf,
.font-tester__ss {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.font-tester__fw select,
.font-tester__otf select,
.font-tester__ss select {
  width: 100%;
  max-height: 3rem !important;
}
.font-tester__fw select:focus-visible,
.font-tester__otf select:focus-visible .font-tester__ss select:focus-visible {
  outline: none;
}
.font-tester__select-control {
  width: 100%;
  position: relative;
  border-bottom: 1px solid var(--gray-04);
}
.font-tester__fw-button,
.font-tester__otf-button,
.font-tester__ss-button {
  display: flex;
  justify-content: space-between;
  z-index: 1;
}
.fw-button {
  width: 100%;
  text-align: left;
}
.fw-button.active {
  color: var(--gray-12);
}
.font-tester__fw-list,
.font-tester__otf-list,
.font-tester__ss-list {
  position: absolute;
  top: 120%;
  left: 0;
  width: 100%;
  padding: var(--p-sm);
  background-color: var(--gray-00);
  z-index: 9999;
  max-height: 7.5rem;
  overflow-y: auto;
  border: 1px solid var(--gray-04);
  border-radius: 4px;
}
.hidden {
  display: none;
}
.font-tester__fw-option,
.font-tester__otf-option,
.font-tester__ss-option {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  color: var(--gray-10);
}
.font-tester__fw-option + .font-tester__fw-option,
.font-tester__otf-option + .font-tester__otf-option,
.font-tester__ss-option + .font-tester__ss-option {
  margin-top: var(--p-sm);
}
.font-tester__otf-option input,
.font-tester__ss-option input {
  height: fit-content;
  margin-top: 0.25rem;
}
.font-tester__fw-option:hover,
.font-tester__otf-option:hover,
.font-tester__ss-option:hover {
  color: var(--gray-12);
}

.text-fit {
  display: flex;
  container-type: inline-size;

  --captured-length: initial;
  --support-sentinel: var(--captured-length, 9999px);

  & > [aria-hidden] {
    visibility: hidden;
  }

  & > :not([aria-hidden]) {
    flex-grow: 1;
    container-type: inline-size;
    overflow: visible;
    will-change: font-size;

    --captured-length: 100cqi;
    --available-space: var(--captured-length);

    & > * {
      --support-sentinel: inherit;
      --captured-length: 100cqi;
      --ratio: tan(
        atan2(
          var(--available-space),
          var(--available-space) - var(--captured-length)
        )
      );
      --font-size: clamp(
        1em,
        1em * var(--ratio),
        var(--max-font-size, infinity * 1px) - var(--support-sentinel)
      );
      inline-size: var(--available-space);

      &:not(.text-fit) {
        display: block;
        font-size: var(--font-size);
        word-break: break-word;
      }

      &.text-fit {
        position: relative;
        --captured-length2: var(--font-size);
        font-variation-settings: "opsz" tan(atan2(var(--captured-length2), 1px));
      }
    }
  }
}

@property --captured-length {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --captured-length2 {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

.typefaces-teaser {
  padding: 0;
  line-height: 1.2;
}

.typefaces-teaser + .typefaces-teaser {
  border-top: 1px solid var(--gray-04);
  margin-top: var(--p-lg);
  padding-top: var(--p-lg);
}

.typeface-info__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--h-gutter);
}
.typeface-info__facts {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--h-gutter);
}
.typeface-info__facts h1 {
  margin-bottom: var(--p-sm);
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
  gap: 1rem;
  padding: var(--section-spacing) 0;
}

/*
Section Gallery
*/

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
  gap: var(--h-gutter);
}
.section-gallery + .section-gallery {
  padding-top: var(--h-gutter);
}
.gallery-image {
  width: 100%;
  overflow: hidden;
}
.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.image-orientation-landscape {
  aspect-ratio: 4 / 3;
}
.image-orientation-portrait {
  aspect-ratio: 3 / 4;
}

/*
Section About
*/
.section-about .mono,
.section-language-support .mono {
  color: var(--gray-10);
  font-size: var(--text-xs);
  margin-bottom: var(--p-sm);
  padding-bottom: var(--p-sm);
  border-bottom: 1px solid var(--gray-04);
}
.about-grid {
  display: flex;
  justify-content: space-between;
  gap: var(--h-gutter);
}
.about-text {
  max-width: 56ch;
  text-wrap: balance;
}
.about-text p + p {
  margin-top: var(--p-base);
}
.about-aside,
.about-main {
  display: flex;
  flex-direction: column;
  gap: var(--p-xl);
}
.about-aside ul {
  font-size: var(--text-sm);
}
.section-about a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1rem;
  text-decoration-color: var(--gray-08);
}
.section-about a:hover {
  text-decoration-color: var(--gray-12);
}
.blog-posts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--h-gutter);
}
.blog-post-cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.blog-post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.blog-post-copy {
  margin-top: var(--p-sm);
}
.typography-blog-post {
  color: var(--gray-10);
  line-height: 1.2;
  text-wrap: balance;
  max-width: 48ch;
  font-size: var(--text-sm);
}
.blog-posts-card:hover .typography-blog-post {
  color: var(--gray-12);
}

.section-footer {
  font-size: var(--text-sm);
  color: var(--gray-10);
  margin: 0 auto;
  margin-top: var(--section-spacing);
  font-size: var(--text-xs);
}
.section-footer a:hover {
  color: var(--gray-12);
}
.footer-subsection {
  padding: var(--p-md) 0;
  border-top: 1px solid var(--gray-04);
}
.top-footer > div,
.lower-footer > div {
  padding: 0 var(--h-gutter);
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}
.language-support__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--h-gutter);
  margin-top: var(--p-md);
}
.language-support__item.latin {
  grid-column: span 2;
}
.language-support__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  row-gap: 0;
}
@media (max-width: 1280px) {
  .font-tester__settings {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1024px) {
  .font-tester__settings {
    grid-template-columns: repeat(3, 1fr);
  }
  .about-grid {
    flex-direction: column;
    display: flex;
    gap: var(--p-xl);
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .blog-posts {
    grid-template-columns: 1fr;
  }
  .about-grid {
    flex-direction: column;
    display: flex;
    gap: var(--p-xl);
  }
  .typeface-info__grid {
    grid-template-columns: 1fr;
  }

  .font-tester__text {
    column-count: 1 !important;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--gray-12);
    border-radius: 2rem;
    cursor: pointer;
    margin-top: -7px;
    padding: 0.25rem;
    box-shadow: none;
  }
  .font-tester__settings {
    grid-template-columns: 1fr;
  }
  .font-tester__range-wrapper,
  .font-tester__align-wrapper,
  .font-tester__otf {
    display: none;
  }
  .variable-font-tester [class^="range-"],
  .variable-font-tester [class*=" range-"] {
    display: flex;
  }
}
@media (max-width: 480px) {
  .about-portrait img {
    width: 100%;
  }
  .swiper-nav {
    display: none;
  }
  .font-tester__settings {
    gap: 1.5rem;
  }
}

.typeface-characters__wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--h-gutter);
  margin-top: var(--p-md);
}
@media (max-width: 768px) {
  .section-typeface-characters {
    display: none;
  }
  .typeface-characters__wrapper {
    grid-template-columns: 1fr;
  }
}
.typeface-character {
  width: 100%;
}
.typeface-character > div {
  position: sticky;
  top: calc(var(--v-gutter) * 1.5);
  width: 100%;
  border: 1px solid var(--gray-04);
}
#typeface-character__hover {
  text-align: center;
  padding-top: 3rem;
  line-height: 2;
  font-size: clamp(6rem, -2.5714rem + 27.4286vw, 18rem);
}
#font-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  width: 100%;
  gap: 4px;
  height: fit-content;
}
#font-grid-container div {
  aspect-ratio: 1 / 1;
  line-height: 1.2;
  padding-top: 0.25rem;
  font-size: 20px;
  border: 1px solid var(--gray-04);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--gray-08);
}
#font-grid-container div:hover {
  color: var(--gray-12);
}

.section-typefaces {
  padding: 0;
}
.typeface-card {
  display: flex;
  flex-direction: column;
  background-color: var(--gray-12);
  color: var(--gray-00);
}
.typeface-card a {
  cursor: pointer;
}
.typeface-card__info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 1;
  padding: calc(var(--h-gutter) / 2) var(--h-gutter);
  font-size: var(--text-sm);
}
.typeface-card__info > div {
  height: fit-content;
  display: flex;
  justify-content: space-between;
  width: calc(100% - var(--h-gutter) * 2);
  background-color: var(--gray-00);
  color: var(--gray-09);
  padding: 0.25rem var(--h-gutter);
}
.typeface-card a:hover .typeface-card__info > div {
  color: var(--gray-12);
}
.typeface-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.typeface-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.typeface-list__item {
  display: flex;
  flex-direction: column;
}
.typeface-list__item:first-of-type {
  padding-top: var(--p-lg);
  border-top: 1px solid var(--gray-04);
}
.typeface-list__item + .typeface-list__item {
  margin-top: var(--p-lg);
  padding-top: var(--p-lg);
  border-top: 1px solid var(--gray-04);
}
.typeface-list__item:hover > .typeface-list__info {
  color: var(--gray-12);
}
.typeface-list__item:last-of-type {
  margin-bottom: var(--p-lg);
  padding-bottom: var(--p-lg);
  border-bottom: 1px solid var(--gray-04);
}
.typeface-list__info {
  color: var(--gray-09);
  display: flex;
  justify-content: space-between;
}