/*
Theme Name: Waikiki STYLE
Theme URI: https://example.com/waikiki-style
Author: Noa Yamato
Author URI: https://example.com
Description: ワイキキSTYLE｜ハワイ・ワイキキのトレンドニュース解説メディア（STRICT FIDELITY移植CSS）。ツーカラム（右サイドバー）／スマホ対応／ホワイト＆グレー基調＋差し色に #083879。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: waikiki-style
*/

/* =========================
   ワイキキSTYLE base styles
   ========================= */
:root{
  --bg:#ffffff;
  --text:#222;
  --muted:#666;
  --line:#e9e9e9;
  --accent:#cbd400; /* 初期値（元CSSのまま保持） */
  --accent-ink:#1a1a1a;
  --card:#f8f9fb;
  --card-2:#f4f4f4;
  --shadow:0 8px 24px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","YuGothic",Meiryo,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.8;
  letter-spacing:.01em;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92vw);margin-inline:auto}
h1,h2,h3{line-height:1.4;margin:0 0 .6em}
p{margin:0 0 1.2em}

.btn{
  display:inline-block;
  padding:.7em 1.1em;
  border:1px solid var(--accent);
  border-radius:10px;
  background:transparent;
  font-weight:600;
}
.btn:hover{background:var(--accent); color:var(--accent-ink)}
.btn-accent{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-accent:hover{filter:brightness(0.95)}

/* ============ Header ============ */
.site-header{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.2) blur(6px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0;
}
.site-logo img{display:block; width:300px; height:auto}
.site-nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.site-nav a{padding:.5em .6em; border-radius:8px}
.site-nav a:hover{background:var(--card)}

/* ============ Hero ============ */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg,#fff, #fafafa)}
.hero-inner{
  display:grid; grid-template-columns:1.15fr .85fr; gap:32px; padding:48px 0 36px;
}
.hero-copy h1{font-size:clamp(22px,2.6vw,34px)}
.hero-copy p{color:var(--muted)}
.hero-visual{border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.hero-badge{
  position:absolute; right:-24px; top:-24px; width:120px; height:120px; opacity:.18;
}
.hero-badge svg{width:100%; height:100%; fill:var(--accent)}

/* ========== Layout ========== */
.layout{
  display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:36px; padding:36px 0 64px;
}

/* ========== Sections ========== */
.section{margin:0 0 48px}
.section.alt{background:linear-gradient(180deg,#fff, #f9fafc); padding:32px; border-radius:18px; border:1px solid var(--line)}
.section-head{margin:0 0 16px}
.section-lead{color:var(--muted)}
.section-cta{margin-top:12px}

.cards-3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow:var(--shadow); transition:transform .2s ease;
}
.card:hover{transform:translateY(-2px)}
.card-ico{width:56px; height:56px; border-radius:12px; background:#fff; display:grid; place-items:center; margin-bottom:8px; border:1px solid var(--line)}

/* ========== News list ========== */
.news-list{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; list-style:none; padding:0; margin:0;
}
.news-item{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.news-link{display:grid; grid-template-rows:auto auto auto; height:100%}
.news-thumb img{width:100%; aspect-ratio:16/9; object-fit:cover}
.news-meta{display:flex; gap:10px; align-items:center; padding:10px 14px; border-top:1px dashed var(--line); color:var(--muted); font-size:.92rem}
.news-meta .cat{
  display:inline-block; padding:.2em .55em; background:var(--accent); border-radius:999px; color:#FFF; font-weight:700;
}
.news-title{padding:0 14px 16px; font-size:1.02rem}

/* ========== Owner ========== */
.owner{background:linear-gradient(180deg,#fff, #f7f7f7); padding:24px; border-radius:18px; border:1px solid var(--line)}
.owner-inner{display:grid; grid-template-columns:160px 1fr; gap:18px; align-items:start}
.owner-photo img{border-radius:50%; border:3px solid var(--accent); background:#fff}
.owner-links{display:flex; gap:12px; list-style:none; padding:0; margin:.6em 0 0}
.owner-links a{padding:.4em .7em; border:1px solid var(--line); border-radius:999px}
.owner-links a:hover{border-color:var(--accent)}

/* ========== Contact ========== */
.contact{background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow)}
.contact-form .form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.contact-form label{display:grid; gap:6px; font-weight:600}
.contact-form input, .contact-form textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:.8em .9em; font:inherit; background:#fff;
}
.contact-form .full{grid-column:1 / -1}
.form-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px}
.agree{display:flex; align-items:center; gap:8px; font-weight:500}
.agree a{color:#000; text-decoration:underline}
.agree input{transform:translateY(1px)}

/* ========== Sidebar ========== */
.sidebar{display:grid; gap:18px}
.widget{background:var(--card-2); border:1px solid var(--line); border-radius:14px; padding:16px}
.widget-title{margin:0 0 10px; font-size:1.02rem}
.search-form{display:flex; gap:8px}
.search-form input{flex:1; border:1px solid var(--line); border-radius:10px; padding:.6em .8em}
.cat-list{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.cat-list a{display:block; padding:.4em .5em; border-radius:8px}
.cat-list a:hover{background:#fff}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tags a{padding:.3em .6em; background:#fff; border:1px solid var(--line); border-radius:999px}
.widget-cta p{color:var(--muted); margin-bottom:10px}
.nl-form{display:flex; gap:8px}
.nl-form input{flex:1; border:1px solid var(--line); border-radius:10px; padding:.6em .8em}

/* ========== Footer ========== */
.site-footer{border-top:1px solid var(--line); background:#fff}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0}
.footer-nav ul{display:flex; gap:14px; list-style:none; margin:0; padding:0}
.footer-nav a{padding:.4em .5em; border-radius:8px}
.footer-nav a:hover{background:var(--card)}
copyright, .copyright{color:var(--muted)}

/* ========== Responsive ========== */
@media (max-width: 1024px){
  .layout{grid-template-columns: minmax(0,1fr) 300px}
}
@media (max-width: 880px){
  .hero-inner{grid-template-columns:1fr; padding:36px 0 24px}
  .layout{grid-template-columns:1fr}
  .sidebar{order:2}
  .content{order:1}
  .news-list{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr 1fr}
  .owner-inner{grid-template-columns:120px 1fr}
  .contact-form .form-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .header-inner{flex-direction:column; align-items:flex-start; gap:10px}
  .site-nav ul{flex-wrap:wrap; gap:10px}
  .cards-3{grid-template-columns:1fr}
  .owner-inner{grid-template-columns:1fr; text-align:left}
  .owner-photo{justify-self:start}
  .form-foot{flex-direction:column; align-items:stretch}
}

/* ========== Subtle details ========== */
.section h2{
  position:relative; padding-left:12px;
}
.section h2::before{
  content:""; position:absolute; left:0; top:.35em; width:6px; height:1.1em; border-radius:4px; background:var(--accent);
}
.news-item:hover .news-title{text-decoration:underline}

/* ================================
   ここからブリッジCSS（WP最小）
   ================================ */

/* Yoastパンくず */
#breadcrumbs{margin:0 0 12px; font-size:.92rem; color:var(--muted)}
#breadcrumbs a{color:inherit; text-decoration:underline}
#breadcrumbs .breadcrumb_last{font-weight:700}

/* WP本体画像・埋め込みの整え */
.alignnone, .aligncenter, .alignleft, .alignright{max-width:100%;height:auto}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px}
.wp-caption-text{font-size:.85rem;color:var(--muted);margin-top:6px}

/* Gutenberg（抜粋） */
.wp-block-image img{height:auto}
.wp-block-quote{border-left:4px solid var(--accent); padding-left:12px; color:#333}
.wp-block-pullquote{border-top:2px solid var(--line); border-bottom:2px solid var(--line); color:#333}
.wp-block-table{width:100%; border-collapse:collapse}
.wp-block-table td,.wp-block-table th{border:1px solid var(--line); padding:.6em .8em}
.wp-block-separator{border:none;border-top:1px solid var(--line);margin:24px 0}

/* ページネーション（archive.php） */
.pagination .page-numbers{display:inline-block; padding:.4em .7em}
.pagination .page-numbers.current{background:var(--accent); color:var(--accent-ink); border-radius:8px}
.pagination .page-numbers:hover{text-decoration:underline}
.section-cta .btn a{display:inline-block} /* span.btn 内のリンク体裁を担保 */

/* 記事ナビ（single.php） */
.post-nav a{color:inherit}
.post-nav a:hover{text-decoration:underline}

/* アイキャッチの汎用的余白 */
.news-thumb{margin:0}

/* 検索フォーム（404内） */
.search-form input[type="search"]{width:100%}

/* フッターメニュー（wp_nav_menu items_wrap=%3$s 対応） */
.footer-nav li{list-style:none}
.footer-nav li a{display:block}

/* アクセシビリティ支援 */
.screen-reader-text{
  position:absolute; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden; white-space:nowrap; word-wrap:normal;
}
.screen-reader-text:focus{
  clip:auto; height:auto; width:auto; z-index:100000; background:#fff; padding:.6em; border:1px solid var(--line); border-radius:6px;
}

/* ==========================
   差し色の最終指定（要件）
   ==========================
   ※「元CSSは改変せず移植」の方針を守るため、変数のみ末尾で上書き。
   ここで --accent を #083879 に統一します。
*/
:root{
  --accent:#083879; /* 要件の差し色に最終上書き */
}

/* 差し色のコントラスト最適化（リンク可読性） */
a:hover{color:inherit}

/* 仕上げの微調整（視覚的メリハリの最適化・元DOM不変） */
.news-item{transition:transform .18s ease, box-shadow .18s ease}
.news-item:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.08)}
.owner-links a{transition:border-color .15s ease, transform .15s ease}
.owner-links a:hover{transform:translateY(-1px)}
.site-nav a{transition:background .15s ease}

/* 印刷簡易対応（余白・背景オフ） */
@media print{
  .site-header,.sidebar,.site-footer,.hero-badge{display:none !important}
  .container{width:auto;margin:0 10mm}
  a{text-decoration:underline}
}

/* --- breadcrumb をGridの上段フル幅に固定し、余白を最小化 --- */
.layout > #breadcrumbs{
  grid-column: 1 / -1;   /* 2カラムをまたいで上段に配置 */
  margin: 8px 0 12px;
  padding: 0;
  line-height: 1.4;
  font-size: .92rem;
  color: var(--muted);
}

/* --- main内のカラム配置を明示（誤配置防止） --- */
.layout > .content{ grid-column: 1; }
.layout > .sidebar{ grid-column: 2; }

/* モバイルは1カラムなので既存レスポンシブを壊さない */
@media (max-width: 880px){
  .layout > #breadcrumbs{ grid-column: 1; }
}