/*
 * The public landing page. Plain committed CSS, no build step: the hero's
 * backdrop and the rotating headline word. Layout and colour otherwise come
 * from the compiled stylesheet.
 */

/*
 * The hero's colour, as channel triplets rather than the theme's own tokens.
 *
 * The backdrop is four overlapping washes that have to fade to nothing at
 * their edges, and a gradient stop of `transparent` is rgba(0,0,0,0) - so
 * every one of them would fade through grey and leave a dirty ring. Fading to
 * the same colour at zero alpha is the fix, and that needs the channels
 * separately. `rgb(R G B / a)` is the widest-supported way to write that;
 * relative colour syntax would express it from --primary directly but is too
 * new for the phones this has to work on.
 *
 * The two colours are the theme's primary (blue-500, #2b7fff) and a violet
 * beside it, which is what gives the wash depth instead of one flat tint.
 */
:root {
  --landing-wash-a: 43 127 255;
  --landing-wash-b: 124 108 245;
  --landing-wash-strength: 1;
}
.dark {
  /* The same hues carry far less alpha on a near-black ground before they
     stop reading as a backdrop and start reading as fog. */
  --landing-wash-a: 96 165 250;
  --landing-wash-b: 139 125 255;
  --landing-wash-strength: 0.55;
}

/* WCAG AA colours for normal-size public-page text and primary surfaces. */
:root {
  --landing-accent: 29 78 216;
  --landing-action: 29 78 216;
}
.dark {
  --landing-accent: 96 165 250;
  --landing-action: 37 99 235;
}
.landing-accent {
  color: rgb(var(--landing-accent));
}
.landing-primary-action,
.landing-primary-surface {
  background-color: rgb(var(--landing-action));
  border-color: rgb(var(--landing-action));
  color: #fff;
}
.landing-primary-action:hover {
  background-color: rgb(30 64 175);
  border-color: rgb(30 64 175);
}
.dark .landing-primary-action:hover {
  background-color: rgb(29 78 216);
  border-color: rgb(29 78 216);
}

/*
 * The hero's two buttons stay side by side on a phone, in equal columns.
 * Large buttons do not fit two abreast at 360px, so below sm they shrink and
 * a long label may wrap to a second line instead of pushing its neighbour
 * underneath. Unlayered, so it beats the kt-btn-lg component sizes.
 */
@media (max-width: 639.98px) {
  .landing-hero-actions .kt-btn {
    height: auto;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
  /* The arrow is decoration; on a phone its width is what the label needs. */
  .landing-hero-actions .kt-btn .ki-filled {
    display: none;
  }
}

/*
 * The directorate's name stays on one line on a phone. At 13px with the
 * desktop padding the English name needs about 354px and a 393px phone has
 * about 345, so "Education" dropped to a line of its own. Tighter spacing and
 * 12px fit it; 11px below 380px. Under 360px it may wrap rather than overflow.
 */
@media (max-width: 639.98px) {
  .landing-badge {
    gap: 0.5rem;
    padding-inline: 0.75rem;
    font-size: 0.75rem;
  }
}
@media (min-width: 360px) and (max-width: 639.98px) {
  .landing-badge {
    white-space: nowrap;
  }
}
@media (min-width: 360px) and (max-width: 379.98px) {
  .landing-badge {
    font-size: 0.6875rem;
  }
}

/*
 * The line joining the application steps. Each step draws the segment that
 * leads to the next one, so the last step draws none.
 *
 * Phone and tablet: down the page, from under this step's 40px marker to the
 * bottom of the step, centred on the marker. lg: across, from 12px after the
 * marker to 12px before the next column's marker - the columns are 2rem apart.
 */
:root {
  --landing-step-line: rgb(var(--landing-action) / 0.35);
}
.dark {
  /* The action blue at that strength all but vanishes on near-black. */
  --landing-step-line: rgb(96 165 250 / 0.45);
}
.landing-step-line {
  position: absolute;
  inset-inline-start: calc(1.25rem - 1px);
  top: calc(2.5rem + 0.375rem);
  bottom: 0.375rem;
  border-inline-start: 2px solid var(--landing-step-line);
}
.landing-step:last-child .landing-step-line {
  display: none;
}
@media (min-width: 1024px) {
  .landing-step-line {
    top: calc(1.25rem - 1px);
    bottom: auto;
    inset-inline-start: calc(2.5rem + 0.75rem);
    inset-inline-end: calc(-2rem + 0.75rem);
    border-inline-start: 0;
    border-top: 2px solid var(--landing-step-line);
  }
}

/*
 * The closing call to action. In dark mode the bright blue slab is the
 * loudest thing on a near-black page, so it drops to deep navy with light
 * text, and its button turns light so it still reads as the thing to press.
 */
.dark .landing-cta {
  background-color: rgb(23 37 84);
  background-image: linear-gradient(135deg, rgb(30 58 138), rgb(23 37 84));
  border: 1px solid rgb(30 64 175 / 0.6);
  color: rgb(239 246 255);
}
.dark .landing-cta p {
  color: rgb(191 219 254);
}
.dark .landing-cta-action {
  background-color: rgb(239 246 255);
  border-color: rgb(239 246 255);
  color: rgb(23 37 84);
}
.dark .landing-cta-action:hover {
  background-color: #fff;
  border-color: #fff;
}

.landing-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /*
   * Up under the header and back down again, so the wash runs behind a
   * transparent header instead of starting at a hard line below it.
   *
   * A fixed 100px rather than var(--header-height): that token drops to 60px
   * the moment the header goes sticky, and by then the header is fixed and no
   * longer over the hero at all - following it would shift the whole page
   * mid-scroll.
   */
  --landing-header-overlap: 100px;
  margin-top: calc(-1 * var(--landing-header-overlap));
  padding-top: var(--landing-header-overlap);
  /* A tint across the whole block, so the washes above sit on colour rather
     than on white and the section reads as one surface. */
  background-image: linear-gradient(
    165deg,
    rgb(var(--landing-wash-a) / calc(0.05 * var(--landing-wash-strength))) 0%,
    rgb(var(--landing-wash-b) / calc(0.07 * var(--landing-wash-strength))) 48%,
    rgb(var(--landing-wash-a) / calc(0.04 * var(--landing-wash-strength))) 100%
  );
}

