/**
 * * Function to generate color shades.
 *
 * ? This function takes a base color and a step value as parameters and returns a color shade based on the step value.
 * ? If the step value is positive, the function darkens the color by multiplying the step value with 5.
 * ? If the step value is negative, the function lightens the color by multiplying the absolute value of the step with 10.
 *
 * @param {Color} $color - The base color.
 * @param {Number} $step - The step value.
 * @return {Color} - The generated color shade.
 */
/**
 * * Function to create a color map.
 *
 * ? This function takes a base color as a parameter and generates a color map with shades of the base color.
 * ? The color map is created by iterating over a range of values from 1 to 9 and calling the generate-shades function for each value.
 * ? The generated shades are then merged into the color map using the map-merge function.
 *
 * @param {Color} $color - The base color.
 * @return {Map} - The color map with shades of the base color.
 */
/**
 * * Converts pixels to rems.
 *
 * @param {number} $px - The value in pixels.
 * @return {number} The converted value in rems.
 */
/**
 * * Mixin for creating a flex container with customizable properties.
 *
 * @param {string} $direction - The flex direction. Defaults to 'row'.
 * @param {string} $justify - The flex justify content. Defaults to 'flex-start'.
 * @param {string} $align - The flex align items. Defaults to 'flex-start'.
 * @param {string} $wrap - The flex wrap. Defaults to 'nowrap'.
 * @param {number} $colGap - The column gap. Defaults to 0.
 * @param {number} $rowGap - The row gap. Defaults to 0.
 *
 * ? @example Usage:
 * ?  .container {
 * ?    @include d-flex(row, flex-start, flex-start, nowrap, 10px, 20px);
 * ?  }
 */
/**
 * * @mixin container-query
 * * @description A mixin for creating container queries.
 * 
 * @param {String} $containerName - The name of the container.
 * @param {String} $breakpoint - The breakpoint value.
 * @param {String} $condition - The condition for the container query. Default value is 'lt'.
 * 
 * @returns {CSS} The container query styles.
 */
/**
 * * @mixin container-query-between
 * * @description A mixin for creating container queries between two breakpoints.
 * 
 * @param {String} $containerName - The name of the container.
 * @param {String} $minBreakpoint - The minimum breakpoint value.
 * @param {String} $maxBreakpoint - The maximum breakpoint value.
 * 
 * @returns {Mixin} - The container query mixin.
 */
/**
 * * Mixin for applying line clamp to a text element.
 *
 * @param {number} $lines - The number of lines to clamp the text to. Default is 2.
 * @param {string} $fontSize - The font size of the text. Default is clamp(.8rem, 2vw, 1rem).
 * @param {number} $lineHeight - The line height of the text. Default is 1.5.
 * @param {string} $textAlign - The text alignment. Default is center.
 *
 * ? @example Usage:
 * ? .my-text {
 * ?   @include line-clamp(3, 1rem, 1.2, left);
 * ? }
 */
