/*
Theme Name:   How Much Korea
Theme URI:    https://www.howmuchkorea.com/
Description:  GeneratePress child theme for How Much Korea. Data-first layout tuned for price tables, local-vs-tourist comparisons and dated price checks.
Author:       How Much Korea
Template:     generatepress
Version:      1.0.0
Text Domain:  howmuchkorea
*/

/* ==========================================================================
   1. Design tokens
   GeneratePress already exposes --contrast, --contrast-2, --contrast-3,
   --base, --base-2, --base-3 and --accent from its Global Colors.
   Everything below is layered on top of those.
   ========================================================================== */

:root {
	--hmk-navy: #1b3a5c;
	--hmk-navy-deep: #14293f;
	--hmk-warn: #c8102e;   /* rip-off / overpriced */
	--hmk-warn-bg: #fdf1f2;
	--hmk-amber: #a35b00;  /* tourist-area price */
	--hmk-amber-bg: #fdf6ec;
	--hmk-safe: #1e7a4a;   /* fair local price */
	--hmk-safe-bg: #eef7f1;
	--hmk-line: #d8dfe8;
	--hmk-radius: 6px;
	--hmk-shadow: 0 1px 2px rgba(20, 41, 63, .06), 0 4px 12px rgba(20, 41, 63, .05);

	/* No webfont is loaded on purpose: embedding Google Fonts sends visitor
	   IPs to Google, which is a GDPR problem for EU traffic. */
	--hmk-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	--hmk-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
	font-family: var(--hmk-sans);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hmk-sans);
	letter-spacing: -.015em;
	line-height: 1.25;
	color: var(--contrast);
}

h1 { font-size: 2.15rem; }
h2 { font-size: 1.55rem; margin-top: 2.2em; }
h3 { font-size: 1.2rem; margin-top: 1.8em; }

.entry-content > h2:first-child,
.entry-content > h3:first-child { margin-top: 0; }

/* Prices are numbers first and text second: line the digits up. */
.hmk-num,
.hmk-price-table td,
.hmk-stat-value {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ==========================================================================
   3. Header / navigation
   ========================================================================== */

.site-header {
	border-bottom: 1px solid var(--hmk-line);
}

.main-navigation .main-nav ul li a {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .01em;
}

.main-navigation .main-nav ul li.current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--hmk-navy);
}

.site-branding .site-title a {
	font-weight: 700;
	letter-spacing: -.02em;
}

/* ==========================================================================
   3b. Group blocks
   GeneratePress puts 40px of padding on .wp-block-group__inner-container.
   Our components set their own padding, so that extra ring has to go or the
   text ends up in a narrow gutter inside every card.
   ========================================================================== */

.hmk-hero > .wp-block-group__inner-container,
.hmk-cat-card > .wp-block-group__inner-container,
.hmk-caveat > .wp-block-group__inner-container,
.hmk-tip > .wp-block-group__inner-container,
.hmk-warning > .wp-block-group__inner-container {
	padding: 0;
	max-width: none;
}

/* For the two grid containers the wrapper has to disappear entirely, not just
   lose its padding: a grid only lays out its direct children, and the wrapper
   would otherwise be the single grid item holding all the cards.
   display:contents removes the box while keeping its children. */
.hmk-trust > .wp-block-group__inner-container,
.hmk-cat-grid > .wp-block-group__inner-container {
	display: contents;
}

/* ==========================================================================
   4. Hero (home page)
   ========================================================================== */

.hmk-hero {
	background: linear-gradient(160deg, var(--hmk-navy) 0%, var(--hmk-navy-deep) 100%);
	color: #fff;
	border-radius: var(--hmk-radius);
	padding: 3.25rem 3rem;
	margin-bottom: 2.5rem;
}

.hmk-hero h1,
.hmk-hero h2 {
	color: #fff;
	margin: 0 0 .6em;
	font-size: 2.3rem;
	max-width: 22ch;
}

.hmk-hero p {
	color: #d7e2ee;
	font-size: 1.08rem;
	max-width: 60ch;
	margin: 0 0 1.5rem;
}

.hmk-hero .wp-block-buttons { margin-top: 1.5rem; }

/* GeneratePress styles buttons with a.wp-block-button__link:not(.has-background),
   which is more specific than a plain class selector — these have to outrank it. */
.hmk-hero .wp-block-button a.wp-block-button__link:not(.has-background) {
	background: #fff;
	color: var(--hmk-navy);
	font-weight: 600;
	border-radius: 4px;
	padding: .7em 1.4em;
}

