/* ════════════════════════════════════════════════════════════════
   Holywoods Camp — local brand-tuning overrides
   ────────────────────────────────────────────────────────────────
   Site-specific overrides on top of theme dna-glamping-jp.css.
   Modifiche per pilot Holy Woods, NON canonical glamping_jp DNA.

   Last update: 2026-05-17 (Round C32 — Forest-Lake Editorial palette)

   Loaded by: layouts/partials/head-extra.html
   After:     /css/base.css + /css/dna-glamping-jp.css (cascade winner)

   Article body wrapper class: default Hugo single layout uses .prose
   (Tailwind-prose stub), recipe-specific layouts use .tm-prose.
   We target BOTH via :is(.tm-prose, .prose) for max coverage.
   ════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   C32 — Forest-Lake Editorial palette (kamisuwa-inspired extension)
   ──────────────────────────────────────────────────────────────
   Mantiene core glamping_jp (cream warm + forest + gold) e AGGIUNGE
   lake-blue (#4a6b7a, da kamisuwa-shinyu) + terracotta-muted (#8b5a3c)
   per ricchezza editorial coerente con wabi-sabi + premium feel.

   Approach: override CSS custom properties del theme (--tm-*) per
   propagare cambiamento a tutto il sito senza modificare DNA canonical.
*/
:root {
  --tm-bg: #f5f1ea;
  --tm-bg-soft: #ebe5d8;
  --tm-bg-elev: #fcfaf5;
  --tm-bg-cool: #f0f1f3;

  --tm-ink: #1a1a18;
  --tm-ink-2: #5a5650;
  --tm-ink-soft: #5a5650;
  --tm-mute: #7a6b5c;

  --tm-forest: #3d5a3d;
  --tm-forest-deep: #2a3f2a;
  --tm-lake: #4a6b7a;
  --tm-lake-deep: #2c4856;

  --tm-gold: #9a7b3c;
  --tm-gold-soft: #d8c197;
  --tm-gold-light: #ebe0c2;

  --tm-terra: #8b5a3c;
  --tm-terra-soft: rgba(139, 90, 60, 0.08);

  --tm-stone: #7a6b5c;

  --tm-line: rgba(26, 26, 24, 0.10);
  --tm-line-soft: rgba(26, 26, 24, 0.06);

  --tm-shadow-soft: 0 4px 14px rgba(26, 26, 24, 0.06);
  --tm-shadow-lift: 0 8px 28px rgba(26, 26, 24, 0.10);
}

/* ──────────────────────────────────────────────────────────────
   A1 — Mincho font (high-end editorial JP feel)
   ────────────────────────────────────────────────────────────── */
:root {
  --hw-mincho:
    "Yu Mincho",
    "游明朝",
    "YuMincho",
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Noto Serif JP",
    "Sawarabi Mincho",
    serif;
}

body,
.tm-prose, .tm-prose p, .tm-prose li,
.prose, .prose p, .prose li,
.tm-section,
.tm-card, .tm-card p,
.tm-footer, .tm-footer p {
  font-family: var(--hw-mincho);
}

h1, h2, h3, h4, h5, h6,
.tm-hero__title, .tm-section__title, .tm-card__title,
.tm-booking-hero h1, .tm-booking-card h2, .tm-booking-note h2 {
  font-family: var(--hw-mincho);
  font-feature-settings: "palt" 1;
}

.tm-hero__eyebrow, .tm-booking-kicker, .tm-section__kicker {
  font-family: var(--hw-mincho);
  font-weight: 400;
}

.tm-topbar__brand, .tm-topbar__nav, .tm-topbar__cta,
.tm-cta, .tm-booking-submit {
  font-family: var(--hw-mincho);
}

