/* =====================================================================
   zz-secondary-cta-hover.css  — QA batch #12: consistent OUTLINE-CTA look
   ---------------------------------------------------------------------
   Sibling of zz-primary-cta-hover.css (that file fixes the FILLED orange
   `.has-wawi-gradient` CTA). This file fixes the OUTLINE / secondary CTA —
   the `.product-button-group__button--with-icon` variant WITHOUT
   `.has-wawi-gradient` (e.g. "DISCOVER KI-PORTFOLIO", "DISCOVER DEALAVO",
   "DISCOVER GREYHOUND", "DISCOVER ALL FEATURES").

   Prototype = the DISCOVER KI-PORTFOLIO button on /en/ai/. Across pages
   these buttons are inconsistent today:
     - border thickness varies (hero = 2px, KI-portfolio cards = 0px/none);
     - hover is all over the place — most fall through to the base rule
         .product-button-group__button--with-icon:hover{background:#0b1b45;color:#fff}
       which fills the pill NAVY and turns the label WHITE (wrong), a few
       only apply filter:brightness(.95) (barely visible), a couple already
       do white. "Manche haben keinen :hover, manche einen falschen
       Hintergrund, dicker Rahmen und andere haben gar kein :hover."

   ONE behaviour everywhere, matching the prototype:
     - DEFAULT: thin 1px JTL Dark-Blue (#0b1b45) outline, transparent fill,
       Dark-Blue label  (border made LESS thick + given to the border-less ones).
     - HOVER : change ONLY the background to WHITE. Keep the Dark-Blue label
       and the Dark-Blue border; kill the navy-fill / white-text / brightness
       filter that leaks in from the base + hero rules.

   WHY the class is repeated ×3: the offenders are `!important` and highly
   specific — e.g.
     body:not(.home) section.hero-product-section .product-buttons-group
       a.product-button-group__button--with-icon{border:2px …!important}   (0,4,3)
   Repeating the marker class raises this rule to (0,6,1) so it outranks
   them, and the file is named `zz-` so the loader enqueues it LAST.
   `.has-wawi-gradient` (filled primary), `.is-inverted` and `.is-white`
   (their own correct treatments) are excluded on purpose. */

/* ---- DEFAULT: ONE thin, uniform Dark-Blue outline ------------------------
   The base widget rule draws a SECOND, inner border via an inset shadow:
     .product-button-group__button--with-icon{box-shadow:0 0 0 2px #0b1b45 inset}
   stacked on top of the hero's real 2px `border` this reads as a doubled
   ~4px outline; on the portfolio cards (border:0) the inset shadow IS the
   only outline. Kill the shadow and keep a single 1px real border so every
   instance shows exactly one thin line. */
a.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white),
button.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white),
a.button-group__button--with-icon.button-group__button--with-icon.button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white),
button.button-group__button--with-icon.button-group__button--with-icon.button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white) {
    border: 1px solid #0b1b45 !important;
    box-shadow: none !important;
}

/* ---- HOVER / FOCUS: fill WHITE only, keep Dark-Blue text + border -------- */
a.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover,
a.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):focus,
button.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover,
a.button-group__button--with-icon.button-group__button--with-icon.button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover,
a.button-group__button--with-icon.button-group__button--with-icon.button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):focus {
    background: #ffffff !important;
    background-image: none !important;
    border-color: #0b1b45 !important;
    color: #0b1b45 !important;
    filter: none !important;
    box-shadow: none !important;
}

/* keep the inner label / icon Dark-Blue when the colour is set on a child
   (the base rule sets span/i to #fff on hover — undo that) */
a.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover .product-button-group__button--with-icon__text,
a.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover span,
a.product-button-group__button--with-icon.product-button-group__button--with-icon.product-button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover i,
a.button-group__button--with-icon.button-group__button--with-icon.button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover span,
a.button-group__button--with-icon.button-group__button--with-icon.button-group__button--with-icon:not(.has-wawi-gradient):not(.is-inverted):not(.is-white):hover i {
    color: #0b1b45 !important;
}