/* Header, mega menu, search panel and mobile drawer.
   Values taken from redesign/design/source/Navigation.dc.html.
   Built mobile-first: the drawer is the default and the bar widens at 1024px. */

:root {
  --amg-topbar: #061f1c;
  --amg-topbar-text: #c6d3cf;
  --amg-header-h: 56px;
  --amg-z-header: 100;
  --amg-z-panel: 99;
  --amg-z-drawer: 120;
}

@media (min-width: 1024px) {
  :root { --amg-header-h: 72px; }
}

.amg-header-wrap { position: relative; z-index: var(--amg-z-header); font-family: var(--amg-font-body); }

/* The theme's own header is gone, but its spacer rules can linger. */
.amg-has-header .site-header,
.amg-has-header #header.site-header { display: none !important; }

/* ------------------------------------------------------------------ top bar */

.amg-topbar { display: none; background: var(--amg-topbar); color: var(--amg-topbar-text); font-size: 13px; }
.amg-topbar__inner { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.amg-topbar__latest { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; min-width: 0; }
.amg-topbar__latest:hover { color: #fff; text-decoration: underline; }
.amg-topbar__flag { flex: 0 0 auto; background: var(--amg-gold); color: var(--amg-green); font-weight: 600; font-size: 11px; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; }
.amg-topbar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amg-topbar__links { display: flex; gap: 18px; flex: 0 0 auto; }
.amg-topbar__links a { color: var(--amg-topbar-text); text-decoration: none; }
.amg-topbar__links a:hover { color: #fff; text-decoration: underline; }

@media (min-width: 1024px) { .amg-topbar { display: block; } }

/* ------------------------------------------------------------------- header */

.amg-header { background: var(--amg-green); position: sticky; top: 0; z-index: var(--amg-z-header); }
.amg-header__bar { display: flex; align-items: center; gap: 12px; min-height: var(--amg-header-h); }

/* The logo image is 30px on phones per the design, but the link itself is padded
   out to a 44px tap target. */
.amg-header__logo { display: flex; align-items: center; min-height: var(--amg-tap); line-height: 0; flex: 0 0 auto; margin-right: auto; }
.amg-header__logo img { height: 30px; width: auto; }
.amg-header__logo-text { color: #fff; font-family: var(--amg-font-heading); font-size: 18px; font-weight: 700; line-height: 1.2; }

.amg-header__nav { display: none; }

@media (min-width: 1024px) {
  .amg-header__bar { gap: 4px 28px; flex-wrap: nowrap; }
  .amg-header__logo img { height: 42px; }
  .amg-header__logo { margin-right: 0; }
  .amg-header__nav { display: flex; flex-wrap: nowrap; gap: 2px; flex: 1 1 auto; min-width: 0; }
  .amg-header__item { white-space: nowrap; }
}

/* Between 1024 and 1279 the five items, the logo and the button do not fit at
   full size, and the bar wraps to a second row. Condense rather than fall back
   to the drawer, so the breakpoint in the navigation spec still holds. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .amg-header__bar { gap: 4px 16px; }
  .amg-header__logo img { height: 34px; }
  .amg-header__item { font-size: 14px; padding: 0 9px; gap: 4px; }
  .amg-header__cta { font-size: 14px; padding: 10px 14px; }
}

.amg-header__item {
  display: flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: var(--amg-on-dark);
  font: inherit; font-size: 15px; font-weight: 500;
  padding: 0 14px; height: var(--amg-header-h);
  cursor: pointer;
}
.amg-header__item svg { transition: transform .15s ease; }
.amg-header__item:hover { color: #fff; }
.amg-header__item[aria-expanded="true"] { background: var(--amg-surface); color: var(--amg-green); box-shadow: inset 0 3px 0 var(--amg-gold); }
.amg-header__item[aria-expanded="true"] svg { transform: rotate(180deg); }

.amg-header__actions { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }

.amg-header__search-toggle,
.amg-header__burger {
  width: var(--amg-tap); height: var(--amg-tap);
  border: 1.5px solid var(--amg-green-line); background: transparent; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; padding: 0;
}
.amg-header__search-toggle { border-radius: 50%; }

.amg-header__cta { display: none; font-size: 15px; padding: 11px 18px; white-space: nowrap; min-height: 0; }
@media (min-width: 1024px) {
  .amg-header__cta { display: inline-flex; }
  .amg-header__burger { display: none; }
}

.amg-burger { display: block; width: 18px; }
.amg-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.amg-burger span + span { margin-top: 4px; }

/* -------------------------------------------------------------------- panels */

.amg-panel {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: var(--amg-z-panel);
  background: var(--amg-surface);
  border-bottom: 1px solid var(--amg-line);
  box-shadow: 0 18px 40px rgba(6, 31, 28, .18);
  max-height: calc(100vh - var(--amg-header-h));
  overflow-y: auto;
}
@media (min-width: 1024px) {
  .amg-panel.is-open { display: block; }
}
.amg-panel__inner { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 28px; padding-bottom: 28px; }

.amg-panel__columns { flex: 999 1 640px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px; }
#amg-panel-tools .amg-panel__columns { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
#amg-panel-help .amg-panel__columns { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
#amg-panel-countries .amg-panel__columns { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.amg-panel__column { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.amg-panel__heading {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amg-gold-dark);
  padding-bottom: 6px; border-bottom: 1px solid var(--amg-line); margin-bottom: 4px;
}
.amg-panel__heading--plain { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.amg-panel__heading--gold { color: var(--amg-gold); border-bottom: 0; padding-bottom: 0; margin-bottom: 0; position: relative; }

.amg-panel__topic,
.amg-panel__tool,
.amg-panel__link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; border-radius: var(--amg-radius);
  color: var(--amg-green); text-decoration: none;
  min-height: var(--amg-tap);
}
.amg-panel__topic:hover,
.amg-panel__tool:hover,
.amg-panel__link:hover { background: var(--amg-cream); color: var(--amg-green); text-decoration: none; }

.amg-panel__topic img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.amg-panel__topic-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--amg-cream); flex: 0 0 auto; }
.amg-panel__topic-name { flex: 1; font-weight: 500; font-size: 15px; }
.amg-panel__topic-count { font-size: 12px; color: var(--amg-muted); }

.amg-panel__tool { flex-direction: column; align-items: flex-start; gap: 0; padding: 9px 8px; }
.amg-panel__tool-name { font-weight: 600; font-size: 15px; }
.amg-panel__tool-desc { font-size: 13px; color: var(--amg-muted); }

.amg-panel__link { font-weight: 500; font-size: 15px; }

/* Asides */

.amg-panel__aside { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; border-radius: var(--amg-radius-lg); padding: 16px; }
.amg-panel__aside--cream { background: var(--amg-cream); }
.amg-panel__aside--row { flex-direction: row; gap: 14px; align-items: flex-start; padding: 18px; }
.amg-panel__aside--row img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: top; flex: 0 0 auto; }
.amg-panel__aside-body { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.amg-panel__aside-body strong { color: var(--amg-green); font-size: 15px; }
.amg-panel__aside-body a { font-weight: 600; }

.amg-panel__latest { display: flex; flex-direction: column; gap: 8px; color: var(--amg-green); text-decoration: none; }
.amg-panel__latest:hover { color: var(--amg-green); }
.amg-panel__latest:hover strong { text-decoration: underline; }
.amg-panel__latest img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--amg-radius); }
.amg-panel__latest strong { font-size: 16px; line-height: 1.35; }
.amg-panel__latest-date { font-size: 13px; color: var(--amg-muted); }

