/* ==========================================================================
   ASIBONGE LEGACY GROUP - 03 HEADER + FOOTER
   Header is a two-tier dark bar:
     Row 1  logo  |  contact blocks  |  social
     Row 2  primary navigation  |  contact CTA        (sticky on scroll)
   Elementor: Theme Builder > Header, one parent Container holding two child
   Containers. Row 2 gets Advanced > Motion Effects > Sticky: Top.
   ========================================================================== */

/* The whole header sticks, offset upward by exactly the height of row 1, so
   row 1 scrolls away and row 2 parks at the top. Pure CSS, no JS.
   Elementor equivalent: set the row 2 Container to Sticky: Top. */
:root { --alg-header-top-h: 189px; }

.alg-header {
  position: sticky;
  top: calc(-1 * var(--alg-header-top-h));
  z-index: 100;
  background: var(--alg-dark);
}

/* --------------------------------------------------------------------------
   ROW 1 - brand + contact
   -------------------------------------------------------------------------- */
/* Corner motif spans the FULL header, both rows, at full strength.
   The clipping sits on its own absolute layer rather than on .alg-header,
   because overflow on the header would cut off the mega menu when it drops
   out of row 2. Dropdowns live outside this layer, so they still escape.
   The artwork is the pre-mirrored file, so no CSS flip is applied. */
.alg-header__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.alg-header__corner {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(200px, 15vw, 340px);
  height: auto;
}

.alg-header__top { position: relative; }
.alg-header__bar { position: relative; z-index: 1; }

.alg-header__top .alg-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.alg-header__logo { display: block; flex: none; }
.alg-header__logo img { height: 141px; width: auto; display: block; }

.alg-header__info {
  display: flex;
  align-items: center;
  gap: 44px;
  margin-left: auto;
}

/* Icon + two-line block */
.alg-info {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  color: rgba(255,255,255,.86);
  font-size: var(--alg-small);
  line-height: 1.45;
}
/* Each line is a single line by design. The self-hosted IBM Plex Sans is
   fractionally wider than the version Google Fonts was serving, which was
   enough to wrap the address onto a third line. Holding these on one line
   makes the header independent of small metric differences between font
   builds, rather than relying on the text happening to fit. */
.alg-info strong,
.alg-info span { white-space: nowrap; }
.alg-info__icon {
  flex: none;
  width: 19px;
  height: 19px;
  fill: rgba(255,255,255,.55);
  margin-top: 2px;
}
.alg-info strong { display: block; font-weight: 400; color: #fff; }
.alg-info span   { display: block; color: rgba(255,255,255,.62); }
.alg-info a { transition: color .18s var(--alg-ease); }
.alg-info a:hover { color: var(--alg-primary-hi); }

/* The Level 1 marker keeps brand red present in an otherwise dark bar */
.alg-info--tag .alg-info__icon { fill: var(--alg-primary-hi); }

.alg-header__social {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: none;
  padding-left: 8px;
}
.alg-header__social a { color: rgba(255,255,255,.62); transition: color .18s var(--alg-ease); }
.alg-header__social a:hover { color: #fff; }
.alg-header__social svg { width: 19px; height: 19px; fill: currentColor; display: block; }

@media (max-width: 1320px) { .alg-header__info { gap: 28px; } }

/* The three info blocks are held on single lines, so the bar tightens in
   stages rather than reflowing. Below 1260px the address is dropped first:
   it is the least useful of the three at a glance and appears in full in the
   footer and on the contact page. */
@media (max-width: 1260px) {
  .alg-header__info { gap: 22px; }
  .alg-header__info .alg-info:first-child { display: none; }
}

/* Tablet and mobile: the header becomes a SINGLE row. Row 2 holds only the
   navigation at this width, and the navigation lives in the drawer, so the
   whole tier is removed rather than left empty. A red rule along the bottom
   edge replaces the internal divider. */
@media (max-width: 1180px) {
  :root { --alg-header-top-h: 0px; }
  .alg-header__info,
  .alg-header__social,
  .alg-header__bar { display: none; }
  .alg-header { border-bottom: 2px solid var(--alg-primary); }
  .alg-header__top .alg-container {
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 20px;
  }
  .alg-header__logo { margin-right: auto; }
  .alg-header__logo img { height: 118px; }

  /* The corner motif carries through to tablet and mobile. It is scaled down
     hard here: the header collapses from two rows to one, so the artwork has
     far less height to occupy, and at the desktop size its dense cluster
     would land directly behind the logo mark and swallow it. These values
     keep the motif in the top-left corner with the A still reading clearly. */
  .alg-header__corner { width: clamp(55px, 8vw, 73px); }
}

@media (max-width: 640px) {
  .alg-header__top .alg-container { padding-top: 11px; padding-bottom: 11px; }
  .alg-header__logo img { height: 99px; }
  .alg-mobile { padding-top: 140px; }
  .alg-header__corner { width: clamp(44px, 12.5vw, 55px); }
}

/* --------------------------------------------------------------------------
   ROW 2 - navigation, sticky
   -------------------------------------------------------------------------- */
.alg-header__bar {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.13);
}
.alg-header__bar .alg-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 68px;
}

