/*
Theme Name: Hua Hin Expats
Theme URI: https://huahinexpats.co/
Description: HuaHinExpats.Co brand child theme of Twenty Twenty-Five. Bright, coastal community guide and directory for Hua Hin, Thailand. Brand tokens, typography, and components per the HuaHinExpats.Co design system.
Author: Hua Hin Expats
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: hua-hin-expats
*/

/*
 * Brand foundation lives in theme.json (colours, type, spacing, radii, shadows)
 * and is exposed as CSS custom properties (--wp--preset--* and --wp--custom--*).
 * Add only front-end CSS here that cannot be expressed in theme.json.
 */

/* Smooth sticky-header offset for in-page anchors. */
html { scroll-behavior: smooth; }

/* Wordmark: keep the full stop and pieces on one baseline. */
.hhe-wordmark { display: inline-flex; align-items: baseline; font-family: var(--wp--preset--font-family--merriweather); font-weight: 900; letter-spacing: -0.015em; line-height: 1; }
.hhe-wordmark .hhe-wm-lg { font-size: 1em; }
.hhe-wordmark .hhe-wm-sm { font-size: 0.64em; }
.hhe-wordmark .hhe-wm-dot { font-size: 0.6em; }
.hhe-wordmark .hhe-wm-hua { color: var(--wp--preset--color--navy); }
.hhe-wordmark .hhe-wm-hin { color: var(--wp--preset--color--blue); }
.hhe-wordmark .hhe-wm-expats { color: var(--wp--preset--color--navy); }
.hhe-wordmark .hhe-wm-dot { color: var(--wp--preset--color--orange); }
.hhe-wordmark .hhe-wm-co { color: var(--wp--preset--color--blue); }

/* On dark surfaces, swap navy->white and blue->light-blue, keep the orange dot.
   Over busy photo backgrounds the blue letters can wash out, so brighten them
   and add a soft dark halo to keep the whole wordmark legible. */
.hhe-wordmark.is-on-dark { text-shadow: 0 1px 3px rgba(3,24,49,0.45), 0 2px 16px rgba(3,24,49,0.35); }
.hhe-wordmark.is-on-dark .hhe-wm-hua,
.hhe-wordmark.is-on-dark .hhe-wm-expats { color: #FFFFFF; }
.hhe-wordmark.is-on-dark .hhe-wm-hin,
.hhe-wordmark.is-on-dark .hhe-wm-co { color: #9CC6FF; }

/* Sticky site header — the template-part wrapper carries the sticky so it can
 * travel the full page; the inner header carries the visual styling. */
header.wp-block-template-part { position: -webkit-sticky; position: sticky; top: 0; z-index: 100; }
.hhe-site-header { background: #FFFFFF; border-bottom: 1px solid #EFE9DC; transition: background .28s ease, box-shadow .28s ease, backdrop-filter .28s ease, border-color .28s ease; }
.hhe-site-header.is-scrolled { background: rgba(255,255,255,0.72); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom-color: rgba(231,225,213,0.6); box-shadow: 0 8px 28px -16px rgba(5,46,94,0.45); }

/* ---------------------------------------------------------------------------
 * Homepage: hero, category tiles, editorial split.
 * ------------------------------------------------------------------------- */
.hhe-hero-logo { max-width: 300px; height: auto; margin: 0 auto; }

/* Category tiles (4-up, image with gradient overlay + title/intro). */
.hhe-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .hhe-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hhe-cats { grid-template-columns: 1fr; } }
.hhe-cat-card { position: relative; display: block; min-height: 220px; border-radius: var(--wp--custom--radius--lg); overflow: hidden; color: #fff; text-decoration: none; box-shadow: var(--wp--custom--shadow--sm); }
.hhe-cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hhe-cat-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,46,94,0.10) 0%, rgba(5,46,94,0.82) 100%); }
.hhe-cat-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; }
.hhe-cat-card__title { display: block; font: 800 22px/1.1 var(--wp--preset--font-family--merriweather); color: #fff; margin: 0 0 6px; }
.hhe-cat-card__intro { display: block; font: 400 14px/1.45 var(--wp--preset--font-family--jakarta); color: rgba(255,255,255,0.92); margin: 0; }
.hhe-cat-card:hover { box-shadow: var(--wp--custom--shadow--md); }
.hhe-cat-card:hover img { transform: scale(1.04); transition: transform .3s ease; }
.hhe-cat-card__badge { position: absolute; top: 12px; right: 12px; background: #fff; color: var(--wp--preset--color--navy); font: 700 11px/1 var(--wp--preset--font-family--jakarta); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px; border-radius: 999px; }

/* Editorial split (text + image). */
.hhe-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .hhe-editorial { grid-template-columns: 1fr; } }
.hhe-editorial__img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wp--custom--radius--panel); display: block; }

