/* =========================
   Kalari Kennels — Styles (tidied + consolidated)
   ========================= */

/* --- Theme + base --- */
:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --panel2:#0c121a;
  --text:#e8eef6;
  --muted:#a9b6c6;
  --brand:#7dd3fc;
  --brand2:#a78bfa;
  --ok:#34d399;
  --warn:#fbbf24;
  --danger:#fb7185;

  --radius:18px;
  --shadow:0 10px 40px rgba(0,0,0,.35);
  --max:1100px;

  /* Sticky nav height used for anchor offset */
  --navOffset:88px;
}

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--navOffset);
}

body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(125,211,252,.20), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(167,139,250,.18), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.45;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* --- Layout --- */
.wrap{ max-width:var(--max); margin:0 auto; padding:24px; }

/* Ensure headings are visible when jumped to via anchors */
section{ scroll-margin-top:var(--navOffset); }

/* Section separation */
section{
  padding:34px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
section:first-of-type{ border-top:0; }

/* --- Nav --- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(15,22,32,.78);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px;
  max-width:var(--max);
  margin:0 auto;
}

/* Mobile nav toggle button (hidden on desktop) */
.nav-toggle{
  display:none;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
}

.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:800;
  letter-spacing:.3px;
}

.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{ font-weight:900; letter-spacing:.3px; }
.brand-tag{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.3px;
  margin-top:2px;
}

/* Logo as <img class="logo"> */
.logo{ height:38px; width:auto; display:block; }

/* Optional CSS-block logo (<span class="logo is-block">) */
.logo.is-block{
  width:38px; height:38px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(125,211,252,.95), rgba(167,139,250,.95));
  box-shadow:0 10px 30px rgba(125,211,252,.15);
}

.menu{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.menu a{
  color:var(--muted);
  font-weight:700;
  font-size:14px;
  padding:8px 10px;
  border-radius:12px;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}

.menu a:hover{
  color:var(--text);
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  background:linear-gradient(135deg, rgba(125,211,252,.9), rgba(167,139,250,.9));
  color:#071019 !important;
  box-shadow:var(--shadow);
  border:0;
  cursor:pointer;
}

.btn.secondary{
  background:rgba(255,255,255,.08);
  color:var(--text) !important;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.12);
}

/* --- Cards / panels --- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(125,211,252,.22);
}
.card.pad{ padding:22px; }

/* --- Hero --- */
.hero{ padding:34px 0 8px; }

.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  align-items:stretch;
}

.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(125,211,252,.12);
  border:1px solid rgba(125,211,252,.18);
  color:var(--brand);
  font-weight:800;
  font-size:12px;
  letter-spacing:.25px;
  text-transform:uppercase;
}

h1{ margin:14px 0 10px; font-size:44px; line-height:1.05; }
p{ margin:0 0 12px; color:var(--muted); }

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.hero-stats-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-stats-card .stat{
  text-align:left;
}

.hero-meta .badge,
.hero-meta .pill{
  white-space:nowrap;
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-weight:700;
  font-size:12px;
}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(52,211,153,.12);
  border:1px solid rgba(52,211,153,.18);
  color:var(--ok);
  font-weight:800;
  font-size:12px;
}

/* --- Stats tiles --- */
.stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.stat{
  padding:12px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.stat:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.07);
  border-color:rgba(125,211,252,.25);
}
.stat .num{ font-size:20px; font-weight:900; color:var(--text); }
.stat .lbl{
  font-size:11px;
  color:var(--muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.25px;
}

/* --- Section headings --- */
.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.section-title h2{ margin:0; font-size:26px; }
.section-title p{ margin:0; max-width:58ch; }

/* --- Controls --- */
.stud-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.input, select{
  background:rgba(15,22,32,.92);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  outline:none;
  font-weight:650;
}

.input::placeholder{ color:rgba(232,238,246,.55); }

/* Best-effort dark native select (some browsers ignore) */
select option{
  background-color:#0f1620;
  color:var(--text);
}

/* --- Custom dropdown (Availability) --- */
.dd{ position:relative; display:inline-block; }

.dd-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-width:210px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,22,32,.92);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  font-weight:750;
  cursor:pointer;
}
.dd-btn:hover{
  border-color:rgba(125,211,252,.25);
  background:rgba(15,22,32,.98);
}

.dd-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:100%;
  margin:0;
  padding:6px;
  list-style:none;
  border-radius:14px;
  background:rgba(15,22,32,.98);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  display:none;
  z-index:9999;
}
.dd.open .dd-menu{ display:block; }

.dd-item{
  padding:10px;
  border-radius:12px;
  color:var(--text);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
}
.dd-item:hover{ background:rgba(255,255,255,.08); }

.dd-item.is-selected{
  background:rgba(125,211,252,.14);
  border:1px solid rgba(125,211,252,.18);
}

/* --- Stud grid/cards --- */
.stud-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.carousel-controls{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}

.carousel-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}

.carousel-nav:disabled{
  opacity:.45;
  cursor:default;
}

.carousel-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex:1;
}

.carousel-dot{
  width:10px;
  height:10px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}

.carousel-dot.is-active{
  background:var(--brand);
  transform:scale(1.15);
}

.stud{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.stud:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.06);
  border-color:rgba(167,139,250,.22);
}

/* Square image area */
.stud .media{
  aspect-ratio:1 / 1;
  width:100%;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(125,211,252,.16), rgba(167,139,250,.12));
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
}
.stud .media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:saturate(1.05) contrast(1.02);
}

