/*
Theme Name: Lightning Pro Child - Kokoiro Journal
Template: lightning-pro
Description: ここいろデンタルジャーナル（/journal/ 配下）専用のカスタマイズを行う子テーマです。
Author: Bluejobs
Version: 1.0.11
Text Domain: kokoiro-journal
*/

/* ==========================================================================
   Kokoiro Dental Journal - journal section only styles
   ========================================================================== */

body.kokoiro-journal-active,
.kokoiro-journal-lp-latest {
	--kokoiro-navy: #1b2c4f;
}

/* The LP's tagline bar above the header (site description) isn't wanted
   inside the Journal. */
body.kokoiro-journal-active .headerTop {
	display: none;
}

/* Keep the logo and nav vertically centered against each other now that
   the logo is two lines tall (main title + subtitle). */
body.kokoiro-journal-active .siteHeadContainer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

/* Push the nav to the far right regardless of how many other elements
   share the header row. */
body.kokoiro-journal-active .gMenu_outer {
	margin-left: auto;
}

/* Lightning's default gMenu dropdown only opens on keyboard focus
   (:focus-within). Add a hover trigger too, scoped to the Journal
   section, reusing the same transition Lightning already defines. */
body.kokoiro-journal-active .device-pc .gMenu li:hover > .sub-menu {
	opacity: 1;
	max-height: 80vh;
	overflow-y: auto;
}

/* Force the header/footer background to span the full viewport width,
   regardless of whatever container max-width Lightning applies. */
body.kokoiro-journal-active .siteHeader,
body.kokoiro-journal-active .siteFooter {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Hero (main visual) - photo fills the block, text overlaid on top */
.kokoiro-hero {
	position: relative;
	margin-bottom: 3em;
	overflow: hidden;
	/* Full-bleed: span the full viewport width regardless of the
	   content column's max-width, same technique used for header/footer. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.kokoiro-hero__image {
	margin: 0;
}

.kokoiro-hero__image img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: top center;
	display: block;
	/* Fade the bottom edge into the page background instead of a hard cut. */
	-webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}

/* On narrow screens, use a taller crop so the subject stays visible
   instead of being squeezed into a wide, short strip. */
@media (max-width: 600px) {
	.kokoiro-hero__image img {
		aspect-ratio: 3 / 4;
		object-position: top center;
	}
}

.kokoiro-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	/* Keep the text aligned with the rest of the page's content column,
	   even though the photo itself is full-bleed. */
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2.5em;
	box-sizing: border-box;
}

.kokoiro-hero__text {
	max-width: 640px;
	margin: 2em 0;
}

.kokoiro-hero__text h1 {
	font-size: 2.4em;
	line-height: 1.3;
	letter-spacing: 0.02em;
	margin-bottom: 0.5em;
}

@media (max-width: 600px) {
	.kokoiro-hero__overlay {
		align-items: center;
		/* Nudge above dead-center. */
		transform: translateY(-12%);
		/* Less side padding than desktop so the catch copy has room to
		   wrap on a natural phrase break instead of an orphan line. */
		padding: 0 1.25em;
	}

	.kokoiro-hero__text {
		/* Vertical spacing only - horizontal inset already comes from
		   the overlay's own padding above. */
		margin: 2em 0;
	}

	.kokoiro-hero__text h1 {
		font-size: 1.4em;
	}

	/* Keep the description from stretching all the way to the right
	   edge, where the portrait crop puts the subject's face. */
	.kokoiro-hero__text p {
		max-width: 80%;
	}
}

/* Lightning draws its heading / dropdown accents in the site's key colour
   (salmon on production, set in the Customizer). Inside the Journal those
   accents use the Journal navy instead, so nothing here touches the LP. */
body.kokoiro-journal-active h2,
body.kokoiro-journal-active .mainSection-title {
	border-top-color: var(--kokoiro-navy);
}

body.kokoiro-journal-active h3::after,
body.kokoiro-journal-active .subSection-title::after {
	border-bottom-color: var(--kokoiro-navy);
}

body.kokoiro-journal-active .gMenu > li::before,
body.kokoiro-journal-active .gMenu > li.menu-item-has-children::after {
	border-bottom-color: var(--kokoiro-navy);
}