.alg-nav { display: flex; align-items: center; gap: 2px; }
.alg-nav__item { position: relative; }

/* Navigation set in the display font at reading size - sentence case,
   no letterspacing, matching the reference weight and scale. */
.alg-nav__link {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 68px;
  padding: 0 17px;
  font-family: var(--alg-font-display);
  font-size: var(--alg-nav);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,.88);
  border-bottom: 3px solid transparent;
  transition: color .18s var(--alg-ease), border-color .18s var(--alg-ease);
  white-space: nowrap;
}
.alg-nav__item:first-child .alg-nav__link { padding-left: 0; }
.alg-nav__link:hover,
.alg-nav__item:focus-within > .alg-nav__link { color: var(--alg-primary-hi); }
.alg-nav__link[aria-current="page"] {
  color: var(--alg-primary-hi);
  border-bottom-color: var(--alg-primary);
}
.alg-nav__caret { width: 9px; height: 6px; fill: currentColor; opacity: .6; flex: none; }

/* Contact block at the right of the nav row */
.alg-header__contact {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  padding-left: 32px;
  border-left: 1px solid rgba(255,255,255,.13);
}
.alg-header__contact svg { width: 22px; height: 22px; fill: #fff; flex: none; }
.alg-header__contact strong {
  display: block;
  font-family: var(--alg-font-display);
  font-size: var(--alg-nav);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.005em;
  line-height: 1.25;
}
.alg-header__contact span {
  display: block;
  font-size: var(--alg-micro);
  color: rgba(255,255,255,.58);
  line-height: 1.4;
}
.alg-header__contact a:hover strong { color: var(--alg-primary-hi); }

@media (max-width: 1440px) { .alg-nav__link { padding: 0 13px; } }

/* --------------------------------------------------------------------------
   DROPDOWNS
   -------------------------------------------------------------------------- */
.alg-drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 264px;
  background: #fff;
  border: 1px solid var(--alg-border);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s var(--alg-ease), transform .18s var(--alg-ease), visibility .18s;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.alg-nav__item:hover > .alg-drop,
.alg-nav__item:focus-within > .alg-drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.alg-drop a {
  display: block;
  padding: 11px 24px;
  font-size: var(--alg-small);
  color: var(--alg-text);
  transition: color .16s var(--alg-ease), background-color .16s var(--alg-ease);
}
.alg-drop a:hover { color: var(--alg-primary); background: var(--alg-bg-alt); }

/* Mega menu - Our Businesses */
.alg-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  width: min(900px, calc(100vw - 48px));
  background: #fff;
  border: 1px solid var(--alg-border);
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 36px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s var(--alg-ease), transform .18s var(--alg-ease), visibility .18s;
  box-shadow: 0 22px 50px rgba(0,0,0,.24);
}
.alg-nav__item:hover > .alg-mega,
.alg-nav__item:focus-within > .alg-mega {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}

/* Closing a menu after navigation.
   Two cases, both of which would otherwise leave a menu hanging open:
   1. is-dismissed  - set on click, cleared when the pointer leaves the item,
      so the menu shuts the moment a submenu link is chosen.
   2. alg-no-hover  - set on load and cleared on the first pointer move, so a
      fresh page does not open a menu just because the cursor happens to be
      resting where the link was.
   Both selectors outrank the hover rules above. */
