/**
 * shiki-so Kadence Child Theme - Custom Styles
 */

/* ========================================
   Google Fonts - Noto Sans JP
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

/* ========================================
   Theme.json Color Variables (Kadence override fix)
   Kadence's global palette does not include these,
   so we define them explicitly.
   ======================================== */

:root {
  --wp--preset--color--base: #f9f9f9;
  --wp--preset--color--base-2: #ffffff;
  --wp--preset--color--contrast: #111111;
  --wp--preset--color--contrast-2: #636363;
  --wp--preset--color--contrast-3: #A4A4A4;
  --wp--preset--color--tertiary: #f5f5f5;
  --wp--preset--color--accent: #cfcabe;
  --wp--preset--color--primary-blue: #007cba;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--color--dark-blue: #005a87;
  --wp--preset--color--memo-cyan: #00E0E9;
  --wp--preset--color--memo-coral: #FF5E5E;
  --wp--preset--color--memo-yellow: #FFE45C;
  --wp--preset--color--memo-gray: #E9E9E9;
}

.has-base-background-color { background-color: var(--wp--preset--color--base) !important; }
.has-base-2-background-color { background-color: var(--wp--preset--color--base-2) !important; }
.has-contrast-background-color { background-color: var(--wp--preset--color--contrast) !important; }
.has-contrast-2-background-color { background-color: var(--wp--preset--color--contrast-2) !important; }
.has-contrast-3-background-color { background-color: var(--wp--preset--color--contrast-3) !important; }
.has-tertiary-background-color { background-color: var(--wp--preset--color--tertiary) !important; }
.has-primary-blue-background-color { background-color: var(--wp--preset--color--primary-blue) !important; }
.has-vivid-cyan-blue-background-color { background-color: var(--wp--preset--color--vivid-cyan-blue) !important; }
.has-dark-blue-background-color { background-color: var(--wp--preset--color--dark-blue) !important; }
.has-memo-cyan-background-color { background-color: var(--wp--preset--color--memo-cyan) !important; }
.has-memo-coral-background-color { background-color: var(--wp--preset--color--memo-coral) !important; }
.has-memo-yellow-background-color { background-color: var(--wp--preset--color--memo-yellow) !important; }
.has-memo-gray-background-color { background-color: var(--wp--preset--color--memo-gray) !important; }

.has-base-color { color: var(--wp--preset--color--base) !important; }
.has-base-2-color { color: var(--wp--preset--color--base-2) !important; }
.has-contrast-color { color: var(--wp--preset--color--contrast) !important; }
.has-contrast-2-color { color: var(--wp--preset--color--contrast-2) !important; }
.has-contrast-3-color { color: var(--wp--preset--color--contrast-3) !important; }
.has-tertiary-color { color: var(--wp--preset--color--tertiary) !important; }
.has-primary-blue-color { color: var(--wp--preset--color--primary-blue) !important; }
.has-vivid-cyan-blue-color { color: var(--wp--preset--color--vivid-cyan-blue) !important; }
.has-dark-blue-color { color: var(--wp--preset--color--dark-blue) !important; }
.has-memo-cyan-color { color: var(--wp--preset--color--memo-cyan) !important; }
.has-memo-coral-color { color: var(--wp--preset--color--memo-coral) !important; }
.has-memo-yellow-color { color: var(--wp--preset--color--memo-yellow) !important; }
.has-memo-gray-color { color: var(--wp--preset--color--memo-gray) !important; }

/* ========================================
   Global Enhancements
   ======================================== */

