/**
 * VOSKA — Buttons
 * File: assets/css/buttons.css
 *
 * Requires: assets/css/variables.css (loaded inline via wp_add_inline_style)
 *
 * ─── ARCHITECTURE ─────────────────────────────────────────────────────────
 *
 *   Layer 0 — Browser reset  [class*="vsk-btn-"]  (0,1,0)
 *     UA overrides only: appearance, box-sizing, user-select, cursor.
 *     Also targets [class*="vsk-btn-"] > a for Elementor's inner <a>.
 *
 *   Layer 1 — Base  .vsk-btn  +  .vsk-btn > a  (0,1,0 / 0,1,1)
 *     .vsk-btn     → native buttons (<button>, <a> carrying the class directly)
 *     .vsk-btn > a → Elementor wrapper: visual styles on the injected inner <a>
 *
 *   Layer 2 — Variants  (0,1,0 / 0,1,1)
 *     Selector pattern for every variant and its states:
 *
 *       a.vsk-btn-primary--dark         → native <a> button
 *       .vsk-btn-primary--dark > a      → Elementor inner <a>
 *
 *     Using a.vsk-btn-* (tag + class compound) instead of bare .vsk-btn-*
 *     prevents accidentally styling any <a> nested inside a wrapper that
 *     happens to carry a variant class (e.g. a card or section).
 *
 *   Elementor DOM structure:
 *     <div class="elementor-element vsk-btn vsk-btn-primary--dark …">
 *       <a class="elementor-button …">          ← visual target
 *         <span class="elementor-button-content-wrapper">
 *           <span class="elementor-button-text">Label</span>
 *         </span>
 *       </a>
 *     </div>
 *
 *   Variants (add alongside .vsk-btn):
 *     .vsk-btn-primary--dark/light    → filled solid
 *     .vsk-btn-secondary--dark/light  → outlined
 *     .vsk-btn-tertiary--dark/light   → text + animated underline
 *
 *   Size modifier (add alongside .vsk-btn):
 *     .vsk-btn--sm                    → compact size
 *
 *   Tertiary underline modifiers:
 *     .underline-visible  → line visible at rest, exits right on hover
 *     .underline-hidden   → line hidden at rest, enters from left on hover
 *
 * ─── USAGE EXAMPLES ───────────────────────────────────────────────────────
 *
 *   Native HTML:
 *   <button class="vsk-btn vsk-btn-primary--dark">Book now</button>
 *   <a class="vsk-btn vsk-btn-secondary--light vsk-btn--sm">Learn more</a>
 *   <button class="vsk-btn vsk-btn-tertiary--dark underline-hidden">See all</button>
 *
 *   Elementor (classes on widget wrapper, Elementor adds inner <a>):
 *   Custom CSS class field: vsk-btn vsk-btn-primary--dark
 *
 * ─── LOCAL VARIABLES (--_) ────────────────────────────────────────────────
 *
 *   Each variant sets its own --_btn-bg, --_btn-text, --_btn-border
 *   on the wrapper. CSS inheritance delivers them to the child <a>
 *   automatically — no duplication needed.
 *
 *   Convention: --_ prefix = private/local to this component scope.
 *   These are never used outside buttons.css.
 */


/* ─────────────────────────────────────────────────────────────────────────────
   1. BROWSER RESET  [class*="vsk-btn-"]
   Targets every element whose class contains "vsk-btn-" (note trailing dash —
   avoids false matches like "my-vsk-btn-wrapper").
   Also resets the inner <a> Elementor injects — box-sizing and cursor
   are the main offenders on anchor tags.
   Contains ONLY UA override properties — nothing visual, nothing layout.
───────────────────────────────────────────────────────────────────────────── */

[class*="vsk-btn-"],
[class*="vsk-btn-"] :where(a, button){
    -webkit-appearance:  none;
    appearance:          none;
    box-sizing:          border-box;
    user-select:         none;
    -webkit-user-select: none;
    cursor:              pointer;
}

