/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* 追加のカスタマイズCSSはここに記述 */

/* 横スクロール防止 (全ページ共通推奨) */
html, body {
    max-width: 100vw;
    /* overflow-x: hidden; は position: sticky を無効化してしまうため、clipを使用するか、削除する */
    overflow-x: clip; 
}

/* 子要素がはみ出さないように対策 */
img, iframe, video, object {
    max-width: 100%;
}

/* PCレイアウト用の調整 */
@media (min-width: 769px) {
    /* サイト全体を管理するコンテナ */
    .site-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px; /* メイン(可変) + 右サイドバー(固定300px) */
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
        justify-content: center;
    }

    /* メインコンテンツエリア */
    #primary {
        width: 100%; /* GeneratePressのデフォルト幅を上書き */
        max-width: 720px; /* カードリストの最大幅 */
        margin-right: auto; /* 左寄せ気味にするため右マージン自動 */
        margin-left: auto;  /* 一旦中央寄せ（微調整可能） */
    }

    /* カスタム固定プレイヤーエリア */
    .custom-fixed-sidebar {
        position: sticky;
        top: 20px; /* JSで上書きされるが初期値として持っておく */
        height: fit-content;
        width: 300px;
        transition: top 0.3s ease-in-out; /* ヘッダーの動きに合わせて滑らかに動かす */
        padding-top: 0px; 
        margin-top: 20px; /* 初期配置でもヘッダーとの隙間を確保する */
    }

    /* プレイヤー等の仮スタイル */
    .sticky-player-placeholder {
        background: #222;
        color: #fff;
        padding: 20px;
        border-radius: 12px;
        min-height: 400px; /* 縦長プレイヤー想定 */
        margin-bottom: 20px;
    }

    .ad-placeholder {
        background: #e0e0e0;
        height: 250px;
        border-radius: 8px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
    }
}

/* デフォルトのサイドバーを全デバイスで非表示（独自の固定サイドバーを使うため） */
#right-sidebar {
    display: none;
}

/* カード型デザイン（全デバイス共通） */
.generate-columns {
    margin-bottom: 20px;
    padding: 0;
}

.inside-article {
    background: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.inside-article:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 再生ボタンのスタイル */
.podcast-play-button-wrapper {
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap; /* 画面幅が狭い場合は折り返し */
    gap: 10px; /* ボタン間の余白 */
}

.podcast-play-button {
    background-color: #1da1f2; /* SNSっぽい青 */
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0 10px; /* パディング縮小、コンテンツ主体で制御 */
    height: 40px; /* 高さを固定 */
    width: 200px; /* 幅を固定（文字数変動対策） */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* 中央揃え */
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* ボタンにも少しシャドウ */
}

.podcast-play-button.disabled,
.podcast-play-button:disabled {
    background-color: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
}

.podcast-play-button.disabled:hover,
.podcast-play-button:disabled:hover {
    background-color: #e0e0e0; /* ホバー時も色を変えない */
}

body.is-dark-theme .podcast-play-button.disabled,
body.is-dark-theme .podcast-play-button:disabled {
    background-color: #444;
    color: #aaa;
}

body.is-dark-theme .podcast-play-button.disabled:hover,
body.is-dark-theme .podcast-play-button:disabled:hover {
    background-color: #444; /* ダークテーマホバー時も色を変えない */
}

.podcast-play-button .text-container {
    white-space: nowrap; /* 折り返し防止 */
    display: inline-block;
    min-width: 80px; /* テキストエリアの最小幅を確保 */
    text-align: center;
}

.podcast-play-button:hover {
    background-color: #0c85d0;
}

/* === 記事内再生ボタンのアニメーション === */
.podcast-play-button .icon-container {
    display: inline-block;
    width: 20px;
    text-align: center;
}

/* Waveアニメーション (再生中) */
.podcast-play-button.playing .icon-container {
    height: 12px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}

/* Wave用バーを作成するための疑似要素とspan生成はJSではなくHTML構造でやりたいが
   既存HTMLを変えるのは手間なので、アイコンの中身だけ入れ替える方針に対応 */

.wave-bar {
    display: inline-block;
    width: 3px;
    background-color: #fff; /* デフォルトで白（背景が青のため） */
    animation: wave 1s infinite ease-in-out;
}

.podcast-play-button.playing .wave-bar {
    background-color: #fff; /* 再生中も白 */
}

@keyframes wave {
    0%, 100% { height: 10%; }
    50% { height: 100%; }
}

.wave-bar:nth-child(1) { animation-delay: 0s; }
.wave-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-bar:nth-child(4) { animation-delay: 0.3s; }

/* スマート（追従/隠れる）ヘッダー用スタイル */
.site-header {
    position: fixed; /* ヘッダーを固定 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 他の要素より上に */
    transition: transform 0.3s ease-in-out;
    background-color: #fff; /* 背景色がないと透けるため指定 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 下スクロール時に隠す */
.smart-header-hidden {
    transform: translateY(-100%);
}

/* 上スクロール時に表示 */
.smart-header-visible {
    transform: translateY(0);
}

/* プレイヤーのスタイル刷新 */
.sticky-player-container {
    background: #fff; /* ライトテーマ: 白背景 */
    color: #333; /* テキスト色: ダークグレー */
    padding: 24px;
    border-radius: 8px; /* カードのような角丸（GPのデフォルトに近づける） */
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* ドロップシャドウ */
    border: 1px solid rgba(0,0,0,0.05); /* 微細な境界線 */
    text-align: center;
}

.player-track-info h3 {
    color: #333; /* タイトル色 */
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.4;
    min-height: 1.4em;
    font-weight: 600;
}

.player-progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 12px;
    color: #666; /* プログレス時間の文字色 */
}

#player-seek-bar {
    flex-grow: 1;
    cursor: pointer;
    accent-color: #1da1f2;
}

