/* ============================================================
   qr.css — WhatsApp entry points. MOBILE FIRST.
   Loaded after style.css; style.css itself is not modified.

   A visitor must be able to reach WhatsApp from ANY scroll
   position, so the same wa.me link appears five ways:

     .nav-wa    — sticky nav, top of every page (outside the
                  mobile hamburger, so phones see it too)
     .qr-hero   — above the fold, under the hero copy
     .wa-band   — a full-width band at the middle of the page
     .qr-cta    — inside .cta-band, under the buttons
     .wa-dock   — fixed bottom-right, visible at all times

   Every QR is wrapped in the link it encodes, so a desktop
   visitor scans it and a phone visitor just taps it.

   Colour note: the cards follow the site palette (--gold is
   the brand blue). The floating dock deliberately uses real
   WhatsApp green — that bubble is a recognised affordance and
   is the one element that must be identified at a glance.
   ============================================================ */

:root{
  --wa-green:#25D366;
  --wa-green-deep:#128C7E;
}

/* ============================================================
   1. Shared QR card (hero + final CTA)
   ============================================================ */
.qr-card{
  display:flex; align-items:center; gap:16px;
  background:#FFFFFF;
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:14px 18px;
  box-shadow:0 6px 18px rgba(11,37,69,0.06);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.qr-card:hover, .qr-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(11,37,69,0.10);
  border-color:var(--gold);
}
.qr-card img{
  display:block; width:116px; height:116px; flex:0 0 auto;
  border-radius:8px;
}
.qr-copy{text-align:left;}
.qr-copy .qr-kicker{
  display:flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--gold);
  margin:0 0 6px;
}
.qr-copy .qr-kicker svg{width:14px; height:14px; flex:0 0 auto;}
.qr-copy strong{
  display:block; font-size:15px; font-weight:600;
  color:var(--text); line-height:1.3; margin-bottom:4px;
}
.qr-copy span{
  display:block; font-size:12.5px; color:var(--text-mute); line-height:1.45;
}

/* --- The standing hero QR ----------------------------------------------
   On a phone this sits under the hero copy. On desktop it moves into the
   hero's right-hand column, which the inner pages leave empty — so the code
   is on screen the moment the page opens, without a click and without a
   fixed panel covering the copy. Measured: a fixed 186px card only clears
   the 1180px content column above ~1600px, so the right side is used here,
   in the layout, where it can never overlap anything.

   index.html is the exception and carries no hero code: its hero is
   centre-aligned and single column, so a card in the right rail reads as
   lopsided rather than deliberate. There, the nav button, the mid-page
   band, the final CTA and the floating pill cover it instead.
   ----------------------------------------------------------------------- */
.qr-hero{margin:26px 0 0; max-width:420px;}
.qr-hero .qr-card{background:rgba(255,255,255,0.92);}

@media (min-width:901px){
  /* Two columns: copy on the left, the code standing on the right. */
  .hero-row{display:flex; align-items:center; gap:52px;}
  .hero-row > .page-hero-copy{flex:1 1 auto; min-width:0;}

  .qr-hero{flex:0 0 auto; margin:0; max-width:none; width:212px;}
  /* Upright card: code above, label beneath. */
  .qr-hero .qr-card{
    flex-direction:column; text-align:center; gap:12px; padding:18px;
    background:rgba(255,255,255,0.96);
  }
  .qr-hero .qr-card img{width:172px; height:172px;}
  .qr-hero .qr-copy{text-align:center;}
  .qr-hero .qr-copy .qr-kicker{justify-content:center; margin-bottom:5px;}
  .qr-hero .qr-copy strong{font-size:14px;}
  .qr-hero .qr-copy span{font-size:11.5px;}
}

/* --- In the final CTA band --- */
.qr-cta{
  display:flex; justify-content:center;
  margin:28px auto 0; max-width:440px;
}
.qr-cta .qr-card{width:100%;}

