/*
Theme Name: Silcosa
Theme URI: https://silcosa.pt
Author: Codinove
Description: Tema à medida para a Silcosa — soluções sustentáveis em cortiça. Construído a partir do design Rhythm.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: silcosa
*/

:root {
  --ink: #111111;
  --grey: #555555;
  --line: #ece5da;
  --paper: #fdfaf5;
  --soft: #f4ede1;
  --green: #57a534;
  --green-dark: #3d7f24;
  --cork: #7a5230;
  --cork-dark: #5c3d22;
  --cork-tan: #c8a06a;
  --sand: #f4ecdd;
  --green-tint: #eef6e8;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Hanken Grotesk", arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 34px;
}
section {
  padding: 130px 0;
}
h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
/* label pattern from Rhythm: small centered eyebrow + big heading */
.label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--green-dark);
  margin-bottom: 16px;
}
.heading {
  font-size: clamp(30px, 4.4vw, 50px);
  color: var(--ink);
}
.sec-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 66px;
}
.muted {
  color: var(--grey);
  font-weight: 400;
}
/* Rhythm square button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 18px 38px;
  border: 2px solid var(--cork);
  background: var(--cork);
  color: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn:hover {
  background: var(--cork-dark);
  border-color: var(--cork-dark);
}
.btn-ghost {
  background: transparent;
  color: var(--cork);
}
.btn-ghost:hover {
  background: var(--cork);
  color: #fff;
}

/* ===== HEADER (top horizontal nav) ===== */
header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 26px 0;
  transition: all 0.3s ease;
}
header.scrolled {
  background: rgba(247, 240, 229, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  padding: 14px 0;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand img {
  height: 48px;
  transition: height 0.3s ease;
}
header.scrolled .brand img {
  height: 42px;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 40px;
}
/* menu recolhível — header clean */
.nav-links {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(340px, 84%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  list-style: none;
  background: #f7f0e5;
  padding: 52px;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  box-shadow: -30px 0 70px -30px rgba(58, 39, 23, 0.4);
  z-index: 90;
}
.nav-links.open {
  transform: translateX(0);
}
.nav-links a {
  font-size: 22px;
  font-weight: 500;
  color: var(--cork-dark);
  transition: color 0.2s ease;
}
.nav-links a:hover {
  color: var(--green-dark);
}
.lang-switch {
  display: inline-flex;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}
.lang-switch button {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  color: #bbb;
  padding: 0;
}
.lang-switch button.active {
  color: var(--green-dark);
}
.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 100;
}
.menu-toggle span {
  width: 28px;
  height: 2px;
  background: var(--cork-dark);
  transition: background 0.3s ease;
}
header:not(.scrolled) .menu-toggle span {
  background: var(--ink);
}

/* ===== HERO (centered) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* Slideshow do hero: uma camada por imagem, crossfade via .is-active. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(2px) saturate(1.05);
  transform: scale(1.06);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.is-active {
  opacity: 1;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(248, 242, 232, 0.58) 0%,
    rgba(248, 242, 232, 0.44) 45%,
    rgba(248, 242, 232, 0.62) 100%
  );
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}
.hero-inner {
  max-width: 900px;
  padding: 120px 34px 60px;
}
.hero .label {
  color: var(--green-dark);
}
.hero h1 {
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.hero h1 .g {
  color: var(--green-dark);
}
.hero p {
  font-size: clamp(18px, 2.2vw, 23px);
  color: var(--grey);
  max-width: 40ch;
  margin: 0 auto 40px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.scroll-dot {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--grey);
  background: #fff;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 8px);
  }
}

/* ===== MISSION ===== */
.mission .cols {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 70px;
  align-items: center;
}
.mission h2 {
  font-size: clamp(28px, 3.6vw, 44px);
}
.mission p {
  color: var(--grey);
  font-size: 17px;
  margin-bottom: 18px;
}

/* ===== SERVICES ===== */
.services {
  background: var(--soft);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.svc {
  background: #fff;
  padding: 46px 38px;
  border-top: 4px solid var(--green);
  box-shadow: 0 30px 60px -44px rgba(17, 17, 17, 0.4);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.svc:nth-child(3n + 2) {
  border-top-color: var(--cork-tan);
}
.svc:nth-child(3n + 3) {
  border-top-color: var(--cork);
}
.svc:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 70px -40px rgba(17, 17, 17, 0.45);
}
.svc .no {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: 0.05em;
}
.svc h3 {
  font-size: 23px;
  margin: 16px 0 12px;
}
.svc p {
  font-size: 15.5px;
  color: var(--grey);
  margin-bottom: 22px;
}
.svc a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--green);
  padding-bottom: 4px;
}
.svc a:hover {
  color: var(--green-dark);
}

/* ===== GREEN CTA band (cor!) ===== */
.band {
  background: linear-gradient(120deg, var(--green-dark), var(--green));
  color: #fff;
  text-align: center;
  padding: 96px 0;
}
.band h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 14px;
}
.band p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 52ch;
  margin: 0 auto 32px;
  font-size: 17px;
}
.band .btn {
  border-color: #fff;
  background: #fff;
  color: var(--cork);
}
.band .btn:hover {
  background: transparent;
  color: #fff;
}