.amg-panel__aside-links { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--amg-cream-border); padding-top: 10px; font-size: 15px; font-weight: 500; }
.amg-panel__aside-lead { color: var(--amg-green); font-weight: 600; font-size: 17px; line-height: 1.3; text-decoration: none; }
.amg-panel__aside-note { font-size: 14px; }

.amg-panel__aside--dark { background: var(--amg-green); color: #fff; padding: 20px; position: relative; overflow: hidden; flex: 1 1 260px; gap: 10px; }
.amg-panel__circle { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: var(--amg-green-2); right: -70px; bottom: -80px; }
.amg-panel__feature-title { position: relative; font-size: 20px; line-height: 1.25; font-family: var(--amg-font-heading); }
.amg-panel__feature-desc { position: relative; font-size: 14px; color: var(--amg-topbar-text); }
.amg-panel__feature-btn { position: relative; align-self: flex-start; min-height: 0; padding: 10px 16px; }
.amg-panel__feature-all { position: relative; color: #fff; font-size: 14px; text-decoration: none; }
.amg-panel__feature-all:hover { color: #fff; text-decoration: underline; }

.amg-panel__cards { display: flex; flex-wrap: wrap; gap: 12px; flex: 1 1 100%; }
.amg-panel__card { flex: 1 1 180px; display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--amg-line); border-radius: var(--amg-radius); color: var(--amg-green); text-decoration: none; }
.amg-panel__card:hover { background: var(--amg-cream); border-color: var(--amg-cream-border); color: var(--amg-green); }
.amg-panel__card strong { font-size: 15px; }
.amg-panel__card span { font-size: 13px; color: var(--amg-muted); }

/* -------------------------------------------------------------- search panel */

.amg-search-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: var(--amg-z-panel);
  background: var(--amg-surface);
  border-bottom: 1px solid var(--amg-line);
  box-shadow: 0 18px 40px rgba(6, 31, 28, .18);
  max-height: calc(100vh - var(--amg-header-h));
  overflow-y: auto;
}
.amg-search-panel[hidden] { display: none; }
.amg-search-panel__inner { max-width: 820px; margin: 0 auto; padding: 24px var(--amg-gutter); display: flex; flex-direction: column; gap: 12px; }
.amg-search-panel__field { display: flex; align-items: center; gap: 12px; border: 2px solid var(--amg-green); border-radius: var(--amg-radius-lg); padding: 0 14px; color: var(--amg-muted); }
.amg-search-panel__input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 16px; padding: 14px 0; color: var(--amg-green); background: transparent; }
@media (min-width: 1024px) { .amg-search-panel__input { font-size: 18px; } }

