/* =============================================================
   GHS Theme -- assets/css/components/buttons.css
   Button variants and sizes from the GHS design system.

   Variants:  primary (navy) | accent (orange) | secondary (teal outline) | ghost
   Sizes:     sm (36px) | md (44px -- default) | lg (52px)
   Radius:    12px (var(--radius-md)) per design spec

   Usage:
     <a class="ghs-btn ghs-btn--primary">...</a>
     <button class="ghs-btn ghs-btn--accent ghs-btn--lg">...</button>

   @package GHS_Theme
   @since   1.0.0
   ============================================================= */


/* ----------------------------------------------------------
   BASE BUTTON
   ---------------------------------------------------------- */

.ghs-btn {
    /* Layout */
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    white-space:     nowrap;

    /* Default size: md -- 44px height */
    height:          44px;
    padding:         0 var(--space-5);

    /* Typography */
    font-family:     var(--font-body);
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-bold);
    line-height:     1;
    text-decoration: none;
    letter-spacing:  0.01em;

    /* Shape */
    border-radius:   var(--radius-md);   /* 12px */
    border:          1.5px solid transparent;

    /* Interaction */
    cursor:          pointer;
    user-select:     none;
    transition:
        background-color var(--dur-base) var(--ease-out),
        border-color     var(--dur-base) var(--ease-out),
        color            var(--dur-base) var(--ease-out),
        box-shadow       var(--dur-base) var(--ease-out),
        transform        var(--dur-base) var(--ease-out);

    /* Accessibility */
    position:        relative;
    overflow:        hidden;
}

.ghs-btn:hover {
    transform: translateY(-1px);
}

.ghs-btn:focus {
    outline: none;   /* suppress browser default; :focus-visible handles keyboard */
}

.ghs-btn:focus-visible {
    outline:        2px solid var(--ghs-teal);
    outline-offset: 3px;
}

.ghs-btn:active {
    transform: translateY(0);
    outline:   none;
}


/* ----------------------------------------------------------
   VARIANT: PRIMARY  (navy background)
   ---------------------------------------------------------- */

.ghs-btn--primary {
    background-color: var(--ghs-navy);
    border-color:     var(--ghs-navy);
    color:            var(--ghs-white);
    box-shadow:       var(--shadow-sm);
}

.ghs-btn--primary:hover {
    background-color: #003060;
    border-color:     #003060;
    box-shadow:       var(--shadow-md);
    color:            var(--ghs-white);
}

.ghs-btn--primary:active {
    background-color: #002a55;
    box-shadow:       none;
}


/* ----------------------------------------------------------
   VARIANT: ACCENT  (orange -- one primary CTA per page)
   ---------------------------------------------------------- */

.ghs-btn--accent {
    background-color: var(--ghs-orange);
    border-color:     var(--ghs-orange);
    color:            var(--ghs-white);
    box-shadow:       var(--shadow-sm);
}

.ghs-btn--accent:hover {
    background-color: #d97b00;
    border-color:     #d97b00;
    box-shadow:       var(--shadow-md);
    color:            var(--ghs-white);
}

.ghs-btn--accent:active {
    background-color: #c06d00;
    box-shadow:       none;
}


/* ----------------------------------------------------------
   VARIANT: SECONDARY  (teal outline)
   ---------------------------------------------------------- */

.ghs-btn--secondary {
    background-color: transparent;
    border-color:     var(--ghs-teal);
    color:            var(--ghs-teal);
}

.ghs-btn--secondary:hover {
    background-color: var(--ghs-teal);
    color:            var(--ghs-white);
    box-shadow:       var(--shadow-sm);
}

.ghs-btn--secondary:active {
    background-color: #008f8b;
    border-color:     #008f8b;
}


/* ----------------------------------------------------------
   VARIANT: GHOST  (transparent -- for dark backgrounds)
   ---------------------------------------------------------- */

.ghs-btn--ghost {
    background-color: transparent;
    border-color:     rgba(255, 255, 255, 0.4);
    color:            var(--ghs-white);
}

.ghs-btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color:     rgba(255, 255, 255, 0.8);
    color:            var(--ghs-white);
}

.ghs-btn--ghost:active {
    background-color: rgba(255, 255, 255, 0.18);
}


/* ----------------------------------------------------------
   SIZE: SM  (36px height)
   ---------------------------------------------------------- */

.ghs-btn--sm {
    height:      36px;
    padding:     0 var(--space-4);
    font-size:   var(--fs-sm);
}


/* ----------------------------------------------------------
   SIZE: MD  (44px height -- default, no extra class needed)
   ---------------------------------------------------------- */

.ghs-btn--md {
    height:      44px;
    padding:     0 var(--space-5);
    font-size:   var(--fs-sm);
}


/* ----------------------------------------------------------
   SIZE: LG  (52px height)
   ---------------------------------------------------------- */

.ghs-btn--lg {
    height:      52px;
    padding:     0 var(--space-6);
    font-size:   var(--fs-base);
}


/* ----------------------------------------------------------
   FULL WIDTH  (stretch to container width)
   ---------------------------------------------------------- */

.ghs-btn--full {
    width:   100%;
    justify-content: center;
}


/* ----------------------------------------------------------
   ICON INSIDE BUTTON  (SVG sibling to text)
   Arrow SVGs and span.ghs-arrow move right on hover for
   trailing-arrow buttons (e.g. "Bekijk voordelen ->").
   ---------------------------------------------------------- */

.ghs-btn svg,
.ghs-btn .ghs-arrow {
    flex-shrink: 0;
    transition:  transform var(--dur-base) ease-out;
}

.ghs-btn:hover svg,
.ghs-btn:hover .ghs-arrow {
    transform: translateX(4px);
}