[class*="vsk-btn-"]:focus,
[class*="vsk-btn-"] :where(a, button):focus {
    outline: none; /* focus ring handled explicitly via :focus-visible below */
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. BASE
   Split into wrapper layer and visual layer:

   .vsk-btn              → any element (div, button, a): sets up local variable
                           scope and position context only — no visual styles.

   a.vsk-btn,
   button.vsk-btn,
   .vsk-btn > a          → actual visual target. Native elements carry the class
                           directly. Elementor's inner <a> inherits --_btn-*
                           variables from the wrapper via CSS inheritance.
───────────────────────────────────────────────────────────────────────────── */

/*
 * Wrapper layer — position context for ::after, variable scope.
 * No visual properties: background, border, padding are on the tag-scoped
 * selectors below to avoid double-styling Elementor's div wrapper.
 */
.vsk-btn {
    position: relative;
    display:  inline-block;
}

/*
 * Visual layer — full button appearance on:
 *   a.vsk-btn     → native <a> link button
 *   button.vsk-btn → native <button>
 *   .vsk-btn > a   → Elementor's injected inner <a> (inherits --_btn-* from wrapper)
 */
body.wp-child-theme-voska a.vsk-btn,
body.wp-child-theme-voska button.vsk-btn,
body.wp-child-theme-voska .vsk-btn :where(a, button) {
   
    /* Spacing */
    padding-block:  var(--vsk-btn--padding-block);
    padding-inline: var(--vsk-btn--padding-inline);

    /* Typography */
    font-family:     var(--vsk-font--family-button);
    font-size:       var(--vsk-font--size-btn);
    font-weight:     var(--vsk-font--wgt-btn);
    line-height:     var(--vsk-font--lh-btn);
    letter-spacing:  var(--vsk-font--ls-btn);
	text-transform:	 none;
    text-decoration: none;
    white-space:     nowrap;

    /* Shape */
    border-radius: var(--vsk-btn--radius);
    border-width:  var(--vsk-bdr--wgt);
    border-style:  var(--vsk-bdr--style);
    border-color:  var(--_btn-border, transparent);

    /* Colors via inherited local variables */
    background-color: var(--_btn-bg, transparent);
    color:            var(--_btn-text, inherit);

    /* Interaction */
    position: relative;
    transition: filter           	var(--vsk-trns--duration) var(--vsk-trns--ease),
                background-color 	var(--vsk-trns--duration) var(--vsk-trns--ease),
                color             	var(--vsk-trns--duration) var(--vsk-trns--ease),
                border-color      	var(--vsk-trns--duration) var(--vsk-trns--ease),
                outline-offset    	var(--vsk-trns--duration) var(--vsk-trns--ease);
}

/* Elementor inner <a> spans the full wrapper width */
.vsk-btn :where(a, button) {
    width: 100%;
}

/* Focus ring */
a.vsk-btn:focus-visible,
button.vsk-btn:focus-visible,
.vsk-btn :where(a, button):focus-visible {
    outline:        var(--vsk-btn--focus-width) solid currentColor;
    outline-offset: var(--vsk-btn--focus-offset);
}

/* Disabled */
button.vsk-btn:disabled,
a.vsk-btn[aria-disabled="true"],
.vsk-btn :where(a, button)[aria-disabled="true"] {
    opacity:        0.4;
    cursor:         not-allowed;
    pointer-events: none;
}

/* Size modifier: small
 * Works by overriding spacing/font variables on the wrapper — NOT by applying
 * physical properties on > a directly. This means variant overrides (e.g.
 * tertiary sets --vsk-btn--padding-block: 0.15em in section 5) always win
 * over --sm via source order, since tertiary comes later in the file.
 * Always use alongside base and variant: vsk-btn vsk-btn-primary--dark vsk-btn--sm */
.vsk-btn--sm {
    --vsk-btn--padding-block:  var(--vsk-btn--sm-padding-block);
    --vsk-btn--padding-inline: var(--vsk-btn--sm-padding-inline);
    --vsk-btn--font-size:      var(--vsk-btn--sm-font-size);
}

a.vsk-font-inherit,
.vsk-font-inherit :where(a, button){
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. PRIMARY
   Highest visual weight. Solid filled background.

   Hover UX rationale: filter brightness() darkens the entire button
   uniformly — works for both dark and light color schemes without
   needing extra color tokens. Avoids sudden color jumps; feels physical.
───────────────────────────────────────────────────────────────────────────── */

/* dark: solid dark fill — for use on light backgrounds */
.vsk-btn-primary--dark {
    --_btn-bg:     var(--vsk-clr--dark);
    --_btn-text:   var(--vsk-clr--light);
    --_btn-border: var(--vsk-clr--dark);
}

/* light: solid light fill — for use on dark/colored backgrounds */
.vsk-btn-primary--light {
    --_btn-bg:     var(--vsk-clr--light);
    --_btn-text:   var(--vsk-clr--dark);
    --_btn-border: var(--vsk-clr--light);
}

/* accent: solid light fill — for use on dark/colored backgrounds */
.vsk-btn-primary--accent {
    --_btn-bg:     var(--vsk-clr--accent);
    --_btn-text:   var(--vsk-clr--dark);
    --_btn-border: var(--vsk-clr--accent);
}

/* Hover: brightness shift */
.vsk-btn-primary--dark:hover,
.vsk-btn-primary--dark :where(a, button):hover,
.vsk-btn-primary--light:hover,
.vsk-btn-primary--light :where(a, button):hover,
.vsk-btn-primary--accent:hover,
.vsk-btn-primary--accent :where(a, button):hover{
    filter: brightness(var(--vsk-btn--hover-brightness));
}

/* Active: stronger press feedback */
.vsk-btn-primary--dark:active,
.vsk-btn-primary--dark :where(a, button):active,
.vsk-btn-primary--light:active,
.vsk-btn-primary--light :where(a, button):active,
.vsk-btn-primary--accent:active,
.vsk-btn-primary--accent :where(a, button):active{
    filter: brightness(calc(var(--vsk-btn--hover-brightness) - 0.06));
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. SECONDARY
   Medium visual weight. Transparent background with a visible border.

   Hover UX rationale: background fills in with the border color and
   text inverts — the "reverse" of the resting state. Clear affordance
   without needing animation or additional assets.
───────────────────────────────────────────────────────────────────────────── */

/* dark: dark border on transparent — for use on light backgrounds */
.vsk-btn-secondary--dark {
    --_btn-bg:     transparent;
    --_btn-text:   var(--vsk-clr--dark);
    --_btn-border: var(--vsk-clr--dark);
}

/* light: light border on transparent — for use on dark/colored backgrounds */
.vsk-btn-secondary--light {
    --_btn-bg:     transparent;
    --_btn-text:   var(--vsk-clr--light);
    --_btn-border: var(--vsk-clr--light);
}

/* accent: light border on transparent — for use on dark/colored backgrounds */
.vsk-btn-secondary--accent {
    --_btn-bg:     transparent;
    --_btn-text:   var(--vsk-clr--accent);
    --_btn-border: var(--vsk-clr--accent);
}

/* Hover dark: fill in */
.vsk-btn-secondary--dark:hover,
.vsk-btn-secondary--dark > a:hover {
    --_btn-bg:   var(--vsk-clr--dark);
    --_btn-text: var(--vsk-clr--light);
}

/* Hover light: fill in */
.vsk-btn-secondary--light:hover,
.vsk-btn-secondary--light :where(a, button):hover {
    --_btn-bg:   var(--vsk-clr--light);
    --_btn-text: var(--vsk-clr--dark);
}

/* Hover accent: fill in */
.vsk-btn-secondary--accent:hover,
.vsk-btn-secondary--accent :where(a, button):hover {
    --_btn-bg:   var(--vsk-clr--accent);
    --_btn-text: var(--vsk-clr--dark);
}

/* Active: brightness dip after fill */
.vsk-btn-secondary--dark:active,
.vsk-btn-secondary--dark :where(a, button):active,
.vsk-btn-secondary--light:active,
.vsk-btn-secondary--light :where(a, button):active,
.vsk-btn-secondary--accent:active,
.vsk-btn-secondary--accent :where(a, button):active{
    filter: brightness(var(--vsk-btn--hover-brightness));
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. TERTIARY
   Lowest visual weight. Text only — no background, no border.
   Uses an ::after pseudo-element for the animated underline.

   overflow: hidden on .vsk-btn clips the underline during animation.
   The line is sized and colored via local variables set per color scheme.

   Underline mechanism:
     scaleX(0 → 1): line grows  (entering)
     scaleX(1 → 0): line shrinks (exiting)
     transform-origin controls the direction of enter/exit.

   Modifiers (add to .vsk-btn-tertiary):
     .underline-visible  → line present at rest, exits right on hover
     .underline-hidden   → line absent at rest, enters from left on hover
───────────────────────────────────────────────────────────────────────────── */

/* No background or border — only text color matters.
 * Padding overrides make tertiary inline-friendly:
 *   --vsk-btn--padding-block:  0.15em  → minimal vertical breathing room
 *   --vsk-btn--padding-inline: 0       → no side padding → ::after width
 *                                         equals text width exactly
 *   --vsk-btn--ul-offset:      0.1em   → line hugs text baseline closely
 */
.vsk-btn-tertiary--dark,
.vsk-btn-tertiary--light,
.vsk-btn-tertiary--accent{
	--_btn-bg:             transparent;
    --_btn-border:         transparent;
    --vsk-btn--padding-block:  0.15em;
    --vsk-btn--padding-inline: 0;
    --vsk-btn--ul-offset:      0.3em;
	--vsk-btn--ul-height:		1px;
}

.vsk-btn-tertiary--dark{
    --_btn-text:           var(--vsk-clr--dark);
}

.vsk-btn-tertiary--light {
    --_btn-text:           var(--vsk-clr--light);
}

.vsk-btn-tertiary--accent {
    --_btn-text:           var(--vsk-clr--accent);
}

/* overflow: visible — focus outline must not be clipped */
.vsk-btn-tertiary--dark,
.vsk-btn-tertiary--dark :where(a, button),
.vsk-btn-tertiary--light,
.vsk-btn-tertiary--light :where(a, button),
.vsk-btn-tertiary--accent,
.vsk-btn-tertiary--accent :where(a, button){
    overflow: visible;
}

/* Hover */
.vsk-btn-tertiary--dark:hover,
.vsk-btn-tertiary--dark :where(a, button):hover,
.vsk-btn-tertiary--light:hover,
.vsk-btn-tertiary--light :where(a, button):hover,
.vsk-btn-tertiary--accent:hover,
.vsk-btn-tertiary--accent :where(a, button):hover{
    filter: brightness(var(--vsk-btn--hover-brightness));
}

/* Active */
.vsk-btn-tertiary--dark:active,
.vsk-btn-tertiary--dark :where(a, button):active,
.vsk-btn-tertiary--light:active,
.vsk-btn-tertiary--light :where(a, button):active,
.vsk-btn-tertiary--accent:active,
.vsk-btn-tertiary--accent :where(a, button):active{
    filter: brightness(calc(var(--vsk-btn--hover-brightness) - 0.06));
}

/*
 * Underline pseudo-element.
 * a.vsk-btn-tertiary--*::after     → native <a> button
 * .vsk-btn-tertiary--* > a::after  → Elementor inner <a>
 */
.vsk-btn-tertiary--dark::after,
.vsk-btn-tertiary--dark :where(a, button)::after,
.vsk-btn-tertiary--light::after,
.vsk-btn-tertiary--light :where(a, button)::after,
.vsk-btn-tertiary--accent::after,
.vsk-btn-tertiary--accent :where(a, button)::after{
    content:          '';
    position:         absolute;
    bottom:           calc(-1 * var(--vsk-btn--ul-offset));
    left:             0;
    width:            100%;
    height:           var(--vsk-btn--ul-height);
    background-color: currentColor;
	opacity:		  1!important;

    transform:        scaleX(var(--_ul-scale, 0));
    transform-origin: var(--_ul-origin, left);
    transition:       transform var(--vsk-trns--duration) var(--vsk-trns--ease);
}

/* .underline-visible */
.vsk-btn-tertiary--dark.underline-visible,
.vsk-btn-tertiary--dark.underline-visible :where(a, button),
.vsk-btn-tertiary--light.underline-visible,
.vsk-btn-tertiary--light.underline-visible :where(a, button),
.vsk-btn-tertiary--accent.underline-visible,
.vsk-btn-tertiary--accent.underline-visible :where(a, button){
    --_ul-scale:  1;
    --_ul-origin: left;
}

.vsk-btn-tertiary--dark.underline-visible:hover,
.vsk-btn-tertiary--dark.underline-visible :where(a, button):hover,
.vsk-btn-tertiary--dark.underline-visible:focus-visible,
.vsk-btn-tertiary--dark.underline-visible :where(a, button):focus-visible,
.vsk-btn-tertiary--light.underline-visible:hover,
.vsk-btn-tertiary--light.underline-visible :where(a, button):hover,
.vsk-btn-tertiary--light.underline-visible:focus-visible,
.vsk-btn-tertiary--light.underline-visible :where(a, button):focus-visible,
.vsk-btn-tertiary--accent.underline-visible:hover,
.vsk-btn-tertiary--accent.underline-visible :where(a, button):hover,
.vsk-btn-tertiary--accent.underline-visible:focus-visible,
.vsk-btn-tertiary--accent.underline-visible :where(a, button):focus-visible{
    --_ul-scale:  0;
    --_ul-origin: right;
}

/* .underline-hidden */
.vsk-btn-tertiary--dark.underline-hidden,
.vsk-btn-tertiary--dark.underline-hidden :where(a, button),
.vsk-btn-tertiary--light.underline-hidden,
.vsk-btn-tertiary--light.underline-hidden :where(a, button),
.vsk-btn-tertiary--accent.underline-hidden,
.vsk-btn-tertiary--accent.underline-hidden :where(a, button){
    --_ul-scale:  0;
    --_ul-origin: right;
}

.vsk-btn-tertiary--dark.underline-hidden:hover,
.vsk-btn-tertiary--dark.underline-hidden :where(a, button):hover,
.vsk-btn-tertiary--dark.underline-hidden:focus-visible,
.vsk-btn-tertiary--dark.underline-hidden :where(a, button):focus-visible,
.vsk-btn-tertiary--light.underline-hidden:hover,
.vsk-btn-tertiary--light.underline-hidden :where(a, button):hover,
.vsk-btn-tertiary--light.underline-hidden:focus-visible,
.vsk-btn-tertiary--light.underline-hidden :where(a, button):focus-visible,
.vsk-btn-tertiary--accent.underline-hidden:hover,
.vsk-btn-tertiary--accent.underline-hidden :where(a, button):hover,
.vsk-btn-tertiary--accent.underline-hidden:focus-visible,
.vsk-btn-tertiary--accent.underline-hidden :where(a, button):focus-visible{
    --_ul-scale:  1;
    --_ul-origin: left;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. 
───────────────────────────────────────────────────────────────────────────── */

.vsk-btn-pill--dark,
.vsk-btn-pill--light,
.vsk-btn-pill--accent{
    --_btn-bg:             transparent;
    --_btn-border:         transparent;
}

.vsk-btn-pill--dark{
	 --_btn-text:           var(--vsk-clr--dark);
}

.vsk-btn-pill--light{
    --_btn-text:           var(--vsk-clr--light);
}

.vsk-btn-pill--accent{
    --_btn-text:           var(--vsk-clr--accent);
}

/* Hover dark: fill in */
.vsk-btn-pill--dark:hover,
.vsk-btn-pill--dark > a:hover {
    --_btn-bg:   #EAE3DC;
    --_btn-text: var(--vsk-clr--dark);
}

/* Hover light: fill in */
.vsk-btn-pill--light:hover,
.vsk-btn-pill--light :where(a, button):hover {
    --_btn-bg:   #EAE3DC;
    --_btn-text: var(--vsk-clr--dark);
}

/* Hover accent: fill in */
.vsk-btn-pill--accent:hover,
.vsk-btn-pill--accent :where(a, button):hover {
    --_btn-bg:   rgba(from var(--vsk-clr--accent) r g b / .3);
    --_btn-text: var(--vsk-clr--accent);
}

/* Active: brightness dip after fill */
.vsk-btn-pill--dark:active,
.vsk-btn-pill--dark :where(a, button):active,
.vsk-btn-pill--light:active,
.vsk-btn-pill--light :where(a, button):active,
.vsk-btn-pill--accent:active,
.vsk-btn-pill--accent :where(a, button):active{
    filter: brightness(var(--vsk-btn--hover-brightness));
}

@media(max-width: 767px){
	
	.vsk-btn-pill--dark{
		 --_btn-bg:           rgba(from var(--vsk-clr--text-faded) r g b / .025);
	}

	.vsk-btn-pill--light{
		--_btn-bg:           rgba(from var(--vsk-clr--text-faded) r g b / .025);
	}

	.vsk-btn-pill--accent{
		--_btn-bg:           rgba(from var(--vsk-clr--text-faded) r g b / .025);
	}
}