@charset "UTF-8";
/*
Theme Name:   Arkhe Child
Theme URI:    https://el-first.co.jp/
Description:  Arkhe child theme for ElFirst Corporation — dark theme that matches the TOP page design across posts, pages, archives, and search results.
Author:       ElFirst Corporation
Author URI:   https://el-first.co.jp/
Template:     arkhe
Version:      1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  arkhe-child
*/

/* ===========================================================
 * ElFirst Dark Theme — overrides Arkhe defaults for every
 * front-end template (post, page, archive, search, 404).
 * Custom template pages (elfirst-page.php) bypass Arkhe
 * entirely and are NOT affected by these rules.
 * =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Noto+Serif+JP:wght@200;300;400&family=Noto+Sans+JP:wght@200;300;400&display=swap');

:root {
	--elf-gold: #c9a84c;
	--elf-gold-l: #e8c87a;
	--elf-gold-d: #8a6820;
	--elf-cream: #f5ede0;
	--elf-cream-d: #d4c4a8;
	--elf-ink: #080604;
	--elf-ink2: #100e09;
	--elf-ink3: #1a1610;
	--elf-ink4: #221e16;
	--elf-smoke: #8a7d6a;
}

/* ============================================================
 * 1. Body & layout — dark background everywhere
 * ============================================================ */
body {
	background: var(--elf-ink) !important;
	color: var(--elf-cream) !important;
	font-family: 'Noto Sans JP', sans-serif !important;
	font-weight: 200 !important;
	-webkit-font-smoothing: antialiased;
}

body .l-wrapper,
body .l-container,
body .l-content,
body .l-main,
body .l-sidebar,
body .l-article,
body .p-article,
body .p-page,
body .p-single {
	background: transparent !important;
	color: var(--elf-cream) !important;
}

/* Hide Arkhe's default header/footer — rendered by elfirst-common instead */
body.elfirst-chrome #l-header,
body.elfirst-chrome .l-header,
body.elfirst-chrome #l-footer,
body.elfirst-chrome .l-footer,
body.elfirst-chrome .p-drawer,
body.elfirst-chrome .p-headerHumberger {
	display: none !important;
}

/* Hide Arkhe's default top area (featured image hero / filter layer) */
body.elfirst-chrome .p-topArea,
body.elfirst-chrome .p-topArea__filter,
body.elfirst-chrome .c-filterLayer {
	display: none !important;
}

/* ============================================================
 * 2. Typography — Noto Serif JP for headings, Sans JP for body
 * ============================================================ */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .wp-block-heading,
body .c-postTitle,
body .p-entry__title,
body .entry-title,
body .p-postList__title,
body .c-widget__title,
body .widget-title,
body .p-widget__title {
	font-family: 'Noto Serif JP', serif !important;
	font-weight: 300 !important;
	color: var(--elf-cream) !important;
	letter-spacing: 0.08em !important;
	line-height: 1.7 !important;
}

body h1,
body .c-postTitle,
body .p-entry__title,
body .entry-title { font-size: clamp(1.8rem, 3vw, 2.8rem) !important; }
body h2 { font-size: clamp(1.4rem, 2.5vw, 2.2rem) !important; }
body h3 { font-size: clamp(1.2rem, 2vw, 1.8rem) !important; }
body h4 { font-size: 1.1rem !important; }

body p,
body .entry-content p,
body .c-postContent p {
	color: var(--elf-cream-d) !important;
	line-height: 2.0 !important;
	font-size: 0.88rem;
	letter-spacing: 0.04em;
	margin-bottom: 1.5em;
}

/* ============================================================
 * 3. Links & buttons
 * ============================================================ */
body a {
	color: var(--elf-gold);
	text-decoration: none;
	transition: color 0.3s;
}

body a:hover {
	color: var(--elf-gold-l);
}

body .entry-content a,
body .c-postContent a {
	border-bottom: 1px solid rgba(201, 168, 76, 0.3);
}

body .entry-content a:hover,
body .c-postContent a:hover {
	border-bottom-color: var(--elf-gold);
}

