/* ==========================================================================
   UniDovo — masthead.css
   The navy header band and the opening hero.

   Hero: the client's "Your Future Begins in Malaysia" banner, full bleed, with
   a real (clickable) action bar underneath. The banner's headline is baked
   into the artwork, so the hero also ships a visually hidden <h1> carrying the
   same message for search engines and screen readers.

   The header is white now, like every other surface: the logo asset is a
   black-and-red wordmark on an opaque white field, so it needs a light
   ground, and the page's ink type reads on it. The band wears the same
   masked grid the sections do (home.css §13).
   Load order: after site.css. Owns .mast* and .hero* class names.
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Masthead tokens
 * ------------------------------------------------------------------ */
:root {
  /* Still used by the two navy bands the masthead owns — the page heroes and
     the hero's fallback colour. The header itself is white now, so it reads
     the site tokens (--ink, --line, --surface) like every other surface. */
  --mast:            #071A33;
  --mast-deep:       #04101F;
  --mast-fg:         #FFFFFF;
  --mast-fg-2:       rgba(255, 255, 255, 0.72);
  /* --mast-line, --mast-line-soft and --mast-fg-3 were the header's borders
     and muted type; they went with the navy bar. */
  /* Accent used on the navy bands and for the header's dashed edge. The brand
     red sampled from the logo, lifted to stay legible on navy. The old amber
     is retired — no yellow remains in the palette. */
  --mast-accent:     #FF171F;
}

/* ------------------------------------------------------------------ *
 * 2. Masthead shell
 *
 * ONE row. The old masthead stacked a 36px utility strip (est. date, phone,
 * email, hours, socials) on top of the nav row, and every one of those facts
 * is already in the footer's "Get in touch" column — it was a second copy of
 * the footer pinned above every page. Removing it took 37px off the header.
 * ------------------------------------------------------------------ */
.mast {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  color: var(--ink);
  background: var(--surface);
}
/* The header wears the same masked grid the section backgrounds do
   (home.css §13): 66px rules at ~4.5% ink, blooming from the centre and
   dissolving before they reach an edge. It sits behind the row, which is
   why .mast__nav-inner carries a z-index. */
.mast::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: radial-gradient(130% 165% at 50% -25%, #000 0%, transparent 74%);
          mask-image: radial-gradient(130% 165% at 50% -25%, #000 0%, transparent 74%);
}

/* main nav row ------------------------------------------------------- */
.mast__nav {
  position: relative;
  background: transparent;
  transition: box-shadow 0.25s var(--ease);
}
/* main.js toggles Tailwind's shadow utilities on #main-nav — map them to a
   light-appropriate shadow rather than Tailwind's grey defaults. */
.mast__nav.shadow-sm { box-shadow: none; }
.mast__nav.shadow-lg { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); }

.mast__nav-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: var(--header-h);
  /* allowed to run wider than the content grid so the links and the two
     actions fit on one row */
  max-width: 1300px;
}

/* ------------------------------------------------------------------ *
 * 3. Brand
 * ------------------------------------------------------------------ */
.mast__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}
/* The logo asset is a red mark on transparency, so it sits straight on the
   navy: it never needed the white plate that used to box it in. (The plate,
   its shadow and the --plate-h setting are gone from the markup too.) */
.mast__mark {
  display: block;
  height: min(var(--mark-h, 34px), 40px);
  width: auto;
  flex: none;
}
@media (max-width: 767px) {
  .mast__mark { height: min(var(--mark-h, 30px), 34px); }
}

