/**
 * Centi Theme — assets/css/header.css
 *
 * Site header: branding, navigation chính, mobile menu, sticky.
 *
 * @package CentiTheme
 */

/* -------------------------------------------------------------------------
 * Site Header — wrapper
 * ---------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background-color: var(--header-bg);
	color: var(--header-text);
	border-bottom: 1px solid var(--header-border);
	box-shadow: var(--shadow-xs);
}

/* Khi scroll — tăng shadow */
.site-header.is-sticky {
	box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------------------------
 * Topbar — logo + CTA buttons
 * ---------------------------------------------------------------------- */

.site-header__topbar {
	background-color: var(--topbar-bg);
	color: var(--topbar-text);
	border-bottom: 1px solid var(--topbar-border);
	padding-block: var(--space-2);
}

.site-header__topbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

/* Logo trong topbar */
.topbar__brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.topbar__brand .custom-logo {
	height: 80px;
	width: auto;
}

.topbar__logo-link {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.topbar__site-name {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--topbar-text);
	text-decoration: none;
	white-space: nowrap;
}

.topbar__site-name:hover {
	color: var(--color-primary);
}

/* Buttons trong topbar */
.topbar__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
}

/* Base button */
.topbar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition-fast),
	            color var(--transition-fast),
	            border-color var(--transition-fast);
	cursor: pointer;
}

/* Sizes */
.topbar-btn--sm {
	padding: var(--space-1) var(--space-3);
	font-size: var(--font-size-xs);
}
.topbar-btn--md {
	padding: var(--space-2) var(--space-4);
	font-size: var(--font-size-sm);
}
.topbar-btn--lg {
	padding: var(--space-3) var(--space-6);
	font-size: var(--font-size-base);
}

/* -------------------------------------------------------------------------
 * Button color variants + hiệu ứng
 * ---------------------------------------------------------------------- */

/* Hiệu ứng chung: scale nhẹ khi hover */
.topbar-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}
.topbar-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

/* primary */
.topbar-btn--primary {
	background-color: var(--color-primary);
	color: #fff;
	border: 1px solid transparent;
}
.topbar-btn--primary:hover {
	background-color: var(--color-primary-dark);
	color: #fff;
}

/* accent */
.topbar-btn--accent {
	background-color: var(--color-accent);
	color: #fff;
	border: 1px solid transparent;
}
.topbar-btn--accent:hover {
	background-color: var(--color-accent-dark);
	color: #fff;
}

/* white */
.topbar-btn--white {
	background-color: #fff;
	color: var(--color-primary);
	border: 1px solid transparent;
}
.topbar-btn--white:hover {
	background-color: #f8fafc;
	color: var(--color-primary-dark);
}

/* dark */
.topbar-btn--dark {
	background-color: #1e293b;
	color: #f8fafc;
	border: 1px solid transparent;
}
.topbar-btn--dark:hover {
	background-color: #0f172a;
	color: #fff;
}

/* success */
.topbar-btn--success {
	background-color: #16a34a;
	color: #fff;
	border: 1px solid transparent;
}
.topbar-btn--success:hover {
	background-color: #15803d;
	color: #fff;
}

/* danger */
.topbar-btn--danger {
	background-color: #dc2626;
	color: #fff;
	border: 1px solid transparent;
}
.topbar-btn--danger:hover {
	background-color: #b91c1c;
	color: #fff;
}

/* warning */
.topbar-btn--warning {
	background-color: #d97706;
	color: #fff;
	border: 1px solid transparent;
}
.topbar-btn--warning:hover {
	background-color: #b45309;
	color: #fff;
}

/* outline */
.topbar-btn--outline {
	background-color: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}
.topbar-btn--outline:hover {
	background-color: var(--color-primary);
	color: #fff;
}

/* ghost */
.topbar-btn--ghost {
	background-color: transparent;
	color: var(--topbar-text);
	border: 1px solid transparent;
}
.topbar-btn--ghost:hover {
	background-color: rgb(0 0 0 / 0.08);
	color: var(--color-primary);
}

