/**
 * T&R Glass — site-wide chrome (Theme Builder header effects).
 * Loads after Elementor. Elementor owns layout; theme owns these effects only.
 *
 * Header hooks: #tr_nav > #tr_navpill.tr_sheen  (JS adds .tr_stuck)
 * Footer glow is handled in Elementor Custom CSS (not here).
 *
 * THEMING: every colour below comes from the chrome role tokens declared in
 * trglass/styles.css — light is the default, dark is <html data-theme="dark">
 * (or <body class="trg-dark">). There is no second copy of these rules for
 * dark mode and there must not be one: if a value cannot be expressed as a
 * token it does not belong in the pill.
 *
 * The pill's glass (background / border / blur / rim) is THEME-owned, not
 * Elementor-owned, because it has to change with the theme and an Elementor
 * colour is a single hard-coded value. Leave Background, Border and Box Shadow
 * empty on #tr_navpill in Elementor — set there they are overridden here.
 */

/* ========== HEADER / NAV ========== */

/* Handoff: #nav { position:fixed; top:0; left:0; right:0; z-index:50; padding:22px … } */
html body #tr_nav{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:9999 !important; /* above Elementor sticky / overlays; below WP admin bar (99999) */
  padding-top:22px !important;
  transition:padding-top .4s cubic-bezier(.22,1,.36,1) !important;
}

/* WP admin bar — keep nav below toolbar (32px desktop / 46px ≤782px) */
html body.admin-bar #tr_nav{top:32px !important}
@media screen and (max-width:782px){
  html body.admin-bar #tr_nav{top:46px !important}
}

/* Handoff: #nav.stuck { padding-top:12px } */
html body #tr_nav.tr_stuck{padding-top:12px !important}

/* Handoff: #navpill — frosted glass floating over the page.
   --fg2 is remapped inside the pill so anything inheriting a secondary text
   colour reads the CHROME's secondary, not the page's: the pill sits over the
   hero photograph, not over the section behind it. */
html body #tr_navpill{
  --fg2:var(--onChrome2);
  color:var(--onChrome);
  background:linear-gradient(180deg,
    rgba(var(--chromeRGB,246,245,242),calc(var(--chromeA,.58) + .06)),
    rgba(var(--chromeRGB,246,245,242),calc(var(--chromeA,.58) - .06))) !important;
  border:1px solid rgba(var(--sRGB,20,26,36),calc(.14 * var(--aScale,.62))) !important;
  backdrop-filter:blur(var(--chromeBlur,22px)) saturate(var(--chromeSat,180%)) brightness(var(--chromeLift,2.2)) !important;
  -webkit-backdrop-filter:blur(var(--chromeBlur,22px)) saturate(var(--chromeSat,180%)) brightness(var(--chromeLift,2.2)) !important;
  box-shadow:
    inset 0 1px 0 var(--rimHi,rgba(255,255,255,.9)),
    inset 0 -1px 0 var(--rimLo,rgba(20,26,36,.07)),
    0 16px 40px var(--chromeDrop,rgba(20,26,36,.16)) !important;
  transition:background .4s,border-color .4s,box-shadow .4s !important;
}

/* THE BRAND LOCKUP (Elementor Image Box in the pill).
   The wordmark takes the chrome's ink in both themes. !important because the
   widget carries its own colour from the panel, and a single hard-coded value
   cannot be right in both themes — same reason the pill's glass is theme-owned.
   Scoped to #tr_navpill, so Image Boxes elsewhere on the site are untouched. */
html body #tr_navpill .elementor-image-box-title,
html body #tr_navpill .elementor-image-box-title a,
html body #tr_navpill .wm{color:var(--onChrome) !important}

