/* Mobile-First Excellence - Enhanced Touch Experience */

/* ===== TOUCH OPTIMIZATION ===== */
/* Minimum tap target: 44x44px (Apple HIG, Material Design) */
a, button, .btn, .stores-open, .category-item, .news-item,
.secondary-card, .primary-card, #hamburger-menu, .store-detail-btn,
.telreserve-link, .memorial, .order-button,
.more-center a, .link-list a {
  min-height: 44px;
  min-width: 44px;
}

/* Disable text selection only on buttons, not links */
button, .btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Links should allow text selection for better UX */
a {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Re-enable for text content */
p, span, h1, h2, h3, h4, h5, h6, li {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Base font size handled in theme-base.css */
html {
  scroll-padding-top: 60px; /* Account for fixed header */
}

body {
  line-height: 1.7; /* Better mobile reading comfort */
}

/* ===== ENHANCED TOUCH TARGETS ===== */
/* Base button styles in theme-base.css */
.store-detail-btn,
.memorial,
.telreserve-link,
.order-button {
  min-height: var(--btn-height-sm); /* 44px - minimum touch target */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--btn-padding-x-sm);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .store-detail-btn,
  .memorial,
  .telreserve-link,
  .order-button {
    min-height: var(--btn-height-md); /* 48px */
    padding: var(--sp-14, 0.875rem) var(--btn-padding-x-md);
    font-size: var(--fs-base);
  }
}

@media (min-width: 1024px) {
  .store-detail-btn,
  .memorial,
  .telreserve-link,
  .order-button {
    min-height: var(--btn-height-lg); /* 56px */
    padding: var(--sp-16) var(--btn-padding-x-lg);
    font-size: var(--fs-md);
  }
}

/* Hamburger menu button - Enhanced visibility - Smaller size */
#hamburger-menu {
  width: 36px !important; /* 小さく: 48px → 36px */
  height: 36px !important; /* 小さく: 48px → 36px */
  padding: 6px !important; /* 小さく: 12px → 6px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px; /* gapも縮小 */
  -webkit-tap-highlight-color: rgba(138, 106, 63, 0.2);
  background: rgba(138, 106, 63, 0.03); /* 微かな背景色 */
  border: 1px solid rgba(138, 106, 63, 0.1); /* ボーダー */
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  margin-left: auto; /* 右寄せ */
}

#hamburger-menu:hover {
  background: rgba(138, 106, 63, 0.08);
  border-color: rgba(138, 106, 63, 0.2);
}

#hamburger-menu span {
  width: 24px; /* ボタンサイズに合わせて縮小: 28px → 24px */
  height: 2px; /* 細く: 3px → 2px */
  background: var(--color-primary); /* 濃い青で明確に表示 */
  border-radius: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15); /* 影を追加 */
}

