/* Landing page styles extracted from mockup/myfavouritetshirt-app.html
   Adapted for use with #landing container in index.html */

:root {
  --sky: #c8e8f5;
  --sky-mid: #a8d4e8;
  --blue: #3399cc;
  --blue-dark: #2277aa;
  --blue-card: #3fabd4;
  --mauve: #b87a9a;
  --teal-btn: #6ab4a8;
  --purple-btn: #7a8cc8;
  --gold: #d4aa40;
  --gold-dark: #b89030;
  --white: #ffffff;
  --off-white: #f2f6fa;
  --text: #2a3540;
  --text-mid: #556677;
  --radius-pill: 999px;
  --radius-card: 22px;
  --radius-item: 16px;
  --shadow: 0 4px 18px rgba(30,100,150,0.13);
}

/* Landing container (adapted from #page-landing) */
#landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1a5f8a 0%, #1e7aad 35%, #3399cc 70%, #c8e8f5 100%);
  position: relative;
  overflow: hidden;
}

/* Floating wave shapes */
.landing-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  background: var(--sky);
  border-radius: 100% 100% 0 0 / 60px 60px 0 0;
  z-index: 0;
}

.landing-wave-2 {
  position: absolute;
  bottom: 60px; left: -10%; right: -10%;
  height: 180px;
  background: rgba(255,255,255,0.12);
  border-radius: 100% 100% 0 0 / 50px 50px 0 0;
  z-index: 0;
}

.landing-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 250px;
  flex: 1;
}

.school-strip {
  width: 100%;
  background: rgba(0,0,0,0.25);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.school-logo-emoji { font-size: 1.1rem; }

.landing-logo { margin-top: 32px; margin-bottom: 6px; }


.landing-hero-tshirt {
  margin: 16px 0 8px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

.landing-tagline {
  font-size: clamp(1.3rem, 6vw, 1.8rem);
  font-weight: 900;
  color: white;
  text-align: center;
  line-height: 1.25;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.landing-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  text-align: center;
  line-height: 1.5;
  max-width: 300px;
  margin-bottom: 28px;
  font-weight: 600;
}

.landing-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  margin-bottom: 28px;
}

.landing-feature {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.landing-feature-ico { font-size: 1.6rem; flex-shrink: 0; }
.landing-feature-text { flex: 1; text-align:left }
.landing-feature-title { font-size: 0.98rem; font-weight: 800; color: white; margin-bottom: 1px; }
.landing-feature-desc { font-size: 0.82rem; color: rgba(255,255,255,0.75); line-height: 1.35; }

.landing-ctas { display:flex; flex-direction:column; gap:10px; width:100%; max-width:340px; }

.landing-cta-primary {
  padding: 16px;
  background: white;
  color: var(--blue-dark);
  border: none;
  border-radius: var(--radius-pill);
  font-family: 'Nunito', sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transition: transform .1s, box-shadow .1s;
  letter-spacing: 0.2px;
}
.landing-cta-primary:active { transform: scale(.97); box-shadow: 0 3px 10px rgba(0,0,0,0.2); }

.landing-cta-secondary {
  padding: 14px;
  background: rgba(255,255,255,0.18);
  color: white;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-pill);
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s;
}
.landing-cta-secondary:hover { background: rgba(255,255,255,0.28); }

.landing-bottom-strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  background: var(--sky);
  padding: 18px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.landing-partners { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.landing-partner-pill { background: white; border-radius:8px; padding:4px 10px; font-size:0.65rem; font-weight:800; color:var(--text-mid); box-shadow:0 2px 6px rgba(30,100,150,0.1); white-space:nowrap; }

.landing-impact-row { display:flex; gap:16px; align-items:center; }
.landing-impact-stat { text-align:center; }
.landing-impact-num { font-size:1.2rem; font-weight:900; color:var(--blue); display:block; }
.landing-impact-label { font-size:0.6rem; font-weight:700; color:var(--text-mid); text-transform:uppercase; letter-spacing:0.4px; }
.landing-divider { width:1px; height:28px; background:#dde8f0; }

/* small helper to ensure landing images scale on narrow screens */
.landing-hero-tshirt img { width:160px; height:160px; object-fit:contain; }

@media (max-width:520px) {
  .landing-features { max-width: 92%; }
  .landing-ctas { max-width: 92%; }
}