/* =============================================================================
   components.css — komochan.jp
   Life adventurer / speaker / human development consultant — KOMO / 爰野寿美子
   ============================================================================= */

/*
  Sections:
   1. Site Navigation (.site-nav-primary)
   2. Footer (.site-footer)
   3. Buttons (.btn-primary / .btn-outline)
   4. Cards (.card)
   5. Section Label (.section-label)
   6. Read More Link (.read-more)
*/


/* =============================================================================
   1. SITE NAVIGATION — .site-nav-primary
   ============================================================================= */

/* ── Base shell ── */

.site-nav-primary {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;

  /* Backdrop blur for frosted-glass effect */
  background-color: rgba(254, 252, 249, 0.88);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  /* Thin bottom border */
  border-bottom: 1px solid var(--color-border-light);

  /* Smooth transition for scroll-based states */
  transition:
    background-color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

/* When page is scrolled — add a subtle shadow */
.site-nav-primary.is-scrolled {
  background-color: rgba(254, 252, 249, 0.96);
  box-shadow: 0 2px 16px rgba(45, 74, 62, 0.07);
}

/* Inner container */
.site-nav-primary__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--container-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* ── Brand / Logo ── */

.site-nav-primary__brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  line-height: 1;
}

.site-nav-primary__brand-en {
  font-family: var(--font-en-serif);
  font-size: 1.375rem;          /* 22px */
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-forest);
  text-transform: uppercase;
  line-height: 1;
  transition: color var(--transition-fast);
}

.site-nav-primary__brand-jp {
  font-family: var(--font-jp-serif);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  line-height: 1;
}

.site-nav-primary__brand:hover .site-nav-primary__brand-en,
.site-nav-primary__brand:focus-visible .site-nav-primary__brand-en {
  color: var(--color-terracotta);
}

/* ── Nav right area ── */

.site-nav-primary__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Nav links list (desktop) ── */

.site-nav-primary__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-primary__links li {
  margin: 0;
}

.site-nav-primary__link {
  font-family: var(--font-en-serif);
  font-size: var(--text-sm);        /* 14px */
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  position: relative;
  transition: color var(--transition-fast);

  /* Underline animation via pseudo-element */
  display: inline-flex;
  align-items: center;
}

.site-nav-primary__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-3);
  right: var(--space-3);
  height: 1px;
  background-color: var(--color-terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}

.site-nav-primary__link:hover,
.site-nav-primary__link:focus-visible {
  color: var(--color-forest);
}

.site-nav-primary__link:hover::after,
.site-nav-primary__link:focus-visible::after,
.site-nav-primary__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav-primary__link[aria-current="page"] {
  color: var(--color-forest);
}

/* ── Language switcher ── */

.site-nav-primary__lang {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.site-nav-primary__lang-btn {
  font-family: var(--font-en-serif);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
  line-height: 1.8;
}

.site-nav-primary__lang-btn:hover {
  color: var(--color-forest);
  background-color: var(--color-border-light);
}

.site-nav-primary__lang-btn.is-active {
  background-color: var(--color-forest);
  color: var(--color-cream);
}

/* Divider between JA / EN buttons */
.site-nav-primary__lang-btn + .site-nav-primary__lang-btn {
  border-left: 1px solid var(--color-border);
}

/* ── Hamburger button (mobile) ── */

.site-nav-primary__hamburger {
  display: none;               /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
  padding: var(--space-2);
  transition: background-color var(--transition-fast);
  margin-left: var(--space-2);
  flex-shrink: 0;
}

.site-nav-primary__hamburger:hover {
  background-color: var(--color-border-light);
}

/* Three bars */
.site-nav-primary__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--color-forest);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform var(--transition),
    opacity var(--transition),
    width var(--transition);
}

/* Animate to X when menu is open */
.site-nav-primary__hamburger[aria-expanded="true"] .site-nav-primary__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.site-nav-primary__hamburger[aria-expanded="true"] .site-nav-primary__bar:nth-child(2) {
  opacity: 0;
  width: 0;
}

.site-nav-primary__hamburger[aria-expanded="true"] .site-nav-primary__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Mobile menu panel ── */

.site-nav-primary__mobile-menu {
  display: none;               /* block via JS + media query */
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background-color: var(--color-near-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  overflow: hidden;

  /* Slide-down animation */
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--transition);
}

.site-nav-primary__mobile-menu.is-open {
  max-height: 600px;
  opacity: 1;
}

.site-nav-primary__mobile-inner {
  padding: var(--space-6) var(--container-px) var(--space-8);
}

