/*
Theme Name: Ordiora
Theme URI: https://www.ordiora.com/
Author: Ordiora
Description: 個人ブランド Ordiora の専用テーマ。1カラム固定・タイポグラフィ主導の静的な構成で、記事（/blog/）・実績（/products/）・更新情報（/news/）を扱う。
Version: 0.7.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ordiora
Tags: custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   目次
   1. トークン
   2. リセット・基本要素
   3. レイアウト
   4. パーツ
   5. 一覧（縦リスト）
   6. 記事
   7. WordPress 必須クラス
   8. レスポンシブ

   設計方針（UI基本案）
     - 1カラム固定。サイドバーは持たない。
     - 一覧にカードを使わない。罫線を引かず、余白で区切る。
       罫線を使うのはヘッダ・フッタ・記事下の区切りだけ。
     - 色によるアクセントを置かない。階層は太さ・大きさ・余白でつくる。
     - 角丸ゼロ。影を使わない。
   ========================================================================== */


/* ==========================================================================
   1. トークン
   色や余白を変えるときは必ずここを変える。個別指定で上書きしない。
   ========================================================================== */

:root {
  --color-bg: #fbfbfc;
  --color-surface: #f2f2f4;
  --color-text: #17181a;
  --color-muted: #6b6e73;
  --color-line: #d4d6db;
  --color-code: #1e1e1e;
  --color-code-text: #e8e8e8;

  /* 欧文は Archivo。和文はOSのフォントへグリフ単位でフォールバックする。
     Archivo に日本語グリフが無いため、この並びで意図どおり切り替わる。
     和文用のWebフォントは読み込まない（表示速度を優先する方針）。 */
  --font-body: "Archivo", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --wrap: 960px;        /* 最大幅 */
  --measure: 700px;     /* 本文幅 */
  --header-h: 56px;

  /* 互換エイリアス。
     移行元から引き継いだ変数名を参照している箇所が残っていても
     色が壊れないようにしてある。新しく書くときは上の名前を使うこと。 */
  --color-divider: var(--color-line);
  --color-accent: var(--color-text);
  --color-accent-700: var(--color-muted);
  --color-neutral-600: var(--color-muted);
  --color-neutral-700: var(--color-muted);
  --color-neutral-800: var(--color-text);
  --wrap-narrow: var(--measure);
}


/* ==========================================================================
   2. リセット・基本要素
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
h1 { font-size: 36px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
h5 { font-size: 15px; }
h6 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-muted);
}

p { margin: 0 0 var(--space-6); text-wrap: pretty; }
a { color: var(--color-text); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-muted); }
img, video, iframe { display: block; max-width: 100%; height: auto; }
figure { margin: 0 0 var(--space-6); }
figcaption { font-size: 12px; margin-top: var(--space-2); color: var(--color-muted); }
hr { height: 1px; border: 0; margin: var(--space-8) 0; background: var(--color-line); }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
pre {
  background: var(--color-code);
  color: var(--color-code-text);
  padding: 20px 22px;
  overflow-x: auto;
  line-height: 1.7;
  font-size: 13px;
}
pre code { color: inherit; }
:not(pre) > code {
  background: var(--color-surface);
  padding: 2px 5px;
}

.text-muted { color: var(--color-muted); }
.mono { font-family: var(--font-mono); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-text) 14%, transparent); }


/* ==========================================================================
   3. レイアウト
   1カラム固定。スマートフォンでも1カラムを維持する。
   ========================================================================== */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--space-8);
}
.wrap-narrow {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--space-8);
}

/* 一覧ページだけ、右に絞り込みの列を置く（0.6.0）。
   本文ページは1カラムのまま。wrap は 960px から広げないので、
   一覧は約620px、右列は240pxになる。左端は他のページと揃う。
   flex-wrap があるので、入らなくなれば右列は一覧の下へ回る。 */
.with-aside {
  display: flex; align-items: flex-start;
  gap: var(--space-12); flex-wrap: wrap;
}
.with-aside > .main { flex: 1 1 380px; min-width: 0; }
.with-aside > .aside {
  flex: 0 1 240px; min-width: 200px;
  display: flex; flex-direction: column; gap: var(--space-12);
  position: sticky; top: calc(var(--header-h) + var(--space-8));
}

