/* Button styles */

@theme inline {
  /* Configuration */

    /**
     * Button component settings
     *
     * The variables below are used to define the button styles.
     * Most of these variables come from the main theme configuration.
     * The following variables are not defined, but have fallback values
     * in their respective locations and can be added if needed:
     *
     * --button-font-weight   (fallback is 600/semibold)
     * --button-font-size     (fallback is 1rem)
     * --button-outline-width (fallback is --button-border-width)
     * --button-outline-style (fallback is --button-border-style)
     * --button-outline-color (fallback is --button-border-color)
     */

    --button-bg:                 var(--color-on-primary-fixed-variant);
    --button-color:              var(--color-primary-fixed-dim);
    --button-hover-bg:           var(--color-info);
    --button-hover-border-color: var(--color-info);
    --button-hover-color:        var(--color-white);
    --button-border-width:       3px;
    --button-border-style:       solid;
    --button-border-color:       var(--color-primary-fixed-dim);
    --button-radius:             0.5rem;
}

.btn, .button, .acf-block-preview .button {
    @apply px-8 py-2 min-w-0;

    background: var(--button-bg);
    color:      var(--button-color);
    cursor:     pointer;
    display:    inline-block;
    transition: background 200ms, border-color 200ms, color 200ms;

    border-width:  var(--button-border-width);
    border-style:  var(--button-border-style);
    border-color:  var(--button-border-color);
    border-radius: var(--button-radius);

    text-decoration: none;
    font-weight:     var(--button-font-weight, 600);
    font-size:       var(--button-font-size, 1rem);
    line-height:     1.1;

    &[data-button-variant="outline"] {
        background:   transparent;
        color:        var(--button-border-color);
        border-color: var(--button-bg);

        &:hover {
            background:   transparent;
            border-color: var(--button-hover-bg);
            color:        var(--button-hover-color);
        }
    }
}

/* Hover/focus/active */
.btn:hover, .button:hover, .acf-block-preview .button:hover {
    background:   var(--button-hover-bg);
    border-color: var(--button-hover-border-color);
    color:        var(--button-hover-color);
}

.btn:focus, .button:focus {
    outline-width:  var(--button-outline-width, var(--button-border-width));
    outline-style:  var(--button-outline-style, var(--button-border-style));
    outline-color:  var(--button-outline-color, var(--button-border-color));
    outline-offset: calc(var(--button-border-width) * 2);
}

.btn:active, .button:active { transform: scale(99%); }

/* Back To Top Button */
#backToTopBtn {
    background:    var(--color-primary,#3857BC);
    border:        none;
    border-radius: 2em;
    bottom:        2rem;
    box-shadow:    0 2px 8px rgba(0,0,0,0.15);
    color:         #fff;
    cursor:        pointer;
    display:       none;
    font-size:     1.1rem;
    padding:       0.75em 1.5em;
    position:      fixed;
    right:         2rem;
    transition:    opacity 0.2s;
    z-index:       1000;
}

