/*
  Skin Name: 霧森の書庫 - Heart Polisher
  Description: 思考の森Project専用の、霧・苔・樹皮・古金を基調としたダークスキン
  Author: あずきとそら
  Version: 0.1.3
  Priority: 10
*/

/* =========================================================
   Design tokens
   ========================================================= */

:root {
  color-scheme: dark;

  --hp-bg-deep: #0d120f;
  --hp-bg-content: #121814;
  --hp-surface: #1a241e;
  --hp-surface-hover: #223029;
  --hp-surface-raised: #202b25;

  --hp-mist-nav: #293d40;
  --hp-mist-nav-hover: #38534f;
  --hp-forest-ui: #243b34;
  --hp-border: #3b4a3f;
  --hp-border-soft: rgba(195, 166, 106, 0.22);

  --hp-gold: #c3a66a;
  --hp-gold-soft: #ccb67b;
  --hp-bark: #735846;

  --hp-text-strong: #e3dac7;
  --hp-text: #d6d0c3;
  --hp-text-soft: #c1baad;
  --hp-text-muted: #9e9a91;
  --hp-nav-text: #d8d3c9;
  --hp-link: #abc3be;
  --hp-link-hover: #d9e6e1;

  --hp-balloon-bg: #c3d2cb;
  --hp-balloon-border: #7f9a8d;
  --hp-balloon-text: #25332c;
  --hp-balloon-link: #315f58;
  --hp-sidebar-link: #abc3be;
  --hp-sidebar-link-hover: #d9e6e1;
  --hp-sidebar-hover-bg: #8faaa3;
  --hp-sidebar-hover-text: #17251f;

  --hp-status-bright: #74d8ad;
  --hp-status-text: #b9cbc2;
  --hp-status-muted: #91a79c;
  --hp-status-rule: rgba(195, 166, 106, 0.18);

  --hp-light-glow: rgba(73, 118, 96, 0.15);
  --hp-light-surface: rgba(18, 24, 20, 0.88);
  --hp-light-button-border: rgba(195, 166, 106, 0.38);

  --hp-danger: #e1aa9c;
  --hp-focus: #e2c982;

  --hp-radius-sm: 6px;
  --hp-radius-md: 10px;
  --hp-shadow: 0 12px 32px rgba(0, 0, 0, 0.26);
}

/* =========================================================
   Page foundation
   ========================================================= */

html,
body,
body.body,
.body,
body .main,
body .sidebar {
  background-color: var(--hp-bg-deep);
  color: var(--hp-text);
}

body.custom-background {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

body .main,
body .sidebar {
  border: 1px solid rgba(59, 74, 63, 0.72);
  border-radius: var(--hp-radius-sm);
  background: rgba(18, 24, 20, 0.95);
  box-shadow: var(--hp-shadow);
}

body .article,
body .entry-content,
body .sidebar,
body .sidebar a {
  color: var(--hp-text);
}

body .entry-content {
  line-height: 1.9;
}

body .entry-content p,
body .entry-content li,
body .entry-content dd {
  color: var(--hp-text);
}

body .post-date,
body .post-update,
body .entry-card-info,
body .related-entry-card-snippet,
body .widget-entry-card-snippet,
body .breadcrumb,
body .breadcrumb a {
  color: var(--hp-text-muted);
}

/* =========================================================
   Links and focus
   ========================================================= */

body .entry-content a:not(.a-wrap):not(.wp-block-button__link):not(.fd-door):not(.hp-entry-card):not(.top-page-card),
body .sidebar a,
body .footer a {
  color: var(--hp-link);
}

body .entry-content a:not(.a-wrap):not(.wp-block-button__link):not(.fd-door):not(.hp-entry-card):not(.top-page-card) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body .entry-content a:hover,
body .entry-content a:focus-visible,
body .sidebar a:hover,
body .sidebar a:focus-visible,
body .footer a:hover,
body .footer a:focus-visible {
  color: var(--hp-link-hover);
}

/* WordPress block widgets can retain Cocoon's white link color. */
body #sidebar .widget_block a,
body .sidebar .widget_block a {
  color: var(--hp-sidebar-link);
}

body #sidebar .widget_block a:hover,
body #sidebar .widget_block a:focus-visible,
body .sidebar .widget_block a:hover,
body .sidebar .widget_block a:focus-visible {
  background: var(--hp-sidebar-hover-bg) !important;
  color: var(--hp-sidebar-hover-text) !important;
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--hp-focus);
  outline-offset: 3px;
}

/* =========================================================
   Header and global navigation
   ========================================================= */

.header-container,
#header,
#header-in {
  background-color: transparent;
}

#navi,
#navi .navi-in > ul {
  background-color: var(--hp-mist-nav);
}

#navi .navi-in a {
  box-sizing: border-box;
  border-bottom: 3px solid transparent;
  color: var(--hp-nav-text);
  font-weight: 600;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

#navi .navi-in a:hover,
#navi .navi-in a:focus-visible {
  border-bottom-color: transparent;
  background-color: var(--hp-mist-nav-hover);
  box-shadow: inset 0 -3px 0 var(--hp-gold);
  color: #fff;
}

