/*
 * 🇬🇧 ENGLISH
 * NAVBAR STYLING
 *
 * 🇧🇷 PORTUGUÊS BRASILEIRO
 * PERONSALIZAÇÃO DA BARRA DE NAVEGAÇÃO
 *
 * 🇵🇹 PORTUGUÊS
 * ESTILIZAÇÃO DE BARRA DE NAVEGAÇÃO
 */

/* -------------------------------------------------------------------------- */
/* 🇬🇧 Shared structural base
/* 🇧🇷 Base estrutural compartilhada
/* 🇵🇹 Base estrutural partilhada
/* -------------------------------------------------------------------------- */

.navbar
{
  background-color: var(--navbar-surface);
  box-shadow: var(--shadow-elevation-sm);
  left: 0;
  position: fixed;
  top: -1px;
  width: 100%;
  z-index: 1000;
  transition: 
    height var(--transition-speed) var(--transition-ease),
    background-color 0.3s ease;
}

.container-fluid
{
  box-sizing: border-box;
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--navbar-padding-x);
  width: 100%;
  position: relative;
}

.logomark-wrapper
{
  display: flex;
  transition: width var(--transition-speed) var(--transition-ease);
  height: 50px;
  width: 50px;
}

.monogram-wrapper
{
  display: flex;
  opacity: 1;
  overflow: hidden;
  height: 50px;
  width: 150px;
  transition: 
    width var(--transition-speed) var(--transition-ease),
    opacity var(--transition-speed) var(--transition-ease),
    margin var(--transition-speed) var(--transition-ease);
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧 Desktop navbar (visible >= 1024px)
/* 🇧🇷 Barra de navegação para computadores (visível >= 1024px)
/* 🇵🇹 Barra de navegação para computadores (visível >= 1024px)
/* -------------------------------------------------------------------------- */

.navbar-desktop
{
  display: none;
  height: var(--navbar-height-desktop);
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧 Scrollable state and navbar height shrink
/* 🇧🇷 Estado rolável e redução da altura da barra de navegação
/* 🇵🇹 Estado deslocável e redução da altura da barra de navegação
/* -------------------------------------------------------------------------- */

/* 🇬🇧 1. To shrink the navbar during the scrolling */
/* 🇧🇷 1. Reduzir a barra de navegação durante a rolagem */
/* 🇵🇹 1. Reduzir a barra de navegação durante a deslocação  */
.navbar-desktop.scrolled
{
  backdrop-filter: var(--backdrop-blur-sm);
  background-color: var(--navbar-surface-scrolled);
  box-shadow: var(--shadow-elevation-lg);
  height: var(--navbar-height-scrolled);
}

/* 🇬🇧 2. To hide the monogram by scrolling the page and shrinking the navbar */
/* 🇧🇷 2. Ocultar o monograma ao rolar a página e reduzir a barra de navegação */
/* 🇵🇹 2. Ocultar o monograma ao deslocar a página e reduzir a barra de navegação */
.navbar-desktop.scrolled .monogram-wrapper
{
  margin: 0;
  opacity: 0;
  width: 0;
}

/* 🇬🇧 3. To adjust the logomark size by scrolling the page and shrinking the navbar */
/* 🇧🇷 3. Ajustar o tamanho do logótipo ao rolar a página e reduzir a barra de navegação */
/* 🇵🇹 3. Ajustar o tamanho do logótipo ao deslocar a página e reduzir a barra de navegação */
.navbar-desktop.scrolled .logomark-wrapper
{
  width: 40px;
}

.desktop-actions
{
  display: flex;
  align-items: center;
  gap: 2rem;
}

.menu-list
{
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list a
{
  color: var(--navbar-menu-items-anchor-color_01);
  font-family: var(--lusitana);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding-bottom: 5px;
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}

.menu-list a::after
{
  background-color: var(--navbar-menu-items-anchor-color_02);
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transition: width 0.3s ease;
  width: 0;
}

.menu-list a:hover,
.menu-list .current-menu-item a
{
  color: var(--navbar-menu-items-anchor-color_02);
}

.menu-list a:hover::after,
.menu-list .current-menu-item a::after
{
  width: 100%;
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧 Mobile navbar (visible < 1024px) */
/* 🇧🇷 Barra de navegação para dispositivos móveis (visible < 1024px) */
/* 🇵🇹 Barra de navegação para dispositivos móveis (visible < 1024px) */
/* -------------------------------------------------------------------------- */

.navbar-mobile
{
  height: var(--navbar-height-mobile);
  position: fixed;
  display: block;
}

.navbar-mobile .container-fluid
{
  gap: 1rem;
}

.navbar-mobile .mode-toggle-mobile
{
  margin-left: auto;
}

.mobile-checkbox
{
  display: none;
  position: absolute;
  opacity: 0;
}

.mobile-hamburger
{
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 30px;
  height: 24px;
  position: relative;
  z-index: 1010;
  justify-content: center;
}

.mobile-hamburger .bar
{
  background-color: var(--navbar-hamburger-icon-bar-color);
  border-radius: 2px;
  display: block;
  height: 3px;
  transition: all 0.3s ease;
  width: 100%;
}

.mobile-drawer
{
  background-color: var(--navbar-drawer);
  border-top: 1px solid var(--navbar-mobile-subtle-border-color);
  left: 0;
  max-height: 0;
  overflow: hidden;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 1005;
  transition: max-height 0.4s ease-in-out;
}

.mobile-list
{
  list-style: none;
  margin: 0;
  padding: 1rem var(--navbar-padding-x);
}

.mobile-list li
{
  border-bottom: 1px solid var(--navbar-mobile-subtle-border-color);
}

.mobile-list li:last-child
{
  border-bottom: none;
}

.mobile-list a
{
  color: var(--navbar-menu-items-anchor-color_01);
  display: block;
  font-family: var(--lusitana);
  font-weight: 700;
  padding: 1.2rem 0;
  text-decoration: none;
}

.mobile-checkbox:checked ~ .mobile-drawer
{
  max-height: 600px;
}

.mobile-checkbox:checked ~ .mobile-hamburger .bar:nth-child(1)
{
  transform: translateY(8px) rotate(45deg);
}

.mobile-checkbox:checked ~ .mobile-hamburger .bar:nth-child(2)
{
  opacity: 0;
}

.mobile-checkbox:checked ~ .mobile-hamburger .bar:nth-child(3)
{
  transform: translateY(-8px) rotate(-45deg);
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧   Consolidated Declarations
/* 🇧🇷🇵🇹 Declarações Consolidadas
/* -------------------------------------------------------------------------- */

.brand,
.brand-visuals,
.logomark-wrapper,
.monogram-wrapper,
.mode-toggle
{
  align-items: center;
  display: flex;
}

.mode-toggle
{
  background: transparent;
  border: none;
  cursor: pointer;
  height: 40px;
  width: 40px;
  transition: opacity 0.3s ease;
}

.mode-toggle:hover
{
  opacity: 0.7;
}

.mode-toggle-mobile .mode-icon
{
  width: 24px;
  height: 24px;
}

.logo-img,
.monogram-img,
.mode-icon
{
  display: block;
  height: auto;
  max-width: 100%;
  transition: all var(--transition-speed) var(--transition-ease);
}

.menu-list a,
.mobile-list a
{
  text-transform: uppercase;
}