/* Elementor page theming overlay.
 *
 * These pages are Elementor built and their sections, photos and copy are left
 * exactly as they are. This only re-skins them to match the palette used by
 * /lakeside-living/, /rv-resort/ and /cabins/.
 *
 * The mechanism is deliberate: Elementor drives nearly all of its colour through
 * the --e-global-color-* custom properties declared on .elementor-kit-1426,
 * which sits on <body>. Redeclaring those variables on body.amr-themed
 * (specificity 0,1,1 vs 0,1,0) recolours every widget at once without touching a
 * single widget's own settings, so nothing about the layout or content changes
 * and the whole thing is reversible by removing the body class.
 *
 * Applied to: the front page, /recreation/, /amenities/ and /about-us/.
 *
 * Type is untouched: the kit already pairs Playfair Display with Source Sans 3,
 * which is the same pairing the new pages use.
 */

body.amr-themed {
  /* was #00467A, a brighter blue than the rest of the site now uses */
  --e-global-color-primary: #1a2e4a;   /* --blue-deep  */
  --e-global-color-0fc63cc: #1a2e4a;
  /* --e-global-color-secondary (#B0C4DE) is deliberately NOT remapped. It is
     used as a text colour in one place, and lightening it would push that text
     toward invisible. It is a light steel blue that reads fine as-is. */
  --e-global-color-text: #2a2a2a;      /* --text       */
  --e-global-color-accent: #faf8f3;    /* --cream      */
  --e-global-color-ad17127: #faf8f3;
  --e-global-color-b15610a: #f0ebe0;   /* --cream-dark */

  background-color: #faf8f3;
}

/* Buttons: shape only.
 *
 * Deliberately NOT setting background-color or color here. Individual Elementor
 * buttons carry their own background from widget settings, and those rules beat
 * a page-level override. An earlier version set `color: #1a2e4a` expecting a
 * gold background to come with it; on the hero button the widget's navy
 * background won and the label became navy-on-navy, i.e. invisible.
 *
 * Colour is themed through the --e-global-color-* remap above, which every
 * button that uses a global colour picks up automatically. Restyling a specific
 * CTA to gold should be done on that widget in Elementor, where background and
 * text colour stay together.
 */
body.amr-themed .elementor-button.elementor-button {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Gold accent on the small eyebrow/label headings that sit above section
   titles, so the homepage picks up the same accent colour as the new pages. */
body.amr-themed .elementor-widget-heading.amr-eyebrow .elementor-heading-title,
body.amr-themed .elementor-widget-heading .elementor-heading-title small {
  color: #b8922e;
}