html,body{ outline: 6px solid magenta !important; }

/*** From Kev Quirk ***/
.post-link {
  font-size: 1.6rem;
  font-weight: bold;
}

.meta {
  color: var(--text-light);
  font-size: 1rem;
  margin: 1rem 0 0.5rem 0.1rem;
}

nav a.current {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.medium {
  font-size: 1.4rem;
}

/*** For Bludit ***/
body {
  grid-template-columns: 1fr min(65rem, 90%) 1fr;
}

.small {
  font-size: smaller;
}

.wrapper {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
}

/** Header **/
.site-logo {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  opacity: 0.85;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}

header > a, header > a:visited {
  color: inherit;
  text-decoration: none;
}

header > a:hover {
  color: var(--accent);
  .site-logo {
    opacity: 1;
    outline: 3px solid var(--accent);
  }
}

/** Main **/
main {
  min-width: 66%;
  padding-top: 0;
}

main h2 {
  margin-top: 0;
}

article h2, .cover-image + h2 {
  margin: 1rem 0;
}

article + nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.blog-item {
  margin-bottom: 1rem;
}

.meta-icon {
  vertical-align: middle;
  transform: translateY(-10%);
}

.meta-icon:not(:first-child) {
  margin-left: 1rem;
}

.meta-tag {
  margin: 0 0.1rem;
  font-size: smaller;
}

.meta-profile-picture {
  border-radius: 50%;
  float: left;
}

.cover-image {
  display: flex;
  margin: 0 auto;
  width: 100%;
  object-fit: cover;
}

/** Sidebar **/
aside {
  min-width: 30%;
}

/* Pagination */
a.active {
  font-weight: bolder;
  color: var(--text);
  text-decoration: none;
}

/** Footer **/
footer ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
    font-size: x-large;
    padding: 0;
}

footer ul li img {
	max-width: 1.375rem;
	min-height: 1.375rem;
	aspect-ratio: 1 / 1;
  padding: 0.1rem;
  border-radius: 40%;
}

/* Socials */
.social a {
  display: block;
  background-color: #f5f7ff;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
  position: relative;
}

.social a::after {
  z-index: 1;
  content: '';
  display: block;
  height: 1.4rem;
  width: 1.4rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  right: 0;
  top: 50%;
}

.social a:hover {
  background-color: var(--marked);
}

.social span {
  clip      : rect(1px, 1px, 1px, 1px);
  clip-path : inset(50%);
  height    : 1px;
  width     : 1px;
  margin    : -1px;
  overflow  : hidden;
  padding   : 0;
  border    : 0;
  position  : absolute;
}

.social .social-bluesky a::after {
  background-image: url(../img/socials/bluesky.svg);
}

.social .social-codepen a::after {
  background-image: url(../img/socials/codepen.svg);
}

.social .social-facebook a::after {
  background-image: url(../img/socials/facebook.svg);
}

.social .social-github a::after {
  background-image: url(../img/socials/github.svg);
}

.social .social-gitlab a::after {
  background-image: url(../img/socials/gitlab.svg);
}

.social .social-googleplus a::after {
  background-image: url(../img/socials/googleplus.svg);
}

.social .social-instagram a::after {
  background-image: url(../img/socials/instagram.svg);
}

.social .social-linkedin a::after {
  background-image: url(../img/socials/linkedin.svg);
}

.social .social-mastodon a::after {
  background-image: url(../img/socials/mastodon.svg);
}

.social .social-rss a::after {
  background-image: url(../img/socials/rss.svg);
}

.social .social-telegram a::after {
  background-image: url(../img/socials/telegram.svg);
}

.social .social-twitter a::after {
  background-image: url(../img/socials/twitter.svg);
}

.social .social-xing a::after {
  background-image: url(../img/socials/xing.svg);
}

.social .social-youtube a::after {
  background-image: url(../img/socials/youtube.svg);
}

/* From blogx theme */
.plugin {
	margin-top: 3rem;
}

.plugin-label {
	font-size: 1em;
	text-transform: uppercase;
}

.plugin ul {
	list-style: none;
	padding: 0 0 0 10px;
}

/* From Bootstrap */
.sr-only {
	position: absolute;
	width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Smaller screens */
@media only screen and (max-width: 720px) {
  body > header {
    padding: 0 .5rem 1rem;
  }

  body > header p {
    margin: 0.5rem auto;
  }

  .wrapper {
    flex-wrap: wrap;
  }

  aside {
    margin-top: 2rem;
  }

  article + nav {
    gap: 0.375rem;    
    flex-wrap: wrap;
    justify-content: space-around;
  }

  body > footer {
    margin-top: 2rem;
  }
}


/* ====== index2.php の配色に合わせるための変数 ====== */
:root{
  --bg: #ffffff;          /* ← index2.phpの背景色 */
  --surface: #f7f7f7;     /* ← カード/セクション背景 */
  --text: #222222;        /* ← 文字色 */
  --muted: #666666;       /* ← サブテキスト */
  --border: #e5e7eb;      /* ← 罫線 */
  --primary: #2068d8;     /* ← 主要色（ボタン/リンク/見出し） */
  --primary-dark: #1349a9;/* ← ホバー時など */
  --accent: #f59e0b;      /* ← 強調色（必要なら） */
}

/* ベース */
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);line-height:1.7;}
a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--primary-dark);text-decoration:underline;}
img{max-width:100%;height:auto;}

