/*
  Skin Name: 緩く絶滅するつもりだった
  Description: doteiou.com専用。白と生成りを基調に、読みやすさを重視したCocoonスキン。
  Skin URI: https://doteiou.com/
  Author: 元28歳童帝
  Author URI: https://doteiou.com/
  Version: 0.1.0
  Priority: 10
*/

:root {
  --doteiou-bg: #f6f3ed;
  --doteiou-paper: #ffffff;
  --doteiou-text: #262422;
  --doteiou-muted: #746f69;
  --doteiou-accent: #bd513f;
  --doteiou-accent-dark: #963c2f;
  --doteiou-line: #e6dfd6;
  --doteiou-soft: #fbf8f3;
  --doteiou-shadow: 0 10px 30px rgba(45, 39, 33, 0.07);
}

html { scroll-behavior: smooth; }

body {
  color: var(--doteiou-text);
  background: var(--doteiou-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

a {
  color: var(--doteiou-accent-dark);
  text-decoration-color: rgba(150, 60, 47, 0.35);
  text-underline-offset: 0.18em;
}

a:hover { color: var(--doteiou-accent); }

#header-container,
#header-container .header,
.header { background: var(--doteiou-paper) !important; }

#header-container { border-bottom: 1px solid var(--doteiou-line); }

.header-in {
  min-height: 0 !important;
  height: auto !important;
  padding: 28px 20px 22px !important;
}

.logo,
.logo-header,
.logo-text {
  margin: 0 !important;
  padding: 0 !important;
}

.site-name-text {
  margin: 0 !important;
  line-height: 1.35;
}

.site-name-text a {
  color: var(--doteiou-text) !important;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 750;
  letter-spacing: 0.045em;
  text-decoration: none;
}

.tagline {
  margin-top: 9px !important;
  color: var(--doteiou-muted) !important;
  font-size: 13px !important;
  line-height: 1.6;
}

#navi,
.navi {
  background: var(--doteiou-paper) !important;
  border-top: 1px solid var(--doteiou-line);
  border-bottom: 1px solid var(--doteiou-line);
  box-shadow: 0 4px 14px rgba(45, 39, 33, 0.035);
}

.navi-in > ul {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
}

.navi-in > ul > li {
  width: auto !important;
  flex: 0 1 auto;
}

.navi-in > ul > li > a {
  min-height: 52px;
  padding: 0 28px !important;
  color: var(--doteiou-text) !important;
  background: transparent !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 52px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.navi-in > ul > li > a:hover,
.navi-in > ul > li.current-menu-item > a,
.navi-in > ul > li.current-menu-ancestor > a {
  color: var(--doteiou-accent-dark) !important;
  background: var(--doteiou-soft) !important;
  border-bottom-color: var(--doteiou-accent);
}

.navi-in .caption-wrap .item-description,
.navi-in .menu-item-description { display: none !important; }

#content {
  margin-top: 30px;
  margin-bottom: 42px;
}

.content-in { gap: 0; }

.main,
.sidebar .widget {
  background: var(--doteiou-paper);
  border: 1px solid var(--doteiou-line);
  box-shadow: var(--doteiou-shadow);
}

.main {
  border-radius: 14px;
  padding: 38px 42px;
}

.sidebar .widget {
  border-radius: 12px;
  padding: 24px;
}

.sidebar .widget + .widget { margin-top: 20px; }

.entry-title,
.article h1 {
  color: var(--doteiou-text);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.article {
  color: var(--doteiou-text);
  font-size: 17px;
  line-height: 1.95;
}

.article p { margin: 1.35em 0; }

.article h2 {
  margin: 2.5em 0 1em;
  padding: 0.72em 0.9em;
  color: var(--doteiou-text);
  background: var(--doteiou-soft);
  border: 0;
  border-left: 5px solid var(--doteiou-accent);
  border-radius: 5px;
  font-size: clamp(22px, 2.4vw, 29px);
  line-height: 1.5;
}

.article h3 {
  margin: 2.1em 0 0.9em;
  padding: 0 0 0.55em;
  color: var(--doteiou-text);
  border: 0;
  border-bottom: 2px solid var(--doteiou-line);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.55;
}

.article h3::after {
  display: block;
  width: 58px;
  height: 2px;
  margin-bottom: -2px;
  content: "";
  background: var(--doteiou-accent);
}

.article blockquote {
  margin: 1.8em 0;
  padding: 1.2em 1.4em;
  color: #4f4b47;
  background: var(--doteiou-soft);
  border: 0;
  border-left: 4px solid #cfc4b7;
  border-radius: 4px;
}

.article ul,
.article ol { padding-left: 1.55em; }
.article li { margin: 0.45em 0; }

.entry-card-wrap {
  display: block;
  margin-bottom: 20px;
  background: var(--doteiou-paper);
  border: 1px solid var(--doteiou-line) !important;
  border-radius: 12px;
  box-shadow: 0 7px 20px rgba(45, 39, 33, 0.045);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.entry-card-wrap:hover {
  transform: translateY(-2px);
  border-color: #d8c9bb !important;
  box-shadow: 0 12px 28px rgba(45, 39, 33, 0.08);
}

.entry-card { padding: 18px; }

.entry-card-title {
  color: var(--doteiou-text);
  font-size: 20px;
  line-height: 1.55;
}

.entry-card-snippet {
  color: var(--doteiou-muted);
  line-height: 1.75;
}

.entry-card-meta,
.post-date,
.post-update,
.author-info { color: var(--doteiou-muted); }

.widget-title,
.sidebar h3 {
  margin: 0 0 18px;
  padding: 0 0 10px;
  color: var(--doteiou-text);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--doteiou-line);
  font-size: 19px;
  line-height: 1.4;
}

.widget-title::after,
.sidebar h3::after {
  display: block;
  width: 44px;
  height: 2px;
  margin-bottom: -12px;
  content: "";
  background: var(--doteiou-accent);
}

.search-box {
  border: 1px solid var(--doteiou-line);
  border-radius: 8px;
  overflow: hidden;
}

.search-edit {
  min-height: 44px;
  background: var(--doteiou-paper);
}

.search-submit {
  color: #fff;
  background: var(--doteiou-accent) !important;
}

.search-submit:hover { background: var(--doteiou-accent-dark) !important; }

.btn,
.wp-block-button__link,
.pagination-next-link,
.page-numbers { border-radius: 7px; }

.wp-block-button__link,
.pagination-next-link {
  color: #fff !important;
  background: var(--doteiou-accent) !important;
}

.wp-block-button__link:hover,
.pagination-next-link:hover { background: var(--doteiou-accent-dark) !important; }

.cat-label { background: var(--doteiou-accent) !important; }

.footer {
  color: #eee;
  background: #302d2a !important;
}

.footer a { color: #fff; }

.footer-bottom {
  padding-top: 24px;
  padding-bottom: 24px;
}

@media screen and (max-width: 1023px) {
  #content { margin-top: 22px; }
  .main { padding: 32px 28px; }
  .navi-in > ul > li > a {
    padding: 0 18px !important;
    font-size: 14px;
  }
}

@media screen and (max-width: 834px) {
  .header-in { padding: 22px 16px 18px !important; }
  .site-name-text a { font-size: 25px; }
  .tagline { font-size: 12px !important; }
  .main {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    padding: 28px 20px;
  }
  .sidebar .widget { border-radius: 8px; }
  .article {
    font-size: 16px;
    line-height: 1.9;
  }
}

@media screen and (max-width: 480px) {
  #content { margin-top: 14px; }
  .header-in { padding: 18px 12px 15px !important; }
  .site-name-text a {
    font-size: 21px;
    letter-spacing: 0.025em;
  }
  .tagline {
    margin-top: 7px !important;
    line-height: 1.5;
  }
  .main { padding: 24px 16px; }
  .article h2 { padding: 0.68em 0.75em; }
  .entry-card { padding: 14px; }
}

/* 目次を本文幅に合わせる */
.article .toc {
  display: block;
  width: 100%;
  max-width: none;
  margin: 24px 0 36px;
  padding: 18px 22px;
  background: var(--doteiou-soft);
  border: 1px solid var(--doteiou-line);
  border-radius: 8px;
}

.article .toc-title {
  text-align: left;
}

.article .toc-list {
  margin-top: 12px;
}

/* =========================================================
   Sidebar responsive layout
   ========================================================= */

/* ウィジェットの余白 */
.sidebar .widget {
  padding: 18px;
}

/* PC・中間幅：本文とサイドバーを横並び */
@media screen and (min-width: 1101px) {
  #content-in {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  #main {
    float: none !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #sidebar {
    float: none !important;
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    position: sticky !important;
    top: 20px !important;
    align-self: flex-start !important;
    height: fit-content;
  }

  /* Cocoon標準の部分追従と二重にならないようにする */
  #sidebar-scroll {
    position: static !important;
    top: auto !important;
  }

  /* ログイン中の管理バーを避ける */
  body.admin-bar #sidebar {
    top: 52px !important;
  }
}

/* 大きい画面では少しだけ広げる */
@media screen and (min-width: 1256px) {
  #sidebar {
    flex-basis: 330px !important;
    width: 330px !important;
    min-width: 330px !important;
  }
}