.hmk-hero .wp-block-button a.wp-block-button__link:not(.has-background):hover,
.hmk-hero .wp-block-button a.wp-block-button__link:not(.has-background):focus {
	background: #e8eef5;
	color: var(--hmk-navy-deep);
}

/* Buttons elsewhere on the site follow the brand colour. */
.entry-content .wp-block-button a.wp-block-button__link:not(.has-background) {
	background: var(--hmk-navy);
	color: #fff;
	border-radius: 4px;
}

.entry-content .wp-block-button a.wp-block-button__link:not(.has-background):hover,
.entry-content .wp-block-button a.wp-block-button__link:not(.has-background):focus {
	background: var(--hmk-navy-deep);
	color: #fff;
}

/* ==========================================================================
   5. Trust strip — the three promises the whole site rests on
   ========================================================================== */

.hmk-trust {
	background: var(--hmk-line);
	border: 1px solid var(--hmk-line);
	border-radius: var(--hmk-radius);
	overflow: hidden;
	margin-bottom: 2.5rem;
}

.hmk-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1px;
}

.hmk-trust p {
	background: var(--base-3, #fff);
	margin: 0;
	padding: 1.25rem 1.4rem;
	font-size: .95rem;
	color: var(--contrast-2);
}

.hmk-trust p strong {
	display: block;
	color: var(--contrast);
	font-size: 1rem;
	margin-bottom: .25rem;
}

/* ==========================================================================
   6. Category cards
   ========================================================================== */

.hmk-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.hmk-cat-card {
	background: var(--base-3, #fff);
	border: 1px solid var(--hmk-line);
	border-radius: var(--hmk-radius);
	padding: 1.3rem 1.4rem;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.hmk-cat-card:hover {
	border-color: var(--hmk-navy);
	transform: translateY(-2px);
	box-shadow: var(--hmk-shadow);
}

.hmk-cat-card h3 {
	margin: 0 0 .35rem;
	font-size: 1.05rem;
}

.hmk-cat-card h3 a {
	text-decoration: none;
	color: var(--hmk-navy);
}

.hmk-cat-card p {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--contrast-2);
}

/* ==========================================================================
   7. Price tables — the core component of this site
   Column order assumed by .hmk-price-table:
     1 Item | 2 Local price | 3 Tourist-area price | 4 Overpriced above
   ========================================================================== */

.hmk-price-table,
.hmk-table {
	margin: 1.8rem 0;
}

.hmk-price-table table,
.hmk-table table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--hmk-line);
	font-size: .95rem;
	background: var(--base-3, #fff);
}

.hmk-price-table.hmk-price-table thead th,
.hmk-table.hmk-table thead th {
	background: var(--hmk-navy);
	color: #fff;
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	padding: .7rem .85rem;
	border: none;
	white-space: nowrap;
}

/* Core's block-library sheet puts a full box border on every table cell with
   .wp-block-table td (0,1,1). The class is repeated here to outrank it without
   resorting to !important. A price table reads better with horizontal rules. */
.hmk-price-table.hmk-price-table td,
.hmk-price-table.hmk-price-table th,
.hmk-table.hmk-table td,
.hmk-table.hmk-table th {
	padding: .68rem .85rem;
	border: none;
	border-bottom: 1px solid var(--hmk-line);
	vertical-align: top;
}

.hmk-price-table tbody tr:last-child td,
.hmk-table tbody tr:last-child td { border-bottom: none; }

.hmk-price-table tbody tr:nth-child(even) td,
.hmk-table tbody tr:nth-child(even) td { background: #fafbfd; }

/* Numeric columns: right-aligned, never wrapped mid-number. */
.hmk-price-table td:not(:first-child),
.hmk-price-table thead th:not(:first-child) {
	text-align: right;
	white-space: nowrap;
}

.hmk-price-table td:first-child { font-weight: 500; }

/* Semantic colouring by column position, so writing a post needs no extra
   markup — just put the columns in the documented order. */
.hmk-price-table td:nth-child(2) { color: var(--hmk-safe); font-weight: 600; }
.hmk-price-table td:nth-child(3) { color: var(--hmk-amber); font-weight: 600; }
.hmk-price-table td:nth-child(4) { color: var(--hmk-warn); font-weight: 600; }

/* Plain tables opt out of the colouring. */
.hmk-table td { color: inherit; }

/* Legend that explains the colours, sits under the table. */
.hmk-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	margin: -.9rem 0 1.8rem;
	font-size: .82rem;
	color: var(--contrast-2);
}

.hmk-legend span { display: inline-flex; align-items: center; gap: .4rem; }

.hmk-legend span::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: currentColor;
}