.player-main-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.control-btn {
    background: transparent;
    color: #999; /* デフォルトは少し薄く */
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn:hover {
    background: rgba(0,0,0,0.05);
    border-color: #bbb;
    color: #333; /* ホバー時にダークグレー */
}

.control-btn.play-btn {
    width: 56px;
    height: 56px;
    font-size: 24px;
    background: #1da1f2;
    border-color: #1da1f2;
    color: #fff; /* 再生ボタンは白文字固定 */
    padding-left: 2px; /* アイコン位置微調整 */
}

.control-btn.play-btn:hover {
    background: #0c85d0;
    color: #fff; /* ホバー時も白 */
}

.player-sub-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    border-top: 1px solid #eee; /* ディバイダー色 */
    padding-top: 16px;
}

.sub-control-btn {
    background: transparent; /* 背景なし */
    border: 1px solid transparent; /* 配置ずれ防止用 */
    border-radius: 4px; /* 少し角丸 */
    color: #888;
    cursor: pointer;
    font-size: 12px;
    
    /* サイズ固定・中央配置 */
    width: 40px; 
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
}

/* スピードボタン専用ホバー設定 */
#player-btn-speed:hover {
    color: #1da1f2; /* テキスト色をライトブルーに */
    background-color: rgba(29, 161, 242, 0.1); /* 背景も薄いブルーに */
}

.sub-control-btn:hover {
    color: #333;
}

/* Download Area */
.player-download-area {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    text-align: center;
}

.download-link {
    text-decoration: none;
    font-size: 13px;
    color: #1da1f2;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 4px;
}

.download-link:hover {
    background-color: rgba(29, 161, 242, 0.05);
    color: #0c85d0;
}

.download-link.disabled {
    color: #ccc;
    pointer-events: none; /* クリック無効化 */
    cursor: default;
    background-color: transparent;
}
.download-link.disabled .icon {
    opacity: 0.5;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 5px;
}

.volume-icon {
    font-size: 16px; 
    cursor: pointer;
    display: flex; 
    align-items: center;
    justify-content: center;
    
    /* 表示領域を拡大 */
    width: 36px; 
    height: 36px;
    
    color: #666;
    transition: color 0.2s;
}

.volume-icon svg {
    /* SVGサイズ */
    width: 20px; 
    height: 20px;
    fill: currentColor;
    /* overflow: visible はブラウザによって挙動が違うことがあるので、
       アイコン自体の大きさやパディングで調整する */
}

.volume-icon.muted .icon-on {
    display: none !important;
}

.volume-icon.muted .icon-off {
    display: block !important; /* SVG自体を表示 */
}

#player-volume-bar {
    width: 60px;
    accent-color: #1da1f2; /* シークバーと同じ色に */
}

/* モバイル調整はここでは不要（hide-on-mobileクラスで隠すため） */

/* ============================
   Sticky Footer Settings
   ============================ */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* #page wrapper needs to grow to push footer down */
#page {
    flex: 1;
    width: 100%;
}


/* =================================================================
   ダークテーマ設定 (JSクラス制御: body.is-dark-theme)
   ================================================================= */
    
/* プレイヤーコンテナ */
body.is-dark-theme .sticky-player-container {
    background: #1e1e1e; /* ダークグレー背景 */
    color: #e0e0e0; /* 文字色を白っぽく */
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); /* 影を濃く */
    border-color: #333; /* 境界線を暗く */
}