/* セクションの区切りは罫線ではなく余白でつくる。 */
.section { padding-block: 0 var(--space-16); }
.section-first { padding-block: 120px var(--space-16); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); margin-bottom: var(--space-12);
}

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-muted);
}

.more { font-size: 13px; color: var(--color-muted); white-space: nowrap; }

/* メタ情報の行。日付・カテゴリ・読了時間を等幅で並べる。 */
.meta {
  display: flex; gap: var(--space-6); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  color: var(--color-muted);
}
.meta a { color: inherit; }
.meta a:hover { color: var(--color-text); }


/* ==========================================================================
   4. パーツ
   ========================================================================== */

/* — スキップリンク — */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--color-text); color: var(--color-bg);
  padding: var(--space-2) var(--space-4); z-index: 100;
}
.skip-link:focus { left: var(--space-4); top: var(--space-2); }

/* — ヘッダ（低め・最小構成） — */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); min-height: var(--header-h);
}
.site-brand {
  display: inline-flex; align-items: baseline; gap: var(--space-3);
  color: var(--color-text);
}
.site-brand .name {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 15px; letter-spacing: 0.08em;
}
.site-brand .tagline { font-size: 11px; color: var(--color-muted); letter-spacing: 0.04em; }

.global-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 28px; flex-wrap: wrap; align-items: center;
}
.global-nav a {
  color: var(--color-muted); font-size: 13px; letter-spacing: 0.04em;
}
.global-nav a:hover { color: var(--color-text); }
.global-nav .current-menu-item > a,
.global-nav .current_page_item > a,
.global-nav .current-menu-parent > a {
  color: var(--color-text); font-weight: 600;
}

.nav-toggle { display: none; }

/* — パンくず — */
.breadcrumb {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-muted);
  margin-bottom: var(--space-8);
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb > span[aria-hidden] { padding-inline: var(--space-2); }

/* — ボタン（アクセント色を持たないので、塗りと下線で差をつける） — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; font-family: var(--font-heading); font-weight: 600;
  font-size: 13px; line-height: 1.4;
  padding: 9px 18px; border: 1px solid transparent; background: transparent;
  color: var(--color-text);
}
.btn-primary { background: var(--color-text); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-muted); color: var(--color-bg); }
.btn-secondary { border-color: var(--color-line); }
.btn-secondary:hover { background: var(--color-surface); color: var(--color-text); }
.btn-text {
  padding: 0 0 2px; border-bottom: 2px solid var(--color-text);
}
.btn-text:hover { color: var(--color-muted); border-bottom-color: var(--color-muted); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* — タグ（公開状態・カテゴリ） — */
.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 8px;
}
.tag-accent { background: var(--color-text); color: var(--color-bg); }
.tag-neutral { border: 1px solid var(--color-line); color: var(--color-muted); padding: 2px 8px; }
a.tag-neutral:hover { color: var(--color-text); border-color: var(--color-muted); }

/* — フォーム — */
.input {
  width: 100%; min-height: 38px; padding: 7px 10px; font: inherit; font-size: 14px;
  color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-line);
}
.input:hover { border-color: var(--color-muted); }
.input:focus-visible { border-color: var(--color-text); outline-offset: 0; }

/* — テーブル — */
.entry-content table {
  width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 var(--space-6);
}
.entry-content th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-muted); padding: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}
.entry-content td { padding: var(--space-2); border-bottom: 1px solid var(--color-line); }

/* — ページネーション — */
.pagination {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  margin-top: 72px; font-family: var(--font-mono); font-size: 13px;
}
.pagination .page-numbers { color: var(--color-muted); }
.pagination .page-numbers:hover { color: var(--color-text); }
.pagination .page-numbers.current { color: var(--color-text); font-weight: 600; }

/* — フッタ（思想文＋最小リンク） — */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding-block: 56px 72px;
  font-size: 13px; color: var(--color-muted);
}
.site-footer .creed {
  max-width: 560px; font-size: 15px; color: var(--color-muted);
  margin: 0 0 var(--space-8);
}
.site-footer .inner {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  justify-content: space-between; align-items: baseline;
}
.site-footer ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-6); flex-wrap: wrap;
}
.site-footer a { color: var(--color-muted); }
.site-footer a:hover { color: var(--color-text); }
.site-footer .copyright { font-family: var(--font-mono); font-size: 12px; }