/* ===== ENHANCED MOBILE NAVIGATION ===== */
.offcanvas-panel {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.offcanvas-inner {
  padding: var(--sp-20);
  padding-bottom: var(--sp-80); /* Space for scrolling */
}

/* Category items in mobile menu */
.category-grid {
  gap: 12px;
}

.category-item {
  background: #f8f9fa;
  border-radius: var(--radius-lg);
  padding: var(--sp-16);
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
  text-decoration: none;
  min-height: 5rem; /* 80px */
}

.category-item:active {
  background: #e9ecef;
  transform: scale(0.98);
}

.category-item .thumb {
  width: 100%;
  height: 60px;
  margin-bottom: 8px;
  border-radius: 8px;
}

.category-item span {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

/* Link lists in mobile menu */
.link-list a {
  padding: var(--sp-16) 0;
  font-size: var(--fs-base);
  min-height: var(--btn-height-lg); /* 56px */
}

/* ===== ENHANCED HERO SLIDER ===== */
.hero-slider-modern {
  margin-top: 0;
}

/* Hero slick-dots styles moved to home-modern.css for consistency */

/* ===== ENHANCED CARDS FOR MOBILE ===== */
.card,
.news-item,
.secondary-card,
.primary-card {
  margin-bottom: 16px;
}

.primary-card,
.secondary-card {
  min-height: 200px;
}

.news-item .card-body {
  padding: 20px;
  font-size: var(--fs-base);
  line-height: 1.7;
}

/* Typography scaling handled in theme-base.css - removing duplicates */

/* Button styles handled in theme-base.css */
/* Mobile-specific button enhancements */
.btn:active,
.btn-primary:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* ===== PRODUCT GRID MOBILE ===== */
.item-grid {
  gap: 12px;
  margin-bottom: 24px;
}

.item {
  border-radius: 12px;
  overflow: hidden;
}

.item-image {
  background: #f5f5f5;
}

.item-title {
  padding: 16px;
  min-height: 60px;
}

.item-title h3 {
  font-size: var(--fs-base);
  line-height: 1.5;
}

/* ===== ENHANCED POPUP FOR MOBILE ===== */
.stores-popup[aria-hidden="false"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
}

.stores-popup-content {
  width: calc(100vw - 32px);
  max-height: 85vh;
  margin: 0 auto;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  align-self: center;
}

.stores-popup-header {
  padding: var(--sp-32) var(--sp-24);
}

.stores-popup-icon {
  width: 64px;
  height: 64px;
}

.stores-popup-body {
  padding: var(--sp-24);
  max-height: 350px;
  overflow-y: auto;
}

.store-info-row {
  padding: 18px;
  min-height: 70px;
}

.store-info-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.store-info-label {
  font-size: var(--fs-xsmall);
  margin-bottom: 6px;
}

.store-info-value {
  font-size: var(--fs-base);
}

.store-detail-btn {
  width: calc(100% - 32px);
  margin: 0 16px;
  padding: 18px 32px;
  font-size: var(--fs-base);
  min-height: 56px;
}

/* ===== ENHANCED NEWS SECTION ===== */
.news-grid {
  gap: 16px;
}

.news-item {
  min-height: 120px;
}

.news-item .date {
  font-size: var(--fs-small);
  padding: 8px 0;
}

.news-item .content {
  font-size: var(--fs-base);
  line-height: 1.8;
}

/* ===== ENHANCED PRODUCT DETAIL PAGE ===== */
.item-content {
  padding: 20px 16px;
}

.product-image {
  margin-bottom: 24px;
}

.product-info h1 {
  font-size: var(--fs-xl);
  margin-bottom: 16px;
}

.price {
  font-size: var(--fs-h3);
  margin: 20px 0;
}

.memorial,
.telreserve-link,
.order-button {
  width: 100%;
  padding: 16px 28px;
  font-size: var(--fs-base);
  min-height: 56px;
  margin: 8px 0;
}

/* ===== ENHANCED FORMS ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  font-size: var(--fs-base); /* Prevents zoom on iOS */
  padding: 14px 16px;
  min-height: 44px;
  border-radius: 8px;
}

/* ===== FOOTER MOBILE ===== */
.footer-modern {
  padding: 32px 16px 24px;
}

.footer-modern .cols {
  gap: 20px;
}

.footer-modern h4 {
  font-size: var(--fs-xsmall);
  margin-bottom: 8px;
}

.footer-modern ul li a {
  font-size: var(--fs-small);
}

/* ===== ENHANCED LIST ITEMS ===== */
.menu-primary a,
.menu-secondary a {
  padding: 16px;
  border-radius: 12px;
}

.pc-body,
.sc-meta {
  padding: 16px;
}

/* ===== SPACING OPTIMIZATION ===== */
.site-section {
  overflow-x: hidden; /* Prevent horizontal scrolling */
  /* Padding handled in theme-base.css */
}

.site-container {
  /* Padding handled in theme-base.css */
  max-width: 100%;
}

.section-title-wrap {
  margin-bottom: var(--sp-24);
  padding: 0 var(--sp-8);
}

@media (min-width: 768px) {
  .section-title-wrap {
    margin-bottom: var(--sp-32);
  }
}

/* ===== IMPROVED MOBILE GRID ===== */
@media (max-width: 640px) {
  .menu-primary {
    gap: 12px;
  }
  
  .menu-secondary {
    gap: 12px;
  }
  
  .item-grid {
    gap: 12px;
  }
  
  .news-grid {
    gap: 16px;
  }
  
  .stores-grid {
    gap: 12px;
  }
}

/* ===== IMPROVED CARDS ON MOBILE ===== */
@media (max-width: 640px) {
  .primary-card {
    min-height: 220px;
    border-radius: 12px;
  }
  
  .secondary-card {
    min-height: 180px;
    border-radius: 12px;
  }
  
  .news-item {
    min-height: 100px;
  }
  
  .pc-body {
    padding: 16px;
  }
  
  .sc-meta {
    padding: 16px;
  }
}

/* ===== ENHANCED READABILITY ===== */
p, .content, .store-info-value {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--color-text);
}

.news-item .content,
.product-description {
  font-size: var(--fs-base);
  line-height: 1.8;
}

/* ===== SAFE AREA SUPPORT FOR NOTCH DEVICES ===== */
@supports (padding: max(0px)) {
  .site-header-inner,
  .site-section {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  
  .fixed-header {
    padding-top: max(8px, env(safe-area-inset-top));
  }
  
  #footer {
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
}

/* ===== ENHANCED IMAGES ===== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent image squishing */
.hero-slider img,
.category-card img,
.product-image img {
  width: 100%;
  object-fit: cover;
}

/* ===== SCROLLING SMOOTHNESS ===== */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.offcanvas-inner,
.stores-popup-body {
  -webkit-overflow-scrolling: touch;
}

/* ===== TAP HIGHLIGHT ===== */
a, button, .btn {
  -webkit-tap-highlight-color: rgba(211, 181, 140, 0.2);
  tap-highlight-color: rgba(211, 181, 140, 0.2);
}

/* ===== FOCUS INDICATORS FOR KEYBOARD NAVIGATION ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== UTILITY CLASSES ===== */
.mobile-only {
  display: block;
}

.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  
  .desktop-only {
    display: block;
  }
}

/* ===== PERFORMANCE ===== */
/* GPU acceleration for smooth animations */
.hero-slider,
.item,
.card,
.category-item,
.btn,
.stores-popup-content {
  will-change: transform;
  transform: translateZ(0);
}

/* Reduce animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}