@import url('./tokens-hero-base.css');

@keyframes sp-reveal-line1 {
  from { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
}
@keyframes sp-reveal-line2 {
  from { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
}

@media (max-width: 700px) {
  html body.public-redesign section.mock-hero .mock-hero-card {
    background-image: url('../layered/backgrounds/hero-students-clean.webp?v=20260911-plain-hero') !important;
    background-size: cover !important;
    background-position: 50% center !important;
    background-repeat: no-repeat !important;
  }

  html body.public-redesign section.mock-hero .mock-hero-card > img:first-child {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html body.public-redesign section.mock-hero .mock-hero-copy {
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }

  html body.public-redesign section.mock-hero .mock-hero-copy h1,
  html body.public-redesign section.mock-hero .mock-hero-copy > p {
    display: none !important;
  }

  html body.public-redesign section.mock-hero .mock-hero-copy::before {
    content: 'Student life' !important;
    position: absolute !important;
    display: block !important;
    top: clamp(18px, 4.8vw, 24px) !important;
    left: clamp(10px, 3vw, 14px) !important;
    width: max-content !important;
    overflow: visible !important;
    white-space: nowrap !important;
    color: #fff !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: clamp(25px, 6.9vw, 32px) !important;
    line-height: .94 !important;
    font-weight: 800 !important;
    letter-spacing: -.05em !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.42) !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 90 !important;
    pointer-events: none !important;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    animation: sp-reveal-line1 1.15s steps(12, end) .2s forwards !important;
  }

  html body.public-redesign section.mock-hero .mock-hero-copy::after {
    content: 'costs less here.' !important;
    position: absolute !important;
    display: block !important;
    top: clamp(42px, 11.1vw, 53px) !important;
    left: clamp(10px, 3vw, 14px) !important;
    width: max-content !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: clamp(25px, 6.9vw, 32px) !important;
    line-height: .94 !important;
    font-weight: 800 !important;
    letter-spacing: -.05em !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.42) !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 91 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, #fff 0 38%, #9cff18 38% 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    animation: sp-reveal-line2 1.45s steps(16, end) 1.35s forwards !important;
  }

  html body.public-redesign section.mock-hero .mock-actions {
    position: absolute !important;
    left: clamp(10px, 3vw, 14px) !important;
    bottom: clamp(18px, 4.8vw, 24px) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  html body.public-redesign section.mock-hero .mock-actions::before {
    content: 'Discover verified deals, events and opportunities made for South African students.' !important;
    position: absolute !important;
    display: block !important;
    left: 0 !important;
    bottom: calc(100% + 18px) !important;
    width: min(58vw, 245px) !important;
    max-width: 245px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: clamp(10.5px, 2.85vw, 13px) !important;
    line-height: 1.22 !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    white-space: normal !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 101 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.35) !important;
    pointer-events: none !important;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  html body.public-redesign section.mock-hero .mock-hero-copy::before,
  html body.public-redesign section.mock-hero .mock-hero-copy::after {
    animation: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}

html body.public-redesign #deal-grid .mock-deal-card.perk-card .deal-content > p,
html body.public-redesign #deal-grid .mock-deal-card.perk-card .location-line {
  display: none !important;
}

html body.public-redesign #deal-grid .mock-deal-card.perk-card .deal-image {
  height: 220px !important;
  aspect-ratio: auto !important;
}

html body.public-redesign #deal-grid .mock-deal-card.perk-card .deal-image.crates {
  background-color: #fff !important;
  background-image: url('../deals/crates-boxes-blue-box.jpg') !important;
  background-size: 86% auto !important;
  background-position: center 58% !important;
  background-repeat: no-repeat !important;
}

html body.public-redesign #deal-grid .mock-deal-card.perk-card .deal-image.justprotein {
  background-color: #f2f2f2 !important;
  background-image: url('../logo-just-protein.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 22px !important;
  box-sizing: border-box !important;
  background-origin: content-box !important;
}

html body.public-redesign #deal-grid .mock-deal-card.perk-card .deal-image.justprotein .brand-logo-img {
  display: none !important;
}

@media (max-width: 700px) {
  html body.public-redesign #deal-grid .mock-deal-card.perk-card .deal-image {
    height: 160px !important;
    aspect-ratio: auto !important;
  }

  html body.public-redesign #deal-grid .mock-deal-card.perk-card .deal-image.crates {
    background-size: 84% auto !important;
  }
}

