/* ==========================================================================
   Absolutely Kili - palette balance (26 Oct 2026)
   Loaded last, after ak-design.css and ak-type.css.

   The site had drifted into five competing colours: orange and gold both
   used for buttons, an olive band and olive/maroon tints left over from the
   engine's compiled Tailwind, grey-green body copy and brown-vs-ink titles.
   This layer gives every colour one job:

     cream / sand   surfaces
     ink            titles, body copy, secondary buttons, prices
     espresso       dark bands (--green / --green-900 from Theme Settings)
     orange (clay)  the one accent: primary buttons, the handwritten line,
                    the ▲ peak tick, links
     gold           light-on-dark only (script and eyebrows on dark bands);
                    never a button

   Tokens only, no brand hex: colours still change from Theme Settings.
   Flat colour only, no gradients (house rule).
   ========================================================================== */

:root {
  --ak-title: var(--ink);
  /* The engine's --taupe-soft is a fixed grey-green (#5a6058). */
  --taupe-soft: var(--ak-copy);
}

/* --------------------------------------------------------------------------
   1. Engine Tailwind classes compiled with fixed colours. They ignored
      Theme Settings and painted olive, maroon and green-black.
   -------------------------------------------------------------------------- */
.bg-green-900\/80 { background-color: color-mix(in srgb, var(--green-900) 86%, transparent); }
.bg-green\/10     { background-color: color-mix(in srgb, var(--green) 10%, transparent); }
.bg-green\/5      { background-color: color-mix(in srgb, var(--green) 5%, transparent); }
.bg-clay\/10      { background-color: color-mix(in srgb, var(--clay) 10%, transparent); }
.bg-gold\/10      { background-color: color-mix(in srgb, var(--gold) 10%, transparent); }
.bg-gold\/15      { background-color: color-mix(in srgb, var(--gold) 15%, transparent); }
.bg-ink\/50       { background-color: color-mix(in srgb, var(--ink) 50%, transparent); }
.bg-ink\/75       { background-color: color-mix(in srgb, var(--ink) 75%, transparent); }
.ring-green\/10   { --tw-ring-color: color-mix(in srgb, var(--green) 10%, transparent); }
.decoration-gold\/40 { text-decoration-color: color-mix(in srgb, var(--gold) 40%, transparent); }

/* --------------------------------------------------------------------------
   2. One primary button colour. Gold buttons become the accent.
   -------------------------------------------------------------------------- */
.btn-gold,
body .attsc__cta,
body .mig-btn--gold {
  background: var(--clay);
  color: var(--cream);
  box-shadow: 0 18px 36px -18px var(--clay-tint);
  filter: none;
}
.btn-gold:hover,
body .attsc__cta:hover { background: var(--clay-700); color: var(--cream); }

/* Seasons calendar: the selected month is a state, not an action. */
body .attsc__tab.is-active { background: var(--ink); color: var(--cream); }

/* Tour cards: nine orange "Plan my trip" blocks per grid drowned the page's
   real calls to action. On cards the secondary pair is ink + outline;
   orange returns on hover. */
.ak-tour-card__actions .btn-green {
  background: var(--ink);
  color: var(--cream);
  box-shadow: none;
}
.ak-tour-card__actions .btn-green:hover { background: var(--clay); color: var(--cream); }

/* Prices and route labels are information, not accents. The ▲ keeps the
   orange as the brand tick. */
.ak-permit__grid div:nth-child(2) dd { color: var(--ink); }
.ak-permit__route { color: var(--ak-copy); }
.ak-permit__route::before { background: var(--clay); }

/* --------------------------------------------------------------------------
   3. Flat bands (were gradients).
   -------------------------------------------------------------------------- */
.att-home-featured-pattern { background: var(--cream); }
.ak-motif-band { background: var(--ink); }

/* Guide book band: the engine paints it with a four-stop gradient, a glow,
   a halo, a sweeping sheen and a gradient gold button. */
body .attgb { background: var(--green-900); }
body .attgb::before,
body .attgb__stage::before,
body .attgb__sheen { display: none; }
body .attgb::after { background: color-mix(in srgb, var(--gold) 45%, transparent); }
body .attgb__face { background: var(--green); }
body .attgb__face::after { background: color-mix(in srgb, var(--cream) 22%, transparent); }
body .attgb__spine { background: color-mix(in srgb, var(--ink) 45%, transparent); }
body .attgb__ribbon { background: var(--gold); }
body .attgb__btn {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--cream);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
  filter: none;
}
body .attgb__btn:hover { background: var(--clay-700); border-color: var(--clay-700); }

/* --------------------------------------------------------------------------
   4. Page templates with their own inline styles.
   -------------------------------------------------------------------------- */
/* Tour page (single-safari_package-lux.php) and weather page. */
body .luxp .lx-btn--gold,
body .twx-btn--gold {
  background: var(--clay);
  color: var(--cream);
  box-shadow: 0 14px 30px -14px var(--clay-tint);
}
body .luxp .lx-btn--gold:hover,
body .twx-btn--gold:hover { background: var(--clay-700); }

/* Weather hero panel was a frosted gradient. */
body .twx-live {
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Accommodations: lodge level badge (engine green-black) and the
   no-photo placeholder (gradient). */
body .att-accom-card__level { background: color-mix(in srgb, var(--ink) 72%, transparent); }
body .att-accom-card__noimg { background: var(--cream-200); }

/* Tour page: its own "gold" token was a second accent next to the site's
   orange (gold eyebrows, gold timeline, gold price). One accent here too;
   the price reads as information, in ink, like the tour cards. */
body .luxp { --lx-gold: var(--clay); }
body .luxp .lx-card__price .v { color: var(--lx-ink); }
body .luxp .lx-tl::before { background: color-mix(in srgb, var(--clay) 35%, var(--lx-line)); }
body .luxp .lx-day--end .lx-day__num--end { color: var(--cream); }

/* --------------------------------------------------------------------------
   5. Dark bands are orange since 26 Oct 2026 (Safari Green = the accent, at
      the owner's request). An orange button on an orange band disappears,
      so buttons on those bands turn cream with ink text.
   -------------------------------------------------------------------------- */
:is(.bg-green, .bg-green-700, .bg-green-900, .attgb, .ak-motif-band,
    section:has(> .bg-green-900\/80), div:has(> .bg-green-900\/80))
  :is(.btn-gold, .btn-green, .attgb__btn):not(.ak-tour-card__actions *) {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .45);
}
:is(.bg-green, .bg-green-700, .bg-green-900, .attgb, .ak-motif-band,
    section:has(> .bg-green-900\/80), div:has(> .bg-green-900\/80))
  :is(.btn-gold, .btn-green, .attgb__btn):not(.ak-tour-card__actions *):hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}