/* common.css - Spanish Space Adventure Theme */

/* --- CSS Variables (Color Palette) --- */
:root {
    --bg-space: #0D1B2A; /* 深い宇宙空間の紺 */
    --bg-panel: #1B263B; /* コンソールパネル */
    --text-primary: #E0E1DD; /* 基本テキスト色（オフホワイト） */
    --text-secondary: #778DA9; /* サブテキスト色（グレイッシュブルー） */
    --accent-glow: #66FCF1; /* アクセントカラー（ネオンシアン） */
    --accent-orange: #FCA311; /* 強調したい部分のオレンジ */
    --font-heading: 'Orbitron', sans-serif; /* 見出し用フォント */
    --font-body: 'Noto Sans JP', sans-serif; /* 本文用フォント */
}

/* --- Basic Reset & Body Style --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-space);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.8;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"%3E%3Cpath fill="%231B263B" fill-opacity="0.4" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"%3E%3C/path%3E%3C/svg%3E'); /* Subtle star dust effect */
}

/* --- Layout Containers --- */
.header-container, .main-container, .child-nav-container, .site-footer {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header & Footer --- */
.site-header, .site-footer {
    padding: 15px 0;
    background-color: rgba(27, 38, 59, 0.7); /* 半透明パネル */
    backdrop-filter: blur(5px);
}
.site-header {
    border-bottom: 1px solid var(--accent-glow);
    box-shadow: 0 0 15px -5px var(--accent-glow);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-footer {
    border-top: 1px solid var(--text-secondary);
    font-size: 0.9em;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo a {
    font-family: var(--font-heading);
    font-size: 1.5em;
    color: var(--accent-glow);
    text-decoration: none;
    text-shadow: 0 0 5px var(--accent-glow);
}

/* --- Navigation --- */
.global-nav a {
    color: var(--text-primary);
    text-decoration: none;
    margin-left: 15px;
    transition: all 0.3s ease;
}
.global-nav a:hover {
    color: var(--accent-glow);
    text-shadow: 0 0 5px var(--accent-glow);
}

/* --- Main Content Styles --- */
main {
    padding: 30px 0;
}
main h1 {
    font-family: var(--font-heading);
    color: var(--accent-glow);
    font-size: 2.2em;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 0 0 10px var(--accent-glow);
}
main h2 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent-glow);
    padding-bottom: 8px;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* --- Specific Content Blocks --- */
.explanation, .one-point {
    background-color: var(--bg-panel);
    border-left: 5px solid var(--accent-glow);
    padding: 20px;
    margin: 30px 0;
    border-radius: 5px;
}

.practice-guide {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

/* Flashcard App Style */
textarea.cells {
    width: 100%;
    min-height: 400px;
    background-color: #0A1421;
    color: var(--text-primary);
    border: 1px solid var(--text-secondary);
    border-radius: 5px;
    padding: 15px;
    font-size: 1.1em;
}

/* --- Utility Classes for Emphasis --- */
.pen-mark { /* For h2 spans */
    display: inline-block;
    padding: 0 5px;
}
.strong-red { /* Used in last sample */
    color: var(--accent-orange);
    font-weight: bold;
}
b { /* General bold */
    color: var(--accent-orange);
}

/* --- Click-to-Speak Spanish Style (JS will add this class) --- */
.speakable-es {
    cursor: pointer;
    text-decoration: underline dotted var(--accent-glow);
    text-decoration-thickness: 1px;
    transition: all 0.2s ease;
}
.speakable-es:hover {
    background-color: rgba(102, 252, 241, 0.2);
    text-decoration: underline solid var(--accent-glow);
}

/* common.css に追加/修正 */

/* --- Link Styles --- */
a {
    /* 基本の文字色は本文と同じ */
    color: var(--text-primary); 
    
    /* 下線でクリック可能であることを示す */
    text-decoration: underline;
    text-decoration-style: dotted; /* 下線をうるさくない点線に */
    text-decoration-color: var(--accent-glow); /* 下線の色はアクセントカラー */
    text-decoration-thickness: 1px;
    text-underline-offset: 4px; /* テキストと下線の間に少しスペースを確保 */

    /* ホバー時の変化を滑らかに */
    transition: all 0.2s ease-in-out;
}

/* 訪問済みのリンクも色を変えず、一貫性を保つ */
a:visited {
    color: var(--text-primary);
}

/* マウスを乗せた時（ホバー）のスタイル */
a:hover {
    color: var(--accent-glow); /* 文字色をアクセントカラーに */
    text-shadow: 0 0 5px var(--accent-glow); /* ほんのり光る効果 */
    text-decoration-style: solid; /* 下線を実線に変化させる */
}

/* クリックした瞬間のスタイル */
a:active {
    color: var(--accent-orange); /* クリックしたことがわかるようにオレンジ色に */
}

/* ヘッダーのロゴやナビゲーションのように、下線が不要なリンクは個別に指定 */
.global-nav a, .logo a {
    text-decoration: none;
}