/* ===== PROCESS ===== */
.process .grid-3 {
  gap: 46px;
}
.step {
  text-align: center;
}
.step .n {
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
}
.step:nth-child(2) .n {
  background: linear-gradient(135deg, var(--cork-tan), var(--cork));
}
.step:nth-child(3) .n {
  background: linear-gradient(135deg, var(--green), var(--cork));
}
.step h3 {
  font-size: 21px;
  margin-bottom: 10px;
}
.step p {
  color: var(--grey);
  font-size: 15.5px;
  max-width: 32ch;
  margin: 0 auto;
}

/* ===== WHY (image + reasons) ===== */
.why {
  background: var(--green-tint);
}
.why .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.why-img img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.reason {
  padding: 24px 0;
  border-bottom: 1px solid rgba(87, 165, 52, 0.28);
}
.reason:first-of-type {
  border-top: 1px solid rgba(87, 165, 52, 0.28);
}
.reason h3 {
  font-size: 19px;
  margin-bottom: 6px;
}
.reason h3 .no {
  color: var(--green-dark);
  margin-right: 10px;
}
.reason p {
  color: var(--grey);
  font-size: 15.5px;
}

/* ===== CONTACT ===== */
.contact .cols {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 70px;
  align-items: start;
}
.cinfo {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.cinfo:first-of-type {
  border-top: 1px solid var(--line);
}
.cinfo .k {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--grey);
  margin-bottom: 4px;
}
.cinfo .v {
  font-size: 19px;
  font-weight: 600;
}
.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field {
  margin-bottom: 22px;
}
label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
input,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  padding: 15px 16px;
  border: 1.5px solid var(--line);
  background: #fff;
  transition: border-color 0.2s ease;
}
input::placeholder,
textarea::placeholder {
  color: #b3b3b3;
}
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--cork);
  box-shadow: 0 0 0 3px rgba(122, 82, 48, 0.12);
}
textarea {
  resize: vertical;
  min-height: 130px;
}
.form-note {
  font-size: 13px;
  color: var(--grey);
  margin-top: 14px;
}
.toast {
  display: none;
  margin-top: 18px;
  color: var(--green-dark);
  font-weight: 600;
}

