/**
 * Site Logo Extension Styles
 */

/* ==========================================
 * 1. フロントエンド & エディター共通設定
 * ========================================== */

/* ロゴリンク要素の表示調整 */
.wp-block-site-logo a.custom-logo-link {
  display: inline-block;
  box-sizing: border-box;
}

/* SVG等のロゴ画像：固有サイズ(max-width)の制限を解除し、指定サイズへの拡大を有効化 */
.wp-block-site-logo img.custom-logo,
.wp-block-site-logo img {
  max-width: none;
  height: auto;
}

/* ==========================================
 * 2. モバイル表示時 (768px以下) のレスポンシブサイズ設定
 * ========================================== */
@media (max-width: 768px) {
  .wp-block-site-logo[style*="--mobile-logo-width"] .components-resizable-box__container,
  .wp-block-site-logo[style*="--mobile-logo-width"] a.custom-logo-link,
  .wp-block-site-logo[style*="--mobile-logo-width"] img.custom-logo,
  .wp-block-site-logo[style*="--mobile-logo-width"] img,
  .wp-block-site-logo[style*="--mobile-logo-width"] svg {
    width: var(--mobile-logo-width) !important;
    height: auto !important;
    max-width: 100% !important;
  }
}