/**
 * Profile photo + "Who took this photo?" — template-parts/onboard/photo-field.php
 * File: /wp-content/themes/theme/assets/css/onboard-photo.css
 *
 * Loaded on /join (Step 2) and on the parent dashboard (Add your wrestler).
 * Behavior: assets/js/onboard-photo.js.
 */

/* Class display rules beat the UA [hidden] rule — restate it. */
.wf-onboard-rights[hidden] { display: none; }

.wf-onboard-photo__pick {
    display:       flex;
    align-items:   center;
    gap:           var(--space-4);
    padding:       var(--space-4);
    background:    var(--color-surface-2);
    border:        1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    cursor:        pointer;
    transition:    border-color var(--transition-fast);
}
.wf-onboard-photo__pick:hover { border-color: var(--color-teal); }
.wf-onboard-photo__input:focus-visible + .wf-onboard-photo__pick {
    border-color:   var(--color-teal);
    outline:        2px solid var(--color-teal);
    outline-offset: 2px;
}
.wf-onboard-photo__preview {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           72px;
    height:          72px;
    border-radius:   50%;
    overflow:        hidden;
    background-color: var(--color-surface-3);
    color:           var(--color-text-muted);
}
.wf-onboard-photo__preview img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}
.wf-onboard-photo__text {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
    font-size:      var(--text-sm);
    color:          var(--color-text-muted);
}
.wf-onboard-photo__text strong {
    font-size: var(--text-base);
    color:     var(--color-teal);
}
/* Visually hidden but focusable / clickable through its label. */
.wf-onboard-photo__input {
    position: absolute;
    width:    1px;
    height:   1px;
    opacity:  0;
    overflow: hidden;
}
.wf-onboard-photo { position: relative; }

.wf-onboard-rights {
    margin:  var(--space-3) 0 0;
    padding: 0;
    border:  0;
}
.wf-onboard-rights__opt {
    clear:       both;
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    min-height:  44px;
    color:       var(--color-text);
    font-size:   var(--text-sm);
    cursor:      pointer;
}
.wf-onboard-rights__opt input {
    width:        18px;
    height:       18px;
    accent-color: var(--color-teal);
    flex-shrink:  0;
}