/* コンテナ幅（index2.phpに合わせて） */
.container{max-width:1080px;margin:0 auto;padding:0 16px;}

/* ヘッダー */
#site-header{background:var(--bg);padding:24px 0;border-bottom:1px solid var(--border);}
#site-header .site-title{margin:0;font-size:1.8rem;font-weight:700;}
#site-header .site-title a{color:var(--text);}
#site-header .site-tagline{margin:.25rem 0 0;color:var(--muted);font-size:.95rem;}

/* グローバルナビ（index2.phpの並び/余白感に寄せる） */
#global-nav{background:var(--bg);border-bottom:1px solid var(--border);}
#global-nav .nav{display:flex;flex-wrap:wrap;gap:18px;list-style:none;margin:0;padding:10px 0;}
#global-nav .nav li{margin:0;}
#global-nav .nav a{display:block;padding:8px 6px;border-radius:6px;font-weight:600;}
#global-nav .nav a:hover{background:var(--surface);text-decoration:none;}

/* 2カラム（simpleのマークアップ想定） */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;margin:28px 0;}
@media (max-width:960px){.layout{grid-template-columns:1fr;}}

/* 記事一覧（home） */
.post{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;margin:0 0 22px;}
.post-title{margin:.2em 0 .4em;font-size:1.4rem;line-height:1.3;}
.post-title a{color:var(--text);}
.post-meta{color:var(--muted);font-size:.9rem;margin-bottom:.6rem;}
.post-body{color:var(--text);}
.read-more a{display:inline-block;margin-top:.6rem;padding:.5rem .8rem;border:1px solid var(--primary);border-radius:8px;color:var(--primary);}
.read-more a:hover{background:var(--primary);color:#fff;text-decoration:none;}

/* 単一ページ（page） */
.page .page-title{margin:.2em 0 .6em;font-size:1.8rem;line-height:1.25;}
.page .page-body{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;}

/* サイドバー */
.sidebar{position:relative;}
.sidebar > *{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;margin:0 0 18px;}
.sidebar h2,.sidebar h3{margin:.2em 0 .6em;}

/* フッター */
#site-footer{border-top:1px solid var(--border);padding:28px 0;color:var(--muted);font-size:.95rem;background:var(--bg);}

/* 見出し・表・フォームなど共通（必要に応じて） */
h1,h2,h3{color:var(--text);}
table{width:100%;border-collapse:collapse;margin:1rem 0;background:var(--bg);}
th,td{border:1px solid var(--border);padding:.6rem .7rem;text-align:left;}
button,.btn,input[type=submit]{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:.6rem 1rem;cursor:pointer;}
button:hover,.btn:hover,input[type=submit]:hover{background:var(--primary-dark);}

/* 既存simpleの装飾を打ち消したいときの安全ガード */
body.home a, body.page a{text-underline-offset:2px;}

/* ===== 見出しの色（h1〜h3）を最優先で固定 ===== */
h1, h2, h3,
.post .post-title, .post .post-title a,
.page .page-title, .page .page-title a,
#site-header h1, #site-header h1 a {
  color: #993300 !important; /* ← 見出し色 */
  text-decoration: none;
}

/* 見出し内のリンクに下線が出る場合の抑止 */
.post .post-title a:hover,
.page .page-title a:hover,
#site-header h1 a:hover {
  color: #993300 !important;
  text-decoration: underline; /* 好みで none / underline */
}

/* ===== 帯（バンド）色を強制 ===== */
/* 使っている帯のDOMに合わせて候補をまとめて上書き */
#global-nav,
#header,
#gnavi,
.site-title-bar,
.page-title-bar,
.status-banner {
  background: #2c7be5 !important; /* ← 帯のベース色（単色） */
  color: #fff !important;
  border: none !important;
}

/* グラデ帯にしたい場合（どれか1つを使う） */
.status-banner,
.site-title-bar,
#header { 
  background: linear-gradient(135deg, #2c7be5, #00b0a8) !important;
}

/* 帯の中のリンク・ナビの文字色 */
#global-nav a, #gnavi a, .status-banner a {
  color: #fff !important;
}
#global-nav a:hover, #gnavi a:hover, .status-banner a:hover {
  opacity: .9;
  text-decoration: none;
}

/* ===== ダークモードの自動配色を無効化（念のため） ===== */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
  body { background: #fff !important; color: #222 !important; }
  /* 見出し＆帯は上の指定が !important なのでそのまま勝ちます */
}

/* ===== 帯に使う .status-banner を使うなら最低限 ===== */
.status-banner{
  max-width: 980px; margin:16px auto; padding:14px 18px;
  border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.15);
  font-weight:700; font-size: clamp(16px,2.4vw,22px); text-align:center;
}
.status-banner span { display:inline-block; }
.status-banner .pill{
  display:inline-block; margin-left:.6em; padding:.2em .6em;
  background: rgba(255,255,255,.2); border-radius:999px; font-weight:700;
}
.status-banner .time{ font-weight:400; opacity:.9; margin-left:.6em; }
@media (max-width: 640px){
  .status-banner .pill, .status-banner .time{ display:block; margin-left:0; margin-top:4px; }
}