.stud .media .chip{
  position:absolute; left:12px; top:12px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:rgba(11,15,20,.70);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  backdrop-filter:blur(8px);
}

.stud .body{
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}

.stud h3{ margin:0; font-size:18px; }

.stud .meta{ display:flex; flex-wrap:wrap; gap:8px; }

.tag{
  font-size:12px;
  font-weight:800;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
}
.tag.ok{ background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.18); color:var(--ok); }
.tag.warn{ background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.18); color:var(--warn); }

.stud .desc{ color:var(--muted); margin:0; font-size:14px; }

.stud .actions{
  display:flex;
  gap:10px;
  margin-top:auto;
  padding-top:6px;
}

.stud .actions a{
  flex:1;
  text-align:center;
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}

.stud .actions a.primary{
  border:0;
  background:linear-gradient(135deg, rgba(125,211,252,.9), rgba(167,139,250,.9));
  color:#071019;
}

/* --- Images / IG bits --- */
.team-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:var(--radius);
}

.ig-pill{
  background:linear-gradient(45deg, #833AB4, #FD1D1D, #F77737, #FCAF45);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ig-pill:hover{ transform:translateY(-2px); }

.ig-icon{
  width:16px;
  height:16px;
  filter:brightness(0) invert(1);
}

.ig-brand:hover{ transform:translateY(-2px); }

.ig-logo{ width:16px; height:16px; display:block; }

/* --- Reveal on scroll --- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* --- Footer --- */
.footer{
  padding:34px 0 60px;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:24px;
}

.fine{
  font-size:12px;
  color:rgba(232,238,246,.55);
  line-height:1.5;
}

.cols{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}

/* --- Simple grids --- */
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.list{
  padding-left:18px;
  color:var(--muted);
  margin:10px 0 0;
}
.list li{ margin:8px 0; }

/* --- Responsive --- */
.mobile-only{ display:none; }

@media (max-width: 1000px){
  .stud-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 900px){
  section{ padding:34px 0; } /* keeps your mobile padding consistent */
  .hero-grid{ grid-template-columns:1fr; }
  h1{ font-size:38px; }
  .cols{ grid-template-columns:1fr; }
  .grid2{ grid-template-columns:1fr; }

  /* Footer column re-order on mobile */
  .footer .cols{
    display:flex;
    flex-direction:column;
  }
  .footer .cols > div:first-child{ order:2; }
  .footer .cols > div:last-child{ order:1; }

  .footer .cols > div:first-child{
    display:flex;
    flex-direction:column;
    align-items:center;          /* centers brand row */
    text-align:center;           /* centers text by default */
  }

  /* copyright paragraph first */
  .footer .fine{
    order:1;
    width:100%;
    text-align:center;
    margin:0;                    /* optional: tighten spacing */
  }

  /* brand row second + centered */
  .footer .brand{
    order:2;
    justify-content:center;
    margin-top:12px;             /* space between copyright and brand */
    margin-bottom:0;
  }
}

@media (max-width: 640px){
  .stud-grid{ grid-template-columns:1fr; }
}

@media (max-width: 600px){
  .desktop-only{ display:none; }
  .mobile-only{ display:inline-flex; }

  .stud-grid.is-carousel{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:84%;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-bottom:6px;
    padding-right:24px;
    -webkit-overflow-scrolling:touch;
  }

  .stud-grid.is-carousel::-webkit-scrollbar{
    display:none;
  }

  .stud-grid.is-carousel > *{
    scroll-snap-align:start;
  }

  .stud-grid.is-carousel .card.pad{
    grid-column:auto !important;
  }

  .stud-grid.is-carousel + .carousel-controls{
    display:flex;
  }

  .hero-actions{
    flex-wrap:nowrap;
  }

  .hero-actions .btn{
    flex:1;
    min-width:0;
    padding:10px 8px;
    font-size:12px;
  }

  .hero-meta{
    gap:8px !important;
  }

  .hero-meta .meta-short{
    flex:1;
    justify-content:center;
  }

  .hero-meta .ig-meta{
    width:100%;
    justify-content:center;
  }

  .carousel-nav{
    min-width:78px;
    padding:9px 10px;
    font-size:12px;
  }
}

@media (min-width: 901px){
  section{ padding:40px 0; }

  .footer .cols{ align-items:start; }
  .footer .brand{ margin-bottom:14px; }
}

@media (max-width: 820px){
  .nav-inner{ padding:12px 14px; }

  /* prevent the brand from wrapping weirdly */
  .brand{ min-width:0; gap:10px; }
  .brand-name{ font-size:14px; white-space:nowrap; }
  .brand-tag{ font-size:10px; white-space:nowrap; }
  .logo{ height:34px; }

  /* show toggle on mobile */
  .nav-toggle{ display:inline-flex; align-items:center; gap:10px; }

  /* turn the menu into a dropdown panel */
  .menu{
    position:absolute;
    top:100%;
    left:12px;
    right:12px;
    display:none;            /* closed by default */
    flex-direction:column;
    gap:8px;
    padding:12px;
    margin-top:10px;
    border-radius:16px;
    background:rgba(15,22,32,.98);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 18px 50px rgba(0,0,0,.45);
  }
  .nav.is-open .menu{ display:flex; }

  .menu a{
    justify-content:flex-start;
    padding:12px;
    border-radius:14px;
  }
  .menu a.btn{ text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; transform:none; opacity:1; }
  .card, .stat, .stud, .menu a{ transition:none; }
}