/* gradient-blue */
.topbar-btn--gradient-blue {
	background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
	color: #fff;
	border: 1px solid transparent;
	background-size: 200% 200%;
	transition: background-position var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.topbar-btn--gradient-blue:hover {
	background-position: right center;
	color: #fff;
}

/* gradient-orange */
.topbar-btn--gradient-orange {
	background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
	color: #fff;
	border: 1px solid transparent;
	background-size: 200% 200%;
	transition: background-position var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.topbar-btn--gradient-orange:hover {
	background-position: right center;
	color: #fff;
}

/* gradient-green */
.topbar-btn--gradient-green {
	background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
	color: #fff;
	border: 1px solid transparent;
	background-size: 200% 200%;
	transition: background-position var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.topbar-btn--gradient-green:hover {
	background-position: right center;
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Social Icons (từ Customizer)
 * ---------------------------------------------------------------------- */

.social-icons__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	text-decoration: none;
	transition: background-color var(--transition-fast),
	            color var(--transition-fast),
	            transform var(--transition-fast);
}

.social-icon svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.social-icon:hover {
	transform: translateY(-2px);
	color: var(--color-primary);
}

/* circle */
.social-icon--circle {
	border-radius: var(--radius-full);
	background-color: rgb(0 0 0 / 0.08);
	color: var(--topbar-text, var(--color-text-muted));
}
.social-icon--circle:hover {
	background-color: var(--color-primary);
	color: #fff;
}

/* square */
.social-icon--square {
	border-radius: var(--radius-sm);
	background-color: rgb(0 0 0 / 0.08);
	color: var(--topbar-text, var(--color-text-muted));
}
.social-icon--square:hover {
	background-color: var(--color-primary);
	color: #fff;
}

/* outline */
.social-icon--outline {
	border-radius: var(--radius-full);
	border: 1px solid currentColor;
	color: var(--topbar-text, var(--color-text-muted));
}
.social-icon--outline:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* plain */
.social-icon--plain {
	background: none;
	color: var(--topbar-text, var(--color-text-muted));
}
.social-icon--plain:hover {
	color: var(--color-primary);
}

/* Footer social icons — màu ngược (nền tối) */
.social-icons--footer .social-icon--circle,
.social-icons--footer .social-icon--square {
	background-color: rgb(255 255 255 / 0.1);
	color: rgb(255 255 255 / 0.75);
}
.social-icons--footer .social-icon--circle:hover,
.social-icons--footer .social-icon--square:hover {
	background-color: var(--color-primary);
	color: #fff;
}
.social-icons--footer .social-icon--outline {
	color: rgb(255 255 255 / 0.75);
	border-color: rgb(255 255 255 / 0.3);
}
.social-icons--footer .social-icon--outline:hover {
	color: #fff;
	border-color: var(--color-primary);
}
.social-icons--footer .social-icon--plain {
	color: rgb(255 255 255 / 0.75);
}
.social-icons--footer .social-icon--plain:hover {
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Navbar — branding + menu
 * ---------------------------------------------------------------------- */

.site-header__navbar {
	height: var(--header-height);
	display: flex;
	align-items: center;
}

.site-header__navbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	height: 100%;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Site Branding
 * ---------------------------------------------------------------------- */

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-shrink: 0;
	text-decoration: none;
}

.site-branding .custom-logo {
	height: 36px;
	width: auto;
}

.site-title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	margin: 0;
}

.site-title a {
	color: var(--color-text);
	text-decoration: none;
}

.site-title a:hover {
	color: var(--color-primary);
	text-decoration: none;
}

.site-description {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * Main Navigation
 * ---------------------------------------------------------------------- */

.main-navigation {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

/* Desktop nav menu */
.main-navigation .nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.main-navigation .nav-menu li {
	position: relative;
	margin: 0;
}

.main-navigation .nav-menu a {
	display: block;
	padding: var(--space-2) var(--space-3);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	border-radius: var(--radius-md);
	transition: background-color var(--transition-fast), color var(--transition-fast);
	white-space: nowrap;
	text-decoration: none;
}

.main-navigation .nav-menu a:hover,
.main-navigation .nav-menu a:focus,
.main-navigation .nav-menu .current-menu-item > a,
.main-navigation .nav-menu .current-menu-ancestor > a {
	background-color: var(--color-bg-secondary);
	color: var(--color-primary);
	text-decoration: none;
}

/* Dropdown */
.main-navigation .nav-menu .sub-menu {
	position: absolute;
	top: calc(100% + var(--space-1));
	left: 0;
	min-width: 200px;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	list-style: none;
	margin: 0;
	padding: var(--space-1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--transition-fast),
	            visibility var(--transition-fast),
	            transform var(--transition-fast);
	z-index: var(--z-dropdown);
}

.main-navigation .nav-menu li:hover > .sub-menu,
.main-navigation .nav-menu li.focus > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .nav-menu .sub-menu a {
	border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
 * Menu Toggle (mobile)
 * ---------------------------------------------------------------------- */

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-2);
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	color: var(--color-text);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	gap: var(--space-2);
	transition: background-color var(--transition-fast);
}

.menu-toggle:hover {
	background-color: var(--color-bg-secondary);
}

/* Hamburger icon SVG via background */
.menu-toggle::before {
	content: '';
	display: block;
	width: 18px;
	height: 2px;
	background-color: currentColor;
	box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
	transition: box-shadow var(--transition-fast);
}

.main-navigation.toggled .menu-toggle::before {
	box-shadow: none;
	transform: rotate(45deg);
	position: relative;
}

/* -------------------------------------------------------------------------
 * Mobile menu
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.menu-toggle {
		display: flex;
	}

	.main-navigation .nav-menu {
		display: none;
		position: absolute;
		top: var(--header-height);
		left: 0;
		right: 0;
		background-color: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		box-shadow: var(--shadow-card);
		flex-direction: column;
		align-items: stretch;
		padding: var(--space-3);
		gap: var(--space-1);
	}

	.main-navigation.toggled .nav-menu {
		display: flex;
	}

	.main-navigation .nav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		padding-left: var(--space-4);
		background-color: transparent;
	}
}

/* -------------------------------------------------------------------------
 * Search Toggle Button (trong nav)
 * ---------------------------------------------------------------------- */

.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.search-toggle:hover {
	background-color: var(--color-bg-secondary);
	color: var(--color-primary);
	text-decoration: none;
}

.search-toggle:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.search-toggle__icon {
	display: block;
	flex-shrink: 0;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Search Overlay — full-screen backdrop + dialog
 * ---------------------------------------------------------------------- */

/* Prevent scroll khi overlay mở */
body.search-overlay-open {
	overflow: hidden;
}

.search-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgb(0 0 0 / 0.55);
	z-index: var(--z-overlay);
	padding: 5vh var(--space-4) var(--space-4);
	align-items: flex-start;
	justify-content: center;
}

.search-overlay.is-open {
	display: flex;
}

.search-overlay__inner {
	width: 100%;
	max-width: 640px;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

/* Header: field + close button */
.search-overlay__header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--color-border);
}

.search-overlay__field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
}

.search-overlay__icon {
	flex-shrink: 0;
	color: var(--color-text-muted);
	pointer-events: none;
}

/* Override base.css input styles cho search input */
.search-overlay__input.search-overlay__input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-size: var(--font-size-lg);
	background: none;
	color: var(--color-text);
	line-height: var(--line-height-body);
}

