/* ==========================================================================
   ASIBONGE LEGACY GROUP - 05 SUBPAGE LAYOUT
   Light interior pages: content column plus a sticky sidebar carrying the
   division list, a contact panel and a credential panel.
   Elementor: Container (flex row) > main Container (68%) + aside Container
   (32%, Advanced > Motion Effects > Sticky: Top).
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE TOP: light band with breadcrumb and title
   -------------------------------------------------------------------------- */
.alg-pagetop {
  background: var(--alg-bg-alt);
  border-bottom: 1px solid var(--alg-border);
  padding: 34px 0 40px;
}
.alg-pagetop h1 {
  font-size: var(--alg-h2);
  margin: 0;
  max-width: 820px;
}
.alg-pagetop__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-family: var(--alg-font-label);
  font-size: var(--alg-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--alg-text-muted);
}
.alg-pagetop__crumbs a { color: var(--alg-secondary); transition: color .16s var(--alg-ease); }
.alg-pagetop__crumbs a:hover { color: var(--alg-primary); }
.alg-pagetop__crumbs span[aria-hidden] { color: #C3C7CB; }

@media (max-width: 640px) { .alg-pagetop { padding: 24px 0 28px; } }

/* --------------------------------------------------------------------------
   TWO-COLUMN LAYOUT
   -------------------------------------------------------------------------- */
.alg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--alg-gap-lg);
  align-items: start;
}
.alg-layout__aside { position: sticky; top: 96px; }

@media (max-width: 1024px) {
  .alg-layout { grid-template-columns: 1fr; }
  .alg-layout__aside { position: static; }
}

/* --------------------------------------------------------------------------
   HEADING WITH ACCENT RULE
   The short rule under a heading is the one decorative device on these pages.
   Elementor: Heading widget + a Divider widget set to 44px, 3px, primary.
   -------------------------------------------------------------------------- */
.alg-ruled { margin-bottom: 26px; }
.alg-ruled h2,
.alg-ruled h3 { margin-bottom: 14px; }
.alg-ruled::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--alg-primary);
}

/* Featured image at the top of the content column */
.alg-figure { margin: 0 0 34px; }
.alg-figure .alg-media { aspect-ratio: 16 / 9; }

/* Prose block inside the content column */
.alg-prose > p { margin-bottom: 1.2em; }
.alg-prose > p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   QUOTE / STATEMENT BLOCK
   -------------------------------------------------------------------------- */
.alg-quote {
  background: var(--alg-bg-alt);
  border: 1px solid var(--alg-border);
  padding: 26px 30px;
  margin: 34px 0;
  font-size: var(--alg-body-lg);
  line-height: 1.6;
  color: var(--alg-ink);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   ACCORDION  (native details/summary, no JavaScript)
   Elementor: Accordion widget.
   -------------------------------------------------------------------------- */
.alg-acc { border-top: 1px solid var(--alg-border); }
.alg-acc details { border-bottom: 1px solid var(--alg-border); }
.alg-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 40px 19px 0;
  position: relative;
  font-family: var(--alg-font-display);
  font-size: var(--alg-card);
  font-weight: 700;
  letter-spacing: -.008em;
  color: var(--alg-ink);
  transition: color .16s var(--alg-ease);
}
.alg-acc summary::-webkit-details-marker { display: none; }
.alg-acc summary:hover { color: var(--alg-primary); }
.alg-acc summary::after,
.alg-acc summary::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  background: var(--alg-primary);
  transition: transform .2s var(--alg-ease), opacity .2s var(--alg-ease);
}
.alg-acc summary::after  { width: 13px; height: 2px; margin-top: -1px; }
.alg-acc summary::before { width: 2px; height: 13px; margin-top: -6.5px; right: 13.5px; }
.alg-acc details[open] summary::before { opacity: 0; transform: rotate(90deg); }
.alg-acc details[open] summary { color: var(--alg-primary); }
.alg-acc__body { padding: 0 0 22px; color: var(--alg-text-muted); font-size: var(--alg-small); line-height: 1.7; }
.alg-acc__body p { margin: 0; }