body.kokoiro-journal-active .gMenu li li {
	background-color: var(--kokoiro-navy);
}

body.kokoiro-journal-active .gMenu li li a:hover {
	background-color: #34497a;
}

body.kokoiro-journal-active .pager li > a:hover {
	background-color: var(--kokoiro-navy);
	color: #fff;
}

/* Section headings (LATEST ARTICLES / CATEGORY / ABOUT KOKOIRO / related articles) */
body.kokoiro-journal-active .entry-content h2.wp-block-heading,
body.kokoiro-journal-active .entry-content h2.kokoiro-related-articles__title {
	font-size: 1.1em;
	letter-spacing: 0.08em;
	color: var(--kokoiro-navy);
	margin-top: 3em;
	margin-bottom: 1em;
	padding-bottom: 0.5em;
	border-bottom: 2px solid var(--kokoiro-navy);
}

/* Latest articles grid cards */
:is(body.kokoiro-journal-active, .kokoiro-journal-lp-latest) .wp-block-post {
	display: flex;
	flex-direction: column;
}

:is(body.kokoiro-journal-active, .kokoiro-journal-lp-latest) .wp-block-post .kokoiro-card-media {
	position: relative;
	margin-bottom: 0.75em;
}

:is(body.kokoiro-journal-active, .kokoiro-journal-lp-latest) .wp-block-post .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	margin-bottom: 0;
}

:is(body.kokoiro-journal-active, .kokoiro-journal-lp-latest) .wp-block-post .wp-block-post-terms {
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.05em;
	color: var(--kokoiro-navy);
	margin-bottom: 0.35em;
}

:is(body.kokoiro-journal-active, .kokoiro-journal-lp-latest) .wp-block-post .wp-block-post-terms a {
	color: inherit;
}

/* Tag badge floating on top of the card image, top-left corner.
   Comes after .wp-block-post-terms above so these overrides win. */
:is(body.kokoiro-journal-active, .kokoiro-journal-lp-latest) .wp-block-post .kokoiro-card-badge {
	position: absolute;
	top: 0.75em;
	left: 0.75em;
	margin-bottom: 0;
	font-size: 0.75em;
	color: #fff;
	background: var(--kokoiro-navy);
	padding: 0.4em 0.9em;
	border-radius: 3px;
}

:is(body.kokoiro-journal-active, .kokoiro-journal-lp-latest) .wp-block-post .kokoiro-card-badge a {
	color: inherit;
}

:is(body.kokoiro-journal-active, .kokoiro-journal-lp-latest) .wp-block-post .wp-block-post-title {
	font-size: 1.05em;
	margin: 0 0 0.35em;
}

:is(body.kokoiro-journal-active, .kokoiro-journal-lp-latest) .wp-block-post .wp-block-post-title a {
	color: #222;
}

:is(body.kokoiro-journal-active, .kokoiro-journal-lp-latest) .wp-block-post .wp-block-post-date {
	font-size: 0.85em;
	opacity: 0.7;
}

/* Hide the Kokoiro logo only within the Journal section (see body_class
   filter in functions.php); the Journal wordmark below replaces it. */
body.kokoiro-journal-active .siteHeader_logo {
	display: none;
}

.kokoiro-journal-logo {
	margin: 0;
	font-size: 34px;
	font-weight: bold;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--kokoiro-navy);
}

.kokoiro-journal-logo a {
	color: inherit;
	text-decoration: none;
}

.kokoiro-journal-logo__main {
	font-weight: bold;
	color: var(--kokoiro-navy);
}

.kokoiro-journal-logo__accent {
	font-weight: 300;
	color: #8a97a8;
}

.kokoiro-journal-logo__sub {
	display: block;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 0.1em;
	color: #666;
	margin-top: 0.2em;
}

/* Narrow screens don't have room for "KOKOIRO JOURNAL" on one line at
   the full size - shrink it before it wraps. */
@media (max-width: 600px) {
	.kokoiro-journal-logo {
		font-size: 26px;
	}
}

.kokoiro-lead {
	font-size: 1.15em;
	font-weight: bold;
}

.kokoiro-category-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	list-style: none;
	margin: 1em 0 2.5em;
	padding: 0;
}

.kokoiro-category-nav li {
	margin: 0;
}