/* Form inputs in Yu Gothic per usabilità durante typing */
.tm-booking-form input,
.tm-booking-form select,
.tm-booking-form textarea {
  font-family: "Yu Gothic", "游ゴシック", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

/* ──────────────────────────────────────────────────────────────
   A3 — Letter-spacing (字間) editorial JP
   ────────────────────────────────────────────────────────────── */
body,
.tm-prose, .tm-prose p,
.prose, .prose p,
.tm-section p, .tm-card p, .tm-footer p {
  letter-spacing: 0.04em;
  line-height: 1.85;
}

h1, h2, h3, h4, h5, h6,
.tm-hero__title, .tm-section__title, .tm-card__title {
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.tm-hero h1.tm-hero__title,
#tm-hero-title {
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
}

.tm-cta, .tm-booking-submit, .tm-topbar__cta {
  letter-spacing: 0.05em;
}

.tm-footer { letter-spacing: 0.03em; }

/* P0 fix — Footer bg forest-deep per AA contrast con link cream (era tan
   #d9d2c0 da theme dna-bg-deep, link cream invisibili 1.34:1). */
.tm-footer {
  background: var(--tm-forest-deep) !important;
  color: var(--tm-bg) !important;
}
.tm-footer p,
.tm-footer__brand,
.tm-footer__tagline,
.tm-footer__legal,
.tm-footer__contact {
  color: var(--tm-bg) !important;
}
.tm-footer__contact a {
  color: var(--tm-gold-light) !important;
  text-decoration: underline;
  text-decoration-color: rgba(235, 224, 194, 0.45);
}
.tm-footer__contact a:hover {
  color: var(--tm-bg) !important;
}

/* ──────────────────────────────────────────────────────────────
   A5 — Heading decoration editorial JP (post-emoji-strip)
   ────────────────────────────────────────────────────────────── */
.tm-prose h2,
.prose h2 {
  border-bottom: 1px solid var(--tm-gold-soft);
  padding-bottom: 0.4em;
  margin-top: 2.5em;
  margin-bottom: 1.2em;
  letter-spacing: 0.05em;
  color: var(--tm-ink);
  font-weight: 500;
}

.tm-prose h2:first-of-type,
.prose h2:first-of-type {
  margin-top: 1.2em;
}

.tm-prose h3,
.prose h3 {
  position: relative;
  padding-left: 2.4em;            /* Moe #6: era 1.6em, troppo stretto */
  margin-top: 2em;
  margin-bottom: 0.8em;
  font-weight: 500;
  color: var(--tm-forest);
}

.tm-prose h3::before,
.prose h3::before {
  content: "──";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.7em;                    /* Fix box width per gap consistente */
  color: var(--tm-terra);
  font-weight: 300;
  opacity: 0.85;
  letter-spacing: -0.1em;
  text-align: left;
}

.tm-prose h4,
.prose h4 {
  font-weight: 500;
  color: var(--tm-stone);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-size: 1.05em;
}

.tm-prose blockquote,
.prose blockquote {
  border-left: 3px solid var(--tm-lake);
  background: rgba(74, 107, 122, 0.06);
  padding: 1em 1.4em;
  margin: 1.6em 0;
  font-style: normal;
  color: var(--tm-ink);
  border-radius: 0 4px 4px 0;
}

.tm-prose ul, .tm-prose ol,
.prose ul, .prose ol {
  padding-left: 1.4em;
  margin: 1em 0;
}

.tm-prose li,
.prose li {
  margin-bottom: 0.5em;
  line-height: 1.85;
}

.tm-prose hr,
.prose hr {
  border: 0;
  text-align: center;
  margin: 3em 0;
  height: 1em;
  position: relative;
}
.tm-prose hr::before,
.prose hr::before {
  content: "・ ・ ・";
  color: var(--tm-stone);
  letter-spacing: 0.6em;
  font-size: 0.9em;
  opacity: 0.5;
}

/* ──────────────────────────────────────────────────────────────
   Tables — editorial clean (.tm-prose + .prose)
   ────────────────────────────────────────────────────────────── */
.tm-prose table,
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.95em;
  border: 1px solid var(--tm-line);
}
.tm-prose th, .tm-prose td,
.prose th, .prose td {
  padding: 0.7em 0.9em;
  border-bottom: 1px solid var(--tm-line);
  border-right: 1px solid var(--tm-line);
  text-align: left;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease;
}
.tm-prose th:last-child, .tm-prose td:last-child,
.prose th:last-child, .prose td:last-child {
  border-right: none;
}
.tm-prose th,
.prose th {
  background: var(--tm-bg-soft);
  font-weight: 500;
  color: var(--tm-forest);
  text-align: center;
}

/* B21 — Pricing table season colors (5-col):
   col 2 ハイ → forest | col 3 サマー → gold | col 4 オータム → lake | col 5 通常 → cream
*/
.tm-prose table th:nth-child(2),
.tm-prose table td:nth-child(2),
.prose table th:nth-child(2),
.prose table td:nth-child(2) {
  background-color: rgba(61, 90, 61, 0.08);
}
.tm-prose table th:nth-child(2),
.prose table th:nth-child(2) {
  background-color: rgba(61, 90, 61, 0.20);
  color: var(--tm-forest-deep);
}