/* ==========================================================================
   5. 一覧（縦リスト）
   カードを使わない。罫線も引かない。項目の区切りは余白だけでつくる。
   ========================================================================== */

.post-list { display: flex; flex-direction: column; gap: 52px; max-width: var(--measure); }
.post-list.is-compact { gap: 44px; }

.post-item { display: flex; flex-direction: column; gap: var(--space-2); }
.post-item .series {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--color-muted);
}
.post-item h2, .post-item h3 {
  margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.5;
}
.post-item .excerpt { margin: 0; font-size: 15px; color: var(--color-muted); }

/* 強調表示（Featured）。枠で囲わず、字の大きさだけで差をつける。 */
.post-item.is-featured h2 { font-size: 32px; font-weight: 800; line-height: 1.4; }
.post-item.is-featured .excerpt { font-size: 16px; }
.post-item.is-featured { gap: var(--space-4); }

/* 実績の一覧 */
.work-list { display: flex; flex-direction: column; gap: 56px; max-width: var(--measure); }
.work-item { display: flex; flex-direction: column; gap: var(--space-3); }
.work-item .head {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.work-item h2, .work-item h3 {
  margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
}
.work-item .version { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }
.work-item .excerpt { margin: 0; font-size: 15px; color: var(--color-muted); }
.work-item.is-draft h2, .work-item.is-draft h3 { color: var(--color-muted); }

/* 更新情報の一覧 */
.news-list { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--measure); }
.news-list a {
  display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: baseline;
  color: var(--color-text);
}
.news-list a:hover .title { color: var(--color-muted); }
.news-list .date {
  font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); min-width: 88px;
}
.news-list .title { font-size: 16px; flex: 1; min-width: 220px; }


/* ==========================================================================
   6. 記事
   ========================================================================== */

.entry-header { max-width: var(--measure); display: flex; flex-direction: column; gap: var(--space-4); }
.entry-header h1 { margin: 0; font-size: 32px; }
.entry-header .series {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--color-muted);
}

/* — 前提の整理（対象読者・前提知識・結論の方向性） — */
.premise {
  background: var(--color-surface);
  padding: 28px 32px;
  margin: 56px 0;
  max-width: var(--measure);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.premise dl { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.75; }
.premise .row { display: flex; gap: var(--space-4); }
.premise dt { min-width: 88px; color: var(--color-muted); }
.premise dd { margin: 0; }

/* — アーカイブページの説明文・注記（ウィジェットで書く文章） — */
.archive-lead { max-width: var(--measure); color: var(--color-muted); }
.archive-lead > p { margin: 0 0 var(--space-4); }
.archive-lead > *:last-child { margin-bottom: 0; }

.archive-note { max-width: var(--measure); font-size: 14px; color: var(--color-muted); }
.archive-note > p { margin: 0 0 var(--space-4); }
.archive-note > *:last-child { margin-bottom: 0; }

/* — 一覧の絞り込み（右カラム） —
   囲みも影も付けない。見出しと罫線だけで区切る。 */
.aside-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-muted);
  margin: 0 0 var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.term-list { list-style: none; margin: 0; padding: 0; }
.term-list li + li { margin-top: var(--space-3); }
.term-list a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  font-size: 13px; line-height: 1.5; color: var(--color-muted);
  text-decoration: none;
}
.term-list a:hover { color: var(--color-text); }
.term-list a.is-current { color: var(--color-text); font-weight: 600; }

.term-count {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-muted); flex: none;
}

.aside-reset { margin: 0; }

/* — トップの About 節（ウィジェットで書く文章） — */
.front-about { max-width: var(--measure); }
.front-about > p { margin: 0 0 var(--space-6); }
.front-about > *:last-child { margin-bottom: 0; }

/* — 目次 — */
.toc {
  margin: 0 0 var(--space-16); max-width: var(--measure);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.toc h5 {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-muted);
}
.toc ol {
  margin: 0; padding-left: 1.3em;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; color: var(--color-muted);
}
.toc a { color: var(--color-muted); }
.toc a:hover { color: var(--color-text); }

/* — 本文 — */
.entry-content { max-width: var(--measure); font-size: 16px; line-height: 1.9; }
.entry-content h2 {
  font-size: 22px; margin: var(--space-16) 0 var(--space-4);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.entry-content h3 {
  font-size: 18px; margin: var(--space-12) 0 var(--space-3);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.entry-content > *:first-child { margin-top: 0; }
.entry-content p { margin: 0 0 var(--space-6); }
.entry-content ul, .entry-content ol { margin: 0 0 var(--space-6); padding-left: 22px; }
.entry-content li { margin-bottom: var(--space-1); }
.entry-content blockquote {
  margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-6);
  border-left: 2px solid var(--color-line); color: var(--color-muted);
}
.entry-content pre { margin: 0 0 var(--space-6); }

/* — 記事下の区切り（罫線を使う数少ない場所） — */
.entry-foot {
  max-width: var(--measure);
  border-top: 1px solid var(--color-line);
  padding-top: 44px; margin-top: 56px;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.entry-nav {
  max-width: var(--measure);
  display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
  padding: 56px 0 0; font-size: 13px;
}
.entry-nav a { color: var(--color-muted); }
.entry-nav a:hover { color: var(--color-text); }


/* ==========================================================================
   7. WordPress 必須クラス
   テーマとして正しく動作させるために必要。省略しないこと。
   ========================================================================== */

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0;
  overflow: hidden; position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--color-bg); clip: auto; clip-path: none;
  color: var(--color-text); display: block; font-size: 14px;
  height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px;
  top: 5px; width: auto; z-index: 100000;
}

.alignleft { float: left; margin: 0 var(--space-6) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { margin-block: var(--space-6); }

.wp-caption { max-width: 100%; margin-bottom: var(--space-4); }
.wp-caption-text { font-size: 12px; margin-top: var(--space-1); color: var(--color-muted); }
.sticky { }
.gallery-caption { font-size: 12px; }
.bypostauthor { }

.wp-block-image { margin: 0 0 var(--space-6); }
.wp-block-table { overflow-x: auto; }


/* ==========================================================================
   8. レスポンシブ
   1カラムのまま、余白と字の大きさだけを詰める。
   ========================================================================== */

@media (max-width: 900px) {
  .wrap, .wrap-narrow { padding-inline: var(--space-6); }
  .section { padding-block: 0 var(--space-12); }
  .section-first { padding-block: 80px var(--space-12); }
  .post-list { gap: 44px; }
  .work-list { gap: 44px; }

  /* 右の列は一覧の下へ回す。固定もやめる。 */
  .with-aside { gap: var(--space-16); }
  .with-aside > .aside {
    position: static; flex: 1 1 100%; max-width: var(--measure);
  }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  h1 { font-size: 28px; }
  .entry-header h1 { font-size: 26px; }
  .post-item.is-featured h2 { font-size: 24px; }
  .post-item h2, .post-item h3, .work-item h2, .work-item h3 { font-size: 19px; }
  .wrap, .wrap-narrow { padding-inline: var(--space-4); }
  .section-first { padding-block: 56px var(--space-12); }
  .premise { padding: 20px 22px; margin: 40px 0; }
  .premise .row { flex-direction: column; gap: 2px; }
  .premise dt { min-width: 0; }
  .meta { gap: var(--space-4); }

  /* ナビはボタンで開閉する */
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--color-line);
    padding: var(--space-2) var(--space-3); font: inherit; font-size: 12px;
    cursor: pointer; color: var(--color-text);
  }
  .site-header .inner { flex-wrap: wrap; padding-block: var(--space-2); }
  .global-nav { display: none; width: 100%; }
  .global-nav.is-open { display: block; }
  .global-nav ul { flex-direction: column; gap: 0; align-items: stretch; }
  .global-nav li { border-top: 1px solid var(--color-line); }
  .global-nav a { display: block; padding: var(--space-3) 0; }

  .site-brand .tagline { display: none; }

  .site-footer .inner { flex-direction: column-reverse; align-items: flex-start; gap: var(--space-6); }
}