body button,
body input[type="submit"],
body input[type="button"],
body .wp-block-button__link,
body .wp-block-search__button,
body .search-submit,
body .submit {
	background: linear-gradient(135deg, var(--elf-gold-d), var(--elf-gold)) !important;
	color: var(--elf-ink) !important;
	border: none !important;
	font-family: 'Cormorant Garamond', serif !important;
	font-size: 0.86rem !important;
	letter-spacing: 0.25em !important;
	padding: 14px 32px !important;
	cursor: pointer;
	transition: opacity 0.3s;
	border-radius: 0 !important;
}

body button:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body .wp-block-button__link:hover,
body .wp-block-search__button:hover {
	opacity: 0.85;
}

/* ============================================================
 * 4. Breadcrumb
 * ============================================================ */
body .p-breadcrumb {
	background: var(--elf-ink2) !important;
	border-top: 1px solid rgba(201, 168, 76, 0.08);
	border-bottom: 1px solid rgba(201, 168, 76, 0.08);
	padding: 16px 20px !important;
	margin-bottom: 48px !important;
}

body .p-breadcrumb a,
body .p-breadcrumb span,
body .p-breadcrumb li {
	color: var(--elf-smoke) !important;
	font-family: 'Cormorant Garamond', serif !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.18em !important;
}

body .p-breadcrumb a:hover {
	color: var(--elf-gold) !important;
}

/* ============================================================
 * 5. Article / Post content
 * ============================================================ */
body .c-postContent,
body .entry-content,
body .p-entry__body {
	color: var(--elf-cream);
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 2.0;
}

body .c-postTimes,
body .p-entry__meta,
body .entry-meta,
body time,
body .posted-on {
	color: var(--elf-smoke) !important;
	font-family: 'Cormorant Garamond', serif !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.15em !important;
}

body blockquote,
body .wp-block-quote {
	background: var(--elf-ink2);
	border-left: 4px solid var(--elf-gold);
	padding: 24px 32px;
	margin: 24px 0;
	font-style: italic;
	color: var(--elf-cream-d);
	font-family: 'Noto Serif JP', serif;
}

body pre,
body code,
body .wp-block-code {
	background: var(--elf-ink3) !important;
	color: var(--elf-gold) !important;
	border: 1px solid rgba(201, 168, 76, 0.1) !important;
	padding: 16px;
	border-radius: 0;
	font-family: 'Menlo', monospace;
	font-size: 0.82rem;
}

body table {
	color: var(--elf-cream);
	border-collapse: collapse;
	width: 100%;
}

body table th {
	background: linear-gradient(135deg, var(--elf-gold-d), var(--elf-gold)) !important;
	color: var(--elf-ink) !important;
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.2em;
	padding: 18px;
	text-align: left;
}

body table td {
	padding: 18px;
	border-bottom: 1px solid rgba(201, 168, 76, 0.15);
	background: var(--elf-ink2);
}

body hr,
body .wp-block-separator {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.18), transparent);
	margin: 48px 0;
}

/* ============================================================
 * 6. Sidebar widgets
 * ============================================================ */
body .l-sidebar {
	background: transparent !important;
}

body .p-widget,
body .widget,
body .c-widget {
	background: var(--elf-ink2) !important;
	border: 1px solid rgba(201, 168, 76, 0.07) !important;
	padding: 28px 24px !important;
	margin-bottom: 16px !important;
}

body .widget-title,
body .c-widget__title,
body .p-widget__title {
	font-family: 'Noto Serif JP', serif !important;
	font-weight: 300 !important;
	color: var(--elf-gold) !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.15em !important;
	border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important;
	padding-bottom: 14px !important;
	margin-bottom: 18px !important;
}

body .widget ul,
body .c-widget ul {
	list-style: none;
	padding: 0;
}

body .widget ul li,
body .c-widget ul li {
	padding: 10px 0;
	border-bottom: 1px solid rgba(201, 168, 76, 0.06);
	font-size: 0.82rem;
	color: var(--elf-cream-d);
}

body .widget ul li a,
body .c-widget ul li a {
	color: var(--elf-cream-d);
}

body .widget ul li a:hover,
body .c-widget ul li a:hover {
	color: var(--elf-gold-l);
}

/* ============================================================
 * 7. Form inputs
 * ============================================================ */
