/* ==========================================================================
   NexaGulf -- Findability layer
   Wayfinding only. Uses the existing token set; introduces no new colours,
   radii or type sizes, so it reads as part of the theme rather than bolted on.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Anchored headings
   A sticky header will otherwise eat the heading a reader just jumped to.
   scroll-margin is set per-heading rather than globally so in-page anchors and
   browser restore-scroll both land correctly.
   -------------------------------------------------------------------------- */
.ng-prose .ng-anchored { scroll-margin-top: 104px; }

/* Give a jumped-to heading a moment of emphasis, so the reader can see where
   the page landed them rather than having to reread to find their place. */
.ng-prose .ng-anchored:target { animation: ng-landed 1.6s var(--ng-ease); }
@keyframes ng-landed {
  0%, 55% { background: var(--ng-green-50); box-shadow: -10px 0 0 var(--ng-green-50), 10px 0 0 var(--ng-green-50); }
  100%    { background: transparent; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   Short answer
   Deliberately the loudest thing above the article body. On a rules page the
   number is the story; the prose is the justification.
   -------------------------------------------------------------------------- */
.ng-answer {
  max-width: var(--ng-measure);
  margin: 0 0 var(--ng-s6);
  padding: var(--ng-s5) var(--ng-s6);
  background: var(--ng-green-50);
  border: 1px solid rgba(13,107,78,.18);
  border-left: 3px solid var(--ng-green);
  border-radius: 0 var(--ng-radius-lg) var(--ng-radius-lg) 0;
}
.ng-answer__label {
  margin: 0 0 6px;
  font-size: var(--ng-fs-meta);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ng-green);
}
.ng-answer__body {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ng-text);
  text-wrap: pretty;
}
.ng-answer__verified {
  margin: var(--ng-s3) 0 0;
  font-size: 12.5px;
  color: var(--ng-text-2);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Table of contents
   A <details> so it works without script and can be collapsed on phones. Open
   by default on desktop where the space is free; the media query below closes
   it under 900px by hiding the list, which avoids the layout shift that a
   JS-driven toggle would cause after hydration.
   -------------------------------------------------------------------------- */
.ng-toc {
  max-width: var(--ng-measure);
  margin: 0 0 var(--ng-s7);
  background: var(--ng-surface);
  border: 1px solid var(--ng-line);
  border-radius: var(--ng-radius-lg);
  overflow: hidden;
}
.ng-toc__summary {
  display: flex;
  align-items: center;
  gap: var(--ng-s3);
  padding: 13px var(--ng-s5);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ng-toc__summary::-webkit-details-marker { display: none; }
.ng-toc__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ng-text);
}
.ng-toc__count {
  font-size: 12.5px;
  color: var(--ng-text-3);
  margin-right: auto;
  font-variant-numeric: tabular-nums;
}
/* Chevron drawn rather than shipped: one less request, and it inherits colour. */
.ng-toc__summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--ng-text-3);
  border-bottom: 1.6px solid var(--ng-text-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ng-dur) var(--ng-ease);
  flex-shrink: 0;
}
.ng-toc[open] .ng-toc__summary::after { transform: rotate(-135deg) translateY(-2px); }
.ng-toc__summary:hover .ng-toc__label { color: var(--ng-green); }

.ng-toc__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--ng-s5) var(--ng-s5);
  border-top: 1px solid var(--ng-line);
  padding-top: var(--ng-s4);
  counter-reset: ng-toc;
}
.ng-toc__item { margin: 0; }
.ng-toc__item a {
  display: block;
  padding: 7px 0 7px 26px;
  position: relative;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ng-text-2);
  border-radius: var(--ng-radius-sm);
  transition: color var(--ng-dur) var(--ng-ease);
}
/* Numbering the top level gives the reader a sense of length and position --
   "3 of 9" is orientation that a bulleted list does not provide. */
.ng-toc__item--l2 { counter-increment: ng-toc; }
.ng-toc__item--l2 > a::before {
  content: counter(ng-toc);
  position: absolute;
  left: 0;
  top: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ng-text-3);
  font-variant-numeric: tabular-nums;
}
.ng-toc__item--l3 > a {
  padding-left: 42px;
  font-size: 14.5px;
  color: var(--ng-text-3);
}
.ng-toc__item--l3 > a::before {
  content: "";
  position: absolute;
  left: 26px; top: 15px;
  width: 8px; height: 1px;
  background: var(--ng-line-2);
}
.ng-toc__item a:hover { color: var(--ng-green); }