/* --- Small phones: stack so the QR stays big enough to scan --- */
@media (max-width:420px){
  .qr-card{flex-direction:column; text-align:center; gap:12px; padding:16px;}
  .qr-card img{width:150px; height:150px;}
  .qr-copy{text-align:center;}
  .qr-copy .qr-kicker{justify-content:center;}
}

@media (min-width:901px){
  .qr-cta{max-width:500px;}
  .qr-cta .qr-card{padding:16px 20px; gap:18px;}
  .qr-cta .qr-card img{width:152px; height:152px;}
  .qr-hero{margin-top:30px;}
}

/* ============================================================
   2. Mid-page WhatsApp band
   ============================================================ */
.wa-band{
  background:linear-gradient(135deg, #0B2545 0%, #16356B 100%);
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:52px 0;
  position:relative; overflow:hidden;
}
.wa-band::after{
  content:""; position:absolute; top:-140px; right:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,211,102,0.18) 0%, transparent 68%);
  pointer-events:none;
}
.wa-band-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:26px; text-align:center;
}
.wa-band-qr{
  display:block; flex:0 0 auto;
  background:#fff; padding:12px; border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,0.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-band-qr:hover, .wa-band-qr:focus-visible{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 24px 52px rgba(0,0,0,0.34);
}
.wa-band-qr img{display:block; width:164px; height:164px; border-radius:8px;}
.wa-band-copy{max-width:56ch;}
.wa-band-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--wa-green);
  margin:0 0 14px;
}
.wa-band-kicker svg{width:16px; height:16px;}
.wa-band h2{
  color:#fff; font-size:clamp(23px, 3.2vw, 34px);
  line-height:1.2; margin:0 0 14px; font-weight:600;
}
.wa-band p.wa-band-lede{
  color:rgba(255,255,255,0.74); font-size:15.5px;
  line-height:1.6; margin:0 0 24px;
}
.wa-band-actions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center;}

/* WhatsApp-green button, used in the band and the dock panel */
.btn-wa{
  background:var(--wa-green); color:#07301A !important;
  border-color:var(--wa-green);
  box-shadow:0 10px 24px rgba(37,211,102,0.28);
}
.btn-wa:hover, .btn-wa:focus-visible{
  background:#1fbe5b; border-color:#1fbe5b;
  transform:translateY(-1px);
}
.btn-wa svg{width:16px; height:16px; flex:0 0 auto;}
.wa-band .btn-ghost{
  background:transparent; color:#fff !important;
  border-color:rgba(255,255,255,0.32);
}
.wa-band .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.08);}

@media (min-width:641px){
  .wa-band{padding:64px 0;}
}
@media (min-width:901px){
  .wa-band{padding:72px 0;}
  .wa-band-inner{
    flex-direction:row; text-align:left; gap:44px;
    align-items:center; justify-content:center;
  }
  .wa-band-qr img{width:188px; height:188px;}
  .wa-band-kicker{margin-bottom:12px;}
  .wa-band-actions{justify-content:flex-start;}
}

/* ============================================================
   3. Nav WhatsApp button — sits OUTSIDE .nav-links, because
      style.css hides .nav-links behind the hamburger below
      900px and this has to stay reachable on a phone.
   ============================================================ */
.nav-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto;}

/* Nav row fit. The brand logo is capped mobile-first in each page's own style
   block (index.html already did this; the inner pages now match). These two
   keep the row from overflowing once the WhatsApp action is added to it. */
@media (max-width:900px){
  .nav-inner{gap:10px;}
  .brand{min-width:0;}
}
.nav-wa{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 14px;
  border:1px solid var(--wa-green); border-radius:100px;
  background:rgba(37,211,102,0.10);
  color:var(--wa-green-deep); text-decoration:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  line-height:1; white-space:nowrap;
  transition:background .15s, transform .15s, color .15s;
}
.nav-wa:hover, .nav-wa:focus-visible{
  background:var(--wa-green); color:#07301A; transform:translateY(-1px);
}
.nav-wa svg{width:16px; height:16px; flex:0 0 auto;}
.nav-wa .nav-wa-label{display:none;}
@media (min-width:561px){
  .nav-wa .nav-wa-label{display:inline;}
}

