/*
* ----------[GLOBAL HEADER]--------*
* In Divi: set Section ID to "header-section" (or CSS Class "header-section")
* and Row ID to "header-row" (or CSS Class "header-row") so the drawer and mobile layout apply.
*/
#header-section,
.header-section {
  background: var(--black);
  display: flex;
  justify-content: center;
}
#header-row,
.header-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: center;
  width: 100%;
}
#header-section .et_pb_column,
#header-row .et_pb_column,
.header-section .et_pb_column,
.header-row .et_pb_column {
  width: auto;
  margin-right: 0;
}
#header-row .et_pb_column:first-child,
.header-row .et_pb_column:first-child {
  margin-right: auto;
}
/* Responsive logo in header first column (e.g. logo-mobile-lgh.svg) */
#header-section .et_pb_column:first-child img,
#header-section .et_pb_column:first-child svg,
.header-section .et_pb_column:first-child img,
.header-section .et_pb_column:first-child svg {
  max-width: 100%;
  height: auto;
  display: block;
}
#header-row .et_pb_column:nth-child(2),
.header-row .et_pb_column:nth-child(2) {
  margin-right: 40px;
}
#header-row .et_pb_column:nth-child(3),
.header-row .et_pb_column:nth-child(3) {
  margin-right: 30px;
}
#header-row .et_pb_column:nth-child(4),
.header-row .et_pb_column:nth-child(4) {
  margin-right: 0;
}

/* Drawer wrapper (desktop: inline flex) */
#header-row .header-drawer,
.header-row .header-drawer {
  display: flex;
  align-items: center;
  gap: 30px;
}
#header-row .header-drawer-toggle,
.header-row .header-drawer-toggle {
  display: none;
}
/* Close button only visible inside drawer on mobile */
#header-section .header-drawer-close,
.header-section .header-drawer-close {
  display: none;
}
.header-drawer-overlay {
  display: none;
}
/* Mobile-only drawer blocks should never appear on desktop */
#header-section .header-drawer .header-drawer-top,
#header-section .header-drawer .header-drawer-subscribe,
.header-section .header-drawer .header-drawer-top,
.header-section .header-drawer .header-drawer-subscribe {
  display: none;
}

/* Column 3: Main menu */
#header-section .menu-main-menu-container,
.header-section .menu-main-menu-container {
  list-style: none;
  margin: 0;
  padding: 0;
}
#header-section .menu-main-menu-container ul,
.header-section .menu-main-menu-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4rem;
}
#header-section .menu-main-menu-container li,
.header-section .menu-main-menu-container li {
  margin: 0;
  padding: 0;
}
#header-section .menu-main-menu-container a,
.header-section .menu-main-menu-container a {
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-inter-tight);
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  letter-spacing: var(--font-label-ls);
}
#header-section .menu-main-menu-container a:hover,
.header-section .menu-main-menu-container a:hover {
  color: var(--tan);
}

/* Column 4: Register button (outline: white border + text, transparent/black background) */
#header-section .custom-button,
.header-section .custom-button {
  display: inline-flex;
  width: 160px;
  height: 30px;
  padding: 5px 34px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid var(--white);
  background: transparent;
  color: var(--white);
  font-family: var(--font-inter-tight);
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  line-height: var(--font-label-lh);
  letter-spacing: var(--font-label-ls);
  text-decoration: none;
  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}
#header-section .custom-button:hover,
.header-section .custom-button:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

