/* ==========================================================================
   WhatsApp CTA identity — site-wide, systematic (2026-09-21).

   Owner rule: every WhatsApp button uses WhatsApp's colours, WhatsApp's own
   (system-UI) typeface so it stands out from the site's Roobert/Butler voice,
   and always carries the WhatsApp glyph to the LEFT of the label.

   Mechanism: everything here lives in the cascade layer "jt-whatsapp" and is
   declared !important. Important declarations inside a layer beat important
   declarations outside any layer, whatever their specificity — so this sheet
   wins over style.css, the article-base bundles and the per-post inline
   patches without a specificity race. To change a colour edit the --jt-wa-*
   tokens in the :root block below (or the dark-surface map) or --jt-wa-font;
   to switch the whole system off: add_filter( 'jt_wa_cta_active', '__return_false' ).

   THE RULE: every WhatsApp button on the site is this default green one.
   Never restyle a WhatsApp button in a module/page sheet. A wa.me link gets
   it automatically; a button WITHOUT a wa.me href (a <button>, a link to
   the lead form) opts in with class "jt-wa-btn".

   What it does NOT touch: each family's shape, padding, display and size.
   Non-button WhatsApp anchors (hero-slide / board-card wrappers, the large
   phone-number facts, the sticky bar's number) are excluded by the :not()
   list below; footer text-menu links (.footer-box ul.menu — NOT .widget-wrap, the
   masthead nav is a widget too) get the text variant instead.
   Colour (2026-09-24, owner decision «best option for WhatsApp green on light»,
   seo-fixes-output/20260923-post-header-theme/04-wa-options.md Option 4): ONE
   identity whose green follows the SURFACE it sits on —
     light surfaces (the default)  #188842 fill · hover #147237 · focus ring #075E54
                                   (#25D366's own hue/saturation, the lightest AA
                                   value for the white 14px/600 label: 4.53:1; the
                                   block separates ≥3.4:1 from every light ground)
     dark surfaces (the map below) #25D366 fill · hover #1DA851 · focus ring #fff
                                   (#0B2D20 label/glyph: 7.51:1 default, 4.80:1 hover)
   Owner approval 2026-10-05 supersedes the earlier white-on-bright-green
   exception: dark surfaces use the ink label/glyph; light surfaces keep white.
   The typeface, button geometry and contact routes are unchanged. The values
   live HERE, unlayered, so they take effect on every page at once (style.css
   :root is served inside per-page bundles and keeps the previous #25D366 set as
   the fallback that applies when this sheet is switched off). A surface that is
   dark but missing from the map gets the deep green: the label still passes AA.
   New dark templates opt in with class "jt-wa-on-dark".
   ========================================================================== */

/* ---- the colour tokens (unlayered: they must beat style.css :root) ------ */
:root{
	--jt-wa-green:#25D366;               /* WhatsApp Green, the brand primitive: dark surfaces */
	--jt-wa-green-deep:#188842;          /* #25D366 at HSL 142°/70%, darkened to the lightest AA-with-white value (4.53:1) */
	--jt-wa-bg:var(--jt-wa-green-deep);  /* default = a light surface */
	--jt-wa-bg-hover:#147237;            /* white 6.01:1 */
	--jt-wa-fg:#ffffff;
	--jt-wa-focus:#075E54;               /* 5.76–7.67:1 on the light grounds */
}

