/* =====================================================================
   The filters of the home page /eng/ (index.php), added 2026-10-20: one glass bar,
   of the same material as the site header (wd-header.css).
   The buttons, their order and the scripts (MixItUp, the country list, the search) are the theme's own;
   only their look is set here.
   - All / Books / Movies / Sites and Camps / Ghettos sit in two tracks inside the bar; the chosen filter
     is a white pill. The words are shown in sentence case (the page keeps "all", "CAMPS", "select country").
   - Select country: a globe and an arrow, inside a yellow line. When a country is chosen, its flag takes
     the place of the globe and the button turns white (the browsers without :has() simply keep it as it is).
   - The list of countries: a dark glass panel of flag tiles; the chosen one has a yellow frame and a tick.
   - The search: a dark field inside the bar, a yellow line around it while typing.
   - The switch of the views (2026-10-21), at the end of the bar: the grid or the list of the studies
     (index.php, assets/css/wd-home-cards.css); the chosen view is yellow. It is not shown on phones.
   - Below 1260px the bar is a panel of two rows (the search and the switch under the filters); on phones, of three rows.
   Loaded by header-home_eng.php after the theme's style-en.css. Many rules need !important,
   because the theme's own rules for these buttons have it.
   ===================================================================== */

/* ---------- the bar ---------- */
.header__body .header__navigation{--f-yellow:#ffc107;--f-navy:#1a2334;--f-text:#d5dce6;--f-muted:#9fb2c8;
	position:relative;z-index:20;gap:8px!important;width:fit-content;max-width:calc(100% - 32px);margin:34px auto 6px!important;padding:6px!important;border-radius:999px;
	background:rgba(18,26,40,.74);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.1),0 24px 48px -28px rgba(0,0,0,.9);
	font-family:Transat,sans-serif;letter-spacing:0}
