/* =============================================================================
   Master Insurance — base element styling built on the tokens.
   Ported from tokens/base.css. Kept deliberately thin: Hello Elementor ships
   almost no opinions, so these are the only global element rules on the site.
   ========================================================================== */

:root { color-scheme: light; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  font-weight: var(--weight-bold);
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--text-link-hover); }

img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

::selection { background: var(--teal-300); color: var(--teal-900); }

/* Keyboard focus — the design system's teal ring. Pointer clicks stay clean. */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* Skip link for keyboard and screen-reader users. Hello Elementor renders the
   target anchor; this only restyles it to the brand. */
.skip-link:focus {
  background: var(--color-primary);
  color: var(--white);
  font-family: var(--font-body);
}

/* Screen-reader-only helper used by the custom widgets. */
.mi-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Respect a reduced-motion preference: the marquee and rotator both stop.
   The design system's motion is decorative, so nothing is lost. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   The [hidden] attribute must always win.
   The browser styles [hidden] as `display: none`, but that is a UA rule — ANY
   author rule setting an explicit display beats it. Our tab panels are
   `.mi-catalog-grid { display: grid }`, so toggling `hidden` in JS changed
   nothing and the Products tabs appeared dead: the pill and sub-heading
   switched while the cards stayed put.

   This is the same rule normalize.css ships for exactly this reason.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }