/* TRL Elementor base: adapters between the client design system and classic Elementor.

   In classic Elementor a class from Advanced → CSS Classes lands on the widget's wrapper
   (div.elementor-widget-…), not on the button, heading or text inside it. These rules
   move each design-system class onto the right inner element and stop the wrapper from
   being styled as well. Load after the client file. Uses the client's custom properties
   (--navy, --orange, --font-display …). */

/* ---------- Buttons: Button widget with btn-primary | btn-accent | btn-outline | btn-ghost [+ btn-sm] ---------- */
.trl-elementor .elementor-widget-button:is(.btn, .btn-primary, .btn-accent, .btn-outline, .btn-ghost, .btn-sm) {
  display: block; min-height: 0; padding: 0; border: 0; background: none; border-radius: 0;
}
.trl-elementor .elementor-widget-button:is(.btn-primary, .btn-accent, .btn-outline, .btn-ghost) .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1, 8px);
  min-height: 48px; padding: 0 var(--sp-3, 24px); border-radius: var(--radius-sm, 4px); border: 2px solid transparent;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none;
}
.trl-elementor .elementor-widget-button.btn-sm .elementor-button { min-height: 44px; padding: 0 var(--sp-2, 16px); font-size: 14px; }
.trl-elementor .elementor-widget-button.btn-primary .elementor-button { background: var(--navy); color: var(--s0); }
.trl-elementor .elementor-widget-button.btn-primary .elementor-button:hover { background: var(--navy-hover); color: var(--s0); }
.trl-elementor .elementor-widget-button.btn-accent .elementor-button { background: var(--orange); color: var(--navy-deep); }
.trl-elementor .elementor-widget-button.btn-accent .elementor-button:hover { background: #FF9440; color: var(--navy-deep); }
.trl-elementor .elementor-widget-button.btn-outline .elementor-button { background: transparent; color: var(--navy); border-color: var(--navy); }
.trl-elementor .elementor-widget-button.btn-outline .elementor-button:hover { background: var(--navy); color: var(--s0); }
.trl-elementor .elementor-widget-button.btn-ghost .elementor-button { background: transparent; color: var(--s0); border-color: rgba(255, 255, 255, 0.6); }
.trl-elementor .elementor-widget-button.btn-ghost .elementor-button:hover { border-color: var(--s0); color: var(--s0); }
.trl-elementor .elementor-button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- Headings: Heading widget with t-dxl | t-dl | t-h1 | t-h2 | t-h3 | t-h3d | eyebrow ---------- */
.trl-elementor .elementor-widget-heading:is(.t-dxl, .t-dl, .t-h1, .t-h2, .t-h3, .t-h3d, .eyebrow) .elementor-heading-title {
  font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
  letter-spacing: inherit; text-transform: inherit; margin: 0;
}

/* ---------- Text Editor widget with t-bodyl | t-body | t-meta | muted ---------- */
.trl-elementor .elementor-widget-text-editor:is(.t-bodyl, .t-body, .t-meta) p { font-size: inherit; line-height: inherit; color: inherit; }
.trl-elementor .elementor-widget-text-editor:is(.t-bodyl, .t-body, .t-meta) p:last-child { margin-bottom: 0; }

/* ---------- Containers: wrap keeps Elementor's own padding from doubling up ---------- */
.trl-elementor .e-con.wrap { --padding-left: var(--margin); --padding-right: var(--margin); --content-width: var(--container); }
.trl-elementor .e-con.section { --padding-top: var(--section-y); --padding-bottom: var(--section-y); }

/* ---------- Loop Grid items carrying component classes ---------- */
.trl-elementor .e-loop-item .game-card, .trl-elementor .e-loop-item.game-card { height: 100%; }
.trl-elementor .elementor-widget-loop-grid .e-loop-nothing-found-message { padding: var(--sp-5) var(--sp-3); text-align: center; background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------- Taxonomy Filter (news categories) as chips ---------- */
.trl-elementor .e-filter { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.trl-elementor .e-filter .e-filter-item { min-height: 44px; padding: 0 var(--sp-2); border-radius: 999px; border: 1px solid var(--border); background: var(--s0); font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.trl-elementor .e-filter .e-filter-item:hover { border-color: var(--navy); }
.trl-elementor .e-filter .e-filter-item[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--s0); }

/* ---------- Loop Grid pagination ---------- */
.trl-elementor .elementor-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1); }
.trl-elementor .elementor-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--sp-1); border-radius: var(--radius-sm); font-weight: 600; color: var(--navy); text-decoration: none; }
.trl-elementor .elementor-pagination .page-numbers.current { background: var(--navy); color: var(--s0); }
.trl-elementor .elementor-pagination a.page-numbers:hover { background: var(--s2); }

/* ---------- Rank Math breadcrumbs ([rank_math_breadcrumb]) styled like .crumbs ---------- */
.trl-elementor .rank-math-breadcrumb p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: 0; font-size: 13px; color: var(--text-2); }
.trl-elementor .rank-math-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; }
.trl-elementor .rank-math-breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.trl-elementor .rank-math-breadcrumb .separator { color: #9A9A9A; }
.trl-elementor .on-dark .rank-math-breadcrumb p,
.trl-elementor .on-dark .rank-math-breadcrumb a { color: var(--on-dark-2); }

/* ---------- Gravity Forms (Orbital theme) mapped to the design system ---------- */
.trl-elementor .gform-theme--framework {
  --gf-color-primary: var(--navy);
  --gf-color-primary-rgb: 30, 42, 90;
  --gf-color-primary-contrast: #FFFFFF;
  --gf-ctrl-border-color: #8A8A8A;
  --gf-radius: var(--radius-sm, 4px);
}
.trl-elementor .gform_wrapper .gfield_label { font-weight: 700; color: var(--text); }
.trl-elementor .gform_wrapper .gfield_required { color: var(--orange-ink); }
.trl-elementor .gform_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.trl-elementor .gform_wrapper select,
.trl-elementor .gform_wrapper textarea { min-height: 48px; font-size: 16px; }
.trl-elementor .gform_wrapper :is(input, select, textarea):focus { outline: 3px solid var(--orange); outline-offset: 1px; }
.trl-elementor .gform_wrapper .gform_button { min-height: 48px; padding: 0 var(--sp-3); border-radius: var(--radius-sm); font-weight: 700; }
.trl-elementor .on-dark .gform_wrapper .gfield_label,
.trl-elementor .on-dark .gform_wrapper .gfield_consent_label { color: #FFFFFF; }
.trl-elementor .on-dark .gform_wrapper .gform_button { background: var(--orange); color: var(--navy-deep); }

/* ---------- Accessibility ---------- */
.trl-elementor a:focus-visible, .trl-elementor button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .trl-elementor *, .trl-elementor *::before, .trl-elementor *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}