.tm-prose table th:nth-child(3),
.tm-prose table td:nth-child(3),
.prose table th:nth-child(3),
.prose table td:nth-child(3) {
  background-color: rgba(216, 193, 151, 0.18);
}
.tm-prose table th:nth-child(3),
.prose table th:nth-child(3) {
  background-color: rgba(196, 165, 114, 0.30);
  color: #5e3f0a;   /* P1: era #7a5e2c 4.39:1 → ora ~6.5:1 AA+ */
  font-weight: 600;
}

.tm-prose table th:nth-child(4),
.tm-prose table td:nth-child(4),
.prose table th:nth-child(4),
.prose table td:nth-child(4) {
  background-color: rgba(74, 107, 122, 0.08);
}
.tm-prose table th:nth-child(4),
.prose table th:nth-child(4) {
  background-color: rgba(74, 107, 122, 0.22);
  color: var(--tm-lake-deep);
}

.tm-prose table th:nth-child(5),
.tm-prose table td:nth-child(5),
.prose table th:nth-child(5),
.prose table td:nth-child(5) {
  background-color: rgba(245, 241, 234, 0.6);
}
.tm-prose table th:nth-child(5),
.prose table th:nth-child(5) {
  background-color: rgba(235, 229, 216, 0.95);
}

/* Moe #7 — Row alternate stripe (zebra) per leggibilità */
.tm-prose table tbody tr:nth-child(even),
.prose table tbody tr:nth-child(even) {
  background-color: rgba(26, 26, 24, 0.025);
}

/* B22 + Moe #7 — Row hover EXCEL-LIKE (più scuro = focus chiaro) */
.tm-prose table tbody tr:hover td,
.prose table tbody tr:hover td {
  background-color: rgba(61, 90, 61, 0.22) !important;  /* forest 22% — scuro */
  color: var(--tm-forest-deep) !important;
  cursor: default;
  font-weight: 500;
}
.tm-prose table tbody tr:hover,
.prose table tbody tr:hover {
  box-shadow: inset 0 0 0 2px var(--tm-forest);
}

/* Moe #7 — Column hover (cell-level): show vertical highlight for the hovered cell.
   CSS-only: we tint the cell darker on hover (rest of column not affected without JS,
   ma il row+cell hover insieme dà già visual feedback Excel-like) */
.tm-prose table tbody td:hover,
.prose table tbody td:hover {
  background-color: rgba(61, 90, 61, 0.30) !important;
  font-weight: 600;
}

/* Mobile: pricing tables responsive */
@media (max-width: 720px) {
  .tm-prose table,
  .prose table {
    font-size: 0.85em;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tm-prose th, .tm-prose td,
  .prose th, .prose td {
    padding: 0.5em 0.6em;
    white-space: nowrap;
  }
}

/* ──────────────────────────────────────────────────────────────
   C27 — Home quick-nav pattern + hover refinement
   ────────────────────────────────────────────────────────────── */
.tm-quick-nav {
  position: relative;
  background-color: var(--tm-bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(61, 90, 61, 0.08) 1px, transparent 0);
  background-size: 24px 24px;
}

.tm-quick-nav__card {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease,
              background-color 0.25s ease;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
}

/* Featured card (ご予約) — uniforme con altri 7 card (bg bianco + testo
   scuro). Si evidenzia SOLO con border forest 2px + num gold scurito,
   no bg colorato (evita hover-color-invisible bug del theme). */
.tm-quick-nav__card--feature {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: var(--tm-forest) !important;
  border-width: 2px !important;
}
.tm-quick-nav__card--feature .tm-quick-nav__num,
.tm-quick-nav__card--feature .tm-quick-nav__name,
.tm-quick-nav__card--feature .tm-quick-nav__desc {
  color: inherit;
}
/* Override colori espliciti (battiamo theme + ereditarietà) */
.tm-quick-nav__card--feature .tm-quick-nav__num {
  color: var(--tm-gold) !important;
}
.tm-quick-nav__card--feature .tm-quick-nav__name {
  color: var(--tm-forest) !important;
  font-weight: 600;
}
.tm-quick-nav__card--feature .tm-quick-nav__desc {
  color: var(--tm-ink-2) !important;
}
/* Hover featured: SOLO border-color più scuro + shadow forest-tint.
   Nessun BG change, nessun text color change (evita invisibile). */
.tm-quick-nav__card--feature:hover {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--tm-forest-deep) !important;
  box-shadow:
    0 6px 24px rgba(61, 90, 61, 0.18),
    0 2px 6px rgba(26, 26, 24, 0.06);
}
.tm-quick-nav__card--feature:hover .tm-quick-nav__num {
  color: var(--tm-forest-deep) !important;
}
.tm-quick-nav__card--feature:hover .tm-quick-nav__name {
  color: var(--tm-forest-deep) !important;
}
.tm-quick-nav__card--feature:hover .tm-quick-nav__desc {
  color: var(--tm-ink) !important;
}

