/* =============================================================================
   High School single page
   -----------------------------------------------------------------------------
   Phase 1 — hero + current roster only. Invite Teammate, Alumni accordion,
   and state-context link ship in Phase 2.

   Athlete cards reuse template-parts/search/athlete-card.php so their
   styling comes from search.css — this file only owns the page shell,
   hero, and the roster grid.
============================================================================= */

.wf-hs {
    padding-block: 0 var(--space-12);
}

.wf-hs__body {
    padding-block: var(--space-8);
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.wf-hs-hero {
    background: linear-gradient(
        180deg,
        var(--color-surface) 0%,
        var(--color-bg) 100%
    );
    border-bottom: 1px solid var(--color-border-subtle);
    padding-block: var(--space-10) var(--space-8);
}

.wf-hs-hero__title {
    font-family: var(--font-heading);
    font-size:   var(--text-5xl);
    font-weight: 800;
    line-height: 1.05;
    margin:      0 0 var(--space-2);
    color:       var(--color-text);
}

.wf-hs-hero__location {
    font-size:   var(--text-lg);
    color:       var(--color-text-muted);
    margin:      0 0 var(--space-5);
}

.wf-hs-hero__meta {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-6);
    font-size:   var(--text-sm);
}

.wf-hs-hero__count strong {
    color:       var(--color-primary);
    font-size:   var(--text-2xl);
    font-weight: 700;
    margin-right: var(--space-1);
}

.wf-hs-hero__count {
    color: var(--color-text-muted);
}

.wf-hs-hero__website {
    color:           var(--color-primary);
    text-decoration: none;
    font-weight:     500;
}

.wf-hs-hero__website:hover {
    text-decoration: underline;
}

/* ── Section titles ──────────────────────────────────────────────────── */

.wf-hs-section-title {
    font-family:   var(--font-heading);
    font-size:     var(--text-2xl);
    font-weight:   700;
    margin:        0 0 var(--space-5);
    color:         var(--color-text);
}

/* ── Roster grid ─────────────────────────────────────────────────────── */

.wf-hs-roster {
    margin-bottom: var(--space-10);
}

.wf-hs-roster__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:                   var(--space-4);
}

/* ── Invite Teammate ────────────────────────────────────────────────── */

.wf-hs-invite {
    margin-bottom: var(--space-10);
}

.wf-hs-invite__card {
    padding:       var(--space-8);
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.wf-hs-invite__lead {
    font-size:     var(--text-base);
    color:         var(--color-text-muted);
    margin:        0 0 var(--space-6);
    max-width:     640px;
    line-height:   1.6;
}

.wf-hs-invite__columns {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-8);
}

.wf-hs-invite__col-label {
    font-family:    var(--font-heading);
    font-size:      var(--text-sm);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--color-text-subtle);
    margin:         0 0 var(--space-4);
}

/* Share buttons — three equal-width tap targets */
.wf-hs-invite__share-buttons {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-2);
}

.wf-hs-share-btn {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-1);
    padding:         var(--space-4) var(--space-2);
    background:      var(--color-surface-2);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-md);
    color:           var(--color-text);
    text-decoration: none;
    transition:      border-color var(--transition-fast),
                     background var(--transition-fast);
}

.wf-hs-share-btn:hover,
.wf-hs-share-btn:focus-visible {
    border-color: var(--color-primary);
    background:   var(--color-surface-3);
    outline:      none;
}

.wf-hs-share-btn__icon {
    font-size:   var(--text-2xl);
    line-height: 1;
}

.wf-hs-share-btn__label {
    font-size:   var(--text-xs);
    font-weight: 600;
    color:       var(--color-text-muted);
}

/* Request form */
.wf-hs-invite__form {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.wf-hs-invite__row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-3);
}

.wf-hs-invite__label {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
}

.wf-hs-invite__label-text {
    font-size:      var(--text-xs);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--color-text-subtle);
}

.wf-hs-invite__label input {
    width:          100%;
    padding:        var(--space-3);
    background:     var(--color-surface-2);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-md);
    color:          var(--color-text);
    font-size:      var(--text-base);
    transition:     border-color var(--transition-fast);
}

.wf-hs-invite__label input:focus {
    border-color: var(--color-primary);
    outline:      none;
}

.wf-hs-invite__label input[aria-invalid="true"] {
    border-color: var(--color-error, #EF4444);
}

.wf-hs-invite__submit {
    margin-top: var(--space-1);
}

.wf-hs-invite__helper {
    font-size:   var(--text-xs);
    color:       var(--color-text-subtle);
    margin:      0;
    line-height: 1.5;
}

.wf-hs-invite__message {
    padding:       var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size:     var(--text-sm);
    line-height:   1.5;
}

.wf-hs-invite__message--success {
    background:   var(--color-teal-dim);
    border:       1px solid var(--color-primary);
    color:        var(--color-text);
}

.wf-hs-invite__message--error {
    background:   rgba(239, 68, 68, 0.08);
    border:       1px solid rgba(239, 68, 68, 0.4);
    color:        var(--color-text);
}

/* ── Alumni accordion ───────────────────────────────────────────────── */

.wf-hs-alumni {
    margin-bottom: var(--space-10);
}

.wf-hs-alumni__years {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.wf-hs-alumni__year {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
}

.wf-hs-alumni__year-toggle {
    display:         flex;
    align-items:     center;
    gap:             var(--space-4);
    width:           100%;
    padding:         var(--space-4) var(--space-5);
    background:      transparent;
    border:          0;
    text-align:      left;
    color:           var(--color-text);
    cursor:          pointer;
    font-size:       var(--text-base);
    transition:      background var(--transition-fast);
}

.wf-hs-alumni__year-toggle:hover,
.wf-hs-alumni__year-toggle:focus-visible {
    background: var(--color-surface-2);
    outline:    none;
}

.wf-hs-alumni__year-label {
    flex:        1 1 auto;
    font-weight: 600;
}

.wf-hs-alumni__year-count {
    font-size: var(--text-sm);
    color:     var(--color-text-muted);
}

.wf-hs-alumni__year-chevron {
    font-size:  var(--text-xl);
    color:      var(--color-text-subtle);
    transition: transform var(--transition-fast);
    transform:  rotate(0deg);
}

/* Rotate the chevron when the panel is expanded. Using aria-expanded
   as the state hook keeps the a11y attribute and visual state in sync. */
.wf-hs-alumni__year-toggle[aria-expanded="true"] .wf-hs-alumni__year-chevron {
    transform: rotate(90deg);
}

.wf-hs-alumni__year-panel {
    padding:       var(--space-5);
    border-top:    1px solid var(--color-border);
    background:    var(--color-bg);
}

/* ── State context ──────────────────────────────────────────────────── */

.wf-hs-state {
    padding:       var(--space-8);
    margin-bottom: var(--space-10);
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-align:    center;
}

.wf-hs-state__lead {
    font-size:     var(--text-base);
    color:         var(--color-text-muted);
    max-width:     560px;
    margin:        0 auto var(--space-5);
    line-height:   1.5;
}

.wf-hs-state__cta {
    display: inline-flex;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .wf-hs-hero__title {
        font-size: var(--text-4xl);
    }

    .wf-hs-roster__grid {
        grid-template-columns: 1fr;
    }

    .wf-hs-invite__card {
        padding: var(--space-5);
    }

    .wf-hs-invite__columns {
        grid-template-columns: 1fr;
        gap:                   var(--space-6);
    }

    .wf-hs-invite__row {
        grid-template-columns: 1fr;
    }

    .wf-hs-state {
        padding: var(--space-6);
    }
}