@layer jt-whatsapp {

	/* ---- dark surfaces re-point the tokens (never paint) ------------------ */
	/* Zero specificity (:where) and custom properties only: a container's value
	   is inherited by every WhatsApp anchor inside it, and no other sheet sets
	   --jt-wa-* on these containers, so the identity rules below stay the only
	   painters. Keyed on the theme's own dark-surface signals: body.fg-wh (the
	   white masthead mark = a transparent masthead over a dark hero; /artigos/ is
	   fg-wh but draws a solid light masthead bar), the open menu's black panel
	   (body.fullb), explicit dark variants (the inline #242329 article CTAs, the
	   non-boutique modern CTA board, three legacy inline-styled dark / teal
	   widgets found by the 2026-09-24 census, two page-specific dark
	   re-skins; fix round 1, 2026-09-24: the dark teal gradient widgets of the
	   legacy posts — their inline gradients come out of the render-time palette
	   remap (inc-brand-palette-remap.php) as the 13 start colours below, every
	   stop at WCAG luminance ≤ 0.30, i.e. darker than the point where #25D366
	   separates from the ground better than #188842; plus the two class-painted
	   dark panels .cta-box (posts 2729, 2884) and .clinic-card (30919), whose
	   only uses are those posts' inline-app CSS. The light teal variants
	   (#f8f9f9, #e8fbf9, #f7fdfd, #e6faf8, #f3f8f7 starts) are deliberately
	   absent — re-run seo-fixes-output/20260923-post-header-theme/impl/
	   stage5-fix-round1/tools/wa-grounds-scan.py after adding legacy widgets), the
	   post header's tone/ground classes (the claro header keeps the ink skin's
	   .jt-ah--ink, hence :not(.jt-ah--t-claro); its answer band continues the
	   header's ground, the partner band is always dark). The floating bubble
	   (a fixed <button>, style.css .whatsapp-button__trigger) cannot inherit from
	   the surface it floats over: lib/js/whatsapp-surface.js reads --jt-wa-bg on
	   the element under its centre (this map, so one source of truth) and puts
	   .jt-wa-on-dark on the bubble while that surface is dark (owner decision 4:
	   the bubble follows its surface; default deep on light pages). */
	:where(
		.jt-wa-on-dark,
		body.fg-wh:not(.artigos-index-page) .site-header,
		body.jt-sys--hero-dark.artigos-index-page .site-header, /* 2026-09-28 inner-pages system: /artigos/ masthead over the verde-2 hero */
		body.jt-category-swiss-archive.page-id-3756 .site-header, /* /beleza/ swiss masthead is dark with the layer off */
		body.fullb .site-header,
		body.fg-wh .entry-header.hero,
		.contato-modern-page .entry-header.hero, .page-id-4698 .entry-header.hero, .page-id-11633 .entry-header.hero,
		header.jt-ah.jt-ah--ink:not(.jt-ah--t-claro),
		body:is(.jt-ah--g-deep, .jt-ah--g-preto, .jt-ah--g-verde) .jt-eb-open--answer,
		.jt-eb-open--cards, .jt-eb-band--verde:not(.jt-eb-open--answer), .jt-eb-closer,
		.jt-article-cta.jt-dedup-cta, .jt-article-cta.jt-focused-qa-cta, .jt-article-cta[style*="#242329"], .jt-next20-cta,
		.jt-modern-cta:not(.jt-modern-boutique),
		.sec-1, .jt-closer, #jt-wabar, .b56-para,
		.jt-clinic-map__panel, .v7-panel-green, .tax-archive-guide .tax-guide-side, /* 2026-09-28: only the guide's count panel is dark */
		.jt-lh-hero, .jt-lh .band.closer, .jt-lh .band--k,
		body.jt-sys--hero-dark .entry-header.hero, /* 2026-09-27 inner-pages system: verde-2 type-only heroes (lib/jt-system.php) */
		body.postid-4118 .entry-content > .wp-block-group.alignfull,
		[style*="background:#202321"], [style*="background-color: #1b8f83"], [style*="background: #29413e"],
		[style*="gradient(135deg, #113532"], [style*="gradient(135deg, #16756b"], [style*="gradient(135deg, #173c38"], [style*="gradient(135deg, #184743"],
		[style*="gradient(135deg, #1a7a70"], [style*="gradient(135deg, #1c6b63"], [style*="gradient(135deg, #1d847a"], [style*="gradient(135deg, #1f8379"],
		[style*="gradient(135deg, #20625b"], [style*="gradient(135deg, #227d74"], [style*="gradient(135deg, #239589"], [style*="gradient(135deg, #26958a"],
		[style*="gradient(135deg, #29413e"],
		.cta-box, .clinic-card,
		.footer-box
	){
		--jt-wa-bg:var(--jt-wa-green);
		--jt-wa-bg-hover:#1DA851;
		--jt-wa-fg:#0B2D20;
		--jt-wa-focus:#ffffff;
	}

	/* Explicit light islands inside a dark surface keep the approved light identity.
	   Reusable C01 and C02's action inset opt in; button painters remain unchanged. */
	:where(.jt-wa-on-light){
		--jt-wa-bg:var(--jt-wa-green-deep);
		--jt-wa-bg-hover:#147237;
		--jt-wa-fg:#ffffff;
		--jt-wa-focus:#075E54;
	}

	/* ---- the typeface token ----------------------------------------------- */
	/* Lives HERE (not in style.css) on purpose: style.css is served as a
	   per-page bundle built from a manifest, so a token added there is invisible
	   until the manifests are rebuilt. The colour tokens moved here too
	   (2026-09-24, unlayered :root above); style.css :root keeps the previous
	   values only as the switched-off fallback.
	   WhatsApp's own UI stack: SF Pro on Apple, Roboto on Android, Segoe UI on
	   Windows — deliberately NOT Roobert, so the button stands out. */
	:root{
		--jt-wa-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	}

	/* Prominent booking actions on the four main inner pages. Compact bars and
	   article/grid actions retain the base size; geometry stays with each host. */
	body.jt-sobre-v07 a.v7-pill[href*="wa.me/"],
	body.contato-modern-page :is(a.jt-modern-hero-cta-primary,a.jt-ct-pill--verde,a.jt-clinic-map__action--primary)[href*="wa.me/"],
	body.jt-sys:is(.jt-sys--clinic,.jt-sys--treatments) :is(a.jt-modern-hero-cta-primary,.jt-sys-closer__act a.butt,.jt-focused-qa-cta a)[href*="wa.me/"]{
		font-size:16px!important;
	}

	/* ---- selector vocabulary --------------------------------------------- */
	/* A WhatsApp button = any wa.me / whatsapp.com anchor that is not one of
	   the excluded non-button contexts. Keep the exclusion list short and
	   explicit; add to it, never widen the positive selector. The list sits
	   inside :where() so it adds NO specificity — every button rule stays at
	   (0,1,1) and the :has() glyph-suppression rule below (0,2,1) can beat it. */
	a[href*="wa.me/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a)),
	a[href*="whatsapp.com/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a)),
	.jt-wa-btn{
		background-color:var(--jt-wa-bg)!important;
		background-image:none!important;
		color:var(--jt-wa-fg)!important;
		border-color:var(--jt-wa-bg)!important;
		font-family:var(--jt-wa-font)!important;
		font-weight:600!important;
		font-size:14px!important; /* 14px, not 15: the narrowest hosts (190px grid cells on /artigos/, 2-col hero grids at 390px) wrap a 15px label */
		line-height:1.2!important;
		letter-spacing:0!important;
		text-transform:none!important;
		text-decoration:none!important;
		-webkit-font-smoothing:antialiased;
		text-shadow:none!important;
	}
	a[href*="wa.me/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a)) *,
	a[href*="whatsapp.com/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a)) *,
	.jt-wa-btn *{
		color:inherit!important;
		font-family:inherit!important;
		font-weight:inherit!important;
		text-transform:inherit!important;
		letter-spacing:inherit!important;
	}
	a[href*="wa.me/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a)):hover,
	a[href*="wa.me/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a)):focus,
	a[href*="whatsapp.com/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a)):hover,
	a[href*="whatsapp.com/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a)):focus,
	.jt-wa-btn:hover,
	.jt-wa-btn:focus{
		background-color:var(--jt-wa-bg-hover)!important;
		border-color:var(--jt-wa-bg-hover)!important;
		color:var(--jt-wa-fg)!important;
	}
	a[href*="wa.me/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a)):focus-visible,
	a[href*="whatsapp.com/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a)):focus-visible,
	.jt-wa-btn:focus-visible,
	.whatsapp-button.whatsapp-button__trigger:focus-visible{
		outline:3px solid var(--jt-wa-focus,#075E54)!important; /* white on the dark surfaces (map above) */
		outline-offset:2px!important;
	}

	/* ---- the glyph, always left of the label ------------------------------ */
	/* Inline-block so it works whatever the anchor's display (flex, block,
	   inline-flex, inline). Position/transform/background are reset because
	   .arr-butt:before is a legacy absolutely-positioned arrow sprite. */
	a[href*="wa.me/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a))::before,
	a[href*="whatsapp.com/"]:where(:not(.jt-wa-plain):not(.b56-slide):not(.b22-board-item):not(.jt-wabar__num):not(.b56-contact-strip__item):not(.whatsapp-button__trigger):not(:is(.val, .fv, .jt-ct-val, dd, .footer-box ul.menu) a))::before,
	.jt-wa-btn::before,
	.whatsapp-button.whatsapp-button__trigger::before,
	.footer-box ul.menu a[href*="wa.me/"]::before{
		content:""!important;
		display:inline-block!important;
		flex:0 0 auto!important;
		width:1.1em!important;
		height:1.1em!important;
		margin:0 .45em 0 0!important;
		padding:0!important;
		vertical-align:-.2em!important;
		position:static!important;
		top:auto!important;
		left:auto!important;
		transform:none!important;
		opacity:1!important;
		border:0!important;
		font-size:inherit!important;
		background-color:currentColor!important;
		background-image:none!important;
		-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center/contain no-repeat!important;
		mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center/contain no-repeat!important;
	}
	/* The floating button's legacy bitmap was forced white. Use the same central
	   currentColor mask so its glyph follows the surface foreground. The button's
	   aria-label and 26px icon geometry remain intact; no handler changes. */
	.whatsapp-button.whatsapp-button__trigger::before{
		width:26px!important;
		height:26px!important;
		margin:0!important;
	}
	.whatsapp-button.whatsapp-button__trigger img{
		display:none!important;
	}

	/* A button that already carries the glyph as an <img>/<svg> (article-header
	   pills, floating trigger) must not get a second one. */
	a[href*="wa.me/"]:has(img, svg, .icon-whatsapp)::before,
	a[href*="whatsapp.com/"]:has(img, svg, .icon-whatsapp)::before{
		content:none!important;
		display:none!important;
	}

	/* ---- text variant: footer menu links (no fill, green label + glyph) --- */
	.footer-box ul.menu a[href*="wa.me/"]{
		color:var(--jt-wa-bg)!important;
		font-family:var(--jt-wa-font)!important;
		font-weight:600!important;
		text-decoration:none!important;
	}
	.footer-box ul.menu a[href*="wa.me/"]:hover,
	.footer-box ul.menu a[href*="wa.me/"]:focus{
		color:#ffffff!important; /* unfilled text links stay legible on the dark footer */
	}

	/* ---- masthead pill: the fill lives on the <li>, keep it in sync ------- */
	.genesis-nav-menu .menu-r{
		background-color:var(--jt-wa-bg)!important;
		border-color:var(--jt-wa-bg)!important;
	}
	/* The anchor also carries the fill: match its parent pill to avoid square protrusions. */
	.genesis-nav-menu .menu-r > a{ border-radius:inherit!important; }
	.genesis-nav-menu .menu-r:hover{
		background-color:var(--jt-wa-bg-hover)!important;
	}

	@media print{
		a[href*="wa.me/"]::before{ display:none!important; }
	}
}


/* Floating contact placement: stable right-edge docks avoid active controls; templates that
   replace the circle with their own contact bar retain their display rules.
   No new paint tokens: the existing surface map still owns its colour. */
/* Geometry is shared with the native article index's reserved interaction lane.
   The actual safe edge, diameter and focus gap have one owner; no page padding. */
:root {
  --jt-wa-float-size:56px;
  --jt-wa-float-edge:20px;
  --jt-wa-float-gap:8px;
  --jt-wa-float-clearance:calc(var(--jt-wa-float-size) + max(var(--jt-wa-float-edge), env(safe-area-inset-right, 0px)) + var(--jt-wa-float-gap));
}
@media (max-width:1023px) {
  :root { --jt-wa-float-size:48px; --jt-wa-float-edge:8px; }
}
@layer jt-whatsapp {
  .whatsapp-button.whatsapp-button__trigger {
    box-sizing:border-box!important;
    width:var(--jt-wa-float-size)!important;
    height:var(--jt-wa-float-size)!important;
    min-width:0!important;
    padding:12px!important;
    border-radius:50%!important;
    /* Legacy transition:all must not animate placement or corrupt measured insets. */
    transition-property:background-color, color, box-shadow, opacity, visibility!important;
    right:max(var(--jt-wa-float-edge), env(safe-area-inset-right, 0px))!important;
    bottom:calc(max(var(--jt-wa-float-edge), env(safe-area-inset-bottom, 0px)) + var(--jt-wa-obstacle, 0px))!important;
  }
  .whatsapp-button.whatsapp-button__trigger.jt-wa-placement-hidden {
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  @media (max-width:1023px) {
    .whatsapp-button.whatsapp-button__trigger {
      padding:10px!important;
    }
  }
}
/* Anchor/focus navigation leaves a readable landing zone above the circle. */
html:has(.whatsapp-button__trigger) { scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }