/*
Theme Name: Serov Law
Theme URI: https://serovlaw.com/
Author: Serov Law
Description: Tema a medida para serovlaw.com. Despacho de derecho internacional privado en Marbella. Diseno institucional en azul marino y oro, con EB Garamond y Lato. Multiidioma con Polylang y formulario con WPForms.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: serovlaw
Tags: custom-menu, translation-ready, accessibility-ready, one-column
*/

/* ============================================================
   SEROV LAW — INSTITUCIONAL CLASICO
   Azul marino + oro. EB Garamond / Lato.
   Este CSS es el mismo de la maqueta estatica aprobada, mas un
   bloque final con lo propio de WordPress (WPForms, Polylang,
   clases de alineacion y la barra de administracion).
   ============================================================ */
:root{
  --navy:#0F2340; --navy-700:#1B3A6B; --navy-050:#EDF1F7;
  --gold:#7E5F1C; --gold-soft:#C9A961;
  --bg:#FBFCFD; --surface:#FFFFFF; --ink:#121A28; --ink-soft:#4A5568;
  --border:#D6DEE8; --hairline:#E7EDF4;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem;
  --maxw:1140px; --radius:2px;
  /* PT Sans solo cubre cirilico: respaldo automatico para el ruso,
     porque Lato no trae ese subconjunto. El navegador cambia glifo a
     glifo, asi que el espanol y el ingles se ven exactamente igual. */
  --sans:Lato,"PT Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"EB Garamond",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.65 var(--sans);}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;
  letter-spacing:-.01em;margin:0}
p{margin:0 0 1.1em}
a{color:var(--navy-700)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--radius)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s3)}
.eyebrow{font:700 .72rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 var(--s2)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s2);top:var(--s2);z-index:99;background:var(--navy);color:#fff;
  padding:.75rem 1.25rem;border-radius:var(--radius)}

/* ---------- barra de credenciales ---------- */
.topbar{background:var(--navy);color:#C6D2E4;font-size:.8rem;letter-spacing:.03em}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);
  align-items:center;justify-content:space-between;min-height:44px;padding-block:.5rem}
.topbar strong{color:#fff;font-weight:700}
.cole-corto{display:none}
@media(max-width:700px){.cole-largo{display:none}.cole-corto{display:inline}}
.langs{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.langs a{display:inline-flex;align-items:center;min-height:44px;padding:.25rem .7rem;
  color:#C6D2E4;text-decoration:none;border:1px solid transparent;border-radius:var(--radius);
  transition:background .2s,color .2s,border-color .2s}
.langs a:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.langs [aria-current]{color:var(--navy);background:var(--gold-soft);font-weight:700}

/* ---------- cabecera ---------- */
.site-head{position:sticky;top:0;z-index:40;background:rgba(251,252,253,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding-block:var(--s2)}
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit}
.brand img{height:62px;width:auto}          /* logo integro, sin recortes */
.brand-txt{font-family:var(--serif);font-size:1.08rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy);line-height:1.1}
.brand-txt span{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;
  color:var(--ink-soft);margin-top:.35rem}
@media(max-width:560px){
  .brand img{height:48px}
  .brand-txt{font-size:.92rem;letter-spacing:.1em}
  .brand-txt span{display:none}
}
.nav-wrap{display:flex;align-items:center;gap:var(--s3)}
.nav{display:flex;align-items:center;gap:var(--s1)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;
  font-size:.92rem;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;
  white-space:nowrap;transition:color .2s,border-color .2s}
.nav a:hover{color:var(--navy-700);border-bottom-color:var(--gold)}

/* boton de menu: oculto en escritorio */
.nav-toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;
  background:transparent;border:1px solid var(--border);border-radius:var(--radius);
  color:var(--navy);cursor:pointer;transition:border-color .2s,background .2s}
