/* ==========================================================================
   Be Wise polish layer (v89, October 2026)
   Loaded on every page, after the page's own styles. APPEARANCE ONLY:
   it changes no wording, no links and nothing about how an app works.
   The signature is the Waypoint compass: faint bearing lines in the navy
   bands, a small four-point star as the section mark, and the star turning
   once to point north. Everything moving stops for visitors whose device
   asks for reduced motion.
   ========================================================================== */

/* ---------- Smooth change between pages (browsers that support it) ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.22s; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } }

/* ---------- Compass bearing lines in the navy bands (added by bw-polish.js) ---------- */
.bwp-host{ isolation:isolate; }
.bwp-compass{ position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; overflow:hidden; pointer-events:none; }
.bwp-compass.bwp-bleed{ left:50%; right:auto; width:100vw; transform:translateX(-50%); }
.bwp-compass svg{
  position:absolute; top:50%; left:calc(50% + min(36vw, 430px));
  width:min(860px, 150vw); height:auto; aspect-ratio:1;
  transform:translate(-50%,-50%); color:#FFFFFF;
  -webkit-mask-image:radial-gradient(closest-side, #000 52%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 52%, transparent 100%);
}
.bwp-compass .bwp-lines, .bwp-compass .bwp-star{ opacity:.14; }
.bwp-compass .bwp-north{ stroke:#E4572E; opacity:.55; }
@media (max-width:760px){ .bwp-compass svg{ left:88%; } .bwp-compass .bwp-lines, .bwp-compass .bwp-star{ opacity:.09; } .bwp-compass .bwp-north{ opacity:.4; } }
@media (prefers-reduced-motion: no-preference){
  .bwp-compass.bwp-play svg{ animation:bwpTurn 1.9s cubic-bezier(.16,.8,.24,1) .15s both; }
  .bwp-compass.bwp-play .bwp-north{ stroke-dasharray:1400; animation:bwpDraw 1.4s cubic-bezier(.3,.7,.2,1) .7s both; }
  @keyframes bwpTurn{ from{ opacity:0; transform:translate(-50%,-50%) rotate(-28deg) scale(.94); } to{ opacity:1; transform:translate(-50%,-50%); } }
  @keyframes bwpDraw{ from{ stroke-dashoffset:1400; } to{ stroke-dashoffset:0; } }
}

/* ---------- The star finds north: the logo in the "Be Wise Apps" button turns once per visit ---------- */
@media (prefers-reduced-motion: no-preference){
  .bwp-settle{ animation:bwpSettle 1.25s cubic-bezier(.2,.9,.25,1.15) .35s both; transform-origin:50% 50%; }
  @keyframes bwpSettle{ 0%{ transform:rotate(-150deg); } 70%{ transform:rotate(9deg); } 100%{ transform:rotate(0); } }
}

/* ---------- Section marks: the short coloured dash becomes a small four-point star
   (still in each app's own colour, so every app keeps its identifying mark) ---------- */
.eyebrow-rule::before, .eyebrow::before, .kicker::before, .hero-badge::before, .section-lbl::before, .st-lbl2::before,
h2.group-h::before, .related h2::before, section.qas > h2::before, .crumbs::before, .topnav ~ main .cat-lbl::before,
header.site ~ main .group-h::before, .toc h2::before, main.wrap > h2::before, .ct .ct-kicker::before,
.faq-group-title::before, .home-suggest-label::before, .topic-sources-label::before, .advertise-contact-label::before{
  width:11px !important; height:11px !important; border-radius:0 !important; box-shadow:none !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8,0 10,6 16,8 10,10 8,16 6,10 0,8 6,6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8,0 10,6 16,8 10,10 8,16 6,10 0,8 6,6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Cards that are links: a small lift and the coral north line drawing across ---------- */
.bwp-card{ transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease; }
.bwp-card{ background-image:linear-gradient(#E4572E,#E4572E); background-repeat:no-repeat; background-position:0 0; background-size:0 2px; }
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .bwp-card{ transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, background-size .35s cubic-bezier(.2,.7,.2,1); }
  .bwp-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(20,33,61,.12); background-size:100% 2px; }
}
@media (hover:hover) and (prefers-reduced-motion: reduce){ .bwp-card:hover{ background-size:100% 2px; } }

/* ---------- Gentle reveal for cards below the first screen (only when scripts run) ---------- */
@media (prefers-reduced-motion: no-preference){
  .bwp-reveal{ opacity:0; transform:translateY(12px); }
  .bwp-reveal.bwp-in{ opacity:1; transform:none; transition:opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:var(--bwp-d, 0s); }
}

/* ---------- Contact pages: the app's own icon beside the heading ---------- */
.cf-app-icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px;
  background:#1B2A4A; color:#FFFFFF; margin-bottom:14px; }
.cf-app-icon svg{ width:24px; height:24px; }

/* ---------- Entry-gate heading mark (replaces the scroll emoji) ---------- */
.bwp-gate-mark{ display:inline-block; width:28px; height:28px; flex-shrink:0; vertical-align:-7px; margin-right:10px; }

@media print{ .bwp-compass{ display:none !important; } .bwp-reveal{ opacity:1 !important; transform:none !important; } }

/* Contact pages: the form card overlaps the navy header, so keep it above the header's compass layer */
header.cf-head.bwp-host ~ main{ position:relative; z-index:1; }

/* Doing Business guide glossaries: on phones the four-column table scrolls sideways inside itself
   instead of pushing the whole page wider than the screen */
@media (max-width:600px){ .dbv-glossary-table{ display:block; max-width:100%; overflow-x:auto; } }

/* ==========================================================================
   v94 (15 October 2026)
   1. The "Be Wise Apps" button looks like a button: filled coral, white bold text,
      a shadow and an arrow, on every page (app top strips, app home heroes,
      guide and contact pages' top bars). Same link, same wording.
   2. Every advertising box ("Advertisement" / "Advertise here" / "Contact us if
      you wish to advertise") stands out: warm tint, solid coral border with a
      thick left edge, a coral "Advertisement" tab and bold links.
   ========================================================================== */

/* ---------- 1. "Be Wise Apps" button ---------- */
:root{ --bw-strip-h:48px; }
.bw-strip{ min-height:48px !important; }
html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn{
  background:#C2461F !important; color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.45) !important; border-radius:999px !important;
  padding:6px 14px 6px 6px !important; min-height:38px; box-sizing:border-box;
  font-weight:700 !important; font-size:14px !important; letter-spacing:.01em;
  box-shadow:0 2px 0 rgba(0,0,0,.18), 0 4px 14px rgba(194,70,31,.38) !important;
  text-decoration:none !important; cursor:pointer; gap:8px;
  transition:background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn img{
  width:26px !important; height:26px !important; border-radius:50%; background:#EFE9DD; box-shadow:0 0 0 1px rgba(255,255,255,.6);
}
html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn::after{
  content:""; width:8px; height:8px; margin-left:2px; flex-shrink:0;
  border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg);
}
html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn:hover{
  background:#A63B19 !important; border-color:#FFFFFF !important;
  box-shadow:0 3px 0 rgba(0,0,0,.2), 0 8px 20px rgba(194,70,31,.45) !important;
}
@media (prefers-reduced-motion: no-preference){
  html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn:hover{ transform:translateY(-1px); }
  html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn:active{ transform:translateY(1px); }
}
html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn:focus-visible{ outline:3px solid #F4A58C !important; outline-offset:2px; background:#A63B19 !important; }
/* On light headers the white edge is not needed */
html body a.bw-appsbtn.bw-appsbtn.bw-on-light:not(.hero *){ border-color:#A63B19 !important; }
@media (max-width:480px){
  html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn{ font-size:13.5px !important; min-height:36px; padding:5px 12px 5px 5px !important; }
  html body a.bw-appsbtn.bw-appsbtn.bw-appsbtn img{ width:24px !important; height:24px !important; }
}

/* ---------- 2. Advertising boxes ---------- */
html body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta){
  background:#FFF3EC !important;
  border:2px solid #E4572E !important; border-left-width:6px !important; border-radius:8px !important;
  box-shadow:0 6px 18px rgba(228,87,46,.18) !important;
  color:#3B2A22 !important; opacity:1 !important;
}
html body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta) a{
  color:#A63B19 !important; font-weight:700 !important;
  text-decoration:underline !important; text-underline-offset:3px; text-decoration-thickness:1.5px;
}
html body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta) a:hover{ color:#7A2A10 !important; }
html body :is(.bw-spot, .bw-spot-banner, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta) strong{ color:#1B2A4A !important; }
/* The "Advertisement" tab */
html body :is(.bw-spot, .bw-spot-banner) > strong:first-child,
html body .bw-spot-label, html body .dealer-spot > .lbl{
  display:inline-block !important; width:auto; background:#C2461F !important; color:#FFFFFF !important;
  border:0 !important; border-radius:999px !important; padding:3px 10px !important;
  font-size:11px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important;
  line-height:1.3 !important; margin-right:8px; margin-bottom:4px; vertical-align:middle;
}
/* Filled buttons inside an advertising box stay filled */
html body :is(.bw-spot, .bw-spot-banner, .dealer-spot, .advertise-cta, .avail-slot:has(> .cbtn)) :is(.btn, .bw-spot-cta, button){
  background:#C2461F !important; color:#FFFFFF !important; border-color:#C2461F !important; font-weight:700 !important;
  text-decoration:none !important;
}
html body :is(.bw-spot, .bw-spot-banner, .dealer-spot, .advertise-cta, .avail-slot:has(> .cbtn)) :is(.btn, .bw-spot-cta, button):hover{ background:#A63B19 !important; border-color:#A63B19 !important; }
/* The thin advert strip on the EV pages gets a little air around the box */
html body .bw-spot-wrap > .bw-spot{ margin-top:10px !important; margin-bottom:10px !important; }

/* Dark theme (apps with a light/dark switch) */
:root[data-theme="dark"] body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta){
  background:#3A2119 !important; border-color:#F07A55 !important; color:#F6E7E0 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.35) !important;
}
:root[data-theme="dark"] body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta) a{ color:#FFB59C !important; }
:root[data-theme="dark"] body :is(.bw-spot, .bw-spot-banner, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta) strong{ color:#FFFFFF !important; }
@media print{ html body :is(.bw-spot, .bw-spot-banner, .chat-spot, .dealer-spot, .adslot, .avail-slot:has(> .cbtn), .advertise-cta){ box-shadow:none !important; } }