/**
 * TRHeader Component Styles
 *
 * Application header bar - transparent, positioned absolutely over hero content.
 */

.tr-header {
    position: absolute;
    top: calc(var(--tr-safe-top) + var(--tr-header-top));
    left: 0;
    right: 0;
    height: var(--tr-header-height);
    background: transparent;
    z-index: 10;
    --tr-header-side-margin: var(--tr-grid-margin);
}

/* Brand/Logo */
.tr-header-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.tr-header-brand-logo {
    width: var(--tr-header-logo-width);
    height: auto;
    display: block;
    transform: translateY(var(--tr-header-logo-offset-y));
}

/* Buttons in header */
.tr-header .tr-button {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tr-header-button-width);
    height: var(--tr-header-button-height);
    padding: var(--tr-header-button-padding-top) 12px var(--tr-header-button-padding-bottom) 12px;
    box-sizing: border-box;
    font-family: var(--tr-font-franklin-demi);
    font-size: var(--tr-header-button-font-size);
    text-transform: uppercase;
    letter-spacing: var(--tr-header-button-tracking);
    border: var(--tr-button-border-width) solid var(--tr-button-border-color);
    background: transparent;
    color: var(--tr-color-text);
    border-radius: var(--tr-button-radius);
    transform: translateY(calc(-50% + var(--tr-header-button-offset-y)));
}

.tr-header .tr-button:active {
    background: rgba(198, 241, 53, 0.1);
    border-color: var(--tr-color-accent);
}

/* REGISTRATI button — TennisRoots green */
.tr-header .tr-button:first-child {
    left: var(--tr-header-side-margin);
    border-color: var(--tr-color-green);
    color: var(--tr-color-green);
}

/* ACCEDI button — white */
.tr-header .tr-button:last-child {
    right: var(--tr-header-side-margin);
    border-color: #ffffff;
    color: #ffffff;
}

/* Narrow phones */
@media (max-width: 374px) {
    .tr-header {
        --tr-header-side-margin: 12px;
        --tr-header-button-width: min(112px, calc(50vw - 60px));
    }
}