/* ==========================================================================
   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; }
}