/* ===== FOOTER ===== */
footer.site {
  background: #3a2717;
  color: rgba(255, 255, 255, 0.7);
  padding: 60px 0 30px;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.foot-brand img {
  height: 50px;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
}
.foot-brand p {
  font-size: 15px;
  max-width: 34ch;
}
.foot-col h4 {
  color: #fff;
  font-size: 15px;
  margin-bottom: 14px;
}
.foot-col ul {
  list-style: none;
  display: grid;
  gap: 10px;
}
.foot-col a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}
.foot-col a:hover {
  color: #fff;
}
.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 24px;
}
.foot-bottom .cr {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.funding {
  display: block;
  max-width: 380px;
  width: 100%;
}
.funding img {
  width: 100%;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 920px) {
  section {
    padding: 90px 0;
  }
  .mission .cols,
  .why .cols,
  .contact .cols {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .foot-top {
    grid-template-columns: 1fr 1fr;
  }
  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(300px, 82%);
    flex-direction: column;
    justify-content: center;
    background: #fff;
    padding: 40px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -20px 0 60px -30px rgba(0, 0, 0, 0.4);
  }
  .nav-links.open {
    transform: translateX(0);
  }
  .nav-links a {
    font-size: 20px;
  }
  .menu-toggle {
    display: flex;
  }
}
@media (max-width: 560px) {
  .row-2 {
    grid-template-columns: 1fr;
  }
  .foot-top {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------
   WordPress additions
   The design above is untouched; everything below adapts it to the
   markup WordPress, Polylang and Contact Form 7 actually output.
   --------------------------------------------------------------- */

/* Polylang renders the switcher as a list, not the design's buttons. */
.lang-switch ul,
.lang-switch .lang-list {
  display: inline-flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lang-switch li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lang-switch li::marker,
.lang-switch li::before {
  content: none;
}
.lang-switch a {
  color: #bbb;
  font-weight: 600;
  text-transform: uppercase;
}
.lang-switch .current-lang a,
.lang-switch .current-lang > a {
  color: var(--green-dark);
}

/* Contact Form 7 */
.wpcf7-form p {
  margin: 0;
}
.wpcf7 .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 18px 38px;
  border: 2px solid var(--cork);
  background: var(--cork);
  color: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
  width: auto;
}
.wpcf7 .wpcf7-submit:hover {
  background: var(--cork-dark);
  border-color: var(--cork-dark);
}
.wpcf7-response-output {
  margin: 22px 0 0 !important;
  padding: 14px 18px !important;
  border: 1px solid var(--line) !important;
  background: var(--green-tint);
  font-size: 15px;
}
.wpcf7-not-valid-tip {
  color: #b3261e;
  font-size: 13px;
  margin-top: 6px;
}
.wpcf7-spinner {
  margin: 0 0 0 12px;
}

/* Blog, archives and standalone pages */
.page-body {
  padding: 190px 0 130px;
}
.container-narrow {
  max-width: 820px;
}
.entry p {
  margin-bottom: 20px;
  color: var(--grey);
}
.entry h2,
.entry h3 {
  margin: 40px 0 16px;
}
.entry ul,
.entry ol {
  margin: 0 0 20px 22px;
  color: var(--grey);
}
.entry img {
  margin: 26px 0;
}
.entry blockquote {
  border-left: 3px solid var(--green);
  padding-left: 22px;
  margin: 26px 0;
  color: var(--grey);
  font-style: italic;
}
.entry a {
  color: var(--green-dark);
  text-decoration: underline;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 60px;
  font-weight: 600;
}
.pagination .current {
  color: var(--green-dark);
}

/* WordPress core alignment and caption classes */
.alignleft {
  float: left;
  margin: 6px 26px 20px 0;
}
.alignright {
  float: right;
  margin: 6px 0 20px 26px;
}
.aligncenter {
  margin: 26px auto;
}
.wp-caption-text,
.screen-reader-text {
  font-size: 14px;
  color: var(--grey);
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Quem somos / Missão / Visão / Valores, sobre textura de cortiça.
   O véu claro mantém a paleta quente do resto do site: a fotografia
   lê-se como textura, não como um bloco escuro fora do tom. */
.empresa {
  position: relative;
  background-image: var(--empresa-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.empresa::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(253, 250, 245, 0.93),
    rgba(244, 236, 221, 0.95)
  );
}
.empresa > .container {
  position: relative;
  z-index: 1;
}
.empresa-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 66px;
}
.empresa-mark {
  height: 58px;
  width: auto;
  margin: 0 auto 30px;
}
.empresa-intro {
  color: var(--grey);
  margin-top: 18px;
}
.pilares {
  align-items: stretch;
}
.pilar {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  padding: 40px 34px;
}
.pilar:nth-child(2) {
  border-top-color: var(--cork-tan);
}
.pilar:nth-child(3) {
  border-top-color: var(--cork);
}
.pilar h3 {
  font-size: 22px;
  margin-bottom: 14px;
}
.pilar p {
  color: var(--grey);
}

@media (max-width: 900px) {
  .empresa {
    background-attachment: scroll;
  }
}

/* Ícone no título de cada pilar. A cor acompanha a do topo do cartão. */
.pilar h3 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pilar-icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-dark);
}
.pilar-icone svg {
  width: 24px;
  height: 24px;
  display: block;
}
.pilar:nth-child(2) .pilar-icone {
  background: #f7efe2;
  color: #a97c42;
}
.pilar:nth-child(3) .pilar-icone {
  background: #f2e9e0;
  color: var(--cork);
}

/* Assinatura da Codinove no rodapé */
.foot-bottom .cr a {
  color: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color 0.2s ease;
}
.foot-bottom .cr a:hover {
  border-bottom-color: currentColor;
}

@media (max-width: 920px) {
  .empresa-head {
    margin-bottom: 44px;
  }
  .empresa-mark {
    height: 46px;
    margin-bottom: 22px;
  }
  .pilar {
    padding: 32px 26px;
  }
}
@media (max-width: 560px) {
  .empresa-mark {
    height: 40px;
  }
  .pilar h3 {
    font-size: 20px;
    gap: 12px;
  }
  .pilar-icone {
    width: 40px;
    height: 40px;
  }
  .pilar-icone svg {
    width: 21px;
    height: 21px;
  }
}

/* Botões da abertura com a mesma largura.
   O .btn dimensiona-se pelo conteúdo, por isso "As nossas soluções" e
   "Pedir orçamento" saíam com larguras diferentes. */
.hero-actions .btn {
  min-width: 264px;
  justify-content: center;
}
@media (max-width: 560px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    min-width: 0;
    width: 100%;
  }
}

