/* :root{
    font-size: 37.5px;
} */

@import url('utils.css');
@import url('header.css');
@import url('footer.css');
@import url('artist.css');
@import url('timeline.css');
@import url('overlay.css');
@import url('detail.css');
@import url('intro.css');

:root{
    --font-size-tiny:0.444rem;
    
    --main-offset-left-mobile:0.85rem;
    --main-offset-left-pc:1.25rem; 

    --footer-size-mobile: calc( 16 * 1rem / 26);
    --footer-size-pc: calc( 16 * 1rem / 36);
    --footer-size-up-pc:calc( 72 * 1rem / 36);
    --footer-size-open-mobile:calc( 54 * 1rem / 26);
    --footer-size-open-pc:calc( 106 * 1rem / 36);

    --header-margin-right:0.5rem;
    --header-margin-top:0.5rem;

    --header-btn-height:calc(46 * 1rem / 26);
    --header-height:calc(var(--header-margin-top) + var(--header-btn-height));

    --color-bg-white:#FDFDFD;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.8;
    /* background: #f5f5f5; */
    /* font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif; */

    font-size: 162.5%;/*292.5%;*/
    --bs-font-sans-serif: "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft YaHei", "Microsoft Jhenghei", sans-serif!important;
    /* font-family: -apple-system,PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,Arial, PingFang SC-Light, Microsoft YaHei; */
    font-family:var(--bs-font-sans-serif);
}

body * {
    box-sizing: border-box;
}
body{
    transition-property: background-color;
    transition-duration: 1s;
    background-color: var(--color-bg-white);
    color: black;/*#212529;*/
    max-width:100vmin;
    min-height:max(100vmax , calc( 100 * var(--vh)) );
    max-height:calc( 100 * var(--vh));
    margin: 0 auto;
}
body.news{ background-color: var(--color-bg-white); }
body.records{ background-color: #FF4D3E; }
body.shows{ background-color: #FFEC00; }
/* body.shows{ background-color: #2A00FF; } */
body.goods{ background-color: #00FF2E; }
body.videos{ background-color: #00FFFE; }

@media only screen and (min-width: 768px) {
    html {
        font-size: 225%!important;
    }
    :root{
        --header-margin-right:calc(36 * 1rem / 36);
        --header-margin-top:calc(27 * 1rem / 36);    
        --header-btn-height:calc(53 * 1rem / 36);
    }
    body{
        max-width:100vw;
        min-height:calc( 100 * var(--vh));
    }
}

#navHeader{
    width: 100%;
}

#mainCover{
    height:0px;
    z-index:100;
    position: relative;
    overflow: visible;

    width: 100%;
    margin-right: auto;
    margin-left: auto;

    transition-property: padding-left,flex-basis;
    transition-duration: .5s;
    padding-left: calc(var(--main-offset-left-mobile,20px) + var(--footer-size-mobile,16px) );
}
#mainCover .bs-wrapper-cover{
    /* display:flex; */
    /* flex-direction: column; */
    /* margin-left: 0.76rem; */
    overflow:hidden;
}
#mainCover .bs-wrapper-cover .bs-content-cover{
    /* display:flex; */
    /* flex-direction: column; */
    min-height: 100%;
    flex:1 1 100%;
    cursor: grab;
}
#mainCover .bs-wrapper-cover .bs-content-cover:active{
    cursor:grabbing;
}

/* main显示控制 */

/* #mainCover.loading #coverArtistsWrapper, */
/* #mainCover.loading #timelineWrapper, */
#mainCover.loading #errorMain,
#mainCover.loading #coverWrapper,
#mainCover loading{
    display:none;
}
#mainCover.loading loading{
    display:flex;
    height:100%;
}
#mainCover #coverArtistsWrapper,
#mainCover #timelineWrapper,
#mainCover #errorMain,
#mainCover #coverWrapper{
    display:block;
}


/* body 用Flex方式全屏使用 */
body.flex{
    /* 
    font-size:16px;
    font-size:1.2rem ;
    */
    color: black;/*#212529;*/

    display:flex;
    flex-direction: column;

    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);

    justify-content: stretch;
    align-items: flex-start;
    /* overflow: hidden; */
} 
body.flex #navHeader{
    order:1;
}
body.flex #mainCover.paddingCoverTop{
    /* order:2; */
    /* width:100%; */
    /* height:46px; */
    /* flex:0 0 46px; */
    padding-top:46px;
    padding-top:1rem;
}
@media only screen and (min-width: 768px) {
    body.flex #mainCover.paddingCoverTop-md{
        /* height:74px; */
        /* flex:0 0 74px; */
        padding-top:2.2rem;
        padding-left: calc(var(--main-offset-left-pc,46px));
    }
}
body.flex #mainCover{
    /* position: relative; */
    
    order:20;
    flex:1 1 100%;
    flex-basis: calc(var(--vh, 1vh) * 100 - var(--header-height));
    max-height: calc(var(--vh, 1vh) * 100 - var(--header-height));
}
/* 隐藏占位 */
body.flex #mainCover div.w-100.heightNav{
    display:none;
}
body.flex #mainCover div.bs-wrapper-cover.heightMain{
    height:100%;
}

/* 移动端:乐队列表页footer无尺寸，避免下方空白 */
body.flex #dr-footer{
    order:30;
    flex:0 0 0px;
    flex-basis: 0px;
    /* flex:0 0 193.2px; */
}

@media only screen and (min-width: 768px) {
    body.flex #mainCover{
        flex-basis: 100%;
    }
    /* PC版Footer高度和位置 */
    body.flex #dr-footer{
        position:inherit!important;
        bottom:inherit!important;
        flex-basis: var(--footer-size-pc,16px);
    }
}