/* Shared approval preview. Translation routes are added when content is ready. */
header .language-selector { position: relative; flex-shrink: 0; margin-left: auto; color: #eee; font-family: "Roboto", Arial, sans-serif; }
.crossbcn-header .language-selector { color: #18191b; }
header .language-selector summary { display: flex; align-items: center; gap: 8px; padding: 10px 0 10px 12px; cursor: pointer; list-style: none; font-size: 11px; letter-spacing: 1.5px; line-height: 20px; }
header .language-selector summary::-webkit-details-marker { display: none; }
header .language-globe { width: 19px; height: 19px; }
header .language-chevron { width: 10px; height: 10px; }
header .language-selector[open] summary, header .language-selector summary:hover { color: #fab702; }
header .language-selector[open] .language-chevron { transform: rotate(180deg); }
header .language-panel { position: absolute; right: 0; top: calc(100% + 18px); width: 420px; max-height: calc(100dvh - 110px); overflow-y: auto; padding: 24px; background: #202123; border: 1px solid #ffffff26; border-top: 2px solid #fab702; box-shadow: 0 18px 50px #0006; text-align: left; }
header .language-heading { margin: 0 0 18px; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.5; }
header .language-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
header .language-options :is(button, a) { display: flex; justify-content: space-between; align-items: center; padding: 9px 8px; border: 0; background: transparent; color: #ccc; font: inherit; font-size: 13px; line-height: 1.5; text-align: start; letter-spacing: 0; text-decoration: none; }
header .language-options button:disabled { opacity: 1; cursor: default; }
/* Keep all labels on the same column edge; only the name itself sets direction. */
header .language-name { unicode-bidi: isolate; }
header .language-options :is(button, a)[lang="ar"] .language-name { font-size: 15px; line-height: 19.5px; }
header .language-options :is(button, a)[aria-current] { background: #fab70214; color: #fab702; }
header .language-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #ffffff1a; color: #aaa; font-size: 11px; line-height: 1.6; }
header .language-selector :focus-visible { outline: 2px solid #fab702; outline-offset: 4px; }
@media (min-width: 1600px) {
 header .language-selector { position: absolute; right: 40px; top: 28px; }
}
/* Reserve room for the selector before the navigation becomes crowded. */
@media (max-width: 1399px) {
 #homepage header .nav-toggle, .project-gallery-page header .nav-toggle { display: block; order: 3; margin: 0; }
 #homepage header #site-nav, .project-gallery-page header #site-nav { display: none; position: absolute; top: 96px; left: 0; width: 100%; padding: 22px 24px; background: #18191bf5; flex-direction: column; align-items: flex-start; gap: 0; transform: none; }
 #homepage header.menu-open #site-nav, .project-gallery-page header.menu-open #site-nav { display: flex; }
 #homepage header #site-nav a, .project-gallery-page header #site-nav a { padding: 8px 0; text-align: left; line-height: 30px; }
 #homepage header #site-nav a::after, .project-gallery-page header #site-nav a::after { display: none; }
 header .language-selector { order: 2; }
 .crossbcn-header .nav-toggle { order: 3; }
}
@media (max-width: 1023px) {
 #homepage header #site-nav, .project-gallery-page header #site-nav { top: 84px; }
}
@media (max-width: 767px) {
 #homepage header .home-header-inner, .project-gallery-page header .home-header-inner { gap: 12px; }
 header .home-brand-logo, header .brand-logo { width: clamp(120px, calc(100vw - 200px), 230px); }
 header .home-brand-logo img, header .brand-logo img { width: 100%; }
 header .language-selector summary { padding-left: 0; gap: 5px; }
 header .language-selector .language-panel { position: fixed; top: 84px; right: 16px; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 100px); padding: 20px; }
 header .language-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 #homepage header .nav-toggle, .project-gallery-page header .nav-toggle { padding: 8px; }
 header .nav-label { display: none; }
}

header .language-options a:hover { color: #fab702; background: #ffffff08; }