/*
 * Base: document, typography elements, focus, selection, skip link, page canvas.
 * Specificity is kept low on purpose (body.tg + one class) so Elementor's own wrappers can be targeted without !important.
 */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--tg-header-h) + 1.5rem); background: var(--tg-bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.tg {
  margin: 0;
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: var(--tg-font-body);
  font-size: var(--tg-fs-body);
  line-height: var(--tg-lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* no horizontal page scroll from decorative glows */
}
body.tg *, body.tg *::before, body.tg *::after { box-sizing: border-box; }
body.tg img, body.tg svg, body.tg video { max-width: 100%; height: auto; }
body.tg ::selection { background: var(--tg-purple); color: #fff; }

/* ---- headings: one family, weight and tracking carry the hierarchy ---- */
body.tg h1, body.tg h2, body.tg h3, body.tg h4 { font-family: var(--tg-font-display); color: var(--tg-text); margin: 0; text-wrap: balance; font-weight: 600; }
body.tg p { text-wrap: pretty; }
body.tg strong, body.tg b { font-weight: 600; color: var(--tg-text); }
body.tg code, body.tg kbd, body.tg pre { font-family: var(--tg-font-mono); font-size: .9em; }
body.tg code { background: var(--tg-surface-2); border: 1px solid var(--tg-line); border-radius: var(--tg-radius-xs); padding: .1em .4em; }
body.tg hr { border: 0; border-top: 1px solid var(--tg-line); margin-block: var(--tg-s-7); }

/* ---- links: always distinguishable; underline offset keeps descenders clear ---- */
:where(body.tg) a { color: var(--tg-accent-text); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color var(--tg-dur-hover) var(--tg-ease-out); }
@media (hover: hover) and (pointer: fine) { :where(body.tg) a:hover { color: var(--tg-text); text-decoration-thickness: 2px; } }
/* (zero specificity on purpose: buttons, nav, chips and the plugin's own components set their own colours without fighting this rule) */

/* ---- focus: one ring everywhere, visible on every surface (keyboard only) ---- */
body.tg :focus { outline: none; }
body.tg :focus-visible { outline: 2px solid var(--tg-focus); outline-offset: 3px; border-radius: var(--tg-radius-xs); }
body.tg :where(.tg-btn, .elementor-button):focus-visible { border-radius: var(--tg-radius-pill); }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.tg .tg-skip { position: absolute; left: -9999px; top: .75rem; z-index: var(--tg-z-skip); background: var(--tg-text); color: var(--tg-bg); padding: .65rem 1.1rem; border-radius: var(--tg-radius-pill); font-weight: 600; text-decoration: none; }
body.tg .tg-skip:focus { left: .75rem; }

/* Hello Elementor wraps pages in <main id="content" class="site-main">; sections are full-bleed. */
body.tg .site-main, body.tg .page-content { max-width: none; margin: 0; padding: 0; width: 100%; }
body.tg .page-header { display: none; }
body.tg .site-main > .elementor { overflow-x: clip; }

/* ---- touch: no tap flash, no sticky hover, no zoom-on-focus in forms ---- */
body.tg { -webkit-tap-highlight-color: transparent; }
body.tg :where(button, [role="button"], .tg-btn, .elementor-button, summary) { touch-action: manipulation; }
@media (max-width: 47.99rem) { body.tg :where(input, select, textarea) { font-size: 16px; } }

/* ---- forced colors: keep structure visible ---- */
@media (forced-colors: active) { body.tg :where(.tg-card, .tg-btn, .tg-shot) { border: 1px solid CanvasText; } }