.nav-toggle:hover{border-color:var(--navy);background:var(--navy-050)}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle .icono-cerrar{display:none}
.nav-toggle[aria-expanded="true"] .icono-abrir{display:none}
.nav-toggle[aria-expanded="true"] .icono-cerrar{display:block}

@media(max-width:1080px){
  .nav-toggle{display:inline-flex}
  .nav-wrap{position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--surface);
    border-bottom:1px solid var(--border);box-shadow:0 20px 40px -28px rgba(15,35,64,.45);
    padding:var(--s2) var(--s3) var(--s3);display:none}
  body.menu-abierto .nav-wrap{display:flex}
  .nav{flex-direction:column;align-items:stretch;gap:0}
  .nav a{min-height:52px;padding:0;border-bottom:1px solid var(--hairline);font-size:1rem}
  .nav a:hover{border-bottom-color:var(--gold)}
  .nav-wrap .btn{margin-top:var(--s3)}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8rem 1.6rem;border-radius:var(--radius);cursor:pointer;
  font:700 .9rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-700);border-color:var(--navy-700)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--navy);background:var(--navy-050)}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-gold:hover{background:#664B14;border-color:#664B14}

/* ---------- hero ---------- */
.hero{position:relative;background:
   linear-gradient(180deg,#fff 0%,var(--navy-050) 100%);
   border-bottom:1px solid var(--border);overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:3px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--gold) 50%,var(--navy) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s5);
  align-items:center;padding-block:var(--s6)}
.hero h1{font-size:clamp(2.4rem,5.2vw,3.9rem);color:var(--navy);margin-bottom:var(--s3)}
.hero .lead{font-size:1.2rem;color:var(--ink-soft);max-width:34ch;margin-bottom:var(--s4)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2)}
.rule-gold{width:64px;height:2px;background:var(--gold);margin:0 0 var(--s3)}
.hero-mark{display:grid;place-items:center;padding:var(--s4);
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 1px 0 var(--hairline),0 24px 48px -32px rgba(15,35,64,.35)}
.hero-mark img{width:min(300px,100%)}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:var(--s4);padding-block:var(--s5)}
  /* Apilado, el texto va primero. Con la caja del logo delante, el titular
     y los botones caian por debajo del corte de pantalla. */
  .hero-mark{padding:var(--s3)}
  .hero-mark img{width:min(220px,70%)}
}
@media(max-width:700px){
  /* En movil la caja del logo sobra: el mismo logo esta en la cabecera fija
     justo encima. Ocupaba 220 px y empujaba los botones fuera de pantalla. */
  .hero-mark{display:none}
  /* Los dos rellenos verticales se sumaban: 96 de la seccion + 64 del
     contenedor = 160 px de hueco vacio antes de nada. */
  .hero.seccion{padding-block:var(--s3) var(--s4)}
  .hero .wrap{padding-block:var(--s2) var(--s3)}
}

/* ---------- sello de credenciales ---------- */
.creds{background:var(--surface);border-bottom:1px solid var(--hairline)}
.creds .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hairline);padding:0}
.cred{background:var(--surface);padding:var(--s4) var(--s3);text-align:center}
.cred dt{font:700 .68rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.5rem}
.cred dd{margin:0;font-family:var(--serif);font-size:1.5rem;color:var(--navy);line-height:1.2}
.cred dd small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--ink-soft);
  margin-top:.35rem;letter-spacing:.02em}
@media(max-width:820px){.creds .wrap{grid-template-columns:repeat(2,1fr)}}

/* ---------- secciones ---------- */
.seccion{padding-block:var(--s6)}
.sec-head{max-width:62ch;margin-bottom:var(--s5)}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--navy);margin-bottom:var(--s2)}
.sec-head p{color:var(--ink-soft);font-size:1.08rem}
.center{text-align:center;margin-inline:auto}
.titulo-seccion{font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--navy);margin-bottom:var(--s3)}
/* El titular de contacto va un punto por debajo del resto: comparte columna
   con el formulario y a tamano completo lo desequilibraba. */