/* Mobile nav links */
.site-nav-primary__mobile-links {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-nav-primary__mobile-links li {
  border-bottom: 1px solid var(--color-border-light);
}

.site-nav-primary__mobile-link {
  display: flex;
  align-items: center;
  font-family: var(--font-en-serif);
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  text-decoration: none;
  padding: var(--space-4) 0;
  transition: color var(--transition-fast);
}

.site-nav-primary__mobile-link::after {
  content: '→';
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.site-nav-primary__mobile-link:hover {
  color: var(--color-terracotta);
}

.site-nav-primary__mobile-link:hover::after {
  color: var(--color-terracotta);
  transform: translateX(4px);
}

.site-nav-primary__mobile-link[aria-current="page"] {
  color: var(--color-forest);
}

/* Mobile lang switcher */
.site-nav-primary__mobile-lang {
  display: flex;
  gap: var(--space-3);
}

/* ── Responsive breakpoints ── */

@media (max-width: 860px) {
  /* Hide desktop links and show hamburger */
  .site-nav-primary__links {
    display: none;
  }

  .site-nav-primary__lang {
    display: none;
  }

  .site-nav-primary__hamburger {
    display: flex;
  }

  .site-nav-primary__mobile-menu {
    display: block;
  }
}

/* Narrow mobile: tighten brand */
@media (max-width: 380px) {
  .site-nav-primary__brand-en {
    font-size: 1.125rem;
  }

  .site-nav-primary__brand-jp {
    display: none;
  }
}

/* Body padding compensation for fixed nav */
body {
  padding-top: var(--nav-height);
}


/* =============================================================================
   2. FOOTER — .site-footer
   ============================================================================= */

.site-footer {
  background-color: var(--color-forest);
  color: var(--color-cream);
  padding-block: var(--space-16) var(--space-10);
}

/* Inner grid */
.site-footer__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--container-px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-8);
}

/* Brand section */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__brand-en {
  font-family: var(--font-en-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-cream);
  line-height: 1;
}

.site-footer__brand-jp {
  font-family: var(--font-jp-serif);
  font-size: var(--text-sm);
  color: rgba(247, 243, 238, 0.65);
  letter-spacing: 0.08em;
}

.site-footer__tagline {
  font-family: var(--font-en-serif);
  font-size: var(--text-sm);
  color: rgba(247, 243, 238, 0.6);
  letter-spacing: 0.08em;
  font-style: italic;
  margin-top: var(--space-2);
}

/* Bottom bar — spans full width */
.site-footer__bottom {
  grid-column: 1 / -1;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(247, 243, 238, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Copyright text */
.site-footer__copyright {
  font-family: var(--font-en-serif);
  font-size: var(--text-xs);
  color: rgba(247, 243, 238, 0.5);
  letter-spacing: 0.06em;
}

/* Social links row */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(247, 243, 238, 0.2);
  color: rgba(247, 243, 238, 0.6);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  background-color: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: #fff;
}

/* Social icon (SVG or text fallback) */
.site-footer__social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Nav links in footer */
.site-footer__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav-link {
  font-family: var(--font-en-serif);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 243, 238, 0.55);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible {
  color: var(--color-gold);
}

/* Right column (social row on desktop) */
.site-footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
}

/* Responsive: stack on narrow screens */
@media (max-width: 680px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__right {
    align-items: flex-start;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =============================================================================
   3. BUTTONS — .btn-primary / .btn-outline
   ============================================================================= */

/* ── Shared base ── */

.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-en-serif);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-8);
  border: 1.5px solid transparent;
  line-height: 1.6;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
}

.btn-primary:focus-visible,
.btn-outline:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Disabled state */
.btn-primary:disabled,
.btn-outline:disabled,
.btn-primary[aria-disabled="true"],
.btn-outline[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Size variants */
.btn-primary--sm,
.btn-outline--sm {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-5);
}

.btn-primary--lg,
.btn-outline--lg {
  font-size: var(--text-base);
  padding: var(--space-4) var(--space-10);
}

/* ── Primary: terracotta filled ── */

.btn-primary {
  background-color: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: #fff;
  box-shadow: 0 2px 8px rgba(200, 85, 61, 0.20);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-terra-dark);
  border-color: var(--color-terra-dark);
  box-shadow: 0 4px 16px rgba(200, 85, 61, 0.28);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  background-color: var(--color-terra-dark);
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(200, 85, 61, 0.15);
}

/* ── Outline: transparent with terracotta border ── */

.btn-outline {
  background-color: transparent;
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--color-terracotta);
  color: #fff;
  box-shadow: 0 4px 16px rgba(200, 85, 61, 0.20);
  transform: translateY(-1px);
}

.btn-outline:active:not(:disabled) {
  background-color: var(--color-terra-dark);
  border-color: var(--color-terra-dark);
  color: #fff;
  transform: translateY(0);
  box-shadow: none;
}

/* Outline on dark background (e.g. inside forest-green sections) */
.btn-outline--light {
  border-color: var(--color-cream);
  color: var(--color-cream);
}

