/* Styles of the language switcher (src/components/lang-switch.js) and of .nav-actions, which groups it
   with the menu button. Moved out of i18n.js on 28/09/2026; the menu items became links. */
.nav-actions{display:inline-flex;align-items:center;gap:14px;flex:0 0 auto}
.lang-switch{position:relative;display:inline-flex}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:6px 2px;font-family:"Azeret Mono",ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#666;cursor:pointer;transition:color .2s}
.lang-btn:hover,.lang-switch.open .lang-btn{color:#141414}
.lang-globe{display:block}
.lang-caret{display:block;opacity:.7;transition:transform .2s ease}
.lang-switch.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 12px);right:0;background:#fff;border:1px solid rgba(17,17,17,.10);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.10);padding:6px;display:none;flex-direction:column;min-width:168px;z-index:1100}
.lang-switch.open .lang-menu{display:flex}
.lang-menu a{display:flex;align-items:center;gap:11px;background:none;border:none;border-radius:8px;padding:10px 12px;font-family:"Azeret Mono",ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#141414;cursor:pointer;text-align:left;white-space:nowrap}
.lang-menu a:hover{background:#F7F7F7}
.lang-menu a[aria-current="true"]{color:#133D38;font-weight:700}
.lang-flag{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}

/* Case pages: the credits always sit on the left, and the link buttons go to the right when there are any
   (João, 03/10/2026: "Tem como todos ficarem alinhados à esquerda?"). Before, a page with a button had its
   credits pushed to the right by the space-between of the row. */
.live-row .credits{order:-1}
.live-row .live-actions{margin-left:auto}
/* The secondary link button with an icon (Figma, Webflow preview), for the case pages whose own style does not have it */
.live-link.is-secondary{background:transparent;color:var(--ink);border:1px solid var(--ink)}.live-link.is-secondary:hover{background:var(--ink);color:var(--bg)}
.live-link.has-icon{display:inline-flex;align-items:center;gap:10px}
.live-link__icon{height:14px;width:auto;flex:none;fill:currentColor}

/* Case pages: the name of each tool of the signature strip shows in a tooltip, on hover and on keyboard focus
   (João, 03/10/2026: "melhor ter um tooltip no hover"). The build wraps the icon and writes the name from its alt
   (scripts/build.mjs). */
#mo-cover .sig-block__tool{position:relative;display:inline-flex;border-radius:var(--radius-large)}
#mo-cover .sig-block__tool:focus-visible{outline:3px solid #fff;outline-offset:6px}
#mo-cover .sig-block__tool::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 16px);transform:translate(-50%,6px);
  padding:10px 16px;border-radius:6px;background:#fff;color:#141414;font:500 20px/1 var(--font-primary);letter-spacing:.04em;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
#mo-cover .sig-block__tool:hover::after,#mo-cover .sig-block__tool:focus-visible::after{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion: reduce){#mo-cover .sig-block__tool::after{transition:none}}

/* Project card: the one card of the site (home list, selected work on the hire page). The shell lives here and
   nowhere else: border, lift and shadow on hover, the image that grows, the title that takes the accent colour.
   A page adds only what is its own inside the card (text block, image position). Written on 03/10/2026 after the hire
   page was built with a card of its own and a hover that the site does not have (João: "isso só pode acontecer
   quando a gente não tem um sistema"). scripts/check.mjs refuses a page that defines these rules again. */
.proj{display:block;background:var(--paper);border:1px solid var(--line-soft);overflow:hidden;transition:transform .4s cubic-bezier(.16,.84,.44,1),box-shadow .4s ease}
.proj:hover{transform:translateY(-4px);box-shadow:0 26px 50px -22px rgba(0,0,0,.28)}
.proj-img{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.proj-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.16,.84,.44,1);filter:saturate(.96)}
.proj:hover .proj-img img{transform:scale(1.05)}
.proj h3{transition:color .25s}
.proj:hover h3{color:var(--gold)}