.contacto .titulo-seccion{font-size:clamp(1.8rem,3.4vw,2.5rem)}

/* perfil */
.perfil{background:var(--surface);border-block:1px solid var(--hairline)}
.perfil .wrap{display:grid;grid-template-columns:280px 1fr;gap:var(--s5);align-items:start}
/* retrato enmarcado con paspartu, al gusto institucional */
.retrato{margin:0;position:relative;background:var(--surface);
  border:1px solid var(--border);padding:10px;
  box-shadow:0 22px 44px -34px rgba(15,35,64,.5)}
.retrato::after{content:"";position:absolute;inset:0;border:3px solid var(--gold);
  border-width:0 0 3px;pointer-events:none}
.retrato img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.retrato figcaption{font:700 .68rem/1.5 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);text-align:center;padding:.9rem .4rem .2rem}
.perfil blockquote{margin:0 0 var(--s3);padding-left:var(--s3);border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:1.35rem;line-height:1.5;color:var(--navy)}
.firma{font-family:var(--serif);font-size:1.2rem;color:var(--navy)}
.firma span{display:block;font:400 .85rem/1.5 var(--sans);color:var(--ink-soft);margin-top:.2rem}
@media(max-width:820px){.perfil .wrap{grid-template-columns:1fr}.retrato{max-width:260px}}

/* areas */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.area{background:var(--surface);border:1px solid var(--border);padding:var(--s4);
  display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s,border-color .25s}
.area:hover{box-shadow:0 20px 40px -28px rgba(15,35,64,.4);transform:translateY(-3px);
  border-color:var(--gold-soft)}
.area-ico{width:48px;height:48px;display:grid;place-items:center;margin-bottom:var(--s3);
  border:1px solid var(--gold-soft);color:var(--navy);border-radius:var(--radius)}
.area-ico svg{width:24px;height:24px}
.area h3{font-size:1.4rem;color:var(--navy);margin-bottom:.7rem}
.area p{color:var(--ink-soft);font-size:.97rem}
.area ul{list-style:none;margin:auto 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--hairline)}
.area li{position:relative;padding-left:1.4rem;margin-bottom:.55rem;font-size:.93rem;color:var(--ink-soft)}
.area li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--gold)}
@media(max-width:900px){.areas{grid-template-columns:1fr}}