html body.public-redesign .mock-search {
  display: flex !important;
  pointer-events: auto !important;
}

html body.public-redesign .mock-search input {
  pointer-events: auto !important;
}

/* Compact footer, matching the approved white StudentPerks layout */
html body.public-redesign footer {
  background: #fff !important;
  color: #4f5666 !important;
  padding: 32px 0 18px !important;
  border-top: 1px solid #edf0f4 !important;
}

html body.public-redesign footer .wrap {
  width: min(calc(100% - 48px), 1180px) !important;
  max-width: 1180px !important;
  padding: 0 !important;
}

html body.public-redesign footer .footer-grid {
  display: grid !important;
  grid-template-columns: 235px minmax(0, 1fr) !important;
  gap: 42px !important;
  align-items: start !important;
}

html body.public-redesign footer .footer-grid > div:first-child {
  min-width: 0 !important;
}

html body.public-redesign footer .logo-mark {
  height: 44px !important;
  width: auto !important;
  max-width: 220px !important;
  margin: 0 0 9px !important;
  border-radius: 10px !important;
}

html body.public-redesign footer .footer-desc {
  font-size: 0 !important;
  line-height: 1 !important;
  margin: 0 0 16px !important;
  color: #4f5666 !important;
}

html body.public-redesign footer .footer-desc::after {
  content: 'Same students. Brighter tomorrows.' !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

html body.public-redesign footer .footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 !important;
  color: #9cff18 !important;
}

html body.public-redesign footer .f-soc {
  width: 22px !important;
  height: 22px !important;
  color: #9cff18 !important;
}

html body.public-redesign footer .footer-cols {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 32px !important;
  width: 100% !important;
}

html body.public-redesign footer .footer-col {
  min-width: 0 !important;
}

html body.public-redesign footer .footer-col h4 {
  margin: 2px 0 13px !important;
  color: #4b5362 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body.public-redesign footer .footer-col a {
  display: block !important;
  margin: 0 0 9px !important;
  color: #626a78 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body.public-redesign footer .footer-col a:hover {
  color: #111 !important;
}

html body.public-redesign footer .footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-top: 22px !important;
  padding-top: 14px !important;
  border-top: 1px solid #e5e9ef !important;
  color: #68707e !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

html body.public-redesign footer .footer-bottom .fbl {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

html body.public-redesign footer .footer-bottom a {
  color: #68707e !important;
  white-space: nowrap !important;
}

@media (max-width: 860px) {
  html body.public-redesign footer {
    padding: 22px 0 14px !important;
  }

  html body.public-redesign footer .wrap {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  html body.public-redesign footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 19px !important;
  }

  html body.public-redesign footer .footer-grid > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 14px !important;
    row-gap: 5px !important;
    align-items: center !important;
  }

  html body.public-redesign footer .logo-mark {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 34px !important;
    max-width: 170px !important;
    margin: 0 !important;
  }

  html body.public-redesign footer .footer-desc {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }

  html body.public-redesign footer .footer-desc::after {
    font-size: 11px !important;
  }

  html body.public-redesign footer .footer-social {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    gap: 12px !important;
  }

  html body.public-redesign footer .f-soc {
    width: 18px !important;
    height: 18px !important;
  }

  html body.public-redesign footer .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 24px !important;
  }

  html body.public-redesign footer .footer-col h4 {
    margin-bottom: 9px !important;
    font-size: 10px !important;
  }

  html body.public-redesign footer .footer-col a {
    margin-bottom: 6px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  html body.public-redesign footer .footer-bottom {
    margin-top: 17px !important;
    padding-top: 11px !important;
    font-size: 9.5px !important;
    gap: 10px !important;
  }

  html body.public-redesign footer .footer-bottom .fbl {
    gap: 10px !important;
  }
}

