/* ============================================================
   BeforeJapan — Stylesheet (Tailwind companion)
   Only rules that Tailwind utilities cannot replace:
   CSS custom properties, pseudo-elements, sibling selectors,
   vendor prefixes, counters, animations, backdrop-filter.
   ============================================================ */

/* ------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   ------------------------------------------------------------ */
:root {
  --ink: #1a1a1a;
  --paper: #FAFAF7;
  --warm: #F5F3EE;
  --stone: #8B8680;
  --stone-light: #C8C3BC;
  --vermillion: #C84B31;
  --vermillion-soft: rgba(200, 75, 49, 0.08);
  --gold: #B8860B;
  --green: #2D6A4F;
  --green-soft: rgba(45, 106, 79, 0.06);
  --indigo: #2B3A67;

  --do: #2D6A4F;
  --do-bg: rgba(45, 106, 79, 0.06);
  --dont: #C0392B;
  --dont-bg: rgba(192, 57, 43, 0.06);

  /* Pillar color — overridden via inline style per page */
  --pillar-color: #C84B31;
  --pillar-soft: rgba(200, 75, 49, 0.08);
  --pillar-light: rgba(200, 75, 49, 0.12);
  --pillar-bg: rgba(200, 75, 49, 0.04);
}


/* ------------------------------------------------------------
   2. Reset & Base (preflight is disabled)
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}


/* ------------------------------------------------------------
   3. Navigation — backdrop-filter, animated underline, mobile
   ------------------------------------------------------------ */
.nav {
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--pillar-color, var(--vermillion));
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-mobile-toggle span {
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
}


/* ------------------------------------------------------------
   4. Newsletter Panel — transform animation
   ------------------------------------------------------------ */
.newsletter-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: white;
  transform: translateY(-100%);
  transition: transform 0.3s;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.newsletter-panel.open {
  transform: translateY(0);
}

.nl-input:focus {
  outline: none;
  border-color: var(--pillar-color);
  box-shadow: 0 0 0 3px var(--pillar-soft);
}

.nl-btn {
  background: var(--pillar-color, var(--vermillion));
}


/* ------------------------------------------------------------
   5. Progress Bar — fixed, JS-driven width
   ------------------------------------------------------------ */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--pillar-color, var(--vermillion));
  z-index: 201;
  width: 0;
  transition: width 0.1s;
}


/* ------------------------------------------------------------
   6. clamp() Font Sizes (can't express in Tailwind)
   ------------------------------------------------------------ */
.home-hero-title {
  font-size: clamp(40px, 6vw, 68px);
}

.pillar-title {
  font-size: clamp(32px, 5vw, 52px);
}


/* ------------------------------------------------------------
   6b. Hero Parallax & Photo Banners
   ------------------------------------------------------------ */
.hero-parallax-bg {
  background-attachment: fixed;
}

/* Disable parallax on mobile (performance) */
@media (max-width: 767px) {
  .hero-parallax-bg {
    background-attachment: scroll;
  }
}

/* Smooth bounce animation for scroll indicator */
@keyframes bounce {
  0%, 100% { transform: translateY(0) translateX(-50%); }
  50% { transform: translateY(8px) translateX(-50%); }
}
.animate-bounce {
  animation: bounce 2s ease-in-out infinite;
}


/* ------------------------------------------------------------
   7. Pillar-Color Dynamic Rules
   ------------------------------------------------------------ */

/* TOC active state */
.toc-link.active {
  color: var(--pillar-color);
  border-left-color: var(--pillar-color);
  background: var(--pillar-soft);
  font-weight: 600;
}

/* Pillar stat numbers */
.pillar-stat-num {
  color: var(--pillar-color);
}

/* Article body links */
.body-p a {
  color: var(--pillar-color);
  text-decoration: underline;
}

/* Cluster card arrow hover */
.cluster-card:hover .cluster-card-arrow {
  transform: translateX(4px);
  color: var(--pillar-color);
}

/* Cluster tag */
.cluster-tag {
  background: var(--pillar-soft);
  color: var(--pillar-color);
}


/* ------------------------------------------------------------
   8. Article Body — CSS counters
   ------------------------------------------------------------ */
.h2-num-auto::before {
  content: counter(heading-counter, decimal-leading-zero);
}

.h2-num {
  color: var(--pillar-color);
}


/* ------------------------------------------------------------
   9. Block Templates — pillar-color & pseudo-elements
   ------------------------------------------------------------ */

