/* ヘッダー高さのCSS変数定義 */
:root {
    --header-height: 4rem; /* 64px */
}

@media (min-width: 1024px) {
    :root {
        --header-height: 5rem; /* 80px */
    }
}

/* 確実なメニュー表示のための強制CSS */
* {
    box-sizing: border-box !important;
}

/* グラデーションテキスト */
.gradient-text {
    background: linear-gradient(45deg, #581c87, #7c2d92) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* デスクトップナビゲーション - 1024px以上で表示 */
.desktop-nav {
    display: none !important;
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* モバイルメニューボタン - 767px以下で表示 */
.mobile-menu-btn {
    display: block !important;
}

@media (min-width: 1024px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

/* モバイルメニュー */
.mobile-menu {
    display: none !important;
}

.mobile-menu.show {
    display: block !important;
}

@media (min-width: 1024px) {
    .mobile-menu {
        display: none !important;
    }
    .mobile-menu.show {
        display: none !important;
    }
}

/* ホバー効果 */
.nav-hover:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: #7c2d92 !important;
}

/* デスクトップナビのリンクスタイル */
@media (min-width: 1024px) {
    #desktopNav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    #desktopNav a {
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
    }
}

/* モバイルメニューのリンクスタイル */
#mobileMenu a {
    display: flex !important;
    align-items: center !important;
}

/* ヘッダーを除いた高さのユーティリティクラス */
.h-screen-minus-header {
    height: calc(100vh - var(--header-height)) !important;
}

.min-h-screen-minus-header {
    min-height: calc(100vh - var(--header-height)) !important;
}

/* 好きなものセクションの強制2列表示 */
.favorites-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

@media (min-width: 1024px) {
    .favorites-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
}

/* SNSシェアボタンの間隔調整 */
.share-buttons-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

@media (min-width: 640px) {
    .share-buttons-container {
        flex-direction: row !important;
        gap: 1rem !important;
        align-items: center !important;
    }
}

.share-button-item {
    flex: 0 0 auto !important;
    width: auto !important;
}