/**
 * Button component (CUBE "Block" layer).
 *
 * A shared `.button` used on <a> elements styled as buttons — following Andy
 * Bell's method (piccalil.li/blog/how-i-build-a-button-component): a
 * configuration block of --button-* custom properties, each defaulting to a
 * theme.json token; variants selected by a `data-button-variant` attribute (the
 * CUBE Exception layer, data-attributes over modifier classes); an accessible,
 * proportionally-scaled base. It lives in the theme rather than a block
 * stylesheet because it's SHARED — both the pad/button block and the nav CTA use
 * it, and a block's own style only loads when that block is present.
 */

.button {
  /* --- Configuration (override per variant below) --- */
  --button-padding: 1rem 1.125rem;
  --button-gap: 0.8125rem;
  --button-bg: var(--wp--preset--color--primary);
  --button-color: var(--wp--preset--color--white);
  --button-accent: var(--wp--preset--color--secondary); /* the left bar */
  --button-accent-width: 4px;
  --button-icon-color: var(--button-color);
  --button-hover-bg: var(--wp--preset--color--secondary);
  --button-hover-color: var(--button-color);
  --button-hover-accent: var(--wp--preset--color--primary);
  --button-hover-icon-color: var(--button-icon-color);
  --button-border-width: 0;
  --button-border-style: solid;
  --button-border-color: transparent;
  --button-radius: 0;
  --button-font-weight: var(--wp--custom--font-weight--semi-bold, 600);
  --button-outline-width: 3px;
  --button-outline-color: var(--wp--preset--color--secondary);

  /* --- Layout & spacing --- */
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap);
  padding: var(--button-padding);
  min-block-size: 2.75rem; /* ~44px minimum hit target */
  box-sizing: border-box;
  width: fit-content;

  /* --- Colour, border, radius (border split so each part is configurable) --- */
  background: var(--button-bg);
  color: var(--button-color);
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  border-inline-start: var(--button-accent-width) solid var(--button-accent);
  border-radius: var(--button-radius);

  /* --- Typography (line-height fixes the a/button UA mismatch) --- */
  text-decoration: none;
  font-weight: var(--button-font-weight);
  line-height: 1.1;

  cursor: pointer;
  transition:
    background-color var(--transition-duration, 380ms) ease,
    border-color var(--transition-duration, 380ms) ease,
    color var(--transition-duration, 380ms) ease;
}

.button:focus-visible {
  background: var(--button-hover-bg);
  color: var(--button-hover-color);
  border-inline-start-color: var(--button-hover-accent);
  --button-icon-color: var(--button-hover-icon-color);
}

/* Only apply hover visuals where hover is a real input capability. */
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background: var(--button-hover-bg);
    color: var(--button-hover-color);
    border-inline-start-color: var(--button-hover-accent);
    --button-icon-color: var(--button-hover-icon-color);
  }
}

/* You MUST provide a focus style. Offset so it sits on the page, visible against
   any button background/state. */
.button:focus-visible {
  outline: var(--button-outline-width) solid var(--button-outline-color);
  outline-offset: 3px;
}

/* Pressed feel. */
.button:active {
  transform: scale(0.99);
}

/* Icon (chevron): sized in cap units (buttons are often capitalised), never
   shrinks, and takes its own colour so it can differ from the label. Uses
   currentColor in the SVG, driven by --button-icon-color. */
.button__icon {
  block-size: var(--button-icon-size, 1.2cap);
  inline-size: auto;
  flex: none;
  color: var(--button-icon-color);
  transition: transform var(--transition-duration, 380ms) ease;
}

.button:focus-visible .button__icon {
  transform: translateX(0.25em);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover .button__icon {
    transform: translateX(0.25em);
  }
}

/* ---- Variants ---- */

/* Primary — blue block, white label + chevron, navy left bar. Hover: navy block,
   blue left bar (label + chevron stay white). Also the nav "Make An Enquiry". */
.button[data-button-variant="primary"] {
  --button-bg: var(--wp--preset--color--primary);
  --button-color: var(--wp--preset--color--white);
  --button-accent: var(--wp--preset--color--secondary);
  --button-icon-color: var(--wp--preset--color--white);
  --button-hover-bg: var(--wp--preset--color--secondary);
  --button-hover-color: var(--wp--preset--color--white);
  --button-hover-accent: var(--wp--preset--color--primary);
  --button-hover-icon-color: var(--wp--preset--color--white);
  --button-outline-color: var(--wp--preset--color--secondary);
}

/* Secondary — light-grey block, navy label, blue left bar + blue chevron. Hover:
   navy block, white label (bar + chevron stay blue). */
.button[data-button-variant="secondary"] {
  --button-bg: var(--wp--preset--color--light-grey);
  --button-color: var(--wp--preset--color--secondary);
  --button-accent: var(--wp--preset--color--primary);
  --button-icon-color: var(--wp--preset--color--primary);
  --button-hover-bg: var(--wp--preset--color--secondary);
  --button-hover-color: var(--wp--preset--color--white);
  --button-hover-accent: var(--wp--preset--color--primary);
  --button-hover-icon-color: var(--wp--preset--color--primary);
  --button-outline-color: var(--wp--preset--color--primary);
}

/* Tertiary — the inverse of primary: navy block, white label + chevron, blue
   left bar. Hover: blue block, navy left bar (label + chevron stay white — the
   same white-on-blue pairing the primary variant uses at rest, so it's already
   a known-legible combination). The left bar flips to navy on hover so it stays
   visible once the background becomes blue. Navy focus ring for contrast on the
   white page. */
.button[data-button-variant="tertiary"] {
  --button-bg: var(--wp--preset--color--secondary);
  --button-color: var(--wp--preset--color--white);
  --button-accent: var(--wp--preset--color--primary);
  --button-icon-color: var(--wp--preset--color--white);
  --button-hover-bg: var(--wp--preset--color--primary);
  --button-hover-color: var(--wp--preset--color--white);
  --button-hover-accent: var(--wp--preset--color--secondary);
  --button-hover-icon-color: var(--wp--preset--color--white);
  --button-outline-color: var(--wp--preset--color--secondary);
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button__icon {
    transition: none;
  }

  .button:active {
    transform: none;
  }

  .button:hover .button__icon,
  .button:focus-visible .button__icon {
    transform: none;
  }
}

/* Windows High Contrast / forced colours: keep a visible edge + focus ring. */
@media (forced-colors: active) {
  .button {
    border: 1px solid;
  }

  .button:focus-visible {
    outline: 2px solid;
  }
}