/*
 * TAKARADEX UI CONFIGURATION
 * ==========================
 * This is the first file to edit for global visual changes.
 * It is loaded last, so these values win over older compatibility rules.
 */

:root {
    /* Desktop shell */
    --td-shell-header: 100px; /* Altezza header desktop */
    --td-shell-sidebar: clamp(240px, 22vw, 350px); /* Larghezza menu laterale */
    --td-shell-gap: -70px; /* Spazio tra header e contenuto */
    --td-content-side-gap: 8px; /* Margine destro/sinistro contenuto */
    /* Mobile */
    --td-mobile-nav: 74px; /* Altezza barra inferiore */
    /* Componenti */
    --td-radius-sm: 12px;
    --td-radius: 18px;
    --td-radius-lg: 24px;
    /* Colori principali */
    --td-color-red: #940f12;
    --td-color-gold: #d8b55a;
    --td-color-text: #f7f1e4;
    /* Alias per i vecchi fogli di compatibilità. Non serve modificarli altrove. */
    --td-header-h: var(--td-shell-header) !important;
    --td-page-gap: var(--td-shell-gap) !important;
    --td-title-gap: var(--td-shell-gap) !important;
    --td-content-pad: var(--td-content-side-gap) !important;
    --td-side-w: var(--td-shell-sidebar) !important;
    --td-final-header-h: var(--td-shell-header) !important;
    --td-final-side-w: var(--td-shell-sidebar) !important;
    --td-final-gap: var(--td-content-side-gap) !important;
}

@media (min-width:921px){
  /* Posizione unica del contenuto desktop. Riduci --td-shell-gap per avvicinarlo all'header. */
  body.td-app-ready > :is(.container,.album-wrap,main.page,#page,#profilePage,.profile-wrap,.community-page,.main-content){
    margin-top:calc(var(--td-shell-header) + var(--td-shell-gap))!important;
    margin-right:var(--td-content-side-gap)!important;
    margin-bottom:48px!important;
    margin-left:calc(var(--td-shell-sidebar) + var(--td-content-side-gap))!important;
  }

  /* Compatibilità con pagine che mostrano ancora il vecchio titolo desktop. */
  body:not(.auth-loading) .td-clean-page-title{
    height:58px!important;
    min-height:58px!important;
    margin:calc(var(--td-shell-header) + var(--td-shell-gap)) var(--td-content-side-gap) 12px calc(var(--td-shell-sidebar) + var(--td-content-side-gap))!important;
    padding:0 18px!important;
  }
  body:not(.auth-loading) .td-clean-page-title h2{
    font-size:24px!important;
    letter-spacing:2.5px!important;
  }
}

@media (max-width:920px){
  /* Margini generali mobile. */
  body.td-app-ready{
    padding-left:8px!important;
    padding-right:8px!important;
    padding-bottom:calc(var(--td-mobile-nav) + 24px + env(safe-area-inset-bottom))!important;
  }
  /*
   * Barra mobile: evita il taglio superiore delle emoji su iPhone.
   */
  #tdNativeNav.td-nav-ready .td-nav-ico,
  .td-native-nav.td-nav-ready .td-nav-ico{
    line-height:1.25!important;
    overflow:visible!important;
    padding-top:2px!important;
    box-sizing:border-box!important;
  }
}