/* タイトル */
body.is-dark-theme .player-track-info h3 {
    color: #fff;
}

/* プログレスバー（時間表示） */
body.is-dark-theme .player-progress-container {
    color: #aaa;
}

/* シークバーのアクセントカラー (オレンジ) */
body.is-dark-theme #player-seek-bar,
body.is-dark-theme #player-volume-bar {
    accent-color: #ff6600;
    background-color: #444;
}

/* 操作ボタン */
body.is-dark-theme .control-btn {
    color: #ccc;
    border-color: #444;
}

body.is-dark-theme .control-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: #666;
    color: #fff; /* ホバー時は白 */
}

/* 再生ボタン (オレンジ背景) */
body.is-dark-theme .control-btn.play-btn {
    background: #ff6600;
    border-color: #ff6600;
    color: #fff;
}

body.is-dark-theme .control-btn.play-btn:hover {
    background: #e65c00; /* 濃いオレンジ */
    border-color: #e65c00;
}

/* ボーダーライン (分割線) */
body.is-dark-theme .player-sub-controls,
body.is-dark-theme .player-download-area {
    border-top-color: #333;
}

/* サブコントロールボタン (速度など) */
body.is-dark-theme .sub-control-btn {
    color: #aaa;
}
body.is-dark-theme .sub-control-btn:hover {
    color: #fff;
}

/* スピードボタンのホバー (オレンジ系) */
body.is-dark-theme #player-btn-speed:hover {
    color: #ff6600;
    background-color: rgba(255, 102, 0, 0.15); /* 薄いオレンジ背景 */
}

/* ボリュームアイコン */
body.is-dark-theme .volume-icon {
    color: #aaa;
}
body.is-dark-theme .volume-icon:hover {
    color: #fff;
}

/* ダウンロードリンク */
body.is-dark-theme .download-link {
    color: #ff6600;
}

body.is-dark-theme .download-link:hover {
    background-color: rgba(255, 102, 0, 0.1);
    color: #ff6600;
}

body.is-dark-theme .download-link.disabled {
    color: #555;
}

/* ============================
   記事内の再生ボタン (オレンジ化)
   ============================ */
body.is-dark-theme .podcast-play-button {
    background-color: #ff6600;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

body.is-dark-theme .podcast-play-button:hover {
    background-color: #e65c00;
}

/* Waveアニメーション (オレンジ背景時は白バー) */
body.is-dark-theme .wave-bar,
body.is-dark-theme .podcast-play-button.playing .wave-bar {
    background-color: #fff;
}

/* ============================
   ヘッダー・フッター (全体色変更)
   ============================ */

/* ヘッダー & ナビゲーション */
body.is-dark-theme .site-header,
body.is-dark-theme .main-navigation,
body.is-dark-theme .main-navigation .main-nav ul ul {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-bottom: 1px solid #333;
}

/* サイトタイトルやリンク */
body.is-dark-theme .site-header a,
body.is-dark-theme .main-navigation a,
body.is-dark-theme .site-branding .main-title a {
    color: #e0e0e0 !important;
}

body.is-dark-theme .main-navigation a:hover,
body.is-dark-theme .site-header a:hover {
    color: #ff6600 !important;
}

/* フッターエリア全体 */
body.is-dark-theme .site-footer {
    background-color: #1e1e1e !important;
    color: #aaa !important;
    border-top: 1px solid #333;
}

/* フッター最下部 (コピーライト) */
body.is-dark-theme .site-info {
    background-color: #121212 !important; 
    color: #666 !important;
}

body.is-dark-theme .site-info a {
    color: #aaa !important;
}

/* 記事カード */
/* 詳細度を上げるため、親要素や!importantを追加 */
body.is-dark-theme .separate-containers .inside-article,
body.is-dark-theme .inside-article {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: #e0e0e0;
}

/* リンク色も調整（青だと見にくい場合があるため） */
body.is-dark-theme a, 
body.is-dark-theme a:visited {
    color: #ff9933; /* 明るめのオレンジ */
}

body.is-dark-theme .entry-title a,
body.is-dark-theme .entry-title a:visited {
    color: #fff;
}

body.is-dark-theme .entry-title a:hover {
    color: #ddd;
}

body.is-dark-theme {
   background-color: #121212;
   color: #e0e0e0;
}

body.is-dark-theme h1, 
body.is-dark-theme h2, 
body.is-dark-theme h3, 
body.is-dark-theme h4, 
body.is-dark-theme h5, 
body.is-dark-theme h6 {
   color: #fff;
}

/* ============================
   ソーシャルアクション (いいね & SNS)
   ============================ */
.social-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.social-actions-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Like Button - Removed based on request to prioritize podcast links */

/* Listen on links */
.listen-on-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.listen-on-links .label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
}