/* --------------------------------------------------------------------------
   SIDEBAR: division list
   Elementor: Nav Menu widget, or a Loop Grid of the Division CPT.
   -------------------------------------------------------------------------- */
.alg-sidenav { border: 1px solid var(--alg-border); border-bottom: 0; }
.alg-sidenav a {
  display: block;
  position: relative;
  padding: 15px 20px 15px 22px;
  border-bottom: 1px solid var(--alg-border);
  font-family: var(--alg-font-display);
  font-size: var(--alg-small);
  font-weight: 600;
  color: var(--alg-ink);
  letter-spacing: -.005em;
  line-height: 1.4;
  transition: background-color .16s var(--alg-ease), color .16s var(--alg-ease);
}
.alg-sidenav a:hover { background: var(--alg-bg-alt); color: var(--alg-primary); }
.alg-sidenav a[aria-current="page"] {
  background: var(--alg-ink);
  color: #fff;
}
.alg-sidenav a[aria-current="page"]:hover { color: #fff; }

/* --------------------------------------------------------------------------
   SIDEBAR: panels
   -------------------------------------------------------------------------- */
.alg-panel { padding: 28px 26px; margin-top: 24px; }

.alg-panel--dark { background: var(--alg-ink); color: rgba(255,255,255,.74); }
.alg-panel--dark h3 { color: #fff; font-size: var(--alg-card); margin-bottom: 10px; }
.alg-panel--dark p { font-size: var(--alg-small); line-height: 1.65; margin: 0 0 20px; }
.alg-panel--dark .alg-btn { width: 100%; }

.alg-panel--light {
  background: var(--alg-bg-alt);
  border: 1px solid var(--alg-border);
}
.alg-panel--light h3 { font-size: var(--alg-card); margin-bottom: 8px; }
.alg-panel--light p { font-size: var(--alg-small); line-height: 1.65; margin: 0; color: var(--alg-text-muted); }

.alg-panel__label {
  font-family: var(--alg-font-label);
  font-size: var(--alg-eyebrow);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--alg-primary);
  margin: 0 0 10px;
}

/* Full-width strip above the footer */
.alg-strip {
  background: var(--alg-primary);
  color: #fff;
}
.alg-strip .alg-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.alg-strip p {
  margin: 0;
  font-family: var(--alg-font-display);
  font-size: var(--alg-h4);
  font-weight: 700;
  letter-spacing: -.012em;
}
.alg-strip .alg-btn { background: #fff; color: var(--alg-primary); }
.alg-strip .alg-btn:hover { background: var(--alg-ink); color: #fff; }

@media (max-width: 640px) {
  .alg-strip .alg-container {
    gap: 14px 20px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .alg-strip p { font-size: var(--alg-micro); line-height: 1.5; max-width: 30ch; }
  .alg-strip .alg-btn { height: 34px; padding: 0 14px; }
}

/* --------------------------------------------------------------------------
   FORMS
   Elementor: replaced entirely by the Elementor Form widget, which handles
   fields, validation, routing by enquiry type and email actions.
   -------------------------------------------------------------------------- */
.alg-form { margin-top: 8px; }
.alg-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--alg-gap); }
@media (max-width: 640px) { .alg-form__grid { grid-template-columns: 1fr; } }

.alg-form__row { margin-bottom: 20px; }
.alg-form label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--alg-font-display);
  font-size: var(--alg-micro);
  font-weight: 600;
  color: var(--alg-ink);
}
.alg-form input,
.alg-form select,
.alg-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--alg-border);
  border-radius: var(--alg-radius);
  background: #fff;
  font-family: var(--alg-font-body);
  font-size: var(--alg-body);
  color: var(--alg-text);
  transition: border-color .16s var(--alg-ease);
}
.alg-form textarea { resize: vertical; min-height: 130px; }
.alg-form input:focus,
.alg-form select:focus,
.alg-form textarea:focus { border-color: var(--alg-secondary); outline: none; }
.alg-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23C10126' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 10px 6px;
  padding-right: 40px;
}
.alg-form__note {
  margin: 16px 0 0;
  font-size: var(--alg-micro);
  line-height: 1.6;
  color: var(--alg-text-muted);
}