/*
 * オトノミカ — レイアウト・カード・サイドバー
 * ot-tokens.css と ot-hero.css に依存。
 */

/* ============================================================
 * Cocoon コンテナリセット — TOPページ専用
 *
 * body.home は WordPress が is_front_page() 時に自動付与するクラス。
 * Cocoon の #wrapper / #container / #contents 等の max-width・padding を
 * 解除し、.ot-page がビューポート幅いっぱいに展開できるようにする。
 * !important を使うのは Cocoon の ID セレクタ（詳細度が高い）に勝つため。
 * ============================================================ */
body.home {
  background: var(--ot-bg-base) !important;
  overflow-x: hidden;
}

body.home #wrapper,
body.home #container,
body.home #contents_wrap,
body.home #contents,
body.home .content-wrap,
body.home #primary,
body.home #main,
body.home .main,
body.home article.page,
body.home .entry-content {
  max-width: none !important;
  width: 100%  !important;
  padding: 0   !important;
  margin: 0    !important;
  float: none  !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ====================================================================
 * Cocoon dynamic_sidebar('sidebar') 出力のダーク化
 * .ot-sidebar 内のみスコープ。Cocoon固有クラスを直接ターゲット。
 * ==================================================================== */

/* --- ウィジェット共通カード -------------------------------------------- */
.ot-sidebar .widget {
  border-radius: var(--ot-r-card);
  background: var(--ot-glass-soft);
  backdrop-filter: var(--ot-glass-blur);
  -webkit-backdrop-filter: var(--ot-glass-blur);
  border: 1px solid var(--ot-border-neon);
  padding: 20px;
  margin-bottom: 22px;
  color: var(--ot-text);
  overflow: hidden;
}
.ot-sidebar .widget:last-child { margin-bottom: 0; }

/* ウィジェットタイトル */
.ot-sidebar .widget-title,
.ot-sidebar .widgettitle {
  font: 700 14px/1 var(--ot-font-jp) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  padding-bottom: 11px;
  margin: 0 0 16px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #19E3FF, #7B5BFF) 1;
  display: inline-block;
}

/* リンク共通 */
.ot-sidebar a { color: var(--ot-text) !important; text-decoration: none !important; }
.ot-sidebar a:hover { color: var(--ot-cyan) !important; }

/* --- 広告ウィジェット (widget_common_ad / widget_custom_html) ----------- */
.ot-sidebar .widget_common_ad,
.ot-sidebar .widget_custom_html { background: var(--ot-bg-inset) !important; text-align: center; }

/* 広告画像: border-radiusなし・センタリング */
.ot-sidebar .widget_common_ad img,
.ot-sidebar .widget_custom_html img,
.ot-sidebar .common-ad-area img {
  display: block !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  margin: 0 auto !important;
}

/* Cocoonの広告ラベル（SPONSORED表記） */
.ot-sidebar .ad-label,
.ot-sidebar .common-ad-label {
  font: 600 10px var(--ot-font-en);
  letter-spacing: 2px;
  color: var(--ot-text-dim);
  margin-bottom: 8px;
  display: block;
}

/* --- 著者ボックス (widget_author_box) — Cocoon実クラスに合わせて修正 */

/* .author-box を縦積み中央揃えに（Cocoon デフォルトは横並び） */
.ot-sidebar .widget_author_box .author-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  border: none !important;  /* border-element クラスのCocoon枠線をリセット */
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

/* figure.author-thumb: グラデリングをpadding+backgroundで実現 */
.ot-sidebar .widget_author_box .author-thumb {
  width: 78px !important;
  height: 78px !important;
  margin: 0 auto 12px !important;
  border-radius: 50% !important;
  padding: 2px !important;
  background: var(--ot-grad-main) !important;
  border: none !important;
  box-shadow: 0 0 16px var(--ot-glow-cyan) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* アバター画像 (img.avatar) */
.ot-sidebar .widget_author_box .author-thumb img,
.ot-sidebar .widget_author_box img.avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
}

/* author-content をフル幅に */
.ot-sidebar .widget_author_box .author-content {
  width: 100% !important;
}

/* 著者名 (.author-name が実際のクラス) */
.ot-sidebar .widget_author_box .author-name,
.ot-sidebar .widget_author_box .author-name a {
  font: 700 17px/1.3 var(--ot-font-jp) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 5px !important;
}

/* プロフィール文 (.author-description が実際のクラス) */
.ot-sidebar .widget_author_box .author-description {
  text-align: left !important;
  margin-bottom: 12px !important;
}
.ot-sidebar .widget_author_box .author-description p {
  color: var(--ot-text-sub) !important;
  font: 400 12.5px/1.85 var(--ot-font-jp) !important;
  margin: 0 !important;
}

/* SNSフォローエリア: シンプルに表示 */
.ot-sidebar .widget_author_box .profile-follows {
  width: 100% !important;
  margin-top: 4px !important;
}
.ot-sidebar .widget_author_box .sns-follow-message {
  font: 600 11px var(--ot-font-jp) !important;
  color: var(--ot-text-dim) !important;
  margin-bottom: 8px !important;
}
.ot-sidebar .widget_author_box .sns-follow-buttons a {
  color: var(--ot-text-sub) !important;
}
.ot-sidebar .widget_author_box .sns-follow-buttons a:hover {
  color: var(--ot-cyan) !important;
}

/* --- 新着記事ウィジェット (widget_new_entries) -------------------------- */
.ot-sidebar .widget_new_entries ul,
.ot-sidebar .new-entry-item-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.ot-sidebar .new-entry-item { border-bottom: 1px solid var(--ot-border-soft) !important; }
.ot-sidebar .new-entry-item:last-child { border-bottom: none !important; }

.ot-sidebar .new-entry-item-link {
  display: grid !important;
  grid-template-columns: 72px 1fr !important;
  gap: 11px;
  align-items: center;
  padding: 10px 0 !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: .18s;
}
.ot-sidebar .new-entry-item-link:hover { color: var(--ot-cyan) !important; }

.ot-sidebar .new-entry-item-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid var(--ot-border);
  background: var(--ot-bg-inset);
}
.ot-sidebar .new-entry-item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}
.ot-sidebar .new-entry-item-title {
  font: 500 12px/1.5 var(--ot-font-jp) !important;
  color: var(--ot-text) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.ot-sidebar .new-entry-item-date,
.ot-sidebar .new-entry-item-link time {
  font: 500 10px var(--ot-font-en) !important;
  color: var(--ot-text-dim) !important;
  margin-top: 4px !important;
  display: block !important;
}

/* --- カテゴリウィジェット (widget_categories) フォールバック ------------- */
.ot-sidebar .widget_categories ul li,
.ot-sidebar ul li {
  border-bottom: 1px solid var(--ot-border-soft);
  font: 500 13.5px var(--ot-font-jp);
}
.ot-sidebar ul li:last-child { border-bottom: none; }
.ot-sidebar ul li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 2px;
}