.kokoiro-category-nav a {
	display: inline-block;
	padding: 0.6em 1.5em;
	border: 1px solid var(--kokoiro-navy);
	border-radius: 999px;
	text-decoration: none;
	color: var(--kokoiro-navy);
	font-weight: bold;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kokoiro-category-nav a:hover {
	background-color: var(--kokoiro-navy);
	color: #fff;
}

.kokoiro-about {
	background: #f7f5f0;
	margin-top: 1em;
	/* Full-bleed background, same technique as the hero/header/footer. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.kokoiro-about__inner {
	gap: 2em;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2em 2.5em;
	box-sizing: border-box;
}

.kokoiro-about__text {
	flex: 1 1 300px;
}

.kokoiro-about__image {
	flex: 1 1 260px;
	max-width: 320px;
	margin: 0;
}

.kokoiro-about__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/* Soft-fade the edges instead of a hard-cropped rectangle. */
	-webkit-mask-image: radial-gradient(ellipse at center, #000 65%, transparent 100%);
	mask-image: radial-gradient(ellipse at center, #000 65%, transparent 100%);
}

.kokoiro-about__logo {
	flex: 0 0 auto;
	width: 140px;
	margin: 0;
	text-align: center;
}

.kokoiro-about__logo img {
	width: 100%;
	height: auto;
}

.kokoiro-related-articles {
	margin-top: 2.5em;
	padding-top: 2em;
	border-top: 1px solid #e0e0e0;
}

.kokoiro-related-articles__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	list-style: none;
	margin: 1em 0 0;
	padding: 0;
}

.kokoiro-related-articles__item {
	flex: 1 1 200px;
	max-width: 260px;
}

.kokoiro-related-articles__item a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.kokoiro-related-articles__item img {
	width: 100%;
	height: auto;
	margin-bottom: 0.5em;
}

.kokoiro-journal-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5em 2em;
	margin-top: 3em;
	padding: 1.75em 2em;
	background: #f7f5f0;
	text-align: left;
}

.kokoiro-journal-cta__body {
	flex: 1 1 280px;
}

.kokoiro-journal-cta__image {
	flex: 1 1 220px;
	max-width: 300px;
	margin: 0;
}

.kokoiro-journal-cta__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	/* Same soft-faded edges as the ABOUT KOKOIRO photo on the Journal TOP. */
	-webkit-mask-image: radial-gradient(ellipse at center, #000 65%, transparent 100%);
	mask-image: radial-gradient(ellipse at center, #000 65%, transparent 100%);
}

.kokoiro-journal-cta__label {
	margin: 0 0 0.5em;
	font-size: 0.75em;
	font-weight: bold;
	letter-spacing: 0.12em;
	color: #8a97a8;
}

.kokoiro-journal-cta__title {
	margin: 0 0 1.25em;
	padding-bottom: 0;
	border-bottom: none;
	font-size: 1.05em;
	line-height: 1.6;
	color: var(--kokoiro-navy);
}

/* Lightning's short key-colour underline under every h3. */
.kokoiro-journal-cta__title::after {
	display: none;
}

.kokoiro-journal-cta .wp-block-buttons {
	margin: 0;
}

/* Quiet outline button: introduces the service without reading as an ad. */
.kokoiro-journal-cta .kokoiro-cta-btn .wp-block-button__link {
	background-color: transparent;
	color: var(--kokoiro-navy);
	border: 1px solid var(--kokoiro-navy);
	font-size: 0.9em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kokoiro-journal-cta .kokoiro-cta-btn .wp-block-button__link:hover {
	background-color: var(--kokoiro-navy);
	color: #fff;
}

.kokoiro-cta-btn .wp-block-button__link,
.wp-block-button.kokoiro-cta-btn .wp-block-button__link {
	display: inline-block;
	background-color: var(--kokoiro-navy);
	border-color: var(--kokoiro-navy);
	border-radius: 999px;
	padding: 0.75em 1.75em;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

/* ==========================================================================
   LP top page: Journal latest-articles band (kokoiro.co.jp front page).
   Everything is scoped to .kokoiro-journal-lp-latest so nothing else on the
   LP is affected; the card rules above are shared via :is().
   ========================================================================== */
.kokoiro-journal-lp-latest {
	background: #f7f3ec;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 3.5em 0;
}

.kokoiro-journal-lp-latest__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.kokoiro-journal-lp-latest h2.kokoiro-journal-lp-latest__title {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-size: 2.3em;
	letter-spacing: 4px;
	text-align: center;
	color: var(--kokoiro-navy);
}

.kokoiro-journal-lp-latest .kokoiro-journal-lp-latest__label {
	margin: 0.4em 0 0;
	font-size: 1.1em;
	letter-spacing: 3px;
	text-align: center;
	color: #54bcc8;
}

.kokoiro-journal-lp-latest .kokoiro-journal-lp-latest__lead {
	margin: 1em 0 2em;
	text-align: center;
	font-size: 0.95em;
}

.kokoiro-journal-lp-latest .wp-block-post-title,
.kokoiro-journal-lp-latest .wp-block-post-title a {
	text-align: left;
}

.kokoiro-journal-lp-latest .wp-block-buttons {
	justify-content: center;
	margin-top: 2.5em;
}

.kokoiro-journal-lp-latest h2 {
	border-top-color: var(--kokoiro-navy);
}

@media (max-width: 600px) {
	.kokoiro-journal-lp-latest {
		padding: 2.5em 0;
	}

	.kokoiro-journal-lp-latest h2.kokoiro-journal-lp-latest__title {
		font-size: 1.8em;
	}
}

/* ------------------------------------------------------------------
   Article page (single post): larger type for older readers
   PC body 19px / smartphone 18px, line-height ~1.9, column <= 760px.
   Scoped to single posts so TOP / list cards are unaffected.
   ------------------------------------------------------------------ */
body.kokoiro-journal-active.single-post .entry-title {
	font-size: 30px;
	line-height: 1.5;
}

body.kokoiro-journal-active.single-post .entry-meta,
body.kokoiro-journal-active.single-post .entry-meta_items {
	font-size: 15px;
}

body.kokoiro-journal-active.single-post .entry-body {
	max-width: 760px;
	font-size: 19px;
	line-height: 1.9;
}

body.kokoiro-journal-active.single-post .entry-body p,
body.kokoiro-journal-active.single-post .entry-body li {
	line-height: 1.9;
}

body.kokoiro-journal-active.single-post .entry-body p.kokoiro-lead {
	font-size: 20px;
}

body.kokoiro-journal-active.single-post .entry-body h2.wp-block-heading {
	font-size: 25px;
	line-height: 1.5;
}

body.kokoiro-journal-active.single-post .entry-body h3.wp-block-heading,
body.kokoiro-journal-active.single-post .entry-body h3:not([class]) {
	font-size: 21px;
}

/* 大見出し (H2) directly under the article title: plain bold heading,
   no section-heading rule line. Same size as any other H2. */
body.kokoiro-journal-active.single-post .entry-body h2.wp-block-heading.kokoiro-article-subtitle {
	margin: 0.5em 0 1.25em;
	padding: 0;
	border: none;
}

/* "この記事のポイント" box */
.kokoiro-point-box {
	background: #f7f5f0;
	border-left: 4px solid var(--kokoiro-navy);
	padding: 1.25em 1.5em;
	margin: 0 0 1.75em;
}

.kokoiro-point-box .kokoiro-point-box__title {
	font-weight: bold;
	color: var(--kokoiro-navy);
	letter-spacing: 0.05em;
	margin: 0 0 0.5em;
}

.kokoiro-point-box ul {
	margin: 0 0 0.75em;
	padding-left: 1.4em;
}

.kokoiro-point-box li {
	margin-bottom: 0.35em;
}

.kokoiro-point-box .kokoiro-point-box__time {
	font-size: 16px;
	color: #666;
	margin: 0;
}

@media (max-width: 600px) {
	body.kokoiro-journal-active.single-post .entry-title {
		font-size: 28px;
	}

	body.kokoiro-journal-active.single-post .entry-body {
		font-size: 18px;
	}

	body.kokoiro-journal-active.single-post .entry-body p.kokoiro-lead {
		font-size: 19px;
	}

	body.kokoiro-journal-active.single-post .entry-body h2.wp-block-heading {
		font-size: 24px;
	}

}