/* metodo */
.metodo{background:var(--navy);color:#DCE5F1}
.metodo h2{color:#fff}
.metodo .sec-head p{color:#AFC0D8}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);counter-reset:p}
.paso{position:relative;padding-top:var(--s3);border-top:1px solid rgba(201,169,97,.4);counter-increment:p}
.paso::before{content:counter(p,decimal-leading-zero);font-family:var(--serif);
  font-size:2.4rem;color:var(--gold-soft);line-height:1;display:block;margin-bottom:.6rem}
.paso h3{font-size:1.25rem;color:#fff;margin-bottom:.5rem}
.paso p{color:#AFC0D8;font-size:.96rem;margin:0}
@media(max-width:820px){.pasos{grid-template-columns:1fr;gap:var(--s3)}}

/* honorarios */
.tarifas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);max-width:820px;margin-inline:auto}
.tarifa{background:var(--surface);border:1px solid var(--border);padding:var(--s4);text-align:center}
.tarifa .cifra{font-family:var(--serif);font-size:3.2rem;color:var(--navy);line-height:1;
  display:block;margin-bottom:.4rem}
.tarifa .cifra small{font-size:1.1rem;color:var(--ink-soft)}
.tarifa h3{font-family:var(--sans);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.8rem;font-size:.75rem}
.tarifa p{font-size:.92rem;color:var(--ink-soft);margin:0}
.nota{max-width:70ch;margin:var(--s4) auto 0;text-align:center;font-size:.92rem;color:var(--ink-soft)}
@media(max-width:700px){.tarifas{grid-template-columns:1fr}}

/* contacto */
.contacto{background:var(--surface);border-top:1px solid var(--hairline)}
.contacto .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s5);align-items:start}
.datos dl{margin:0}
.datos dt{font:700 .68rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.3rem}
.datos dd{margin:0 0 var(--s3);color:var(--ink)}
.datos dd a{color:var(--navy-700);display:inline-flex;align-items:center;min-height:44px}
.legal-box{background:var(--navy-050);border-left:2px solid var(--gold);padding:var(--s2) var(--s3);
  font-size:.86rem;color:var(--ink-soft)}
@media(max-width:860px){.contacto .wrap{grid-template-columns:1fr}}

/* footer */
.site-foot{background:var(--navy);color:#9FB2CC;font-size:.88rem;padding-block:var(--s5) var(--s3)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--s4);
  padding-bottom:var(--s4);border-bottom:1px solid rgba(255,255,255,.12)}
.foot-grid img{width:120px;margin-bottom:var(--s2)}
.foot-grid h4{font:700 .68rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:var(--s2)}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:0}
.foot-grid a{color:#9FB2CC;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot-grid a:hover{color:#fff;text-decoration:underline}
.foot-end{padding-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2);
  justify-content:space-between;color:#7E93B0;font-size:.82rem}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr;gap:var(--s3)}}


/* ============================================================
   A PARTIR DE AQUI: lo propio de WordPress
   ============================================================ */

/* la barra de admin es position:fixed y tapa la cabecera pegajosa */
body.admin-bar .site-head{top:32px}
@media(max-width:782px){body.admin-bar .site-head{top:46px}}

/* --- paginas interiores (legales, articulos) --- */
.pagina{padding-block:var(--s6)}
.pagina .wrap{max-width:78ch}
.pagina .entrada h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--navy);
  margin:var(--s5) 0 var(--s2)}
.pagina .entrada h3{font-size:1.3rem;color:var(--navy);margin:var(--s4) 0 var(--s2)}
.pagina .entrada ul,.pagina .entrada ol{padding-left:1.3rem;margin:0 0 1.1em}
.pagina .entrada li{margin-bottom:.5rem}
.pagina .entrada a{color:var(--navy-700)}
.pagina .entrada table{width:100%;border-collapse:collapse;margin:0 0 var(--s3);font-size:.94rem}
.pagina .entrada th,.pagina .entrada td{text-align:left;padding:.7rem .8rem;
  border-bottom:1px solid var(--hairline);vertical-align:top}