/* Scroll-spy. The active section is marked by weight and a rule rather than a
   fill, so it stays legible next to the numbering. */
.ng-toc__item.is-current > a { color: var(--ng-text); font-weight: 600; }
.ng-toc__item.is-current > a::after {
  content: "";
  position: absolute;
  left: -1px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--ng-green);
  border-radius: 2px;
}

@media (max-width: 900px) {
  /* Collapsed by default on phones: the index is a tool, not the content. */
  .ng-toc:not([data-user-opened]) > .ng-toc__list,
  .ng-toc:not([data-user-opened]) > nav { display: none; }
  .ng-toc:not([data-user-opened]) .ng-toc__summary::after { transform: rotate(45deg) translateY(-2px); }
}

/* --------------------------------------------------------------------------
   Sticky jump bar
   Appears once the article index has scrolled away, so "where am I / where else
   can I go" is answerable at any scroll depth without going back up.
   -------------------------------------------------------------------------- */
.ng-jumpbar {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  z-index: 480;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ng-line);
  transform: translateY(-100%);
  transition: transform .24s var(--ng-ease);
}
.ng-jumpbar[hidden] { display: none; }
.ng-jumpbar.is-visible { transform: translateY(0); }
.ng-jumpbar__inner {
  max-width: var(--ng-container-wide);
  margin: 0 auto;
  padding: 0 var(--ng-gutter);
  display: flex;
  align-items: center;
  gap: var(--ng-s4);
  min-height: 52px;
}
.ng-jumpbar__title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ng-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: auto;
  min-width: 0;
}
.ng-jumpbar__select {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ng-text);
  background: var(--ng-bg);
  border: 1px solid var(--ng-line-2);
  border-radius: var(--ng-radius);
  padding: 8px 12px;
  max-width: 44vw;
  cursor: pointer;
}
.ng-jumpbar__select:focus-visible { outline: 2px solid var(--ng-green); outline-offset: 1px; }

/* Reading progress. Two pixels, no chrome -- an ambient answer to "how much is
   left", which is the question that makes people abandon long rules pages. */
.ng-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 490;
  background: transparent;
  pointer-events: none;
}
.ng-progress[hidden] { display: none; }
.ng-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ng-green);
  transition: width .1s linear;
}

/* Back to top. Only appears after a real scroll investment. */
.ng-totop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 470;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ng-bg);
  color: var(--ng-text-2);
  border: 1px solid var(--ng-line-2);
  border-radius: 50%;
  box-shadow: var(--ng-shadow-2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--ng-dur) var(--ng-ease), transform var(--ng-dur) var(--ng-ease), color var(--ng-dur) var(--ng-ease);
}
.ng-totop[hidden] { display: none; }
.ng-totop.is-visible { opacity: 1; transform: translateY(0); }
.ng-totop:hover { color: var(--ng-green); border-color: var(--ng-green); }
.ng-totop svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Calculator bridge
   -------------------------------------------------------------------------- */
.ng-bridge {
  max-width: var(--ng-measure);
  margin: var(--ng-s7) 0 var(--ng-s6);
  padding: var(--ng-s5) var(--ng-s6);
  display: flex;
  align-items: center;
  gap: var(--ng-s5);
  flex-wrap: wrap;
  background: var(--ng-ink);
  border-radius: var(--ng-radius-lg);
  color: rgba(255,255,255,.72);
}
.ng-bridge__copy { flex: 1 1 240px; min-width: 0; }
.ng-bridge__label {
  margin: 0 0 4px;
  font-size: var(--ng-fs-meta);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ng-mint);
}
.ng-bridge__title {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: #fff;
}
.ng-bridge__blurb { margin: 0; font-size: 14.5px; line-height: 1.5; }
.ng-bridge .ng-btn { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Chips: shared by archive filters and search suggestions
   -------------------------------------------------------------------------- */
.ng-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ng-text-2);
  background: var(--ng-bg);
  border: 1px solid var(--ng-line);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color var(--ng-dur) var(--ng-ease), color var(--ng-dur) var(--ng-ease), background-color var(--ng-dur) var(--ng-ease);
}
.ng-chip:hover { border-color: var(--ng-line-2); color: var(--ng-text); }
.ng-chip__count {
  font-size: 12px;
  color: var(--ng-text-3);
  font-variant-numeric: tabular-nums;
}
.ng-chip.is-active {
  background: var(--ng-green);
  border-color: var(--ng-green);
  color: #fff;
  font-weight: 600;
}
.ng-chip.is-active .ng-chip__count { color: rgba(255,255,255,.72); }