.hmk-legend .is-fair { color: var(--hmk-safe); }
.hmk-legend .is-high { color: var(--hmk-amber); }
.hmk-legend .is-trap { color: var(--hmk-warn); }

/* The source line under a table. Every price table here carries one: what the
   number is, where it came from, when it was checked. That line is the reason
   this site exists, so it gets styled rather than left to the browser default. */
.hmk-price-table figcaption,
.hmk-table figcaption,
.entry-content .wp-block-table figcaption {
	margin-top: .7rem;
	font-size: .82rem;
	line-height: 1.55;
	color: var(--contrast-2);
	text-align: left;
}

.hmk-price-table figcaption a,
.hmk-table figcaption a,
.entry-content .wp-block-table figcaption a {
	color: inherit;
	text-decoration: underline;
}

/* Korean quoted inside a table cell. A menu name like 오미자숙성광개토삼겹살 has
   no spaces in it, so the browser treats the whole thing as one unbreakable
   word and pushes the table wider than the column — which is what put a
   horizontal scrollbar on a desktop-width table. Let it break anywhere. */
.hmk-table td .hmk-orig,
.hmk-price-table td .hmk-orig {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* A restaurant name is short and should not be broken mid-word — 육통령 split
   across two lines reads as a typo. Only the quoted menu line above is allowed
   to break anywhere, because that one really can be too long for its column. */
.hmk-table td [lang="ko"]:not(.hmk-orig),
.hmk-price-table td [lang="ko"]:not(.hmk-orig) {
	white-space: nowrap;
}

/* A gloss under a quoted original. The Korean line above it is the evidence —
   it is what the menu actually says, and a reader standing in front of that
   menu needs to match the characters. The gloss only explains it, so it reads
   quieter. */
.hmk-table td small,
.hmk-price-table td small {
	display: block;
	margin-top: .2rem;
	font-size: .82em;
	line-height: 1.4;
	color: var(--contrast-2);
}

/* A price-threshold table, where the verdict changes per ROW rather than per
   column: cheap / ordinary / expensive. Column-position colouring cannot say
   that, and a class on <tr> is not an option — Gutenberg's core/table schema
   has no attribute for it, so a row class makes the whole block invalid in the
   editor. The colours therefore key off row position, which is safe here
   because the order carries the meaning: cheapest band first, dearest last.
   Reordering the rows would misstate them anyway. */
.hmk-bands tbody tr:nth-child(1) td:first-child { color: var(--hmk-safe); font-weight: 600; }
.hmk-bands tbody tr:nth-child(2) td:first-child { color: var(--hmk-amber); font-weight: 600; }
.hmk-bands tbody tr:nth-child(3) td:first-child { color: var(--hmk-warn); font-weight: 600; }

.hmk-bands tbody tr:nth-child(1) td { background: var(--hmk-safe-bg); }
.hmk-bands tbody tr:nth-child(2) td { background: var(--hmk-amber-bg); }
.hmk-bands tbody tr:nth-child(3) td { background: var(--hmk-warn-bg); }

/* Mobile: scroll sideways but keep the item name pinned. */
@media (max-width: 640px) {
	.hmk-price-table,
	.hmk-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.hmk-price-table table { min-width: 460px; }

	/* Plain tables vary in width, so only widen the ones with enough columns
	   to need it. A two-column table should still fit without scrolling. */
	.hmk-table table { min-width: 100%; }
	.hmk-table table:has(thead th:nth-child(3)) { min-width: 460px; }

	.hmk-price-table thead th:first-child,
	.hmk-price-table td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background: var(--base-3, #fff);
		box-shadow: 1px 0 0 var(--hmk-line);
	}

	.hmk-price-table thead th:first-child { background: var(--hmk-navy); }
	.hmk-price-table tbody tr:nth-child(even) td:first-child { background: #fafbfd; }
}

/* ==========================================================================
   8. Callouts
   ========================================================================== */

/* The one-line answer that opens every post. */
.hmk-answer {
	border-left: 4px solid var(--hmk-navy);
	background: #f2f6fa;
	border-radius: 0 var(--hmk-radius) var(--hmk-radius) 0;
	padding: 1.1rem 1.3rem;
	margin: 0 0 1.8rem;
	font-size: 1.1rem;
	line-height: 1.55;
	font-weight: 500;
	color: var(--contrast);
}

.hmk-answer strong { color: var(--hmk-navy); }

/* "Checked on ..." provenance line — the whole trust proposition in one box.
   Not flex: the paragraph carries source links, and inline-flex turns every
   text fragment and <a> into its own flex item, shattering the sentence into
   columns. Plain inline-block lets it wrap as ordinary prose. */
.hmk-checked {
	display: inline-block;
	background: var(--hmk-safe-bg);
	color: var(--hmk-safe);
	border: 1px solid #c6e2d2;
	border-radius: 14px;
	padding: .32rem .9rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.6;
	margin: 0 0 1.5rem;
}

.hmk-checked::before { content: "\2713"; margin-right: .5rem; font-weight: 700; }

/* Links inherit the box's green, so underline is the only thing that makes
   them findable — and findable sources are the point of this line. */
.hmk-checked a { text-decoration: underline; text-underline-offset: 2px; }

/* Latest-posts block (홈 그리드 + 사이드바 위젯). 테마 기본값에서는 제목
   링크가 발췌문과 같은 크기·굵기·밑줄 없음이라 클릭 대상이 안 보였다.
   제목만 링크 표식(굵기 + 상시 밑줄)을 주고 날짜·발췌는 뒤로 물린다. */
.wp-block-latest-posts__post-title {
	display: inline-block;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--hmk-navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	margin-bottom: .15rem;
}

.wp-block-latest-posts__post-title:hover { text-decoration-thickness: 2px; }

.wp-block-latest-posts__post-date {
	display: block;
	font-size: .78rem;
	color: var(--contrast-2);
	margin: .1rem 0 .3rem;
}

.wp-block-latest-posts__post-excerpt {
	font-size: .92rem;
	line-height: 1.55;
	color: var(--contrast-2);
}

.wp-block-latest-posts li { margin-bottom: 1.4rem; }

/* Neutral counterpart to .hmk-checked, for "planned but not live yet".
   A green tick would read as "verified", which is the opposite of the point. */
.hmk-status {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--base, #e8edf3);
	color: var(--contrast-2);
	border: 1px solid var(--hmk-line);
	border-radius: 100px;
	padding: .32rem .9rem;
	font-size: .82rem;
	font-weight: 600;
	margin: 0 0 1.5rem;
}

.hmk-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--contrast-3);
	flex: none;
}