.back-to-top {
    background:    var(--color-primary, #3857BC);
    border:        none;
    border-radius: 2em;
    box-shadow:    0 2px 8px rgba(0,0,0,0.15);
    color:         #fff;
    cursor:        pointer;
    font-size:     1.1rem;
    opacity:       0.85;
    padding:       0.75em 1.5em;
    transition:    opacity 0.2s, background 0.2s;

    &:hover, &:focus {
        background: var(--color-info, #233a7a);
        opacity: 1;
        outline: 2px solid var(--color-info, #233a7a);
    }
}

/**
  * Variants
  *
  * The following styles are used to define button variants.
  * These styles are applied to the button element using the
  * `data-button-*` attributes.
  */

/* Sizes */
.btn[data-button-size="small"], .button[data-button-size="small"]  { @apply px-4 py-0.5; }
.btn[data-button-size="medium"], .button[data-button-size="medium"] { @apply px-8 py-2; }
.btn[data-button-size="large"], .button[data-button-size="large"]  { @apply px-12 py-3; }

/* Width */
.btn[data-button-width="auto"], .button[data-button-width="auto"]  { @apply min-w-0; }
.btn[data-button-width="small"], .button[data-button-width="small"] { @apply px-2; }
.btn[data-button-width="wide"], .button[data-button-width="wide"]  { @apply sm:min-w-[20rem]; }
.button[data-button-width="full"],
x-button:has(.button[data-button-width="full"]) { @apply w-full; }

/**
 * Colors
 *
 * We don't need to speicifcally target "primary" buttons
 * as the button styling defaults to "primary".
 * However, you can, if necessary, by adding a style block
 * like the ones below and changing the color values.
 */
.btn[data-button-color="secondary"], .button[data-button-color="secondary"] {
    --button-bg:                 var(--color-secondary);
    --button-color:              var(--color-white);
    --button-border-color:       var(--color-secondary);
    --button-outline-color:      oklch(0.48 0.0136 252.2);
    --button-hover-bg:           var(--color-dark);
    --button-hover-border-color: var(--color-dark);
    --button-hover-color:        var(--color-white);
}

.btn[data-button-color="light"], .button[data-button-color="light"] {
    --button-bg:                 var(--color-white);
    --button-color:              var(--color-dark);
    --button-border-color:       var(--color-white);
    --button-hover-bg:           var(--color-dark);
    --button-hover-border-color: var(--color-dark);
    --button-hover-color:        var(--color-white);
}

.btn[data-button-color="white"], .button[data-button-color="white"] {
    --button-bg:                 var(--color-white);
    --button-color:              var(--color-black);
    --button-border-color:       var(--color-white);
    --button-hover-bg:           var(--color-secondary-200);
    --button-hover-border-color: var(--color-secondary-200);
    --button-hover-color:        var(--color-black);
}

.btn[data-button-color="black"], .button[data-button-color="black"] {
    --button-bg:                 var(--color-black);
    --button-color:              var(--color-white);
    --button-border-color:       var(--color-black);
    --button-hover-bg:           var(--color-secondary);
    --button-hover-border-color: var(--color-secondary);
    --button-hover-color:        var(--color-dark);
}

/* Dark-surface button variants (WCAG-AA against #100e0b) */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.1;
	padding: 0.5rem 2rem;
	border-radius: 0.5rem;
	border: 3px solid transparent;
	text-decoration: none;
	transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.button:active { transform: scale(0.99); }

@media (prefers-reduced-motion: reduce) { .button:active { transform: none; } }

.button:focus-visible { outline: 2px solid var(--color-primary, #b6c4ff); outline-offset: 3px; }

.button--primary {
	background: var(--color-primary, #b6c4ff);
	color: var(--color-on-primary, #05297a);
	border-color: var(--color-primary, #b6c4ff);

    &:hover { background: var(--color-primary-87, #dce1ff); border-color: var(--color-primary-87, #dce1ff); }
}

.button--outline {
	background: transparent;
	border-color: var(--color-outline, #8f909d);
	color: var(--color-on-surface, #e3e1e9);

    &:hover { border-color: var(--color-primary, #b6c4ff); color: var(--color-primary, #b6c4ff); }
}

.button--secondary {
	background:   var(--color-surface-container-high, #292a2f);
	border-color: var(--color-outline-variant, #444651);
	color:        var(--color-on-surface, #e3e1e9);
}

/* Outline button over the site-header's bg-secondary surface needs lighter text
 * because --color-on-surface (#e3e1e9) on bg-secondary (#6e757f) is only 3.59:1.
 * Pure white clears 4.5:1 against #6e757f; --color-on-primary (#05297a) is too
 * dark and drops to 2.81:1, so we go to --color-white instead. */
.site-header .button--outline {
	border-color: var(--color-white, #ffffff);
	color:        var(--color-white, #ffffff);

    &:hover {
        border-color: var(--color-primary-87, #dce1ff);
        color       : var(--color-primary-87, #dce1ff);
    }
}
