/*
 * Diwan Canada – Top Bar
 * Same graphite and cream as the footer's copyright bar (.dwf-footer-bottom).
 */

:root {
	--dwt-topbar-height: 38px;
}

.dwt-topbar {
	--dwt-bg: #2d2926;
	--dwt-text: #fff8ef;
	--dwt-muted: rgba(255, 248, 239, 0.72);
	--dwt-line: rgba(255, 248, 239, 0.24);
	--dwt-accent: #f28a3a;

	position: sticky; /* stays on screen while scrolling */
	top: 0;
	z-index: 20; /* above the header (z-index 10) so the language list can drop over it */
	background: var(--dwt-bg);
	color: var(--dwt-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

/* Three parts: social icons | the welcome offer | Join / Sign In, About Us and language. */
.dwt-topbar .dwt-topbar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	height: var(--dwt-topbar-height);
	padding-top: 0;
	padding-bottom: 0;
	white-space: nowrap;
}

/*
 * The header sticks just below the bar. These match the theme's own header
 * offsets for the WordPress admin bar (child theme style.css), plus the bar.
 */
html body .cs-header.diwan-header {
	top: var(--dwt-topbar-height) !important;
}

body.admin-bar .dwt-topbar {
	top: 32px;
}

html body.admin-bar .cs-header.diwan-header {
	top: calc(32px + var(--dwt-topbar-height)) !important;
}

@media screen and (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .dwt-topbar {
		top: 46px;
	}

	html body.admin-bar .cs-header.diwan-header {
		top: calc(46px + var(--dwt-topbar-height)) !important;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .dwt-topbar {
		top: 0;
	}

	html body.admin-bar .cs-header.diwan-header {
		top: var(--dwt-topbar-height) !important;
	}
}

/* Social icons: small cream circles, like the footer's. */
.dwt-topbar .dwt-social {
	grid-column: 1;
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dwt-topbar .dwt-social li {
	margin: 0;
	padding: 0;
}

.dwt-topbar .dwt-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--dwt-text);
	color: var(--dwt-bg);
	transition: background-color 0.15s, transform 0.15s;
}

.dwt-topbar .dwt-social a:hover {
	background: var(--dwt-accent);
	transform: translateY(-1px);
}

.dwt-topbar .dwt-social a:focus-visible,
.dwt-topbar .dwt-promo__link:focus-visible,
.dwt-topbar .dwt-topbar__links a:focus-visible,
.dwt-topbar .diwan-header__language > summary:focus-visible {
	outline: 2px solid var(--dwt-accent);
	outline-offset: 2px;
}

.dwt-topbar .dwt-social svg {
	width: 14px;
	height: 14px;
}

/* The welcome offer, in the middle. It links to the Sign in or join page. */
.dwt-topbar .dwt-promo {
	grid-column: 2;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
}

.dwt-topbar .dwt-promo__link {
	color: var(--dwt-text);
	text-decoration: none;
}

.dwt-topbar .dwt-promo__link strong {
	color: var(--dwt-accent);
	font-weight: 700;
}

.dwt-topbar .dwt-promo__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.dwt-topbar .dwt-promo__short {
	display: none;
}

/* Join / Sign In, About Us and the language switcher, at the far end. */
.dwt-topbar .dwt-topbar__end {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 16px;
}

/*
 * Join / Sign In now sits in the bar, so the header drops its own Sign in link.
 * Below 576px the bar has no room for it; there the header keeps its own rules
 * (and Sign in stays in the menu and footer).
 */
@media (min-width: 576px) {
	.diwan-header .diwan-header__actions .dwf-header__account {
		display: none;
	}
}

/* Smaller screens: the social icons step aside (they are still in the footer). */
@media (max-width: 859px) {
	.dwt-topbar .dwt-topbar__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.dwt-topbar .dwt-social {
		display: none;
	}

	.dwt-topbar .dwt-promo {
		grid-column: 1;
		text-align: start;
	}

	.dwt-topbar .dwt-topbar__end {
		grid-column: 2;
	}
}

/* Then the offer switches to its shorter wording. */
@media (max-width: 719px) {
	.dwt-topbar .dwt-promo__long {
		display: none;
	}

	.dwt-topbar .dwt-promo__short {
		display: inline;
	}
}

.dwt-topbar .dwt-topbar__links {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dwt-topbar .dwt-topbar__links li {
	margin: 0;
	padding: 0;
}

.dwt-topbar .dwt-topbar__links a {
	color: var(--dwt-text);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s;
}

.dwt-topbar .dwt-topbar__links a:hover {
	color: var(--dwt-accent);
}

.dwt-topbar .dwt-topbar__links .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.dwt-topbar .dwt-topbar__lang:not(.is-filled) {
	display: none;
}

.dwt-topbar .dwt-topbar__nav + .dwt-topbar__lang {
	padding-inline-start: 16px;
	border-inline-start: 1px solid var(--dwt-line);
}

/* The language switcher, restyled for the dark bar. */
.dwt-topbar .diwan-header__language {
	position: relative;
	color: var(--dwt-text);
	font-size: 13px;
	font-weight: 500;
}

.dwt-topbar .diwan-header__language > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0;
	list-style: none;
	cursor: pointer;
	transition: color 0.15s;
}

.dwt-topbar .diwan-header__language > summary::-webkit-details-marker {
	display: none;
}

.dwt-topbar .diwan-header__language > summary:hover {
	color: var(--dwt-accent);
}

.dwt-topbar .diwan-header__language-icon {
	display: block;
	width: 16px;
	height: 16px;
}

.dwt-topbar .diwan-header__language-label {
	display: inline;
}

.dwt-topbar .diwan-header__language-arrow {
	display: inline;
	font-size: 10px;
}

.dwt-topbar .diwan-header__language-options {
	position: absolute;
	top: 100%;
	inset-inline-end: 0;
	z-index: 100;
	width: 180px;
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--cs-color-border);
	border-radius: var(--cs-layout-elements-border-radius);
	background: var(--cs-color-submenu-background, var(--cs-site-background));
	box-shadow: 0 8px 24px rgba(45, 41, 38, 0.12);
	color: var(--cs-color-primary);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-align: start;
}

