/*
|--------------------------------------------------------------------------
| STUDIO FINDER — GLOBAL BRAND LAYER
| Build: SF_BRAND_SYSTEM_V2_20260818
|--------------------------------------------------------------------------
| Fonte: Studio Finder Brand Book v1.0.
| Questo file definisce i token ufficiali e rimappa i token legacy senza
| richiedere la modifica immediata di ogni singola pagina del portale.
|--------------------------------------------------------------------------
*/

:root,
html:root {
    /* ================================================================
       BRAND — valori ufficiali
       ================================================================ */
    --sf-offwhite: #F6F6F6;
    --sf-black: #000000;
    --sf-petrol: #056384;
    --sf-turquoise: #01ABAF;

    /* ================================================================
       STATI — valori ufficiali
       ================================================================ */
    --sf-success: #3A9D62;
    --sf-warning: #E7A63A;
    --sf-danger: #E05252;

    /* ================================================================
       TOKEN SEMANTICI
       ================================================================ */
    --sf-bg: var(--sf-offwhite);
    --sf-surface: #FFFFFF;
    --sf-text: var(--sf-black);
    --sf-text-muted: #5F6870;
    --sf-border: #DDE2E4;
    --sf-border-strong: #C9D1D5;

    --sf-brand: var(--sf-petrol);
    --sf-primary: var(--sf-petrol);
    --sf-primary-contrast: #FFFFFF;
    --sf-primary-soft: rgba(5, 99, 132, .10);
    --sf-primary-soft-strong: rgba(5, 99, 132, .16);

    --sf-accent: var(--sf-turquoise);
    --sf-search: var(--sf-turquoise);
    --sf-selection: var(--sf-turquoise);
    --sf-accent-contrast: #000000;
    --sf-accent-soft: rgba(1, 171, 175, .12);

    --sf-success-soft: rgba(58, 157, 98, .12);
    --sf-warning-soft: rgba(231, 166, 58, .16);
    --sf-danger-soft: rgba(224, 82, 82, .12);

    --sf-radius-sm: 10px;
    --sf-radius-md: 14px;
    --sf-radius-lg: 18px;
    --sf-radius-xl: 24px;
    --sf-shadow-card: 0 10px 28px rgba(0, 0, 0, .055);

    /* ================================================================
       TYPOGRAPHY
       Audiowide viene caricato nel PWA head sulle pagine che lo usano.
       Inter resta il font UI principale.
       ================================================================ */
    --sf-font-display: "Audiowide", "Arial Black", sans-serif;
    --sf-font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;

    /* ================================================================
       COMPATIBILITÀ — alias legacy più diffusi nel portale
       La specificità html:root permette al layer brand di prevalere anche
       su molti vecchi :root definiti successivamente.
       ================================================================ */
    --blue: var(--sf-primary);
    --blue-dark: var(--sf-primary);
    --blue2: var(--sf-primary);
    --green: var(--sf-success);
    --danger: var(--sf-danger);
    --bg: var(--sf-bg);
    --ink: var(--sf-text);

    --sf-blue: var(--sf-primary);
    --sf-blue-dark: var(--sf-primary);
    --sf-green: var(--sf-success);
    --sf-muted: var(--sf-text-muted);
    --sf-ink: var(--sf-text);
    --sf-line: var(--sf-border);

    --sfd-blue: var(--sf-primary);
    --sfd-blue2: var(--sf-primary);
    --sfd-green: var(--sf-success);
    --sfd-bg: var(--sf-bg);
    --sfd-ink: var(--sf-text);
    --sfd-line: var(--sf-border);

    --sfd13-blue: var(--sf-primary);
    --sfd13-green: var(--sf-success);
    --sfd13-bg: var(--sf-bg);
    --sfd13-ink: var(--sf-text);
    --sfd13-line: var(--sf-border);

    --sf-ui-accent: var(--sf-primary);
    --sf-ui-accent-2: var(--sf-accent);
    --sf-ui-bg: var(--sf-bg);
    --sf-ui-ink: var(--sf-text);
    --sf-ui-muted: var(--sf-text-muted);

    --sf-studio-blue: var(--sf-primary);
    --sf-studio-blue-dark: var(--sf-primary);
    --sf-studio-bg: var(--sf-bg);
    --sf-studio-text: var(--sf-text);
    --sf-studio-muted: var(--sf-text-muted);

    --sf-artist-blue: var(--sf-primary);
    --sf-artist-blue-dark: var(--sf-primary);

    --sf-admin-blue: var(--sf-primary);
    --sf-admin-blue-dark: var(--sf-primary);
    --sf-admin-bg: var(--sf-bg);
    --sf-admin-text: var(--sf-text);
    --sf-admin-muted: var(--sf-text-muted);

    --sfph-blue: var(--sf-primary);
    --sfph-blue-soft: var(--sf-primary-soft);
    --sfph-ink: var(--sf-text);
    --sfph-muted: var(--sf-text-muted);
    --sfph-line: var(--sf-border);

    --sf-mobile-blue: var(--sf-primary);
    --sf-mobile-bg: var(--sf-bg);
    --sf-mobile-line: var(--sf-border);

    --sf-pwa-blue: var(--sf-primary);
    --sf-pwa-blue-dark: var(--sf-primary);
    --sf-pwa-bg: var(--sf-bg);

    --sf-tour-blue: var(--sf-primary);
    --sf-tour-blue-dark: var(--sf-primary);
    --sf-tour-ink: var(--sf-text);
    --sf-tour-muted: var(--sf-text-muted);

    --sf-help-blue: var(--sf-primary);
    --sf-help-blue-dark: var(--sf-primary);
    --sf-help-green: var(--sf-success);
    --sf-help-bg: var(--sf-bg);
    --sf-help-text: var(--sf-text);
    --sf-help-muted: var(--sf-text-muted);

    --sfm-blue: var(--sf-primary);
    --sfm-blue-dark: var(--sf-primary);
    --sfm-bg: var(--sf-bg);
    --sfm-text: var(--sf-text);
    --sfm-muted: var(--sf-text-muted);

    --sfsc-blue: var(--sf-primary);
    --sfsc-green: var(--sf-success);
    --sfsc-bg: var(--sf-bg);
    --sfsc-text: var(--sf-text);
    --sfsc-muted: var(--sf-text-muted);
}

