/* =============================================================
   phData — button semantic tokens
   -------------------------------------------------------------
   Layering:   atomic  →  semantic (this file)  →  component
   Components read ONLY the --phd-btn-* tokens below, never atomics.

   Surface context is a LOCAL scope, separate from app light/dark
   mode. Mark any section with data-phd-surface="light|dark" and the
   buttons inside resolve to the right values automatically.

       <section data-phd-surface="dark">  ... </section>

   :root defaults to the light context, so an unscoped button still
   renders. Nesting works: a light block inside a dark one flips back.
   ============================================================= */


/* -------------------------------------------------------------
   Shared / context-independent
   ------------------------------------------------------------- */
:root {
  --phd-btn-radius:           999px;
  --phd-btn-border-width:     1px;
  --phd-btn-border-width-lg:  2px;
  --phd-btn-disabled-opacity: 0.38;

  /* size — keyed to Elementor's own elementor-size-* classes */
  --phd-btn-size-xs-padding:  var(--phd-space-2) var(--phd-space-4);
  --phd-btn-size-xs-font:     var(--phd-font-size-1);

  --phd-btn-size-sm-padding:  var(--phd-space-3) var(--phd-space-6);
  --phd-btn-size-sm-font:     var(--phd-font-size-2);

  --phd-btn-size-md-padding:  var(--phd-space-4) var(--phd-space-8);
  --phd-btn-size-md-font:     var(--phd-font-size-3);

  /* lg shares md's padding — only the font size steps up */
  --phd-btn-size-lg-padding:  var(--phd-btn-size-md-padding);
  --phd-btn-size-lg-font:     var(--phd-font-size-4);

  --phd-btn-size-xl-padding:  var(--phd-space-5) var(--phd-space-10);
  --phd-btn-size-xl-font:     var(--phd-font-size-5);

  /* tertiary is text/ghost, so it runs one spacing step tighter
     horizontally than the standard size padding, per size */
  --phd-btn-tertiary-padding-inline-xs: var(--phd-space-3);
  --phd-btn-tertiary-padding-inline-sm: var(--phd-space-4);
  --phd-btn-tertiary-padding-inline-md: var(--phd-space-5);
  --phd-btn-tertiary-padding-inline-lg: var(--phd-space-6);
  --phd-btn-tertiary-padding-inline-xl: var(--phd-space-8);
}


/* -------------------------------------------------------------
   LIGHT context (also the :root default)
   ------------------------------------------------------------- */
:root,
[data-phd-surface="light"] {
  /* primary — mint fill, deep-mint edge to define it on near-white */
  --phd-btn-primary-bg:            var(--phd-mint-bright);
  --phd-btn-primary-bg-hover:      var(--phd-mint-hover);
  --phd-btn-primary-bg-active:     var(--phd-mint-active);
  --phd-btn-primary-fg:            var(--phd-blue-900);
  --phd-btn-primary-border:        transparent;

  /* primary · alt — opt-in variant for max punch on white (LIGHT only) */
  --phd-btn-primary-alt-bg:        var(--phd-blue-900);
  --phd-btn-primary-alt-bg-hover:  var(--phd-blue-800);
  --phd-btn-primary-alt-fg:        var(--phd-mint-bright);
  --phd-btn-primary-alt-border:    transparent;

  /* secondary — outline, blue-grey edge */
  --phd-btn-secondary-bg:          oklch(from var(--phd-blue-100) l c h / .6);
  --phd-btn-secondary-bg-hover:    oklch(from var(--phd-blue-100) l c h / .9);
  --phd-btn-secondary-fg:          var(--phd-blue-900);
  --phd-btn-secondary-border:      transparent;

  /* tertiary — text/ghost */
  --phd-btn-tertiary-fg:           var(--phd-blue-900);
  --phd-btn-tertiary-bg-hover:     var(--phd-blue-100);
  --phd-btn-tertiary-border:       transparent;

  /* focus */
  --phd-btn-focus-ring:            var(--phd-blue-900);
}


/* -------------------------------------------------------------
   DARK / mid-surface context
   ------------------------------------------------------------- */
[data-phd-surface="dark"] {
  /* primary — mint fill needs no edge here, so border is transparent */
  --phd-btn-primary-bg:            var(--phd-mint-bright);
  --phd-btn-primary-bg-hover:      var(--phd-mint-hover);
  --phd-btn-primary-bg-active:     var(--phd-mint-active);
  --phd-btn-primary-fg:            var(--phd-blue-900);
  --phd-btn-primary-border:        transparent;

  /* secondary — lifted navy fill + border so it reads on dark */
  --phd-btn-secondary-bg:          oklch(from var(--phd-blue-600) l c h / .25);
  --phd-btn-secondary-bg-hover:    oklch(from var(--phd-blue-600) l c h / .5);
  --phd-btn-secondary-fg:          var(--phd-mint-bright);
  --phd-btn-secondary-border:      oklch(from var(--phd-blue-600) l c h / .5);

  /* tertiary */
  --phd-btn-tertiary-fg:           var(--phd-mint-bright);
  --phd-btn-tertiary-bg-hover:     rgba(255, 255, 255, 0.08);
  --phd-btn-tertiary-border:       transparent;

  /* focus */
  --phd-btn-focus-ring:            var(--phd-mint-bright);

  /* primary · alt is a light-surface concept — intentionally not
     redefined here. On dark, primary is already mint. */
}