.search-overlay__input.search-overlay__input:focus {
	border: none;
	box-shadow: none;
	outline: none;
}

.search-overlay__input::placeholder {
	color: var(--color-text-muted);
}

.search-overlay__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: var(--space-1);
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

.search-overlay__close:hover {
	color: var(--color-text);
	background-color: var(--color-bg-secondary);
}

.search-overlay__close:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Results container */
.search-overlay__results {
	max-height: min(400px, 50vh);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}

.search-overlay__results:not(.is-visible) {
	display: none;
}

/* ---- Result list ---- */

.search-results__list {
	list-style: none;
	margin: 0;
	padding: var(--space-2);
}

.search-results__item {
	margin: 0;
}

.search-results__link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-text);
	transition: background-color var(--transition-fast);
}

.search-results__link:hover {
	background-color: var(--color-bg-secondary);
	text-decoration: none;
	color: var(--color-text);
}

.search-results__thumb {
	flex-shrink: 0;
	width: 56px;
	height: 42px;
	border-radius: var(--radius-sm);
	object-fit: cover;
}

.search-results__thumb--placeholder {
	background-color: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
}

.search-results__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.search-results__title {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-results__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.search-results__type {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.15em 0.5em;
	border-radius: var(--radius-full);
	white-space: nowrap;
}

.search-results__type--news {
	background-color: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.search-results__type--tutorial {
	background-color: #dcfce7;
	color: #15803d;
}

.search-results__excerpt {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Empty state */
.search-results__empty {
	padding: var(--space-8) var(--space-4);
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Skip link
 * ---------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-4);
	background-color: var(--color-primary);
	color: #fff;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	font-weight: var(--font-weight-semibold);
	z-index: var(--z-modal);
	transition: top var(--transition-fast);
}

.skip-link:focus {
	top: var(--space-4);
	color: #fff;
	text-decoration: none;
}