/* 段落・img 汎用 */
.ot-sidebar p { color: var(--ot-text-sub); font: 400 13px/1.85 var(--ot-font-jp); margin: 0; }
.ot-sidebar img { max-width: 100%; height: auto; border-radius: var(--ot-r-sm); }

/* ---- Home grid --------------------------------------------------------- */
.ot-home {
  max-width: var(--ot-maxw);
  margin: 0 auto;
  padding: 20px 24px 60px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--ot-gap-grid);
  align-items: start;
}
.ot-main { min-width: 0; }

/* section heading */
.ot-section-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.ot-section-bar {
  display: inline-block; width: 5px; height: 22px; border-radius: 3px;
  background: var(--ot-grad-edge);
}
.ot-section-bar--rev { background: linear-gradient(#7B5BFF,#19E3FF); }
.ot-section-head h1,
.ot-section-head h2 { margin: 0; font: 800 21px var(--ot-font-jp); color: #fff; }
.ot-section-en {
  font: 600 11px var(--ot-font-en); letter-spacing: 2px; color: var(--ot-text-dim); margin-top: 3px;
}

/* ---- Article cards ----------------------------------------------------- */
.ot-article-list { display: flex; flex-direction: column; gap: 16px; }

.ot-acard { display: block; text-decoration: none; color: inherit; }
.ot-acard__link {
  display: grid; grid-template-columns: 190px 1fr; align-items: stretch;
  border-radius: var(--ot-r-card);
  background: var(--ot-glass-card); backdrop-filter: var(--ot-glass-blur);
  border: 1px solid var(--ot-border-neon);
  overflow: hidden; transition: .22s;
  text-decoration: none; color: inherit;
}
.ot-acard__link:hover {
  transform: translateY(-4px);
  border-color: rgba(25,227,255,.6);
  box-shadow: var(--ot-sh-card-hover);
}
.ot-acard__media {
  position: relative; min-height: 132px;
  border-right: 1px solid var(--ot-border);
}
.ot-acard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-acard__no-thumb {
  width: 100%; height: 100%; min-height: 132px;
  background: var(--ot-bg-inset);
}
.ot-acard__badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 9px; border-radius: 7px; max-width: calc(100% - 20px);
  font: 700 10.5px/1.35 var(--ot-font-jp); color: var(--ot-ink);
  background: var(--ot-grad-main); box-shadow: 0 0 14px var(--ot-glow-cyan);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ot-acard__body { padding: 15px 18px; min-width: 0; }
.ot-acard__title {
  margin: 0 0 9px; font: 700 16px/1.5 var(--ot-font-jp); color: #fff; transition: .18s;
}
.ot-acard__link:hover .ot-acard__title { color: var(--ot-cyan); }
.ot-acard__excerpt {
  margin: 0 0 13px; font: 400 13px/1.75 var(--ot-font-jp); color: var(--ot-text-sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ot-acard__meta {
  font: 500 11.5px var(--ot-font-en); letter-spacing: .5px;
  display: flex; align-items: center; gap: 14px;
}
.ot-date { color: var(--ot-text-dim); }
.ot-read { margin-left: auto; color: var(--ot-cyan); font-weight: 600; letter-spacing: 1px; white-space: nowrap; }

/* もっと見る */
.ot-more-row { display: flex; justify-content: center; margin-top: 28px; }
.ot-btn-more {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 28px; border-radius: 11px;
  font: 700 14px var(--ot-font-jp); color: var(--ot-text); text-decoration: none;
  border: 1px solid var(--ot-border);
  background: linear-gradient(135deg, rgba(25,227,255,.1), rgba(123,91,255,.12));
  transition: .18s;
}
.ot-btn-more:hover { border-color: rgba(25,227,255,.6); box-shadow: 0 0 18px var(--ot-glow-purple); }

/* ---- Category section -------------------------------------------------- */
.ot-category { margin-top: 46px; }
.ot-category__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ot-cat-col {
  border-radius: var(--ot-r-card);
  background: var(--ot-glass-card); backdrop-filter: var(--ot-glass-blur);
  border: 1px solid var(--ot-border-neon); padding: 17px;
}
.ot-cat-col__head { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.ot-cat-dot { width: 9px; height: 9px; border-radius: 2px; }
.ot-cat-dot--cyan   { background: var(--ot-cyan);   box-shadow: 0 0 8px var(--ot-cyan); }
.ot-cat-dot--purple { background: var(--ot-purple); box-shadow: 0 0 8px var(--ot-purple); }
.ot-cat-dot--pink   { background: var(--ot-pink);   box-shadow: 0 0 8px var(--ot-pink); }
.ot-cat-col__head h3 { margin: 0; font: 700 13.5px var(--ot-font-jp); color: #fff; }
.ot-cat-items { display: flex; flex-direction: column; gap: 14px; }
.ot-cat-item { cursor: pointer; text-decoration: none; display: block; }
.ot-cat-item__media {
  aspect-ratio: 16/10; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--ot-border); margin-bottom: 8px; background: var(--ot-bg-inset);
}
.ot-cat-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-cat-item__title {
  font: 500 12.5px/1.5 var(--ot-font-jp); color: var(--ot-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ot-cat-more { display: block; margin-top: 15px; font: 600 12px var(--ot-font-jp); text-decoration: none; }
.ot-cat-more--cyan   { color: var(--ot-cyan); }
.ot-cat-more--purple { color: var(--ot-purple); }
.ot-cat-more--pink   { color: var(--ot-pink); }

/* ---- Pagination -------------------------------------------------------- */
.ot-pagination { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 34px; }
.ot-pagination a,
.ot-pagination .current {
  min-width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font: 600 14px var(--ot-font-en); text-decoration: none;
}
.ot-pagination .current { color: var(--ot-ink); background: var(--ot-grad-main); font-weight: 700; }
.ot-pagination a { color: var(--ot-text); background: var(--ot-card); border: 1px solid var(--ot-border); transition: .18s; }
.ot-pagination a:hover { border-color: rgba(25,227,255,.6); color: var(--ot-cyan); }
.ot-pagination .dots { color: var(--ot-text-dim); padding: 0 4px; }
.ot-pagination .next { width: auto; padding: 0 18px; color: var(--ot-ink); background: var(--ot-grad-main); font-weight: 700; font-family: var(--ot-font-jp); }

/* ---- Sidebar ----------------------------------------------------------- */
.ot-sidebar { display: flex; flex-direction: column; gap: 22px; }
.ot-widget {
  border-radius: 12px;
  background: var(--ot-glass-soft); backdrop-filter: var(--ot-glass-blur);
  border: 1px solid var(--ot-border-neon); padding: 20px;
}
.ot-widget__title {
  font: 700 14px var(--ot-font-jp); color: #fff;
  padding-bottom: 11px; margin-bottom: 15px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #19E3FF, #7B5BFF) 1;
  display: inline-block;
}
.ot-widget--ad      { padding: 14px; }
.ot-widget--profile { text-align: center; }
.ot-widget--ad .ot-ad-label {
  font: 600 10px var(--ot-font-en); letter-spacing: 3px; color: var(--ot-text-dim);
  text-align: center; margin-bottom: 11px;
}
.ot-ad-slot {
  display: flex; align-items: center; justify-content: center;
  min-height: 60px;
}
.ot-ad-slot a { display: block; line-height: 0; }
.ot-ad-slot img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  border: 0 !important;
}
.ot-profile { text-align: center; }
.ot-avatar {
  width: 78px; height: 78px; margin: 0 auto 12px; border-radius: 50%;
  padding: 2px; background: var(--ot-grad-main);
}
.ot-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ot-avatar-placeholder {
  width: 100%; height: 100%; border-radius: 50%; background: var(--ot-bg-inset);
}
.ot-name { font: 700 17px var(--ot-font-jp); color: #fff; }
.ot-role { font: 600 11px var(--ot-font-en); letter-spacing: 1.5px; color: var(--ot-cyan); margin: 5px 0 12px; }
.ot-profile p { margin: 0; font: 400 12.5px/1.85 var(--ot-font-jp); color: var(--ot-text-sub); text-align: left; }
.ot-profile-btn {
  margin-top: 15px; width: 100%; padding: 9px; border-radius: 8px;
  border: 1px solid var(--ot-border); background: var(--ot-bg-inset); color: var(--ot-text);
  font: 700 12.5px var(--ot-font-jp); cursor: pointer; transition: .18s; display: block; text-decoration: none;
  text-align: center;
}
.ot-profile-btn:hover { border-color: rgba(25,227,255,.6); color: var(--ot-cyan); }
.ot-mini-list { display: flex; flex-direction: column; gap: 14px; }
.ot-mini {
  cursor: pointer; display: grid; grid-template-columns: 72px 1fr; gap: 11px;
  align-items: center; text-decoration: none;
}
.ot-mini__media {
  aspect-ratio: 16/10; border-radius: 7px; overflow: hidden;
  border: 1px solid var(--ot-border); background: var(--ot-bg-inset);
}
.ot-mini__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-mini__title {
  font: 500 12px/1.5 var(--ot-font-jp); color: var(--ot-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ot-mini__date { font: 500 10px var(--ot-font-en); color: var(--ot-text-dim); margin-top: 4px; }
.ot-cat-list { display: flex; flex-direction: column; }
.ot-cat-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 2px; font: 500 13.5px var(--ot-font-jp); color: var(--ot-text);
  text-decoration: none; border-bottom: 1px solid var(--ot-border-soft); transition: .18s;
}
.ot-cat-list a:last-child { border-bottom: 0; }
.ot-cat-list a:hover { color: var(--ot-cyan); }
.ot-cat-count { font: 500 11px var(--ot-font-en); color: var(--ot-text-dim); }

/* ---- TOP 専用フッター -------------------------------------------------- */
.ot-footer {
  background: var(--ot-bg-deepest);
  border-top: 1px solid var(--ot-border);
}
.ot-footer__inner {
  max-width: var(--ot-maxw);
  margin: 0 auto;
  padding: 30px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ot-footer__brand { display: flex; align-items: center; gap: 10px; }
.ot-footer__logo-link { display: block; }
.ot-footer__logo-img { height: 32px; width: auto; }
.ot-footer__brand-text {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
}
.ot-footer__mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--ot-grad-main);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ot-footer__name { font: 800 14px var(--ot-font-jp); color: #fff; }
.ot-footer__sub  { font: 500 10px var(--ot-font-en); letter-spacing: 2px; color: var(--ot-text-dim); }
.ot-footer__nav  { display: flex; gap: 16px; flex-wrap: wrap; }
.ot-footer__nav a,
.ot-footer__nav-list a {
  font: 500 12.5px var(--ot-font-jp); color: var(--ot-text-sub);
  text-decoration: none; transition: color .18s;
}
.ot-footer__nav a:hover,
.ot-footer__nav-list a:hover { color: var(--ot-cyan); }
.ot-footer__nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.ot-footer__copy { font: 500 11px var(--ot-font-en); letter-spacing: 1px; color: #5b647e; margin: 0; }

/* ---- Picks grid -------------------------------------------------------- */
.ot-picks { margin-top: 46px; }
.ot-picks__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ot-pick {
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--ot-r-card);
  background: var(--ot-glass-card); backdrop-filter: var(--ot-glass-blur);
  border: 1px solid var(--ot-border-neon);
  overflow: hidden; transition: .22s;
}
.ot-pick:hover {
  transform: translateY(-4px);
  border-color: rgba(25,227,255,.6);
  box-shadow: var(--ot-sh-card-hover);
}
.ot-pick__media {
  aspect-ratio: 16/9;
  overflow: hidden; background: var(--ot-bg-inset); position: relative;
}
.ot-pick__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-pick__no-thumb {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--ot-bg-inset) 60%, rgba(25,227,255,.08));
}
.ot-pick__body { padding: 14px 16px; }
.ot-pick__badge {
  display: inline-block; margin-bottom: 8px;
  padding: 3px 9px; border-radius: 6px;
  font: 700 10.5px var(--ot-font-jp); color: var(--ot-ink);
  background: var(--ot-grad-main);
}
.ot-pick__title {
  margin: 0 0 10px; font: 700 14px/1.5 var(--ot-font-jp); color: #fff; transition: .18s;
}
.ot-pick:hover .ot-pick__title { color: var(--ot-cyan); }
.ot-pick__read {
  font: 600 11.5px var(--ot-font-en); letter-spacing: 1px; color: var(--ot-cyan);
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  .ot-home { grid-template-columns: 1fr; }
  .ot-category__grid { grid-template-columns: 1fr; }
  .ot-picks__grid { grid-template-columns: 1fr; }
  .ot-acard__link { grid-template-columns: 130px 1fr; }
  .ot-sidebar { order: 2; }
}
@media (max-width: 520px) {
  .ot-acard__link { grid-template-columns: 1fr; }
  .ot-acard__media { min-height: 170px; border-right: 0; border-bottom: 1px solid var(--ot-border); }
}