.mast__brandmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--brand-500), var(--brand-800));
  color: #fff;
  font-size: 1rem;
}
.mast__wordmark { display: block; }
.mast__wordmark b {
  display: block;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* only used when no logo asset is set — with a mark in place the markup prints
   no wordmark at all (client: the mark is enough) */
.mast__wordmark span {
  display: block;
  margin-top: 1px;
  color: var(--mast-accent);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 4. Nav links
 * ------------------------------------------------------------------ */
/* The links cluster with the buttons at the right edge rather than floating in
   the middle of the row — brand on the left, everything else on the right. */
.mast__links { display: none; align-items: center; gap: 0.125rem; margin-left: auto; }

.mast__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-radius: 10px;
  color: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
/* Two states, both a soft fill: a barely-there ink wash for hover, the brand's
   pale blue for the page you are on — the same treatment the eyebrow pills and
   the footer's link hovers use, so the header speaks the site's language.
   (On the old navy bar the fills had to be white.) */
.mast__link:hover { background: rgba(15, 23, 42, 0.045); color: var(--ink); }
.mast__link.is-active { background: var(--brand-50); color: var(--brand-800); }

/* dropdown ----------------------------------------------------------- */
.mast__drop { position: relative; }
.mast__drop > .mast__link { cursor: default; }
.mast__drop .mast__link i { font-size: 0.5rem; opacity: 0.55; }
.mast__menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: -0.25rem;
  min-width: 17rem;
  padding: 0.4375rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
/* keeps the menu open while the pointer crosses the gap */
.mast__menu::before {
  content: '';
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}
.mast__drop:hover .mast__menu,
.mast__drop:focus-within .mast__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mast__menu a {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.6875rem;
  border-radius: 10px;
  color: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.mast__menu a:hover { background: var(--surface-2); color: var(--ink); }
.mast__menu i { margin-top: 0.15rem; color: var(--brand-600); }
.mast__menu small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * 5. Actions
 * ------------------------------------------------------------------ */
.mast__actions { display: none; align-items: center; gap: 0.5rem; flex: none; }

.mast__ghost {
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
}
.mast__ghost:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-700);
}

.mast__cta {
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37, 89, 232, 0.35);
}
.mast__cta:hover {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 89, 232, 0.45);
}

/* burger ------------------------------------------------------------- */
.mast__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
}
.mast__burger:hover { background: var(--surface-2); }
.mast__bars { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.mast__bars span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: all 0.3s ease;
}
.mast__bars span:last-child { width: 12px; background: var(--mast-accent); }

/* ------------------------------------------------------------------ *
 * 6. Signature: a dashed boarding line along the header edge
 * ------------------------------------------------------------------ */
