/*
 * Header Responsive Fix
 * /projects/show/3 と /projects/entry/1/complete のスマホ画面でのヘッダーレイアウト修正
 */

/* スマートフォン画面 (max-width: 768px) */
@media (max-width: 768px) {
    /* ヘッダーコンテンツのフレックスボックス設定を上書き */
    .header-content {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        min-height: 60px !important;  /* ヘッダー高さを少し増やす */
    }

    /* ロゴを左端に配置（サイズを大きく） */
    .header .logo {
        flex: 0 0 auto !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        order: 1 !important;
        max-width: 130px !important;  /* 110px → 130px */
    }

    .header .logo img {
        max-height: 42px !important;  /* 36px → 42px */
        width: auto !important;
    }

    /* アクション（ボタン）を中央右寄りに配置（サイズを大きく） */
    .header .header-actions {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        order: 2 !important;
        display: inline-flex !important;
        gap: 8px !important;  /* 6px → 8px */
        align-items: center !important;
    }

    .header .header-actions .btn {
        padding: 7px 12px !important;  /* 5px 8px → 7px 12px */
        font-size: 13px !important;  /* 11px → 13px */
        white-space: nowrap !important;
        font-weight: 600 !important;
    }

    /* ハンバーガーメニューを右端に配置（サイズを大きく） */
    .header .hamburger {
        flex: 0 0 auto !important;
        margin-left: 10px !important;  /* 8px → 10px */
        margin-right: 0 !important;
        order: 3 !important;
        display: inline-flex !important;
        width: 44px !important;  /* 40px → 44px */
        height: 44px !important;  /* 40px → 44px */
    }

    /* ナビゲーションは非表示 */
    .header .nav {
        display: none !important;
    }
}

/* iPhone XR, Pixel 7などの中型画面 (max-width: 414px) */
@media (max-width: 414px) {
    .header-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .header .logo {
        max-width: 120px !important;  /* 100px → 120px */
    }

    .header .logo img {
        max-height: 38px !important;  /* 32px → 38px */
    }

    .header .header-actions .btn {
        padding: 6px 10px !important;  /* 4px 7px → 6px 10px */
        font-size: 12px !important;  /* 10px → 12px */
    }

    .header .hamburger {
        width: 40px !important;  /* 36px → 40px */
        height: 40px !important;  /* 36px → 40px */
    }
}

/* iPhone 12 Pro以下の小型画面 (max-width: 390px) */
@media (max-width: 390px) {
    .header-content {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .header .logo {
        max-width: 110px !important;  /* 90px → 110px */
    }

    .header .logo img {
        max-height: 35px !important;  /* 30px → 35px */
    }

    .header .header-actions .btn {
        padding: 5px 8px !important;  /* 4px 6px → 5px 8px */
        font-size: 11px !important;  /* 9px → 11px */
    }

    .header .hamburger {
        width: 38px !important;  /* 32px → 38px */
        height: 38px !important;  /* 32px → 38px */
    }
}

/* タブレット画面 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .header-content {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .header .logo {
        flex: 0 0 auto !important;
        margin-right: auto !important;
        order: 1 !important;
    }

    .header .header-actions {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        order: 2 !important;
    }

    .header .hamburger {
        flex: 0 0 auto !important;
        margin-left: 8px !important;
        order: 3 !important;
        display: inline-flex !important;
    }

    .header .nav {
        display: none !important;
    }
}