/* =====================================================
   HEADER TOP BAR
===================================================== */

.header-top-bar {
  padding: var(--topbar-padding);
  background-color: var(--topbar-bg);
  background-image: var(--topbar-bg);
}

.header-top-bar .container {
  display: flex;
  gap: var(--topbar-gap);
  align-items: center;
}

.topbar-col {
  display: flex;
  align-items: center;
  flex: 1;
}

.is-desktop .topbar-col { flex: var(--flex-desktop); }
.is-tablet  .topbar-col { flex: var(--flex-tablet); }
.is-mobile  .topbar-col { flex: var(--flex-mobile); }

.is-mobile .header-top-bar .container {
  flex-direction: column;
  text-align: center;
}


/* =====================================================
   FOOTER TOP BAR
===================================================== */

.footer-top-bar {
  padding: var(--footer-topbar-padding);
  background-color: var(--footer-topbar-bg);
  background-image: var(--footer-topbar-bg);
}

.footer-top-bar .container {
  display: flex;
  gap: var(--footer-topbar-gap);
  align-items: center;
}

.footer-topbar-col {
  display: flex;
  align-items: center;
  flex: 1;
}

.is-desktop .footer-topbar-col { flex: var(--flex-desktop); }
.is-tablet  .footer-topbar-col { flex: var(--flex-tablet); }
.is-mobile  .footer-topbar-col { flex: var(--flex-mobile); }


/* =====================================================
   FOOTER COPYRIGHT BAR
===================================================== */

.footer-copyright-bar {
  padding: var(--footer-copyright-padding);
  background-color: var(--footer-copyright-bg);
  background-image: var(--footer-copyright-bg);
}

.footer-copyright-bar .container {
  display: flex;
  gap: var(--footer-copyright-gap);
  align-items: center;
}

.footer-copyright-col {
  display: flex;
  align-items: center;
  flex: 1;
}

.is-desktop .footer-copyright-col { flex: var(--flex-desktop); }
.is-tablet  .footer-copyright-col { flex: var(--flex-tablet); }
.is-mobile  .footer-copyright-col { flex: var(--flex-mobile); }

.is-mobile .footer-top-bar .container,
.is-mobile .footer-copyright-bar .container,
.is-tablet .footer-top-bar .container,
.is-tablet .footer-copyright-bar .container {
  flex-direction: column;
  text-align: center;
}