/* =============================================================================
   Rich Dad's News — Chrome (header, nav, overlays, footer, newsletter)
   Depends on tokens.css + base.css + components.css
   ============================================================================= */

/* ---------------------------------------------------------------------------
   LOGO
   --------------------------------------------------------------------------- */
.rdn-logo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--rdn-font-heading);
	font-weight: 700;
	font-size: 24px;
	font-style: italic;
	line-height: 1;
	text-transform: none;
}
.rdn-logo__rd { color: var(--rdn-red); }
.rdn-logo__n {
	color: var(--rdn-white);
	background: var(--rdn-blue);
	padding: 2px 6px;
}
.rdn-header .rdn-logo__rd,
.rdn-logo--light .rdn-logo__rd { color: var(--rdn-red); }

/* ---------------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------------- */
.rdn-header {
	background: var(--rdn-header-bg);
	color: var(--rdn-header-text);
}
.rdn-header.is-sticky { position: sticky; top: 0; z-index: 100; }
.rdn-header.is-stuck { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }

.rdn-header__inner {
	display: flex;
	align-items: center;
	gap: var(--rdn-space-m);
	min-height: var(--rdn-header-h);
}
.rdn-header__brand { flex: 0 0 auto; margin-right: var(--rdn-space-s); }
.rdn-header__nav { flex: 1 1 auto; }

/* Primary menu */
.rdn-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rdn-space-m);
	align-items: center;
}
.rdn-menu li { margin: 0; }
.rdn-menu a {
	color: var(--rdn-header-link);
	font-family: var(--rdn-font-heading);
	font-size: var(--rdn-fs-menu);
	font-weight: var(--rdn-fw-menu);
	line-height: var(--rdn-lh-menu);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.rdn-menu a:hover,
.rdn-menu .current-menu-item > a { color: var(--rdn-header-link-hover); }

.rdn-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--rdn-space-s);
}
.rdn-header__search-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--rdn-space-xs);
	background: none;
	border: 0;
	color: var(--rdn-header-search-text);
	cursor: pointer;
	font-family: var(--rdn-font-body);
	font-size: 13px;
}
.rdn-header__search-toggle .rdn-icon { width: 18px; height: 18px; }
.rdn-header__menu-toggle {
	display: none;
	background: none;
	border: 0;
	color: var(--rdn-header-text);
	cursor: pointer;
	padding: 4px;
}

/* ---------------------------------------------------------------------------
   OVERLAYS (mobile menu + search)
   --------------------------------------------------------------------------- */
body.rdn-overlay-open { overflow: hidden; }

.rdn-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--rdn-header-bg);
	color: var(--rdn-header-text);
	overflow-y: auto;
	padding-bottom: var(--rdn-space-xl);
}
.rdn-overlay__bar {
	display: flex;
	align-items: center;
	gap: var(--rdn-space-s);
	min-height: var(--rdn-header-h-mobile);
	border-bottom: 1px solid var(--rdn-header-border);
}
.rdn-overlay__close {
	margin-left: auto;
	background: none;
	border: 0;
	color: var(--rdn-header-text);
	cursor: pointer;
	padding: 4px;
}
.rdn-overlay__nav { padding-top: var(--rdn-space-l); display: flex; flex-direction: column; gap: var(--rdn-space-l); }

.rdn-menu--stacked { flex-direction: column; align-items: flex-start; gap: var(--rdn-space-m); }
.rdn-menu--stacked a { font-size: 20px; }

