/* HOK Areas Map — front end. Everything is scoped under .hokam so nothing leaks into the theme. */

.hokam {
	--hokam-radius-lg: 16px;
	--hokam-radius-md: 12px;
	--hokam-gutter: 24px;
	font-family: var(--hokam-body-font);
	color: var(--hokam-text);
	background: var(--hokam-page-bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	width: 100%;
}
.hokam *,
.hokam *::before,
.hokam *::after { box-sizing: border-box; }

/* Layout: each band is a 3-column grid (gutter | content | gutter), so the content width
   comes from the grid track and can't be undone by theme max-width/width rules. */
.hokam .hokam-hero,
.hokam .hokam-section {
	display: grid;
	grid-template-columns: minmax(var(--hokam-gutter), 1fr) minmax(0, var(--hokam-inner)) minmax(var(--hokam-gutter), 1fr);
}
.hokam .hokam-inner {
	grid-column: 2;
	min-width: 0;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ---------- Hero ---------- */
.hokam .hokam-hero {
	position: relative;
	background: var(--hokam-hero-bg);
	padding: var(--hokam-section-pad) 0;
	margin: 0;
	/* Paint the background edge to edge even when a theme/Elementor container boxes the content. */
	box-shadow: 0 0 0 100vmax var(--hokam-hero-bg);
	clip-path: inset(0 -100vmax);
}
.hokam .hokam-hero .hokam-hero__eyebrow {
	margin: 0;
	font-family: var(--hokam-body-font);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hokam-accent);
}
.hokam .hokam-hero .hokam-hero__title {
	margin: 16px 0 0;
	padding: 0;
	max-width: 768px;
	font-family: var(--hokam-heading-font);
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1;
	font-weight: 500;
	letter-spacing: -0.025em;
	text-transform: none;
	color: var(--hokam-text);
}
.hokam .hokam-hero .hokam-hero__subtitle {
	margin: 24px 0 0;
	max-width: 600px;
	font-family: var(--hokam-body-font);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: var(--hokam-muted);
}

/* Our own template: undo any width limits the theme puts on the content area. */
.hokam-template .hokam-main {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ---------- Map section ---------- */
.hokam .hokam-section {
	padding: var(--hokam-section-pad) 0;
	margin: 0;
	background: var(--hokam-page-bg);
}

.hokam .hokam-intro { margin: 0 0 40px; }
.hokam .hokam-intro .hokam-intro__heading {
	margin: 0;
	padding: 0;
	font-family: var(--hokam-heading-font);
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--hokam-text);
}
.hokam .hokam-intro .hokam-intro__caption {
	margin: 12px 0 0;
	max-width: 600px;
	font-family: var(--hokam-body-font);
	font-size: 18px;
	line-height: 28px;
	color: var(--hokam-muted);
}

.hokam .hokam-grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 40px;
}
@media (min-width: 1024px) {
	.hokam .hokam-grid { grid-template-columns: 1.6fr 1fr; }
}