.btn-outline--light:hover:not(:disabled) {
  background-color: var(--color-cream);
  color: var(--color-forest);
}

/* ── Button with icon arrow ── */

.btn-primary .btn-arrow,
.btn-outline .btn-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.btn-primary:hover .btn-arrow,
.btn-outline:hover .btn-arrow {
  transform: translateX(4px);
}


/* =============================================================================
   4. CARDS — .card
   ============================================================================= */

.card {
  position: relative;
  background-color: var(--color-card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow var(--transition),
    transform var(--transition),
    border-color var(--transition);
}

/* Hover lift */
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--color-border);
}

/* Card image area */
.card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--color-border-light);
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card__image img {
  transform: scale(1.04);
}

/* Card body */
.card__body {
  padding: var(--space-6);
}

.card__body--sm {
  padding: var(--space-4);
}

.card__body--lg {
  padding: var(--space-8);
}

/* Card meta (date, category, etc.) */
.card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  font-family: var(--font-en-serif);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Card category badge */
.card__category {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  background-color: rgba(200, 85, 61, 0.08);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

/* Card title */
.card__title {
  font-family: var(--font-jp-serif);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-normal);
}

.card__title-en {
  font-family: var(--font-en-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* Card description */
.card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer */
.card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Linked card overlay — entire card is clickable */
.card--linked {
  cursor: pointer;
}

.card--linked a.card__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
}

/* Featured card variant */
.card--featured {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 1px var(--color-gold), var(--shadow-sm);
}

.card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-terracotta), var(--color-gold));
}

/* Horizontal card variant */
.card--horizontal {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.card--horizontal .card__image {
  aspect-ratio: unset;
  height: 100%;
}

@media (max-width: 560px) {
  .card--horizontal {
    grid-template-columns: 1fr;
  }

  .card--horizontal .card__image {
    aspect-ratio: 16 / 9;
  }
}


/* =============================================================================
   5. SECTION LABEL — .section-label
   ============================================================================= */

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-en-serif);
  font-size: var(--text-xs);
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1;
}

/* Left decorative line */
.section-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background-color: var(--color-terracotta);
  flex-shrink: 0;
}

/* Centered variant — line on both sides */
.section-label--center {
  display: flex;
  justify-content: center;
}

.section-label--center::before {
  content: '';
  width: 24px;
}

.section-label--center::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--color-terracotta);
  flex-shrink: 0;
}

/* Gold accent variant */
.section-label--gold {
  color: var(--color-gold);
}

.section-label--gold::before,
.section-label--gold::after {
  background-color: var(--color-gold);
}

/* On dark backgrounds */
.section-label--light {
  color: rgba(247, 243, 238, 0.6);
}

.section-label--light::before,
.section-label--light::after {
  background-color: var(--color-gold);
}

/* Long line variant (section divider feel) */
.section-label--wide::before {
  width: 56px;
}

/* Japanese text variant — use JP font */
.section-label--jp {
  font-family: var(--font-jp-serif);
  font-variant: normal;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
}


/* =============================================================================
   6. READ MORE LINK — .read-more
   ============================================================================= */

.read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-en-serif);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
  text-decoration: none;
  padding-bottom: 1px;

  /* Underline as a border */
  border-bottom: 1px solid var(--color-border);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    gap var(--transition-fast);
}

/* Arrow */
.read-more::after {
  content: '→';
  display: inline-block;
  font-style: normal;
  color: var(--color-text-muted);
  transition:
    transform var(--transition-fast),
    color var(--transition-fast);
  line-height: 1;
}

.read-more:hover,
.read-more:focus-visible {
  color: var(--color-terracotta);
  border-bottom-color: var(--color-terracotta);
  gap: var(--space-3);
}

.read-more:hover::after,
.read-more:focus-visible::after {
  color: var(--color-terracotta);
  transform: translateX(3px);
}

/* Japanese variant */
.read-more--jp {
  font-family: var(--font-jp-serif);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
}

.read-more--jp::after {
  content: '→';
  font-family: sans-serif;
}

/* Bare variant — no underline, more minimal */
.read-more--bare {
  border-bottom: none;
  padding-bottom: 0;
}

.read-more--bare:hover,
.read-more--bare:focus-visible {
  border-bottom: none;
}

/* On dark backgrounds */
.read-more--light {
  color: rgba(247, 243, 238, 0.7);
  border-bottom-color: rgba(247, 243, 238, 0.2);
}

.read-more--light::after {
  color: rgba(247, 243, 238, 0.5);
}

.read-more--light:hover,
.read-more--light:focus-visible {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

.read-more--light:hover::after,
.read-more--light:focus-visible::after {
  color: var(--color-gold);
}