@media (max-width: 420px) {
  html body.public-redesign footer .footer-cols {
    gap: 15px 18px !important;
  }

  html body.public-redesign footer .footer-grid > div:first-child {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body.public-redesign footer .footer-social {
    gap: 10px !important;
  }

  html body.public-redesign footer .footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
}

/* StudentPerks dark mode. Follows the visitor's device/browser theme automatically. */
@media (prefers-color-scheme: dark) {
  html { color-scheme: dark; }

  html body.public-redesign {
    background: #090d0b !important;
    color: #f7faf7 !important;
  }

  html body.public-redesign .site-nav,
  html body.public-redesign nav {
    background: rgba(9,13,11,.96) !important;
    border-bottom-color: #202923 !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.22) !important;
  }

  html body.public-redesign .nav-desktop a,
  html body.public-redesign .nav-burger {
    color: #d7ded9 !important;
  }

  html body.public-redesign .mock-hero,
  html body.public-redesign .mock-section,
  html body.public-redesign #perks,
  html body.public-redesign #verification,
  html body.public-redesign #events,
  html body.public-redesign #jobs,
  html body.public-redesign #wallet,
  html body.public-redesign #business {
    background: #090d0b !important;
    color: #f7faf7 !important;
  }

  html body.public-redesign .mock-search {
    background: #121814 !important;
    border-color: #29342d !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
  }

  html body.public-redesign .mock-search input {
    color: #f7faf7 !important;
  }

  html body.public-redesign .mock-search input::placeholder {
    color: #8f9a93 !important;
  }

  html body.public-redesign .mock-search .sp-icon {
    background: #f7faf7 !important;
  }

  html body.public-redesign .mock-cats .pill {
    background: #131915 !important;
    color: #edf3ef !important;
    border-color: #28332c !important;
    box-shadow: none !important;
  }

  html body.public-redesign .mock-cats .pill.active {
    background: #9cff18 !important;
    color: #071006 !important;
    border-color: #9cff18 !important;
  }

  html body.public-redesign .mock-section-head h2,
  html body.public-redesign .deal-content h3,
  html body.public-redesign .how-card h2,
  html body.public-redesign .wallet-promo h2,
  html body.public-redesign .business-copy h2 {
    color: #f7faf7 !important;
  }

  html body.public-redesign .see-all {
    color: #9cff18 !important;
  }

  html body.public-redesign .mock-deal-card.perk-card {
    background: #111713 !important;
    border-color: #273129 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.26) !important;
  }

  html body.public-redesign .mock-deal-card.perk-card:hover {
    border-color: #3d4b41 !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.35) !important;
  }

  html body.public-redesign .deal-content p,
  html body.public-redesign .location-line,
  html body.public-redesign .deal-list-state,
  html body.public-redesign .how-step,
  html body.public-redesign .wallet-promo p,
  html body.public-redesign .business-copy p {
    color: #9da8a1 !important;
  }

  html body.public-redesign .how-card {
    background: linear-gradient(135deg,#111713,#0d120f) !important;
    border-color: #263129 !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.25) !important;
  }

  html body.public-redesign .how-step .num {
    background: #18241b !important;
    color: #9cff18 !important;
    border-color: #37513d !important;
  }

  html body.public-redesign .step-arrow {
    color: #516057 !important;
  }

  html body.public-redesign .benefit-strip {
    background: #111713 !important;
    border-color: #263129 !important;
  }

  html body.public-redesign .benefit {
    color: #e8eee9 !important;
    border-color: #263129 !important;
  }

  html body.public-redesign #deal-grid .mock-deal-card.perk-card .deal-image.crates {
    background-color: #fff !important;
  }

  html body.public-redesign .wallet-promo,
  html body.public-redesign .business-promo {
    border-color: #263129 !important;
  }

  html body.public-redesign footer {
    background: #080c0a !important;
    color: #9ba69f !important;
    border-top-color: #202923 !important;
  }

  html body.public-redesign footer .footer-desc,
  html body.public-redesign footer .footer-col a,
  html body.public-redesign footer .footer-bottom,
  html body.public-redesign footer .footer-bottom a {
    color: #9ba69f !important;
  }

  html body.public-redesign footer .footer-col h4 {
    color: #dce4df !important;
  }

  html body.public-redesign footer .footer-col a:hover {
    color: #fff !important;
  }

  html body.public-redesign footer .footer-bottom {
    border-top-color: #202923 !important;
  }

  html body.public-redesign .menu-overlay {
    background: #090d0b !important;
  }

  html body.public-redesign .menu-item {
    color: #d5ddd7 !important;
    border-bottom-color: #202923 !important;
  }
}