/*!
Theme Name: Karol Wyszomirski
Theme URI: https://karolwyszomirski.pl/
Author: AULON
Author URI: https://aulon.pl
Description: Minimal block theme for the Karol Wyszomirski WordPress site.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: kw
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

html,
body {
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.wp-site-blocks {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.wp-site-blocks > main {
  width: 100%;
  flex: 1 0 auto;
}

.wp-site-blocks > header,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part {
  flex: 0 0 auto;
}

.kw-template {
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.kw-template,
.kw-template * {
  box-sizing: border-box;
}

.kw-template > * + * {
  margin-block-start: 1.5rem;
}

.kw-template__title,
.kw-article__title {
  max-width: 900px;
  margin-block: 0;
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.12;
}

.kw-template__intro {
  margin-bottom: 2.25rem;
}

.kw-template__eyebrow {
  margin: 0 0 0.75rem;
  color: #168f24;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  line-height: 1.35;
}

.kw-template__lead,
.kw-template__description,
.kw-template .taxonomy-description {
  max-width: 760px;
  color: #4d5558;
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.75;
}

.kw-breadcrumbs {
  margin-bottom: 1.25rem;
  color: #556063;
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--small);
}

.kw-breadcrumbs a {
  color: inherit;
}

.kw-post-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kw-post-list > li {
  min-width: 0;
}

.kw-post-card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid rgba(18, 22, 24, 0.14);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(3, 7, 9, 0.045);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.kw-post-card:hover,
.kw-post-card:focus-within {
  border-color: rgba(34, 214, 47, 0.44);
  box-shadow: 0 22px 56px rgba(3, 7, 9, 0.08);
  transform: translateY(-2px);
}

.kw-post-card__image {
  width: 100%;
  margin: 0 0 1rem;
  overflow: hidden;
  border: 1px solid rgba(18, 22, 24, 0.1);
  border-radius: 7px;
  background:
    linear-gradient(rgba(18, 22, 24, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 22, 24, 0.04) 1px, transparent 1px), #f7f7f4;
  background-size: 18px 18px;
}

.kw-post-card__image a,
.kw-post-card__image img {
  display: block;
  width: 100%;
}

.kw-post-card__image img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  transition: transform 220ms ease;
}

.kw-post-card:hover .kw-post-card__image img,
.kw-post-card:focus-within .kw-post-card__image img {
  transform: scale(1.025);
}

.kw-post-card h2 {
  margin: 0;
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.kw-post-card h2 a {
  color: #030709;
  text-decoration: none;
}

.kw-post-card h2 a:hover,
.kw-post-card h2 a:focus-visible {
  color: #168f24;
}

.kw-post-card__meta,
.kw-post-meta {
  color: #566063;
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--small);
}

.kw-post-card__meta {
  gap: 0.75rem 1.25rem;
  margin-top: 0.75rem;
  line-height: 1.45;
}

.kw-post-card__meta a {
  color: inherit;
  text-decoration-color: rgba(34, 214, 47, 0.45);
  text-underline-offset: 0.18em;
}

.kw-post-card .wp-block-post-excerpt {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 1rem;
  color: #363e41;
  font-family: var(--wp--preset--font-family--system);
  line-height: 1.7;
}

.kw-post-card .wp-block-post-excerpt p {
  margin-block: 0;
}

.kw-post-card .wp-block-post-excerpt__more-link {
  display: inline-flex;
  width: fit-content;
  min-height: 2.625rem;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(18, 22, 24, 0.16);
  border-radius: 7px;
  color: #0b0d0e;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}

.kw-post-card .wp-block-post-excerpt__more-link:hover,
.kw-post-card .wp-block-post-excerpt__more-link:focus-visible {
  border-color: #22d62f;
  background: #22d62f;
  color: #030709;
}

.kw-category-list {
  margin-top: 1.5rem;
}

.kw-category-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kw-category-list a {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  padding: 0 0.875rem;
  border: 1px solid rgba(18, 22, 24, 0.14);
  border-radius: 8px;
  background: #ffffff;
  text-decoration: none;
}

.kw-template--blog {
  padding-inline: clamp(1rem, 4vw, 3rem);
  overflow-x: clip;
  background-image:
    linear-gradient(rgba(18, 22, 24, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 22, 24, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #f7f7f4 0, #ffffff 24rem, #f7f7f4 100%);
  background-size:
    32px 32px,
    32px 32px,
    auto;
}

.kw-template--blog > .kw-breadcrumbs,
.kw-template--blog > .kw-template__intro,
.kw-template--blog > .wp-block-query {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.kw-template--blog > .kw-breadcrumbs {
  margin-bottom: 1rem;
}

.kw-template--blog .kw-breadcrumbs {
  overflow-wrap: anywhere;
}

.kw-template--blog > .kw-template__intro {
  position: relative;
  max-width: 900px !important;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  overflow: hidden;
  border: 1px solid rgba(18, 22, 24, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(34, 214, 47, 0.11), rgba(25, 198, 212, 0.09), transparent) 0 0 /
      100% 5px no-repeat,
    #ffffff;
  box-shadow: 0 24px 70px rgba(3, 7, 9, 0.06);
}

.kw-template--blog .kw-template__title {
  color: #030709;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.kw-template--blog .kw-template__lead {
  margin-top: 1rem;
  color: #30383b;
}

.kw-template--blog > .wp-block-query {
  max-width: 1180px !important;
}

.kw-template--blog .kw-post-list {
  margin-top: 0;
}

.kw-query-pagination {
  gap: 0.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  font-family: var(--wp--preset--font-family--protocol-mono);
}

.kw-query-pagination .wp-block-query-pagination-previous,
.kw-query-pagination .wp-block-query-pagination-next,
.kw-query-pagination .page-numbers {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(18, 22, 24, 0.14);
  border-radius: 7px;
  background: #ffffff;
  color: #030709;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}

.kw-query-pagination .page-numbers.current,
.kw-query-pagination a:hover,
.kw-query-pagination a:focus-visible {
  border-color: #22d62f;
  background: #22d62f;
  color: #030709;
}

.kw-query-empty {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.25rem;
  border: 1px solid rgba(18, 22, 24, 0.14);
  border-radius: 8px;
  background: #ffffff;
  color: #4d5558;
  font-family: var(--wp--preset--font-family--system);
  line-height: 1.7;
}

.kw-template--single,
.kw-template--single * {
  box-sizing: border-box;
}

.kw-template--single {
  padding-inline: clamp(1rem, 4vw, 3rem);
  overflow-x: clip;
  background-image:
    linear-gradient(rgba(18, 22, 24, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 22, 24, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #f7f7f4 0, #ffffff 26rem, #f7f7f4 100%);
  background-size:
    32px 32px,
    32px 32px,
    auto;
}

.kw-template--single > .kw-breadcrumbs,
.kw-template--single > .kw-related-posts {
  width: min(100%, 900px);
  margin-inline: auto;
}

.kw-template--single > .kw-breadcrumbs {
  margin-bottom: 1rem;
}

.kw-template--single .kw-breadcrumbs {
  overflow-wrap: anywhere;
}

.kw-article {
  position: relative;
  width: min(100%, 900px);
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 1px solid rgba(18, 22, 24, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(34, 214, 47, 0.1), rgba(25, 198, 212, 0.08), transparent) 0 0 / 100%
      5px no-repeat,
    #ffffff;
  box-shadow: 0 24px 70px rgba(3, 7, 9, 0.06);
}

.kw-template--single .kw-article__title {
  max-width: 760px;
  margin-inline: auto;
  color: #030709;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.kw-post-meta {
  display: grid;
  max-width: 760px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem auto 2.25rem;
  color: #566063;
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--small);
}

.kw-post-meta div {
  min-width: 0;
  padding: 0.875rem;
  border: 1px solid rgba(18, 22, 24, 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0, #f7f7f4 100%);
}

.kw-post-meta dt {
  color: #0b0d0e;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.kw-post-meta dd {
  min-width: 0;
  margin: 0.35rem 0 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.kw-post-meta a {
  color: inherit;
  text-decoration-color: rgba(34, 214, 47, 0.5);
  text-underline-offset: 0.18em;
}

.kw-article__featured {
  max-width: 760px;
  margin: 2.5rem auto;
}

.kw-article__featured img {
  width: 100%;
  border: 1px solid rgba(18, 22, 24, 0.14);
  border-radius: 8px;
}

.kw-article__content {
  max-width: 760px;
  margin-inline: auto;
  color: #202729;
  font-family: var(--wp--preset--font-family--system);
  font-size: 1.0625rem;
  line-height: 1.82;
  overflow-wrap: break-word;
}

.kw-article__content > * {
  margin-block: 0;
}

.kw-article__content > * + * {
  margin-block-start: 1.45rem;
}

.kw-article__content p {
  margin-block: 0;
}

.kw-article__content .kw-post-lead {
  padding-bottom: 1.45rem;
  border-bottom: 1px solid rgba(18, 22, 24, 0.12);
  color: #30383b;
  font-size: 1.125rem;
  line-height: 1.78;
}

.kw-article__content a {
  color: #030709;
  font-weight: 600;
  text-decoration-color: rgba(34, 214, 47, 0.65);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

.kw-article__content a:hover,
.kw-article__content a:focus-visible {
  color: #168f24;
  text-decoration-color: currentColor;
}

.kw-article__content h2,
.kw-article__content h3 {
  color: #030709;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-weight: 800;
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.kw-article__content h2 {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-block-start: 3rem;
  padding-block-start: 1.35rem;
  border-top: 1px solid rgba(18, 22, 24, 0.13);
  font-size: 1.75rem;
}

.kw-article__content h2::before {
  flex: 0 0 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.54em;
  background: #22d62f;
  box-shadow: 0 0 0 4px rgba(34, 214, 47, 0.12);
  content: "";
}

.kw-article__content h3 {
  margin-block-start: 2.25rem;
  font-size: 1.25rem;
}

.kw-article__content ul,
.kw-article__content ol {
  display: grid;
  gap: 0.75rem;
  padding-inline-start: 1.35rem;
}

.kw-article__content li {
  padding-inline-start: 0.35rem;
}

.kw-article__content li::marker {
  color: #168f24;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-weight: 800;
}

.kw-article__content blockquote {
  margin-inline: 0;
  padding: 1.25rem 1.35rem;
  border: 1px solid rgba(18, 22, 24, 0.13);
  border-left: 4px solid #22d62f;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(34, 214, 47, 0.08), #ffffff 58%);
  color: #0b0d0e;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-size: 1rem;
  line-height: 1.7;
}

.kw-article__content blockquote > * {
  margin-block: 0;
}

.kw-article__content blockquote > * + * {
  margin-block-start: 0.75rem;
}

.kw-article__content figure {
  margin-inline: 0;
}

.kw-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.kw-article__content figcaption {
  margin-top: 0.65rem;
  color: #657073;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
  text-align: left;
}

.kw-article__content code {
  padding: 0.12em 0.38em;
  border: 1px solid rgba(18, 22, 24, 0.12);
  border-radius: 5px;
  background: #f1f5f0;
  color: #030709;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.kw-article__content pre,
.kw-article__content .wp-block-code,
.editor-styles-wrapper .wp-block-code {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-block: 2rem;
  overflow-x: auto;
  border-radius: 8px;
  background: #030709;
  color: #f7fff8;
}

.kw-article__content pre,
.editor-styles-wrapper .wp-block-code {
  padding: 1rem;
  border: 1px solid rgba(25, 198, 212, 0.28);
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-size: 0.875rem;
  line-height: 1.65;
}

.kw-article__content pre code,
.kw-article__content .wp-block-code code,
.editor-styles-wrapper .wp-block-code code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  overflow-wrap: inherit;
}

.kw-article__content hr {
  height: 1px;
  margin-block: 2.5rem;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(18, 22, 24, 0.18), transparent);
}

.kw-article__content .wp-block-button {
  margin-block-start: 2rem;
}

.kw-article__content .wp-block-button__link {
  min-height: 2.875rem;
  padding: 0.85rem 1.15rem;
  border: 1px solid #030709;
  border-radius: 7px;
  background: #030709;
  color: #ffffff;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.kw-article__content .wp-block-button__link:hover,
.kw-article__content .wp-block-button__link:focus-visible {
  border-color: #168f24;
  background: #22d62f;
  color: #030709;
}

.kw-article__content .alignwide,
.kw-article__content .alignfull {
  width: min(100%, 100%);
  max-width: 100%;
  margin-inline: auto;
}

.kw-related-posts {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.kw-related-posts h2 {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin: 0 0 1rem;
  color: #030709;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-size: 1.5rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.kw-related-posts h2::before {
  width: 0.5rem;
  height: 0.5rem;
  background: #19c6d4;
  content: "";
}

.kw-related-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.kw-related-posts__item {
  min-width: 0;
  border: 1px solid rgba(18, 22, 24, 0.14);
  border-radius: 8px;
  background: #ffffff;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.kw-related-posts__item:hover,
.kw-related-posts__item:focus-within {
  border-color: rgba(34, 214, 47, 0.45);
  box-shadow: 0 18px 42px rgba(3, 7, 9, 0.08);
  transform: translateY(-2px);
}

.kw-related-posts__item a {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
}

.kw-related-posts__item span {
  color: #566063;
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--small);
}

.kw-related-posts__item h3 {
  margin: 0.5rem 0 0;
  color: #030709;
  font-family: var(--wp--preset--font-family--protocol-mono);
  font-size: 1.125rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.kw-related-posts__item p {
  margin: 0.75rem 0 0;
  color: #4d5558;
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .kw-post-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kw-post-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kw-related-posts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .kw-template--blog .kw-template__title {
    font-size: 2.4rem;
  }

  .kw-template--single .kw-article__title {
    font-size: 2.4rem;
  }

  .kw-article__content {
    font-size: 1rem;
    line-height: 1.76;
  }

  .kw-article__content h2 {
    font-size: 1.45rem;
  }
}

@media (max-width: 620px) {
  .kw-template--blog {
    padding-inline: 1rem;
  }

  .kw-template--blog .kw-template__title {
    font-size: 2rem;
  }

  .kw-post-list {
    grid-template-columns: 1fr;
  }

  .kw-query-pagination {
    justify-content: flex-start !important;
  }

  .kw-template--single {
    padding-inline: 1rem;
  }

  .kw-template--single .kw-article__title {
    font-size: 2rem;
  }

  .kw-post-meta,
  .kw-related-posts__grid {
    grid-template-columns: 1fr;
  }
}