/*
* ----------[HEADER RESPONSIVE: DRAWER]--------*
*/
@media (max-width: 980px) {
  /* Mobile: row wraps; logo + hamburger on first row, message on second row */
  #header-row,
  .header-row {
    flex-wrap: wrap;
    align-items: center;
    padding: 0 3rem;
    gap: 0;
  }
  #header-section .et_pb_column,
  #header-row .et_pb_column,
  .header-section .et_pb_column,
  .header-row .et_pb_column {
    width: auto !important;
    margin-right: 0;
  }
  #header-row .et_pb_column:first-child,
  .header-row .et_pb_column:first-child {
    order: 1;
    margin: 0;
  }
  #header-row .header-drawer-toggle,
  .header-row .header-drawer-toggle {
    display: flex;
    order: 2;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--white);
    cursor: pointer;
  }
  #header-row .et_pb_column:nth-child(2),
  .header-row .et_pb_column:nth-child(2) {
    order: 3;
    width: 100%;
    margin-right: 0;
    flex-basis: 100%;
  }
  #header-row .et_pb_column:nth-child(3),
  .header-row .et_pb_column:nth-child(3) {
    margin-top: auto;
    margin-bottom: auto;
  }

  #header-row .header-drawer-toggle img,
  .header-row .header-drawer-toggle img {
    display: block;
    width: 24px;
    height: 24px;
  }
  #header-row .header-drawer-toggle .hamburger-lines,
  .header-row .header-drawer-toggle .hamburger-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }
  #header-row .header-drawer-toggle .hamburger-lines span,
  .header-row .header-drawer-toggle .hamburger-lines span {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
  }

  .header-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  body.drawer-open .header-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  #header-row .header-drawer,
  .header-row .header-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(680px, 100vw);
    max-width: 100vw;
    height: 100dvh;
    background: var(--black);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 1rem 3rem 2.5rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 10001;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
  }
  body.drawer-open #header-row .header-drawer,
  body.drawer-open .header-row .header-drawer {
    transform: translateX(0);
  }

  /* Drawer close button (visible only in drawer on mobile) */
  #header-section .header-drawer-close,
  .header-section .header-drawer-close {
    display: flex;
    align-self: flex-end;
    margin: -0.5rem -0.5rem 1.2rem 0;
    padding: 0.5rem;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
  }
  #header-section .header-drawer-close:hover,
  .header-section .header-drawer-close:hover {
    color: var(--tan);
  }
  #header-section .header-drawer-close svg,
  .header-section .header-drawer-close svg {
    width: 24px;
    height: 24px;
  }

  /* Drawer top row: logo + register */
  #header-section .header-drawer .header-drawer-top,
  .header-section .header-drawer .header-drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
  }
  #header-section .header-drawer .header-drawer-logo,
  .header-section .header-drawer .header-drawer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  #header-section .header-drawer .header-drawer-logo img,
  #header-section .header-drawer .header-drawer-logo svg,
  .header-section .header-drawer .header-drawer-logo img,
  .header-section .header-drawer .header-drawer-logo svg {
    display: block;
    width: clamp(98px, 18vw, 150px);
    height: auto;
  }

  /* Drawer nav: footer-style large links */
  #header-section .header-drawer .menu-main-menu-container ul,
  .header-section .header-drawer .menu-main-menu-container ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.8rem;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
  }
  #header-section .header-drawer .menu-main-menu-container a,
  .header-section .header-drawer .menu-main-menu-container a {
    color: var(--white);
    font-size: clamp(3.6rem, 8.2vw, 5.6rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
    padding: 0;
    display: block;
    transition: color 0.2s ease;
  }
  #header-section .header-drawer .menu-main-menu-container a:hover,
  .header-section .header-drawer .menu-main-menu-container a:hover {
    color: var(--tan);
  }

  /* Register in drawer top row */
  #header-section .header-drawer .header-drawer-register,
  .header-section .header-drawer .header-drawer-register {
    margin: 0;
    flex-shrink: 0;
    width: min(240px, 42vw);
    height: 42px;
    padding: 0 1.25rem;
    font-size: var(--font-label-size);
    font-weight: var(--font-label-weight);
    line-height: 1;
    letter-spacing: var(--font-label-ls);
    border-radius: 4px;
    border: 1px solid var(--white);
    color: var(--white);
    background: transparent;
    transition:
      color 0.2s ease,
      background 0.2s ease,
      border-color 0.2s ease;
  }
  #header-section .header-drawer .custom-button:hover,
  .header-section .header-drawer .custom-button:hover {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
  }

  /* Footer-like subscribe row in drawer */
  #header-section .header-drawer .header-drawer-subscribe,
  .header-section .header-drawer .header-drawer-subscribe {
    margin-bottom: auto;
    padding: 0 0 0.65rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-inter-tight);
    font-size: clamp(1rem, 2.8vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.02em;
  }
  #header-section .header-drawer .header-drawer-subscribe:hover,
  .header-section .header-drawer .header-drawer-subscribe:hover {
    color: var(--tan);
    border-bottom-color: var(--tan);
  }
  #header-section .header-drawer .header-drawer-subscribe img,
  .header-section .header-drawer .header-drawer-subscribe img {
    width: clamp(24px, 4.2vw, 38px);
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
  }
}

/*
* ----------[NOTIFICATION BAR]--------*
*/
#polybar {
  width: 100%;
  background: var(--yellow);
  color: var(--white);
  font-size: var(--copyFontSmall);
  text-align: center;
  z-index: 99999;
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-inter-tight);
}
#polybar .message-text {
  flex: 1 1 auto;
  font-size: var(--copyFontSmall);
  padding: 0 10px 0 50px;
}
#polybar .message-text a {
  color: var(--white);
  font-weight: 700;
}
#polybar .close-btn {
  margin-right: 20px;
  margin-left: 20px;
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
#polybar .close-btn:before {
  content: '';
  position: absolute;
  background-color: var(--white);
  height: 2px;
  top: 50%;
  left: 50%;
  width: 14px;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: all 0.3s ease-in-out;
}
#polybar .close-btn:after {
  content: '';
  position: absolute;
  background-color: var(--white);
  width: 2px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  height: 14px;
  transition: all 0.3s ease-in-out;
}
/*
* ----------[SOCIAL NETWORKS]--------*
*/
.social-networks-shortcode ul {
  list-style: none;
  padding: 0;
  display: flex;
}
.social-networks-shortcode ul li:not(:last-child) {
  margin-right: 35px;
}
.et-social-icon.fa-icon a.icon:before {
  content: '';
}
.social-networks-shortcode ul li a.icon i,
.social-networks-shortcode ul li a.icon svg {
  font-size: 16px;
  color: var(--default-color); /* Default color */
  fill: var(--default-color); /* Default color for SVG */
  transition:
    color 0.4s ease,
    fill 0.4s ease;
}
.social-networks-shortcode ul li a.icon:hover i,
.social-networks-shortcode ul li a.icon:hover svg {
  color: var(--primary-color); /* Hover color */
  fill: var(--primary-color); /* Hover color for SVG */
}