/* -------------------------------------------------------------
   Responsive — override semantic tokens per breakpoint, same as
   the surface-context overrides above. Components never change.
   ------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --phd-btn-size-lg-font:     var(--phd-font-size-3);
    --phd-btn-size-xl-font:     var(--phd-font-size-4);

    /* md/lg share this token, so overriding it here covers both */
    --phd-btn-size-md-padding:  var(--phd-space-5) var(--phd-space-6);
  }
}


/* -------------------------------------------------------------
   Components — read semantic tokens only
   ------------------------------------------------------------- */
.phd-btn {
  & .elementor-button {
    display: inline-flex;
    align-items: center;
    gap: var(--phd-space-2);
    border: var(--phd-btn-border-width) solid transparent;
    border-radius: var(--phd-btn-radius);
    font: inherit;
    font-weight: 500;
    text-transform: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--phd-btn-focus-ring);
      outline-offset: 2px;
    }

    &:disabled,
    &[aria-disabled="true"] {
      opacity: var(--phd-btn-disabled-opacity);
      pointer-events: none;
    }

    /* size */
    &.elementor-size-xs { padding: var(--phd-btn-size-xs-padding); font-size: var(--phd-btn-size-xs-font); }
    &.elementor-size-sm { padding: var(--phd-btn-size-sm-padding); font-size: var(--phd-btn-size-sm-font); }
    &.elementor-size-md { padding: var(--phd-btn-size-md-padding); font-size: var(--phd-btn-size-md-font); }
    &.elementor-size-lg { padding: var(--phd-btn-size-lg-padding); font-size: var(--phd-btn-size-lg-font); border-width: var(--phd-btn-border-width-lg); }
    &.elementor-size-xl { padding: var(--phd-btn-size-xl-padding); font-size: var(--phd-btn-size-xl-font); border-width: var(--phd-btn-border-width-lg); }

    /* icon present → text can wrap to multiple lines, so left-align it
       instead of inheriting the button's centered text */
    .elementor-button-icon ~ .elementor-button-text {
      text-align: left;
    }
  }

  /* Stretch (Position: Stretch, any breakpoint) + icon at the end of the
     text: spread content-wrapper's children apart instead of keeping them
     centered as a unit, so text hugs the left edge and the icon hugs the
     right one. */
  &.phd-btn--icon-row-reverse[class*="align-justify"] .elementor-button-content-wrapper {
    width: 100%;
    justify-content: space-between;
  }

  /* primary */
  &.phd-btn--primary .elementor-button {
    background: var(--phd-btn-primary-bg);
    color: var(--phd-btn-primary-fg);
    border-color: var(--phd-btn-primary-border);

    &:hover  { 
      color: var(--phd-btn-primary-fg);
      background: var(--phd-btn-primary-bg-hover);
    }
    &:active { 
      color: var(--phd-btn-primary-fg);
      background: var(--phd-btn-primary-bg-active);
    }
  }

  /* primary · alt (light only) */
  &.phd-btn--primary-alt .elementor-button {
    background: var(--phd-btn-primary-alt-bg);
    color: var(--phd-btn-primary-alt-fg);
    border-color: var(--phd-btn-primary-alt-border);

    &:hover { 
      color: var(--phd-btn-primary-alt-fg);
      background: var(--phd-btn-primary-alt-bg-hover); 
    }
    &:active { 
      color: var(--phd-btn-primary-alt-fg);
      background: var(--phd-btn-primary-alt-bg-hover);
    }
  }

  /* secondary */
  &.phd-btn--secondary .elementor-button {
    background: var(--phd-btn-secondary-bg);
    color: var(--phd-btn-secondary-fg);
    border-color: var(--phd-btn-secondary-border);

    &:hover {
      color: var(--phd-btn-secondary-fg);
      background: var(--phd-btn-secondary-bg-hover); 
    }
  }

  /* tertiary */
  &.phd-btn--tertiary .elementor-button {
    background: transparent;
    color: var(--phd-btn-tertiary-fg);
    border-color: var(--phd-btn-tertiary-border);

    &.elementor-size-xs { padding-inline: var(--phd-btn-tertiary-padding-inline-xs); }
    &.elementor-size-sm { padding-inline: var(--phd-btn-tertiary-padding-inline-sm); }
    &.elementor-size-md { padding-inline: var(--phd-btn-tertiary-padding-inline-md); }
    &.elementor-size-lg { padding-inline: var(--phd-btn-tertiary-padding-inline-lg); }
    &.elementor-size-xl { padding-inline: var(--phd-btn-tertiary-padding-inline-xl); }

    &:hover {
      background: var(--phd-btn-tertiary-bg-hover);
    }
  }
}