/* ==========================================================================
   GLOBAL BUTTON SETTINGS
   Virlocept Group website · button standard of 12 October 2026

   Every button on the site takes its size, font, disc, colours and hover
   from the settings below. Change a value here and every button follows,
   on every page and for every business. This file loads last, so it wins
   over the page stylesheets.

   The rules
   - 1 size: 52px high, 15px Source Sans 3 semibold, a 38px disc 7px in from
     the right edge. The text centres in the space left of the disc.
   - Only the icon disc takes colour:
       Virlocept Group and Group buttons: the mustard, green and blue ring,
         navy centre, white icon (on light and navy pills alike)
       Virlocept: mustard disc, white arrow
       Umbuso: green disc, white arrow
       Lighthaven: blue disc, white arrow
     Every icon in a coloured disc is white (20 October 2026).
     A button for another business takes that business's colour.
   - Red is for the emergency button only.
   - 1 hover: the pill keeps its colour, the shadow deepens, the disc
     brightens a little, and the icon slides out to the right and back in
     from the left. Keyboard focus shows the same effect.
   ========================================================================== */

:root{
  /* size */
  --btn-h:52px;            /* button height */
  --btn-disc:38px;         /* icon disc */
  --btn-gap:7px;           /* space between the disc and the button's edge */
  --btn-pl:24px;           /* left padding */
  --btn-pr:69px;           /* right padding: gap + disc + 24px, keeps the text centred left of the disc */
  /* type */
  --btn-font:600 15px/1 "Source Sans 3",Helvetica,Arial,sans-serif;
  /* colours */
  --c-navy:#2F444F;
  --ring:radial-gradient(circle closest-side,#2f444f calc(100% - 5.5px),#f8f6f2 calc(100% - 5px),#f8f6f2 calc(100% - 3px),transparent calc(100% - 2.5px)),conic-gradient(#eba95e 0 120deg,#3e7d19 120deg 240deg,#004eba 240deg 360deg);
  --d-v:linear-gradient(180deg,#F2B569,#E9A352); --d-v-h:linear-gradient(180deg,#F6C17E,#EDAD5E);   /* Virlocept mustard */
  --d-u:linear-gradient(180deg,#4F9A24,#3E7D19); --d-u-h:linear-gradient(180deg,#5AA72C,#448A1C);   /* Umbuso green */
  --d-l:linear-gradient(180deg,#1F6FE0,#004EBA); --d-l-h:linear-gradient(180deg,#2F7DEA,#0A5ACB);   /* Lighthaven blue */
  /* hover */
  --btn-dur:.45s;          /* icon slide */
  --btn-ease:cubic-bezier(.6,0,.2,1);
  --btn-disc-hover:brightness(1.1);
}

/* 1. One size for every pill */
html body .pg,
html body .ctb-go,
html body .nx-go,
html body .nlb-go,
html body .sv-mt-go,
html body .nv-go,
html body .gf-dir,
html body .sc-go,
html body .fq-btn{
  height:var(--btn-h)!important; min-height:var(--btn-h)!important;
  padding:0 var(--btn-pr) 0 var(--btn-pl)!important;
  font:var(--btn-font)!important; letter-spacing:.005em!important;
  border-radius:999px!important; box-sizing:border-box!important;
}
html body .nv-go{display:inline-flex!important;align-items:center;justify-content:center}

/* 2. One disc for every pill */
html body .pg .disc,
html body .ctb-go .ctb-disc,
html body .nx-go .nx-disc,
html body .nlb-go>span,
html body .sv-mt-go .disc,
html body .nv-go i,
html body .gf-dir .gf-well,
html body .sc-go .sc-disc,
html body .fq-btn .fq-disc{
  position:absolute!important; top:50%!important; right:var(--btn-gap)!important; left:auto!important;
  margin-top:calc(var(--btn-disc) / -2)!important;
  width:var(--btn-disc)!important; height:var(--btn-disc)!important; border-radius:50%!important;
}
html body .ctb-go .ctb-disc,
html body .nx-go .nx-disc,
html body .gf-dir .gf-well{display:grid!important;place-items:center}
html body .ctb-go .ctb-disc svg,
html body .nx-go .nx-disc svg,
html body .gf-dir .gf-well svg,
html body .sc-go .sc-disc svg,
html body .fq-btn .fq-disc svg{width:16px!important;height:16px!important}
/* Previous on the service card bar: the disc sits on the left, so the padding mirrors */
html body .sc-prev{padding:0 var(--btn-pl) 0 var(--btn-pr)!important}
html body .sc-prev .sc-disc{left:var(--btn-gap)!important;right:auto!important}

/* 3. Menu: Get in touch at the same size */
html body .vgm .vgm-key[aria-label="Get in touch"],
html body .vgm .vgm-key[aria-label="Get in touch"]:hover{
  width:auto!important; height:var(--btn-h)!important;
  padding:0 var(--btn-pr) 0 var(--btn-pl)!important;
  font:var(--btn-font)!important;
}
html body .vgm .vgm-key[aria-label="Get in touch"]::after{
  right:var(--btn-gap)!important; top:var(--btn-gap)!important;
  width:var(--btn-disc)!important; height:var(--btn-disc)!important;
}
html body .vgm .vgm-key[aria-label="Get in touch"] svg{
  right:calc(var(--btn-gap) + var(--btn-disc) / 2 - 9px)!important;
  top:calc(var(--btn-h) / 2 - 9px)!important;
}

/* 4. Get directions matches the Group buttons: light pill, navy text, ring disc on the right */
html body .gf-dir{
  gap:0!important; color:var(--c-navy)!important;
  background:linear-gradient(180deg,#fff,#f5f2ee)!important;
  box-shadow:0 1px 3px rgba(112,98,84,.16),0 4px 14px -2px rgba(112,98,84,.24),inset 0 1px 0 #fff!important;
}
html body .gf-dir:hover{background:linear-gradient(180deg,#fff,#efebe5)!important}
html body .gf-dir .gf-well{background:var(--ring)!important;color:#fff!important;box-shadow:0 1px 2px rgba(20,32,38,.22)!important}

/* 5. Business service pages: the CTA band disc takes the business colour */
html body[data-bb="virlocept"] .ctb-go .ctb-disc{background:var(--d-v)!important;color:#fff!important}
html body[data-bb="umbuso"] .ctb-go .ctb-disc{background:var(--d-u)!important;color:#fff!important}
html body[data-bb="lighthaven"] .ctb-go .ctb-disc{background:var(--d-l)!important;color:#fff!important}
html body[data-bb="virlocept"] .ctb-go:hover .ctb-disc{background:var(--d-v-h)!important}
html body[data-bb="umbuso"] .ctb-go:hover .ctb-disc{background:var(--d-u-h)!important}
html body[data-bb="lighthaven"] .ctb-go:hover .ctb-disc{background:var(--d-l-h)!important}

/* 6. Every icon in a coloured disc is white, mustard included (20 October 2026; was navy on mustard).
   The quote band and newsletter discs on Group pages take the standard ring (navy centre, white arrow),
   not the white centre with a navy arrow. */
html body :is(.disc,.t3-sv-d,.cbs-disc,.ctb-disc,.nx-disc,.sc-disc,.fq-disc),
html body [data-bb] :is(.disc,.t3-sv-d,.cbs-disc,.ctb-disc,.nx-disc,.sc-disc,.fq-disc),
html body [data-bb] [data-bb] :is(.disc,.t3-sv-d,.cbs-disc,.ctb-disc,.nx-disc,.sc-disc,.fq-disc),
html body .nx.nx-cross .nx-go .nx-disc{color:#fff!important}
html body .nlb-go>span,html body[data-bb=group] .gf .ctb-disc{background:var(--ring)!important;color:#fff!important}
html body .nlb-go:hover>span,html body[data-bb=group] .gf .ctb-go:hover .ctb-disc{background:radial-gradient(circle closest-side,#3a5360 calc(100% - 5.5px),#f8f6f2 calc(100% - 5px),#f8f6f2 calc(100% - 3px),transparent calc(100% - 2.5px)),conic-gradient(#eba95e 0 120deg,#3e7d19 120deg 240deg,#004eba 240deg 360deg)!important}
html body .pg.pg-emg .disc,html body [data-bb] .pg.pg-emg .disc,html body [data-bb] [data-bb] .pg.pg-emg .disc{color:#C24540!important}

/* 7. One hover for every button (12 October 2026, later)
   The pill keeps its colour, the shadow deepens, the disc brightens a little,
   and the icon slides out to the right and back in from the left. */
@keyframes btn-through{
  0%{translate:0 0;opacity:1}
  45%{translate:14px 0;opacity:0}
  46%{translate:-14px 0;opacity:0}
  100%{translate:0 0;opacity:1}
}

/* the pill keeps its colour */
html body .ctb-go:hover,html body .nx-go:hover,html body .nlb-go:hover,html body .sc-go:hover,html body .fq-btn:hover{background:linear-gradient(180deg,#36505c,#263842)!important}
html body .pg.pg-emg:hover{background:linear-gradient(180deg,#d7524d,#c24540)!important}
html body .gf-dir:hover{background:linear-gradient(180deg,#fff,#f5f2ee)!important}
html body .vgm .vgm-key[aria-label="Get in touch"]:hover{background:linear-gradient(180deg,#fff,#f5f2ee)!important}
html body .nv-go:hover{background:#fff!important}

/* the shadow deepens */
html body .ctb-go,html body .nx-go,html body .nlb-go,html body .sc-go,html body .fq-btn{transition:box-shadow .22s ease!important}
html body .ctb-go:hover,html body .nx-go:hover,html body .nlb-go:hover,html body .sc-go:hover,html body .fq-btn:hover,
html body .ctb-go:focus-visible,html body .nx-go:focus-visible,html body .nlb-go:focus-visible,html body .sc-go:focus-visible,html body .fq-btn:focus-visible{
  box-shadow:0 2px 5px rgba(20,32,38,.3),0 14px 28px -8px rgba(20,32,38,.62),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.2)!important}
html body .vgm .vgm-key[aria-label="Get in touch"],html body .nv-go,html body .gf-dir{transition:box-shadow .22s ease!important}
html body .vgm .vgm-key[aria-label="Get in touch"]:hover,html body .nv-go:hover,html body .gf-dir:hover,
html body .vgm .vgm-key[aria-label="Get in touch"]:focus-visible,html body .nv-go:focus-visible,html body .gf-dir:focus-visible{
  box-shadow:0 2px 4px rgba(6,12,16,.35),0 9px 22px -4px rgba(6,12,16,.55),inset 0 1px 0 #fff!important}
html body .pg.pg-emg:hover{box-shadow:0 2px 4px rgba(120,30,26,.3),0 10px 22px -6px rgba(160,50,45,.6),inset 0 1px 0 rgba(255,255,255,.22)!important}

/* the disc brightens a little and stays where it is */
html body .pg .disc,html body .sv-mt-go .disc,html body .ctb-go .ctb-disc,html body .nx-go .nx-disc,
html body .nlb-go>span,html body .nv-go i,html body .gf-dir .gf-well,html body .sc-go .sc-disc,html body .fq-btn .fq-disc{transition:filter .2s ease!important}
html body .pg:hover .disc,html body .sv-mt-go:hover .disc,html body .sv-mt:hover .sv-mt-go .disc,html body .ctb-go:hover .ctb-disc,html body .nx-go:hover .nx-disc,html body .nlb-go:hover>span,html body .nv-go:hover i,html body .gf-dir:hover .gf-well,html body .sc-go:hover .sc-disc,html body .fq-btn:hover .fq-disc{filter:var(--btn-disc-hover)}
html body .nx-go:hover .nx-disc,html body .nx-go .nx-disc{transform:none!important}
html body .vgm .vgm-key[aria-label="Get in touch"]::after{transition:filter .2s ease}
html body .vgm .vgm-key[aria-label="Get in touch"]:hover::after,html body .vgm .vgm-key[aria-label="Get in touch"]:focus-visible::after{filter:var(--btn-disc-hover)}

/* the icon slides through: 1 icon per disc */
html body .pg .disc svg+svg,html body .sv-mt-go .disc svg+svg{display:none!important}
html body .pg .disc svg,html body .sv-mt-go .disc svg{transform:none!important;transition:none!important}
html body .pg:hover .disc svg,html body .pg:focus-visible .disc svg,
html body .sv-mt-go:hover .disc svg,html body .sv-mt:hover .sv-mt-go .disc svg,html body .sv-mt-go:focus-visible .disc svg,
html body .ctb-go:hover .ctb-disc svg,html body .ctb-go:focus-visible .ctb-disc svg,
html body .nx-go:hover .nx-disc svg,html body .nx-go:focus-visible .nx-disc svg,
html body .nlb-go:hover>span svg,html body .nlb-go:focus-visible>span svg,
html body .gf-dir:hover .gf-well svg,html body .gf-dir:focus-visible .gf-well svg,
html body .sc-next:hover .sc-disc svg,html body .sc-next:focus-visible .sc-disc svg,
html body .fq-btn:hover .fq-disc svg,html body .fq-btn:focus-visible .fq-disc svg,
html body .vgm .vgm-key[aria-label="Get in touch"]:hover svg,html body .vgm .vgm-key[aria-label="Get in touch"]:focus-visible svg{
  animation:btn-through var(--btn-dur) var(--btn-ease)}

/* Previous: the left arrow slides out to the left and back in from the right */
@keyframes btn-back{
  0%{translate:0 0;opacity:1}
  45%{translate:-14px 0;opacity:0}
  46%{translate:14px 0;opacity:0}
  100%{translate:0 0;opacity:1}
}
html body .sc-prev:hover .sc-disc svg,html body .sc-prev:focus-visible .sc-disc svg{animation:btn-back var(--btn-dur) var(--btn-ease)}

/* the tray's Get a quote draws its arrow as a background, so the arrow moves to its own layer */
html body .nv-go i{background:var(--ring)!important}
html body .nv-go i::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='M686-450H190q-13 0-21.5-8.5T160-480q0-13 8.5-21.5T190-510h496L459-737q-9-9-9-21t9-21q9-9 21-9t21 9l278 278q5 5 7 10t2 11q0 6-2 11t-7 10L501-181q-9 9-21 9t-21-9q-9-9-9-21t9-21l227-227Z'/%3E%3C/svg%3E") 50% 50%/16px no-repeat}
html body .nv-go:hover i::after,html body .nv-go:focus-visible i::after{animation:btn-through var(--btn-dur) var(--btn-ease)}

/* round arrow controls follow the same hover: no colour change or growth, icon slides through */
html body .gr-arr:hover{color:#2F444F!important;transform:none!important;background:#fff!important}
html body .gr-arr:hover svg,html body .gr-arr:focus-visible svg{animation:btn-through var(--btn-dur) var(--btn-ease)}

@media (prefers-reduced-motion:reduce){
  html body a svg,html body button svg,html body .nv-go i::after{animation:none!important}
}