/* ============================================================
   BHARAT CAREER ACADEMY — design system
   Palette:  --ink (near-black olive) / --olive (deep field green)
             --khaki (parade tan) / --parchment (off-white bg)
             --brass (rank insignia gold) / --maroon (police/alert)
             --navy (air force / trust)
   Type:     Teko (display, parade-stencil) / Rajdhani (eyebrows, labels)
             Work Sans (body)
   Signature: the "ribbon bar" — a stacked medal-ribbon stripe used as
              a divider, a merit marker and a loading/progress motif.
   ============================================================ */

:root{
  --ink:        #171F13;
  --olive:      #2B3524;
  --olive-2:    #3B4A30;
  --khaki:      #C8BC93;
  --khaki-2:    #E4DCC0;
  --parchment:  #F4F1E6;
  --paper:      #FBFAF4;
  --brass:      #B9862C;
  --brass-2:    #DDAE49;
  --maroon:     #7A2733;
  --navy:       #16273D;
  --line:       rgba(23,31,19,0.12);
  --shadow:     0 20px 50px -20px rgba(23,31,19,0.35);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--parchment);
  color:var(--ink);
  font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- type ---------- */
.font-display{ font-family:'Teko', sans-serif; letter-spacing:0.01em; }
.font-label{ font-family:'Rajdhani', sans-serif; }

.eyebrow{
  font-family:'Rajdhani', sans-serif;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-size:0.78rem;
}

h1,h2,h3,.display{
  font-family:'Teko', sans-serif;
  font-weight:600;
  line-height:0.95;
  letter-spacing:0.005em;
}

/* ---------- texture: subtle canvas/rip-stop weave ---------- */
.texture-canvas{
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.035) 0 2px, transparent 2px 8px);
}

.texture-dot{
  background-image: radial-gradient(rgba(23,31,19,0.14) 1px, transparent 1.4px);
  background-size: 14px 14px;
}

/* ---------- signature: ribbon bar ---------- */
.ribbon-bar{
  display:flex;
  height:10px;
  width:100%;
  overflow:hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.ribbon-bar span{ flex:1 1 0; }
.ribbon-bar .c1{ background:var(--maroon); }
.ribbon-bar .c2{ background:var(--brass); }
.ribbon-bar .c3{ background:var(--olive-2); }
.ribbon-bar .c4{ background:var(--navy); }
.ribbon-bar .c5{ background:var(--khaki); }

.ribbon-bar-thin{ height:4px; }

/* ---------- emblem ---------- */
.emblem-ring{ filter:drop-shadow(0 6px 10px rgba(0,0,0,0.35)); }

/* ---------- hero background w/ graceful fallback ---------- */
.hero-photo{
  background-color:var(--ink);
  background-size:cover;
  background-position:center;
  position:relative;
}
.hero-photo::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(23,31,19,0.55) 0%, rgba(23,31,19,0.78) 55%, rgba(23,31,19,0.96) 100%),
    linear-gradient(90deg, rgba(23,31,19,0.55) 0%, rgba(23,31,19,0.15) 45%, rgba(23,31,19,0.55) 100%);
}
.hero-photo > *{ position:relative; z-index:1; }

.photo-tile{
  background-color:var(--olive);
  background-size:cover;
  background-position:center;
}

/* ---------- cards ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.card-stamp{
  position:relative;
}
.card-stamp::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--brass);
}

/* ---------- nav ---------- */
.nav-link{
  position:relative;
  font-family:'Rajdhani', sans-serif;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:0.86rem;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:var(--brass);
  transition:right 0.25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ right:0; }

/* ---------- buttons ---------- */
.btn{
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:0.86rem;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.85rem 1.6rem;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-brass{
  background:var(--brass);
  color:var(--ink);
  box-shadow:0 10px 24px -10px rgba(185,134,44,0.7);
}
.btn-brass:hover{ transform:translateY(-2px); background:var(--brass-2); }
.btn-outline{
  border:1.5px solid var(--khaki-2);
  color:var(--parchment);
}
.btn-outline:hover{ background:rgba(244,241,230,0.1); transform:translateY(-2px); }
.btn-dark{
  background:var(--ink); color:var(--parchment);
}
.btn-dark:hover{ transform:translateY(-2px); background:var(--olive); }

/* ---------- chevron / rank marker ---------- */
.chevron{
  width:0; height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:9px solid var(--brass);
}

/* ---------- number counter ---------- */
.stat-num{ font-family:'Teko',sans-serif; font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- marquee ---------- */
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 32s linear infinite;
}
.marquee-track:hover{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- accordion ---------- */
.accordion-item[open] .accordion-icon{ transform:rotate(45deg); }
.accordion-icon{ transition:transform 0.2s ease; }
summary::-webkit-details-marker{ display:none; }

/* ---------- form fields ---------- */
.field-input{
  width:100%;
  background:var(--paper);
  border:1.5px solid var(--line);
  padding:0.85rem 1rem;
  font-family:'Work Sans', sans-serif;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input:focus{
  outline:none;
  border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(185,134,44,0.22);
}
.field-label{
  font-family:'Rajdhani', sans-serif;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-size:0.78rem;
  color:var(--olive);
}

/* ---------- utility ---------- */
.text-brass{ color:var(--brass); }
.text-maroon{ color:var(--maroon); }
.text-navy{ color:var(--navy); }
.bg-ink{ background:var(--ink); }
.bg-olive{ background:var(--olive); }
.bg-parchment{ background:var(--parchment); }
.bg-khaki{ background:var(--khaki); }
.border-hair{ border-color:var(--line); }

/* focus visibility for a11y */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}