/* ============================================================
   TEAM STORE THEME ENGINE (GLOBAL FILE)
   Used only on pages that include this CSS file.
   Driven entirely by CSS variables set per-page.
   ============================================================

   EXPECTED VARIABLES (set in page-level <style>):
   --team-header-bg         : header + hero background color
   --team-header-text       : header text/icon color
   --team-ribbon-color      : footer ribbon color
   --team-cta-bg            : footer CTA pill background
   --team-cta-text          : footer CTA pill text color
   --team-hero-opacity      : 0–1; how strong the hero image shows
   --team-header-logo       : url("...") for header logo
   --team-footer-logo       : url("...") for footer logo
   (JS reads the logo vars; CSS only uses the color ones.)
*/

/* ---------- Safe defaults (in case a var is missing) ---------- */
:root {
  --team-header-bg: #000000;
  --team-header-text: #ffffff;
  --team-ribbon-color: #000000;
  --team-cta-bg: #000000;
  --team-cta-text: #ffffff;
  --team-hero-opacity: 0.35;
}

/* ============================================================
   HEADER: solid theme color, hide nav, keep cart
   ============================================================ */

header.header,
.header-inner,
.header-layout,
.header-branding,
.header-nav-wrapper {
  background-color: var(--team-header-bg) !important;
  color: var(--team-header-text) !important;
  box-shadow: none !important;
}

/* Kill transparent/overlay behavior that could override background */
.header--transparent,
.header--overlay,
.header-inner::before {
  background: var(--team-header-bg) !important;
  opacity: 1 !important;
}

/* Hide desktop nav/menu */
.header-nav,
.header-nav--primary,
.header-nav--secondary,
.header-menu,
.header-nav-folder {
  display: none !important;
}

/* Hide any nav-like items injected into header actions */
.header-actions .header-nav-item {
  display: none !important;
}

/* Keep the cart visible and aligned */
.header-actions {
  display: flex !important;
  align-items: center;
}

/* ============================================================
   HIDE HAMBURGER / MOBILE NAV ON TEAM STORE PAGES
   (You want no main site nav on these pages)
   ============================================================ */

.header-menu-toggle,
.header-burger,
button.header-menu-toggle,
button.header-burger,
button.Mobile-bar-menu,
.Mobile-bar.Mobile-bar--top {
  display: none !important;
}

/* ============================================================
   HERO: force first section to match header color
   ============================================================ */

.page-section:first-of-type,
.page-section:first-of-type .section-background,
.page-section:first-of-type .section-background-overlay,
.page-section:first-of-type .section-background-content,
.page-section:first-of-type .section-background-image,
.page-section:first-of-type .sqs-block-background {
  background: var(--team-header-bg) !important;
  background-color: var(--team-header-bg) !important;
}

/* Hero image blending into theme color */
.page-section:first-of-type .section-background-image img {
  mix-blend-mode: multiply !important;
  opacity: var(--team-hero-opacity) !important;
}

/* Remove default overlays / gradients that fight the theme */
.page-section:first-of-type .section-background-overlay,
.page-section:first-of-type [style*="linear-gradient"],
.page-section:first-of-type .section-background::before {
  display: none !important;
}

/* ============================================================
   HIDE GLOBAL FOOTER (we’ll use custom footer block instead)
   ============================================================ */

footer,
.Footer,
.site-footer,
.sqs-site-footer,
#siteFooter,
#page-footer {
  display: none !important;
}

/* ============================================================
   CUSTOM TEAM STORE FOOTER
   Layout: Logo left, copy right, ribbon at top
   Markup expected in a HTML block:
   ------------------------------------------------------------
   <div class="teamstore-footer">
     <div class="teamstore-footer-ribbon"></div>
     <div class="teamstore-footer-grid">
       <div class="teamstore-footer-left">
         <img class="teamstore-logo" src="..." alt="Robotics Team Outfitters logo">
       </div>
       <div class="teamstore-footer-right">
         <p class="teamstore-powered">Powered by Robotics Team Outfitters (RTO)</p>
         <p class="teamstore-desc">...</p>
         <a href="https://www.botfitters.com/contact" class="teamstore-cta">Start a Team Store</a>
         <p class="teamstore-extra">...</p>
         <p class="teamstore-legal">...</p>
         <p class="teamstore-copy">...</p>
       </div>
     </div>
   </div>
   ------------------------------------------------------------
   ============================================================ */

.teamstore-footer {
  background: #ffffff;
  color: #000000;
  padding: 2.5rem 1rem 2.75rem;
  position: relative;
}

/* 95% full-width ribbon, centered */
.teamstore-footer-ribbon {
  width: 95vw;
  max-width: 95vw;
  height: 4px;
  background: var(--team-ribbon-color);

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Logo + text grid */
.teamstore-footer-grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
}

/* Logo column */
.teamstore-footer-left {
  text-align: center;
}

/* Logo sizing: clamp so it doesn’t blow up on small screens */
.teamstore-logo {
  width: clamp(80px, 14vw, 120px);
  max-width: 120px;
  max-height: 120px;
  height: auto;
  display: block;
}

/* Text column */
.teamstore-footer-right {
  text-align: left;
  line-height: 1.5;
}

.teamstore-powered {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.teamstore-desc,
.teamstore-extra,
.teamstore-note {
  margin: 0.25rem 0;
}

/* CTA pill, themed via vars */
.teamstore-cta {
  display: inline-block;
  margin: 1rem 0 0.75rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  background: var(--team-cta-bg);
  color: var(--team-cta-text) !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.teamstore-cta:hover {
  opacity: 0.9;
}

/* Legal + copyright */
.teamstore-legal {
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

.teamstore-copy {
  font-size: 0.75rem;
  color: #777777;
}

/* Links inside footer (non-CTA) */
.teamstore-footer a:not(.teamstore-cta) {
  color: inherit;
  text-decoration: underline;
}

/* ============================================================
   MOBILE FOOTER (stacked layout)
   ============================================================ */

@media (max-width: 767px) {
  .teamstore-footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .teamstore-footer-right {
    text-align: center;
  }

  .teamstore-logo {
    width: clamp(72px, 22vw, 110px);
    margin: 0 auto 0.75rem;
  }
}