/*
Theme Name: K Food Guide
Theme URI: https://kfoodguide.com
Author: K Food Guide
Description: Lightweight magazine block theme for kfoodguide.com. Yellow accent, grey article panel, PT Sans typography.
Version: 1.1.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: kfoodguide
*/

/* ---------- base ---------- */
.kfg-section, .kfg-archive-head, .kfg-latest, .kfg-mapsec, .kfg-cats { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
a { text-underline-offset: 2px; }
img { height: auto; }

/* ---------- announcement bar ---------- */
.kfg-topbar { position: relative; background: var(--wp--preset--color--accent); color: #fff; text-align: center; font-family: var(--wp--preset--font-family--arial); font-size: 18px; padding: 12px 56px; line-height: 1.4; }
.kfg-topbar p { margin: 0; }
.kfg-topbar a { color: #fff; text-decoration: none; }
.kfg-topbar__close { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 4px; }
.kfg-topbar.is-hidden { display: none; }

/* ---------- header ---------- */
.kfg-header { background: #fff; }
.kfg-header__inner { max-width: 1440px; margin: 0 auto; padding: 20px 80px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.kfg-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: .92; text-decoration: none; color: #000; font-family: var(--wp--preset--font-family--archivo); }
.kfg-logo__top { font-size: 22px; letter-spacing: .2px; }
.kfg-logo__bottom { font-size: 28px; letter-spacing: 1px; }
.kfg-logo:hover { color: #000; }
.kfg-nav { display: flex; align-items: center; gap: clamp(24px, 5vw, 96px); }
.kfg-nav .wp-block-navigation { gap: clamp(24px, 6vw, 110px); }
.kfg-nav .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--arial); font-weight: 700; font-size: 18px; color: #000; text-decoration: underline; text-decoration-color: var(--wp--preset--color--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kfg-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent); }
.kfg-nav .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: 8px 0 !important; min-width: 220px !important; }
.kfg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { text-decoration: none; font-weight: 400; padding: 8px 18px !important; }
.kfg-header .wp-block-search__button { background: none !important; color: #000 !important; border: 0; padding: 4px; }
.kfg-header .wp-block-search__button svg { width: 30px; height: 30px; }
.kfg-header .wp-block-search__inside-wrapper { border: 0; }
.kfg-btn .wp-block-button__link, .wp-block-button.kfg-btn .wp-block-button__link { background: var(--wp--preset--color--accent); color: #fff; border-radius: 8px; padding: 12px 22px; font-family: var(--wp--preset--font-family--arial); font-size: 18px; text-decoration: none; }
.kfg-btn .wp-block-button__link:hover { filter: brightness(.95); }

/* ---------- article panel ---------- */
.kfg-panel { background: var(--wp--preset--color--panel); margin: 0 5% !important; padding: 72px 24px 96px; }
.kfg-panel > * { max-width: 680px; margin-left: auto !important; margin-right: auto !important; }
.kfg-panel .kfg-cat { text-align: center; font-family: var(--wp--preset--font-family--arial); font-size: 14px; margin-bottom: 48px; }
.kfg-panel .kfg-cat a { color: var(--wp--preset--color--accent); text-decoration: none; }
.kfg-panel .wp-block-post-title { font-family: var(--wp--preset--font-family--pt-sans); font-size: 30px; font-weight: 400; line-height: 1.47; margin: 0 0 16px; }
.kfg-panel .wp-block-post-excerpt { font-family: var(--wp--preset--font-family--arial); font-style: italic; color: var(--wp--preset--color--muted); font-size: 16px; line-height: 1.45; margin-bottom: 24px; }
.kfg-panel .wp-block-post-excerpt__more-text { display: none; }
.kfg-panel .wp-block-post-featured-image { margin-bottom: 28px; }
.kfg-panel .wp-block-post-content { font-size: 17px; line-height: 1.75; }
.kfg-panel .wp-block-post-content > * + * { margin-top: 1.1em; }
.kfg-panel .wp-block-post-content figure figcaption, .kfg-panel .wp-element-caption { font-style: italic; font-size: 16px; color: #000; text-align: left; margin-top: 6px; }
.kfg-meta { font-size: 14px; color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--arial); margin-bottom: 20px !important; }

/* quote like the reference: narrow, centred column with teal bar */
.kfg-panel .wp-block-quote { max-width: 440px; margin-left: 140px !important; margin-right: auto !important; }

/* ---------- latest posts (2 col list) ---------- */
.kfg-latest:not(:has(.wp-block-post)) { display: none; }
.kfg-latest { max-width: 1250px; margin: 120px auto 80px !important; padding: 0 24px; }
.kfg-latest > h2 { font-family: var(--wp--preset--font-family--arial); font-size: 24px; font-weight: 400; margin: 0 0 12px; }
.kfg-latest .wp-block-post-template { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; list-style: none; padding: 0; margin: 0; }
.kfg-latest .wp-block-post { border-bottom: 1px solid #ccc; padding: 4px 8px 28px; }
.kfg-latest .kfg-card-cat { font-size: 13px; margin: 14px 0 4px; font-family: var(--wp--preset--font-family--arial); }
.kfg-latest .kfg-card-cat a { color: var(--wp--preset--color--accent); text-decoration: none; }
.kfg-latest .wp-block-post-title { font-family: var(--wp--preset--font-family--arial); font-size: 21px; font-weight: 400; line-height: 1.4; margin: 6px 0 8px; }
.kfg-latest .wp-block-post-title a { color: #000; text-decoration: none; }
.kfg-latest .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.kfg-latest .wp-block-post-excerpt { font-family: var(--wp--preset--font-family--arial); font-size: 15px; line-height: 1.9; margin: 0; }
.kfg-latest .wp-block-post-excerpt__more-text { display: none; }

/* ---------- CTA band ---------- */
.kfg-cta { background: var(--wp--preset--color--cream); padding: 110px 24px 100px; text-align: center; }
.kfg-cta h2 { font-family: var(--wp--preset--font-family--pt-sans); font-weight: 700; font-size: 36px; margin: 0 0 18px; }
.kfg-cta p { max-width: 640px; margin: 0 auto 36px; font-size: 17px; line-height: 1.7; }
.kfg-cta .wp-block-button__link { background: var(--wp--preset--color--accent); color: #fff; border-radius: 0; min-width: 340px; padding: 20px 32px; font-family: var(--wp--preset--font-family--arial); font-size: 18px; text-decoration: none; }

/* ---------- footer ---------- */
.kfg-footer { background: var(--wp--preset--color--panel); padding: 80px 24px 90px; }
.kfg-footer__inner { max-width: 1250px; margin: 0 auto; display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.kfg-footer__brand .kfg-logo__top { font-size: 30px; }
.kfg-footer__brand .kfg-logo__bottom { font-size: 38px; }
.kfg-footer__tagline { font-family: var(--wp--preset--font-family--arial); font-weight: 700; font-size: 20px; margin: 40px 0 34px; }
.kfg-footer__legal { font-family: var(--wp--preset--font-family--arial); font-size: 16px; line-height: 2.1; margin: 0; }
.kfg-footer__cols { display: flex; gap: 60px; flex-wrap: wrap; padding-top: 6px; }
.kfg-footer__cols h3 { font-family: var(--wp--preset--font-family--arial); font-weight: 700; font-size: 19px; margin: 0 0 12px; }
.kfg-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.kfg-footer__cols li { margin: 0 0 16px; font-family: var(--wp--preset--font-family--arial); font-size: 16px; }
.kfg-footer__cols a { color: #000; text-decoration: none; }
.kfg-footer__cols a:hover { color: var(--wp--preset--color--accent); }

/* ---------- to-top button ---------- */
.kfg-totop { position: fixed; right: 16px; bottom: 16px; width: 62px; height: 62px; border-radius: 50%; background: var(--wp--preset--color--accent); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; }
.kfg-totop.is-visible { opacity: 1; pointer-events: auto; }
.kfg-totop svg { width: 28px; height: 28px; }

/* ---------- home: category grid ---------- */
.kfg-cats { max-width: 1440px; margin: 0 auto; padding: 70px 80px 110px; display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 40px; }
.kfg-cats__label { font-family: var(--wp--preset--font-family--arial); font-weight: 700; font-size: 28px; line-height: 1.3; text-align: center; margin: 0; }
.kfg-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; }
.kfg-catitem { display: grid; grid-template-columns: 92px 1fr 18px; gap: 20px; align-items: center; text-decoration: none; color: #000; }
.kfg-catitem__icon { width: 92px; height: 92px; border-radius: 50%; background: var(--wp--preset--color--cream); border: 3px solid var(--wp--preset--color--accent); display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--archivo); font-size: 22px; color: #000; overflow: hidden; }
.kfg-catitem__icon img { width: 100%; height: 100%; object-fit: cover; }
.kfg-catitem__title { font-family: var(--wp--preset--font-family--arial); font-size: 24px; margin: 0 0 8px; }
.kfg-catitem__desc { font-family: var(--wp--preset--font-family--arial); font-size: 17px; color: var(--wp--preset--color--muted); line-height: 1.4; margin: 0; }
.kfg-catitem__arrow { align-self: start; margin-top: 6px; color: var(--wp--preset--color--accent); }
.kfg-catitem:hover .kfg-catitem__title { color: var(--wp--preset--color--accent); }


/* ---------- region map ---------- */
.kfg-mapsec { max-width: 1440px; margin: 0 auto; padding: 60px 80px 110px; display: grid; grid-template-columns: 220px minmax(320px, 560px) minmax(300px, 1fr); align-items: center; gap: 56px; }
.kfg-mapsec__hint { font-family: var(--wp--preset--font-family--arial); color: var(--wp--preset--color--muted); font-size: 15px; text-align: center; margin: 14px 0 0; line-height: 1.5; }
.kfg-map__svg { width: 100%; height: auto; display: block; overflow: visible; }
.kfg-region path { fill: var(--wp--preset--color--cream); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; transition: fill .15s; }
.kfg-region:hover path, .kfg-region:focus path, .kfg-region.is-hover path, .kfg-region.is-current path { fill: var(--wp--preset--color--accent); }
.kfg-region:focus { outline: none; }
.kfg-region:focus-visible path { stroke: #000; stroke-width: 2; }
.kfg-map__svg a, .kfg-map__svg a:hover { text-decoration: none; }
.kfg-maplabel text { font-family: var(--wp--preset--font-family--arial); font-size: 15px; font-weight: 700; fill: #000; pointer-events: none; }
.kfg-maplabel line { stroke: #000; stroke-width: 1; }
.kfg-maplabel circle { fill: var(--wp--preset--color--accent); stroke: #000; stroke-width: 1.2; }
.kfg-maplabel--pin text { pointer-events: auto; cursor: pointer; }
.kfg-maplabel--pin.is-hover circle, .kfg-maplabel--pin:hover circle { r: 7; }
.kfg-regionlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.kfg-regionitem { display: block; padding: 14px 30px 14px 0; border-bottom: 1px solid #ddd; text-decoration: none; color: #000; position: relative; }
.kfg-regionitem::after { content: "\2197"; position: absolute; right: 4px; top: 12px; color: var(--wp--preset--color--accent); font-size: 16px; }
.kfg-regionitem__name { display: block; font-family: var(--wp--preset--font-family--arial); font-size: 19px; margin-bottom: 2px; }
.kfg-regionlist .kfg-regionitem__desc { display: none; }
.kfg-regionitem__desc { display: block; font-family: var(--wp--preset--font-family--arial); font-size: 14px; color: var(--wp--preset--color--muted); line-height: 1.4; }
.kfg-regionitem__count { display: inline-block; margin-top: 2px; font-family: var(--wp--preset--font-family--arial); font-size: 12px; color: var(--wp--preset--color--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.kfg-regionitem:hover .kfg-regionitem__name, .kfg-regionitem.is-hover .kfg-regionitem__name { color: var(--wp--preset--color--accent); }
.kfg-minimap { width: 230px; flex-shrink: 0; }
.kfg-minimap .kfg-maplabel text { font-size: 22px; }
.kfg-minimap .kfg-maplabel:not(.kfg-maplabel--pin) { display: none; }
.kfg-archive-head { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.kfg-archive-head__text { flex: 1; min-width: 0; }
.kfg-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.kfg-chip { font-family: var(--wp--preset--font-family--arial); font-size: 15px; padding: 7px 16px; border: 1px solid var(--wp--preset--color--accent); border-radius: 999px; color: #000; text-decoration: none; background: #fff; }
.kfg-chip:hover { background: var(--wp--preset--color--cream); color: #000; }
.kfg-chip.is-active { background: var(--wp--preset--color--accent); color: #fff; }

/* ---------- home: sections ---------- */
.kfg-section { max-width: 1290px; margin: 0 auto 110px !important; padding: 0 24px; }
.kfg-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px !important; }
.kfg-section__title { font-family: var(--wp--preset--font-family--arial); font-weight: 700; font-size: 40px; color: var(--wp--preset--color--accent); text-transform: uppercase; margin: 0; letter-spacing: -.5px; }
.kfg-section__head .wp-block-button__link { background: var(--wp--preset--color--accent); color: #fff; border-radius: 6px; padding: 10px 20px; font-family: var(--wp--preset--font-family--arial); font-size: 18px; text-decoration: none; }

/* overlay cards (4 col) */
.kfg-overlay .wp-block-post-template { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; padding: 0; margin: 0; }
.kfg-overlay .wp-block-post { position: relative; min-height: 560px; overflow: hidden; background: #111; }
.kfg-overlay .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.kfg-overlay .wp-block-post-featured-image img, .kfg-overlay .wp-block-post-featured-image a { width: 100%; height: 100%; object-fit: cover; display: block; }
.kfg-overlay .wp-block-post::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.9) 88%); pointer-events: none; }
.kfg-overlay .kfg-overlay__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 28px 30px; z-index: 2; }
.kfg-overlay .kfg-card-cat { font-family: var(--wp--preset--font-family--arial); font-size: 15px; margin: 0 0 8px; }
.kfg-overlay .kfg-card-cat a { color: var(--wp--preset--color--accent); text-decoration: none; }
.kfg-overlay .wp-block-post-title { font-family: var(--wp--preset--font-family--arial); font-size: 27px; line-height: 1.38; font-weight: 400; margin: 0; }
.kfg-overlay .wp-block-post-title a { color: #fff; text-decoration: none; }
.kfg-overlay .wp-block-post-title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* image + title grid (4 col) */
.kfg-grid .wp-block-post-template { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 20px; list-style: none; padding: 0; margin: 0; }
.kfg-grid .wp-block-post-featured-image { margin: 0; aspect-ratio: 16/10; background: var(--wp--preset--color--panel); overflow: hidden; }
.kfg-grid .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.kfg-grid .wp-block-post:not(:has(.wp-block-post-featured-image))::before { content: "K FOOD GUIDE"; display: flex; align-items: center; justify-content: center; aspect-ratio: 16/10; background: var(--wp--preset--color--cream); color: var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--archivo); font-size: 22px; letter-spacing: 1px; }
.kfg-grid .wp-block-post-title { font-family: var(--wp--preset--font-family--arial); font-size: 22px; line-height: 1.85; font-weight: 400; margin: 8px 8px 0; }
.kfg-grid .wp-block-post-title a { color: #000; text-decoration: none; }
.kfg-grid .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.kfg-empty { font-family: var(--wp--preset--font-family--arial); color: var(--wp--preset--color--muted); padding: 40px 0; }

/* archive header */
.kfg-archive-head { max-width: 1290px; margin: 60px auto 30px !important; padding: 0 24px; }
.kfg-archive-head .wp-block-query-title { font-family: var(--wp--preset--font-family--arial); font-weight: 700; font-size: 40px; color: var(--wp--preset--color--accent); text-transform: uppercase; margin: 0 0 8px; }
.kfg-archive-head .wp-block-term-description { font-family: var(--wp--preset--font-family--arial); color: var(--wp--preset--color--muted); font-size: 18px; }
.kfg-pagination { margin-top: 40px !important; justify-content: center; font-family: var(--wp--preset--font-family--arial); }
.kfg-pagination a, .kfg-pagination .current { padding: 6px 12px; text-decoration: none; color: #000; }
.kfg-pagination .current { background: var(--wp--preset--color--accent); color: #fff; border-radius: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .kfg-mapsec { grid-template-columns: 1fr; padding: 40px 24px 72px; gap: 28px; }
  .kfg-map { max-width: 520px; margin: 0 auto; width: 100%; }
  .kfg-header__inner { padding: 16px 24px; }
  .kfg-cats { grid-template-columns: 1fr; padding: 48px 24px 72px; }
  .kfg-cats__grid { grid-template-columns: repeat(2, 1fr); }
  .kfg-overlay .wp-block-post-template, .kfg-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
  .kfg-regionlist { grid-template-columns: 1fr; }
  .kfg-archive-head { flex-direction: column; align-items: flex-start; }
  .kfg-minimap { width: 160px; align-self: center; }
  .kfg-topbar { font-size: 14px; padding: 10px 44px; }
  .kfg-topbar__close { right: 10px; font-size: 22px; }
  .kfg-header__inner { gap: 12px; }
  .kfg-logo__top { font-size: 17px; } .kfg-logo__bottom { font-size: 22px; }
  .kfg-nav { gap: 14px; }
  .kfg-nav .kfg-btn { display: none; }
  .kfg-panel { margin: 0 !important; padding: 44px 20px 64px; }
  .kfg-panel .wp-block-post-title { font-size: 26px; }
  .kfg-latest .wp-block-post-template { grid-template-columns: 1fr; }
  .kfg-cats__grid { grid-template-columns: 1fr; gap: 28px; }
  .kfg-catitem { grid-template-columns: 72px 1fr 18px; } .kfg-catitem__icon { width: 72px; height: 72px; font-size: 18px; }
  .kfg-catitem__title { font-size: 20px; } .kfg-catitem__desc { font-size: 15px; }
  .kfg-cats__label { font-size: 24px; }
  .kfg-panel .wp-block-post-content h2 { font-size: 26px; } .kfg-panel .wp-block-post-content h3 { font-size: 22px; }
  .kfg-panel .wp-block-quote { margin-left: auto !important; font-size: 22px; }
  .kfg-footer__brand .kfg-logo__top { font-size: 24px; } .kfg-footer__brand .kfg-logo__bottom { font-size: 30px; }
  .kfg-section__title { font-size: 28px; }
  .kfg-overlay .wp-block-post-template, .kfg-grid .wp-block-post-template { grid-template-columns: 1fr; }
  .kfg-overlay .wp-block-post { min-height: 420px; }
  .kfg-cta .wp-block-button__link { min-width: 0; width: 100%; }
  .kfg-footer__cols { gap: 36px; }
}