body input[type="text"],
body input[type="email"],
body input[type="url"],
body input[type="password"],
body input[type="search"],
body input[type="tel"],
body textarea,
body select {
	background: var(--elf-ink3) !important;
	color: var(--elf-cream) !important;
	border: 1px solid rgba(201, 168, 76, 0.15) !important;
	padding: 12px 16px !important;
	font-family: 'Noto Sans JP', sans-serif !important;
	font-size: 0.85rem !important;
	border-radius: 0 !important;
}

body input::placeholder,
body textarea::placeholder {
	color: var(--elf-smoke) !important;
	opacity: 0.6;
}

body input:focus,
body textarea:focus,
body select:focus {
	outline: none !important;
	border-color: var(--elf-gold) !important;
	box-shadow: 0 0 0 1px var(--elf-gold) !important;
}

/* ============================================================
 * 8. Comments
 * ============================================================ */
body .c-comments,
body .comments-area,
body #comments {
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid rgba(201, 168, 76, 0.08);
}

body .comment,
body .comment-body,
body .c-comments__item {
	background: var(--elf-ink2) !important;
	border: 1px solid rgba(201, 168, 76, 0.08) !important;
	padding: 24px !important;
	margin-bottom: 16px;
	color: var(--elf-cream) !important;
}

body .comment-author,
body .comment-metadata {
	color: var(--elf-smoke) !important;
}

body .comment-author a,
body .comment-reply-link {
	color: var(--elf-gold) !important;
}

/* ============================================================
 * 9. Related posts / post lists
 * ============================================================ */
body .p-postList,
body .p-relatedPosts,
body .related-posts {
	background: transparent;
	color: var(--elf-cream);
}

body .p-postList__title,
body .related-posts-title {
	font-family: 'Noto Serif JP', serif !important;
	color: var(--elf-cream) !important;
}

/* ============================================================
 * 10. Social share buttons (Arkhe pattern)
 * ============================================================ */
body .p-postShareSNS,
body .share-buttons {
	background: var(--elf-ink2);
	border: 1px solid rgba(201, 168, 76, 0.07);
	padding: 24px;
}

/* ============================================================
 * 11. Post author info box
 * ============================================================ */
body .p-authorBox,
body .author-box {
	background: var(--elf-ink2) !important;
	border: 1px solid rgba(201, 168, 76, 0.07) !important;
	padding: 28px !important;
	color: var(--elf-cream) !important;
}

body .p-authorBox a,
body .author-box a {
	color: var(--elf-gold);
}

body .p-authorBox__name,
body .author-name {
	color: var(--elf-cream) !important;
	font-family: 'Noto Serif JP', serif;
}

/* ============================================================
 * 12. Category / tag labels
 * ============================================================ */
body .c-postThumb__cat,
body .c-postCats,
body .c-postTags,
body .c-termLink {
	color: var(--elf-gold) !important;
	background: transparent !important;
	font-family: 'Cormorant Garamond', serif;
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	border: 1px solid rgba(201, 168, 76, 0.3);
	padding: 4px 10px;
}

/* ============================================================
 * 13. Pagination
 * ============================================================ */
body .c-pagination a,
body .c-pagination span,
body .page-numbers {
	background: var(--elf-ink2) !important;
	color: var(--elf-cream) !important;
	border: 1px solid rgba(201, 168, 76, 0.15) !important;
	font-family: 'Cormorant Garamond', serif;
	padding: 10px 16px;
	letter-spacing: 0.1em;
}

body .c-pagination .current,
body .page-numbers.current {
	background: var(--elf-gold) !important;
	color: var(--elf-ink) !important;
}

/* ============================================================
 * 14. Admin bar adjustment (keep WP admin bar usable)
 * ============================================================ */
body.admin-bar.elfirst-chrome {
	padding-top: calc(90px + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar.elfirst-chrome {
		padding-top: calc(64px + 46px);
	}
}

/* ============================================================
 * 15. Responsive adjustments
 * ============================================================ */
@media (max-width: 900px) {
	body .l-content,
	body .l-container {
		padding: 0 20px;
	}

	body h1,
	body .c-postTitle {
		font-size: 1.6rem !important;
	}
}