.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/*
 * Four soft washes, the shape the Metronic landing gets from blurred divs.
 * Done as gradients instead: a 40rem box under filter: blur(80px) is a real
 * cost on the mid-range Android this is mostly read on, and paints the same
 * picture.
 */
.landing-hero::before {
  background-image:
    radial-gradient(42rem 32rem at 6% 6%,
      rgb(var(--landing-wash-a) / calc(0.3 * var(--landing-wash-strength))),
      rgb(var(--landing-wash-a) / 0) 68%),
    radial-gradient(38rem 30rem at 95% 2%,
      rgb(var(--landing-wash-b) / calc(0.28 * var(--landing-wash-strength))),
      rgb(var(--landing-wash-b) / 0) 66%),
    radial-gradient(34rem 26rem at 82% 88%,
      rgb(var(--landing-wash-a) / calc(0.22 * var(--landing-wash-strength))),
      rgb(var(--landing-wash-a) / 0) 66%),
    radial-gradient(30rem 24rem at 14% 96%,
      rgb(var(--landing-wash-b) / calc(0.2 * var(--landing-wash-strength))),
      rgb(var(--landing-wash-b) / 0) 66%);
}

/*
 * The headline sets its own line-height.
 *
 * theme.css widens every element on a Bengali page to 1.7, unlayered, so it
 * beats any leading-* utility - right for a paragraph of Bengali, and far too
 * loose for display type at 72px, where it opened a whole blank line between
 * the headline and the word that rotates under it. This file is loaded after
 * the compiled stylesheet and matches on specificity, so it wins.
 */
.landing-title,
.landing-title .landing-rotate,
.landing-title .landing-rotate-word {
  line-height: 1.15;
}

/*
 * The rotating word. Every word sits in the same grid cell, so the slot is as
 * wide as the longest of them and the headline never reflows. Inactive words
 * are hidden with visibility, not opacity, so a screen reader hears one word.
 */
.landing-rotate {
  /* A block of its own: the word always opens the second line. As an inline
     slot it sat beside "now" on a phone, as wide as the longest word, and
     pushed "now" down next to an empty gap. */
  display: grid;
  justify-items: center;
  overflow: hidden;
  padding-block: 0.08em;
}
.landing-rotate-word {
  grid-area: 1 / 1;
  visibility: hidden;
  white-space: nowrap;
}
.landing-rotate-word.is-active {
  visibility: visible;
}
.landing-rotate-word.is-entering {
  animation: landing-word-in 0.25s ease-out;
}
.landing-rotate-word.is-leaving {
  visibility: visible;
  animation: landing-word-out 0.25s ease-in forwards;
}

/* Native disclosure keeps every answer available without JavaScript. */
.landing-faq summary {
  cursor: pointer;
  list-style: none;
}
.landing-faq summary::-webkit-details-marker {
  display: none;
}
.landing-faq details[open] .landing-faq-closed {
  display: none;
}
.landing-faq details[open] .landing-faq-open {
  display: inline-flex;
}
@keyframes landing-word-in {
  from { opacity: 0; transform: translateY(-50%); }
  to { opacity: 1; transform: none; }
}
@keyframes landing-word-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-rotate-word { animation: none !important; }
}