/*
Theme Name: Happas Blog
Theme URI: https://happas.jp/blog
Author: happas
Author URI: https://happas.jp
Description: Happas Blog 専用の Umami 子テーマ。
Template: umami
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
Version: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: happas-blog
*/

[data-theme="light"],
:root:not([data-theme="dark"]) {
  --color-brand: #2d855f;
  --color-accent: #2b6cb0;
  --color-contrast: #1d2a22;
  --color-text: #1d2a22;
  --color-background: #f6f9f7;
  --color-surface: #ffffff;
  --color-muted: #617067;
  --color-border: #d5dfd8;
  --panel-radius: var(--radius-3);
  --panel-inner-radius: calc(var(--panel-radius) - 2px);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-brand: #63b08a;
    --color-accent: #78a8da;
    --color-contrast: #f1f6f2;
    --color-text: #dce7e0;
    --color-background: #1c2420;
    --color-surface: #27302c;
    --color-muted: #9fb1a6;
    --color-border: #435148;
  }
}

[data-theme="dark"] {
  --color-brand: #63b08a;
  --color-accent: #78a8da;
  --color-contrast: #f1f6f2;
  --color-text: #dce7e0;
  --color-background: #1c2420;
  --color-surface: #27302c;
  --color-muted: #9fb1a6;
  --color-border: #435148;
}

:is(.post-card, .archive-header, .widget, .comments-area, .post-navigation) {
  box-shadow: var(--shadow-1);
}

.post-card {
  transition:
    transform 200ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;

  &:has(.post-card__link:is(:hover, :focus-visible)) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
    border-color: color-mix(in srgb, var(--color-brand) 26%, var(--color-border));
  }
}

.site-header--sticky {
  backdrop-filter: blur(12px);

  &.site-header--compact {
    --branding-gap: var(--space-20);
    --logo-max-height: clamp(1.65rem, 4vw, 2.25rem);
    --site-title-size: var(--font-size-sm);
    --pico-nav-element-spacing-vertical: 0.25rem;
    --pico-nav-link-spacing-vertical: 0.2rem;
    padding-block: var(--space-10);
    background: color-mix(in srgb, var(--color-surface) 90%, var(--color-brand));
    box-shadow: var(--shadow-1);
  }
}

.custom-header__image {
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-1);
}

.entry-thumbnail-image-singular {
  max-height: 66vh;
  object-fit: contain;
}

.entry-thumbnail-singular {
  margin-bottom: var(--space-50);
}

.entry-meta__item {
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 84%, transparent);

  &.entry-meta__item--terms {
    background: color-mix(in srgb, var(--color-surface) 72%, var(--color-brand) 8%);
    color: color-mix(in srgb, var(--color-text) 78%, var(--color-muted));
  }
}

:is(
  .entry-single .entry-content,
  .editor-styles-wrapper .block-editor-block-list__layout.is-root-container,
  .editor-styles-wrapper .is-root-container
) {
  color: color-mix(in srgb, var(--color-text) 94%, var(--color-muted));
  font-size: clamp(1rem, 0.99rem + 0.12vw, 1.05rem);
  line-height: 1.85;

  > h2,
  > h3,
  > h4 {
    color: var(--color-contrast);
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  > h2 {
    padding-bottom: var(--space-20);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
    font-weight: 500;
  }

  > h3 {
    padding-left: var(--space-30);
    border-left: 0.3rem solid color-mix(in srgb, var(--color-brand) 48%, white);
    font-size: clamp(1.16rem, 1.04rem + 0.45vw, 1.4rem);
    line-height: 1.55;
  }

  > h4 {
    font-size: clamp(1rem, 0.98rem + 0.16vw, 1.08rem);
    line-height: 1.65;
  }

  ul,
  ol {
    padding-left: 1.4em;
  }

  :is(table, code, kbd, samp, pre, pre code) {
    line-height: 1.4;
  }

  table {
    margin-block: var(--space-50);
    font-size: smaller;
  }

  blockquote {
    border-inline-start: 0.2rem solid color-mix(in srgb, var(--color-brand) 26%, white);
    background: color-mix(in srgb, var(--color-surface) 92%, var(--color-background));
    color: color-mix(in srgb, var(--color-text) 84%, var(--color-muted));
  }

  strong,
  b {
    color: var(--color-contrast);
  }
}

.happas-link-card {
  margin-block: var(--space-60);

  @media (min-width: 48rem) {
    &.happas-link-card--with-media {
      .post-card__link {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) minmax(11rem, 16rem);
      }

      .entry-thumbnail-card {
        order: 0;
      }
    }
  }

  .post-card__link {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.entry-title, .entry-summary) {
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .entry-summary {
    word-break: normal;
    overflow-wrap: break-word;
  }

  .entry-thumbnail-card {
    order: -1;
  }

  .entry-thumbnail-image-card {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

.happas-link-card__label {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}