/* --------------------------------------------------------------------------
   Archive filter bar
   -------------------------------------------------------------------------- */
.ng-filters {
  border-bottom: 1px solid var(--ng-line);
  background: var(--ng-bg);
  padding: var(--ng-s5) 0 var(--ng-s4);
}
.ng-filters__row {
  display: flex;
  align-items: center;
  gap: var(--ng-s4);
  margin-bottom: 10px;
  min-width: 0;
}
.ng-filters__row:last-of-type { margin-bottom: 0; }
.ng-filters__label {
  flex-shrink: 0;
  width: 62px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ng-text-3);
}
.ng-filters__chips {
  list-style: none;
  margin: 0;
  padding: 2px 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.ng-filters__reset { margin: var(--ng-s4) 0 0; font-size: 13px; }
.ng-filters__reset a { color: var(--ng-green); text-decoration: underline; }

@media (max-width: 640px) {
  /* Wrapping ten chips onto five rows buries the articles they filter. One
     scrolling row keeps the listing where the reader expects it. */
  .ng-filters__row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ng-filters__label { width: auto; }
  .ng-filters__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    padding-bottom: 4px;
  }
  .ng-filters__chips::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------------------
   Search: scope tabs and suggestions
   -------------------------------------------------------------------------- */
.ng-scopes {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ng-line);
  margin-bottom: var(--ng-s6);
}
.ng-scope {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ng-text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ng-dur) var(--ng-ease), border-color var(--ng-dur) var(--ng-ease);
}
.ng-scope:hover { color: var(--ng-text); }
.ng-scope.is-active { color: var(--ng-text); font-weight: 600; border-bottom-color: var(--ng-green); }
.ng-scope__count {
  font-size: 12px;
  color: var(--ng-text-3);
  background: var(--ng-surface);
  padding: 1px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
/* A tab with nothing behind it is disclosed, not hidden: knowing that a
   category has no matches is itself an answer. */
.ng-scope.is-empty { opacity: .45; }

.ng-suggest {
  display: flex;
  align-items: center;
  gap: var(--ng-s3);
  flex-wrap: wrap;
  margin-top: var(--ng-s4);
}
.ng-suggest__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ng-text-3);
}
.ng-suggest__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }

/* Kind label on a search result card, so the reader knows whether they are
   about to open a news item or a tool before they spend a click. */
.ng-kind {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ng-green);
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Mobile quick bar
   -------------------------------------------------------------------------- */
.ng-quickbar { display: none; }

@media (max-width: 900px) {
  .ng-quickbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 460;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--ng-line);
    /* Clear the iOS home indicator rather than sitting under it. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .ng-quickbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ng-text-2);
  }
  .ng-quickbar__item svg { width: 21px; height: 21px; }
  .ng-quickbar__item:active { color: var(--ng-green); }

  /* Give the footer room so the bar never covers the last link on the page. */
  body { padding-bottom: 56px; }

  /* The floating actions would stack on top of the bar otherwise. */
  .ng-totop { bottom: 70px; }
  .ng-jumpbar__title { display: none; }
  .ng-jumpbar__select { max-width: none; flex: 1; }
}

/* The quick bar duplicates the mobile drawer while it is open. */
.ng-mobile-nav.is-open ~ .ng-quickbar { display: none; }

@media print {
  .ng-quickbar, .ng-jumpbar, .ng-progress, .ng-totop, .ng-filters, .ng-scopes { display: none !important; }
  /* The index is genuinely useful on paper -- keep it, always expanded. */
  .ng-toc { border-color: #000; }
  .ng-toc > nav, .ng-toc > .ng-toc__list { display: block !important; }
  .ng-bridge { background: none !important; color: #000 !important; border: 1px solid #000; }
  .ng-bridge__title, .ng-bridge__label { color: #000 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ng-jumpbar, .ng-totop, .ng-progress__bar { transition: none; }
  .ng-prose .ng-anchored:target { animation: none; background: var(--ng-green-50); }
}

/* ==========================================================================
   Card media
   Every card carries an image well, so a row of cards has one silhouette
   rather than several. Generated covers get the same treatment as photographs
   -- if they announced themselves as placeholders they would read as missing
   content rather than as design.
   ========================================================================== */

.ng-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ng-surface-2);
}
.ng-card__media img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform .4s var(--ng-ease);
}
.ng-card:hover .ng-card__media img { transform: scale(1.03); }