/* ---------------------------------------------------------------------------
 * Directory listing card (rendered by the hhe/listing-card dynamic block).
 * Brand visual per design-system §"Listing card"; fields/logic per old hh-card.
 * ------------------------------------------------------------------------- */
.hhe-directory-grid .wp-block-post-template,
ul.hhe-directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1000px) { .hhe-directory-grid .wp-block-post-template, ul.hhe-directory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .hhe-directory-grid .wp-block-post-template, ul.hhe-directory-grid { grid-template-columns: 1fr; } }
.hhe-directory-grid .wp-block-post-template > li { margin: 0; }

.hhe-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #EFE9DC; border-radius: var(--wp--custom--radius--lg); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; height: 100%; }
.hhe-card:hover { transform: translateY(-3px); box-shadow: var(--wp--custom--shadow--card-hover); }

.hhe-card__media { position: relative; display: block; height: 172px; background: var(--wp--preset--gradient--hero-sunrise); overflow: hidden; }
.hhe-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hhe-card__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hhe-card__media .hhe-card__ph img { width: 60px; height: 60px; object-fit: contain; opacity: 0.92; filter: drop-shadow(0 4px 10px rgba(5,46,94,0.28)); }
.hhe-card__status { position: absolute; top: 12px; left: 12px; display: inline-block; padding: 4px 10px; border-radius: var(--wp--custom--radius--sm); font: 700 12px/1.4 var(--wp--preset--font-family--jakarta); text-transform: uppercase; letter-spacing: 0.04em; color: #FFFFFF; }
.hhe-card__status--featured { background: var(--wp--preset--color--orange); }
.hhe-card__status--verified { background: var(--wp--preset--color--success); }
.hhe-card__save { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--wp--preset--color--slate); cursor: pointer; font-size: 16px; line-height: 34px; text-align: center; box-shadow: var(--wp--custom--shadow--sm); transition: background .15s ease, color .15s ease, transform .15s ease; }
.hhe-card__save:hover { transform: scale(1.08); }
.hhe-card__save.is-saved { background: var(--wp--preset--color--orange); color: #fff; }
.hhe-card__loc { position: absolute; bottom: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(5,46,94,0.82); color: #FFFFFF; font: 600 12px/1 var(--wp--preset--font-family--jakarta); }

.hhe-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1 1 auto; }
.hhe-card__chip { align-self: flex-start; padding: 4px 12px; border-radius: 999px; font: 600 12px/1.3 var(--wp--preset--font-family--jakarta); background: var(--wp--preset--color--blue-100); color: var(--wp--preset--color--blue); }
.hhe-card__chip[data-cat="restaurants"] { background: var(--wp--preset--color--orange-100); color: var(--wp--preset--color--orange); }
.hhe-card__chip[data-cat="wellness-beauty"] { background: #D6F0E3; color: var(--wp--preset--color--success); }
.hhe-card__title { font: 700 18px/1.25 var(--wp--preset--font-family--merriweather); margin: 0; }
.hhe-card__title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.hhe-card__title a:hover { color: var(--wp--preset--color--blue); }
.hhe-card__rating { display: flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1; margin: -2px 0 0; }
.hhe-card__rating .hhe-stars { font-size: 14px; letter-spacing: 0.5px; }
.hhe-card__rating .hhe-rating-num { font-weight: 700; color: var(--wp--preset--color--ink); }
.hhe-card__rating .hhe-rating-count { color: var(--wp--preset--color--mute); }
.hhe-card__meta { margin: 0; color: var(--wp--preset--color--slate); font-size: 14px; }
.hhe-card__meta--fallback { color: var(--wp--preset--color--mute); font-style: italic; }
.hhe-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--wp--preset--color--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hhe-card__cta { display: inline-block; padding: 9px 16px; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--blue); color: #FFFFFF; font: 700 13px/1 var(--wp--preset--font-family--jakarta); text-decoration: none; }
.hhe-card__cta:hover { background: var(--wp--preset--color--navy-700); }
.hhe-card__claim { font: 600 12px/1.3 var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--orange); text-decoration: none; }
.hhe-card__claim:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * Single listing (hhe/listing-single dynamic block).
 * ------------------------------------------------------------------------- */
.hhe-single__back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; font: 600 14px var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--slate); text-decoration: none; transition: color .15s ease; }
.hhe-single__back:hover { color: var(--wp--preset--color--blue); }
.hhe-single { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; }
@media (max-width: 900px) { .hhe-single { grid-template-columns: 1fr; } }
.hhe-gallery__main { display: block; border-radius: var(--wp--custom--radius--lg); overflow: hidden; }
.hhe-gallery__main img { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.hhe-gallery__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.hhe-gallery__thumbs img { width: 100%; height: 72px; object-fit: cover; border-radius: 8px; }
.hhe-single__head { margin: 22px 0 8px; }
.hhe-single__title { font: 900 32px/1.1 var(--wp--preset--font-family--merriweather); color: var(--wp--preset--color--navy); margin: 8px 0; }
.hhe-single__rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--wp--preset--color--slate); }
.hhe-stars { color: var(--wp--preset--color--orange); letter-spacing: 1px; }
.hhe-star.is-empty { color: var(--wp--preset--color--line); }
.hhe-star.is-half { background: linear-gradient(90deg, var(--wp--preset--color--orange) 50%, var(--wp--preset--color--line) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hhe-rating-num { font-weight: 700; color: var(--wp--preset--color--ink); }
.hhe-open { font: 700 12px/1 var(--wp--preset--font-family--jakarta); padding: 4px 10px; border-radius: 999px; }
.hhe-open.is-open { background: #D6F0E3; color: var(--wp--preset--color--success); }
.hhe-open.is-closed { background: #EDE7DA; color: var(--wp--preset--color--slate); }
.hhe-single__body { font-size: 16px; line-height: 1.7; color: var(--wp--preset--color--ink); margin: 20px 0; }
.hhe-single__section { margin-top: 28px; }
.hhe-single__section h2 { font: 800 22px/1.1 var(--wp--preset--font-family--merriweather); color: var(--wp--preset--color--navy); margin: 0 0 12px; }
.hhe-map { height: 320px; border-radius: var(--wp--custom--radius--lg); overflow: hidden; border: 1px solid var(--wp--preset--color--line); }
.hhe-single__addr { color: var(--wp--preset--color--slate); margin: 10px 0 0; }
.hhe-hours { color: var(--wp--preset--color--ink); }

.hhe-factbox { position: sticky; top: 90px; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--panel); padding: 20px; box-shadow: var(--wp--custom--shadow--sm); }
.hhe-btn-cta { display: block; text-align: center; background: var(--wp--preset--color--blue); color: #fff; font: 700 15px/1 var(--wp--preset--font-family--jakarta); padding: 14px 18px; border-radius: var(--wp--custom--radius--md); text-decoration: none; }
.hhe-btn-cta.is-accent { background: var(--wp--preset--color--orange); }
.hhe-btn-cta:hover { filter: brightness(0.95); }
.hhe-quickcontact { display: flex; gap: 8px; margin: 12px 0 4px; }
.hhe-qc { flex: 1; text-align: center; border: 1.5px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); padding: 9px 6px; font: 600 13px/1 var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--navy); text-decoration: none; }
.hhe-qc.is-wa { color: #25D366; border-color: #25D366; }
.hhe-qc.is-line { color: #06C755; border-color: #06C755; }
.hhe-facts { list-style: none; margin: 16px 0; padding: 16px 0; border-top: 1px solid var(--wp--preset--color--line); display: grid; gap: 10px; }
.hhe-facts li { display: grid; grid-template-columns: 90px 1fr; gap: 10px; font-size: 14px; }
.hhe-facts span { color: var(--wp--preset--color--mute); }
.hhe-facts strong { color: var(--wp--preset--color--ink); font-weight: 600; }
.hhe-claim-link { display: block; font: 600 13px/1.4 var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--orange); text-decoration: none; }

.hhe-enquiry__row { display: flex; gap: 10px; margin-bottom: 10px; }
.hhe-enquiry input, .hhe-enquiry textarea { width: 100%; border: 1.5px solid #DCD6C9; border-radius: var(--wp--custom--radius--md); padding: 12px 14px; font: 400 15px var(--wp--preset--font-family--jakarta); }
.hhe-enquiry input:focus, .hhe-enquiry textarea:focus { outline: none; border-color: var(--wp--preset--color--blue); box-shadow: 0 0 0 3px rgba(7,104,228,0.16); }
.hhe-enquiry textarea { margin-bottom: 12px; }
.hhe-enquiry .hhe-card__cta { border: 0; cursor: pointer; }
.hhe-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------------------
 * Pricing / plans.
 * ------------------------------------------------------------------------- */
.hhe-pricing-toggle { display: inline-flex; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: 4px; margin: 0 auto 28px; }
.hhe-pricing-toggle button { border: 0; background: transparent; cursor: pointer; padding: 8px 18px; border-radius: 999px; font: 600 14px var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--slate); }
.hhe-pricing-toggle button.is-active { background: var(--wp--preset--color--navy); color: #fff; }
.hhe-pricing-toggle .hhe-save { color: var(--wp--preset--color--orange); font-size: 12px; font-weight: 700; }
.hhe-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.hhe-plans--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .hhe-plans--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .hhe-plans--4 { grid-template-columns: 1fr; } }
.hhe-promises { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0; }
@media (max-width: 680px) { .hhe-promises { grid-template-columns: 1fr; } }
.hhe-promise { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 16px 18px; }
.hhe-promise b { display: block; color: var(--wp--preset--color--navy); font: 700 15px var(--wp--preset--font-family--jakarta); margin-bottom: 4px; }
.hhe-promise span { color: var(--wp--preset--color--slate); font-size: 14px; line-height: 1.5; }
.hhe-faq { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.hhe-faq details { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); padding: 14px 18px; }
.hhe-faq summary { cursor: pointer; font: 700 16px var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--navy); }
.hhe-faq p { margin: 10px 0 0; color: var(--wp--preset--color--slate); }
@media (max-width: 860px) { .hhe-plans { grid-template-columns: 1fr; } }
.hhe-plan { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--panel); padding: 26px 24px; position: relative; }
.hhe-plan.is-popular { border: 2px solid var(--wp--preset--color--orange); box-shadow: var(--wp--custom--shadow--md); }
.hhe-plan__pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--wp--preset--color--orange); color: #fff; font: 700 11px/1 var(--wp--preset--font-family--jakarta); text-transform: uppercase; letter-spacing: .06em; padding: 7px 12px; border-radius: 999px; }
.hhe-plan__name { font: 800 20px var(--wp--preset--font-family--merriweather); color: var(--wp--preset--color--navy); margin: 0 0 8px; }
.hhe-plan__price { font: 900 36px/1 var(--wp--preset--font-family--merriweather); color: var(--wp--preset--color--ink); }
.hhe-plan__per { color: var(--wp--preset--color--mute); font-size: 14px; margin: 4px 0 18px; }
.hhe-plan ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.hhe-plan li { padding-left: 26px; position: relative; font-size: 14.5px; color: var(--wp--preset--color--slate); }
.hhe-plan li:before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--success); font-weight: 800; }
.hhe-plan__cta { display: block; text-align: center; padding: 13px; border-radius: var(--wp--custom--radius--md); font: 700 15px var(--wp--preset--font-family--jakarta); text-decoration: none; }
.hhe-plan__cta.is-fill { background: var(--wp--preset--color--orange); color: #fff; }
.hhe-plan__cta.is-out { border: 1.5px solid var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); }
.hhe-annual, .hhe-monthly-only { display: none; }
.hhe-plans[data-mode="annual"] .hhe-annual { display: inline; }
.hhe-plans[data-mode="annual"] .hhe-monthly { display: none; }
.hhe-plans[data-mode="monthly"] .hhe-monthly { display: inline; }
.hhe-steps { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.hhe-step { display: flex; gap: 14px; align-items: center; background: var(--wp--preset--color--orange-100); border-radius: var(--wp--custom--radius--md); padding: 14px 18px; }
.hhe-step b { flex: 0 0 30px; height: 30px; border-radius: 999px; background: var(--wp--preset--color--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* ---------------------------------------------------------------------------
 * Directory UI (hhe/directory block): sidebar + sort/per-page + pager.
 * ------------------------------------------------------------------------- */
.hhe-dir { display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; }
@media (max-width: 880px) { .hhe-dir { grid-template-columns: 1fr; } .hhe-dir__side { position: static !important; } }
.hhe-dir__side { position: sticky; top: 86px; }
.hhe-dir__search { display: flex; gap: 6px; margin-bottom: 18px; }
.hhe-dir__search input { flex: 1; min-width: 0; border: 1.5px solid #DCD6C9; border-radius: var(--wp--custom--radius--md); padding: 10px 12px; font: 400 14px var(--wp--preset--font-family--jakarta); }
.hhe-dir__search button { border: 0; cursor: pointer; background: var(--wp--preset--color--navy); color: #fff; border-radius: var(--wp--custom--radius--md); padding: 0 14px; }
.hhe-dir__caphead { font: 700 12px/1 var(--wp--preset--font-family--jakarta); text-transform: uppercase; letter-spacing: .1em; color: var(--wp--preset--color--mute); margin: 18px 0 8px; }
.hhe-dir__group { margin-bottom: 10px; }
.hhe-dir__grouplabel { display: block; font: 700 13px var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--navy); margin: 8px 0 2px; }
.hhe-dir__cat { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 8px; font: 500 14px var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--slate); text-decoration: none; }
.hhe-dir__cat:hover { background: var(--wp--preset--color--cream); }
.hhe-dir__cat.is-active { background: var(--wp--preset--color--blue); color: #fff; }
.hhe-dir__count { font-size: 12px; color: var(--wp--preset--color--mute); }
.hhe-dir__cat.is-active .hhe-dir__count { color: rgba(255,255,255,.8); }
.hhe-dir__bar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
.hhe-dir__title { font: 900 30px/1 var(--wp--preset--font-family--merriweather); color: var(--wp--preset--color--navy); margin: 0; }
.hhe-dir__count-line { color: var(--wp--preset--color--slate); margin: 6px 0 0; font-size: 14px; }
.hhe-dir__intro { color: var(--wp--preset--color--slate); font-size: 15px; line-height: 1.6; max-width: 820px; margin: 10px 0 0; }
.hhe-dir__controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 0; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); margin-bottom: 22px; }
.hhe-dir__sorts, .hhe-dir__per { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.hhe-dir__sorts > span, .hhe-dir__per > span { color: var(--wp--preset--color--mute); margin-right: 4px; }
.hhe-dir__sort, .hhe-dir__perlink { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--wp--preset--color--navy); font-weight: 600; }
.hhe-dir__sort.is-active, .hhe-dir__perlink.is-active { background: var(--wp--preset--color--navy); color: #fff; }
.hhe-dir__pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 32px; flex-wrap: wrap; }
.hhe-dir__pager a { padding: 8px 13px; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; text-decoration: none; color: var(--wp--preset--color--navy); font-weight: 600; font-size: 14px; }
.hhe-dir__pager a.is-active { background: var(--wp--preset--color--blue); color: #fff; border-color: var(--wp--preset--color--blue); }
.hhe-dir__gap { color: var(--wp--preset--color--mute); padding: 0 2px; }
.hhe-dir__empty { padding: 40px 0; color: var(--wp--preset--color--slate); }

/* ---------------------------------------------------------------------------
 * Owner dashboard (hhe/owner-dashboard block).
 * ------------------------------------------------------------------------- */
.hhe-od { max-width: 820px; margin: 0 auto; }
.hhe-od__gate { text-align: center; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--panel); padding: 44px 28px; }
.hhe-od__notice { padding: 12px 16px; border-radius: var(--wp--custom--radius--md); margin-bottom: 18px; font-weight: 600; }
.hhe-od__notice.ok { background: #D6F0E3; color: var(--wp--preset--color--success); }
.hhe-od__notice.err { background: #FBE3E3; color: var(--wp--preset--color--error); }
.hhe-od__item { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--lg); padding: 14px; margin-bottom: 12px; }
.hhe-od__thumb { width: 84px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--wp--preset--gradient--hero-sunrise); flex: 0 0 auto; }
.hhe-od__item h3 { margin: 0 0 2px; font: 700 17px var(--wp--preset--font-family--merriweather); }
.hhe-od__item p { margin: 0; color: var(--wp--preset--color--slate); font-size: 13px; }
.hhe-od__item .hhe-od__actions { margin-left: auto; display: flex; gap: 8px; }
.hhe-od__btn { display: inline-block; padding: 9px 16px; border-radius: var(--wp--custom--radius--md); font: 700 13px var(--wp--preset--font-family--jakarta); text-decoration: none; }
.hhe-od__btn.is-fill { background: var(--wp--preset--color--blue); color: #fff; }
.hhe-od__btn.is-out { border: 1.5px solid var(--wp--preset--color--line); color: var(--wp--preset--color--navy); }
.hhe-od__form { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--panel); padding: 24px; }
.hhe-od__form label { display: block; font: 600 13px var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--navy); margin: 14px 0 5px; }
.hhe-od__form input[type=text], .hhe-od__form input[type=email], .hhe-od__form input[type=url], .hhe-od__form input[type=tel], .hhe-od__form textarea { box-sizing: border-box; width: 100%; border: 1.5px solid #DCD6C9; border-radius: var(--wp--custom--radius--md); padding: 11px 13px; font: 400 15px var(--wp--preset--font-family--jakarta); }
.hhe-od__form input:focus, .hhe-od__form textarea:focus { outline: none; border-color: var(--wp--preset--color--blue); box-shadow: 0 0 0 3px rgba(7,104,228,0.16); }
.hhe-od__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .hhe-od__grid2 { grid-template-columns: 1fr; } }
.hhe-od__gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.hhe-od__gallery label { margin: 0; position: relative; cursor: pointer; }
.hhe-od__gallery img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; display: block; opacity: .55; border: 2px solid transparent; }
.hhe-od__gallery input:checked + img { opacity: 1; border-color: var(--wp--preset--color--blue); }
.hhe-od__gallery input { position: absolute; top: 6px; left: 6px; }
.hhe-od__save { margin-top: 22px; border: 0; cursor: pointer; background: var(--wp--preset--color--orange); color: #fff; font: 700 15px var(--wp--preset--font-family--jakarta); padding: 13px 26px; border-radius: var(--wp--custom--radius--md); }

/* ---------------------------------------------------------------------------
 * Blog index (home.html) — post cards.
 * ------------------------------------------------------------------------- */
.hhe-blog-grid .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 900px) { .hhe-blog-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hhe-blog-grid .wp-block-post-template { grid-template-columns: 1fr; } }
.hhe-blog-grid .wp-block-post-template > li { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hhe-blog-grid .wp-block-post-featured-image { margin: 0; }
.hhe-blog-grid .wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.hhe-blog-grid .wp-block-post-title { margin: 2px 0 0; line-height: 1.25; }
.hhe-blog-grid .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.hhe-blog-grid .wp-block-post-title a:hover { color: var(--wp--preset--color--blue); }
.hhe-blog-grid .wp-block-post-excerpt { color: var(--wp--preset--color--slate); font-size: 15px; line-height: 1.55; margin: 0; }
.hhe-blog-grid .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--wp--preset--color--blue); text-decoration: none; }

