/* Aussie Migration Guide redesign: design tokens + base components
   Source of truth for colours, type and the reusable pieces seen on the canvas.
   Prefix everything with .amg- so nothing collides with Rishi/Elementor styles. */

:root {
  --amg-green: #092d29;        /* header, hero, dark panels, footer, headings */
  --amg-green-2: #0f3c36;      /* circle shapes, borders on dark */
  --amg-green-3: #163d38;      /* selected state on dark, meter track */
  --amg-green-line: #2c4a46;   /* outlines on dark */
  --amg-gold: #d99b43;         /* primary button background, highlight text on dark */
  --amg-gold-dark: #8a5a14;    /* links + small labels on light (AA contrast) */
  --amg-gold-darker: #6b450f;  /* hover */
  --amg-cream: #f7ecd9;        /* tints, badges, selected chips on light */
  --amg-cream-border: #efd4a9;
  --amg-bg: #fffbf9;           /* page background */
  --amg-surface: #ffffff;
  --amg-text: #3d4a47;
  --amg-muted: #66736f;        /* smallest allowed grey for small text */
  --amg-line: #e3e5df;
  --amg-border: #d9d3c4;       /* input + chip borders */
  --amg-on-dark: #e5ece9;
  --amg-on-dark-muted: #a9bcb7;
  --amg-warm: #a8530f;         /* "New" label */

  --amg-font-heading: "League Spartan", Rubik, sans-serif;
  --amg-font-body: Rubik, system-ui, sans-serif;

  --amg-radius-sm: 4px;
  --amg-radius: 6px;
  --amg-radius-lg: 8px;
  --amg-max: 1240px;
  --amg-gutter: 24px;
  --amg-tap: 44px;
}
@media (max-width: 767px) { :root { --amg-gutter: 16px; } }

.amg { font-family: var(--amg-font-body); color: var(--amg-text); background: var(--amg-bg); line-height: 1.6; }
/* `:where()` keeps these defaults at element-only specificity.
   Written as `.amg a`, the blanket link colour (0,1,1) outranks every
   single-class component rule (0,1,0) — so `.amg-tile { color: #fff }` lost and
   white-on-green components rendered dark gold on dark green, far below AA.
   Wrapping the ancestor in :where() makes any component class win, while prose
   links still pick these up. */
/* Specificity is deliberate here: (0,1,0), from `.amg` with the element inside
   :where(). High enough to beat the theme's own `a { color: var(--genLinkColor) }`
   (0,0,1), low enough that any component class — `.amg-tile`, `.amg-hub__situation`
   — ties and wins on load order. Written the obvious way as `.amg a` it is (0,1,1),
   which beat every component and painted white-on-green text dark gold. */
.amg :where(h1, h2, h3) { font-family: var(--amg-font-heading); letter-spacing: -0.01em; color: var(--amg-green); }
.amg :where(a) { color: var(--amg-gold-dark); }
.amg :where(a):hover { color: var(--amg-gold-darker); }
.amg-container { max-width: var(--amg-max); margin: 0 auto; padding: 0 var(--amg-gutter); }

/* Buttons */
.amg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--amg-tap); padding: 0 20px; border-radius: var(--amg-radius); font-weight: 600; text-decoration: none; cursor: pointer; }
a.amg-btn--primary, button.amg-btn--primary, .amg .amg-btn--primary { background: var(--amg-gold); color: var(--amg-green); border: 0; }
.amg-btn--outline { background: transparent; color: var(--amg-green); border: 1.5px solid var(--amg-green); }
.amg-btn--on-dark { background: transparent; color: #fff; border: 1.5px solid var(--amg-green-line); }

/* Eyebrow (small label above headings) */
.amg-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--amg-gold-dark); }
.amg-dark .amg-eyebrow { color: var(--amg-gold); }
.amg-eyebrow--line::before { content: ""; width: 28px; height: 2px; background: currentColor; }

/* Section heading with rule */
.amg-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--amg-green); padding-bottom: 10px; margin-bottom: 20px; }

/* Hub hero: photo + left-to-right gradient (desktop), top-to-bottom (mobile) */
.amg-hero { position: relative; background: var(--amg-green); color: var(--amg-on-dark); overflow: hidden; }
.amg-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.amg-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,45,41,.97) 0%, rgba(9,45,41,.92) 32%, rgba(9,45,41,.62) 55%, rgba(9,45,41,.22) 78%, rgba(9,45,41,.08) 100%); }
.amg-hero__shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,45,41,.75) 0%, rgba(9,45,41,0) 35%); }
.amg-hero__body { position: relative; padding: 80px 0 88px; max-width: 620px; }
@media (max-width: 767px) {
  .amg-hero__img { position: relative; height: 210px; object-position: 75% center; }
  .amg-hero__shade { top: 0; bottom: auto; height: 210px; background: linear-gradient(180deg, rgba(9,45,41,.15) 0%, rgba(9,45,41,.35) 45%, rgba(9,45,41,1) 100%); }
  .amg-hero__body { padding: 0 0 28px; margin-top: -36px; }
}

