/*
 * Framer button hover shim.
 *
 * Framer's design system renders "bordered buttons" using a :after pseudo-element
 * whose border-width and border-color come from CSS custom properties set inline
 * on the anchor:
 *
 *   <a data-border="true" style="--border-color:rgba(255,255,255,0.4);--border-top-width:0px;...">
 *
 * In the default state the width is 0 on all sides, so no border renders. The Framer
 * runtime would set non-zero widths and a full-opacity colour on hover (its "Hover"
 * variant in the design tool). We don't ship the runtime — see CLAUDE.md — so we
 * replicate the effect in plain CSS.
 *
 * Inline styles beat normal stylesheet rules, so the overrides below use !important.
 * Transitions go on the :after pseudo because Framer's border lives there.
 */

/* Contact us pill button in the top nav (data-framer-name="contact") */
[data-framer-name="contact"][data-border="true"]::after {
  transition: border-color 0.18s ease-out, border-width 0.18s ease-out;
}

[data-framer-name="contact"][data-border="true"]:hover {
  --border-color: rgb(255, 255, 255) !important;
  --border-top-width: 2px !important;
  --border-right-width: 2px !important;
  --border-bottom-width: 2px !important;
  --border-left-width: 2px !important;
}

/*
 * Nav menu pill buttons (Products / About / News) and any other "on dark"
 * outline pill use rgba(255,255,255,0.4) for the resting border colour. The
 * Framer design variant fades that up to full opacity on hover. Replicate
 * with a plain :hover override on the inline custom property.
 */
[data-framer-name="on dark - outline"][data-border="true"]::after {
  transition: border-color 0.18s ease-out;
}

[data-framer-name="on dark - outline"][data-border="true"]:hover {
  --border-color: rgb(255, 255, 255) !important;
}

/*
 * Product card hover behaviours.
 *
 * Selector: <a data-framer-name="Default" href="/products/{slug}"> — the
 * outer anchor that wraps each product card.
 *
 * Two effects fire on hover, both scoped to descendants so the card
 * itself doesn't move/scale (which would shove the grid around):
 *
 *   1. The product image zooms in slightly. The Image container is
 *      `data-framer-name="Image"` and has rounded corners but doesn't
 *      explicitly clip overflow, so we add overflow:hidden + a transition
 *      on the <img> inside, and scale it on hover.
 *
 *   2. The arrow inside the navy "Arrow Forward Black" circle slides
 *      right a few pixels. The container is `data-framer-name="Arrow
 *      Forward Black"`; the SVG inside is what we translate so the
 *      navy circle stays put and only the white arrow moves.
 */
a[data-framer-name="Default"][href^="/products/"] [data-framer-name="Image"] {
  overflow: hidden;
}

a[data-framer-name="Default"][href^="/products/"] [data-framer-name="Image"] img {
  transition: transform 0.35s ease-out;
  will-change: transform;
}

a[data-framer-name="Default"][href^="/products/"]:hover [data-framer-name="Image"] img {
  transform: scale(1.08);
}

a[data-framer-name="Default"][href^="/products/"] [data-framer-name="Arrow Forward Black"] svg {
  transition: transform 0.22s ease-out;
  will-change: transform;
}

a[data-framer-name="Default"][href^="/products/"]:hover [data-framer-name="Arrow Forward Black"] svg {
  transform: translateX(4px);
}

/*
 * Lighten the navy "Arrow Forward Black" circle when the product card
 * is hovered. The container's resting background is the Selwyn navy
 * rgb(27, 57, 128) set inline; CSS background-color overrides cleanly.
 * Picking a slightly lighter blue keeps brand feel without going pale.
 */
a[data-framer-name="Default"][href^="/products/"] [data-framer-name="Arrow Forward Black"] {
  transition: background-color 0.22s ease-out;
}

a[data-framer-name="Default"][href^="/products/"]:hover [data-framer-name="Arrow Forward Black"] {
  background-color: rgb(86, 132, 220);
}

/*
 * "Arrow Forward White" containers wrap the small arrow next to the
 * "Our products / About / Contact us" CTAs lower on the homepage. The
 * container is a WHITE circle, so the hydrated white arrow is invisible.
 * Re-colour the SVG to Selwyn navy. CSS `fill` overrides the inline
 * `fill="#ffffff"` presentation attribute without needing !important.
 *
 * `Variant 1` (the only other place arrows appear on the homepage) sits
 * inside the dark navy hero/footer area, so its white default is correct
 * and we don't touch it here.
 */
[data-framer-name="Arrow Forward White"] svg {
  fill: rgb(34, 58, 111);
}

/*
 * Slide the arrow right when the parent CTA card is hovered. Same
 * effect as the product cards, but the wrapping anchor here is one
 * of three known hrefs (/products, /about, /contact-us) rather than
 * `/products/<slug>`. Targeting all three keeps the rule narrow.
 */
a[href="/products"] [data-framer-name="Arrow Forward White"] svg,
a[href="/about"] [data-framer-name="Arrow Forward White"] svg,
a[href="/contact-us"] [data-framer-name="Arrow Forward White"] svg {
  transition: transform 0.22s ease-out;
  will-change: transform;
}

a[href="/products"]:hover [data-framer-name="Arrow Forward White"] svg,
a[href="/about"]:hover [data-framer-name="Arrow Forward White"] svg,
a[href="/contact-us"]:hover [data-framer-name="Arrow Forward White"] svg {
  transform: translateX(4px);
}

/*
 * Filter chips on the /products page (Waterproof, Circular, View all,
 * etc.) use `data-framer-name="on light - outline"` with a translucent
 * navy border `rgba(34, 58, 111, 0.32)`. On hover lift the border to
 * full-opacity navy so it reads as the active hover target.
 */
[data-framer-name="on light - outline"][data-border="true"]::after {
  transition: border-color 0.18s ease-out;
}

[data-framer-name="on light - outline"][data-border="true"]:hover {
  --border-color: rgb(34, 58, 111) !important;
}

/*
 * "Make an enquiry" pill button on each product detail page (anchor
 * with data-framer-name="solid" and href="/product-enquiry"). The
 * resting fill is the Selwyn navy token rgb(34, 58, 111) set inline,
 * so the hover override needs !important to win against the inline
 * `background-color` style. Lifts to the same lighter blue used on
 * the product card arrow circle for visual consistency.
 */
a[href="/product-enquiry"] {
  transition: background-color 0.22s ease-out;
}

a[href="/product-enquiry"]:hover {
  background-color: rgb(54, 88, 165) !important;
}