/*
 * SIOR MemberSuite — shared theme bridge.
 * Aligns every module with the site's Elementor kit (kit-5): Rubik body text,
 * Barlow headings, sky-blue links, and the orange pill button. Everything reads
 * the live --e-global-* variables (so it tracks the kit) with hex fallbacks.
 * Scoped under the .sior-ms-* wrappers — never leaks into the theme.
 */

/* Body text → kit body font (Rubik). Real <h1>–<h6> already inherit Barlow from the kit. */
[class^="sior-ms-"],
[class*=" sior-ms-"] {
  font-family: var(--e-global-typography-text-font-family, "Rubik"), sans-serif;
}

/* Heading-like elements (incl. non-<h> titles) → Barlow, matching the kit's headings. */
[class^="sior-ms-"] :is(h1, h2, h3, h4, h5, h6),
[class^="sior-ms-"] .page-title,
[class^="sior-ms-"] .section-title,
[class^="sior-ms-"] .year-heading,
[class^="sior-ms-"] .month-heading,
[class^="sior-ms-"] .company-name,
[class^="sior-ms-"] .member-info .name,
[class^="sior-ms-"] .vol,
[class^="sior-ms-"] .rank,
[class^="sior-ms-"] .stat-card .num,
[class^="sior-ms-"] .tx-card .volume {
  font-family: var(--e-global-typography-primary-font-family, "Barlow"), sans-serif;
}

/* Links → kit primary; hover → kit ink (mirrors the kit's own a / a:hover). */
[class^="sior-ms-"] a { color: var(--e-global-color-primary, #1CA7E0); }
[class^="sior-ms-"] a:hover { color: var(--e-global-color-text, #1A2429); }

/* Primary action buttons → the site's orange pill (uppercase Barlow, outline on hover). */
[class^="sior-ms-"] .btn-primary,
[class^="sior-ms-"] button[type="submit"],
[class^="sior-ms-"] input[type="submit"],
[class^="sior-ms-"] .btn-register,
[class^="sior-ms-"] .more-link {
  background: var(--e-global-color-accent, #F26728) !important;
  color: #fff !important;
  border: 2px solid var(--e-global-color-accent, #F26728) !important;
  border-radius: 100px !important;
  font-family: var(--e-global-typography-primary-font-family, "Barlow"), sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  transition: background .15s, color .15s !important;
}
[class^="sior-ms-"] .btn-primary:hover,
[class^="sior-ms-"] button[type="submit"]:hover,
[class^="sior-ms-"] input[type="submit"]:hover,
[class^="sior-ms-"] .btn-register:hover,
[class^="sior-ms-"] .more-link:hover {
  background: transparent !important;
  color: var(--e-global-color-accent, #F26728) !important;
}

/* Form fields → match the site's Elementor input styling (1px #DCDCDC, Rubik, taller). */
[class^="sior-ms-"] input[type="text"],
[class^="sior-ms-"] input[type="search"],
[class^="sior-ms-"] input[type="email"],
[class^="sior-ms-"] input[type="tel"],
[class^="sior-ms-"] input[type="number"],
[class^="sior-ms-"] select,
[class^="sior-ms-"] textarea {
  font-family: var(--e-global-typography-text-font-family, "Rubik"), sans-serif !important;
  font-size: 1rem !important;
  color: #696969 !important;
  background-color: #fff !important;
  border: 1px solid var(--e-global-color-8fcc4a2, #DCDCDC) !important;
  border-radius: 4px !important;
  padding: 11px 14px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}
[class^="sior-ms-"] select { cursor: pointer; }

/* Secondary / clear buttons → light pill outline. */
[class^="sior-ms-"] .btn-secondary {
  border-radius: 100px !important;
  border: 2px solid var(--e-global-color-8fcc4a2, #DCDCDC) !important;
  color: var(--e-global-color-secondary, #54595F) !important;
  text-transform: uppercase !important;
  font-family: var(--e-global-typography-primary-font-family, "Barlow"), sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
}