.alg-nav__item.is-dismissed > .alg-drop,
.alg-nav__item.is-dismissed > .alg-mega,
body.alg-no-hover .alg-nav__item:hover > .alg-drop,
body.alg-no-hover .alg-nav__item:hover > .alg-mega {
  opacity: 0;
  visibility: hidden;
}
.alg-mega__item {
  display: block;
  padding: 13px 16px;
  transition: background-color .16s var(--alg-ease);
}
.alg-mega__item:hover { background: var(--alg-bg-alt); }
.alg-mega__name {
  display: block;
  font-family: var(--alg-font-display);
  font-weight: 700;
  font-size: var(--alg-nav);
  color: var(--alg-ink);
  margin-bottom: 3px;
  letter-spacing: -.008em;
}
.alg-mega__desc { display: block; font-size: var(--alg-micro); line-height: 1.5; color: var(--alg-text-muted); }
.alg-mega__foot {
  grid-column: 1 / -1;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--alg-border);
}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */
.alg-burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.22);
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--alg-radius);
}
.alg-burger span { display: block; width: 18px; height: 2px; background: #fff; transition: transform .2s var(--alg-ease), opacity .2s var(--alg-ease); }
.alg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.alg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.alg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.alg-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--alg-dark);
  overflow-y: auto;
  padding: 158px var(--alg-gutter) 48px;
  z-index: 99;
}
.alg-mobile.is-open { display: block; }
.alg-mobile__group { border-bottom: 1px solid rgba(255,255,255,.12); }
.alg-mobile__top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 0;
  background: none;
  border: 0;
  font-family: var(--alg-font-display);
  font-size: var(--alg-h4);
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.alg-mobile__top svg { width: 12px; height: 8px; fill: var(--alg-primary-hi); transition: transform .2s var(--alg-ease); flex: none; }
.alg-mobile__top[aria-expanded="true"] svg { transform: rotate(180deg); }
.alg-mobile__sub { display: none; padding: 0 0 16px 2px; }
.alg-mobile__sub.is-open { display: block; }
.alg-mobile__sub a {
  display: block;
  padding: 10px 0 10px 18px;
  font-size: var(--alg-small);
  color: rgba(255,255,255,.66);
  border-left: 1px solid rgba(255,255,255,.14);
}
.alg-mobile__sub a:hover { color: var(--alg-primary-hi); border-left-color: var(--alg-primary); }
.alg-mobile__contact {
  margin-top: 30px;
  color: rgba(255,255,255,.66);
  font-size: var(--alg-small);
  line-height: 1.7;
}
.alg-mobile__contact a:hover { color: #fff; }
.alg-mobile .alg-btn { width: 100%; margin-top: 24px; }

@media (max-width: 1180px) {
  .alg-nav, .alg-header__contact { display: none; }
  .alg-burger { display: flex; }
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.alg-footer {
  position: relative;
  overflow: hidden;
  background: var(--alg-ink);
  color: var(--alg-silver);
  padding: var(--alg-section-sm) 0 0;
}
.alg-footer .alg-container { position: relative; z-index: 1; }
.alg-footer__watermark {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 460px;
  opacity: .04;
  pointer-events: none;
}

.alg-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--alg-gap-lg);
  justify-content: space-between;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--alg-border-dark);
}
.alg-footer__brand { flex: 1 1 300px; max-width: 380px; }
.alg-footer__brand img { height: 54px; width: auto; margin-bottom: 24px; }
.alg-footer__brand p { font-size: var(--alg-small); line-height: 1.7; }

.alg-footer__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 40px 32px;
  padding: 52px 0;
}
.alg-footer__title {
  font-family: var(--alg-font-label);
  font-size: var(--alg-eyebrow);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 20px;
}
.alg-footer__list { list-style: none; margin: 0; padding: 0; }
.alg-footer__list li { margin-bottom: 11px; }
.alg-footer__list a {
  font-size: var(--alg-small);
  color: var(--alg-silver);
  transition: color .16s var(--alg-ease);
}
.alg-footer__list a:hover { color: #fff; }

.alg-footer__contact { font-size: var(--alg-small); line-height: 1.7; }
.alg-footer__contact a:hover { color: #fff; }
.alg-footer__social { display: flex; gap: 12px; margin-top: 22px; }
.alg-footer__social a {
  width: 38px; height: 38px;
  border: 1px solid var(--alg-border-dark);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s var(--alg-ease), background-color .18s var(--alg-ease);
}
.alg-footer__social a:hover { border-color: var(--alg-primary-hi); background: var(--alg-primary); }
.alg-footer__social svg { width: 15px; height: 15px; fill: #fff; }

.alg-footer__note {
  padding: 28px 0;
  border-top: 1px solid var(--alg-border-dark);
  font-size: var(--alg-micro);
  line-height: 1.7;
  color: rgba(255,255,255,.42);
}
.alg-footer__bar {
  border-top: 1px solid var(--alg-border-dark);
  padding: 22px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  font-size: var(--alg-micro);
  color: rgba(255,255,255,.42);
}
.alg-footer__bar a:hover { color: #fff; }

@media (max-width: 1024px) { .alg-footer__cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .alg-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }