/* ==========================================================================
   index-fixes.css
   Local overrides for the EthicalSkillsTeam page (loaded after Shopify's
   own stylesheets — see index.html <head>). Keeps the header solid white
   on every device, fixes the profile logo badge, and styles the footer,
   which previously had no CSS at all.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) HEADER — always a solid white background, never transparent,
      on desktop, tablet and mobile alike.
   -------------------------------------------------------------------------- */
header[data-component-name="global-nav"] > div:nth-child(1),
header[data-component-name="global-nav"] > div:nth-child(2) {
  background-color: #ffffff !important;
}

header[data-component-name="global-nav"] > div:nth-child(1)::before,
header[data-component-name="global-nav"] > div:nth-child(1)::after,
header[data-component-name="global-nav"] > div:nth-child(2)::before,
header[data-component-name="global-nav"] > div:nth-child(2)::after {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* Belt-and-braces: the two spots that still set the old off-white tone
   directly via an inline utility class. */
header[data-component-name="global-nav"] .bg-\[\#f1f5f2\] {
  background-color: #ffffff !important;
}

#mobile_header_menu {
  background-color: #ffffff !important;
}

/* The page's scroll script clones the full secondary nav into the compact
   top bar on every load (it strips the "hidden lg:block" classes from the
   clone), so on phones/tablets that wide desktop nav was permanently
   forcing the header to overflow horizontally, and on desktop it duplicated
   the menu row. Keep the clone hidden until the user actually scrolls
   (matching what the script's own "header-scrolled" toggle intends), and
   never show it below the desktop breakpoint. */
header[data-component-name="global-nav"] #scrolled-nav {
  display: none;
}

body.header-scrolled header[data-component-name="global-nav"] #scrolled-nav {
  display: flex;
}

@media (max-width: 1023px) {
  body.header-scrolled header[data-component-name="global-nav"] #scrolled-nav {
    display: none;
  }
}

/* Safety net: never allow the page to scroll sideways on any device. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   2) PROFILE LOGO BADGE — crisp, centered mark instead of the oversized
      mockup photo. Works with ethicalskillsteam-logo-mark.png.
   -------------------------------------------------------------------------- */
a[data-component-name="logo-home"] img,
img[alt="EthicalSkillsTeam"] {
  object-fit: contain;
  background-color: #ffffff;
}

/* --------------------------------------------------------------------------
   3) FOOTER — full layout (none of this existed before: the footer markup
      had no matching CSS anywhere, so it rendered unstyled).
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: #f6f7f7;
  border-top: 1px solid rgba(22, 33, 32, 0.08);
  color: #5c6663;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  box-sizing: border-box;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(22, 33, 32, 0.08);
}

.site-footer__brand {
  flex: 0 0 auto;
  display: inline-flex;
  color: #162120;
}

.site-footer__brand svg {
  width: 40px;
  height: auto;
  display: block;
}

.site-footer__columns {
  flex: 1 1 320px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}

.site-footer__group h3 {
  margin: 0 0 1rem;
  color: #162120;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.site-footer__group ul {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__group a {
  color: #5c6663;
  text-decoration: none;
}

.site-footer__group a:hover,
.site-footer__group a:focus-visible {
  color: #162120;
  text-decoration: underline;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2rem;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  row-gap: 0.75rem;
}

.site-footer__locale {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #5c6663;
  font-size: 0.875rem;
  white-space: nowrap;
}

.site-footer__locale svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.site-footer__divider {
  color: #cfd7d3;
}

.site-footer__language {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.site-footer__language svg {
  width: 12px;
  height: 12px;
  fill: none;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.8125rem;
}

.site-footer__legal a {
  color: #5c6663;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: #162120;
  text-decoration: underline;
}

.site-footer__privacy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #eceeee;
  color: #4b5758;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  background-color: #dde1e1;
  color: #162120;
}

.site-footer__social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Footer responsive breakpoints */
@media (max-width: 900px) {
  .site-footer__top {
    gap: 2rem;
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .site-footer__inner {
    padding: 2.5rem 1.25rem 2rem;
  }

  .site-footer__top {
    flex-direction: column;
    gap: 1.75rem;
    padding-bottom: 2rem;
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-top: 1.75rem;
  }

  .site-footer__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .site-footer__legal {
    row-gap: 0.6rem;
  }
}

@media (max-width: 380px) {
  .site-footer__columns {
    grid-template-columns: 1fr;
  }
}