body {
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

/* ========================================
   Hero Section
   ======================================== */

.wp-block-group.alignfull {
  overflow: hidden;
}

/* ========================================
   Card Hover Effects
   ======================================== */

.is-style-card-style {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.is-style-card-style:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ========================================
   Button Enhancements
   ======================================== */

.wp-block-button__link {
  transition: all 0.3s ease;
  font-weight: 600;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Memo Cyan Button */
.has-memo-cyan-background-color.wp-block-button__link:hover {
  background-color: #00C8D0 !important;
}

/* Memo Coral Button */
.has-memo-coral-background-color.wp-block-button__link:hover {
  background-color: #FF4040 !important;
}

/* Memo Yellow Button */
.has-memo-yellow-background-color.wp-block-button__link:hover {
  background-color: #FFDB3D !important;
}

/* ========================================
   Image Optimization
   ======================================== */

.wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   Pricing Cards Enhancement
   ======================================== */

.wp-block-columns > .wp-block-column > .wp-block-group {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Popular badge animation */
.has-memo-coral-background-color {
  animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
}

/* ========================================
   Header Navigation Font Size
   ======================================== */

.header-navigation .header-menu-container > ul > li > a {
  font-size: 15px !important;
}

/* ========================================
   Header Dropdown Navigation
   ======================================== */

.header-navigation .sub-menu,
#mobile-drawer .drawer-inner,
.header-navigation ul ul {
  background-color: #ffffff !important;
}

.header-navigation .sub-menu a,
.header-navigation ul ul a {
  color: #333333 !important;
  padding: 10px 16px;
  font-size: 14px !important;
}

.header-navigation .header-menu-container ul ul li.menu-item > a {
  font-size: 14px !important;
}

.header-navigation .sub-menu a:hover,
.header-navigation ul ul a:hover {
  color: #0066cc !important;
  background-color: #f5f5f5 !important;
}

.header-navigation .sub-menu li,
.header-navigation ul ul li {
  border-bottom: 1px solid #f0f0f0;
}

.header-navigation .sub-menu li:last-child,
.header-navigation ul ul li:last-child {
  border-bottom: none;
}

/* ========================================
   Mobile Drawer Menu
   ======================================== */

#mobile-drawer .drawer-inner {
  background-color: #ffffff !important;
}

#mobile-drawer .drawer-inner,
#mobile-drawer .drawer-navigation {
  color: #333333 !important;
}

#mobile-drawer .drawer-navigation ul li a,
#mobile-drawer .mobile-navigation ul li a {
  color: #333333 !important;
  font-size: 15px;
  padding: 12px 16px;
}

#mobile-drawer .drawer-navigation ul li a:hover,
#mobile-drawer .mobile-navigation ul li a:hover {
  color: #0066cc !important;
  background-color: #f5f5f5 !important;
}

/* Mobile submenu */
#mobile-drawer .drawer-navigation ul ul a,
#mobile-drawer .mobile-navigation ul ul a {
  color: #666666 !important;
  font-size: 14px;
  padding-left: 32px;
}

/* Mobile drawer toggle button (hamburger) */
#mobile-drawer .drawer-header {
  background-color: #ffffff !important;
}

#mobile-drawer .drawer-header button,
#mobile-drawer .drawer-header .drawer-toggle {
  color: #333333 !important;
}

/* Mobile menu close button */
#mobile-drawer .drawer-close,
#mobile-drawer button.drawer-toggle {
  color: #333333 !important;
}

/* Mobile menu dividers */
#mobile-drawer .drawer-navigation ul li {
  border-bottom: 1px solid #f0f0f0;
}

/* Submenu toggle arrow */
#mobile-drawer .drawer-navigation .drawer-sub-toggle,
#mobile-drawer .mobile-navigation .drawer-sub-toggle {
  color: #999999 !important;
}

/* ========================================
   Outline Buttons - Ensure Visibility
   ======================================== */

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  border-width: 2px !important;
  border-style: solid !important;
}

/* Hero: outline button on light background */
.has-base-background-color .is-style-outline .wp-block-button__link,
.has-base-2-background-color .is-style-outline .wp-block-button__link {
  color: #333333 !important;
  border-color: #333333 !important;
}

.has-base-background-color .is-style-outline .wp-block-button__link:hover,
.has-base-2-background-color .is-style-outline .wp-block-button__link:hover {
  color: #0066cc !important;
  border-color: #0066cc !important;
}