.hokam .hokam-mapcard {
	border-radius: var(--hokam-radius-lg);
	background: var(--hokam-map-bg);
	padding: 24px;
}
.hokam .hokam-map {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.hokam .hokam-map path {
	stroke: var(--hokam-map-bg);
	stroke-width: .5;
	vector-effect: non-scaling-stroke;
	transition: opacity .3s ease, fill .3s ease;
}
.hokam .hokam-map .hokam-land { fill: var(--hokam-land); }
.hokam .hokam-map .hokam-region { fill: var(--c); cursor: pointer; }
.hokam .hokam-map .is-dim { opacity: var(--hokam-dim); }
.hokam .hokam-map .hokam-region.is-dim:hover,
.hokam .hokam-map .hokam-region.is-hover { opacity: var(--hokam-dim-hover); }

.hokam .hokam-pin { cursor: pointer; transition: opacity .3s ease; outline: none; }
.hokam .hokam-pin__dot {
	fill: var(--c);
	stroke: var(--hokam-map-bg);
	stroke-width: 1.5;
	transform-box: fill-box;
	transform-origin: center;
	transition: transform .3s ease;
}
.hokam .hokam-pin.is-active .hokam-pin__dot { transform: scale(1.5); }
.hokam .hokam-pin__pulse {
	fill: var(--c);
	pointer-events: none;
	transform-box: fill-box;
	transform-origin: center;
	animation: hokam-pulse 2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes hokam-pulse {
	0%   { transform: scale(1); opacity: .75; }
	75%, 100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hokam .hokam-pin__pulse { animation: none; opacity: 0; }
}
.hokam .hokam-pin__line {
	stroke: var(--c);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}
.hokam .hokam-pin__line,
.hokam .hokam-pin__label { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.hokam .hokam-pin.is-hover .hokam-pin__line,
.hokam .hokam-pin.is-hover .hokam-pin__label { opacity: 1; }
.hokam .hokam-pin.is-hover { opacity: 1; }
.hokam .hokam-pin__label rect {
	fill: var(--c);
	stroke: var(--hokam-map-bg);
	stroke-width: 1.5;
}
.hokam .hokam-pin__label text {
	fill: #fff;
	font-family: var(--hokam-heading-font);
	font-size: 15px;
	font-weight: 500;
}

/* ---------- Tabs ---------- */
.hokam .hokam-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
}
.hokam .hokam-tabs .hokam-pill {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	margin: 0;
	border: 1px solid var(--hokam-pill-border);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--hokam-text);
	padding: 6px 16px;
	font-family: var(--hokam-body-font);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.hokam .hokam-tabs .hokam-pill:hover,
.hokam .hokam-tabs .hokam-pill:focus {
	border-color: var(--hokam-accent);
	background: transparent;
	color: var(--hokam-text);
	box-shadow: none;
}
.hokam .hokam-tabs .hokam-pill:focus-visible {
	outline: 2px solid var(--hokam-accent);
	outline-offset: 2px;
}
.hokam .hokam-tabs .hokam-pill.is-active,
.hokam .hokam-tabs .hokam-pill.is-active:hover,
.hokam .hokam-tabs .hokam-pill.is-active:focus {
	border-color: var(--hokam-pill-active);
	background: var(--hokam-pill-active);
	color: #fff;
}

/* ---------- Panel ---------- */
.hokam .hokam-panel[hidden] { display: none; }
.hokam .hokam-panel.is-entering { animation: hokam-fade .35s ease both; }
@keyframes hokam-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
.hokam .hokam-panel .hokam-panel__img {
	display: block;
	width: 100%;
	height: var(--hokam-image-h);
	max-width: none;
	margin: 0 0 20px;
	border: 0;
	border-radius: var(--hokam-radius-md);
	object-fit: cover;
	box-shadow: none;
}
.hokam .hokam-panel .hokam-panel__where {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-family: var(--hokam-body-font);
	font-size: 14px;
	line-height: 20px;
	color: var(--hokam-accent);
}
.hokam .hokam-panel .hokam-panel__where svg { width: 16px; height: 16px; flex: none; }
.hokam .hokam-panel .hokam-panel__title {
	margin: 4px 0 0;
	padding: 0;
	font-family: var(--hokam-heading-font);
	font-size: 30px;
	line-height: 36px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--hokam-text);
}
.hokam .hokam-panel .hokam-panel__desc {
	margin: 12px 0 0;
	font-family: var(--hokam-body-font);
	font-size: 16px;
	line-height: 24px;
	color: var(--hokam-muted);
}

@media (max-width: 767px) {
	.hokam { --hokam-gutter: 16px; }
	.hokam .hokam-hero { padding: var(--hokam-section-pad-sm) 0; }
	.hokam .hokam-section { padding: var(--hokam-section-pad-sm) 0; }
	.hokam .hokam-mapcard { padding: 12px; }
	.hokam .hokam-panel .hokam-panel__title { font-size: 26px; line-height: 32px; }
}