html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ================================
   Dark-ish theme overrides
   ================================ */

body {
    background-color: #82A740;      /* Dark background */
    /*color: #e0e0e0;*/                 /* Soft light text */
}

/* Links */
/*a {
    color: #8ab4f8;
}

a:hover {
    color: #a5c7ff;
}
*/
/* Headings */
/*h1, h2, h3, h4, h5 {
    color: #f1f1f1;
}
*/
/* Main content container */
main {
    background-color: #E5F3FD;
    border-radius: 8px;
    padding: 1.5rem;
}


/* Cards */
/*.card {
    background-color: #1f1f1f;
    border-color: #2a2a2a;
}

.card-header {
    background-color: #242424;
    border-bottom-color: #2a2a2a;
}
*/

/* Forms */
/*
.form-control {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
}
*/

/*.form-control:focus {
    background-color: #1e1e1e;
    color: #fff;
    border-color: #8ab4f8;
    box-shadow: none;
}
*/
/* Buttons */
.btn-primary {
    background-color: #005028;
    border-color: #20252d;
    color: #eaeaea;
}

.btn-primary:hover {
    background-color: #82a740;
    border-color: #005028;
}

footer {
    background-color: #005028;
}
/*footer a {
    color: #8ab4f8;
}

footer a:hover {
    color: #a5c7ff;
}*/


/* site.css */
.placeholder-light::placeholder {
    color: rgba(248, 249, 250, 0.45);
    opacity: 1; /* ensures consistent behaviour across browsers */
}

.text-light {
  color: #EAF1FF;
}



.placeholder::placeholder {
    color: rgba(248, 249, 250, 0.45);
    opacity: 1; /* ensures consistent behaviour across browsers */
}

/*Styling for TEAMS logo*/
.team-logo {
        height: 92px;              /* consistent height */
        width: auto;               /* allow landscape to be wider */
        max-width: 180px;          /* cap width so it doesn't dominate */
        object-fit: contain;       /* no cropping, no distortion */
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0,0,0,.35);
        border: 1px solid rgba(255,255,255,.15);
        flex: 0 0 auto;
        background: rgba(255,255,255,.04); /* helps with transparent PNGs */
        padding: 6px;              /* gives transparent logos breathing room */
    }


/*================= NEWS / AI Insights ======================*/
/* AI items (seen before) */
.news-ai {
    font-style: italic;
    opacity: 0.9; /* subtle */
}

/* New AI items (first reveal) – slightly different to stand out */
.news-ai-new {
    font-style: italic;
    opacity: 1;
}

/* Placeholder line */
.news-thinking {
    font-style: italic;
    opacity: 0.8;
}

.news-loader {
  width: 1em;
  height: 1em;
  object-fit: contain;
}