/* CTA dark section: outline button on dark background */
.has-contrast-background-color .is-style-outline .wp-block-button__link {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

.has-contrast-background-color .is-style-outline .wp-block-button__link:hover {
  color: #cccccc !important;
  border-color: #cccccc !important;
}

/* ========================================
   CTA Dark Section
   ======================================== */

.has-contrast-background-color.has-background {
  background-color: #111111 !important;
}

.has-contrast-background-color .has-base-2-color {
  color: #ffffff !important;
}

.has-contrast-background-color .has-contrast-3-color {
  color: #A4A4A4 !important;
}

/* ========================================
   Footer Top Row - Widget Colors
   ======================================== */

.site-top-footer-wrap,
.site-top-footer-wrap .footer-widget-area {
  color: #cccccc !important;
}

.site-top-footer-wrap .widget-title,
.site-top-footer-wrap .footer-widget-area .widget-title,
.site-top-footer-wrap h2,
.site-top-footer-wrap h3 {
  color: #ffffff !important;
}

.site-top-footer-wrap .footer-widget-area p,
.site-top-footer-wrap .footer-widget-area li,
.site-top-footer-wrap .footer-widget-area span,
.site-top-footer-wrap .footer-widget-area div {
  color: #cccccc !important;
}

.site-top-footer-wrap .footer-widget-area a,
.site-top-footer-wrap a {
  color: #cccccc !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-top-footer-wrap .footer-widget-area a:hover,
.site-top-footer-wrap a:hover {
  color: #ffffff !important;
}

/* Footer Bottom Row */
.site-bottom-footer-wrap,
.site-bottom-footer-wrap .footer-html,
.site-bottom-footer-wrap p,
.site-bottom-footer-wrap span,
.site-bottom-footer-wrap a {
  color: #999999 !important;
}

.site-bottom-footer-wrap a:hover {
  color: #ffffff !important;
}

/* ========================================
   List Styles (General)
   ======================================== */

.is-style-plain {
  list-style-type: none;
}

.is-style-plain li {
  margin-bottom: 0.5rem;
}

.is-style-plain a {
  text-decoration: none;
  transition: color 0.3s ease;
}

.is-style-plain a:hover {
  color: var(--wp--preset--color--memo-cyan) !important;
}

/* ========================================
   Responsive Enhancements
   ======================================== */

@media (max-width: 768px) {
  .wp-block-group.alignfull {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .has-x-large-font-size {
    font-size: clamp(1.8rem, 4vw, 3.27rem) !important;
  }

  .has-large-font-size {
    font-size: clamp(1.2rem, 3vw, 1.85rem) !important;
  }

  .wp-block-columns {
    flex-direction: column;
  }

  .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .wp-block-button {
    width: 100%;
  }

  .wp-block-image.is-resized {
    width: 100% !important;
  }

  .is-style-card-style {
    padding: 1.5rem !important;
  }

  .wp-block-group .wp-block-columns {
    gap: 1.5rem;
  }

  /* 製品ラインアップ: プラグインアイコンを中央寄せ */
  #plugins .wp-block-image figure {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #plugins .wp-block-image img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .has-tertiary-background-color .wp-block-image figure {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }

  .has-tertiary-background-color .wp-block-image img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .has-base-2-background-color .wp-block-image figure {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }

  .has-base-2-background-color .wp-block-image img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Footer: 4カラム → 縦積み */
  .site-top-footer-wrap .site-footer-top-inner-wrap {
    flex-direction: column !important;
    gap: 2rem;
  }

  .site-top-footer-wrap .footer-widget-area {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    text-align: center;
  }

  .site-top-footer-wrap .footer-widget-area ul {
    padding: 0;
    list-style: none;
  }

  .site-top-footer-wrap .footer-widget-area li {
    margin-bottom: 0.5rem;
  }

  .has-base-2-background-color .wp-block-columns .wp-block-column {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .wp-block-group.alignfull {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .wp-block-spacer {
    height: 1rem !important;
  }
}

/* ========================================
   Accessibility Enhancements
   ======================================== */

a:focus,
button:focus,
.wp-block-button__link:focus {
  outline: 3px solid var(--wp--preset--color--memo-cyan);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base-2);
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .wp-block-buttons,
  footer {
    display: none;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }
}

/* ========================================
   投稿メタ: 著者非表示・最終更新日表示
   ======================================== */

/* 著者を非表示（製品ブログは著者名不要・全ページ） */
.posted-by,
.byline {
    display: none !important;
}

/* 著者直後のセパレーターも非表示 */
.posted-by + .meta-sep,
.byline + .meta-sep {
    display: none !important;
}

/* 一覧ページ（アーカイブ・ブログ）: 投稿メタ全体を非表示 */
.archive .entry-meta,
.blog .entry-meta,
.home .entry-meta {
    display: none !important;
}

/* ========================================
   Material UI Style Tables
   ======================================== */

.wp-block-table {
  border-collapse: separate;
  border-spacing: 0;
}

.wp-block-table table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.wp-block-table thead tr {
  background-color: #f5f5f5;
}

.wp-block-table thead th {
  font-weight: 600;
  color: #424242;
  padding: 14px 16px;
  border: none;
  border-bottom: 2px solid #e0e0e0;
  text-align: left;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.wp-block-table tbody td {
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid #eeeeee;
  color: #333333;
  vertical-align: top;
  line-height: 1.6;
}

.wp-block-table tbody tr:last-child td {
  border-bottom: none;
}

.wp-block-table tbody tr {
  transition: background-color 0.15s ease;
}

.wp-block-table tbody tr:hover {
  background-color: #fafafa;
}

.wp-block-table tbody td strong {
  color: #1a1a1a;
  font-weight: 600;
}

/* Striped variant (tertiary background sections) */
.has-tertiary-background-color .wp-block-table table {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.has-tertiary-background-color .wp-block-table thead tr {
  background-color: #eeeeee;
}

/* Responsive table */
@media (max-width: 768px) {
  .wp-block-table thead th,
  .wp-block-table tbody td {
    padding: 10px 12px;
    font-size: 0.8rem;
  }

  .wp-block-table thead th {
    white-space: normal;
  }
}

/* ========================================
   Animation Classes
   ======================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

/* ========================================
   Utility Classes
   ======================================== */

.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.box-shadow-lg {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.border-radius-lg {
  border-radius: 12px;
}

/* ========================================
   Performance Optimizations
   ======================================== */

.wp-block-button__link,
.is-style-card-style {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}