/* THE MARK. The logo is an <img> of an SVG FILE, so its fills are baked in — an
   external SVG cannot read currentColor or a CSS variable from the page — and
   navy on an ink background is a mark you cannot see. No filter chain fixes it
   either: inverting navy gives pale yellow and takes the brand red with it, so
   dark mode swaps the file itself. That cannot be done in CSS (`src` is not a
   property), so it lives in the boot script: inc/theme-switch.php. Painting a
   replacement behind the <img> would work only where a wrapper happens to hug
   the image, which is why it is not done here — the swap has to hold for the
   footer mark and any logo added later, in whatever widget. */
html body #tr_navpill .logo{color:var(--onChrome)}

/* SECONDARY BUTTON IN THE PILL — opt-in hook, like .tr_sheen.
   Add `tr_btn_ghost` to the button's Advanced → CSS Classes and the theme owns
   its colours (handoff .btn.g: a pane of the same glass, ink that follows the
   chrome). Elementor's own colour fields on that button then have no effect,
   which is the point — a ghost button set to one hard-coded colour is either
   invisible in light mode or invisible in dark. The red Quote CTA needs no hook:
   white on brand red is the one pair that holds on every surface. */
html body #tr_navpill .tr_btn_ghost .elementor-button,
html body #tr_navpill .elementor-button.tr_btn_ghost,
html body #tr_navpill a.tr_btn_ghost{
  background:rgba(var(--sRGB,20,26,36),calc(.08 * var(--aScale,.62))) !important;
  color:var(--onChrome,#141A24) !important;
  border:1px solid rgba(var(--sRGB,20,26,36),calc(.2 * var(--aScale,.62))) !important;
  box-shadow:none !important;
  transition:background .3s,border-color .3s,color .3s !important;
}
@media(hover:hover) and (pointer:fine){
  html body #tr_navpill .tr_btn_ghost .elementor-button:hover,
  html body #tr_navpill .elementor-button.tr_btn_ghost:hover,
  html body #tr_navpill a.tr_btn_ghost:hover{
    background:rgba(var(--sRGB,20,26,36),calc(.14 * var(--aScale,.62))) !important;
    border-color:rgba(var(--sRGB,20,26,36),calc(.32 * var(--aScale,.62))) !important;
  }
}

/* Handoff: #nav.stuck #navpill — denser glass once the page has scrolled.
   Flat fill rather than the gradient, and the bottom rim drops out: stuck, the
   pill reads as a bar attached to the top of the viewport, not a floating slab. */
html body #tr_nav.tr_stuck #tr_navpill{
  background:rgba(var(--chromeRGB,246,245,242),var(--chromeAStuck,.74)) !important;
  box-shadow:
    inset 0 1px 0 var(--rimHi,rgba(255,255,255,.9)),
    0 10px 30px var(--chromeDrop,rgba(20,26,36,.16)) !important;
  transition:background .4s,box-shadow .4s !important;
}

/* reduced transparency: the pill floats over the hero photo at ~58% alpha — with
   the OS asking for opacity it goes to the solid page surface, in either theme.
   Same contract as .trg-mobmenu (widget-nav.css). */