.mast__flightline {
  position: relative;
  height: 1px;
  background: var(--line);
}
.mast__flightline::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, var(--mast-accent) 0 5px, transparent 5px 16px);
  opacity: 0.45;
}
.mast__flightline::after {
  content: '\f072';
  position: absolute;
  top: -6px;
  right: 4%;
  color: var(--mast-accent);
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 9px;
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------ *
 * 7. Mobile panel
 * ------------------------------------------------------------------ */
.mast__panel {
  display: block;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 0.5rem var(--gutter) 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.mast__panel.hidden { display: none; }
.mast__panel a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8125rem 0.625rem;
  border-radius: 10px;
  color: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
}
.mast__panel a:hover { background: var(--surface-2); color: var(--ink); }
.mast__panel a i { width: 1.125rem; text-align: center; color: var(--brand-600); }
.mast__panel h4,
.mast__panel-label {
  margin: 0.875rem 0 0.25rem;
  padding-left: 0.625rem;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mast__panel-sub a {
  padding-left: 2rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.mast__panel-foot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .mast__links, .mast__actions { display: flex; }
  .mast__ghost { display: none; }
  .mast__burger { display: none; }
  .mast__panel { display: none !important; }
}
@media (min-width: 1200px) {
  .mast__ghost { display: inline-flex; }
}

/* ==================================================================== *
 * 8. HERO — full-width banner
 *
 * Photograph only, per the approved design. The artwork is 2103×748
 * (2.81:1), so at a 1500px viewport it makes a 533px band on its own —
 * shorter than the old 620px-capped banner, and nothing is cropped until
 * the viewport passes ~1740px. The copy is baked into the image (a
 * campaign banner, not a plain photo), which is why any replacement has
 * to match 2103×748 exactly and get a matching 1400×748 phone crop.
 * The markup renders one .hero__slide per entry in Admin → Sliders, so
 * adding more later turns this into a carousel with no code change; a
 * single entry stays a static banner.
 * ==================================================================== */
.hero {
  position: relative;
  background: var(--mast-deep);
  /* no padding or height of its own — the photograph defines both */
}
.hero__track { position: relative; display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide img {
  display: block;
  width: 100%;
  height: auto;
  /* floors a very wide upload, caps a very tall one */
  min-height: 220px;
  max-height: min(76vh, 620px);
  object-fit: cover;
  object-position: center;
}

/* carousel chrome — only rendered when there is more than one slide --- */
.hero__ui {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 1.25rem 1rem;
  pointer-events: none;
}
.hero__ui > * { pointer-events: auto; }
.hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 0.8125rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(4, 16, 31, 0.28);
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.hero__arrow:hover { background: #fff; transform: translateY(-1px); }
.hero__dots { display: flex; align-items: center; gap: 0.5rem; }
.hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.hero__dot:hover { background: #fff; }
.hero__dot.is-active { background: #fff; transform: scale(1.3); }


/* ------------------------------------------------------------------ *
 * 9. Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 699px) {
  /* The phone crop ships its own 1400×748 frame, so let the artwork define
     the box and never crop it: the band is the file's own ratio. */
  .hero__slide--banner img {
    min-height: 0;
    max-height: none;
    aspect-ratio: 1400 / 748;
    height: auto;
    object-fit: contain;
  }
  /* Admin-uploaded slides keep the safe centred crop. */
  .hero__slide:not(.hero__slide--banner) img {
    min-height: 240px;
    object-position: center;
  }
  .hero__ui { padding-bottom: 0.75rem; }
  .hero__arrow { width: 34px; height: 34px; }
}

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

/* ==================================================================== *
 * 8b. PAGE HERO — the navy band that opens every INNER page.
 *
 * The homepage has its own banner; inner pages previously each invented
 * their own dark hero (three different purple palettes). This is the one
 * shared replacement, using the masthead tokens so it reads as a
 * continuation of the header rather than a separate design.
 * ==================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--mast);
  color: var(--mast-fg);
}
/* brand wash so a flat navy block still has depth */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 150% at 10% 0%, rgba(37, 89, 232, 0.30), transparent 58%),
    radial-gradient(90% 120% at 100% 110%, rgba(255, 23, 31, 0.18), transparent 60%);
  pointer-events: none;
}
.page-hero__inner { max-width: 46rem; }
.page-hero--center .page-hero__inner { margin-inline: auto; text-align: center; }
.page-hero h1 {
  color: var(--mast-fg);
  font-size: var(--fs-h1);
}
.page-hero__lede {
  margin-top: 0.875rem;
  color: var(--mast-fg-2);
  font-size: var(--fs-lede);
  max-width: 40rem;
}
.page-hero--center .page-hero__lede { margin-inline: auto; }
.page-hero .eyebrow {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--mast-fg);
}
.page-hero .eyebrow i { color: var(--mast-accent); }
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.page-hero--center .page-hero__actions { justify-content: center; }
/* secondary link inside a navy band needs a light hairline. NOTE: site.css
   gives .btn--outline a WHITE background, so the background has to be reset
   here too or the white text disappears into it. */
.page-hero .btn--outline {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
  color: var(--mast-fg);
}
.page-hero .btn--outline:hover {
  border-color: var(--mast-fg);
  background: rgba(255, 255, 255, 0.14);
  color: var(--mast-fg);
}
/* breadcrumb-ish meta line */
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--mast-fg-2);
  font-size: var(--fs-sm);
}
.page-hero__meta i { color: var(--mast-accent); }