/**
 * Purific Blocks: shared buttons (one or two call to action buttons).
 *
 * Front end and editor. Registered by blocks.php as the style
 * 'purific-blocks-buttons'. A block that prints buttons with
 * purific_blocks_buttons() (shared/buttons.php) lists the handle in its
 * block.json: "style": [ "purific-blocks-buttons", "file:./style.css" ].
 *
 * Own class names (pf-buttons*), never .pf-cta-button, so the shop, cart
 * and product page buttons in assets/css/style.css are never touched and
 * never touch these.
 *
 * How the colours work: each template sets default colours (--pf-btn-d-*).
 * A colour picked in the block's Styles tab is printed on the button as
 * --pf-btn-* and wins over the default. Empty = the template's look.
 *
 *   .pf-buttons                        group: alignment, width, phone layout
 *   .pf-buttons__row                   the one or two buttons
 *   .pf-buttons__item                  one button or link
 *   .pf-buttons__item--<template>      dark, light, glass, outline, brand,
 *                                      grey, text, arrow
 */

/* ---------- Group and row ---------- */
.pf-buttons{display:flex;justify-content:flex-start}
.pf-buttons.is-align-center{justify-content:center}
.pf-buttons.is-align-right{justify-content:flex-end}

/* Two buttons share the row equally (as wide as the longer label). */
.pf-buttons__row{
  display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:var(--pf-s2);align-items:center;max-width:100%;
}
.pf-buttons.is-width-full .pf-buttons__row{display:grid;width:100%}
/* A text or arrow link next to a button keeps its own width. */
.pf-buttons__row.has-link{display:inline-flex;flex-wrap:wrap;column-gap:var(--pf-s5);row-gap:var(--pf-s2)}
.pf-buttons.is-width-full .pf-buttons__row.has-link{display:flex}
.pf-buttons.is-width-full .pf-buttons__row.has-link .pf-buttons__item:not(.pf-buttons__item--text):not(.pf-buttons__item--arrow){flex:1 1 0}

/* ---------- One button ----------
   Two classes on purpose: in the editor the theme's a{color:inherit}
   becomes ".editor-styles-wrapper a", which beats one class. */
.pf-buttons .pf-buttons__item{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--pf-s2);
  box-sizing:border-box;min-width:180px;min-height:44px;
  padding:11px var(--pf-s5);
  border:2px solid var(--pf-btn-border,var(--pf-btn-d-border,transparent));
  border-radius:var(--pf-radius);
  background:var(--pf-btn-bg,var(--pf-btn-d-bg));
  color:var(--pf-btn-text,var(--pf-btn-d-text));
  font-family:inherit;font-size:var(--pf-ui);font-weight:600;line-height:20px;letter-spacing:.02em;
  text-align:center;text-decoration:none;overflow-wrap:anywhere;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:opacity .15s var(--pf-ease),background-color .15s var(--pf-ease),color .15s var(--pf-ease),border-color .15s var(--pf-ease);
}
.pf-buttons.is-width-full .pf-buttons__item{width:100%}
/* Optional icon (shared/icons.*), before or after the label; takes the
   button's text colour. */
.pf-buttons .pf-buttons__icon{
  flex:none;width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.pf-buttons .pf-buttons__item:visited{color:var(--pf-btn-text,var(--pf-btn-d-text))}

/* Templates: default colours only. */
.pf-buttons__item--dark{--pf-btn-d-bg:var(--pf-text);--pf-btn-d-text:var(--pf-brand)}
.pf-buttons__item--light{--pf-btn-d-bg:var(--pf-bg);--pf-btn-d-text:var(--pf-text)}
.pf-buttons__item--glass{--pf-btn-d-bg:rgba(255,255,255,.15);--pf-btn-d-text:var(--pf-bg)}
.pf-buttons__item--outline{--pf-btn-d-bg:transparent;--pf-btn-d-text:var(--pf-text);--pf-btn-d-border:var(--pf-text)}
.pf-buttons__item--brand{--pf-btn-d-bg:var(--pf-brand);--pf-btn-d-text:var(--pf-text)}
.pf-buttons__item--grey{--pf-btn-d-bg:var(--pf-hover);--pf-btn-d-text:var(--pf-text)}

/* Text link and arrow link: no box, the colour of the text around them
   unless a text colour is picked. Still 44px tall to tap easily. */
.pf-buttons .pf-buttons__item--text,
.pf-buttons .pf-buttons__item--arrow{
  --pf-btn-d-bg:transparent;--pf-btn-d-text:currentColor;
  min-width:0;padding:0;border:0;border-radius:0;
}
.pf-buttons__item--text .pf-buttons__label{border-bottom:1px solid currentColor}
.pf-buttons__item--arrow svg:not(.pf-buttons__icon){
  flex:none;width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s var(--pf-ease);
}

/* Keyboard focus: a white ring inside a dark ring, visible on light,
   dark and photo backgrounds alike. */
.pf-buttons__item:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--pf-bg),0 0 0 4px var(--pf-text);
}