/* 狭い画面：本文を全幅にし、通常サイドバーは表示しない */
/* 1100px以下ではサイドバーを完全に非表示 */
@media screen and (max-width: 1100px) {
  #content-in {
    display: block !important;
    width: 100% !important;
  }

  #main {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #content-in > #sidebar,
  #sidebar.sidebar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* サイドバー非表示境界のズレ対策 */
@media screen and (max-width: 1120px) {
  #content-in {
    display: block !important;
    width: 100% !important;
  }

  body #main {
    float: none !important;
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body #sidebar,
  body #sidebar-scroll {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ヘッダー画像をもっと大きく・広く見せる */
.header-in {
  padding: 8px 0 !important;
}

.logo,
.logo-header,
.logo-text {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.logo img,
.logo-header img,
.site-name-text img {
  display: block !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* スマホ用ヘッダー */
@media screen and (max-width: 480px) {
  #header-container,
  #header-container-in,
  .header-in,
  .logo-header,
  .logo-header a {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .header-in {
    padding: 4px 0 !important;
  }

  .logo-header img {
    display: block !important;
    width: 120% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    transform: translateX(-8.33%);
  }
}

@media screen and (max-width: 480px) {
  .logo-header img {
    display: none !important;
  }

  .logo-header a::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    background: url("blog_header_sp_1.png") center / contain no-repeat;
  }
}