/*
 * Secure Access Block — Styles
 *
 * All values reference CSS custom properties defined in style.css
 * (--global--*, --button--*, --form--*, --heading--*).
 * No hard-coded brand colours except the error state (accessible red).
 */

/* =========================================================
   Container / Card
   ========================================================= */
.wp-block-theme-secure-access {
    background-color: var(--global--color-white);
    box-shadow: 0 0 60px 0 rgba(68, 68, 68, 0.15);

    border-radius: calc(5 * var(--global--border-radius));

    padding: calc(5 * var(--global--spacing-unit));

    max-width:     100%;
}

/* =========================================================
   Title
   ========================================================= */
.secure-access__title {
    font-family:    var(--global--font-primary);
    font-size:      var(--heading--font-size-h3);
    font-weight:    var(--heading--font-weight);
    color:          var(--global--color-gray-900);
    line-height:    var(--heading--line-height-h3);
    margin:         0 0 calc(2 * var(--global--spacing-unit)) 0;

}

/* =========================================================
   Description
   ========================================================= */
.secure-access__description {
    font-family: var(--global--font-secondary);
    font-size:   var(--global--font-size-base);
    color:       var(--global--color-gray-700);
    line-height: var(--global--line-height-body);
    margin:      0 0 calc(2.5 * var(--global--spacing-unit)) 0;
}

/* =========================================================
   Code input row
   ========================================================= */
.secure-access__inputs {
    display:       flex;
    gap:           calc(0.75 * var(--global--spacing-unit));
    margin-bottom: calc(1 * var(--global--spacing-unit));
}

.secure-access__field {
    flex:           1 1 0;
    min-width:      0;
    text-align:     center;
    font-family:    var(--global--font-primary);
    font-size:      16px !important;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--global--color-gray-900);

    padding: calc(1.5  * var(--global--spacing-unit)) !important;

    background:     var(--global--color-white);
    border-radius: var(--global--border-radius) !important;
    border: 1px solid var(--global--color-gray-300) !important;

    transition:     border-color 0.15s ease, box-shadow 0.15s ease;
    outline:        none;
    -webkit-appearance: none;
    appearance:         none;
}

.secure-access__field::placeholder {
    color:          var(--global--color-gray-300);
    font-weight:    400;
    letter-spacing: 0;
}

.secure-access__field:focus {
    border-color: var(--global--color-blue-500);
    box-shadow:   0 0 0 2px rgba(1, 100, 174, 0.18);
}

/* =========================================================
   Inline error
   ========================================================= */
.secure-access__error {
    font-family: var(--global--font-secondary);
    font-size:   calc(0.875 * var(--global--font-size-base));
    color:       #c0392b;
    min-height:  1.4em;
    margin:      calc(0.5 * var(--global--spacing-unit)) 0
                 calc(1.5 * var(--global--spacing-unit)) 0;
}

/* =========================================================
   Submit button — inherits theme button system
   ========================================================= */
.secure-access__button {
    display:     block;
    width:       fit-content;
    background:  var(--wp--preset--color--blue-600) !important;
    color:       var(--global--color-white);
    font-family: var(--button--font-family);
    font-size:   var(--button--font-size);
    font-weight: var(--button--font-weight);
    text-transform: capitalize;
    line-height: var(--button--line-height);
    border:      none;
    border-radius: var(--button--border-radius);
    padding:     var(--button--padding-vertical)
                 var(--button--padding-horizontal);
    cursor:      pointer;
    text-align:  center;
    transition:  background 0.15s ease, opacity 0.15s ease;
    margin-top:  calc(0.5 * var(--global--spacing-unit));
}

.secure-access__button:hover,
.secure-access__button:focus {
    background: var(--global--color-blue-500);
    outline:    none;
}

.secure-access__button:focus-visible {
    box-shadow: 0 0 0 3px rgba(1, 100, 174, 0.35);
}

.secure-access__button:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}

/* =========================================================
   Editor adjustments
   ========================================================= */
.editor-styles-wrapper .wp-block-theme-secure-access {
    max-width: 400px;
}

.editor-styles-wrapper .secure-access__button {
    pointer-events: none;
}