.hmk-tip,
.hmk-warning {
	border-radius: var(--hmk-radius);
	padding: 1.05rem 1.25rem;
	margin: 1.8rem 0;
	font-size: .96rem;
	line-height: 1.6;
}

.hmk-tip {
	background: var(--hmk-safe-bg);
	border: 1px solid #c6e2d2;
}

.hmk-warning {
	background: var(--hmk-warn-bg);
	border: 1px solid #f2c9ce;
}

/* 자식(>)이 아니라 후손이다 — .hmk-caveat 와 같은 이유다.
   워드프레스가 그룹 블록 안에 래퍼를 한 겹 끼우므로 `>` 로는 <p> 에 닿지
   못한다. 이 둘은 아직 글에 쓰인 적이 없어서 안 드러났을 뿐이다. */
.hmk-tip :first-child,
.hmk-warning :first-child { margin-top: 0; }

.hmk-tip :last-child,
.hmk-warning :last-child { margin-bottom: 0; }

.hmk-warning strong { color: var(--hmk-warn); }

/* A caveat about the DATA, not about a risk to the reader.
   The official dining-out survey states that its figures are not strictly
   comparable between regions or between survey dates — the surveyed
   restaurants change over time. Any post that compares regions or periods has
   to carry that caveat. It must not look like the red warning box: this is not
   "you are being ripped off", it is "here is the limit of what this number
   proves". Quiet, grey, and unmissable. */