/* ---------------------------------------------------------------------------
 * Events community board.
 * ------------------------------------------------------------------------- */
.hhe-events { display: grid; gap: 14px; }
.hhe-event { display: flex; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--lg); padding: 16px 18px; transition: border-color .15s ease, box-shadow .15s ease; }
.hhe-event:hover { border-color: var(--wp--preset--color--orange); box-shadow: var(--wp--custom--shadow--sm); }
.hhe-event__date { flex: 0 0 64px; text-align: center; background: var(--wp--preset--color--navy); color: #fff; border-radius: var(--wp--custom--radius--md); padding: 8px 4px; }
.hhe-event__date .m { display: block; font: 700 11px/1 var(--wp--preset--font-family--jakarta); text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--sun); }
.hhe-event__date .d { display: block; font: 800 24px/1.1 var(--wp--preset--font-family--merriweather); }
.hhe-event__body { flex: 1 1 auto; min-width: 0; }
.hhe-event__body h3 { margin: 0 0 4px; font: 700 18px/1.2 var(--wp--preset--font-family--merriweather); color: var(--wp--preset--color--navy); }
.hhe-event__meta { margin: 0; color: var(--wp--preset--color--slate); font-size: 14px; }
.hhe-event__chip { display: inline-block; background: var(--wp--preset--color--blue-100); color: var(--wp--preset--color--blue); font: 600 12px/1.3 var(--wp--preset--font-family--jakarta); padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; }
.hhe-event__status { flex: 0 0 auto; font: 700 12px var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--success); }
.hhe-eventform { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--panel); padding: 24px; max-width: 720px; }
.hhe-eventform label { display: block; font: 600 13px var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--navy); margin: 14px 0 5px; }
.hhe-eventform input, .hhe-eventform textarea, .hhe-eventform select { width: 100%; border: 1.5px solid #DCD6C9; border-radius: var(--wp--custom--radius--md); padding: 11px 13px; font: 400 15px var(--wp--preset--font-family--jakarta); }
.hhe-eventform input:focus, .hhe-eventform textarea:focus, .hhe-eventform select:focus { outline: none; border-color: var(--wp--preset--color--blue); box-shadow: 0 0 0 3px rgba(7,104,228,0.16); }
.hhe-eventform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .hhe-eventform .row2 { grid-template-columns: 1fr; } }
.hhe-eventform button { margin-top: 20px; border: 0; cursor: pointer; background: var(--wp--preset--color--orange); color: #fff; font: 700 15px var(--wp--preset--font-family--jakarta); padding: 13px 26px; border-radius: var(--wp--custom--radius--md); }

/* Consistent page banner (hhe/page-banner) — same size on every page. */
.hhe-pagebanner { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; overflow: hidden; }
.hhe-pagebanner__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,46,94,0.55) 0%, rgba(5,46,94,0.68) 100%); }
.hhe-pagebanner__inner { position: relative; text-align: center; max-width: 820px; padding: 40px 24px; }
.hhe-pagebanner__eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font: 700 13px/1 var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--sun); margin: 0 0 12px; }
.hhe-pagebanner__title { color: #fff; font-family: var(--wp--preset--font-family--merriweather); font-weight: 900; font-size: clamp(30px, 5vw, 46px); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
.hhe-pagebanner__sub { color: rgba(255,255,255,0.92); font: 400 18px/1.5 var(--wp--preset--font-family--jakarta); margin: 14px 0 0; }

/* Header account nav (login-state aware). */
.hhe-acctnav { display: flex; align-items: center; gap: 16px; }
.hhe-acctnav__link { font: 700 14px var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--navy); text-decoration: none; white-space: nowrap; padding: 9px 16px; border: 1.5px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); transition: border-color .15s ease, color .15s ease; }
.hhe-acctnav__link:hover { color: var(--wp--preset--color--blue); border-color: var(--wp--preset--color--blue); }
.hhe-acctnav__btn { background: var(--wp--preset--color--orange); color: #fff; font: 700 14px var(--wp--preset--font-family--jakarta); padding: 10px 18px; border-radius: var(--wp--custom--radius--md); text-decoration: none; white-space: nowrap; }
.hhe-acctnav__btn:hover { background: var(--wp--preset--color--orange-400); }

/* ---------------------------------------------------------------------------
 * Front-end client login (hhe/login block).
 * ------------------------------------------------------------------------- */
.hhe-login { max-width: 460px; margin: 0 auto; }
.hhe-login__card { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--panel); padding: 32px; box-shadow: var(--wp--custom--shadow--sm); }
.hhe-login #loginform p, .hhe-login form p { margin: 0 0 16px; }
.hhe-login form p:last-child { margin-bottom: 0; }
.hhe-login label { display: block; font: 600 13px var(--wp--preset--font-family--jakarta); color: var(--wp--preset--color--navy); margin-bottom: 6px; }
.hhe-login input[type=text], .hhe-login input[type=password], .hhe-login input[type=email], .hhe-login input[type=tel] { box-sizing: border-box; width: 100%; border: 1.5px solid #DCD6C9; border-radius: var(--wp--custom--radius--md); padding: 12px 14px; font: 400 15px var(--wp--preset--font-family--jakarta); background-color: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.hhe-login input:focus { outline: none; border-color: var(--wp--preset--color--blue); box-shadow: 0 0 0 3px rgba(7,104,228,0.16); }
/* Email field upgrade: inset mail icon (login + claim forms). */
.hhe-login input[type=email], .hhe-od__form input[type=email] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23667892' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; padding-left: 42px; }
.hhe-login .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--wp--preset--color--slate); margin: 0; }
.hhe-login .login-remember input { width: auto; }
.hhe-login #wp-submit { width: 100%; border: 0; cursor: pointer; background: var(--wp--preset--color--orange); color: #fff; font: 700 15px var(--wp--preset--font-family--jakarta); padding: 13px; border-radius: var(--wp--custom--radius--md); }
.hhe-login #wp-submit:hover { background: var(--wp--preset--color--orange-400); }
.hhe-login__links { text-align: center; margin-top: 16px; font-size: 14px; }
.hhe-login__owner { text-align: center; margin-top: 6px; font-size: 13px; color: var(--wp--preset--color--mute); }