/* Circle hero (topic pages, tools) */
.amg-circle-hero { position: relative; overflow: hidden; background: var(--amg-green); color: var(--amg-on-dark); }
.amg-circle-hero::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: var(--amg-green-2); right: -170px; top: 50%; transform: translateY(-38%); }
.amg-circle-hero::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 1.5px solid #1d4c46; right: 300px; top: -150px; }
.amg-circle-hero > * { position: relative; }
.amg-circle-hero__img { width: 360px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 8px solid var(--amg-green-2); }
@media (max-width: 767px) {
  .amg-circle-hero::before { width: 300px; height: 300px; right: -150px; top: -40px; transform: none; }
  .amg-circle-hero::after { width: 140px; height: 140px; left: -60px; right: auto; top: auto; bottom: -70px; }
  .amg-circle-hero__img { width: 96px; border-width: 5px; }
}

/* Article card: grid variant (desktop) and row variant (lists + all phones) */
.amg-card { display: flex; flex-direction: column; gap: 9px; color: inherit; text-decoration: none; }
.amg-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--amg-radius); }
.amg-card__topic { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--amg-gold-dark); }
.amg-card__new { color: var(--amg-warm); }
.amg-card__title { font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--amg-green); }
.amg-card__meta { font-size: 13px; color: var(--amg-muted); }
.amg-card--row { flex-direction: row; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--amg-line); }
.amg-card--row .amg-card__img { flex: 0 0 156px; width: 156px; height: 104px; aspect-ratio: auto; border-radius: var(--amg-radius-sm); }
.amg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 22px; }
@media (max-width: 767px) {
  .amg-grid { display: flex; flex-direction: column; gap: 0; }
  .amg-grid .amg-card { flex-direction: row; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--amg-line); }
  .amg-grid .amg-card__img, .amg-card--row .amg-card__img { flex: 0 0 108px; width: 108px; height: 76px; aspect-ratio: auto; border-radius: var(--amg-radius-sm); }
  .amg-card__title { font-size: 15px; }
}

/* Chips / filter pills */
/* Raised from the design package's 40px: spec section 9 asks for 44px tap
   targets, and chips are real controls (topic tabs, filter pills). */
.amg-chip { flex: 0 0 auto; min-height: var(--amg-tap); padding: 8px 14px; border-radius: var(--amg-radius); border: 1.5px solid var(--amg-border); background: #fff; color: var(--amg-text); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.amg-chip[aria-pressed="true"], .amg-chip[aria-selected="true"], .amg-chip[aria-current="page"] { background: var(--amg-green); border-color: var(--amg-green); color: #fff; }
.amg-swipe { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.amg-swipe > * { scroll-snap-align: start; }

/* Topic tile */
.amg-tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--amg-radius); overflow: hidden; color: #fff; }
.amg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amg-tile__label { position: absolute; left: 0; right: 0; bottom: 0; background: var(--amg-green); padding: 10px 12px; display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; }

/* Inputs */
.amg-input { min-height: var(--amg-tap); border: 1.5px solid var(--amg-border); border-radius: var(--amg-radius); padding: 0 12px; font: inherit; font-size: 16px; background: #fff; color: var(--amg-green); }

/* Sticky tool result bar (mobile) - restyle of the existing .amgmb bar */
.amg-resultbar { position: sticky; bottom: 0; z-index: 50; background: var(--amg-green); color: #fff; padding: 10px 16px 12px; box-shadow: 0 -10px 24px rgba(6,31,28,.25); }

/* Focus */
.amg :focus-visible { outline: 3px solid var(--amg-gold); outline-offset: 2px; }


/* ---------------------------------------------------------------------------
   Host theme override (not part of the design package).

   Rishi sets `.rishi-container[data-strech="full"] { width: min(100% - 30px,
   100%); padding: 0 var(--streched-padding) }`. That attribute selector has the
   same specificity as a plain two-class rule but loads after this file, so it
   wins and leaves a 30px + 40px gutter down both sides of our full-bleed pages.
   Qualifying with `body` and the attribute beats it without !important.
   --------------------------------------------------------------------------- */

body.amg-full-width .rishi-container,
body.amg-full-width .rishi-container[data-strech],
body.amg-full-width .row-wrapper[data-strech] {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

body.amg-full-width .main-content-wrapper {
  width: 100%;
  max-width: none;
  margin: 0 !important;
}

body.amg-full-width .site-content { padding-top: 0; }