.hmk-caveat {
	border-left: 3px solid var(--hmk-line);
	background: var(--base, #f4f6f9);
	border-radius: 0 var(--hmk-radius) var(--hmk-radius) 0;
	padding: .9rem 1.1rem;
	margin: 1.5rem 0;
	font-size: .88rem;
	line-height: 1.6;
	color: var(--contrast-2);
}

/* 자식(>)이 아니라 후손이다. 워드프레스가 그룹 블록 안에
   .wp-block-group__inner-container 를 한 겹 끼우므로, `>` 로는 래퍼만 잡고
   정작 <p> 의 위아래 여백은 그대로 남는다 — 상자가 커지는 두 번째 원인. */
.hmk-caveat :first-child { margin-top: 0; }
.hmk-caveat :last-child { margin-bottom: 0; }
.hmk-caveat strong { color: var(--contrast); }

/* ==========================================================================
   9. Post / archive chrome
   ========================================================================== */

.entry-meta { font-size: .85rem; color: var(--contrast-2); }

.entry-content > p:first-of-type { font-size: 1.05rem; }

.entry-content ul li,
.entry-content ol li { margin-bottom: .4em; }

.page-header,
.taxonomy-description { color: var(--contrast-2); }

/* Empty category archive: our own header replaces GeneratePress's
   "Nothing Found" card, which sits after it inside <main>. */
.hmk-empty-archive {
	background: var(--base-3, #fff);
	border: 1px solid var(--hmk-line);
	border-radius: var(--hmk-radius);
	padding: 2rem 2.25rem;
}

.hmk-empty-archive .page-title { margin: 0 0 .6rem; }

.hmk-empty-archive .taxonomy-description {
	font-size: 1.02rem;
	color: var(--contrast-2);
	margin-bottom: 1.4rem;
}

.hmk-empty-note {
	margin: 0;
	padding: 1rem 1.15rem;
	background: var(--base-2, #f5f7fa);
	border-left: 3px solid var(--hmk-navy);
	border-radius: 0 4px 4px 0;
	font-size: .92rem;
	color: var(--contrast-2);
}

.hmk-empty-archive ~ .no-results { display: none; }

/* ==========================================================================
   10. Sidebar widgets
   ========================================================================== */

.widget-area .widget {
	border: 1px solid var(--hmk-line);
	border-radius: var(--hmk-radius);
}

.widget-area .widget h2,
.widget-area .widget .wp-block-heading {
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--contrast-2);
	margin-bottom: .9rem;
}

.widget-area .widget ul li {
	padding: .3rem 0;
	border-bottom: 1px solid #eef1f5;
	font-size: .92rem;
}

.widget-area .widget ul li:last-child { border-bottom: none; }

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site-footer .footer-widgets {
	background: var(--hmk-navy-deep);
	color: #b9c7d6;
	border-top: 3px solid var(--hmk-navy);
}

.site-footer .footer-widgets .widget h2,
.site-footer .footer-widgets .widget .wp-block-heading {
	color: #fff;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .07em;
}

.site-footer .footer-widgets a { color: #dbe5ef; }
.site-footer .footer-widgets a:hover { color: #fff; }

.site-footer .footer-widgets p,
.site-footer .footer-widgets li { font-size: .9rem; }

.site-footer .footer-widgets ul li { border-bottom: none; padding: .18rem 0; }

.site-info {
	background: var(--hmk-navy-deep);
	color: #8fa2b6;
	font-size: .82rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.site-info a { color: #cddae7; }

.hmk-footer-note {
	font-size: .82rem;
	line-height: 1.55;
	color: #93a5b8;
	margin-top: 1.2rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

/* ==========================================================================
   12. Small screens
   ========================================================================== */

@media (max-width: 768px) {
	body { font-size: 16px; }
	h1 { font-size: 1.75rem; }
	h2 { font-size: 1.35rem; }

	.hmk-hero { padding: 2.1rem 1.5rem; }
	.hmk-hero h1,
	.hmk-hero h2 { font-size: 1.7rem; }
}

/* ==========================================================================
   13. Print — people screenshot and print price tables
   ========================================================================== */

@media print {
	.main-navigation,
	.widget-area,
	.site-footer,
	.hmk-hero { display: none !important; }

	.hmk-price-table thead th {
		background: #fff !important;
		color: #000 !important;
		border-bottom: 2px solid #000;
	}
}

/* ==========================================================================
   근거표 블록 — 검토용. 발행 전 삭제한다.
   ========================================================================== */

.hmk-evidence {
	border: 2px dashed var(--hmk-warn);
	background: var(--hmk-warn-bg);
	padding: 1rem 1.1rem;
	margin: 2rem 0;
	border-radius: var(--hmk-radius);
	font-size: .85rem;
}

.hmk-evidence > p:first-child { color: var(--hmk-warn); font-weight: 700; }
.hmk-evidence table { width: 100%; border-collapse: collapse; margin-top: .8rem; }
.hmk-evidence th,
.hmk-evidence td {
	border: 1px solid var(--hmk-line);
	padding: .35rem .5rem;
	text-align: left;
	font-family: var(--hmk-mono);
	font-size: .78rem;
	word-break: break-all;
}