/*
Theme Name: ChigilPro Tema
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: Minimal starter theme for ChigilPro site.
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chigilpro-tema
*/

/* ===== CSS Variables ===== */
:root {
	--color-bg: #ffffff;
	--color-text: #1a1a1a;
	--color-muted: #6b7280;
	--color-border: #e5e7eb;
	--color-primary: #2563eb;
	--container-max: 1100px;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
}

/* ===== Reset / Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: Inter, "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
	line-height: 1.7;
	color: var(--color-text);
	background-color: var(--color-bg);
}
/* Typography scale */
h1, h2, h3, h4 { font-family: Inter, "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: .01em; }
h1 { font-size: clamp(1.8rem, 2.4vw, 2.4rem); }
h2 { font-size: clamp(1.5rem, 2vw, 2rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
p, li { font-weight: 400; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* A11y */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ===== Layout ===== */
.container {
	max-width: var(--container-max);
	width: 92%;
	margin-left: auto;
	margin-right: auto;
}

.site-header {
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-4) 0;
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--space-3);
}
.site-branding .site-title {
	font-weight: 700;
	font-size: 1.25rem;
}
.site-branding .site-description {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.9rem;
}
.site-branding { text-align: center; }

.site-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: var(--space-4);
	justify-content: center;
}
.site-nav .menu li { position: relative; }
.site-nav .menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 8px 0;
	min-width: 200px;
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
	z-index: 10000;
}
.site-nav .menu .sub-menu a { display: block; padding: 8px 12px; }
.site-nav .menu li:hover > .sub-menu { display: block; }
.site-nav .menu li:focus-within > .sub-menu { display: block; }
.site-nav .menu li.menu-item-has-children > a::after {
	content: '\25BE'; /* ▼ */
	margin-left: 6px;
	font-size: .8em;
	opacity: .8;
}
.site-nav a {
	padding: var(--space-2) var(--space-3);
	border-radius: 6px;
}
.site-nav a:hover {
	background: rgba(37, 99, 235, 0.08);
}

.site-main { padding: var(--space-8) 0; }
.entry-title { text-align: center; }
.hero { text-align: center; }
.footer-nav ul { justify-content: center; }

.entry-title { margin: 0 0 var(--space-4); line-height: 1.3; }
.entry-content > * + * { margin-top: var(--space-4); }
.home-section { text-align: center; }

.post-summary { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }

.site-footer {
	border-top: 1px solid var(--color-border);
	padding: var(--space-6) 0;
	color: var(--color-muted);
	font-size: 0.95rem;
}

/* Footer menu */
.footer-nav { margin-bottom: var(--space-4); }
.footer-nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-nav a {
	color: var(--color-text);
	opacity: .8;
	padding: var(--space-2) var(--space-3);
	border-radius: 8px;
	transition: color .2s ease, background .2s ease, box-shadow .25s ease, opacity .2s ease;
}
.footer-nav a:hover { background: rgba(248, 248, 248, 0.06); box-shadow: 0 0 0 1px rgba(248, 248, 248, 0.12), 0 0 12px rgba(248, 248, 248, 0.18); opacity: 1; }
.footer-nav .current-menu-item > a,
.footer-nav a[aria-current="page"] { color: var(--color-accent); background: var(--color-accent-weak); box-shadow: 0 0 0 1px rgba(220, 20, 60, 0.35), 0 0 14px rgba(220, 20, 60, 0.3); }

@media (max-width: 768px) {
	.footer-nav ul { justify-content: center; }
}

/* WordPress align helpers */
.alignwide { max-width: min(1200px, 95%); margin-inline: auto; }
.alignfull { width: 100%; margin-left: 0; margin-right: 0; }

/* ===== Theme Variables (White-based) ===== */
:root {
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-text: #111827;
	--color-muted: #6B7280;
	--color-border: #E5E7EB;
	--color-accent: #2563EB;
	--color-accent-weak: rgba(37, 99, 235, 0.12);
	--header-height: 64px;
	--radius: 12px;
}

html { scroll-behavior: smooth; }

.site-header {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 9999;
}

.site-branding .site-title { color: var(--color-text); }
.site-branding .site-description { color: var(--color-muted); }

/* Ensure header menu stays on top and clickable (desktop) */
.header-inner { position: relative; z-index: 10000; }
.site-nav { position: relative; z-index: 10001; }