.gpw-breadcrumbs {
  padding-block: var(--spacing-lg) var(--spacing-xl);
}
.gpw-breadcrumbs p {
  margin: 0;
}
.gpw-breadcrumbs a {
  color: var(--primary-color-500);
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.gpw-breadcrumbs a:hover {
  color: var(--primary-color-700);
}

.gpw-post {
  --_thumbnail-width: 30%;
  --_border-color: var(--gray-color-50);
  --_content-items-spacing: var(--spacing-xs);
  padding: var(--spacing-md);
  display: grid;
  gap: var(--spacing-md);
  border: 0.0625rem solid var(--_border-color);
  border-radius: var(--spacing-xs);
  -webkit-transition: border-color 150ms ease-in-out;
  transition: border-color 150ms ease-in-out;
}
@container content ( width > 34.375rem ) {
  .gpw-post--horizontal {
    grid-template-columns: var(--_thumbnail-width) minmax(0, 1fr);
  }
}
.gpw-post__thumbnail {
  display: block;
  aspect-ratio: 5/3;
}
.gpw-post__thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.gpw-post__title a {
  color: var(--base-color);
  -webkit-transition: color 250ms ease-in-out;
  transition: color 250ms ease-in-out;
  font-size: var(--fs-md);
  line-height: 1.3;
  text-align: left;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: pretty;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.gpw-post__title a:hover {
  color: var(--primary-color-500);
}
.gpw-post__excerpt {
  font-size: var(--fs-sm);
  line-height: 1.3;
  text-align: left;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: pretty;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.gpw-post__title, .gpw-post__excerpt {
  margin-bottom: var(--_content-items-spacing);
}
.gpw-post__meta {
  display: grid;
  gap: var(--_content-items-spacing);
}
.gpw-post__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: var(--spacing-xs) var(--spacing-xs);
}
.gpw-post__tag {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--spacing-xs);
  background-color: var(--gray-color-50);
  font-size: var(--fs-xs);
  color: var(--gray-color-400);
  line-height: 1;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.gpw-post__tag:hover {
  color: var(--gray-color-800);
}
.gpw-post:hover {
  --_border-color: var(--primary-color-500);
}

.gpw-post-sidebar {
  --_border-color: var(--gray-color-100);
}
.gpw-post-sidebar .widget {
  border: 0.0625rem solid var(--_border-color);
  padding: clamp(var(--spacing-sm), 2cqi, var(--spacing-md));
}
.gpw-post-sidebar .widget-title {
  display: inline-block;
  margin-bottom: var(--spacing-lg);
  font-size: var(--fs-sm);
  color: var(--primary-color-500);
  text-transform: none;
  border-bottom: 0.125rem solid currentColor;
}
.gpw-post-sidebar .widget .is-divider {
  display: none;
}
.gpw-post-sidebar .gpw-most-view-post-widget__item {
  padding-block: var(--spacing-sm);
  display: grid;
  grid-template-columns: 25% minmax(0, 1fr);
  gap: var(--spacing-sm);
  border-color: var(--_border-color);
}
.gpw-post-sidebar .gpw-most-view-post-widget__item a {
  padding: 0;
}
.gpw-post-sidebar .gpw-most-view-post-widget__item-thumbnail {
  display: block;
  aspect-ratio: 4/3;
}
.gpw-post-sidebar .gpw-most-view-post-widget__item-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.gpw-post-sidebar .gpw-most-view-post-widget__item-title {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-align: left;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: pretty;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.gpw-navigation {
  padding-block: var(--spacing-lg) 0;
}
.gpw-navigation__main-nav, .gpw-navigation__child-nav {
  margin-bottom: 0;
  list-style: none;
}
.gpw-navigation__main-nav, .gpw-navigation__child-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: var(--spacing-sm) var(--spacing-sm);
}
.gpw-navigation__main-nav-item, .gpw-navigation__child-nav-item {
  margin: 0;
}
.gpw-navigation__main-nav-item a, .gpw-navigation__child-nav-item a {
  --_text-color: #fff;
  display: inline-block;
  padding: var(--spacing-md);
  background-color: var(--_background-color, var(--primary-color-500));
  border-radius: var(--_border-radius, var(--spacing-xs));
  border: 0.0625rem solid var(--_border-color, var(--gray-color-100));
  min-width: 11.25rem;
  font-size: var(--fs-sm);
  line-height: 1;
  text-align: center;
  color: var(--_text-color);
  -webkit-transition: color 300ms ease-in-out;
  transition: color 300ms ease-in-out;
}
.gpw-navigation__main-nav-item a:hover, .gpw-navigation__child-nav-item a:hover {
  color: var(--_text-color);
}
.gpw-navigation__main-nav {
  margin-bottom: var(--spacing-sm);
}
.gpw-navigation__main-nav-item {
  position: relative;
}
.gpw-navigation__main-nav-item--current:before {
  position: absolute;
  content: "";
  display: block;
  top: -0.125rem;
  left: -0.125rem;
  height: 50%;
  width: 1.125rem;
  background-color: var(--primary-color-900);
  border: 0.0625rem solid #fff;
  border-radius: 0rem 4rem 20rem 0;
}
.gpw-navigation__child-nav-item a {
  --_background-color: transparent;
  --_text-color: var(--gray-color-950);
  -webkit-transition: border-color 150ms ease-in-out;
  transition: border-color 150ms ease-in-out;
}
.gpw-navigation__child-nav-item a:hover {
  --_border-color: var(--primary-color-500);
}
.gpw-navigation__child-nav-item--current a {
  --_border-color: var(--primary-color-500);
  --_background-color: var(--primary-color-50);
}

.gpw-category-main {
  --_side-bar-width: clamp( 15.625rem, 25cqi, 20rem );
  padding-block: var(--spacing-lg) var(--spacing-3xl);
}
.gpw-category-main > .section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-lg) var(--spacing-2xl);
}
@container content ( width > 53.125rem ) {
  .gpw-category-main > .section__inner {
    grid-template-columns: minmax(0, 1fr) clamp(15.625rem, 25cqi, 20rem);
  }
}

