/* The language switcher (src/i18n/language-switch.mjs) and room for translated labels (docs/localisation-architecture.md).
   Loaded only on pages that offer another edition of the site; while English is the only edition, no page loads it. */

/* Context for screen readers after a language's visible name ("Español, ver esta página en español"). */
.lang-hint{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}

/* Header, desktop widths: one control left of "Log in", with a short rule between them. A globe and the current
   language's name open the list; the width is the same for any number of languages. The globe is a language-neutral cue
   for a reader who does not read the current language; it never appears alone. */
.site-navigation .lang-switch{position:relative;display:flex;align-items:center;flex:0 0 auto;margin-right:-7px}
.site-navigation .lang-switch::after{content:"";flex:none;width:1px;height:20px;margin-left:10px;background:var(--sn-button-border,#afc4b9)}
.site-navigation .lang-switch-link{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;border-radius:6px;color:var(--sn-ink,#244140)!important;font:500 14px/20px Inter,Arial,sans-serif;white-space:nowrap;cursor:pointer;list-style:none;transition:background .15s ease}
/* The site's accordion styles (styles.css, disclosure-controls.css) give every details a rule and padding, and every
   summary a marker, a plus sign and room for it. */
.site-navigation :is(.lang-menu,.sn-language-menu){margin:0;padding:0;border:0}
.site-navigation :is(.lang-menu,.sn-language-menu)>summary{list-style:none;padding-inline-end:10px!important}
.site-navigation :is(.lang-menu,.sn-language-menu)>summary::-webkit-details-marker{display:none}
.site-navigation :is(.lang-menu,.sn-language-menu)>summary::before,.site-navigation :is(.lang-menu,.sn-language-menu)>summary::after{content:none!important;display:none!important}
.site-navigation .lang-switch-link:hover,.site-navigation .lang-menu[open] .lang-switch-link{background:var(--sn-button-hover,#eaf2eb)}
.site-navigation .lang-switch-link:active{transform:scale(.97)}
.site-navigation :is(.lang-switch-link,.sn-language-trigger):focus-visible{outline:2px solid currentColor;outline-offset:3px}
.site-navigation[data-pointer-input] :is(.lang-switch-link,.sn-language-trigger):focus{outline:none}
.site-navigation .lang-globe{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round}
.site-navigation .lang-chevron{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.site-navigation :is(.lang-menu,.sn-language-menu)[open] .lang-chevron{transform:rotate(180deg)}
/* The list: every language by its own name; one without this page says where it leads, in that language. A white
   panel on every header palette, like the menu panels, so its ink is fixed. */
.site-navigation .lang-list{position:absolute;top:calc(100% + 10px);right:11px;z-index:3;display:grid;gap:2px;min-width:220px;max-height:min(70vh,560px);overflow-y:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--sn-border,#dce6df);border-radius:10px;box-shadow:0 18px 40px -12px #173b3033,0 4px 12px #173b3008;box-sizing:border-box;transform-origin:top right;animation:lang-open .16s cubic-bezier(.23,1,.32,1)}
.site-navigation :is(.lang-list,.sn-language-list) li{margin:0;padding:0}
.site-navigation .lang-list-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;min-height:44px;padding:6px 12px;border-radius:6px;color:#244140!important;font:500 14px/20px Inter,Arial,sans-serif;box-sizing:border-box;transition:background .15s ease}
.site-navigation .lang-note{grid-column:1;font-size:12.5px;line-height:17px;font-weight:400;color:#557069}
@media(hover:hover){.site-navigation a.lang-list-item:hover{background:#f0f6f1}}
.site-navigation a.lang-list-item:focus-visible{background:#f0f6f1;outline:2px solid #244140;outline-offset:-2px}
.site-navigation .lang-list-item[aria-current]{font-weight:600;background:#f0f6f1}
.site-navigation .lang-list-item[aria-current]::after{content:"";grid-column:2;grid-row:1;width:10px;height:6px;margin-top:-3px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg)}
@keyframes lang-open{from{opacity:0;transform:translateY(-4px) scale(.98)}}

/* Room. The header's compact sizes (site-navigation.css, up to 1280px) run on to 1366px here, so the jump to full-size
   type at 1281px cannot push "Create account" out of the bar. Translated editions, whose menu labels run longer, keep
   the compact sizes up to 1440px and take a slightly smaller logo and gaps below 1280px. Measured on 10 and 12 October
   2026 with sample menus, the bar has room at every desktop width when the bar's own labels keep within the budget in
   docs/localisation-architecture.md. public/site-navigation.js is the last resort for enlarged text: it tightens the
   switcher (data-lang-tight) and only then steps it aside (data-lang-overflow); the footer keeps every language.
   Re-measured on 20 October 2026: the Spanish bar ran 15px over at 1181px with 12px gaps and a 160px logo, so the
   switcher stepped aside up to 1199px; 8px gaps and a 150px logo leave it room there. */
@media(max-width:1366px) and (min-width:1181px){
 .site-navigation .nav-inner{gap:15px;padding-inline:24px}
 .site-navigation .logo{width:175px!important}
 .site-navigation .sn-top-link{font-size:14px;padding-inline:3px}
 .site-navigation .sn-groups{gap:2px}
 .site-navigation .nav-account{gap:12px}
 .site-navigation .lang-switch{margin-right:-2px}
 .site-navigation .lang-switch::after{margin-left:8px}
 .site-navigation .lang-switch-link{padding:0 8px}
 .site-navigation .lang-menu>summary{padding-inline-end:8px!important}
}
@media(max-width:1439px) and (min-width:1367px){
 html:not([lang="en"]) .site-navigation .nav-inner{gap:15px;padding-inline:24px}
 html:not([lang="en"]) .site-navigation .logo{width:175px!important}
 html:not([lang="en"]) .site-navigation .sn-top-link{font-size:14px;padding-inline:3px}
 html:not([lang="en"]) .site-navigation .sn-groups{gap:2px}
 html:not([lang="en"]) .site-navigation .nav-account{gap:12px}
}
@media(max-width:1279px) and (min-width:1181px){
 html:not([lang="en"]) .site-navigation .nav-inner{gap:8px}
 html:not([lang="en"]) .site-navigation .logo{width:150px!important}
}
.site-navigation[data-lang-tight] .lang-switch{margin-right:0}
.site-navigation[data-lang-tight] .lang-switch::after{display:none}
.site-navigation[data-lang-tight] .lang-switch-link{padding:0 6px}
.site-navigation[data-lang-overflow] .lang-switch{display:none}

/* Notes under the switcher: arriving from a page that is not translated yet, and the offer of the reader's own language.
   They float over the page, so nothing below them moves. */
.site-navigation .lang-note-pop{position:absolute;top:calc(100% + 8px);right:var(--lang-note-right,32px);z-index:4;display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 8px;max-width:400px;padding:12px 6px 12px 16px;background:#fff;color:#244140;border:1px solid var(--sn-border,#dce6df);border-radius:12px;box-shadow:0 18px 40px -12px #173b3033,0 4px 12px #173b3008;font:400 14px/1.55 Inter,Arial,sans-serif;box-sizing:border-box;animation:lang-open .2s cubic-bezier(.23,1,.32,1)}
.site-navigation .lang-note-pop p{flex:1 1 220px;margin:0;padding:8px 0}
.site-navigation .lang-note-pop p a{font-weight:600;color:#244140!important;text-decoration:underline!important;text-underline-offset:3px;white-space:nowrap}
.site-navigation .lang-note-close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-2px 0;padding:0;border:0;border-radius:8px;background:none;color:#244140;cursor:pointer}
.site-navigation .lang-note-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.site-navigation .lang-note-actions{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:0 10px 2px 0}
.site-navigation .lang-note-go{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;background:#244140;color:#fff!important;font-weight:600;text-decoration:none!important}
.site-navigation .lang-note-no{min-height:44px;padding:0 10px;border:0;border-radius:8px;background:none;color:#244140;font:500 14px/20px Inter,Arial,sans-serif;cursor:pointer}
@media(hover:hover){.site-navigation :is(.lang-note-close,.lang-note-no):hover{background:#f0f6f1}.site-navigation .lang-note-go:hover{background:#163830}}
.site-navigation :is(.lang-note-close,.lang-note-no,.lang-note-go):focus-visible{outline:2px solid #244140;outline-offset:2px}
.site-navigation[data-mobile-open] .lang-note-pop{display:none}

/* Phones and tablets: the bar keeps "Log in", so the switcher is a row of the menu instead, last, above the account box
   (owner, 16 October 2026); the same control opens the list in place, like the menu's sections. */
.site-navigation .sn-languages{display:none}
@media(max-width:1180px){
 .site-navigation .lang-switch{display:none}
 .site-navigation .lang-note-pop{left:16px;right:16px;max-width:none}
 .site-navigation .sn-languages{display:block;flex-shrink:0;margin-top:auto;padding-top:24px}
 .site-navigation .sn-language-menu{border-top:1px solid #dce6df}
 .site-navigation .sn-language-trigger{display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 0!important;color:var(--sn-ink,#244140);font:500 16px/1.35 Inter,Arial,sans-serif;cursor:pointer}
 .site-navigation .sn-language-trigger .lang-name{flex:1}
 .site-navigation .sn-language-trigger .lang-globe{width:18px;height:18px}
 .site-navigation .sn-language-trigger .lang-chevron{width:16px;height:16px;padding:6px;box-sizing:content-box;border-radius:8px;background:#eaf0e9}
 .site-navigation .sn-language-menu[open] .sn-language-trigger .lang-chevron{background:#244140;color:#f8faf7}
 .site-navigation .sn-language-list{display:grid;gap:2px;margin:0;padding:0 0 14px;list-style:none}
 .site-navigation .sn-language-list .lang-list-item{min-height:48px;padding:6px 12px;font-size:15px}
}

/* Footer: a second route before the copyright line, never the only one. The dots are drawn, so screen readers say
   nothing between the names. */
.centre-footer .cf-languages{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}
.centre-footer .cf-languages li{display:flex;align-items:center;margin:0;padding:0}
.centre-footer .cf-languages li+li::before{content:"";width:3px;height:3px;margin:0 10px;border-radius:50%;background:var(--cf-muted)}
.centre-footer .cf-language{display:inline-flex;align-items:center;min-height:44px}
.centre-footer .cf-language[aria-current]{color:var(--cf-ink);font-weight:600}
@media(prefers-reduced-motion:reduce){.site-navigation :is(.lang-chevron,.lang-switch-link,.lang-list,.lang-note-pop,.lang-list-item){transition:none;animation:none}.site-navigation .lang-switch-link:active{transform:none}}

/* Translated pages: labels run longer than English. In the phone menu's account buttons a long label ("Créer un
   compte") wraps instead of running under its arrow. English pages keep their layout. */
@media(max-width:680px){
 html:not([lang="en"]) .site-navigation .sn-account-panel .nav-account a{white-space:normal;text-align:center;line-height:1.25}
 html:not([lang="en"]) .site-navigation .sn-account-panel .nav-account a>span{min-width:0}
}