#navi .current-menu-item > a,
#navi .current-menu-ancestor > a {
  box-shadow: inset 0 -3px 0 var(--hp-gold);
  color: #fff;
}

#navi .navi-in a:focus-visible {
  outline-color: var(--hp-focus);
  outline-offset: -4px;
}

/* =========================================================
   Headings and guide signs
   ========================================================= */

body .article h1,
body .article h2,
body .article h3,
body .article h4,
body .widget-title,
body .sidebar h2,
body .sidebar h3 {
  color: var(--hp-text-strong);
}

body .article h2,
body .widget-title,
body .sidebar h2,
body .sidebar h3,
body .hp-guide-heading {
  border: 0;
  border-left: 5px solid var(--hp-gold);
  background: var(--hp-mist-nav);
  color: var(--hp-text-strong);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

.article h2 {
  padding: 0.72em 0.9em;
}

.article h3 {
  border: 0;
  border-bottom: 1px solid var(--hp-border);
  background: transparent;
  box-shadow: inset 0 -1px 0 rgba(195, 166, 106, 0.1);
}

.article h4 {
  border-color: var(--hp-bark);
}

/* =========================================================
   Cocoon speech balloons
   ========================================================= */

body .speech-balloon {
  border-color: var(--hp-balloon-border) !important;
  background: var(--hp-balloon-bg) !important;
  color: var(--hp-balloon-text) !important;
}

body .speech-balloon p,
body .speech-balloon li,
body .speech-balloon dd,
body .speech-balloon strong,
body .speech-balloon em {
  color: var(--hp-balloon-text) !important;
}

body .speech-balloon a {
  color: var(--hp-balloon-link);
}

body .speech-balloon a:hover,
body .speech-balloon a:focus-visible {
  color: #183f39;
}

body .sbp-l .speech-balloon::before {
  border-right-color: var(--hp-balloon-border) !important;
}

body .sbp-l .speech-balloon::after {
  border-right-color: var(--hp-balloon-bg) !important;
}

body .sbp-r .speech-balloon::before {
  border-left-color: var(--hp-balloon-border) !important;
}

body .sbp-r .speech-balloon::after {
  border-left-color: var(--hp-balloon-bg) !important;
}

/* =========================================================
   Home entrance and content cards
   ========================================================= */

body .forest-doors .fd-door,
.hp-entry-card,
.top-page-card,
.entry-card-wrap,
.related-entry-card-wrap,
.widget-entry-card-wrap {
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
  background: rgba(26, 36, 30, 0.94);
  color: var(--hp-text);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

a.fd-door:hover,
a.fd-door:focus-visible,
a.hp-entry-card:hover,
a.hp-entry-card:focus-visible,
a.top-page-card:hover,
a.top-page-card:focus-visible,
a.entry-card-wrap:hover,
a.entry-card-wrap:focus-visible,
a.related-entry-card-wrap:hover,
a.related-entry-card-wrap:focus-visible,
a.widget-entry-card-wrap:hover,
a.widget-entry-card-wrap:focus-visible {
  border-color: var(--hp-gold);
  background: var(--hp-surface-hover);
  box-shadow: 0 0 0 1px rgba(195, 166, 106, 0.14);
  color: #fff;
  transform: translateY(-1px);
}

body .forest-doors .fd-door-title,
body .forest-doors .fd-door-name,
.entry-card-title,
.related-entry-card-title,
.widget-entry-card-title {
  color: var(--hp-gold-soft);
}

body .forest-doors .fd-door-description,
.entry-card-snippet {
  color: var(--hp-text-soft);
}

/* =========================================================
   Search and forms
   ========================================================= */

.main input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.main textarea,
.main select,
.sidebar input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.sidebar textarea,
.sidebar select,
.search-edit,
input[type="search"] {
  border: 1px solid #4a5a50;
  border-radius: 4px;
  background: #18211c;
  color: var(--hp-text);
}

input::placeholder,
textarea::placeholder,
.search-edit::placeholder {
  color: var(--hp-text-muted);
  opacity: 0.9;
}

.search-submit,
button.search-submit,
.wp-block-search__button {
  border: 1px solid #526b69;
  background: var(--hp-mist-nav);
  color: #fff;
}

.search-submit:hover,
.search-submit:focus-visible,
.wp-block-search__button:hover,
.wp-block-search__button:focus-visible {
  border-color: var(--hp-gold);
  background: var(--hp-mist-nav-hover);
}

/* =========================================================
   Buttons, pagination and labels
   ========================================================= */

.btn,
.wp-block-button__link,
.pagination-next-link,
.page-numbers,
.comment-btn {
  border: 1px solid var(--hp-border);
  background: var(--hp-forest-ui);
  color: var(--hp-text);
}

.btn:hover,
.btn:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.pagination-next-link:hover,
.page-numbers:hover,
.page-numbers.current {
  border-color: var(--hp-gold);
  background: var(--hp-mist-nav-hover);
  color: #fff;
}

.cat-label,
.tag-link,
.tagcloud a {
  border-color: rgba(115, 88, 70, 0.82);
  background: rgba(115, 88, 70, 0.22);
  color: var(--hp-text-soft);
}

/* =========================================================
   Reading components
   ========================================================= */

.toc,
.toc-content,
blockquote,
.wp-block-quote,
.information-box,
.question-box,
.alert-box,
.memo-box,
.comment-box {
  border-color: var(--hp-border);
  background: var(--hp-surface);
  color: var(--hp-text);
}

blockquote,
.wp-block-quote {
  border-left: 4px solid var(--hp-bark);
}

.toc-title {
  color: var(--hp-gold-soft);
}

hr,
.article table,
.article th,
.article td {
  border-color: var(--hp-border);
}

.article th {
  background: var(--hp-mist-nav);
  color: var(--hp-text);
}

.article td {
  background: rgba(26, 36, 30, 0.72);
}

code,
pre,
.wp-block-code {
  border-color: var(--hp-border);
  background: #0f1511;
  color: #d9e3dc;
}

/* =========================================================
   Cocoon timeline
   ========================================================= */

.timeline-box {
  border-color: var(--hp-border);
  background: var(--hp-surface);
  color: var(--hp-text);
}

.timeline-item::before {
  border-color: var(--hp-bg-content);
  background: var(--hp-gold);
}

.timeline-item-label,
.timeline-item-title {
  color: var(--hp-gold-soft);
}

.timeline-item-content {
  color: var(--hp-text-soft);
}

/* =========================================================
   Glossary and tooltips
   ========================================================= */

.glossaryLink,
.cmtt-backlink,
.cm-tooltip {
  color: var(--hp-link);
}

.tooltipster-box,
.cm-tooltip-content {
  border-color: var(--hp-border);
  background: var(--hp-surface-raised);
  color: var(--hp-text);
}

/* =========================================================
   Site-specific light reaction: visual layer
   Structural rules remain in the child theme stylesheet.
   ========================================================= */

body .hp-forest-status {
  border-top-color: var(--hp-status-rule);
  color: var(--hp-status-text);
}

body .hp-forest-total {
  color: var(--hp-text-soft);
}

body .hp-forest-period-label {
  color: var(--hp-status-muted);
}

body .hp-forest-dot,
body .hp-forest-light {
  --hp-light-color: var(--hp-status-bright);
}

body .hp-forest-light {
  border-color: var(--hp-border-soft);
  background:
    radial-gradient(circle at 50% 0%, var(--hp-light-glow), transparent 62%),
    var(--hp-light-surface);
  color: var(--hp-text);
}

body .hp-forest-light-title {
  color: var(--hp-gold-soft);
}

body .hp-forest-light-button {
  border-color: var(--hp-light-button-border);
  background: var(--hp-forest-ui);
  color: var(--hp-text);
}

body .hp-forest-light-button:hover,
body .hp-forest-light-button:focus-visible,
body .hp-forest-light.is-lit .hp-forest-light-button {
  border-color: var(--hp-gold);
  background: var(--hp-mist-nav-hover);
  color: #fff;
}

body .hp-forest-light-count-wrap {
  border-left-color: var(--hp-border-soft);
  color: var(--hp-text-soft);
}

body .hp-forest-light-hint,
body .hp-forest-light-message {
  color: var(--hp-text-muted);
}

body .hp-forest-light-message.is-error {
  color: var(--hp-danger);
}

/* =========================================================
   Footer
   ========================================================= */

.footer,
.footer-bottom,
#footer {
  border-color: var(--hp-border);
  background: #080b09;
  color: var(--hp-text-muted);
}

/* =========================================================
   Responsive and reduced-motion behavior
   ========================================================= */

@media screen and (max-width: 834px) {
  .main,
  .sidebar {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  body.custom-background {
    background-attachment: scroll;
    background-position: 50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.custom-background {
    background-attachment: scroll;
  }

  #navi .navi-in a,
  .forest-doors .fd-door,
  .hp-entry-card,
  .top-page-card,
  .entry-card-wrap,
  .related-entry-card-wrap,
  .widget-entry-card-wrap {
    transition: none;
  }
}

/* =========================================================
   Optional: device-specific home backgrounds

   After placing these files in the skin's images directory:
     images/forest-desktop.webp
     images/forest-mobile.webp

   remove the comment markers around the following block.
   =========================================================

body.home {
  background-image:
    linear-gradient(
      180deg,
      rgba(7, 11, 8, 0.38) 0%,
      rgba(7, 11, 8, 0.48) 45%,
      rgba(7, 11, 8, 0.62) 100%
    ),
    url("images/forest-desktop.webp");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

@media screen and (max-width: 834px) {
  body.home {
    background-image:
      linear-gradient(
        180deg,
        rgba(7, 11, 8, 0.34) 0%,
        rgba(7, 11, 8, 0.48) 45%,
        rgba(7, 11, 8, 0.60) 100%
      ),
      url("images/forest-mobile.webp");
    background-attachment: scroll;
  }
}
*/