/* Root variables for consistancy babay man */
:root{
  --navy: rgb(3, 4, 94);
  --navy-light: rgb(28, 35, 150);
  --accent: rgb(66, 89, 255);
  --bg-soft-1: rgb(233, 239, 255);
  --bg-soft-2: rgb(220, 230, 255);
  --card-bg: #ffffff;
  --text: rgb(20, 24, 33);
  --muted: rgb(95, 100, 130);
  --radius: 0.8rem;
  --shadow: 0 0.6rem 1.2rem rgba(66, 89, 255, 0.35);
  --shadow-hover: 0 0.9rem 1.6rem rgba(66, 89, 255, 0.55);
  --max-width:68rem;
  --gap: 1.25rem;
  --page-pad: clamp(0.9rem, 2.5vw, 1.25rem);
  --gap: 1rem;
}

/* Reset + base */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; margin:0;}
html { font-size: 100%; } 
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg-soft-1) 0%, var(--bg-soft-2) 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
  align-items:stretch;
}

nav,head, .filter{
  flex:0 0 auto;
}
header {
  width: 100%;
  padding-block: clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, var(--accent), var(--navy-light), #e83e8c);
  background-size: 300% 300%;
  animation: headerGradient 10s ease infinite;
  border-bottom-right-radius: calc(var(--radius) - 0.25rem);
  border-bottom-left-radius:calc(var(--radius) - 0.25rem);
  box-shadow: 0 0.6rem 1.2rem rgba(3,4,30,0.07);
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

@keyframes headerGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

header h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 0.35rem;
  text-shadow: 0 0.35rem 0.6rem rgba(3,4,30,0.14);
}

header h2 {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 500;
  padding-inline:1.5rem;
  text-align:center;
  opacity: 0.95;
}
.filter {
  width: min(94%, var(--max-width));
  margin-inline: auto;
  display: flex;
  gap: clamp(0.6rem, 1.5vw, 1rem);
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.65rem clamp(0.8rem, 2vw, 1rem);
  background: #fff;
  border-radius: calc(var(--radius) - 0.15rem);
  box-shadow: 0 0.4rem 0.9rem rgba(3,4,30,0.04);
  margin-bottom: clamp(0.8rem, 2.2vw, 1.2rem);
}

/* Individual chip styling */
.filters {
  background: linear-gradient(180deg, #ff6b6b, #e83e8c);
  color: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: 2rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  opacity: 0; /* start invisible */
  animation: fadeInChip 0.42s ease forwards;
  transition: transform 180ms ease, box-shadow 180ms ease;
  text-align: center;
}

/* Stagger animation delays */
.filters:nth-child(1) { animation-delay: 0.12s; }
.filters:nth-child(2) { animation-delay: 0.20s; }
.filters:nth-child(3) { animation-delay: 0.28s; }
.filters:nth-child(4) { animation-delay: 0.36s; }

/* Fade-in animation only (no translateY conflicts) */
@keyframes fadeInChip {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hover effect works perfectly now */
.filters:hover,
.filters:focus {
  transform: scale(1.05);
  box-shadow: 0 0.6rem 1rem rgba(3,4,30,0.09);
  outline: none;
}


/* Main grid for cards */
main{
  width: 94%;
  max-width:var(--max-width);
  margin-inline: auto;
  flex:1 1 auto;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(1rem, 2.6vh, 1.6rem);
  background: transparent; /* allow page gradient to show through */
}

/* responsive grid columns */
@media (min-width: 48rem) { main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80rem) { main { grid-template-columns: repeat(3, 1fr); } }

/* Card styling */
.card{
  background: var(--card-bg);
  border-radius: calc(var(--radius) - 0.15rem);
  padding: clamp(0.9rem, 2.6vw, 1.2rem);
  box-shadow: var(--shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
  display:flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 10rem;
  border: 1px solid rgba(3,4,30,0.03);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-0.36rem); box-shadow: var(--shadow-hover); }
}

.card h2{
  color: #ff6a00;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  margin-bottom: 0.2rem;
}

.card p{
  color: var(--muted);
  font-size: 0.95rem;
}

/* details summary and link */
details { margin-top: auto; }
summary{ font-weight:700; cursor:pointer; margin-bottom: 0.35rem; }
summary::-webkit-details-marker { display: none; }
details a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: text-decoration 140ms ease;
}
details a:hover, details a:focus { text-decoration: underline; color: var(--navy); }

/* Footer style (as requested, improved) */
/* SITE FOOTER - About Us style */
.site-footer {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(0.9rem, 2.2vh, 1.2rem);
  margin-top: 0.8rem;
  flex-shrink: 0; /* stays at bottom */
}

.footer-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 94%;
  max-width: var(--max-width);
  margin-inline: auto;
}

.footer-inner p {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  opacity: 0.9;
  margin: 0;
}