/* ============================================================
   4. Floating dock — the safety net. Fixed bottom-right, so
      WhatsApp stays one tap away wherever the visitor is.
      Phone  : the pill links straight to wa.me.
      Desktop: the pill opens a QR panel (you cannot scan a
               code with the same phone you are holding).
      With JS off the pill is a plain link and still works.
   ============================================================ */
.wa-dock{
  position:fixed; right:16px; bottom:16px; z-index:90;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.wa-dock[hidden]{display:none;}
.wa-dock-btn-wrap{position:relative;}

.wa-dock-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--wa-green); color:#07301A;
  border:none; border-radius:100px; cursor:pointer;
  padding:13px 18px; min-height:52px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  text-decoration:none; line-height:1; white-space:nowrap;
  box-shadow:0 10px 26px rgba(7,48,26,0.30);
  transition:transform .18s ease, box-shadow .18s ease, background .15s;
}
.wa-dock-btn:hover, .wa-dock-btn:focus-visible{
  background:#1fbe5b; transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(7,48,26,0.38);
}
.wa-dock-btn svg{width:24px; height:24px; flex:0 0 auto;}
.wa-dock-btn .wa-dock-label{display:none;}
@media (min-width:561px){
  .wa-dock{right:24px; bottom:24px;}
  .wa-dock-btn .wa-dock-label{display:inline;}
}

/* Two gentle rings on first load, then never again — enough to
   catch the eye without becoming a blinking advert. */
@keyframes waRing{
  0%{box-shadow:0 10px 26px rgba(7,48,26,0.30), 0 0 0 0 rgba(37,211,102,0.55);}
  70%{box-shadow:0 10px 26px rgba(7,48,26,0.30), 0 0 0 16px rgba(37,211,102,0);}
  100%{box-shadow:0 10px 26px rgba(7,48,26,0.30), 0 0 0 0 rgba(37,211,102,0);}
}
.wa-dock-btn.is-ringing{animation:waRing 1.9s ease-out 2;}

/* No dismiss control, by design: this pill is the safety net for visitors
   who never reach the foot of the page. An earlier version had a small x in
   the corner of the pill — it sat exactly where the cursor travels to click
   the pill, and one stray click hid the CTA for the whole tab. */

/* --- The dock's QR panel ------------------------------------------------
   Opens on click rather than standing open: measured against the 1180px
   content column, a permanently open 186px card clears the copy only above
   ~1600px — at 1280px it would cover 124px of body text and at 1024px 155px.
   The standing code lives in the hero instead; this is the on-demand copy
   for visitors who are already halfway down the page.
   ----------------------------------------------------------------------- */
.wa-dock-panel{
  display:none;
  width:220px; padding:16px;
  background:#fff; border:1px solid var(--line-soft); border-radius:18px;
  box-shadow:0 22px 50px rgba(11,37,69,0.22);
  text-align:center;
}
.wa-dock.is-open .wa-dock-panel{display:block; animation:waPanelIn .18s ease-out;}
@keyframes waPanelIn{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:translateY(0);}}
.wa-dock-panel img{
  display:block; width:172px; height:172px; margin:0 auto 11px; border-radius:8px;
}
.wa-dock-panel strong{
  display:block; font-size:13.5px; font-weight:600; color:var(--text);
  line-height:1.3; margin-bottom:4px;
}
.wa-dock-panel p{
  font-size:11.5px; color:var(--text-mute); line-height:1.4; margin:0;
}

/* A phone cannot scan its own screen, so the panel is desktop-only. */
@media (max-width:560px){
  .wa-dock-panel{display:none !important;}
}

@media (prefers-reduced-motion:reduce){
  .wa-dock-btn.is-ringing{animation:none;}
  .wa-dock.is-open .wa-dock-panel{animation:none;}
  .qr-card, .wa-band-qr, .wa-dock-btn{transition:none;}
}