/* ==========================================================================
   VEHTUBEPRO global footer
   --------------------------------------------------------------------------
   Local replacement for the hosted stylesheet the pages used to pull from
   static.VEHTUBEPRO.com, which does not resolve in this copy of the site and
   left every footer rendering as unstyled stacked links.

   It targets the footer markup already in the pages (#VEHTUBEPRO-footer and
   the .cgf__* classes) - no HTML restructuring is required. Colours are
   written as literals rather than custom properties, because the design
   tokens are only defined on some of the pages that carry this footer.

   Layout: one column on small screens, two from 720px, the full four-column
   row from 1000px.
   ========================================================================== */

#VEHTUBEPRO-footer {
  background-color: #00376b;
  color: #fff;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin-top: 0;
  padding: 40px 16px 32px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#VEHTUBEPRO-footer *,
#VEHTUBEPRO-footer *:before,
#VEHTUBEPRO-footer *:after {
  box-sizing: border-box;
}

#VEHTUBEPRO-footer .cgf__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- Link columns ---------- */

#VEHTUBEPRO-footer .cgf__pages-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 24px;
}

#VEHTUBEPRO-footer .cgf__page-link-list-header {
  margin-bottom: 12px;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

#VEHTUBEPRO-footer .cgf__page-link-list-ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#VEHTUBEPRO-footer .cgf__page-link-list-li {
  margin-bottom: 8px;
  list-style: none;
}

#VEHTUBEPRO-footer .cgf__page-link-list-a {
  display: inline-block;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
}

#VEHTUBEPRO-footer .cgf__page-link-list-a:hover,
#VEHTUBEPRO-footer .cgf__page-link-list-a:focus {
  color: #fff;
  text-decoration: underline;
}

/* "Shop the App!", "We're Hiring!" - a small accent tag beside a link. */
#VEHTUBEPRO-footer .cgf__page-link-list-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background-color: #ff7a00;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: 1px;
}

#VEHTUBEPRO-footer .cgf__page-link-list-tag:hover {
  color: #fff;
  text-decoration: none;
}

/* The two shorter lists share one grid cell so the row stays even. */
#VEHTUBEPRO-footer .cgf_pages-section__stacked {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---------- Divider ---------- */

#VEHTUBEPRO-footer .cgf__divider {
  height: 1px;
  margin: 32px 0 24px;
  background-color: rgba(255, 255, 255, .24);
}

/* ---------- Logo + app promotion ---------- */

#VEHTUBEPRO-footer .cgf__logo-app-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#VEHTUBEPRO-footer .cgf__org-logo-img {
  display: block;
  width: 150px;
  height: auto;
}

#VEHTUBEPRO-footer .cgf__org-logo-copyright {
  margin-top: 10px;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 20px;
}

#VEHTUBEPRO-footer .cgf__app-section-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The markup carries two variants of the app promotion: a QR code with a
   "Text me a link" button for wide screens, and a pair of store links for
   narrow ones. Exactly one shows at a time - without this both rendered, which
   is why the download line appeared twice.

   Note the store-link variant is nested INSIDE .cgf__app-section-qr, so the
   wrapper must stay visible and the two variants are switched by their own
   contents. Hiding the wrapper takes the store links down with it. */
#VEHTUBEPRO-footer .cgf__app-section-qr {
  display: flex;
  align-items: center;
  gap: 16px;
}

#VEHTUBEPRO-footer .cgf__app-section-img-qr,
#VEHTUBEPRO-footer .cgf__app-section-download-text {
  display: none;
}

#VEHTUBEPRO-footer .cgf__app-section-app-cta {
  display: block;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}

#VEHTUBEPRO-footer .cgf__app-section-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

#VEHTUBEPRO-footer .cgf__app-section-app-store,
#VEHTUBEPRO-footer .cgf__app-section-play-store {
  display: block;
  width: 132px;
  height: 40px;
}

#VEHTUBEPRO-footer .cgf__app-section-app-store-anchor,
#VEHTUBEPRO-footer .cgf__app-section-play-store-anchor {
  display: block;
  border-radius: 6px;
  line-height: 0;
}

#VEHTUBEPRO-footer .cgf__app-section-app-store-anchor:hover,
#VEHTUBEPRO-footer .cgf__app-section-play-store-anchor:hover {
  opacity: .85;
}

/* No display here on purpose - the breakpoint rules above own it, and a
   display:block at this point would re-show the QR code on small screens. */
#VEHTUBEPRO-footer .cgf__app-section-img-qr {
  width: 96px;
  height: 96px;
  border-radius: 6px;
  background-color: #fff;
  padding: 4px;
}

#VEHTUBEPRO-footer .cgf__app-section-download-text {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}

#VEHTUBEPRO-footer .cgf__app-section-text-link {
  margin-top: 10px;
}

#VEHTUBEPRO-footer #openModalButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 8px 16px;
  border: 2px solid #fff;
  border-radius: 4px;
  background-color: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  cursor: pointer;
}

#VEHTUBEPRO-footer #openModalButton:hover {
  background-color: rgba(255, 255, 255, .12);
}

#VEHTUBEPRO-footer .cgf__app-section-mobile-phone {
  display: block;
  width: 18px;
  height: 18px;
}

/* Decorative pointer between the QR code and the button. */
#VEHTUBEPRO-footer .cgf__app-section-arrow {
  display: none;
}

/* ---------- Social ---------- */

#VEHTUBEPRO-footer .cgf__social-links {
  margin-top: 28px;
}

#VEHTUBEPRO-footer .cgf__social-links-ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#VEHTUBEPRO-footer .cgf__social-links-li {
  list-style: none;
}

#VEHTUBEPRO-footer .cgf__social-links-li a {
  display: block;
  line-height: 0;
  opacity: .88;
}

#VEHTUBEPRO-footer .cgf__social-links-li a:hover {
  opacity: 1;
}

#VEHTUBEPRO-footer .cgf__social-links-img {
  display: block;
  width: 24px;
  height: 24px;
}

/* ---------- Legal ---------- */

#VEHTUBEPRO-footer .cgf__legal-links {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .24);
}

#VEHTUBEPRO-footer .cgf__legal-links-ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#VEHTUBEPRO-footer .cgf__legal-links-li {
  list-style: none;
}

#VEHTUBEPRO-footer .cgf__legal-links-a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .88);
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}

#VEHTUBEPRO-footer .cgf__legal-links-a:hover,
#VEHTUBEPRO-footer .cgf__legal-links-a:focus {
  color: #fff;
  text-decoration: underline;
}

#VEHTUBEPRO-footer .cgf__legal-links-a img {
  display: block;
  width: 28px;
  height: 14px;
}

#VEHTUBEPRO-footer .cgf__legal-disclaimer {
  margin-top: 20px;
}

#VEHTUBEPRO-footer .cgf__legal-disclaimer p {
  max-width: 74ch;
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  line-height: 18px;
}

/* ---------- Focus ---------- */

#VEHTUBEPRO-footer a:focus-visible,
#VEHTUBEPRO-footer button:focus-visible {
  outline: 2px solid #6ab7ff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 720px) {
  #VEHTUBEPRO-footer {
    padding: 48px 24px 36px;
  }

  #VEHTUBEPRO-footer .cgf__pages-section {
    grid-template-columns: repeat(2, 1fr);
  }

  #VEHTUBEPRO-footer .cgf__logo-app-section {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
  }

  /* Wide enough for the QR code, so swap the store links out for it. */
  #VEHTUBEPRO-footer .cgf__app-section-img-qr {
    display: block;
  }

  #VEHTUBEPRO-footer .cgf__app-section-download-text {
    display: block;
  }

  #VEHTUBEPRO-footer .cgf__app-section-app-cta {
    display: none;
  }
}

@media (min-width: 1000px) {
  #VEHTUBEPRO-footer {
    padding: 56px 32px 40px;
  }

  #VEHTUBEPRO-footer .cgf__pages-section {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}

@media print {
  #VEHTUBEPRO-footer {
    display: none;
  }
}