/* Footer: light links on the navy surface. */
.hhe-site-footer a { color: var(--wp--preset--color--blue-300); text-decoration: none; }
.hhe-site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.hhe-foot-list { list-style: none; margin: 12px 0 0; padding: 0; }
.hhe-foot-list li { margin: 0 0 8px; }
.hhe-foot-head { margin: 0 0 4px; }
.hhe-foot-legal a { margin-left: 4px; }

/* Footer newsletter inline form. */
.hhe-newsletter { display: flex; gap: 8px; margin-top: 12px; max-width: 280px; }
.hhe-newsletter input { flex: 1 1 auto; min-width: 0; border: 1.5px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); color: #FFFFFF; border-radius: var(--wp--custom--radius--md); padding: 10px 12px; font: 600 14px var(--wp--preset--font-family--jakarta); }
.hhe-newsletter input::placeholder { color: var(--wp--preset--color--mute); }
.hhe-newsletter input:focus { outline: none; border-color: var(--wp--preset--color--blue-300); box-shadow: 0 0 0 3px rgba(7,104,228,0.30); }
.hhe-newsletter button { flex: 0 0 auto; white-space: nowrap; border: 0; cursor: pointer; background: var(--wp--preset--color--orange); color: #FFFFFF; border-radius: var(--wp--custom--radius--md); padding: 10px 18px; font: 700 14px var(--wp--preset--font-family--jakarta); }
.hhe-newsletter button:hover { background: var(--wp--preset--color--orange-400); }
.hhe-news-msg { margin: 8px 0 0; font: 600 13px var(--wp--preset--font-family--jakarta); }
.hhe-news-msg.is-ok { color: var(--wp--preset--color--sun-300); }
.hhe-news-msg.is-err { color: #FFB3B3; }

/* ---------------------------------------------------------------------------
 * Subscription plan buttons (hhe/plan-buttons — GoCardless checkout).
 * ------------------------------------------------------------------------- */
.hhe-plans { max-width: 920px; margin: 0 auto; }
.hhe-plans__for { color: var(--wp--preset--color--slate); margin: 0 0 18px; }
.hhe-plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .hhe-plans__grid { grid-template-columns: 1fr; } }
.hhe-plan { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--panel); padding: 22px; text-align: center; }
.hhe-plan h3 { margin: 0 0 14px; color: var(--wp--preset--color--navy); }
.hhe-plan__form { margin: 0 0 10px; }
.hhe-plan__form .hhe-od__btn { width: 100%; cursor: pointer; border: 0; }
.hhe-plans__note { text-align: center; color: var(--wp--preset--color--mute); font-size: 13px; margin-top: 18px; }
.hhe-plans__pick select { padding: 10px 12px; border-radius: var(--wp--custom--radius--md); border: 1.5px solid #DCD6C9; }

/* ---------------------------------------------------------------------------
 * Affiliate banners (Booking.com CJ creatives) — centered + responsive.
 * ------------------------------------------------------------------------- */
.hhe-affbanner { text-align: center; margin: 28px 0; }
.hhe-affbanner a { display: inline-block; line-height: 0; max-width: 100%; }
.hhe-affbanner img { max-width: 100%; height: auto; display: inline-block; border-radius: 8px; }
.hhe-affbanner__tag { display: block; font: 600 10px/1 var(--wp--preset--font-family--jakarta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--mute); margin-bottom: 8px; }

/* Full-content-width affiliate banner variant (homepage). */
.hhe-affbanner--wide a { display: block; }
.hhe-affbanner--wide img { width: 100%; max-width: 100%; height: auto; }