/* ══════════════════════════════════════════════════════════════
   /css/chrome.css

   Styling for the pieces that come from /includes/ — the header,
   the navbar and its dropdowns, the marquees, the mobile drawer and
   the footer. One copy for the whole site: it used to be pasted into
   the <style> block of all 26 pages.

   No page carries chrome CSS any more — this file is the only copy.
   Loaded before each page's own <style>, so a page can still override
   something here if it ever genuinely needs to, but by default every
   page renders the header, nav, marquees, drawer and footer identically.

   The two page families used to disagree on about forty small values
   (a 2px gap here, a z-index there, two drawer designs). Those are
   settled now: the version the majority of pages used won.

   Page-specific styling (heroes, cards, sections) is NOT in this file
   and stays where it was.
   ══════════════════════════════════════════════════════════════ */

/* Nine pages never declared this and hardcoded 58px instead; the other
   seventeen use the variable. Declaring it here means the shared rules
   below resolve on every page. A page that sets its own value still
   wins — its <style> is loaded after this file. */
:root { --nav-h: 58px; }

.header-top-bar {
  background: var(--brand);
  padding: 7px 60px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
}
.header-top-bar span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Each fact in the bar carries a full and a short wording. The short
   one only appears on phones, where the full strings need more width
   than the screen has and wrap onto a second line. */