.header__body .header__navigation > .d-flex{align-items:center;gap:8px}
/* the two tracks: the kinds of studies, and camps and ghettos */
.header__body .header__navigation .header__tabs,.header__body .header__navigation .header_tegs{display:flex;align-items:center;gap:2px!important;margin:0!important;padding:4px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.header__body .header__navigation .couantry_wrapp{margin:0!important}

/* ---------- the buttons ---------- */
.header__body .header__navigation .tabs__tab{display:inline-block!important;height:40px;margin:0!important;padding:0 18px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--f-text)!important;
	font-family:Transat,sans-serif!important;font-weight:300!important;font-size:15px!important;line-height:40px!important;letter-spacing:.01em;white-space:nowrap;text-transform:lowercase!important;
	-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.header__body .header__navigation .tabs__tab::first-letter{text-transform:uppercase}
/* the chosen filter: a white pill; its words a little heavier, without growing, so the row does not move */
.header__body .header__navigation .tabs__tab.active{background:#fff!important;color:var(--f-navy)!important;-webkit-text-stroke:.4px currentColor}
.header__body .header__navigation .tabs__tab:focus{outline:0}
.header__body .header__navigation .tabs__tab:focus-visible{outline:2px solid var(--f-yellow);outline-offset:3px}

/* Select country: a globe on the left, an arrow on the right */
.header__body .header__navigation .select-btn{position:relative;height:48px;padding:0 40px 0 44px!important;line-height:48px!important;box-shadow:inset 0 0 0 1px rgba(255,193,7,.5)}
.header__body .header__navigation .select-btn::before{content:"";position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc107' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.4 9h17.2M3.4 15h17.2M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center/18px no-repeat}
.header__body .header__navigation .select-btn::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.75;transition:transform .2s ease,margin .2s ease}
/* the list is open: the arrow points up */
.header__body .header__navigation .couantry_wrapp:has(#FilterSelect.active) .select-btn::after{margin-top:-2px;transform:rotate(225deg)}
/* a country is chosen: the button is white, with the flag of the country in place of the globe */
.header__body .header__navigation .couantry_wrapp:has(#FilterSelect .filter.active) .select-btn{background:#fff!important;color:var(--f-navy)!important;-webkit-text-stroke:.4px currentColor;box-shadow:none}
.header__body .header__navigation .couantry_wrapp:has(#FilterSelect .filter.active) .select-btn::before{width:22px;height:15px;margin-top:-7.5px;border-radius:3px;transform:translateX(-2px);box-shadow:0 0 0 1px rgba(26,35,52,.22)}
.header__body .header__navigation .couantry_wrapp:has(.filter.Austria.active) .select-btn::before{background:url(../img/site/austria.jpg) center/cover}
.header__body .header__navigation .couantry_wrapp:has(.filter.Czech.active) .select-btn::before{background:url(../img/site/czech.jpg) center/cover}
.header__body .header__navigation .couantry_wrapp:has(.filter.France.active) .select-btn::before{background:url(../img/site/france.jpg) center/cover}
.header__body .header__navigation .couantry_wrapp:has(.filter.German.active) .select-btn::before{background:url(../img/site/german.jpg) center/cover}
.header__body .header__navigation .couantry_wrapp:has(.filter.Greece.active) .select-btn::before{background:url(../img/site/greece.jpg) center/cover}
.header__body .header__navigation .couantry_wrapp:has(.filter.Hungary.active) .select-btn::before{background:url(../img/site/hungary.jpg) center/cover}
.header__body .header__navigation .couantry_wrapp:has(.filter.Italy.active) .select-btn::before{background:url(../img/site/italy.jpg) center/cover}
.header__body .header__navigation .couantry_wrapp:has(.filter.Poland.active) .select-btn::before{background:url(../img/site/poland.jpg) center/cover}
.header__body .header__navigation .couantry_wrapp:has(.filter.Slovak.active) .select-btn::before{background:url(../img/site/slovak.jpg) center/cover}
.header__body .header__navigation .couantry_wrapp:has(.filter.Spain.active) .select-btn::before{background:url(../img/site/spain.jpg) center/cover}
.header__body .header__navigation .couantry_wrapp:has(.filter.Ukraine.active) .select-btn::before{background:url(../img/site/ukraine.jpg) center/cover}

/* ---------- the search ---------- */
.header__body .header__navigation .search{display:flex;align-items:center;height:48px;margin:0!important;padding:0 4px 0 18px!important;overflow:visible;border-radius:999px!important;background:rgba(255,255,255,.06)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:box-shadow .2s ease}
.header__body .header__navigation .search:focus-within{box-shadow:inset 0 0 0 1px rgba(255,193,7,.75)}
.header__body .header__navigation .search__text{margin:0!important;padding:0 12px 0 0!important;background:transparent!important;color:var(--f-muted)!important;font-size:15px;letter-spacing:0;text-transform:none!important;white-space:nowrap}
.header__body .header__navigation .search__input{width:200px;min-width:0;padding:0!important;border:0!important;background:transparent!important;color:#fff!important;font:300 15px Transat,sans-serif;letter-spacing:0;outline:0!important;box-shadow:none!important}
.header__body .header__navigation .search__input::placeholder{color:rgba(213,220,230,.5);opacity:1}
.header__body .header__navigation .search__button{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;color:var(--f-yellow);transition:background-color .2s ease}
.header__body .header__navigation .search__button:focus{outline:0}
.header__body .header__navigation .search__button:focus-visible{outline:2px solid var(--f-yellow);outline-offset:2px}
.header__body .header__navigation .search__icon,.header__body .header__navigation .search__button:hover .search__icon{width:22px;height:22px;fill:currentColor!important;transition:none}

/* ---------- the list of countries: it opens with the theme's own movement ---------- */
/* while it is closed, its flags cannot be reached with the Tab key (the theme only shrinks the list to nothing) */
.header__body .header__navigation #FilterSelect{visibility:hidden}
.header__body .header__navigation #FilterSelect.active{visibility:visible}
/* the panel is solid: inside the bar a second blur cannot reach the cards under it, and their words would show through */
.header__body .header__navigation #FilterSelect{top:calc(100% + 14px)!important;width:440px!important;padding:12px!important;border-radius:22px;background:linear-gradient(180deg,#18212f,#121a27)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -24px rgba(0,0,0,.9)}
.header__body .header__navigation #FilterSelect > .d-flex{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.header__body .header__navigation #FilterSelect .filter{width:auto!important;height:auto!important;aspect-ratio:12/7.2;margin:0!important;border-radius:12px;overflow:hidden;background-color:#1c2943!important;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:box-shadow .2s ease}
.header__body .header__navigation #FilterSelect .filter:focus{outline:0}
.header__body .header__navigation #FilterSelect .filter:focus-visible{outline:2px solid var(--f-yellow);outline-offset:2px}
/* the name of the country on a dark shade at the foot of the flag; the theme's box for a tick is not needed */
.header__body .header__navigation #FilterSelect .filter span{left:0!important;right:0;bottom:0!important;transform:none!important;padding:20px 10px 7px!important;background:linear-gradient(0deg,rgba(9,13,21,.88),rgba(9,13,21,0))!important;color:#fff!important;
	font-family:Transat,sans-serif;font-weight:700;font-size:12.5px!important;line-height:1.2;letter-spacing:.03em;text-align:left;text-transform:none!important}
.header__body .header__navigation #FilterSelect .filter span::before{content:none}
/* the chosen country: a yellow frame and a tick */
.header__body .header__navigation #FilterSelect .filter.active{box-shadow:inset 0 0 0 2px var(--f-yellow)}
.header__body .header__navigation #FilterSelect .filter.active span::after{content:"";position:absolute;top:auto;right:8px;bottom:7px;left:auto;width:16px;height:16px;border:0;border-radius:50%;
	background:var(--f-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2334' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.3 4.3L19 7.2'/%3E%3C/svg%3E") center/11px no-repeat}

/* ---------- pointing: only on screens with a mouse, so a tap on a phone leaves nothing lit ---------- */
@media (hover: hover){
	.header__body .header__navigation .tabs__tab:hover{background:rgba(255,255,255,.1)!important;color:#fff!important}
	.header__body .header__navigation .tabs__tab.active:hover{background:#fff!important;color:var(--f-navy)!important}
	.header__body .header__navigation .search__button:hover{background:rgba(255,255,255,.1)!important}
	.header__body .header__navigation #FilterSelect .filter:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
	.header__body .header__navigation #FilterSelect .filter.active:hover{box-shadow:inset 0 0 0 2px var(--f-yellow)}
}
/* phones and tablets: 16px in the field, so the phone does not zoom in on it */
@media (pointer: coarse){
	.header__body .header__navigation .search__input{font-size:16px}
}

/* ---------- the switch of the views (2026-10-21): the same track as All / Books / Movies / Sites.
   The chosen view is yellow, as the current page in the header, so it is not taken for one more filter ---------- */
.header__body .header__navigation .wd-view{display:flex;align-items:center;flex:none;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.header__body .header__navigation .wd-view__btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--f-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.header__body .header__navigation .wd-view__btn svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.header__body .header__navigation .wd-view__btn[aria-pressed="true"]{background:rgba(255,255,255,.1);color:var(--f-yellow);box-shadow:inset 0 0 0 1px rgba(255,193,7,.42)}
.header__body .header__navigation .wd-view__btn:focus{outline:0}
.header__body .header__navigation .wd-view__btn:focus-visible{outline:2px solid var(--f-yellow);outline-offset:3px}
/* the words Grid and List: for screen readers only (the buttons also have a tooltip) */
.header__body .header__navigation .wd-view__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (hover: hover){
	.header__body .header__navigation .wd-view__btn:hover{background:rgba(255,255,255,.1);color:#fff}
	.header__body .header__navigation .wd-view__btn[aria-pressed="true"]:hover{color:var(--f-yellow)}
}

/* ---------- below 1260px: a panel of two rows; the search and the switch of the views under the filters ---------- */
@media (max-width: 1259.98px){
	.header__body .header__navigation{flex-direction:row!important;flex-wrap:wrap!important;justify-content:center;width:calc(100% - 24px);max-width:760px;padding:8px!important;border-radius:26px}
	.header__body .header__navigation .search{flex:1 1 100%}
	.header__body .header__navigation .search__input{flex:1 1 auto;width:auto}
}
@media (min-width: 576px) and (max-width: 1259.98px){
	.header__body .header__navigation .search{flex:1 1 calc(100% - 112px);min-width:0}
}
/* ---------- phones: three rows; Select country takes the rest of its row ---------- */
@media (max-width: 575.98px){
	.header__body .header__navigation{width:100%;margin-top:22px!important;padding:6px!important;border-radius:24px}
	.header__body .header__navigation .header__tabs{width:100%;justify-content:space-between}
	.header__body .header__navigation .tabs__tab{padding:0 13px!important}
	.header__body .header__navigation > .d-flex.flex-row{max-width:none!important;gap:6px!important}
	.header__body .header__navigation .couantry_wrapp{flex:1 1 auto!important;max-width:none!important}
	.header__body .header__navigation .couantry_wrapp .select-btn{padding:0 28px 0 34px!important}
	.header__body .header__navigation .select-btn::before{left:12px}
	.header__body .header__navigation .select-btn::after{right:13px}
	.header__body .header__navigation #FilterSelect{width:min(392px,calc(100vw - 16px))!important;padding:10px!important}
	.header__body .header__navigation #FilterSelect > .d-flex{gap:8px}
	/* one view only on phones: no switch */
	.header__body .header__navigation .wd-view{display:none}
}
/* narrow phones (360px and less): a little smaller, so the second row stays on one line */
@media (max-width: 379.98px){
	.header__body .header__navigation .tabs__tab{font-size:14px!important}
	.header__body .header__navigation .header_tegs .tabs__tab{padding:0 11px!important}
	.header__body .header__navigation .couantry_wrapp .select-btn{padding:0 24px 0 31px!important}
	.header__body .header__navigation .select-btn::before{left:9px}
	.header__body .header__navigation .select-btn::after{right:10px}
}
@media (max-width: 339.98px){
	.header__body .header__navigation > .d-flex.flex-row{flex-wrap:wrap;justify-content:center}
}

/* ---------- browsers without the blur behind glass: the bar a little darker ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
	.header__body .header__navigation{background:rgba(18,26,40,.92)}
}
@media (prefers-reduced-motion: reduce){
	.header__body .header__navigation .tabs__tab,.header__body .header__navigation .select-btn::after,.header__body .header__navigation .search,
	.header__body .header__navigation .search__button,.header__body .header__navigation #FilterSelect,.header__body .header__navigation #FilterSelect .filter,.header__body .header__navigation .wd-view__btn{transition:none!important}
}