/* ==========================================================================
   Header  —  one white block with a navy utility strip
   --------------------------------------------------------------------------
   One white block: crest left across both rows, a small utility row, the main
   navigation under it, helpline and Apply Now held right.

   IT RESTYLES nav.html RATHER THAN REPLACING IT. Everything inside .hdr2__nav
   is the real navigation - same markup, same ids, same dropdowns and mega
   menus, same mobile drawer. Below 1100px every override here is switched off
   again so main.css can turn that same element into the drawer; overriding
   position on it at drawer width is what breaks the menu on a tablet.

   Loaded by base.html on every page. The file keeps its -v2 name from
   when it was a preview; the design it describes is the site's.
   ========================================================================== */

.hdr2 {
  /* FIXED, NOT STICKY, and not by preference. body carries overflow:hidden
     and html overflow-x:clip on this site - between them they confine a
     sticky element to a scroll box that never scrolls, so it simply rides
     the page away. Changing that overflow would risk horizontal scroll
     across every page, so the header is taken out of the flow instead and
     home-v2.js pads the body by whatever the header currently measures. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  transition: box-shadow var(--transition), padding var(--transition);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.hdr2__inner {
  /* Wider than the site's 1240px shell. A header laid out this way runs
     nearly the full width of the screen; capped at 1240 the navigation had
     the same room at 1920px as at 1440 and overflowed at both. */
  max-width: 1560px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 8px var(--gutter);
}