.pagina .entrada th{font:700 .68rem/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.cabecera-pagina{background:var(--navy);color:#DCE5F1;padding-block:var(--s5)}
.cabecera-pagina h1{color:#fff;font-size:clamp(2rem,4.4vw,3rem)}
.cabecera-pagina .eyebrow{color:var(--gold-soft)}

/* clases de alineacion que genera el editor de WordPress */
.alignleft{float:left;margin:.4rem var(--s3) var(--s2) 0}
.alignright{float:right;margin:.4rem 0 var(--s2) var(--s3)}
.aligncenter{display:block;margin-inline:auto}
.alignwide,.alignfull{margin-inline:auto}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:.85rem;color:var(--ink-soft)}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- WPForms: que el formulario case con el diseno --- */
/* WPForms trae su propia hoja de estilos; estas reglas la sobreescriben
   sin necesidad de desactivarla, para no romper su validacion ni su JS. */
.wpforms-container,.wpforms-container-full{margin:0!important}
.wpforms-form{display:grid!important;gap:var(--s3)!important}
/* WPForms mete todos los campos dentro de .wpforms-field-container y el
   aviso + boton dentro de .wpforms-submit-container. Sin rejilla en esos
   dos, el gap del formulario no llega a los campos y los separa WPForms
   con sus propios margenes, que no coinciden con la escala del diseno. */
.wpforms-form .wpforms-field-container,
.wpforms-form .wpforms-submit-container{display:grid;gap:var(--s3)}
.wpforms-form .wpforms-submit-container{margin-top:0!important} /* WPForms mete 10px */
.wpforms-form .wpforms-field{padding:0!important;margin:0!important;display:grid;gap:.45rem}

/* Los dos campos trampa del antispam ya los saca WPForms del flujo con
   position:absolute, asi que no hace falta ocultarlos aqui. */

/* El aviso legal va dentro del formulario, y ahi la hoja de WPForms pisa
   su tipografia y su relleno: hay que recuperarlos con la misma
   especificidad. */
.wpforms-form .legal-box{
  background:var(--navy-050)!important;border-left:2px solid var(--gold)!important;
  padding:var(--s2) var(--s3)!important;font-size:.86rem!important;
  line-height:1.65!important;color:var(--ink-soft)!important;
  margin:0 0 1.1em!important}
.wpforms-form .wpforms-field-label{font:700 .8rem/1.4 var(--sans)!important;
  color:var(--ink)!important;margin:0!important;display:block}
.wpforms-form .wpforms-required-label{color:var(--gold)!important;
  border:0!important;margin-left:.15rem}
.wpforms-form input[type=text],
.wpforms-form input[type=email],
.wpforms-form input[type=tel],
.wpforms-form textarea,
.wpforms-form select{
  font:400 1rem/1.5 var(--sans)!important;color:var(--ink)!important;
  background:var(--bg)!important;border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;padding:.85rem 1rem!important;
  /* WPForms fija una altura de 48px que se come el padding y deja los
     campos mas bajos que en la maqueta. Con height:auto manda el padding. */
  height:auto!important;min-height:48px!important;
  width:100%!important;max-width:100%!important;
  box-shadow:none!important;transition:border-color .2s,box-shadow .2s}
/* En el textarea manda la altura minima, no el atributo rows. */
.wpforms-form textarea{height:auto!important;min-height:150px!important;resize:vertical}
.wpforms-form input:hover,.wpforms-form textarea:hover{border-color:#AEBCCE!important}
.wpforms-form input:focus,.wpforms-form textarea:focus{
  outline:none!important;border-color:var(--navy)!important;
  box-shadow:0 0 0 3px rgba(15,35,64,.12)!important}
.wpforms-form .wpforms-field-description{font-size:.83rem!important;
  line-height:1.65!important; /* WPForms lo fija en 17px y aprieta el texto */
  color:var(--ink-soft)!important;margin:0!important}
.wpforms-form .wpforms-submit-container{padding:0!important}
.wpforms-form button[type=submit]{
  display:inline-flex!important;align-items:center;justify-content:center;
  min-height:48px!important;padding:.8rem 1.6rem!important;
  background:var(--gold)!important;color:#fff!important;
  border:1.5px solid var(--gold)!important;border-radius:var(--radius)!important;
  font:700 .9rem/1 var(--sans)!important;letter-spacing:.06em!important;
  text-transform:uppercase!important;cursor:pointer;
  transition:background .2s,border-color .2s}
.wpforms-form button[type=submit]:hover{
  background:#664B14!important;border-color:#664B14!important}
.wpforms-form .wpforms-error{color:#B3261E!important;font-size:.83rem!important;
  font-weight:400!important}
.wpforms-form input.wpforms-error,.wpforms-form textarea.wpforms-error{
  border-color:#B3261E!important}
.wpforms-confirmation-container-full{
  background:var(--navy-050)!important;border:0!important;
  border-left:2px solid var(--gold)!important;border-radius:0!important;
  padding:var(--s3)!important;color:var(--ink)!important}

/* --- Polylang: el conmutador de idioma en la barra superior --- */
.langs li{list-style:none}
.langs .lang-item a{display:inline-flex;align-items:center}
.langs .current-lang > a{color:var(--navy);background:var(--gold-soft);font-weight:700}