.site-nav a {
	color: var(--color-text);
	opacity: 0.9;
	padding: var(--space-2) var(--space-3);
	border-radius: 8px;
	transition: color .2s ease, background .2s ease, box-shadow .25s ease, opacity .2s ease;
}
.site-nav a:hover {
	background: rgba(37, 99, 235, 0.08);
	opacity: 1;
}

/* Force header nav to be on top and clickable (desktop) */
.site-header, .header-inner, .site-nav, .site-nav ul, .site-nav li, .site-nav a {
	position: relative;
	z-index: 100000;
}
.site-nav a { cursor: pointer; pointer-events: auto; }

/* Active current menu item */
.site-nav .current-menu-item > a,
.site-nav a[aria-current="page"],
.site-nav a[aria-current="true"] {
	color: #0b88bf;
	background: var(--color-accent-weak);
	box-shadow: 0 0 0 1px rgba(14,165,233,.35), 0 0 14px rgba(14,165,233,.25);
}

/* Header CTA button (Contact) */
.site-nav .is-cta > a {
	background: linear-gradient(180deg, #38bdf8, #0ea5e9);
	color: #fff;
	box-shadow: 0 0 0 1px rgba(14,165,233, .35), 0 8px 24px rgba(14,165,233, .35);
	border-radius: 999px;
}
.site-nav .is-cta > a:hover { box-shadow: 0 0 0 1px rgba(14,165,233, .45), 0 12px 28px rgba(14,165,233, .55); }

.menu-toggle {
	appearance: none;
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	border-radius: 8px;
	padding: 8px 10px;
	line-height: 0;
	cursor: pointer;
	display: none;
	transition: background .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.menu-toggle:hover { box-shadow: 0 0 0 1px rgba(248, 248, 248, 0.12), 0 0 12px rgba(248, 248, 248, 0.18); }
.menu-toggle .burger {
	display: inline-block;
	width: 22px;
	height: 2px;
	background: currentColor;
	position: relative;
}
.menu-toggle .burger::before,
.menu-toggle .burger::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: currentColor;
}
.menu-toggle .burger::before { top: -6px; }
.menu-toggle .burger::after { top: 6px; }

/* Mobile nav overlay */
@media (max-width: 768px) {
	.menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.site-nav {
		position: fixed;
		inset: 0;
		background: rgba(13, 13, 13, 0.96);
		transform: translateY(-100%);
		transition: transform .3s ease;
		padding-top: calc(var(--header-height) + 16px);
		pointer-events: none;
		visibility: hidden;
		opacity: 0;
	}
	body.mobile-menu-open .site-nav { transform: translateY(0); pointer-events: auto; visibility: visible; opacity: 1; }
	.site-nav ul { flex-direction: column; gap: var(--space-6); align-items: center; }
	.site-nav a { display: inline-block; color: #fff; }
	/* Mobile submenu flatten */
	.site-nav .menu .sub-menu {
		position: static;
		display: none;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 6px 0 0;
		min-width: 0;
	}
	.site-nav .menu li.open > .sub-menu { display: block; }
	.site-nav .menu .sub-menu a { padding: 6px 0 0 24px; opacity: .9; }
	.site-nav .menu li.menu-item-has-children > a::after { color: #fff; }
}

/* Desktop: hard reset any mobile overlay state */
@media (min-width: 769px) {
	.site-nav { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
	body.mobile-menu-open .site-nav { transform: none !important; }
}

/* ===== Animations ===== */
.anim { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.anim.in { opacity: 1; transform: none; }
.anim.zoom { transform: scale(.96); }
.anim.float { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }

/* ===== Layout with Left Sidebar ===== */
.site-main { padding: var(--space-8) 0; }
.layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-8); }
.sidebar {
	position: sticky;
	top: calc(var(--header-height) + var(--space-6));
	align-self: start;
	max-height: calc(100vh - var(--header-height) - var(--space-8));
	overflow: auto;
}
.content-card {
	background: var(--color-surface);
	color: var(--color-text);
	border-radius: var(--radius);
	box-shadow: 0 2px 24px rgba(0,0,0,0.15);
	padding: clamp(1rem, 2vw, 2rem);
}

.toc { background: rgba(255,255,255,0.02); border: 1px solid var(--color-border); border-radius: 10px; padding: var(--space-4); }
.toc-title { margin: 0 0 var(--space-3); color: var(--color-text); font-size: 0.95rem; letter-spacing: .02em; opacity: .9; }
.toc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.toc-list a { display: block; padding: 6px 8px; color: var(--color-text); border-left: 2px solid transparent; border-radius: 6px; opacity: .85; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.toc-list a:hover { background: rgba(248, 248, 248, 0.06); opacity: 1; }
.toc-list a.is-active { color: var(--color-accent); border-left-color: var(--color-accent); background: var(--color-accent-weak); opacity: 1; }
.toc-list .depth-3 { padding-left: 12px; font-size: .95em; opacity: .9; }
/* Improve focus visibility for keyboard navigation */
.toc-list a:focus { outline: none; box-shadow: 0 0 0 2px var(--color-accent-weak) inset; }

/* Tablet adjustments */
@media (max-width: 1024px) {
	.layout { grid-template-columns: 220px 1fr; }
}

/* Mobile: collapse and hide sidebar */
@media (max-width: 768px) {
	.layout { grid-template-columns: 1fr; }
	.sidebar { display: none; }
}

/* ===== Buttons / Links ===== */
.button, .wp-block-button__link {
	background: var(--color-accent);
	color: #fff !important;
	border: 0;
	border-radius: 999px;
	padding: 10px 18px;
	box-shadow: 0 0 0 1px rgba(14,165,233,.35), 0 8px 24px rgba(14,165,233,.35);
	transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.button:hover, .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(37,99,235,.35), 0 12px 28px rgba(37,99,235,.25); }
.button:active, .wp-block-button__link:active { transform: translateY(0); }

/* ===== Content typography inside content-card ===== */
.content-card .entry-title { color: #111827; }
.content-card .entry-content { color: #1f2937; }
.content-card .entry-content a { color: var(--color-accent); }
.content-card .entry-content a:hover { color: #1d4ed8; }

/* ===== Hero / CTA ===== */
.hero {
	background: linear-gradient(180deg, rgba(14,165,233,0.08), rgba(255,247,230,0.45));
	border: 1px solid rgba(255,255,255,.2);
	border-radius: var(--radius);
	padding: clamp(1.25rem, 3vw, 2rem);
	color: #0f172a;
	box-shadow: inset 0 0 60px rgba(14,165,233,0.12);
}
.hero h1, .hero h2 { color: #0f172a; margin: 0 0 .5em; }
.hero .lead { color: #334155; font-size: 1.05rem; }
.cta-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }

/* ===== Cards ===== */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2.5vw, 24px); }
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }
.card-grid.cards-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cards-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .card-grid.cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid.cards-2, .card-grid.cards-3 { grid-template-columns: 1fr; } }

/* Single-column wide tiles */
.card-list { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 2vw, 16px); }
.card-list .card { width: 100%; }

/* Force About/Service pages to use wide single-column tiles */
body.page-about .card-grid.cards-2,
body.page-service .card-grid.cards-2 { grid-template-columns: 1fr; }

/* Home page centering */
body.home .hero, body.home .entry-title, body.home .home-news { text-align: center; }
body.home .cta-row { justify-content: center; }
.card { background: #ffffff; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: transform .2s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.card-link { color: inherit; text-decoration: none; display: grid; grid-template-rows: auto 1fr; height: 100%; }
.card-media img { width: 100%; height: auto; display: block; }
.card-body { padding: 14px 16px 18px; }
.card-title { color: #111827; font-size: 1.1rem; margin: 0 0 8px; }
.card-excerpt { color: var(--color-muted); margin: 0; }

/* ===== Home News ===== */
.home-news { margin-top: clamp(24px, 4vw, 40px); }
.home-news h2 { color: #111; margin: 0 0 12px; }

/* Contact disabled and LINE CTA */
.site-nav .is-disabled > a { opacity: .6; pointer-events: none; filter: grayscale(0.2); }
.site-nav .is-line-cta > a { background: linear-gradient(180deg, #22c55e, #16a34a); box-shadow: 0 0 0 1px rgba(34,197,94,.35), 0 8px 24px rgba(34,197,94,.35); }
.site-nav .is-line-cta > a:hover { box-shadow: 0 0 0 1px rgba(34,197,94,.45), 0 12px 28px rgba(34,197,94,.55); }

/* ===== Forms ===== */
.contact-form .form-row { display: grid; gap: 6px; margin-bottom: 14px; }
.contact-form label { color: var(--color-text); opacity: .9; }
.contact-form input, .contact-form textarea {
	background: #ffffff;
	color: #111827;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 10px 12px;
	box-shadow: none;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-weak), inset 0 2px 10px rgba(0,0,0,.35); }
.form-actions { margin-top: 12px; }
.notice.success { background: rgba(88, 227, 138, .15); border: 1px solid rgba(88, 227, 138, .35); color: #bff7d3; padding: 10px 12px; border-radius: 10px; }

/* ===== Anchor offset for sticky header ===== */
/* Ensure anchor targets are not hidden under sticky header */
h2[id], h3[id] { scroll-margin-top: calc(var(--header-height) + 24px); }

/* ===== Members Page ===== */
.members-toc .toc-title { letter-spacing: .12em; }
.members-toc .toc-list a { display: flex; align-items: center; gap: 8px; position: relative; padding-left: 10px; }
.members-toc .toc-list a::before { content: '•'; color: var(--color-border); position: absolute; left: 0; }
.members-toc .toc-list a.is-active { color: var(--color-accent); background: var(--color-accent-weak); }
.members-toc .toc-list a.is-active::before { content: '★'; color: var(--color-accent); }

.filter-section { margin-bottom: var(--space-6); display: flex; gap: 10px; flex-wrap: wrap; }
.filter-btn {
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	padding: 10px 18px;
	cursor: pointer;
	transition: all .2s ease;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 999px;
}
.filter-btn:hover { border-color: rgba(248, 248, 248, .35); color: #f0f0f0; box-shadow: 0 0 15px rgba(248, 248, 248, 0.2); }
.filter-btn.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; box-shadow: 0 0 20px rgba(220, 20, 60, 0.5); }

.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin-bottom: 60px; }
.member-tile { background: #ffffff; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; cursor: pointer; }
.member-tile:hover { border-color: var(--color-accent); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.member-photo { width: 100%; height: 240px; background: linear-gradient(45deg, #eef2ff, #e0f2fe); display: flex; align-items: center; justify-content: center; font-size: 44px; color: var(--color-muted); transition: transform .3s ease; }
.member-tile:hover .member-photo { transform: scale(1.03); }
.member-info { padding: 14px 16px 16px; }
.member-name { color: #111827; font-weight: 700; letter-spacing: .04em; margin-bottom: 4px; }
.member-role { color: var(--color-muted); font-size: 0.95rem; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.member-tile.is-hidden { display: none; }

/* Modal */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 2000; align-items: center; justify-content: center; }
.modal.is-active { display: flex; animation: fadeIn .25s ease; }
.modal-content { background: #ffffff; border: 1px solid var(--color-border); max-width: 900px; width: 92%; max-height: 90vh; overflow: auto; position: relative; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.2); }
.modal-close { position: absolute; top: 14px; right: 16px; font-size: 28px; color: var(--color-text); cursor: pointer; background: none; border: none; line-height: 1; transition: transform .2s ease, color .2s ease; }
.modal-close:hover { color: var(--color-accent); transform: rotate(90deg); }
.modal-body { padding: clamp(16px, 3vw, 32px); }
.modal-header { display: flex; gap: 24px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.modal-photo { width: 180px; height: 180px; background: linear-gradient(45deg, #151515, #0a0a0a); display: flex; align-items: center; justify-content: center; font-size: 56px; color: var(--color-muted); border-radius: 8px; }
.modal-basic-info { flex: 1; }
.modal-name { color: #f3f3f3; font-weight: 700; letter-spacing: .06em; margin: 0 0 8px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.modal-role { color: var(--color-muted); margin-bottom: 12px; }
.social-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.social-btn { width: 40px; height: 40px; border: 1px solid var(--color-border); color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; text-decoration: none; }
.social-btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: scale(1.06); box-shadow: 0 0 15px rgba(220,20,60,.45); }
.modal-section { margin-bottom: 22px; }
.modal-section h3 { color: #f1f1f1; font-size: 1rem; letter-spacing: .08em; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.modal-section p, .modal-section li { color: var(--color-text); }
.modal-section ul { list-style: none; margin: 0; padding: 0; }
.modal-section li { padding: 6px 0 6px 18px; position: relative; }
.modal-section li::before { content: '▸'; position: absolute; left: 0; color: var(--color-accent); }

@media (max-width: 768px) {
	.modal-header { flex-direction: column; }
}