/* The generated cover is vector art sized to the card, so it must not be
   cropped the way a photograph is -- fill rather than cover. */
.ng-card__media--generated { object-fit: fill; }

@media (prefers-reduced-motion: reduce) {
  .ng-card:hover .ng-card__media img { transform: none; }
}

/* ==========================================================================
   Country cards
   The six GCC countries as a grid. The rates are the reason anyone opens this
   page, so they sit in the card as a small definition list rather than being
   buried in an excerpt.
   ========================================================================== */

.ng-country-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ng-s6);
  align-items: start;
}
.ng-country-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ng-country-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ng-bg);
  border: 1px solid var(--ng-line);
  border-radius: var(--ng-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--ng-dur) var(--ng-ease), transform var(--ng-dur) var(--ng-ease), border-color var(--ng-dur) var(--ng-ease);
}
.ng-country-card:hover {
  box-shadow: var(--ng-shadow-2);
  transform: translateY(-2px);
  border-color: var(--ng-line-2);
}
/* Keyboard users tab to the heading link, not the card, so the visible focus
   ring has to move to the card or it appears to land on nothing. */
.ng-country-card:focus-within {
  border-color: var(--ng-green);
  box-shadow: 0 0 0 3px var(--ng-green-50);
}

.ng-country-card__media img { aspect-ratio: 16/9; }

/* Full-card click target. Sits under the body so real links stay clickable. */
.ng-country-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ng-country-card__body {
  position: relative;
  z-index: 1;
  padding: var(--ng-s5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  /* Let clicks fall through to the overlay except on the links themselves. */
  pointer-events: none;
}
.ng-country-card__body a { pointer-events: auto; }

.ng-country-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ng-s3);
}
.ng-country-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.018em;
  line-height: 1.25;
}
.ng-country-card__title a:hover { color: var(--ng-green); }
.ng-country-card__code {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--ng-green);
  background: var(--ng-green-50);
  padding: 3px 8px;
  border-radius: var(--ng-radius-sm);
}
.ng-country-card__place {
  margin: 0;
  font-size: 13.5px;
  color: var(--ng-text-3);
}

/* Rates. A two-column dl keeps label and figure locked together, which a pair
   of paragraphs does not do once one of them wraps. */
.ng-country-card__facts {
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ng-s3) var(--ng-s4);
  padding: var(--ng-s4) 0 0;
  border-top: 1px solid var(--ng-line);
}
.ng-country-card__facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ng-text-3);
  margin-bottom: 2px;
}
.ng-country-card__facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ng-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
/* "Not yet live" is a real answer, but it is not a rate -- so it reads as
   status, in the muted weight, rather than sitting at the same visual level as
   a figure someone might copy down. */
.ng-country-card__facts dd.is-pending {
  font-weight: 500;
  font-size: 14px;
  color: var(--ng-text-3);
}

.ng-country-card__foot {
  margin-top: auto;
  padding-top: var(--ng-s4);
  border-top: 1px solid var(--ng-line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ng-s4);
}
.ng-country-card__latest { min-width: 0; }
.ng-country-card__latest .k {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ng-text-3);
  margin-bottom: 2px;
}
.ng-country-card__latest .v {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ng-text);
  line-height: 1.4;
}
.ng-country-card__latest:hover .v { color: var(--ng-green); }
.ng-country-card__latest.is-empty .v { color: var(--ng-text-3); font-style: italic; }
.ng-country-card__guides {
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--ng-text-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1000px) {
  .ng-country-cards,
  .ng-country-cards--2,
  .ng-country-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ng-country-cards,
  .ng-country-cards--2,
  .ng-country-cards--3 { grid-template-columns: minmax(0, 1fr); gap: var(--ng-s5); }
  /* One column means the card is wide; a shorter image keeps the rates -- the
     thing the reader came for -- above the fold. */
  .ng-country-card__media img { aspect-ratio: 21/9; }
}

/* Hover zoom is a preference, not a rule -- some picture libraries look worse
   cropped in closer, so it can be switched off in the Customizer. */
body.ng-no-card-zoom .ng-card:hover .ng-card__media img { transform: none; }