/* Moe #8 — hover color change SOLO su pricing table.
   Quick-nav cards: tengo lift + shadow + border-color (no BG color shift). */
.tm-quick-nav__card:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: var(--tm-gold) !important;
  box-shadow:
    0 6px 24px rgba(74, 107, 122, 0.18),
    0 2px 6px rgba(26, 26, 24, 0.06);
}

.tm-quick-nav__card:hover .tm-quick-nav__num {
  color: var(--tm-gold);
}

.tm-quick-nav__card:hover .tm-quick-nav__name {
  color: var(--tm-forest-deep);
}

.tm-quick-nav__card--feature:hover {
  border-color: var(--tm-forest) !important;
}

/* ──────────────────────────────────────────────────────────────
   C26 — Scroll-to-top button
   ────────────────────────────────────────────────────────────── */
.hw-scroll-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tm-forest);
  color: var(--tm-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-family: inherit;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, visibility 0.3s ease;
  box-shadow: 0 4px 14px rgba(26, 26, 24, 0.18);
}

.hw-scroll-top--visible {
  opacity: 0.9;
  visibility: visible;
  transform: translateY(0);
}

.hw-scroll-top:hover {
  background: var(--tm-forest-deep);
  opacity: 1;
  transform: translateY(-2px);
}

.hw-scroll-top:focus-visible {
  outline: 2px solid var(--tm-gold);
  outline-offset: 2px;
  opacity: 1;
}

