/* ============================================
   TOPBAR — THEME 3: WARM SAND
   ============================================ */

:root {
  /* ===============================
     TOPBAR COLORS (WARM SAND)
  =============================== */
  --ebtb20-topbar-background-color: #faf6f0;
  --ebtb20-topbar-border-color: #ecdcc8;
  --ebtb20-topbar-social-icon-color: #7c624d;
  --ebtb20-topbar-social-icon-hover-color: #c2410c;
  --ebtb20-topbar-contact-text-color: #7c624d;
  --ebtb20-topbar-contact-icon-color: #c2410c;
  --ebtb20-topbar-contact-hover-text-color: #c2410c;

  /* ===============================
     TOPBAR TYPOGRAPHY
  =============================== */
  --ebtb20-topbar-font-size: 0.8rem;
  --ebtb20-contact-link-font-weight: 600;

  /* ===============================
     TOPBAR SPACING
  =============================== */
  --ebtb20-topbar-padding-y: 0.6rem;
  --ebtb20-topbar-padding-x: 2rem;
  --ebtb20-social-icons-gap: 1.25rem;
  --ebtb20-contact-info-gap: 1.5rem;
  --ebtb20-contact-link-gap: 0.5rem;

  /* ===============================
     TOPBAR LAYOUT
  =============================== */
  --ebtb20-container-max-width: 1200px;

  /* ===============================
     TOPBAR BORDER
  =============================== */
  --ebtb20-topbar-border-bottom-width: 2px;

  /* ===============================
     TOPBAR ANIMATION
  =============================== */
  --ebtb20-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ebtb20-transition-duration: 0.3s;

  /* ===============================
     TOPBAR RESPONSIVE
  =============================== */
  --ebtb20-container-gap-tablet: 0.6rem;
  --ebtb20-contact-info-gap-tablet: 1.25rem;
}

/* ============================================
   TOP BAR
   ============================================ */
.ebtb20-top-bar {
  background-color: var(--ebtb20-topbar-background-color);
  border-bottom: var(--ebtb20-topbar-border-bottom-width) dashed var(--ebtb20-topbar-border-color);
  padding: var(--ebtb20-topbar-padding-y) var(--ebtb20-topbar-padding-x);
  font-size: var(--ebtb20-topbar-font-size);
}

.ebtb20-top-bar-container {
  max-width: var(--ebtb20-container-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ebtb20-social-icons {
  display: flex;
  gap: var(--ebtb20-social-icons-gap);
}

.ebtb20-social-icon {
  color: var(--ebtb20-topbar-social-icon-color);
  transition: color var(--ebtb20-transition-duration) var(--ebtb20-ease);
}

.ebtb20-social-icon:hover {
  color: var(--ebtb20-topbar-social-icon-hover-color);
}

.ebtb20-contact-info {
  display: flex;
  gap: var(--ebtb20-contact-info-gap);
}

.ebtb20-contact-link {
  display: flex;
  align-items: center;
  gap: var(--ebtb20-contact-link-gap);
  color: var(--ebtb20-topbar-contact-text-color);
  font-weight: var(--ebtb20-contact-link-font-weight);
  transition: color var(--ebtb20-transition-duration) var(--ebtb20-ease);
  text-decoration: none;
}

.ebtb20-contact-link i {
  color: var(--ebtb20-topbar-contact-icon-color);
}

.ebtb20-contact-link:hover {
  color: var(--ebtb20-topbar-contact-hover-text-color);
}

/* ============================================
   TOPBAR RESPONSIVE OVERRIDES
   ============================================ */
@media (max-width: 768px) {
  .ebtb20-top-bar-container {
    flex-direction: column;
    gap: var(--ebtb20-container-gap-tablet);
    align-items: center;
  }

  .ebtb20-social-icons {
    justify-content: center;
  }

  .ebtb20-contact-info {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ebtb20-contact-info-gap-tablet);
  }
}

@media (max-width: 350px) {
  .ebtb20-contact-link span {
    display: none;
  }
}

@media (max-width: 768px) {
  .ebtb20-top-bar { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}
@media (max-width: 480px) {
  .ebtb20-top-bar { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
}
@media (max-width: 380px) {
  .ebtb20-top-bar { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
}