.news-ai { color: #2e2327; }      /* tweak */
.news-ai-new { color: #2b2c34; }  /* tweak */

/* FitTally Bootstrap navbar brand */
.ft-brand{
  text-decoration:none;
}

.ft-brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.ft-wordmark{
  display:inline-flex;
  align-items:baseline;
  letter-spacing:-0.02em;
  font-size:1.25rem;            /* tweak if your navbar uses different sizing */
  color:#EAF1FF;                /* off-white for dark navbar */
}

/* If your navbar is light, override color via .navbar-light below */
.ft-fit{ font-weight:500; }
.ft-tally{ font-weight:800; }

.ft-tagline{
  font-size:.78rem;
  letter-spacing:.01em;
  color: rgba(234,241,255,.78);
  margin-top:.1rem;
}

/* Optional: if using Bootstrap light navbar */
.navbar-light .ft-wordmark{ color:#0B0F14; }
.navbar-light .ft-tagline{ color: rgba(11,15,20,.70); }


/* FitTally landing hero — premium dark theme, isolated class prefix: ftx- */

.ftx-hero{
  border-bottom: 1px solid rgba(234,241,255,.10);
}

/* Centered lockup container (scaled up ~15%) */
.ftx-brand-lockup{
  display: inline-flex;
  align-items: center;
  gap: 20px;              /* slightly bigger spacing */
  position: relative;
  padding: 12px 18px;     /* slightly bigger padding */
  border-radius: 22px;
}

/* Subtle glow behind the WORDMARK too */
.ftx-brand-lockup::before{
  content:"";
  position:absolute;
  inset: -22px -32px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 28% 45%, rgba(30,91,255,.35), rgba(30,91,255,0) 62%),
    radial-gradient(circle at 72% 55%, rgba(37,213,255,.16), rgba(37,213,255,0) 64%);
  filter: blur(18px);
  opacity: .95;
  z-index: 0;
  pointer-events:none;
}

/* Logo wrapper (kept crisp, glow is separate) */
.ftx-logo-wrap{
  position: relative;
  border-radius: 20px;
  padding: 2px;
  /*background: linear-gradient(135deg, rgba(30,91,255,.72), rgba(37,213,255,.22));*/
  /*box-shadow: 0 18px 50px rgba(0,0,0,.55);*/
  isolation: isolate;
  z-index: 1;
}

/* Glow behind the LOGO itself (blurred, punchy) */
.ftx-logo-wrap::before{
  content:"";
  position:absolute;
  inset:-24px;            /* slightly larger glow for bigger logo */
  border-radius: 32px;
  background:
    radial-gradient(circle at 35% 35%, rgba(30,91,255,.2), rgba(30,91,255,0) 40%),
    radial-gradient(circle at 70% 70%, rgba(37,213,255,.5), rgba(37,213,255,0) 22%);
  filter: blur(16px);
  opacity: 1;
  z-index: 0;
  pointer-events:none;
}

/* Make sure the logo image sits above its glow */
.ftx-hero-logo{
  position: relative;
  z-index: 1;
  display:block;
  border-radius: 18px;
  background: transparent;
  /*border: 1px solid rgba(30, 91, 255, 0.35);*/
  /*padding: 11px;*/          /* slightly bigger than before */
}

/* Wordmark */
.ftx-hero-brand{
  line-height: 1.05;
  position: relative;
  z-index: 1;
  text-align: left; /* lockup is centered, text remains nicely readable */
}

.ftx-wordmark{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: clamp(2.35rem, 4.5vw, 3.5rem); /* ~15% larger overall */
  letter-spacing: -0.035em;
  color: #005028;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

.ftx-fit{ font-weight: 500; }
.ftx-tally{ font-weight: 800; }

/* Primary strapline */
.ftx-subtag{
  margin-top: .45rem;
  font-size: 1.12rem;     /* slightly bigger */
  letter-spacing: .02em;
  color: #005028
}

/* Left blurb helper */
.ftx-blurb .text-muted-50{
  color: rgba(234,241,255,.68) !important;
}

/* Right-side panel (premium glass) */
.ftx-hero-panel{
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(234,241,255,.12);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.ftx-panel-title{
  color: #545558;
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: .01em;
}

.ftx-panel-text{
  margin-top: .45rem;
  color: rgb(53, 56, 62);
}

.ftx-panel-hint{
  font-size: .85rem;
  color: rgb(51, 52, 54);
}

/* Slightly punchier primary button only inside the hero */
.ftx-hero .btn.btn-primary{
  box-shadow: 0 10px 24px rgba(30,91,255,.28);
}

/* Mobile balance */
@media (max-width: 420px){
  .ftx-brand-lockup{
    gap: 14px;
    padding: 10px 12px;
  }

  .ftx-logo-wrap::before{ inset:-18px; filter: blur(14px); }

  .ftx-hero-logo{
    width: 78px;
    height: 78px;
    padding: 9px;
  }

  .ftx-wordmark{
    font-size: clamp(2.0rem, 8vw, 2.4rem);
  }

  .ftx-subtag{
    font-size: 1.02rem;
  }
}

/* row layout for the icons */
.student-flags{
  display:flex;
  justify-content:center;   /* center the row */
  align-items:center;
  gap:.4rem;                /* spacing between icons */
  flex-wrap:wrap;           /* wrap if there are many / narrow card */
}
.student-flags_index{
  display:flex;
  justify-content:left;   /* center the row */
  align-items:center;
  gap:.4rem;                /* spacing between icons */
  flex-wrap:wrap;           /* wrap if there are many / narrow card */
}

/* icon sizing */
.student-flag-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
}

.student-thumb{
  width: 38px;      /* tweak: 32–48px */
  height: 38px;
  object-fit: cover;
  display: block;
}