/**
 * 最上部お知らせバナー（Renewal/Common/banner.ctp）
 *
 * 本文は #main-scroll-container 内でスクロールするため、バナーは画面上部に固定し、
 * banner.js が本文のスクロール量に合わせて上へ押し出す。
 * --renewal-banner-visible はバナーの見えている高さ（banner.js が設定）。
 */

/* バナー全体の設定 */
[data-renewal-layout] .notification-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 25;
	width: 100%;
	background-color: #2563eb;
	background-image: linear-gradient(to bottom right, #2563eb, #1d4ed8);
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	padding: 10px 40px 10px 16px; /* 右側に閉じるボタン用の余白確保 */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
}

[data-renewal-layout][data-renewal-mode="event"] .notification-banner {
	background-color: #22c55e;
	background-image: linear-gradient(to bottom right, #22c55e, #10b981, #a3e635);
	color: #020617;
}

[data-renewal-layout][data-renewal-mode="youtube"] .notification-banner {
	background-color: #dc2626;
	background-image: linear-gradient(to bottom right, #dc2626, #e11d48);
	color: #fff;
}

/* 中央テキスト部分 */
[data-renewal-layout] .notification-banner .banner-content p {
	margin: 0;
	text-align: center;
}

/* バナー内のリンク（※詳細ページへのリンクを設ける場合） */
[data-renewal-layout] .notification-banner .banner-link {
	color: #ffd700;
	text-decoration: underline;
	margin-left: 8px;
}

[data-renewal-layout] .notification-banner .banner-link:hover {
	text-decoration: none;
}

/* 閉じる（×）ボタン */
[data-renewal-layout] .notification-banner .close-btn {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

[data-renewal-layout] .notification-banner .close-btn:hover {
	opacity: 1;
}

/* 非表示用クラス */
[data-renewal-layout] .notification-banner.is-hidden {
	display: none;
}

/* 閉じた状態を確認するまで表示を保留し、再表示のちらつきを防ぐ */
[data-renewal-layout] .notification-banner.is-checking {
	visibility: hidden;
}

/* 本文先頭のバナー高さ分のスペーサー */
[data-renewal-layout] .notification-banner-spacer {
	flex-shrink: 0;
}

/* PC・タブレット: 左列（グローバルナビ・サブナビ）の上端をバナーの見えている高さ分だけ下げる */
@media (min-width: 768px) {
	[data-renewal-layout] .notification-banner {
		z-index: 45;
	}

	[data-renewal-layout].has-notification-banner > aside,
	[data-renewal-layout].has-notification-banner > #sub-navigation {
		border-top: var(--renewal-banner-visible, 0px) solid transparent;
	}
}