/* ------------------------------------------------------------- brand --- */
.hdr2__brand {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.hdr2__crest { width: 44px; height: 44px; flex: 0 0 auto; }
.hdr2__lockup { display: flex; flex-direction: column; line-height: 1.1; }
/* Two lines, never three. At 15ch the name broke into SWAMI / VIVEKANANDA /
   UNIVERSITY and pushed the whole block to three rows of brand beside two of
   navigation. */
.hdr2__name {
  /* Two lines: SWAMI VIVEKANANDA / UNIVERSITY. At 17ch it broke into three
     and the lockup grew taller than the two rows beside it. */
  max-width: 19ch;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.hdr2__lockup small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .58rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------- small row --- */
.hdr2__util {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 18px;
  margin: 0;
  padding: 2px 0 4px;
  list-style: none;
  overflow: hidden;          /* one line: it is secondary, it must not wrap */
}
.hdr2__util a {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--transition);
}
.hdr2__util a:hover { color: var(--ink); }

/* --------------------------------------------------------- main row --- */
.hdr2__nav { grid-column: 2; grid-row: 2; min-width: 0; }

@media (min-width: 1200px) {
  /* The gold band comes off: here the block is the header, so the navigation
     is type on white rather than a bar of its own. */
  .hdr2 .nav {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    width: auto;
    height: auto;
    overflow: visible;
  }
  .hdr2 .nav__list {
    max-width: none;
    padding: 0;
    gap: 0 21px;
    /* Centred in the column between the crest and the call to action, so the
       two rows read as one block rather than as a left-aligned list that
       happens to sit beside a logo. */
    justify-content: center;
    flex-wrap: nowrap;
  }
  .hdr2 .nav__link {
    padding: 6px 0;
    color: var(--ink);
    font-size: .87rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .hdr2 .nav__link:hover { color: var(--accent-deep); }
  /* The bar is gone, so "you are here" needs saying another way. */
  .hdr2 .nav__link.is-current {
    color: var(--accent-deep);
    box-shadow: inset 0 -3px 0 var(--accent);
  }
  /* No home item. The crest is the way home, as it is on every site that
     lays a header out this way, and the icon was taking width the labels
     need. Desktop only - the drawer keeps it. */
  .hdr2 .nav__list > li:first-child { display: none; }

  /* Nor the four from the utility row: the strip above is showing them, and
     a second copy here is what would push the main row back to two lines. */
  .hdr2 .nav__item--util { display: none; }
  .hdr2 .nav__mobile-head { display: none; }
  .hdr2 .nav-scrim { display: none; }
}

/* 1200-1439px: the laptop band. Seven items in caps still run about 90px wide
   of the space left after the brand and the CTA, so the type steps down
   rather than the row wrapping or the menu disappearing into a drawer on a
   screen with plenty of room for it. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .hdr2 .nav__list { gap: 0 7px; }
  .hdr2 .nav__link { font-size: .63rem; }
  .hdr2__name { font-size: .7rem; max-width: 20ch; }
  .hdr2__lockup small { display: none; }
  .hdr2__crest { width: 38px; height: 38px; }
  .hdr2__help-label { font-size: .57rem; }
  .hdr2__help-num { font-size: .8rem; }
  .hdr2__apply { padding: 8px 12px; font-size: .65rem; }
  .hdr2__inner { column-gap: 10px; }
}

/* --------------------------------------------------- helpline + CTA --- */
.hdr2__cta {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 11px;
}
.hdr2__help { text-align: right; line-height: 1.15; }
.hdr2__help-label {
  display: block;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hdr2__help-num {
  color: var(--ink);
  font-size: .9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.hdr2__help-num:hover { color: var(--accent-deep); }

.hdr2__apply {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--cta, var(--accent-deep));
  color: #fff;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--transition);
}
.hdr2__apply:hover { background: var(--cta-hover, var(--ink)); color: #fff; }
.hdr2__apply:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.hdr2__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.hdr2__toggle svg { width: 22px; height: 22px; fill: currentColor; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Under 1200px nothing above applies to .nav any more, so main.css turns it
   back into the drawer it already knows how to be. The header collapses to
   one row: crest, the call to action, the toggle. */
@media (max-width: 1199.98px) {
  .hdr2__inner {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    column-gap: 14px;
  }
  .hdr2__brand { grid-row: 1; }
  .hdr2__util { display: none; }
  .hdr2__nav { display: contents; }
  .hdr2__cta { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .hdr2__toggle { display: grid; place-items: center; grid-column: 3; grid-row: 1; }
}

@media (max-width: 767.98px) {
  .hdr2__help { display: none; }   /* the number is in the drawer and the footer */
  .hdr2__name { font-size: .82rem; max-width: 14ch; }
  .hdr2__crest { width: 42px; height: 42px; }
  .hdr2__apply { padding: 9px 16px; font-size: .72rem; }
}

@media (max-width: 479.98px) {
  .hdr2__apply span { display: none; }
  .hdr2__lockup small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hdr2__util a, .hdr2__apply { transition: none; }
}

/* ==========================================================================
   Compact, once the page has moved
   --------------------------------------------------------------------------
   home-v2.js adds .is-compact past 90px. The utility row folds away and the
   block tightens, so the navigation and Apply Now stay to hand without a
   two-row header following the reader down the page.
   ========================================================================== */
@media (min-width: 1200px) {
  .hdr2.is-compact { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
  .hdr2.is-compact .hdr2__inner { padding-block: 2px; }
  /* Collapsed by height, not display:none - the row animates out instead of
     vanishing, and nothing below it jumps. */
  .hdr2.is-compact .hdr2__util {
    max-height: 0;
    padding-block: 0;
    opacity: 0;
    overflow: hidden;
  }
  .hdr2__util {
    max-height: 40px;
    opacity: 1;
    transition: max-height var(--transition), opacity var(--transition),
                padding var(--transition);
  }
}
.hdr2.is-compact { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }

@media (prefers-reduced-motion: reduce) {
  .hdr2, .hdr2__util { transition: none; }
}

/* --------------------------------------------------------------------------
   Social icons in the utility row
   --------------------------------------------------------------------------
   A little further from the last link than the links are from each other, so
   they read as a separate group rather than as three more items in the list.

   fill: currentColor is what lets them work in every palette - they inherit
   whatever colour that row's links are, white on a navy strip and ink on a
   white one, with no per-palette rule.
   -------------------------------------------------------------------------- */
/* HELD AT THE RIGHT-HAND END, OUT OF THE FLOW. The row is centred, so left
   in the flow the icons simply travelled with the links and sat wherever
   CONTACT happened to end. margin-left: auto would pin them right but would
   also take the free space out of the middle and shove the links over to the
   left, which is not what centring them was for.

   Taken out of the flow instead: the links stay centred in the full width and
   the icons sit against the right edge independently of them. .hdr2__util is
   the containing block, and it keeps its overflow: hidden, so these fold away
   with the rest of the row when the header compacts. */
.hdr2__util { position: relative; }
.hdr2__social {
  position: absolute;
  /* Offsets on an absolutely positioned box are measured from the containing
     block's PADDING box, so right: 0 put these hard against the window edge
     rather than against the row's own gutter. One gutter in lines them up
     with Apply Now and the end of the navigation. */
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0 14px;
}
.hdr2__social a {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  /* The row sets uppercase and letter-spacing for text links; neither means
     anything to an icon and letter-spacing shifts it off centre. */
  letter-spacing: normal;
}
.hdr2__social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ==========================================================================
   Utility row: hairline dividers, and the social icons in rings
   --------------------------------------------------------------------------
   Everything here draws with currentColor, so it works on the navy strip of
   the navy-gold palette and on the white row of every other one without a
   per-palette rule. The dividers are held well back - a full-strength rule
   between every item turns a quiet row into a ladder.
   ========================================================================== */
.hdr2__util > li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 18px;
  background: currentColor;
  opacity: .45;
  vertical-align: -2px;
}
/* The gap is carried by the dividers now, so the flex gap between items
   would double it. */
.hdr2__util { gap: 0; }
.hdr2__util > li + li { margin-left: 18px; }

/* The social group is out of the flow at the right, so it gets its own
   divider rather than the one the flow would have given it. */
.hdr2__social::before {
  content: "";
  width: 1px;
  height: 16px;
  margin-right: 16px;
  background: currentColor;
  opacity: .45;
}
.hdr2__social > li + li::before { content: none; }   /* not a list row */

/* Rings, as in the mockup. Sized off the icon rather than the text, and the
   ring is the link's hit area - 30px square clears the 24px minimum a touch
   target wants. */
.hdr2__social a {
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .85;
  transition: opacity var(--transition), background var(--transition);
}
.hdr2__social a:hover { opacity: 1; background: rgb(255 255 255 / 12%); }
.hdr2__social svg { width: 14px; height: 14px; }

/* ==========================================================================
   The lockup, and a divider before the helpline
   --------------------------------------------------------------------------
   Larger crest and name, and the strapline dropped: at .58rem it was a grey
   line nobody reads, and without it the name can carry the size the mockup
   gives it. THE TAGLINE IS HIDDEN, NOT DELETED - it is still in the markup
   and one rule away if it is wanted back.
   ========================================================================== */
@media (min-width: 1200px) {
  .hdr2__crest { width: 52px; height: 52px; }
  /* Two lines: SWAMI VIVEKANANDA / UNIVERSITY. The measure is in ch, and a
     ch is the width of a "0" - narrower than a capital - so 17ch does not
     hold the 17 characters of "SWAMI VIVEKANANDA" and it broke to three. */
  .hdr2__name { font-size: .95rem; max-width: 21ch; letter-spacing: 0; }
  .hdr2__lockup small { display: none; }

  /* Separates the navigation from the helpline and the call to action, so
     the right-hand block reads as its own group. */
  .hdr2__cta::before {
    content: "";
    align-self: stretch;
    width: 1px;
    margin: 6px 16px 6px 0;
    background: var(--line);
  }
}

/* 1440-1519px. The larger crest and lockup took 6px more than the navigation
   had to spare at exactly 1440 - the width directly above the laptop band,
   where the type goes back to full size. Three pixels off each of the seven
   gaps returns 21px, which covers it without changing anything visible. */
@media (min-width: 1440px) and (max-width: 1519.98px) {
  .hdr2 .nav__list { gap: 0 18px; }
}

/* --------------------------------------------------------------------------
   Pay Now
   --------------------------------------------------------------------------
   An action in a row of links, so it carries the accent and a little more
   weight without becoming a second button. currentColor is not used here on
   purpose: it has to stand out from the links beside it.
   -------------------------------------------------------------------------- */
/* SPECIFICITY, NOT ORDER. navy-gold.css sets .hdr2__util a and loads after
   this file, so at (0,1,1) each it won and Pay Now came out the same white as
   every other link in the row. Naming the row as well makes this (0,2,1) and
   the palette can keep its rule for the rest of them. */
.hdr2__util > .hdr2__pay a {
  color: var(--accent);
  font-weight: 700;
}
.hdr2__util > .hdr2__pay a:hover { color: #ffffff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Pay Now, as a button, below 1200px
   --------------------------------------------------------------------------
   The utility strip carries Pay Now on a desktop and is hidden below 1200px,
   which left no link to the payment gateway on a phone. This is the same
   destination as a compact outlined pill beside Apply Now.

   OUTLINED, NOT FILLED. Two filled buttons side by side compete and neither
   reads as the primary one; Apply Now keeps the gold and this takes its
   outline, which is also what keeps it narrow enough to fit - the row has
   between 49 and 76px to spare depending on width.
   -------------------------------------------------------------------------- */
.hdr2__pay-btn { display: none; }

@media (max-width: 1199.98px) {
  .hdr2__pay-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    border: 1.5px solid var(--accent-deep);
    border-radius: var(--radius-pill);
    color: var(--accent-deep);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
  }
  .hdr2__pay-btn:hover {
    background: var(--accent-deep);
    color: #fff;
  }
  .hdr2__pay-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }
}

/* Narrow phones: the label alone, no pill, so it costs the row 30px less. */
@media (max-width: 479.98px) {
  .hdr2__pay-btn {
    padding: 0;
    border: 0;
    font-size: .66rem;
  }
  .hdr2__pay-btn:hover { background: none; color: var(--accent-deep); }
}

@media (prefers-reduced-motion: reduce) {
  .hdr2__pay-btn { transition: none; }
}

/* ==========================================================================
   The mobile call to action: Pay Now over Apply Now
   --------------------------------------------------------------------------
   Stacked rather than side by side, with Pay Now as plain navy type above the
   gold pill, and the pill's arrow as a disc on its leading edge.

   IT COSTS THE ROW NOTHING. The two were side by side in a row that already
   had the crest on one side and the hamburger on the other; stacking them
   gives each its full width back and adds about 16px of header height.
   ========================================================================== */
@media (max-width: 1199.98px) {
  .hdr2__cta {
    flex-direction: column;
    /* CENTRED OVER THE PILL, and width: max-content is what makes that mean
       anything. The block is a grid item, so left to itself it is as wide as
       its track and centring would float both children somewhere in the
       middle of it. Shrunk to its widest child - Apply Now - and pushed to
       the end of the track instead, so Pay Now centres over the pill and the
       pill stays where it was. */
    align-items: center;
    justify-self: end;
    width: max-content;
    gap: 3px;
  }

  /* Type, not a button. Two buttons side by side compete; one of them being
     a plain label is what makes the gold one read as the primary action. */
  .hdr2__pay-btn {
    padding: 0;
    border: 0;
    color: var(--brand);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
  }
  .hdr2__pay-btn:hover {
    background: none;
    color: var(--accent-deep);
    text-decoration: underline;
  }

  /* The arrow leads, as a navy disc. row-reverse rather than moving it in the
     markup: it is decorative, aria-hidden, and reordering it in the DOM would
     put it before the label for a screen reader that ignores the CSS. */
  .hdr2__apply {
    flex-direction: row-reverse;
    gap: 7px;
    padding: 4px 13px 4px 4px;
    font-size: .66rem;
  }
  .hdr2__apply span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: .78rem;
    line-height: 1;
  }
}

/* Narrow phones keep the disc - it is what the pill is recognisable by - so
   the earlier rule that hid the arrow entirely is undone here. */
@media (max-width: 479.98px) {
  .hdr2__apply span { display: grid; }
  .hdr2__pay-btn { font-size: .76rem; }
}

/* ==========================================================================
   Pay Now, pulsing
   --------------------------------------------------------------------------
   A FADE, NOT A BLINK, AND SLOWLY. WCAG 2.3.1 puts a hard ceiling of three
   flashes a second on anything that flashes, and 2.2.2 says moving or
   blinking content that runs for more than five seconds must be stoppable.
   This runs at 0.6Hz - one slow breath every 1.7 seconds - and never reaches
   zero, so the label is legible at every point in the cycle rather than
   disappearing half the time.

   It stops dead under prefers-reduced-motion, which is the switch a reader
   who cannot tolerate movement already has set.
   ========================================================================== */
@keyframes hdr2-pay-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

@media (max-width: 1199.98px) {
  .hdr2__pay-btn { animation: hdr2-pay-pulse 1.7s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .hdr2__pay-btn { animation: none; opacity: 1; }
}

/* ==========================================================================
   The three the University wants noticed  —  UGC-2f, Self Disclosure, Pay Now
   --------------------------------------------------------------------------
   Which ones blink is set by the 'pulse' key in data.py, not here; this only
   says what blinking looks like, so adding or dropping one never touches the
   stylesheet.

   IT PULSES COLOUR, NOT OPACITY, and that is deliberate. These labels are
   11px uppercase on the navy strip, and fading them the way the mobile Pay
   Now button fades takes the white ones to 3.7:1 and the gold one to 2.6:1
   at the bottom of the cycle - under the 4.5:1 text this size needs, for
   half of every second and a half. Swinging between white and gold instead
   is far more visible AND legible throughout: 12.9:1 at one end, 7.8:1 at
   the other.

   It runs at 0.6Hz, one slow breath every 1.7 seconds, nowhere near the
   three-flashes-a-second ceiling of WCAG 2.3.1, and stops under
   prefers-reduced-motion.
   ========================================================================== */
@keyframes hdr2-util-pulse {
  0%, 100% { color: rgb(255 255 255 / 88%); }
  50%      { color: var(--accent); }
}

/* Pay Now starts gold, so it swings the other way and the three are never
   all the same colour at once - which is what makes the movement read as
   deliberate rather than as a page still loading. */
@keyframes hdr2-pay-pulse-colour {
  0%, 100% { color: var(--accent); }
  50%      { color: #fff; }
}

.hdr2__util > li.is-pulsing > a {
  animation: hdr2-util-pulse 1.7s ease-in-out infinite;
}
.hdr2__util > li.hdr2__pay.is-pulsing > a {
  animation-name: hdr2-pay-pulse-colour;
}

/* Steady the moment it is being used. The animation sets colour, so left
   running it would win against the hover and focus colours - a label that
   ignores the pointer on it reads as a dead link. */
.hdr2__util > li.is-pulsing > a:hover,
.hdr2__util > li.is-pulsing > a:focus-visible {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .hdr2__util > li.is-pulsing > a { animation: none; }
}