@media print {
  .hw-scroll-top { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────
   Area map — SVG <object> wrapper responsive (1376×768 aspect)
   ──────────────────────────────────────────────────────────────
   <object> default behavior: fissato 300×150 se no width/height.
   Forziamo full-width + aspect-ratio per render corretto del map.
   <img> fallback usato se browser non carica SVG.
*/
.tm-area-map {
  margin: 2rem auto;
  width: 100%;
  max-width: 1000px;
}

.tm-area-map__svg {
  display: block;
  width: 100%;
  aspect-ratio: 1376 / 768;
  height: auto;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(26, 26, 24, 0.08);
  background: #f5f1ea;
}

.tm-area-map__svg img {
  width: 100%;
  height: auto;
  display: block;
}

.tm-area-map figcaption {
  margin-top: 0.8em;
  font-size: 0.9em;
  color: var(--tm-stone);
  letter-spacing: 0.03em;
  text-align: center;
  font-style: normal;
}

/* ──────────────────────────────────────────────────────────────
   C32 — Palette Forest-Lake APPLICATION
   ────────────────────────────────────────────────────────────── */

/* Links generici (no CTA, no nav) — lake-blue */
.tm-prose a,
.prose a,
.tm-section a,
.tm-card a {
  color: var(--tm-lake);
  text-decoration: underline;
  text-decoration-color: rgba(74, 107, 122, 0.35);
  text-underline-offset: 0.18em;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.tm-prose a:hover,
.prose a:hover,
.tm-section a:hover,
.tm-card a:hover {
  color: var(--tm-lake-deep);
  text-decoration-color: var(--tm-lake);
}

/* Eyebrow / kicker — lake-blue editorial */
.tm-hero__eyebrow,
.tm-section__kicker,
.tm-booking-kicker,
.tm-quick-nav__kicker {
  color: var(--tm-lake);
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  font-weight: 500;
}

/* CTA secondary outlined — lake-blue */
.tm-cta--secondary,
.tm-hero__cta--secondary,
.tm-booking__cta--secondary {
  background: transparent !important;
  color: var(--tm-lake) !important;
  border: 1px solid var(--tm-lake) !important;
}
.tm-cta--secondary:hover,
.tm-hero__cta--secondary:hover,
.tm-booking__cta--secondary:hover {
  background: var(--tm-lake) !important;
  color: var(--tm-bg) !important;
}

/* Sezioni alternate — cream-light per ritmo */
.tm-section:nth-of-type(even),
.tm-recipe-sections .tm-section:nth-of-type(even) {
  background-color: var(--tm-bg-elev);
}

/* Card hover shadow lake-tinted */
.tm-card:hover {
  box-shadow:
    0 6px 24px rgba(74, 107, 122, 0.15),
    0 2px 6px rgba(26, 26, 24, 0.06);
}

/* Footer legal links — FIX-7 AA contrast (era 1.31:1 → ora ~11:1 cream on
   forest-deep). Full opacity, underline visibile, hover gold-light (mantiene
   AA 4.5+). */
.tm-footer__links a {
  color: var(--tm-bg);
  text-decoration: underline;
  text-decoration-color: rgba(245, 241, 234, 0.55);
  text-underline-offset: 0.18em;
  transition: color 0.2s, text-decoration-color 0.2s;
  opacity: 1;
  font-weight: 500;
}
.tm-footer__links a:hover {
  color: var(--tm-gold-light);
  text-decoration-color: var(--tm-gold-light);
}

/* Booking form focus — lake-blue */
.tm-booking-form input:focus,
.tm-booking-form select:focus,
.tm-booking-form textarea:focus {
  border-color: var(--tm-lake) !important;
  box-shadow: 0 0 0 3px rgba(74, 107, 122, 0.15) !important;
}

/* FIX-5 — Honeypot truly hidden (Review P1 a11y/UX).
   Era visibile su mobile 216×49 a y=1461 → utenti non-tech rischio
   compilarlo e bloccare submit. Visually-hidden pattern WCAG-safe. */
.tm-form-field--trap {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Kanji→hiragana helper button (kuroshiro lazy load) */
.tm-form-input-with-action {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.tm-form-input-with-action input {
  flex: 1 1 auto;
  min-width: 0;
}
.tm-form-action-btn {
  flex: 0 0 auto;
  background: var(--tm-lake);
  color: var(--tm-bg);
  border: none;
  border-radius: 4px;
  padding: 0 1rem;
  font-family: var(--hw-mincho);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, opacity 0.18s;
  min-height: 44px;
}
.tm-form-action-btn:hover,
.tm-form-action-btn:focus-visible {
  background: var(--tm-lake-deep);
}
.tm-form-action-btn:focus-visible {
  outline: 2px solid var(--tm-gold);
  outline-offset: 2px;
}
.tm-form-action-btn:disabled,
.tm-form-action-btn[data-state="loading"] {
  opacity: 0.6;
  cursor: wait;
}
.tm-form-action-btn[data-state="success"] {
  background: var(--tm-forest);
}
@media (max-width: 540px) {
  .tm-form-input-with-action {
    flex-direction: column;
  }
  .tm-form-action-btn {
    width: 100%;
  }
}

/* FIX-7 — Submit button AA contrast (era gold bg + ink text fragile cascade).
   Bump specificity con !important per battere theme dna-glamping-jp.css */
.tm-booking-submit {
  background: var(--tm-forest) !important;
  color: var(--tm-bg) !important;
  border: none !important;
  padding: 0.85rem 2.2rem !important;
  border-radius: 4px !important;
  font-family: var(--hw-mincho) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
  min-height: 48px !important;
}
.tm-booking-submit:hover,
.tm-booking-submit:focus-visible {
  background: var(--tm-forest-deep) !important;
}
.tm-booking-submit:focus-visible {
  outline: 2px solid var(--tm-gold);
  outline-offset: 2px;
}
.tm-booking-submit:disabled {
  background: var(--tm-stone);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Topbar CTA — forest-deep on cream per AA contrast (era gold #9a7b3c on cream 3.53:1) */
.tm-topbar__cta {
  background: var(--tm-forest);
  color: var(--tm-bg);
}
.tm-topbar__cta:hover {
  background: var(--tm-forest-deep);
}

/* ──────────────────────────────────────────────────────────────
   FIX-3 — Hamburger as <button> 44×44 (Review P0 a11y)
   ──────────────────────────────────────────────────────────────
   Replace label/checkbox pattern with semantic <button>. JS toggles
   aria-expanded + sibling checkbox (for CSS state). Esc closes,
   click outside closes, focus management.
*/
.tm-topbar__hamburger {
  display: none;
  background: transparent;
  border: 1.5px solid transparent;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  flex-shrink: 0;            /* P1: era 39×44 perché flex container compressing */
  flex-grow: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.tm-topbar__hamburger:hover {
  background: rgba(26, 26, 24, 0.04);
}
.tm-topbar__hamburger:focus-visible {
  outline: 2px solid var(--tm-gold);
  outline-offset: 2px;
}
.tm-topbar__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--tm-ink);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.2s;
}
/* Animate to X when expanded (aria-expanded=true sync with checkbox via JS) */
.tm-topbar__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.tm-topbar__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.tm-topbar__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .tm-topbar__hamburger {
    display: inline-flex;
  }
}

/* Hide native checkbox (used only as CSS-no-JS fallback) */
.tm-topbar__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────
   Moe #4 — Mobile-only persistent CTA "ご予約" accanto al brand
   ──────────────────────────────────────────────────────────────
   Always-visible booking pill on mobile top bar (no need to open menu).
   Hidden on desktop (uses existing tm-topbar__cta--desktop).
*/
.tm-topbar__cta--mobile-pill {
  display: none;
}

@media (max-width: 900px) {
  .tm-topbar__cta--mobile-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 36px;
    padding: 0 0.85rem;
    border-radius: 18px;
    /* P0 AA contrast: gold #9a7b3c bg + cream era 3.54:1 → forest bg = 8.5+ */
    background: var(--tm-forest);
    color: var(--tm-bg);
    font-family: var(--hw-mincho);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-decoration: none;
    margin-left: auto;
    margin-right: 0.6rem;
    box-shadow: 0 2px 6px rgba(61, 90, 61, 0.30);
    transition: background 0.2s, transform 0.15s;
  }
  .tm-topbar__cta--mobile-pill:hover,
  .tm-topbar__cta--mobile-pill:focus-visible {
    background: var(--tm-forest-deep);
    transform: scale(0.97);
  }

  /* Compatta brand su mobile per fare spazio al pill + hamburger */
  .tm-topbar__brand {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 200px); /* lascia 200px per CTA + hamburger */
  }
}

@media (max-width: 380px) {
  /* Smartphone piccolissimi: testo CTA accorciato? per ora min-width più piccolo */
  .tm-topbar__cta--mobile-pill { min-width: 56px; padding: 0 0.7rem; font-size: 0.8rem; }
}

/* ──────────────────────────────────────────────────────────────
   Moe #5 — Pallina dorata "ご予約" nel mobile menu più grande
   ──────────────────────────────────────────────────────────────
   Bilanciamento font/pallina: ingrandisco cerchio gold + font + padding.
*/
@media (max-width: 900px) {
  .tm-topbar__cta--menu-big {
    min-width: 140px;
    min-height: 56px;
    padding: 0 1.5rem;
    border-radius: 28px;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-top: 1.5rem;
    align-self: center;
    box-shadow: 0 4px 14px rgba(154, 123, 60, 0.35);
  }
}

/* ──────────────────────────────────────────────────────────────
   Moe #3 — Mobile menu: TUTTE le voci visibili senza scroll interno
   ──────────────────────────────────────────────────────────────
   Reduce padding + line-height + nav items font per fittare 7+1 items
   in viewport 100dvh without scroll on smartphone 640-750px tall.
*/
@media (max-width: 900px) {
  .tm-topbar__nav {
    /* CRITICAL: theme dna-glamping-jp.css uses top:0+bottom:0 fixed, ma
       .tm-topbar ha backdrop-filter che crea containing block, collassando
       a 128px (altezza topbar) invece di 100vh. Force explicit height. */
    height: 100vh !important;
    height: 100dvh !important;
    padding: 4rem 1.2rem 1.5rem !important;
    gap: 0.2rem !important;
    -webkit-overflow-scrolling: touch;
  }
  .tm-topbar__nav a {
    font-size: 1.05rem !important;
    padding: 0.55rem 0 !important;
    line-height: 1.4 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Moe #1 — Parallax scroll su homepage hero + sezioni
   ──────────────────────────────────────────────────────────────
   Effetto: hero background scrolls slower than content (CSS-only via
   background-attachment fixed where supported, JS fallback per mobile).
   Sezioni cards/quick-nav: gentle reveal+lift on scroll (handled via
   .is-revealed class added by IntersectionObserver in body-end.html).

   Respects prefers-reduced-motion: disabilita TUTTI gli effects.
*/
@media (prefers-reduced-motion: no-preference) {
  /* Hero parallax — background fixed (subtle effect: hero bg sembra muoversi
     più lento del foreground content che scrolla normalmente). */
  .tm-hero,
  .tm-hero--editorial,
  .tm-hero--atmospheric {
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
  }

  /* Reveal-on-scroll: elements iniziano sotto + opacity 0, transitano su.
     Class .is-revealed aggiunta da JS quando element entra in viewport. */
  .tm-quick-nav__card,
  .tm-card,
  .tm-section__title,
  .tm-prose h2,
  .prose h2,
  .tm-recipe-card,
  .tm-area-map {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.4, 0.25, 1),
                transform 0.7s cubic-bezier(0.25, 0.4, 0.25, 1);
    will-change: opacity, transform;
  }

  .tm-quick-nav__card.is-revealed,
  .tm-card.is-revealed,
  .tm-section__title.is-revealed,
  .tm-prose h2.is-revealed,
  .prose h2.is-revealed,
  .tm-recipe-card.is-revealed,
  .tm-area-map.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Quick-nav cards: staggered reveal (delay incrementale per cards 1..8) */
  .tm-quick-nav__card:nth-child(1) { transition-delay: 0.05s; }
  .tm-quick-nav__card:nth-child(2) { transition-delay: 0.10s; }
  .tm-quick-nav__card:nth-child(3) { transition-delay: 0.15s; }
  .tm-quick-nav__card:nth-child(4) { transition-delay: 0.20s; }
  .tm-quick-nav__card:nth-child(5) { transition-delay: 0.25s; }
  .tm-quick-nav__card:nth-child(6) { transition-delay: 0.30s; }
  .tm-quick-nav__card:nth-child(7) { transition-delay: 0.35s; }
  .tm-quick-nav__card:nth-child(8) { transition-delay: 0.40s; }
}

@media (prefers-reduced-motion: reduce) {
  /* Hard override: nessuna animazione, nessun parallax, tutto immediato */
  .tm-hero { background-attachment: scroll !important; }
  .tm-quick-nav__card,
  .tm-card,
  .tm-section__title,
  .tm-prose h2, .prose h2,
  .tm-recipe-card,
  .tm-area-map {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Moe #9 — Scroll-triggered emphasize (strong/em/marker in body)
   ──────────────────────────────────────────────────────────────
   Quando un <strong> o <em> entra in viewport, animate underline +
   subtle marker fade-in. Triggered via .is-revealed class on parent.

   Trigger: paragrafi/headings con strong/em ricevono `.is-revealed` via
   IntersectionObserver. CSS animates a gold underline that "draws in"
   left-to-right under the emphasized text.
*/
@media (prefers-reduced-motion: no-preference) {
  .tm-prose p strong,
  .tm-prose li strong,
  .prose p strong,
  .prose li strong {
    background-image: linear-gradient(transparent 60%, rgba(216, 193, 151, 0) 60%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 0.8s cubic-bezier(0.25, 0.4, 0.25, 1) 0.2s;
    font-weight: 600;
    color: var(--tm-ink);
    padding: 0 0.1em;
  }

  .tm-prose p.is-revealed strong,
  .tm-prose li.is-revealed strong,
  .prose p.is-revealed strong,
  .prose li.is-revealed strong,
  .tm-prose p:has(strong).is-revealed strong,
  .prose p:has(strong).is-revealed strong {
    background-image: linear-gradient(transparent 60%, rgba(216, 193, 151, 0.55) 60%);
    background-size: 100% 100%;
  }
}

/* ──────────────────────────────────────────────────────────────
   Default Hugo layout (article.py-16 + .prose) — visual reset
   ──────────────────────────────────────────────────────────────
   Quando pages usano default single.html (Tailwind classes broken),
   applichiamo padding + max-width minimi per leggibilità.
*/
article.py-16 {
  padding: 4rem 0;
}
.max-w-4xl.mx-auto {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}
.px-4.sm\:px-6,
.sm\:px-6.lg\:px-8 {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}
.prose.max-w-none { max-width: none; }