.gpw-category-content__header {
  margin-bottom: var(--spacing-lg);
}
.gpw-category-content__title {
  font-size: var(--fs-lg);
  color: var(--heading-color);
}
.gpw-category-content__search-result-count {
  font-size: var(--fs-normal);
  background-color: var(--gray-color-50);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--spacing-xs) var(--spacing-sm);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: var(--spacing-xs);
  color: var(--gray-color-600);
}
.gpw-category-content__search-result-count .material-symbols-outlined {
  line-height: 1;
}
.gpw-category-content__search-result-count .count {
  color: var(--base-color);
  font-weight: 700;
}
.gpw-category-content__posts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-md);
}

.gpw-search-form {
  --_border-color: var(--gray-color-100);
  --_border-radius: .25rem;
  --_transition-duration: 150ms;
}
.gpw-search-form__form {
  position: relative;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.gpw-search-form__search-type-select {
  background-color: var(--gray-color-50);
  position: relative;
  border: 0.0625rem solid var(--_border-color);
  border-right: 0;
  border-radius: var(--_border-radius) 0 0 var(--_border-radius);
  min-width: 7.5rem;
  -webkit-transition: border-color var(--_transition-duration) ease-in-out;
  transition: border-color var(--_transition-duration) ease-in-out;
}
.gpw-search-form__search-type-label {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  height: 100%;
}
.gpw-search-form__search-type-label-text:before {
  content: attr(aria-label);
}
.gpw-search-form__search-type-options {
  position: absolute;
  bottom: -0.125rem;
  left: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  background-color: var(--gray-color-50);
  min-width: 7.5rem;
  margin: 0;
}
.gpw-search-form__search-type-options[aria-hidden=true] {
  display: none;
}
.gpw-search-form__search-type-option {
  list-style: none;
  margin-bottom: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.gpw-search-form__search-type-option[aria-selected=true] {
  background-color: var(--gray-color-100);
}
.gpw-search-form input.gpw-search-form__search-keyword {
  position: relative;
  z-index: 1;
  border: 0.0625rem solid var(--_border-color);
  border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
  margin: 0;
}
.gpw-search-form input.gpw-search-form__search-keyword:focus {
  -webkit-box-shadow: unset;
  box-shadow: unset;
}
.gpw-search-form:has(input.gpw-search-form__search-keyword:focus) {
  --_border-color: var(--primary-color-500);
}
.gpw-search-form__submit {
  min-height: unset;
  height: 100%;
  aspect-ratio: 1;
  line-height: 1;
  padding-inline: 0;
  margin: 0;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0.5rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.gpw-page-navigation {
  --_border-color: var(--gray-color-100);
  --_border-radius: .375rem;
  --_box-shadow-color: rgba(0, 0, 0, 0.1);
  --_box-size: 3rem;
  margin-block: var(--spacing-md);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 0.0625rem solid var(--_border-color);
  border-radius: var(--_border-radius);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-box-shadow: 0 0.125rem 0.25rem var(--_box-shadow-color), 0 0.125rem 0.625rem var(--_box-shadow-color);
  box-shadow: 0 0.125rem 0.25rem var(--_box-shadow-color), 0 0.125rem 0.625rem var(--_box-shadow-color);
}
.gpw-page-navigation .page-numbers {
  min-height: var(--_box-size);
  display: grid;
  place-items: center;
  height: 100%;
  aspect-ratio: 1;
  -webkit-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}
.gpw-page-navigation .page-numbers.current {
  background-color: var(--gray-color-100);
}
.gpw-page-navigation .page-numbers:is(a) {
  cursor: pointer;
}
.gpw-page-navigation .page-numbers:not(:last-child) {
  border-right: 0.0625rem solid var(--_border-color);
}
.gpw-page-navigation .page-numbers:not(.current):hover {
  background-color: var(--gray-color-50);
}
/*# sourceMappingURL=gpw-post-category-page.min.css.map */