/* ==================================================
   石川県立小松明峰高等学校ウェブサイト
   カスタムCSS 全体コード (完成版)
   ================================================== */

/* --- 0. 色の定義（カラーパレット） --- */
:root {
    --main-color: darkred; /* 基本のダークレッド */
    --light-color: #fce8e8; /* 非常に薄い赤（背景・ホバー用） */
    --hover-color: #a50000; /* マウスオーバー時の少し濃い赤 */
    --text-color: #402020;  /* 赤みがかった濃い茶色（基本文字色） */
    --gold-color: #b19546; /* アクセントのゴールド */
}


/* ==================================================
   1. サイト全体の基本デザイン
   ================================================== */
body {
    color: var(--text-color);
}

a:hover {
    color: var(--gold-color);
}

/* 本文中の見出し（h2） */
.wysiwyg_content h2 {
    border-bottom: 3px solid var(--main-color);
}

/* 本文中の見出し（h3） */
.wysiwyg_content h3 {
    border-left: 5px solid var(--main-color);
}


/* ==================================================
   2. ブロックのデザイン（新着情報など）
   ================================================== */

/* ブロックのタイトルバー */
.frame-title {
    background-image: linear-gradient(to bottom, #c80000, darkred);
    border-bottom: 1px solid #6b0000;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-weight: 700;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
    padding: 1rem 1.5rem;
}


/* ==================================================
   3. 上部ナビゲーション（ドロップダウンメニュー）
   ================================================== */

/* --- 3-1. 親メニューのデザイン --- */
/* 親メニュー同士の間に、少しだけ隙間を作る */
#header .nav-tabs > .nav-item {
    margin-right: 5px;
}

/* 親メニュー（選択前）の基本デザイン */
#header .nav-tabs > .nav-item > .nav-link {
    color: var(--main-color) !important;
    background-color: #ffffff;
    font-weight: 700;
    border: 1px solid #f0eaea;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 0.8rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-out;
}

/* マウスオーバー時と、ドロップダウン開放時のデザインを統一・強化 */
#header .nav-tabs > .nav-item > .nav-link:hover,
#header .nav-tabs > .nav-item > .nav-link:focus,
.nav-item.show > .nav-link {
    color: #ffffff !important;
    border-color: transparent;
    transform: translateY(-3px);
    background-image: linear-gradient(to top, #c80000, darkred);
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.25);
}

/* --- 3-2. 子メニュー（ドロップダウンリスト）のデザイン --- */
.dropdown-menu {
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(100, 0, 0, 0.2);
    padding: 8px 0;
    background-color: #fffafb;
}

.dropdown-item {
    color: var(--text-color);
    font-weight: 600;
    padding: 10px 24px;
    transition: all 0.2s ease-out;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #ffffff !important;
    background-image: linear-gradient(90deg, darkred, #c80000);
    transform: translateX(5px);
    box-shadow: 3px 0 8px rgba(139, 0, 0, 0.3) inset;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #ffffff !important;
    background-image: linear-gradient(90deg, darkred, #c80000);
}

/* ==================================================
   4. 左サイドバーメニュー
   ================================================== */
/* 下準備：左メニューのフレームに `left-navi` というclass名を設定してください */

.left-navi .list-group-item {
    padding: 12px 20px;
    font-weight: 600;
    transition: all 0.2s ease-out;
    border-left: 5px solid transparent;
}

.left-navi .list-group-item:hover,
.left-navi .list-group-item:focus {
    background-color: var(--light-color);
    color: var(--main-color);
    padding-left: 25px;
    border-left: 5px solid var(--main-color);
}

.left-navi .list-group-item.active {
    background-color: var(--main-color);
    color: #ffffff;
    font-weight: 700;
    padding-left: 25px;
    border-left: 5px solid var(--hover-color);
    box-shadow: 0 4px 8px rgba(139, 0, 0, 0.2);
}


/* ==================================================
   5. 印刷設定（プリントスタイル）
   ================================================== */
@media print {
    /* Flexboxレイアウトでカラムを強制的に制御 */
    #main-container > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    /* 左サイドバー（33%の幅を確保） */
    #main-container .col-sm-4 {
        width: 33% !important;
        flex: 0 0 33% !important;
        order: 1 !important;
    }

    /* メインコンテンツ（67%の幅を確保） */
    #main-container .col-sm-8 {
        width: 67% !important;
        flex: 0 0 67% !important;
        order: 2 !important;
    }

    /* 背景色や画像を強制的に印刷 */
    * {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    /* 画像がはみ出ないようにする */
    img {
        max-width: 100% !important;
    }
}