/*
Theme Name: HybridMag Child - chinsankaku
Theme URI: https://chinsankaku.jp/
Description: Child theme for HybridMag. Adds the 日本地図ナビ homepage and site-wide mobile hardening for chinsankaku.jp.
Author: chinsankaku
Template: hybridmag
Version: 1.0.0
Text Domain: hybridmag-child
*/

/* -------------------------------------------------------------------------
   Tokens
   Every value below is aliased from a HybridMag custom property so the
   Customizer keeps control of the homepage. Fallbacks are the theme's
   current defaults, used only if the parent ever drops a token.
   ---------------------------------------------------------------------- */

.hm-home,
.hm-minimap {
	--hm-accent:  var( --hybridmag-color-primary, #65bc7b );
	--hm-border:  var( --hybridmag-color-border, #e0e0e0 );
	--hm-text:    var( --hybridmag-color-text-main, #404040 );
	--hm-muted:   var( --hybridmag-color-text-light, #7d7d7d );
	--hm-head:    var( --hybridmag-color-text-headings, #222222 );
	--hm-surface: var( --hybridmag-color-bg-cl-sep-content, #ffffff );
	--hm-radius:  var( --hybridmag-global-border-radius, 6px );
	--hm-shadow:  var( --hybridmag-global-box-shadow, 0 0 15px 0 rgba( 0, 0, 0, .06 ) );
	--hm-gap:     var( --hybridmag-post-cols-gap, 35px );
	--hm-space:   var( --hybridmag-global-spacing, 35px );
	--hm-inner:   var( --hybridmag-global-inner-spacing, 20px );
	--hm-map-empty: #eceff1;
	/* Coastline, mixed from the accent so the Customizer still drives it. */
	--hm-coast:   color-mix( in oklab, var( --hm-accent ) 45%, var( --hm-border ) );
}

html.hm-dark .hm-home,
html.hm-dark .hm-minimap {
	--hm-surface:    #1e2226;
	--hm-border:     #363c42;
	--hm-text:       #c9ced3;
	--hm-muted:      #8b9198;
	--hm-head:       #f0f2f4;
	--hm-map-empty:  #2a2f34;
	--hm-shadow:     0 0 15px 0 rgba( 0, 0, 0, .35 );
	--hm-coast:      color-mix( in oklab, var( --hm-accent ) 38%, #4a5259 );
}

/* -------------------------------------------------------------------------
   Section scaffolding
   ---------------------------------------------------------------------- */

.hm-home {
	color: var( --hm-text );
}

.hm-section {
	margin-bottom: var( --hm-space );
}

.hm-section-head {
	display: flex;
	align-items: baseline;
	gap: .75em;
	margin: 0 0 var( --hm-inner );
}

.hm-section-title {
	margin: 0;
	color: var( --hm-head );
	font-size: var( --hybridmag-font-size-xl, 1.5rem );
	font-weight: var( --hybridmag-font-weight-headings, 600 );
	line-height: var( --hybridmag-line-height-headings, 1.3 );
}

.hm-section-note {
	color: var( --hm-muted );
	font-size: var( --hybridmag-font-size-xs, .875rem );
}

/* -------------------------------------------------------------------------
   Photo hero — mosaic of real featured images from the site's own posts
   ---------------------------------------------------------------------- */

.hm-hero {
	position: relative;
	margin-bottom: var( --hm-space );
	border-radius: var( --hm-radius );
	overflow: hidden;
	box-shadow: var( --hm-shadow );
}

.hm-hero-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	grid-template-rows: repeat( 2, 1fr );
	gap: 4px;
	aspect-ratio: 16 / 9;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var( --hm-map-empty );
}

/* First tile is the anchor: big, and the LCP image. */
.hm-hero-grid > li:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.hm-hero-tile {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hm-hero-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease, filter .3s ease;
}

.hm-hero-tile:hover img,
.hm-hero-tile:focus-visible img {
	transform: scale( 1.06 );
}

.hm-hero-cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 28px 14px 10px;
	color: #fff;
	font-size: var( --hybridmag-font-size-xxs, .813rem );
	line-height: 1.35;
	background: linear-gradient( transparent, rgba( 0, 0, 0, .78 ) );
	opacity: 0;
	transition: opacity .25s ease;
}

.hm-hero-tile:hover .hm-hero-cap,
.hm-hero-tile:focus-visible .hm-hero-cap,
.hm-hero-grid > li:first-child .hm-hero-cap {
	opacity: 1;
}

.hm-hero-grid > li:first-child .hm-hero-cap {
	padding: 40px 20px 18px;
	font-size: var( --hybridmag-font-size-amd, 1.125rem );
	font-weight: 600;
}

.hm-hero-badge {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 9px;
	background: var( --hm-accent );
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
}

@media ( max-width: 599px ) {
	.hm-hero-grid {
		grid-template-columns: repeat( 2, 1fr );
		aspect-ratio: 4 / 3;
	}
	.hm-hero-grid > li:nth-child( n + 4 ) {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   A. 日本地図ナビ — regions filled with real photos, not flat colour
   ---------------------------------------------------------------------- */

.hm-map-wrap {
	position: relative;
	background: var( --hm-surface );
	border: 1px solid var( --hm-border );
	border-radius: var( --hm-radius );
	box-shadow: var( --hm-shadow );
	padding: var( --hm-inner );
}

.hm-map {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	margin: 0 auto;
	overflow: visible;
}

/* Landmass underlay.
   Pass one strokes every region fat in the coast colour, welding neighbours
   into one island; pass two strokes them slightly thinner in the surface
   colour. The sliver left between the two passes is the coastline, and the
   surface colour that survives in the gaps becomes the margin around each
   region. Stroke widths live in inc/japan-map.php — see HM_COAST / HM_LAND
   there before touching these. */
.hm-map-coast > * {
	fill: var( --hm-coast );
	stroke: var( --hm-coast );
	stroke-width: 16;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.hm-map-inland > * {
	fill: var( --hm-surface );
	stroke: var( --hm-surface );
	stroke-width: 11;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* Backing layer. Heat-tinted by post count, and the visible fill for any
   region whose photo is missing. --w is written per region by PHP, so the
   heat stays pure CSS. */
.hm-map-region .hm-map-shape {
	fill: color-mix( in oklab, var( --hm-accent ) calc( var( --w, 0 ) * 88% + 12% ), var( --hm-map-empty ) );
	transition: fill .18s ease;
}

/* A real photo from that region's newest post, clipped to the region shape.
   Muted at rest so the labels stay readable; full colour on hover. */
.hm-map-photo {
	filter: saturate( .3 ) brightness( .78 );
	transition: filter .25s ease;
}

.hm-map-outline {
	fill: none;
	stroke: var( --hm-surface );
	stroke-width: 2;
	transition: stroke .18s ease, stroke-width .18s ease;
}

.hm-map-region {
	cursor: pointer;
	outline: none;
}

/* White with a dark halo: legible over any photo, light or dark. */
.hm-map-region .hm-map-label {
	fill: #fff;
	font-size: 15px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
	paint-order: stroke;
	stroke: rgba( 0, 0, 0, .55 );
	stroke-width: 3.5px;
	stroke-linejoin: round;
}

.hm-map-region:hover .hm-map-photo,
.hm-map-region:focus-visible .hm-map-photo,
.hm-map-region.is-active .hm-map-photo {
	filter: saturate( 1.05 ) brightness( 1 );
}

.hm-map-region:hover .hm-map-outline,
.hm-map-region.is-active .hm-map-outline {
	stroke: var( --hm-accent );
	stroke-width: 3.5;
}

.hm-map-region:focus-visible .hm-map-outline {
	stroke: var( --hm-head );
	stroke-width: 4;
}

/* Tooltip */
.hm-map-tip {
	position: absolute;
	z-index: 5;
	min-width: 170px;
	padding: 10px;
	background: var( --hm-surface );
	border: 1px solid var( --hm-border );
	border-radius: var( --hm-radius );
	box-shadow: var( --hm-shadow );
	pointer-events: none;
	opacity: 0;
	transform: translate( -50%, -8px );
	transition: opacity .15s ease;
}

.hm-map-tip.is-visible {
	opacity: 1;
}

.hm-map-tip img {
	display: block;
	width: 100%;
	height: 88px;
	object-fit: cover;
	border-radius: calc( var( --hm-radius ) - 2px );
	margin-bottom: 8px;
}

.hm-map-tip-name {
	display: block;
	color: var( --hm-head );
	font-weight: 600;
	font-size: var( --hybridmag-font-size-sm, .938rem );
}

.hm-map-tip-count {
	display: block;
	color: var( --hm-muted );
	font-size: var( --hybridmag-font-size-xxs, .813rem );
}

/* Region chips — the <768px replacement for the map, and the 海外 row */
.hm-region-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
	scrollbar-width: thin;
}

.hm-chip {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 16px;
	scroll-snap-align: start;
	background: var( --hm-surface );
	color: var( --hm-text );
	border: 1px solid var( --hm-border );
	border-radius: 999px;
	font-size: var( --hybridmag-font-size-sm, .938rem );
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.hm-chip:hover,
.hm-chip:focus-visible {
	border-color: var( --hm-accent );
	color: var( --hm-head );
}

.hm-chip.is-active {
	background: var( --hm-accent );
	border-color: var( --hm-accent );
	color: #fff;
}

.hm-chip-count {
	color: var( --hm-muted );
	font-size: var( --hybridmag-font-size-xxxs, .75rem );
}

.hm-chip.is-active .hm-chip-count {
	color: rgba( 255, 255, 255, .8 );
}

.hm-chip-now {
	background: var( --hm-accent );
	color: #fff;
	border-radius: 999px;
	padding: 1px 7px;
	font-size: 10px;
	line-height: 1.6;
}

.hm-chip.is-active .hm-chip-now {
	background: rgba( 255, 255, 255, .25 );
}

/* -------------------------------------------------------------------------
   B + C. Filter bar — season lens and instant search
   ---------------------------------------------------------------------- */

.hm-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --hm-inner );
	padding: var( --hm-inner );
	background: var( --hm-surface );
	border: 1px solid var( --hm-border );
	border-radius: var( --hm-radius );
}

.hm-seasons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.hm-search {
	position: relative;
	flex: 1 1 240px;
	min-width: 0;
}

.hm-search input {
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	color: var( --hm-text );
	background: transparent;
	border: 1px solid var( --hybridmag-color-input-border, #ccc );
	border-radius: var( --hm-radius );
	font-size: var( --hybridmag-font-size-sm, .938rem );
	font-family: inherit;
}

.hm-search input:focus {
	outline: 2px solid var( --hm-accent );
	outline-offset: 1px;
	border-color: var( --hm-accent );
}

.hm-feed-status {
	color: var( --hm-muted );
	font-size: var( --hybridmag-font-size-xs, .875rem );
	margin: 0 0 var( --hm-inner );
	min-height: 1.4em;
}

/* Escape hatch to the real category archive, shown once a region is picked.
   Hidden by default: JS unhides it, so it never renders with a dead href. */
.hm-feed-archive {
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
	margin-bottom: var( --hm-inner );
	color: var( --hm-accent );
	font-size: var( --hybridmag-font-size-xs, .875rem );
	font-weight: 600;
	text-decoration: none;
}

.hm-feed-archive:hover,
.hm-feed-archive:focus-visible {
	text-decoration: underline;
}

.hm-feed-archive[hidden] {
	display: none;
}

.hm-feed-status.is-loading::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: .5em;
	vertical-align: -1px;
	border: 2px solid var( --hm-border );
	border-top-color: var( --hm-accent );
	border-radius: 50%;
	animation: hm-spin .7s linear infinite;
}

@keyframes hm-spin {
	to { transform: rotate( 360deg ); }
}

/* -------------------------------------------------------------------------
   Feed
   ---------------------------------------------------------------------- */

.hm-feed {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --hm-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm-card {
	display: flex;
	flex-direction: column;
	background: var( --hm-surface );
	border: 1px solid var( --hm-border );
	border-radius: var( --hm-radius );
	box-shadow: var( --hm-shadow );
	overflow: hidden;
}

.hm-card-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	background: var( --hm-map-empty );
	overflow: hidden;
}

.hm-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.hm-card:hover .hm-card-thumb img {
	transform: scale( 1.05 );
}

.hm-card-body {
	padding: 14px 16px 16px;
}

.hm-card-region {
	display: inline-block;
	margin-bottom: 6px;
	color: var( --hm-accent );
	font-size: var( --hybridmag-font-size-xxxs, .75rem );
	font-weight: 600;
}

.hm-card-title {
	margin: 0;
	font-size: var( --hybridmag-font-size-md, 1.063rem );
	font-weight: var( --hybridmag-font-weight-headings, 600 );
	line-height: var( --hybridmag-line-height-headings, 1.3 );
}

.hm-card-title a {
	color: var( --hm-head );
	text-decoration: none;
}

.hm-card-title a:hover {
	color: var( --hm-accent );
}

.hm-empty {
	padding: calc( var( --hm-space ) * 1.4 ) var( --hm-inner );
	text-align: center;
	color: var( --hm-muted );
	background: var( --hm-surface );
	border: 1px dashed var( --hm-border );
	border-radius: var( --hm-radius );
}

.hm-empty button {
	margin-top: 12px;
}

.hm-more-wrap {
	margin-top: var( --hm-space );
	text-align: center;
}

.hm-btn {
	min-height: 44px;
	padding: 0 26px;
	color: var( --hybridmag-color-button-text, #fff );
	background: var( --hybridmag-color-button-background, #65bc7b );
	border: 0;
	border-radius: var( --hm-radius );
	font-family: inherit;
	font-size: var( --hybridmag-font-size-sm, .938rem );
	cursor: pointer;
}

.hm-btn:hover {
	background: var( --hybridmag-color-button-hover-background, #222 );
	color: var( --hybridmag-color-button-hover-text, #fff );
}

.hm-btn[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
   D. 泊まる band
   ---------------------------------------------------------------------- */

.hm-rail {
	display: flex;
	gap: var( --hm-inner );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
	margin: 0;
	list-style: none;
}

.hm-rail > li {
	flex: 0 0 232px;
	scroll-snap-align: start;
}

.hm-rail .hm-card {
	height: 100%;
}

/* -------------------------------------------------------------------------
   E. 都市チップ ticker
   ---------------------------------------------------------------------- */

.hm-ticker {
	overflow: hidden;
	mask-image: linear-gradient( 90deg, transparent, #000 6%, #000 94%, transparent );
}

.hm-ticker-track {
	display: flex;
	gap: 8px;
	width: max-content;
	animation: hm-marquee 38s linear infinite;
}

.hm-ticker:hover .hm-ticker-track,
.hm-ticker:focus-within .hm-ticker-track {
	animation-play-state: paused;
}

@keyframes hm-marquee {
	to { transform: translateX( -50% ); }
}

/* -------------------------------------------------------------------------
   F. Counters
   ---------------------------------------------------------------------- */

.hm-stats {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --hm-inner );
	padding: var( --hm-space ) var( --hm-inner );
	background: var( --hm-surface );
	border: 1px solid var( --hm-border );
	border-radius: var( --hm-radius );
	text-align: center;
}

.hm-stat-num {
	display: block;
	color: var( --hm-accent );
	font-size: var( --hybridmag-font-size-xxxl, 2rem );
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.hm-stat-label {
	display: block;
	margin-top: 4px;
	color: var( --hm-muted );
	font-size: var( --hybridmag-font-size-xs, .875rem );
}

/* -------------------------------------------------------------------------
   G. Sticky mini-map
   ---------------------------------------------------------------------- */

.hm-minimap {
	position: fixed;
	right: 18px;
	top: calc( var( --hybridmag-sticky-element-height, 80px ) + 18px );
	z-index: 90;
	width: 128px;
	padding: 8px;
	background: var( --hm-surface );
	border: 1px solid var( --hm-border );
	border-radius: var( --hm-radius );
	box-shadow: var( --hm-shadow );
	opacity: 0;
	visibility: hidden;
	transform: translateY( -8px );
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.hm-minimap.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hm-minimap .hm-map {
	max-width: 100%;
}

.hm-minimap .hm-map-region .hm-map-shape {
	fill: var( --hm-map-empty );
	stroke-width: 1.5;
}

.hm-minimap .hm-map-region.is-inview .hm-map-shape {
	fill: var( --hm-accent );
}

/* -------------------------------------------------------------------------
   Responsive — HybridMag's own breakpoints: 480 / 600 / 768 / 959
   ---------------------------------------------------------------------- */

@media ( min-width: 600px ) {
	.hm-feed {
		grid-template-columns: repeat( 2, 1fr );
	}
	.hm-rail > li {
		flex-basis: 260px;
	}
}

@media ( min-width: 959px ) {
	.hm-feed {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* Below 768px the SVG map is swapped for the chip row: ten tap targets
   beat one small map. */
@media ( max-width: 767px ) {
	.hm-map-wrap {
		display: none;
	}
}

@media ( min-width: 768px ) {
	.hm-region-chips-mobile {
		display: none;
	}
}

/* A fixed overlay on a phone is a liability, not a feature. */
@media ( max-width: 958px ) {
	.hm-minimap {
		display: none;
	}
}

@media ( max-width: 599px ) {
	.hm-stats {
		grid-template-columns: 1fr;
		gap: var( --hm-space );
	}
	.hm-filters {
		gap: 12px;
	}
}

/* -------------------------------------------------------------------------
   Motion
   ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.hm-ticker-track {
		animation: none;
		width: auto;
		flex-wrap: wrap;
	}
	.hm-ticker {
		mask-image: none;
	}
	.hm-ticker-track .hm-ticker-dupe {
		display: none;
	}
	.hm-map-region .hm-map-shape,
	.hm-card-thumb img,
	.hm-minimap {
		transition: none;
	}
	.hm-map-region:hover .hm-map-shape,
	.hm-map-region.is-active .hm-map-shape,
	.hm-card:hover .hm-card-thumb img {
		transform: none;
	}
	.hm-feed-status.is-loading::after {
		animation: none;
	}
}

/* =========================================================================
   SITE-WIDE — applies to every page, not just the homepage
   ====================================================================== */

/* Figtree has no Japanese glyphs, so every post on this site was falling back
   to whatever the visitor's OS supplies. Noto Sans JP goes in front of it and
   Figtree keeps handling Latin. */
body,
button,
input,
select,
optgroup,
textarea,
.entry-title,
.site-title,
h1, h2, h3, h4, h5, h6 {
	font-family: "Noto Sans JP", Figtree, Helvetica, Arial, sans-serif;
}

/* Tap targets. Post-list meta links measured 15-19px tall, under the 44px
   guideline. Padding only, so the visual rhythm is unchanged. */
@media ( max-width: 767px ) {
	.entry-meta a,
	.entry-footer a,
	.hm-entry-meta a,
	.post-navigation a,
	.widget_recent_entries a,
	.wp-block-latest-posts a,
	.wp-block-categories a {
		display: inline-block;
		padding-top: 12px;
		padding-bottom: 12px;
		line-height: 1.2;
	}

	.entry-meta,
	.hm-entry-meta {
		line-height: 1.2;
	}
}

/* Content images: never let one push the layout sideways, and hold the
   aspect ratio the markup declares. */
.entry-content img,
.entry-content iframe,
.entry-content video {
	max-width: 100%;
	height: auto;
}

.entry-content img[width][height] {
	height: auto;
}

/* Long unbroken strings (URLs in text) are the usual cause of mobile
   overflow on posts like these. */
.entry-content {
	overflow-wrap: break-word;
}

.entry-content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}