/* ==========================================================================
   WordPress support layer — classes used by PHP templates that the static
   prototype named differently or didn't need. Uses design tokens only.
   Loaded after style.css, before responsive.css.
   ========================================================================== */

/* ---- Generic card internals (shared by all card parts) ---- */
.card-title { font-family: var(--font-serif); font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.card-title a { color: var(--text); }
.card-title a:hover { color: var(--red); }
.card-excerpt { font-size: .88rem; color: var(--text-muted); line-height: 1.55; margin-top: .3rem; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-family: var(--font-sans); font-size: .78rem; color: var(--text-muted); margin-top: .55rem; }
.card-meta__sep { opacity: .6; }
.card-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.card-tags .tag-link,
.card-tags .job-tag { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; padding: .18rem .6rem; border-radius: 99px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-muted); }
.card-tags .job-tag--salary { background: color-mix(in srgb, var(--gold) 22%, var(--bg-alt)); border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); color: var(--text); }

/* ---- Hero ---- */
.hero-lead__title { font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; line-height: 1.25; margin-top: .55rem; }
.hero-lead__title a { color: var(--text); }
.hero-lead__title a:hover { color: var(--red); }
.compact-story__title { font-family: var(--font-serif); font-size: .95rem; font-weight: 600; line-height: 1.35; }
.compact-story__title a { color: var(--text); }
.compact-story__title a:hover { color: var(--red); }

/* ---- Lists ---- */
.event-list, .job-list { display: grid; gap: .8rem; }

/* ---- Event rows ---- */
.event-row__date { flex: none; width: 58px; text-align: center; background: var(--navy-deep); color: #fff; border-radius: var(--radius); padding: .45rem 0; font-family: var(--font-sans); }
.event-row__day { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.event-row__month { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.event-row__body { flex: 1; min-width: 0; }

/* ---- Facts grid (events, itineraries) ---- */
.event-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin: 1.1rem 0; }
.fact { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .85rem; }
.fact__label { display: block; font-family: var(--font-sans); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.fact__value { display: block; font-family: var(--font-sans); font-size: .92rem; font-weight: 600; margin-top: .2rem; }

/* ---- Hotel single ---- */
.hotel-hero__media { margin-bottom: .9rem; }
.hotel-hero__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.room-row__rate { font-family: var(--font-sans); font-weight: 700; color: var(--navy-deep); }
[data-theme="dark"] .room-row__rate { color: var(--gold); }

/* ---- Article layout helpers ---- */
.article-main { min-width: 0; }
.post-nav__link--prev .post-nav__title::before { content: "‹ "; color: var(--red); }
.post-nav__link--next { text-align: right; }
.post-nav__link--next .post-nav__title::after { content: " ›"; color: var(--red); }

/* ---- Comments ---- */
.comments-area { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.comment-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.comment-list .comment-body { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; font-size: .92rem; }
.comment-list .avatar { border-radius: 50%; }

/* ---- Theme toggle icon states (header renders both, JS swaps hidden) ---- */
.theme-icon-moon, .theme-icon-sun { display: inline-flex; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: inline-flex !important; }
[data-theme="dark"] .theme-icon-sun[hidden] { display: inline-flex !important; }