/**
 * T&R Glass — Elementor T&R Menu widget.
 * Handoff: #navpill .lk, .burger, #mobmenu (source/styles.css).
 * Breakpoint and motion match the handoff; Elementor overrides color/type/spacing only.
 *
 * THEMING: the links and the burger sit on the nav pill and the overlay IS a
 * pane of the same glass, so both read the CHROME role tokens (--onChrome,
 * --onChrome2, --chromeRGB, --sRGB) from trglass/styles.css rather than the
 * page's text tokens. Light is the default; dark is <html data-theme="dark">
 * or <body class="trg-dark">, which is a token flip — there are no duplicate
 * rules for dark below. Every var() fallback is the LIGHT value, so a failed
 * styles.css still renders the client's default theme.
 *
 * Any colour set on this widget in Elementor (link, burger, overlay
 * background, button, contact list) is a single hard-coded value and will not
 * follow the theme. Leave those controls empty unless a colour is genuinely
 * theme-independent.
 */

.elementor-widget-trg-nav-menu{overflow:visible}

.trg-menu-root{width:100%}
.trg-menu{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:44px;
}
.trg-menu--empty{font-size:13px;color:var(--onChrome2,#5B6472)}

/* Desktop links — handoff #navpill .lk */
.trg-menu__links{display:flex;align-items:center;gap:28px;margin:0;padding:0}
.trg-menu__links a{
  position:relative;
  font-size:14px;
  font-weight:500;
  color:var(--onChrome2,#5B6472);
  text-decoration:none;
  white-space:nowrap;
}
.trg-menu__links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:1.5px;
  background:var(--red,#FF3A42);
  transition:width .3s cubic-bezier(.22,1,.36,1);
}
.trg-menu__links a:hover::after{width:100%}
/* The underline stays brand red in both themes: it is a 1.5px graphic, judged
   at 3:1, not small text — the same call the handoff makes for the eyebrow tick. */
.trg-menu__links a.on{color:var(--onChrome,#141A24)}
.trg-menu__links a.on::after{width:100%}

/* Hamburger — handoff #navpill .burger (mobile only) */
.trg-menu__burger{
  display:none;
  position:relative;
  z-index:2;
  width:44px;
  height:44px;
  border:none;
  background:var(--chipBg,rgba(20,26,36,.05));
  border-radius:14px;
  cursor:pointer;
  flex:0 0 auto;
  padding:0;
}
.trg-menu__burger span{
  position:absolute;
  left:12px;
  right:12px;
  height:2px;
  border-radius:2px;
  background:var(--chipFg,#141A24);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .2s;
}
.trg-menu__burger span:nth-child(1){top:15px}
.trg-menu__burger span:nth-child(2){top:21px}
.trg-menu__burger span:nth-child(3){top:27px}
/* The toggle keeps one look in every state — plate and bars are the theme's pair, hover, focus,
   focus-visible and active alike; only the bars' transform changes, when the menu opens.
   !important, and every 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 after this
   one. Out-specifying it would work today and break the next time something touches `button`. */
.trg-menu__burger,
.trg-menu__burger:hover,
.trg-menu__burger:focus,
.trg-menu__burger:focus-visible,
.trg-menu__burger:active{
  background:var(--chipBg,rgba(20,26,36,.05)) !important;
  color:var(--chipFg,#141A24) !important;
  border:none !important;
  box-shadow:none !important;
}
.trg-menu__burger span,
.trg-menu__burger:hover span,
.trg-menu__burger:focus span,
.trg-menu__burger:focus-visible span,
.trg-menu__burger:active span{background:var(--chipFg,#141A24) !important}
/* With the colours pinned, keyboard focus has no other tell, so it gets a ring. Pointer focus
   does not: :focus-visible is exactly the "user is navigating by keyboard" signal. */
.trg-menu__burger:focus-visible{outline:2px solid var(--chipFg,#141A24) !important;outline-offset:3px}

.trg-menu.is-open .trg-menu__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.trg-menu.is-open .trg-menu__burger span:nth-child(2){opacity:0}
.trg-menu.is-open .trg-menu__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:860px){
  .trg-menu__links{display:none}
  .trg-menu__burger{display:block}
}

/* Full-screen overlay — handoff #mobmenu
   z-index 9998 sits under #tr_nav (9999) so the pill/burger stay visible, matching
   the original #mobmenu (45) under #nav (50). Overlay is moved to <body> by nav.js
   so backdrop-filter on #tr_navpill cannot contain it. */
.trg-mobmenu{
  position:fixed;
  inset:0;
  z-index:9998;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:120px var(--pad,clamp(20px,5vw,64px)) 44px;
  /* The overlay is a full-screen pane of the pill's own glass, so it is mixed
     from the same --chromeRGB/--chromeA the pill uses, ~26 points denser
     (handoff #mobmenu) because it has to carry display-size type over whatever
     the page is showing. The vertical gradient is the pill's ±6-point falloff
     at overlay scale: denser at the top where it meets the pill, so the two
     surfaces read as one piece of glass rather than two panels. */
  background:linear-gradient(180deg,
    rgba(var(--chromeRGB,246,245,242),calc(var(--chromeA,.58) + .32)),
    rgba(var(--chromeRGB,246,245,242),calc(var(--chromeA,.58) + .22)));
  backdrop-filter:blur(28px) saturate(var(--chromeSat,180%)) brightness(var(--chromeLift,2.2));
  -webkit-backdrop-filter:blur(28px) saturate(var(--chromeSat,180%)) brightness(var(--chromeLift,2.2));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s ease,visibility .4s ease;
  overscroll-behavior:contain;
}
.trg-mobmenu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
@media(prefers-reduced-transparency:reduce){
  .trg-mobmenu{
    background:var(--bg-base,#F6F5F2);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

.trg-mobmenu .trg-mm-links{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0;
  padding:0;
}
.trg-mobmenu .trg-mm-links a{
  font-family:'Zodiak',Georgia,serif;
  font-weight:800;
  font-size:clamp(40px,12vw,60px);
  letter-spacing:-.02em;
  line-height:1.12;
  color:var(--onChrome,#141A24);
  padding:6px 0;
  text-decoration:none;
}

/* Staggered entrance — handoff body.menu-open #mobmenu .mm-links a */
.trg-mobmenu .trg-mm-links a{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);
}
.trg-mobmenu.is-open .trg-mm-links a{opacity:1;transform:none}
.trg-mobmenu.is-open .trg-mm-links a:nth-child(1){transition-delay:.08s}
.trg-mobmenu.is-open .trg-mm-links a:nth-child(2){transition-delay:.14s}
.trg-mobmenu.is-open .trg-mm-links a:nth-child(3){transition-delay:.20s}
.trg-mobmenu.is-open .trg-mm-links a:nth-child(4){transition-delay:.26s}
.trg-mobmenu.is-open .trg-mm-links a:nth-child(5){transition-delay:.32s}
.trg-mobmenu.is-open .trg-mm-links a:nth-child(6){transition-delay:.38s}
.trg-mobmenu.is-open .trg-mm-links a:nth-child(7){transition-delay:.44s}
.trg-mobmenu.is-open .trg-mm-links a:nth-child(8){transition-delay:.50s}
.trg-mobmenu.is-open .trg-mm-links a:nth-child(9){transition-delay:.56s}
.trg-mobmenu.is-open .trg-mm-links a:nth-child(10){transition-delay:.62s}

/* Overlay action buttons — Quote (.btn.p) + Portal (.btn.g) */
.trg-mm-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin-top:38px;
  width:100%;
}
.trg-mm-cta,
.trg-mm-portal{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Geist',system-ui,sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  border-radius:32px;
  padding:15px 28px;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,background .3s,color .3s,border-color .3s,fill .3s;
}
/* The quote button is theme-independent by design: white on --redfill is the
   one contrast pair that clears AA on any surface, so it is the same button in
   both themes (handoff .btn.p). */
.trg-mm-cta{
  background:var(--redfill,#D42832);
  color:#fff;
  box-shadow:0 14px 34px rgba(255,58,66,.32);
  border:none;
}
.trg-mm-portal{
  background:rgba(var(--sRGB,20,26,36),calc(.08 * var(--aScale,.62)));
  color:var(--onChrome2,#5B6472);
  box-shadow:none;
  border:1px solid rgba(var(--sRGB,20,26,36),calc(.2 * var(--aScale,.62)));
}
.trg-mm-cta__content,
.trg-mm-portal__content{display:inline-flex;align-items:center;gap:8px}
.trg-mm-cta__icon,
.trg-mm-portal__icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.trg-mm-cta__icon svg,
.trg-mm-portal__icon svg{width:1em;height:1em;fill:currentColor}
.trg-mm-cta__icon i,
.trg-mm-portal__icon i{font-size:1em}
@media(hover:hover) and (pointer:fine){
  .trg-mobmenu.is-open .trg-mm-cta:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(255,58,66,.42)}
  .trg-mobmenu.is-open .trg-mm-portal:hover{
    transform:translateY(-2px);
    background:rgba(var(--sRGB,20,26,36),calc(.14 * var(--aScale,.62)));
    color:var(--onChrome,#141A24);
    border-color:rgba(var(--sRGB,20,26,36),calc(.35 * var(--aScale,.62)));
  }
}

/* Contact list — handoff #mobmenu .mm-contact, vertical icon list */
.trg-mm-contact{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  list-style:none;
  padding:0;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--onChrome2,#5B6472);
}
.trg-mm-contact__item{position:relative;width:100%}
.trg-mm-contact__item:not(:last-child)::after{
  display:block;
  width:100%;
  margin-top:8px;
  border-top-width:0;
  border-top-style:solid;
  border-color:rgba(var(--sRGB,20,26,36),calc(.12 * var(--aScale,.62)));
}
.trg-mm-contact__link,
.trg-mm-contact__inner{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:inherit;
  text-decoration:none;
}
.trg-mm-contact__icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto}
.trg-mm-contact__icon svg{width:1em;height:1em;fill:currentColor}
.trg-mm-contact__icon i{font-size:1em;color:inherit}
.trg-mm-contact__text{color:inherit}

/* Stagger CTA + portal + contact with the overlay links */
.trg-mobmenu .trg-mm-cta,
.trg-mobmenu .trg-mm-portal,
.trg-mobmenu .trg-mm-contact{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);
}
.trg-mobmenu.is-open .trg-mm-cta,
.trg-mobmenu.is-open .trg-mm-portal,
.trg-mobmenu.is-open .trg-mm-contact{opacity:1;transform:none}
.trg-mobmenu.is-open .trg-mm-cta{transition-delay:.32s}
.trg-mobmenu.is-open .trg-mm-portal{transition-delay:.38s}
.trg-mobmenu.is-open .trg-mm-contact{transition-delay:.44s}

@media(prefers-reduced-motion:reduce){
  .trg-menu__links a::after{transition:none}
  .trg-menu__burger span{transition:none}
  .trg-mobmenu{transition:opacity .2s ease,visibility .2s ease}
  .trg-mobmenu .trg-mm-links a,
  .trg-mobmenu .trg-mm-cta,
  .trg-mobmenu .trg-mm-portal,
  .trg-mobmenu .trg-mm-contact{transition:opacity .2s ease;transform:none}
}

@media(hover:none),(pointer:coarse){
  .trg-mobmenu .trg-mm-links a{display:inline-block}
  .trg-mm-contact__link,
  .trg-mm-contact__inner{padding:14px 0}
}