/* Callout variants using pillar-color */
.callout-etiquette {
  background: var(--pillar-soft);
  border-left-color: var(--pillar-color);
}

.callout-cost,
.callout-budget {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--pillar-color);
}

/* Cost table highlight row */
.cost-row-highlight {
  background: var(--pillar-soft);
}
.cost-row-highlight .cost-amount {
  color: var(--pillar-color);
  font-weight: 700;
}

/* Step-by-step — pillar-color number circles */
.step-num {
  background: var(--pillar-soft);
  color: var(--pillar-color);
}

.step-jp {
  color: var(--pillar-color);
}

/* Food card — Japanese text */
.food-card-jp {
  color: var(--pillar-color);
}

/* Route visual — dashed line pseudo-element */
.route-stop:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--stone-light) 0,
    var(--stone-light) 4px,
    transparent 4px,
    transparent 8px
  );
}

.route-time {
  color: var(--pillar-color);
  background: var(--pillar-soft);
}

/* Meal breakdown — pillar-color header */
.meal-box-header {
  background: var(--pillar-color);
}

.meal-row-total {
  background: var(--pillar-soft);
}
.meal-row-total strong {
  color: var(--pillar-color);
}

/* Checklist — sibling selectors (can't do in Tailwind) */
.checklist-check:checked + .checklist-box {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

.checklist-check:checked + .checklist-box::after {
  content: '\2713';
  color: white;
  font-size: 14px;
}

.checklist-check:checked ~ .checklist-text {
  color: var(--stone);
  text-decoration: line-through;
}

/* FAQ accordion — JS .open state toggle */
.faq-item.open .faq-answer {
  display: block;
}

.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}


/* ------------------------------------------------------------
   10. Tools Page — range input, result total, pack states
   ------------------------------------------------------------ */

/* Range slider — vendor-prefixed thumb */
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  outline: none;
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pillar-color);
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.calc-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pillar-color);
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Result total — pillar-color text */
.result-total .result-num {
  color: white;
}
.result-total .result-usd {
  color: rgba(255, 255, 255, 0.8);
}
.result-total .result-label {
  color: rgba(255, 255, 255, 0.7);
}

/* Tool nav card active */
.tool-nav-card.active {
  background: #F2FAF8;
  border-color: #0F7B6C;
  box-shadow: 0 4px 20px rgba(15, 123, 108, 0.1);
}

/* Pack tab active — pillar-color */
.pack-tab.active {
  background: var(--pillar-color);
  color: white;
  border-color: var(--pillar-color);
}

/* Pack item checked (JS class) */
.pack-item.checked .pack-item-text {
  text-decoration: line-through;
  color: var(--stone);
}

/* Pack progress fill */
.pack-progress-fill {
  background: var(--pillar-color);
}

/* JR verdict (JS-generated) */
.jr-verdict {
  margin-top: 20px;
  padding: 20px;
  border-radius: 14px;
  border: 2px solid;
}
.jr-verdict-positive {
  border-color: var(--green);
  background: var(--do-bg);
}
.jr-verdict-negative {
  border-color: var(--dont);
  background: var(--dont-bg);
}

/* Coming soon */
.coming-soon {
  border: 2px dashed rgba(0, 0, 0, 0.1);
}


/* ------------------------------------------------------------
   11. Phrases Page — cat-tab, difficulty badges
   ------------------------------------------------------------ */
.cat-tab.active {
  background: #5C4B8A;
  color: white;
  border-color: #5C4B8A;
}

.diff-easy {
  background: var(--do-bg);
  color: var(--do);
}

.diff-medium {
  background: #FFF3E0;
  color: #E65100;
}

/* Phrase empty state (JS-toggled) */
.phrase-empty {
  display: none;
}


/* ------------------------------------------------------------
   12. Guides Index — pillar-tab, tag-btn, filter
   ------------------------------------------------------------ */
.filter-section {
  position: sticky;
  top: 56px;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.pillar-tab.active {
  color: white;
  border-color: transparent;
}

.tag-btn.active {
  background: var(--vermillion);
  color: white;
}


/* ------------------------------------------------------------
   13. Animations — fade-in / stagger
   ------------------------------------------------------------ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }


/* ------------------------------------------------------------
   14. Responsive — Mobile nav
   ------------------------------------------------------------ */
/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  .nav-links {
    display: none;
  }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: rgba(250, 250, 247, 0.98);
    backdrop-filter: blur(20px);
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    gap: 12px;
    z-index: 100;
  }
}