.amg-search-panel__results { display: flex; flex-direction: column; gap: 2px; }
.amg-search-result { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: var(--amg-radius); color: var(--amg-green); text-decoration: none; min-height: var(--amg-tap); }
.amg-search-result:hover { background: var(--amg-cream); color: var(--amg-green); }
.amg-search-result img { width: 60px; height: 40px; object-fit: cover; border-radius: var(--amg-radius-sm); flex: 0 0 auto; background: var(--amg-cream); }
.amg-search-result__text { display: flex; flex-direction: column; min-width: 0; }
.amg-search-result__title { font-weight: 500; }
.amg-search-result__kind { font-size: 12px; color: var(--amg-muted); }
.amg-search-panel__all { font-weight: 600; padding: 8px; }
.amg-search-panel__empty { font-size: 14px; color: var(--amg-muted); padding: 8px; }
.amg-search-panel__popular { font-size: 13px; color: var(--amg-muted); margin: 0; }

/* ------------------------------------------------------------------- drawer */

.amg-drawer {
  position: fixed; inset: 0; z-index: var(--amg-z-drawer);
  background: var(--amg-surface);
  display: flex; flex-direction: column;
}
.amg-drawer[hidden] { display: none; }

.amg-drawer__head { background: var(--amg-green); padding: 12px var(--amg-gutter); display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; }
.amg-drawer__close { width: var(--amg-tap); height: var(--amg-tap); border-radius: 8px; border: 1.5px solid var(--amg-green-line); background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

.amg-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 14px var(--amg-gutter); display: flex; flex-direction: column; gap: 4px; }

.amg-drawer__search {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--amg-border); border-radius: var(--amg-radius-lg);
  padding: 11px 12px; margin-bottom: 8px;
  background: #fff; color: var(--amg-muted); font: inherit; font-size: 15px;
  cursor: pointer; text-align: left; min-height: var(--amg-tap);
}

.amg-drawer__section { border-bottom: 1px solid var(--amg-line); }
.amg-drawer__toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  border: 0; background: none; font: inherit; font-size: 17px; font-weight: 600;
  color: var(--amg-green); padding: 14px 0; cursor: pointer; min-height: 48px;
}
.amg-drawer__sign { font-size: 20px; color: var(--amg-gold-dark); line-height: 1; }
.amg-drawer__sign::before { content: "+"; }
.amg-drawer__toggle[aria-expanded="true"] .amg-drawer__sign::before { content: "\2212"; }

.amg-drawer__links { display: flex; flex-direction: column; padding: 0 0 12px; }
.amg-drawer__links[hidden] { display: none; }
.amg-drawer__links a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 4px; color: var(--amg-text); font-size: 15px; text-decoration: none; min-height: var(--amg-tap); }
.amg-drawer__links a:hover { color: var(--amg-green); }
.amg-drawer__count { font-size: 12px; color: var(--amg-muted); }

.amg-drawer__foot { flex: 0 0 auto; padding: 12px var(--amg-gutter) 18px; border-top: 1px solid var(--amg-line); }
.amg-drawer__foot .amg-btn { display: flex; width: 100%; padding: 13px; }

.amg-drawer__scrim { position: fixed; inset: 0; z-index: calc(var(--amg-z-drawer) - 1); background: rgba(6, 31, 28, .4); }
.amg-drawer__scrim[hidden] { display: none; }

@media (min-width: 1024px) {
  .amg-drawer, .amg-drawer__scrim { display: none !important; }
}

/* Stop the page scrolling behind the drawer or an open panel. */
body.amg-nav-open { overflow: hidden; }

/* The enquiry launcher (amg-launcher.php, z-index 9400) and the WhatsApp bubble
   are fixed to the bottom of the viewport and would sit over the drawer's pinned
   button. Hide them for as long as the drawer is open. */
body.amg-nav-open #amg-lx,
body.amg-nav-open .joinchat { display: none !important; }

/* ------------------------------------------------------------------- shared */

.amg-header-wrap .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.amg-header-wrap :focus-visible,
.amg-drawer :focus-visible { outline: 3px solid var(--amg-gold); outline-offset: 2px; }

/* Icons are flex children here, and the theme's own SVG rules can collapse them
   to zero width. Size them from their own attributes and stop them shrinking. */
.amg-header-wrap svg,
.amg-drawer svg { flex: 0 0 auto; }
.amg-header__item svg { width: 14px; height: 14px; }
.amg-drawer__search svg { width: 16px; height: 16px; }
.amg-header__search-toggle svg,
.amg-drawer__close svg { width: 18px; height: 18px; }
.amg-search-panel__field svg { width: 20px; height: 20px; }

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