.header-top-bar .htb-facts { gap: 18px; }
.header-top-bar .htb-item { display: inline-flex; align-items: center; gap: 6px; }
.header-top-bar .htb-short { display: none; }   /* also inline in the markup, see header.html */
.header-top-bar i { color: var(--gold); font-size: 11px; }
.header-top-bar a { color: rgba(255,255,255,0.65); transition: color 0.2s; }
.header-top-bar a:hover { color: var(--gold); }
.site-header {
  background: #fff;
  padding: 18px 60px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 3px solid var(--brand);
}
.header-brand { display: flex; align-items: center; gap: 18px; }
.header-conf-logo { height: 100px; width: auto; }
.header-brand-text {
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--border);
  padding-left: 18px;
}
.header-brand-text .conf-name {
  font-size: 20px; font-weight: 800;
  color: var(--brand); letter-spacing: 0.02em; line-height: 1;
}
.header-brand-text .conf-full {
  font-size: 12px; color: var(--muted); font-weight: 400;
  letter-spacing: 0.02em; line-height: 1.4;
}
.header-edition-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--purple), var(--purple-d));
  color: white; font-size: 10.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 6px; width: fit-content;
}
.header-sponsors { display: flex; align-items: center; gap: 0; }
.header-sp-group {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 24px; border-right: 1px solid var(--border);
}
.header-sp-group:last-child { border-right: none; padding-right: 0; }
.header-sp-group .sp-label {
  font-size: 9.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 600;
}
.header-sp-group img { height: 36px; width: auto; opacity: 0.8; transition: opacity 0.2s; }
.header-sp-group img:hover { opacity: 1; }
.navbar {
  background: var(--brand);
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 2px solid rgba(142,36,170,0.5);
  transition: box-shadow 0.3s;
}
.navbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.45); }
.nav-container { max-width: 1300px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.brand-logo-wrap { display: flex; align-items: center; gap: 12px; height: var(--nav-h); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.navbar.scrolled .brand-logo-wrap { opacity: 1; visibility: visible; }
.brand-logo { height: 46px; width: auto; display: block; }
.nav-items { display: flex; list-style: none; margin-left: auto; }
.nav-item { position: relative; }
.nav-item > a, .nav-item > span.nav-link {
  display: flex; align-items: center; gap: 5px; padding: 0 16px; height: var(--nav-h);
  color: rgba(255,255,255,0.78); font-size: 12px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.22s, border-color 0.22s;
}
.nav-item > a:hover, .nav-item > span.nav-link:hover, .nav-item:hover > span.nav-link { color: #fff; border-bottom-color: var(--gold); }
.nav-item > a.active { color: #fff; border-bottom-color: var(--gold); }
.nav-item > span.nav-link::after {
  content: '\f107'; font-family: 'Font Awesome 6 Free';
  font-weight: 900; font-size: 10px; margin-left: 3px;
}
.dropdown-content { display: none; position: absolute; top: 100%; left: 0; background: var(--brand); min-width: 300px; border-top: 2px solid var(--purple); box-shadow: 0 10px 32px rgba(0,0,0,0.45); z-index: 200; }
.nav-item:hover .dropdown-content { display: block; }
.dropdown-item {
  display: block; padding: 11px 20px;
  color: rgba(255,255,255,0.7);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-left: 3px solid transparent; transition: all 0.18s;
}
.dropdown-item:hover {
  background: rgba(142,36,170,0.18); color: #fff;
  border-left-color: var(--gold); padding-left: 26px;
}
.dropdown-item.active { color: var(--gold); border-left-color: var(--gold); }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; margin-right: -10px; }
.hamburger span { display: block; width: 24px; height: 2px; background: rgba(255,255,255,0.85); border-radius: 2px; transition: all 0.3s; }
.mobile-nav { position: fixed; top: var(--nav-h); right: 0; bottom: 0; width: min(82%, 340px); background: var(--brand); z-index: 1001; overflow-y: auto; padding: 16px 16px 40px; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.22,0.61,0.36,1); box-shadow: -12px 0 32px rgba(0,0,0,0.45); visibility: hidden; }
.mobile-nav.open { transform: translateX(0); visibility: visible; }
.mobile-nav-overlay { position: fixed; inset: 0; top: var(--nav-h); background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
body.nav-open { overflow: hidden; }
body.nav-open .nav-marquee { visibility: hidden; }
body.nav-open .marquee-strip-mobile { display: none !important; }
.mobile-nav a { display: block; padding: 14px 14px; color: rgba(255,255,255,0.78); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid rgba(255,255,255,0.07); transition: color 0.2s; }
.mobile-nav a:hover, .mobile-nav a:active { color: var(--gold); }
.mobile-nav a.mob-sub {
  padding-left: 38px; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.68);
}
.mobile-nav a.mob-sub::before {
  content: ''; width: 10px; height: 1px; background: rgba(212,175,55,0.6);
  margin-right: 12px; margin-left: -22px; flex-shrink: 0;
}
.mobile-nav a.mob-sub:hover { padding-left: 44px; color: var(--gold); }
.mob-close {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px 22px; margin-bottom: 4px;
  background: rgba(255,255,255,0.06); border: none; border-bottom: 1px solid rgba(255,255,255,0.12);
  color: var(--gold); font: inherit; font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mob-close:hover { background: rgba(212,175,55,0.16); color: #fff; }
.mob-close i { font-size: 15px; }
/* ABOUT / FOR AUTHORS / PROGRAM collapse in the drawer, the way they
   drop down on desktop. The label is a <button>, so it needs the UA
   button styling stripped back to what the old <div> looked like. */
.mobile-nav .mob-section {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font: inherit; font-size: 10px; font-weight: 700;
  color: var(--gold); padding: 16px 14px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.2s;
}
.mobile-nav .mob-section i { font-size: 11px; transition: transform 0.25s ease; }
.mobile-nav .mob-section[aria-expanded="true"] i { transform: rotate(180deg); }
.mobile-nav .mob-section:hover { color: #fff; }
.mob-group {
  max-height: 0; overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.22,0.61,0.36,1);
}
.mob-group.open { max-height: 640px; }
.nav-marquee {
  display: none; flex: 1; overflow: hidden; height: 58px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.nav-marquee-track {
  display: flex; align-items: center; gap: 30px; height: 100%;
  width: max-content; animation: mLeft 22s linear infinite;
}
.nav-marquee-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,0.82); white-space: nowrap;
}
.nav-marquee-item i { color: var(--gold); font-size: 11px; }
.nav-marquee-item strong { color: #fff; font-weight: 600; }
.nav-marquee-sep { color: rgba(212,175,55,0.7); font-size: 10px; }
.marquee-strip-mobile {
  display: none;
  background: var(--off); border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.marquee-strip {
  background: var(--off); border-bottom: 1px solid var(--border);
  padding: 10px 0; overflow: hidden;
  position: sticky; top: 58px; z-index: 999;
}
.marquee-track { display: flex; gap: 52px; animation: mLeft 32s linear infinite; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.marquee-item i { color: var(--purple); font-size: 11px; }
.marquee-item strong { color: var(--brand); font-weight: 600; }
.marquee-sep { color: #d0b0d0; }
footer {
  background: #1a0e1a;
  padding: 68px 60px 36px;
  /* Keeps the footer from merging into whatever sits above it. Most
     pages end on a light band so the join was obvious, but a few end
     on a dark section almost the same colour as the footer (kerala,
     for one) and the seam disappeared entirely. This accent line
     brackets the page: same purple-to-gold sweep the cards use, and
     it mirrors the navbar's border at the top of the page. */
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.07);
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple, #8e24aa), var(--gold, #d4af37));
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; max-width: 1200px; margin: 0 auto 48px; }
.footer-brand img { height: 44px; filter: brightness(0) invert(1); opacity: 0.78; margin-bottom: 16px; }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,0.42); line-height: 1.8; margin-bottom: 24px; }
.footer-socials { display: flex; gap: 10px; }
.soc-link { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-size: 14px; transition: all 0.25s; }
.soc-link:hover { background: var(--purple); border-color: var(--purple); color: white; transform: translateY(-2px); }
.footer-col h4 {
  font-size: 12px; font-weight: 700; color: white;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgba(255,255,255,0.42); font-size: 13px; transition: color 0.22s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  max-width: 1200px; margin: 0 auto; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,0.28);
}
.nav-item > a.active, .nav-item > span.nav-link.active { color: #fff; border-bottom-color: var(--gold); }
.dropdown-item.active { color: var(--gold); border-left-color: var(--gold); }
.mobile-nav a.active { color: var(--gold); }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-overlay.open { opacity: 1; visibility: visible; }
.mob-sub { padding-left: 28px !important; font-size: 12.5px !important; }
.brand-label {
  font-size: 13px; font-weight: 700; color: white;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-left: 2px solid rgba(212,175,55,0.6);
  padding-left: 12px; line-height: 1.2;
}
.brand-label span { display: block; font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; }
.mobile-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky; top: 0; background: var(--brand); z-index: 2;
}
.mobile-nav-title { font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: 0.16em; }
.mobile-nav-close {
  background: none; border: none; color: #fff; font-size: 20px;
  cursor: pointer; padding: 4px 8px; line-height: 1;
}
.mobile-nav-close:hover { color: var(--gold); }
body.nav-open { overflow: hidden; }
.marquee-strip-desktop { display: block; }
body.nav-open .marquee-strip { visibility: hidden; }

@media (max-width: 1100px) {
  .site-header, .header-top-bar { padding-left: 28px; padding-right: 28px; }
  .nav-container { padding: 0 20px; }
  #legacy, #edition, #past, #impact, footer, .page-hero { padding-left: 32px; padding-right: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  #quickstats, #notice, .hotels, #travel, #campus, footer { padding-left: 32px; padding-right: 32px; }
  footer, .page-hero { padding-left: 32px; padding-right: 32px; }
  #statement, #pillars, #commitments, #access, #dei-contact, footer { padding-left: 32px; padding-right: 32px; }
  #about, #organisers, #theme, .sponsor-cta-section, #dates, #why, footer { padding-left: 32px; padding-right: 32px; }
  #welcome, .tourism, #plan, footer { padding-left: 32px; padding-right: 32px; }
  .org-profile, #awards, #more, footer { padding-left: 32px; padding-right: 32px; }
  #about-spon, #featured, #tiers, #additional, #sisters, #sponsor-form, footer { padding-left: 32px; padding-right: 32px; }
  #overview, #vm, #facilities, #transport, #map-sec, #vcontact, footer { padding-left: 32px; padding-right: 32px; }
  #vhighlight, #vfacts, #welcome, #eligibility, #steps, #restrictions, #exemption, #policy, #faq, #apply, footer { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 900px) {
  .header-sp-group { padding: 0 14px; }
  .header-sp-group .sp-label { display: none; }
  .header-sp-group img { height: 30px; }
}

@media (max-width: 768px) {
  .site-header { padding: 10px 12px; }
  .header-brand { gap: 8px; flex: 1; min-width: 0; }
  .header-conf-logo { height: 46px; }
  .header-brand-text { padding-left: 8px; }
  .header-brand-text .conf-name { font-size: 11px; }
  .header-brand-text .conf-full { font-size: 9px; line-height: 1.3; }
  .header-edition-badge { display: none; }
  .header-sponsors { display: flex; flex-shrink: 0; }
  .header-sp-group { padding: 0 6px; }
  .header-sp-group:last-child { border-right: none; }
  .header-sp-group .sp-label { display: none; }
  .header-sp-group img { height: 22px; }
  .nav-items { display: none; }
  .brand-logo-wrap { gap: 8px; width: 0; overflow: hidden; }
  .navbar.scrolled .brand-logo-wrap { width: auto; margin-right: 8px; }
  .brand-label { display: none; }
  .hamburger { display: flex; margin-left: auto; }
  .navbar { height: 58px; }
  .nav-container { padding: 0 14px; justify-content: flex-start; gap: 8px; height: 58px; }
  .nav-marquee { display: block; order: 2; }
  .marquee-strip { display: none; }
  .marquee-strip-mobile {
    display: none; position: fixed; top: 58px; left: 0; right: 0;
    padding: 9px 0; z-index: 997;
  }
  .navbar.scrolled ~ .marquee-strip-mobile { display: block; }
  .navbar.scrolled .nav-marquee { display: none; }
  .header-top-bar { padding: 6px 16px; font-size: 11px; }
  .header-top-bar .htb-right { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .brand-logo { height: 34px; }
  .hamburger { order: 3; flex-shrink: 0; }
  footer { padding: 48px 20px 30px; }
  .marquee-strip-desktop { display: none; }
  .header-top-bar span { gap: 6px; }
  /* all three facts on one line */
  .header-top-bar { font-size: 10px; padding-left: 10px; padding-right: 10px; }
  .header-top-bar .htb-facts { flex-wrap: nowrap; white-space: nowrap; width: 100%; gap: 8px; justify-content: space-between; }
  .header-top-bar .htb-item { gap: 4px; }
  .header-top-bar i { font-size: 10px; }
  .header-top-bar .htb-full { display: none !important; }
  .header-top-bar .htb-short { display: inline !important; }   /* beats the inline style */
  .marquee-track { gap: 34px; animation-duration: 22s; }
  .marquee-item { font-size: 11.5px; gap: 6px; }
  .marquee-sep { font-size: 10px; }
}

@media (max-width: 480px) {
  .header-conf-logo { height: 46px; }
  .header-sp-group img { height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .nav-marquee-track { animation: none; }
}


/* ══════════════════════════════════════════════════════════════
   Behaviour of the bar and the header logo link.
   These rules used to sit in a <style> block inside
   /includes/navbar.html and /includes/header.html; they live here
   now so those fragments are pure markup.
   ══════════════════════════════════════════════════════════════ */
/* ── Scroll behaviour of the bar ─────────────────────────────────
   At the top of the page the menu sits centred and the brand logo
   is not there at all — it takes up no width, so nothing pulls the
   menu off centre. Once the page scrolls past 80px each page's own
   handler puts .scrolled on #mainNav; the logo then takes its width
   on the left and the menu slides over to the right.

   Desktop only. Below 769px the menu is the drawer in
   /includes/mobile-nav.html and the bar has its own layout, which
   the page stylesheets already handle. */
@media (min-width: 769px) {
  .navbar .brand-logo-wrap {
    width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
  }
  .navbar.scrolled .brand-logo-wrap {
    width: auto;
    opacity: 1;
    visibility: visible;
  }
  /* centred while at the top … */
  .navbar .nav-items { margin-left: auto; margin-right: auto; }
  /* … pushed right once the logo appears */
  .navbar.scrolled .nav-items { margin-left: auto; margin-right: 0; }
}
/* The logo link is only a wrapper — it must not add underline,
   colour or extra line-height around the image, and it has to stay
   a flex child so .header-conf-logo keeps sizing itself. */
.header-brand .header-home-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  /* the brand row is flex and squeezes on narrow screens — without
     this the wrapper shrinks and squashes the logo out of shape */
  flex: 0 0 auto;
}