/*
 * The switcher's options link to this same page in each language (connected to
 * TranslatePress in diwan-topbar.php). The language being read is in bold.
 */
.dwt-topbar .diwan-header__language-options > li > a {
	display: block;
	padding: 9px;
	color: inherit;
	text-decoration: none;
	transition: color 0.25s;
}

.dwt-topbar .diwan-header__language-options > li > a:hover {
	color: var(--cs-color-secondary);
}

.dwt-topbar .diwan-header__language-options > li > a:focus-visible {
	outline: 2px solid var(--dwt-accent);
	outline-offset: -2px;
}

/* A line between options, wherever the language being read sits in the list. */
.dwt-topbar .diwan-header__language-options > li:not(:first-child) > a,
.dwt-topbar .diwan-header__language-options > li:not(:first-child) > strong {
	border-top: 1px solid var(--cs-color-border);
}

/* Phones */
@media (max-width: 575px) {
	.dwt-topbar .dwt-topbar__inner {
		gap: 10px;
	}

	.dwt-topbar .dwt-social {
		gap: 6px;
	}

	.dwt-topbar .dwt-topbar__end,
	.dwt-topbar .dwt-topbar__links {
		gap: 12px;
	}

	/* Join / Sign In and About Us are in the menu (☰) and the footer on phones. */
	.dwt-topbar .dwt-topbar__nav {
		display: none;
	}

	.dwt-topbar .dwt-topbar__nav + .dwt-topbar__lang {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

@media (max-width: 399px) {
	.dwt-topbar .diwan-header__language-label {
		display: none;
	}
}

@media print {
	.dwt-topbar {
		display: none;
	}
}