/* Launch fixes for hairsalonbob.jp */

/* WordPress admin bar should never cover the fixed site header. */
body.admin-bar #site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar #site-header { top: 46px; }
}

/* Avoid the desktop nav becoming cramped on tablets / split-screen windows. */
@media (max-width: 1180px) {
  #site-header {
    background: rgba(255,255,255,0.97);
    border-bottom-color: var(--line);
    backdrop-filter: blur(12px);
  }
  #site-header .inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .site-logo,
  #site-header.scrolled .site-logo {
    color: var(--ink);
    white-space: nowrap;
  }
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .nav-toggle span,
  #site-header.scrolled .nav-toggle span { background: var(--ink); }
  .header-tel { display: none; }
  .header-cta { margin-left: auto; }
  .header-cta .btn {
    padding: 0.55rem 1rem;
    white-space: nowrap;
  }
  #hero { padding-top: 64px; }
}

@media (max-width: 640px) {
  #site-header { height: 58px; }
  #site-header .inner { padding-left: 1rem; padding-right: 1rem; }
  .site-logo { font-size: 0.9rem; letter-spacing: 0.18em; }
  .header-cta { gap: 0.4rem; }
  .header-cta .btn {
    padding: 0.48rem 0.7rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }
  .nav-toggle { padding-left: 0.25rem; }
  #hero { padding-top: 58px; min-height: 620px; }
  .hero-body { padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 4.5rem; }
  .hero-title { font-size: clamp(1.8rem, 9vw, 2.5rem); }
  .hero-sub br { display: none; }
  .mobile-nav { padding: 4.5rem 1.25rem 2rem; overflow-y: auto; }
  .mobile-nav-links { gap: 1rem; }
  .mobile-nav-links a { font-size: 1rem; }
}

/* Internal pages should not inherit white-on-transparent header text. */
body:not(.home) #site-header {
  background: rgba(255,255,255,0.97);
  border-bottom-color: var(--line);
}
body:not(.home) .site-logo,
body:not(.home) .site-nav a,
body:not(.home) .header-tel { color: var(--ink2); }
body:not(.home) .nav-toggle span { background: var(--ink); }

/* Improve keyboard focus visibility for navigation / CTAs. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

/* Headspa LP: static-photo fallback. The tiny generated sprite is intentionally hidden. */
.headspa-lp .headspa-collage { display: none !important; }
.headspa-lp .headspa-scenes {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 0 !important;
}
.headspa-lp .headspa-sprite {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  aspect-ratio: 4 / 3 !important;
  background-color: #eceee9 !important;
}
.headspa-lp .headspa-sprite-1 {
  background-image: url('../img/toushinyoku-20260916.jpg') !important;
  background-size: contain !important;
}
.headspa-lp .headspa-sprite-2 { background-image: url('../img/headspa-slide-2.jpg') !important; }
.headspa-lp .headspa-sprite-5 { background-image: url('../img/headspa-slide-3.jpg') !important; }
.headspa-lp .headspa-video-grid,
.headspa-lp video { display: none !important; }
@media (max-width: 640px) {
  .headspa-lp .headspa-scenes { grid-template-columns: 1fr !important; gap: 22px !important; }
  .headspa-lp .headspa-sprite { aspect-ratio: 16 / 10 !important; }
}

/* Keep the full portrait visible in the dedicated head-bath section. */
.headspa-lp #headspa-toushinyoku .headspa-sprite-1 {
  aspect-ratio: 934 / 1536 !important;
  max-width: 360px;
  margin: 0 auto;
}

/* Home journal: compact thumbnail rows on phones; keep desktop cards unchanged. */
@media (max-width: 640px) {
  body.home #blog .blog-grid { gap: 12px; }
  body.home #blog .blog-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
  }
  body.home #blog .blog-card-img {
    display: block;
    width: 88px;
    height: 88px;
  }
  body.home #blog .blog-card-body { min-width: 0; padding: 0; }
  body.home #blog .blog-card-cat-label {
    margin-bottom: 4px;
    padding: 2px 6px;
    letter-spacing: 0.04em;
  }
  body.home #blog .blog-card-date { margin-bottom: 4px; letter-spacing: 0.08em; }
  body.home #blog .blog-card-title {
    margin-bottom: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
  }
  body.home #blog .blog-card-text { display: none; }
}