@media(prefers-reduced-transparency:reduce){
  html body #tr_navpill,
  html body #tr_nav.tr_stuck #tr_navpill{
    background:var(--bg-base,#F6F5F2) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* ========== THEME SWITCH ([trg_theme_switch]) ========== */

/* Not rendered until the boot script has run and set .trg-js on <html>: a switch that cannot
   switch is worse than no switch. Adding a class rather than removing a `no-js` one keeps the
   no-JS case correct even if the class never arrives. */
/* Only `display` hangs off .trg-js; the visual properties stay on the bare class, where the
   state rules below can reach them. */
.trg-themeswitch{
  position:relative;
  flex:0 0 auto;
  place-items:center;
  display:none;
  width:41.2px;
  height:41.2px;
  padding:0;
  border-radius:50%;
  cursor:pointer;
  color:var(--chipFg,#141A24);
  background:var(--chipBg,rgba(20,26,36,.05));
  border:1px solid rgba(var(--sRGB,20,26,36),calc(.16 * var(--aScale,.62)));
  transition:border-color .3s,transform .35s cubic-bezier(.22,1,.36,1);
}
:root.trg-js .trg-themeswitch{display:grid}
/* Elementor's own breakpoints, so these read the same as the widget Size controls next to them.
   41.2px matches the pill buttons' height on desktop; 44 and 46 match the menu toggle, which is
   what the switch stands beside once the desktop links collapse. */
@media(max-width:1024px){.trg-themeswitch{width:44px;height:44px}}
@media(max-width:767px){.trg-themeswitch{width:46px;height:46px}}
/* The chip is sized to its neighbours; the hit area Apple's guidance asks for is larger than that
   on desktop. An inset pseudo-element adds the missing ring without moving the chip. */
.trg-themeswitch::before{content:"";position:absolute;inset:-3px;border-radius:50%}
/* Same look in every state as the menu toggle beside it: one plate, one icon colour, rest through
   active. !important and each state spelled out because Hello Elementor's reset.css repaints any
   <button> — #c36 plate, white text — on :hover AND :focus from a stylesheet that loads later.
   The 1px lift is the only thing interaction changes; it is the handoff's own hover for this
   control and touches transform, not colour. */
.trg-themeswitch,
.trg-themeswitch:hover,
.trg-themeswitch:focus,
.trg-themeswitch:focus-visible,
.trg-themeswitch:active{
  background:var(--chipBg,rgba(20,26,36,.05)) !important;
  color:var(--chipFg,#141A24) !important;
}
.trg-themeswitch:hover{transform:translateY(-1px)}
.trg-themeswitch:focus-visible{outline:2px solid var(--chipFg,#141A24);outline-offset:3px}
.trg-themeswitch__i{
  position:absolute;
  width:18px;
  height:18px;
  display:block;
  pointer-events:none;
  transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);
}
/* The icon is the theme you would GET, so light shows the moon and dark shows the sun. The
   hidden one rotates out rather than just fading: the pair reads as one object turning over. */
.trg-themeswitch__i--moon{opacity:1;transform:none}
.trg-themeswitch__i--sun{opacity:0;transform:rotate(-65deg) scale(.55)}
:root[data-theme=dark] .trg-themeswitch__i--moon,
body.trg-dark .trg-themeswitch__i--moon{opacity:0;transform:rotate(65deg) scale(.55)}
:root[data-theme=dark] .trg-themeswitch__i--sun,
body.trg-dark .trg-themeswitch__i--sun{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  :root.trg-js .trg-themeswitch,
  .trg-themeswitch__i{transition:none}
  .trg-themeswitch__i{transform:none !important}
}

/* Cursor-tracked specular sheen on the pill.
   The tint is the same cool glass reflection in both themes; only the blend
   mode flips. Screen lightens the dark pill toward its highlight, and on paper
   that is a no-op (paper is already at white), so light uses multiply — the
   same dark→light decision the handoff makes for the section mesh. Multiplying
   a pale cyan onto paper tints it instead of washing it, and the transparent
   stops of the gradient stay inert either way. */
html body #tr_navpill.tr_sheen{position:relative}
html body #tr_navpill.tr_sheen::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  z-index:4 !important;
  background:
    radial-gradient(420px 420px at var(--tr_mx,50%) var(--tr_my,50%),rgba(150,205,255,.13),rgba(120,175,255,.05) 38%,transparent 66%),
    radial-gradient(120px 120px at var(--tr_mx,50%) var(--tr_my,50%),rgba(255,255,255,.14),transparent 60%) !important;
  opacity:0 !important;
  transition:opacity .7s cubic-bezier(.22,1,.36,1) !important;
  mix-blend-mode:var(--blend,multiply) !important;
}
html body #tr_navpill.tr_sheen:hover::after{opacity:1 !important}
@media(hover:none),(prefers-reduced-transparency:reduce){
  html body #tr_navpill.tr_sheen::after{display:none !important}
}