/* ================================================================
   BASE UI
   ================================================================ */
body,
button,
input,
select,
textarea {
    font-family: var(--sf-font-ui);
}

body {
    color: var(--sf-text);
}

.sf-brand-title,
.sf-display-title,
.sf-impact-number,
[data-sf-display-font="true"] {
    font-family: var(--sf-font-display);
    font-weight: 400;
    letter-spacing: .01em;
}

.sf-brand-title,
.sf-display-title {
    text-transform: uppercase;
}

::selection {
    background: var(--sf-selection);
    color: var(--sf-accent-contrast);
}

:focus-visible {
    outline: 3px solid rgba(1, 171, 175, .42);
    outline-offset: 2px;
}

/* Componenti nuovi canonici: usare questi nomi nei file nuovi. */
.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.sf-btn--primary {
    background: var(--sf-primary);
    color: var(--sf-primary-contrast);
}

.sf-btn--secondary {
    border-color: var(--sf-border-strong);
    background: var(--sf-surface);
    color: var(--sf-text);
}

.sf-btn--search,
.sf-btn--selected {
    background: var(--sf-accent);
    color: var(--sf-accent-contrast);
}

.sf-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.sf-status--success { background: var(--sf-success); color: #000000; }
.sf-status--warning { background: var(--sf-warning); color: #000000; }
.sf-status--danger  { background: var(--sf-danger); color: #FFFFFF; }

/* ================================================================
   LOGO — nessuna deformazione, filtro o ombra
   ================================================================ */
.sf-logo,
img.sf-logo,
.sf-brand-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    filter: none !important;
    box-shadow: none !important;
    transform: none;
}

.sf-logo-clearspace,
.sf-brand-lockup {
    padding: 18px;
}

/* Sidebar studio / artista: variante ufficiale per fondo scuro. */
.sf-studio-brand,
.sf-artist-brand {
    gap: 13px !important;
    padding-right: 14px !important;
    padding-bottom: 26px !important;
    padding-left: 14px !important;
}

.sf-studio-brand-mark,
.sf-artist-brand-mark {
    width: 34px !important;
    height: 46px !important;
    flex: 0 0 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent url('/assets/brand/studio-finder-symbol-white.png') center/contain no-repeat !important;
    box-shadow: none !important;
    filter: none !important;
}

.sf-studio-brand-mark span,
.sf-artist-brand-mark span {
    display: none !important;
}

.sf-studio-brand strong,
.sf-artist-brand strong {
    display: block !important;
    width: 136px !important;
    height: 59px !important;
    flex: 0 0 136px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    background: transparent url('/assets/brand/studio-finder-wordmark-dark.png') left center/contain no-repeat !important;
}

/* Admin sidebar. */
.sf-admin-brand {
    align-items: center !important;
    gap: 13px !important;
    padding: 8px 12px 22px !important;
}

.sf-admin-brand-mark {
    width: 34px !important;
    height: 46px !important;
    flex: 0 0 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent url('/assets/brand/studio-finder-symbol-white.png') center/contain no-repeat !important;
    box-shadow: none !important;
    filter: none !important;
}

.sf-admin-brand-mark span { display: none !important; }

.sf-admin-brand strong {
    display: block !important;
    width: 122px !important;
    height: 53px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: transparent url('/assets/brand/studio-finder-wordmark-dark.png') left center/contain no-repeat !important;
}

.sf-admin-brand small {
    margin-top: 10px !important;
    color: rgba(255,255,255,.68) !important;
}

/* Header pubblico: variante per fondo chiaro. */
.sfph-mark {
    width: 32px !important;
    height: 43px !important;
    flex: 0 0 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent url('/assets/brand/studio-finder-symbol-petrol.png') center/contain no-repeat !important;
    box-shadow: none !important;
    filter: none !important;
    color: transparent !important;
    font-size: 0 !important;
}

.sfph-brand > span:last-child {
    display: block !important;
    width: 116px !important;
    height: 50px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: transparent url('/assets/brand/studio-finder-wordmark-light.png') left center/contain no-repeat !important;
}

/* Home discovery legacy/current. */
.sf-home-brandmark {
    width: 32px !important;
    height: 43px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent url('/assets/brand/studio-finder-symbol-petrol.png') center/contain no-repeat !important;
    box-shadow: none !important;
    filter: none !important;
    color: transparent !important;
    font-size: 0 !important;
}

.sf-home-brand > span:last-child {
    display: block !important;
    width: 118px !important;
    height: 51px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: transparent url('/assets/brand/studio-finder-wordmark-light.png') left center/contain no-repeat !important;
}

/* ================================================================
   NAVIGAZIONE CONDIVISA
   ================================================================ */
.sf-studio-nav-item.active,
.sf-studio-footer-link.active,
.sf-artist-nav-item.active,
.sf-artist-nav-item.is-active,
.sf-artist-footer-link.active,
.sf-artist-footer-link.is-active,
.sf-admin-nav-item.active {
    background: var(--sf-primary) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.sf-admin-tabs a.active {
    background: var(--sf-primary) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.sf-studio-nav-badge,
.sf-artist-nav-badge,
.sf-studio-global-badge {
    background: var(--sf-danger) !important;
    color: #FFFFFF !important;
}

/* ================================================================
   HEADER / RICERCA PUBBLICA
   ================================================================ */
.sfph-topbar {
    background: rgba(246,246,246,.97) !important;
}

.sfph-search.is-active {
    border-color: var(--sf-accent) !important;
    background: var(--sf-accent-soft) !important;
}

.sfph-search-icon {
    background: var(--sf-accent) !important;
    color: #000000 !important;
    box-shadow: none !important;
}

.sfph-actions a.is-active,
.sfph-mobile-nav a.is-active {
    background: var(--sf-primary-soft) !important;
    color: var(--sf-primary) !important;
}

.sfph-actions .sfph-signup {
    background: var(--sf-primary) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.sfph-actions .sfph-admin {
    background: var(--sf-accent-soft) !important;
    color: #034D50 !important;
}

/* ================================================================
   COMPONENTI GLOBALI STUDIO
   ================================================================ */
.sf-studio-global-avatar {
    background: var(--sf-primary) !important;
    color: #FFFFFF !important;
}

.sf-studio-global-account-icon {
    background: var(--sf-primary-soft) !important;
    color: var(--sf-primary) !important;
}

/* ================================================================
   MAPPE — pittogramma ufficiale, senza ombre/filter
   ================================================================ */
.sf-brand-leaflet-marker {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.studio-map-marker {
    width: 34px !important;
    height: 46px !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    background: transparent url('/assets/brand/studio-finder-symbol-petrol.png') center bottom/contain no-repeat !important;
}

.studio-map-marker::after {
    display: none !important;
    content: none !important;
}

/* ================================================================
   ACCESSIBILITÀ / RIDUZIONE MOVIMENTO
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 520px) {
    .sfph-brand > span:last-child {
        width: 102px !important;
        height: 44px !important;
    }

    .sf-home-brand > span:last-child {
        display: none !important;
    }
}

/* ================================================================
   LOCKUP UFFICIALE — override finale
   Il logo completo viene usato come singolo asset, senza ricomporlo in UI.
   ================================================================ */
.sf-studio-brand-mark,
.sf-artist-brand-mark,
.sf-admin-brand-mark,
.sfph-mark,
.sf-home-brandmark {
    display: none !important;
}

.sf-studio-brand,
.sf-artist-brand {
    display: flex !important;
    align-items: center !important;
    min-height: 94px !important;
    padding: 8px 18px 24px !important;
}

.sf-studio-brand strong,
.sf-artist-brand strong {
    width: 176px !important;
    height: 80px !important;
    flex: 0 0 176px !important;
    background-image: url('/assets/brand/studio-finder-logo-dark.png') !important;
    background-position: left center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.sf-admin-brand {
    display: flex !important;
    align-items: center !important;
    padding: 8px 18px 24px !important;
}

.sf-admin-brand > div:last-child {
    min-width: 0;
}

.sf-admin-brand strong {
    width: 164px !important;
    height: 74px !important;
    background-image: url('/assets/brand/studio-finder-logo-dark.png') !important;
    background-position: left center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.sf-admin-brand small {
    margin-top: 18px !important;
}

.sfph-brand,
.sf-home-brand {
    display: inline-flex !important;
    align-items: center !important;
}

.sfph-brand > span:last-child {
    width: 132px !important;
    height: 60px !important;
    background-image: url('/assets/brand/studio-finder-logo-light.png') !important;
    background-position: left center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.sf-home-brand > span:last-child {
    width: 136px !important;
    height: 62px !important;
    background-image: url('/assets/brand/studio-finder-logo-light.png') !important;
    background-position: left center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* PWA / iPhone: sostituisce i vecchi segni grafici ricostruiti in CSS. */
.sf-pwa-launcher-icon,
.sf-iphone-brand-mark {
    border-radius: 0 !important;
    background: transparent url('/assets/brand/studio-finder-symbol-white.png') center/contain no-repeat !important;
    box-shadow: none !important;
    filter: none !important;
}

.sf-iphone-brand-mark {
    background-image: url('/assets/brand/studio-finder-symbol-petrol.png') !important;
}

.sf-pwa-launcher-icon span,
.sf-iphone-brand-mark span {
    display: none !important;
}

.sf-pwa-sheet-hero img {
    box-shadow: none !important;
}

.sf-pwa-primary-button {
    background: var(--sf-primary) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.sf-iphone-avatar {
    background: var(--sf-primary) !important;
    box-shadow: none !important;
}

.sf-iphone-more-card.is-active {
    border-color: var(--sf-accent) !important;
    background: var(--sf-accent-soft) !important;
    color: #000000 !important;
}

.sf-iphone-more-card.is-active > span,
.sf-iphone-more-card.is-active .sf-iphone-more-list-icon {
    background: var(--sf-accent-soft) !important;
    color: #000000 !important;
}

@media (max-width: 520px) {
    .sfph-brand > span:last-child {
        width: 112px !important;
        height: 51px !important;
    }

    .sf-home-brand > span:last-child {
        display: block !important;
        width: 110px !important;
        height: 50px !important;
    }
}