.rdn-menu--secondary { flex-direction: column; align-items: flex-start; gap: var(--rdn-space-s); }
.rdn-menu--secondary a { font-size: 13px; color: var(--rdn-footer-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.rdn-menu--secondary a:hover { color: var(--rdn-header-link-hover); }

/* Search overlay */
.rdn-overlay--search .rdn-search-form { flex: 1 1 auto; }
.rdn-search-form {
	display: flex;
	align-items: center;
	gap: var(--rdn-space-xs);
}
.rdn-search-form .rdn-icon { flex: 0 0 auto; color: currentColor; }
.rdn-search-form__input {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--rdn-header-border);
	color: var(--rdn-header-text);
	border-radius: 0;
	font-size: 18px;
}
.rdn-search-form__input::placeholder { color: var(--rdn-footer-muted); }
.rdn-search-form__input:focus { border-bottom-color: var(--rdn-white); box-shadow: none; }

.rdn-overlay__popular { padding-top: var(--rdn-space-l); }
.rdn-overlay__popular-title {
	font-family: var(--rdn-font-body);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--rdn-footer-muted);
	margin-bottom: var(--rdn-space-s);
}
.rdn-popular-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rdn-space-s); }
.rdn-popular-list a { color: var(--rdn-header-text); font-size: 16px; }
.rdn-popular-list a:hover { color: var(--rdn-header-link-hover); }

/* ---------------------------------------------------------------------------
   NEWSLETTER BAND
   --------------------------------------------------------------------------- */
.rdn-newsletter { padding: var(--rdn-space-l) 0; }
.rdn-newsletter__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rdn-space-l);
	border: 3px solid var(--rdn-newsletter-border);
	padding: var(--rdn-space-l);
}
.rdn-newsletter__title {
	flex: 1 1 320px;
	margin: 0;
	color: var(--rdn-newsletter-title);
	font-size: var(--rdn-fs-h1);
	line-height: 1.2;
}
.rdn-newsletter__form { flex: 1 1 280px; }
.rdn-newsletter__fallback { display: flex; flex-direction: column; gap: var(--rdn-space-s); }

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */
.rdn-footer {
	background: var(--rdn-footer-bg);
	color: var(--rdn-footer-text);
	margin-top: var(--rdn-space-xl);
}
.rdn-footer a:not(.rdn-btn) { color: var(--rdn-footer-link); }
.rdn-footer a:not(.rdn-btn):hover { color: var(--rdn-footer-link-hover); }
/* Buttons keep their own component colors even inside the dark footer. */
.rdn-footer .rdn-btn--main:hover { color: var(--rdn-btn-text-hover); }

.rdn-footer__top {
	display: flex;
	align-items: center;
	gap: var(--rdn-space-l);
	padding: var(--rdn-space-l) var(--rdn-space-s);
	border-bottom: 1px solid var(--rdn-header-border);
}
.rdn-footer__nav { flex: 1 1 auto; }
.rdn-footer__nav .rdn-menu a { color: var(--rdn-footer-link); }

.rdn-backtotop {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--rdn-footer-text);
	color: var(--rdn-footer-text);
	cursor: pointer;
}
.rdn-backtotop:hover { background: var(--rdn-red); border-color: var(--rdn-red); }

.rdn-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rdn-space-m);
	padding: var(--rdn-space-l) var(--rdn-space-s);
}
.rdn-footer__secondary { flex: 1 1 auto; }
.rdn-footer__secondary .rdn-menu { flex-direction: row; flex-wrap: wrap; gap: var(--rdn-space-m); }
.rdn-footer__secondary .rdn-menu a { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }

.rdn-footer__copy { padding: var(--rdn-space-m) 0; border-top: 1px solid var(--rdn-header-border); }
.rdn-footer__copy p { margin: 0; text-align: center; font-size: 13px; color: var(--rdn-footer-muted); }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.rdn-header__nav,
	.rdn-header__search-label,
	.rdn-header__cta { display: none; }
	.rdn-header__menu-toggle { display: inline-flex; }
	.rdn-header__inner { min-height: var(--rdn-header-h-mobile); justify-content: space-between; }
	.rdn-header__actions { gap: var(--rdn-space-s); }

	.rdn-newsletter__title { font-size: var(--rdn-fs-h2); }

	.rdn-footer__top { flex-wrap: wrap; }
	.rdn-footer__nav .rdn-menu { gap: var(--rdn-space-s); }
}

@media (min-width: 981px) {
	.rdn-overlay--menu { display: none; }
}