/* Hover only with a real mouse, so phones never keep a hover colour
   after a tap. Default hover: the background goes a bit darker (owner's
   choice: a fade made light buttons look see-through); text and arrow
   links have no background, so they fade a little instead. A picked
   hover colour replaces the default. */
@media (hover:hover) and (pointer:fine){
  .pf-buttons .pf-buttons__item:not(.has-hover):not(.pf-buttons__item--text):not(.pf-buttons__item--arrow):hover{
    background:color-mix(in srgb, var(--pf-btn-bg,var(--pf-btn-d-bg)) 88%, #000);
  }
  /* Dark buttons go a bit LIGHTER instead: darker than near-black would
     not show (owner's choice). Same selector plus the template class, so
     it beats the rule above. */
  .pf-buttons .pf-buttons__item.pf-buttons__item--dark:not(.has-hover):not(.pf-buttons__item--text):not(.pf-buttons__item--arrow):hover{
    background:color-mix(in srgb, var(--pf-btn-bg,var(--pf-btn-d-bg)) 88%, #fff);
  }
  .pf-buttons .pf-buttons__item--text:not(.has-hover):hover,
  .pf-buttons .pf-buttons__item--arrow:not(.has-hover):hover{opacity:.85}
  .pf-buttons__item.has-hover:hover{
    opacity:1;
    background:var(--pf-btn-hover-bg,var(--pf-btn-bg,var(--pf-btn-d-bg)));
    color:var(--pf-btn-hover-text,var(--pf-btn-text,var(--pf-btn-d-text)));
  }
  .pf-buttons__item--text:hover .pf-buttons__label{border-bottom-color:transparent}
  .pf-buttons__item--arrow:hover{text-decoration:underline;text-underline-offset:4px}
  .pf-buttons__item--arrow:hover svg:not(.pf-buttons__icon){transform:translateX(4px)}
}

@media (prefers-reduced-motion:reduce){
  .pf-buttons__item,
  .pf-buttons__item--arrow svg:not(.pf-buttons__icon){transition:none}
}

/* ---------- Phones ---------- */
@media (max-width:520px){
  .pf-buttons.is-m-align-left{justify-content:flex-start}
  .pf-buttons.is-m-align-center{justify-content:center}
  .pf-buttons.is-m-align-right{justify-content:flex-end}

  /* Stack, full width (default). */
  .pf-buttons.is-m-stack-full .pf-buttons__row,
  .pf-buttons.is-m-stack-full .pf-buttons__row.has-link{
    display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);width:100%;
  }
  .pf-buttons.is-m-stack-full .pf-buttons__item{width:100%}
  /* Links keep their own width and line up with the alignment. */
  .pf-buttons.is-m-stack-full .pf-buttons__item--text,
  .pf-buttons.is-m-stack-full .pf-buttons__item--arrow{width:auto;justify-self:start}
  .pf-buttons.is-align-center.is-m-stack-full .pf-buttons__item--text,
  .pf-buttons.is-align-center.is-m-stack-full .pf-buttons__item--arrow,
  .pf-buttons.is-m-align-center.is-m-stack-full .pf-buttons__item--text,
  .pf-buttons.is-m-align-center.is-m-stack-full .pf-buttons__item--arrow{justify-self:center}
  .pf-buttons.is-align-right.is-m-stack-full .pf-buttons__item--text,
  .pf-buttons.is-align-right.is-m-stack-full .pf-buttons__item--arrow,
  .pf-buttons.is-m-align-right.is-m-stack-full .pf-buttons__item--text,
  .pf-buttons.is-m-align-right.is-m-stack-full .pf-buttons__item--arrow{justify-self:end}
  .pf-buttons.is-m-align-left.is-m-stack-full .pf-buttons__item--text,
  .pf-buttons.is-m-align-left.is-m-stack-full .pf-buttons__item--arrow{justify-self:start}

  /* Stack, fit to text. */
  .pf-buttons.is-m-stack-auto .pf-buttons__row,
  .pf-buttons.is-m-stack-auto .pf-buttons__row.has-link{
    display:inline-grid;grid-auto-flow:row;grid-template-columns:auto;justify-items:stretch;width:auto;
  }
  .pf-buttons.is-m-stack-auto .pf-buttons__item{width:auto}

  /* Keep side by side: drop the 180px minimum so two fit on a phone. */
  .pf-buttons.is-m-side .pf-buttons__item{min-width:0;padding-left:var(--pf-s4);padding-right:var(--pf-s4)}
  .pf-buttons.is-m-side .pf-buttons__item--text,
  .pf-buttons.is-m-side .pf-buttons__item--arrow{padding:0}
}