/* Página de construção — servida ao público antes do lançamento. */
.construcao {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px 24px;
  background-image: var(--construcao-bg);
  background-size: cover;
  background-position: center;
}
.construcao::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(253, 250, 245, 0.93),
    rgba(244, 236, 221, 0.95)
  );
}
.construcao-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
}
.construcao-marca {
  height: 70px;
  width: auto;
  margin: 0 auto 34px;
}
.construcao h1 {
  font-size: clamp(28px, 4.4vw, 44px);
  margin-bottom: 18px;
}
.construcao p {
  color: var(--grey);
  font-size: 18px;
  margin-bottom: 34px;
}
@media (max-width: 560px) {
  .construcao-marca {
    height: 52px;
    margin-bottom: 26px;
  }
  .construcao p {
    font-size: 16px;
  }
}

/* Painel do menu: centrado quando cabe, deslizável quando não cabe.
   Com `justify-content: center` e conteúdo mais alto que o ecrã, o topo da
   lista sai para fora e fica inalcançável — não há scroll que lá chegue.
   As margens automáticas centram quando há espaço e recolhem quando não há. */
.nav-links {
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-links > li:first-child {
  margin-top: auto;
}
.nav-links > li:last-child {
  margin-bottom: auto;
}

/* A barra do WordPress tapa o topo do painel a quem tem sessão iniciada. */
body.admin-bar .nav-links {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .nav-links {
    top: 46px;
  }
}

/* Painel mais estreito, para não encostar ao seletor de idioma.
   O padding desce junto com a largura: o item mais longo — "Porquê a
   Silcosa" — tem de continuar a caber numa linha. */
.nav-links {
  width: min(300px, 84%);
  padding: 44px 40px;
}
.nav-links a {
  white-space: nowrap;
}
@media (max-width: 920px) {
  .nav-links {
    width: min(270px, 80%);
    padding: 40px 34px;
  }
}

/* Seletor de idioma escondido enquanto o painel está aberto.
   Ambos vêm do canto direito; sem isto, o seletor fica pousado por cima do
   painel — visível, mas com ar de erro. */
body.menu-aberto .lang-switch {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
.lang-switch {
  transition:
    opacity 0.25s ease 0.1s,
    visibility 0.25s ease 0.1s;
}

/* Seletor de idioma legível.
   O `#bbb` do design dava 1,7:1 sobre o creme do cabeçalho — o idioma inativo
   era praticamente invisível. O verde do idioma ativo dava 4,4:1, também
   abaixo do mínimo. Os valores abaixo dão 6,6:1 e 5,2:1.
   O sublinhado no ativo evita depender só da cor para distinguir os dois. */
.lang-switch button,
.lang-switch a {
  color: var(--grey);
  transition: color 0.2s ease;
}
.lang-switch button:hover,
.lang-switch a:hover {
  color: var(--cork-dark);
}
.lang-switch button.active,
.lang-switch .current-lang a {
  color: #377220;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}