.platform-link {
    color: #666;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-link:hover {
    transform: translateY(-2px);
}

.platform-link.apple:hover { color: #872ec4; /* Apple Podcast Purple */ }
.platform-link.spotify:hover { color: #1DB954; }

/* Dark Theme */
body.is-dark-theme .listen-on-links .label {
    color: #777;
}

body.is-dark-theme .platform-link {
    color: #aaa;
}

body.is-dark-theme .platform-link:hover {
    color: #fff; /* Dark theme hover to white for better contrast or brand color */
}

/* Specific brand color on hover in dark mode too if preferred */
body.is-dark-theme .platform-link.apple:hover { color: #d56dfb; }
body.is-dark-theme .platform-link.spotify:hover { color: #1DB954; }

/* SNS Links */
.sns-share-links {
    display: flex;
    gap: 15px;
}

.sns-link {
    color: #999;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sns-link:hover {
    color: #555;
    transform: translateY(-2px); /* Slight lift */
}

.sns-link.twitter:hover { color: #000; } /* X is black */
.sns-link.facebook:hover { color: #1877f2; }

/* Dark Theme Adjustments for SNS */
body.is-dark-theme .social-footer {
    border-top-color: #333;
}

body.is-dark-theme .sns-link {
    color: #777;
}

body.is-dark-theme .sns-link:hover {
    color: #fff;
}

body.is-dark-theme .sns-link.twitter:hover { color: #fff; } 
body.is-dark-theme .sns-link.facebook:hover { color: #4298f5; }

/* ============================
   Mobile Ad Implementation
   ============================ */

/* Hide Play Button on Mobile Index/Archive Pages Only */
@media (max-width: 768px) {
    /* Hide on index/archive pages */
    body.archive .podcast-play-button-wrapper,
    body.home .podcast-play-button-wrapper,
    body.blog .podcast-play-button-wrapper {
        display: none;
    }
    
    /* Show on single post pages */
    body.single .podcast-play-button-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 20px 0;
    }
    
    /* Full width buttons on mobile single posts */
    body.single .podcast-play-button {
        width: 100%;
        max-width: 100%;
    }
}

/* Mobile Ad Slot (Parallax Effect) */
.mobile-ad-slot {
    position: relative;
    height: 400px; /* 広告の高さ */
    width: 100vw;
    margin-left: -20px;
    margin-right: -20px;
    z-index: 0;
    
    background-color: #222;
    clip-path: inset(0); 
    -webkit-clip-path: inset(0);
}

/* Only the ad overlay text/button should be clickable */
.mobile-ad-slot .ad-overlay-text {
    pointer-events: auto;
}

.mobile-ad-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 広告内のテキストやボタン (中央配置) */
.ad-overlay-text {
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    pointer-events: auto; /* ボタン等は押せるように */
}

/* Hide Ad on Desktop */
@media (min-width: 769px) {
    .mobile-ad-slot {
        display: none;
    }
}

/* Margin/Padding Adjustments for Mobile */
@media (max-width: 768px) {
    /* GPのモバイルコンテナパディング調整補正 */
    .mobile-ad-slot {
         margin-left: calc( -1 * var(--content-padding, 20px));
         width: calc(100% + (var(--content-padding, 20px) * 2));
    }
    
    /* ============================
       Mobile Sticky Player (Single Post Only)
       ============================ */
    body.single .mobile-sticky-player {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        background: #fff;
        color: #333;
        padding: 12px 16px 16px;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
        border-top: 1px solid rgba(0,0,0,0.1);
    }
    
    body.single.is-dark-theme .mobile-sticky-player {
        background: #1e1e1e;
        color: #e0e0e0;
        border-top-color: #333;
    }
    
    /* Mobile Progress Bar (no time display) */
    .mobile-player-progress-container {
        margin-bottom: 12px;
    }
    
    .mobile-player-progress-container input[type="range"] {
        width: 100%;
        height: 4px;
        -webkit-appearance: none;
        appearance: none;
        background: rgba(0,0,0,0.1);
        border-radius: 2px;
        outline: none;
    }
    
    body.is-dark-theme .mobile-player-progress-container input[type="range"] {
        background: rgba(255,255,255,0.2);
    }
    
    .mobile-player-progress-container input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        background: #007bff;
        border-radius: 50%;
        cursor: pointer;
    }
    
    body.is-dark-theme .mobile-player-progress-container input[type="range"]::-webkit-slider-thumb {
        background: #ff6600;
    }
    
    .mobile-player-progress-container input[type="range"]::-moz-range-thumb {
        width: 14px;
        height: 14px;
        background: #007bff;
        border-radius: 50%;
        cursor: pointer;
        border: none;
    }
    
    body.is-dark-theme .mobile-player-progress-container input[type="range"]::-moz-range-thumb {
        background: #ff6600;
    }
    
    /* Mobile Player Controls (3 buttons in a row) */
    .mobile-player-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .mobile-control-btn {
        background: rgba(0,0,0,0.05);
        border: none;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 12px;
        font-weight: 600;
        color: #333;
        padding: 0;
    }
    
    body.is-dark-theme .mobile-control-btn {
        background: rgba(255,255,255,0.1);
        color: #e0e0e0;
    }
    
    .mobile-control-btn:hover {
        background: rgba(0,0,0,0.1);
        transform: scale(1.05);
    }
    
    body.is-dark-theme .mobile-control-btn:hover {
        background: rgba(255,255,255,0.15);
    }
    
    /* Play button (larger) */
    .mobile-play-btn {
        width: 56px;
        height: 56px;
        background: #007bff !important;
        color: #fff !important;
    }
    
    body.is-dark-theme .mobile-play-btn {
        background: #ff6600 !important;
    }
    
    .mobile-play-btn:hover {
        background: #0056b3 !important;
    }
    
    body.is-dark-theme .mobile-play-btn:hover {
        background: #cc5200 !important;
    }
    
    /* Hide PC player on mobile */
    body.single .custom-fixed-sidebar {
        display: none;
    }
    
    /* Add bottom padding to content to prevent overlap with sticky player */
    body.single .site-content,
    body.single #primary {
        padding-bottom: 100px; /* Height of player + buffer */
    }
    
    /* Add bottom padding to footer to prevent overlap with sticky player */
    body.single .site-footer {
        padding-bottom: 110px;
    }
}

/* Mobile Theme Toggle & Header Adjustments */

/* 1. Remove underlines from Site Title and Button */
.main-title a,
.navigation-branding a,
.site-branding a,
.custom-mobile-theme-toggle {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.custom-mobile-theme-toggle:focus {
    outline: none; 
}

/* 2. Toggle Button Styling & Color Logic */
.custom-mobile-theme-toggle {
    display: flex !important; /* Force display on all devices for now to troubleshoot */
    background: transparent;
    border: none;
    padding: 0 15px;
    line-height: normal; /* Fixed height can cause alignment issues */
    height: 60px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Default (Light Mode) Color */
    color: #333333; 
}
/* Hide on Desktop via media query instead if user strictly wants it mobile only,
   but user asked "is not displayed", assuming they want it back or generalized.
   Let's check media query override down below.
*/

/* Dark Mode Color Override */
body.is-dark-theme .custom-mobile-theme-toggle {
    color: #ffffff;
}

.custom-mobile-theme-toggle svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* 3. Mobile Layout Corrections (Consistency between Index/Single) */
@media (max-width: 768px) {
    /* Explicit Color Logic for Mobile Toggle to fix "stuck in white" issue */
    html body .custom-mobile-theme-toggle {
        color: #333333 !important; /* Force Dark Color in Light Mode */
    }
    html body.is-dark-theme .custom-mobile-theme-toggle {
        color: #ffffff !important; /* Force Light Color in Dark Mode */
    }

    .custom-mobile-theme-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 60px;
        width: auto !important;
        background: transparent !important;
        border: none !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }

    /* Fix Layout Stacking: Force Row and No Wrap */
    .inside-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Prevent Branding from forcing newline */
    .site-branding,
    .site-logo,
    .navigation-brand,
    .site-branding-container {
        width: auto !important;
        max-width: 80% !important; /* Safety cap */
        flex-shrink: 1 !important; 
        flex-grow: 0 !important;
        margin-right: auto !important;
        margin-bottom: 0 !important;
    }
    
    /* Ensure Branding Links have no underline */
    .site-branding a,
    .main-title a {
        border-bottom: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    /* Mobile Toggle Wrapper Position */
    .mobile-menu-control-wrapper {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        order: 99 !important;
        flex-shrink: 0 !important;
        width: auto !important;
        float: none !important; /* Override theme floats */
        border: none !important;
        border-bottom: none !important;
        height: 60px !important;
    }

    /* Extra safety for button inside wrapper */
    .mobile-menu-control-wrapper .custom-mobile-theme-toggle,
    .mobile-menu-control-wrapper button {
        border-bottom: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }
}