/* MUST HAVE
----------------------------------------------- */
.says, 
.screen-reader-text,
.updated:not(.published),
.post-navigation h2 {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}
.hide {
    display: none !important;
}
.text-transform-none {
    text-transform: none !important;
}
.text-transform-uppercase,
.uppercase {
    text-transform: uppercase !important;
}
.text-transform-lowercase,
.lowercase {
    text-transform: lowercase !important;
}
.text-transform-capitalize,
.capitalize {
    text-transform: capitalize !important;
}

/* TYPOGRAPHY
----------------------------------------------- */

// legacy
.wi-button {
    display: table;
    margin: 0 auto;
    width: 50%;
    .wi-btn {
        text-align: center;
    }
}

/* BUTTON
-------------------- */
.fox-button {
    display: inline-block;
    margin: 0;
    vertical-align: bottom;
    
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    
    
    background-image: none;
    @include user-select(none);
    
    // ALIGN
    &.button-align {
        display: block;
        
        .fox-btn {
            display: inline-block;
        }
    }
    &.button-center {
        text-align: center;
    }
    &.button-left {
        text-align: left;
    }
    &.button-right {
        text-align: right;
    }
    
    // BLOCK
    &.button-block {
        display: block;
        
        .fox-btn {
            display: block;
            margin: 0 auto;
            min-width: 240px;
        }
    }
    &.button-block-half {
        .fox-btn {
            width: 50%;
        }
    }
    &.button-block-third {
        .fox-btn {
            width: 33.33%;
        }
    }
}
.fox-btn {
    
    display: block;
    text-align: center;
    line-height: 48px;
    padding: 0 28px;
    
    font-family: $heading;
    font-weight: normal;
    font-size: .9em;
    
    border: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    
    position: relative;
    transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out;
    
    &:focus {
        outline: 0;
    }
    
    i {
        margin-left: 8px;
        display: inline-block;
        line-height: inherit;
        font-size: inherit;
    }
    
}

/* ----- Shapes ----- */
.btn-round {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.btn-pill {
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

/* ----- Size ----- */
.btn-tiny {
    line-height: 28px;
    padding-left: 15px;
    padding-right: 15px;
    
    font-size: .8em;
    
    &.btn-outline,
    &.btn-fill {
        line-height: 26px;
    }
}
.btn-small {
    line-height: 38px;
    padding-left: 20px;
    padding-right: 20px;
    
    &.btn-outline,
    &.btn-fill {
        line-height: 36px;
    }
}
.btn-normal {
    line-height: 48px;
    padding-left: 28px;
    padding-right: 28px;
    
    &.btn-outline,
    &.btn-fill {
        line-height: 46px;
    }
}
.btn-medium {
    line-height: 58px;
    padding-left: 38px;
    padding-right: 38px;
    
    &.btn-outline,
    &.btn-fill {
        line-height: 56px;
    }
}
.btn-large {
    line-height: 68px;
    padding-left: 48px;
    padding-right: 48px;
    
    &.btn-outline,
    &.btn-fill {
        line-height: 66px;
    }
}

/* ----- Styles ----- */
.fox-btn {
    
    // OUTLINE
    &.btn-outline,
    &.btn-fill {
        background: none;
        color: black;
        border: 1px solid;
    }
    &.btn-fill:hover {
        color: white;
        background: black;
        border-color: black;
    }
    
    // BLACK
    &.btn-black {
        color: white;
        background: black;
    }
    
    // PRIMARY
    &.btn-primary {
        color: white;
        background: var(--accent-color);
    }
}

/* COMMON CLASSES
-------------------- */
.warning {
    background: #fff7cb;
    border: 1px solid #ffe40f;
    color: #956824;
}
.error {
    border: 1px solid #e1c4c4;
    color: #bb6a6a;
    background: #fff4f2;
}
.success {
    border: 1px solid #bdddbd;
    color: #71a971;
    background: #ebffeb;
}
.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}
.align-center {
    text-align: center;
}
.small-heading {
    font-size: .9em;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 400;
}
.post-thumbnail {
    margin: 0;
}
.text-light {
    font-weight: 300;
}
.text-normal {
    font-weight: normal;
}
.text-bold {
    font-weight: bold;
}
.text-italic {
    font-style: italic;
}
.text-lowercase {
    text-transform: lowercase;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}
.text-none {
    text-transform: none;
}

/* BACKGROUND IMG
---------------------------------------- */
.fox-background-img {
    display: block;
    position: relative;
    overflow: hidden;
    
    .height-element {
        display: block;
        padding-bottom: 100%;
    }
    .wrap-link,
    .bg-element {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .wrap-link {
        z-index: 30;
        color: inherit;
        text-decoration: none;
        border: 0;
        &:focus {
            outline: 0;
        }
    }
    .bg-element {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: center;
    }
}

/* FOX GENERAL GRID
 * for multi-purpose: gallery, posts etc
---------------------------------------- */
.fox-grid-container {
    overflow: hidden;
}
.fox-grid-gallery {
    display: flex;
    align-items: flex-end;
    flex-flow: row wrap;
}
.fox-grid {
    margin: -16px -8px 0;
}
.fox-grid-item {
    display: block;
    padding: 16px 8px 0;
}
.fox-grid {
    &.column-1 .fox-grid-item {
        width: 100%;
    }
    &.column-2 .fox-grid-item {
        width: 50%;
        
        @include media( mobile-small ) {
            width: 100%;
        }
        
    }
    &.column-3 .fox-grid-item {
        width: 33.33%;
        
        @include media( mobile-small ) {
            width: 100%;
        }
    }
    &.column-4 .fox-grid-item {
        width: 25%;
        
        @include media( mobile ) {
            width: 50%;
        }
        
    }
    &.column-5 .fox-grid-item {
        width: 20%;
        
        @include media( mobile ) {
            width: 25%;
        }
        @include media( mobile-small ) {
            width: 33.33%;
        }
        
    }
    &.column-6 .fox-grid-item {
        width: 16.66%;
        
        @include media( tablet ) {
            width: 33.33%;
        }
        @include media( mobile ) {
            width: 25%;
        }
        @include media( mobile-small ) {
            width: 33.33%;
        }
    }
    &.column-7 .fox-grid-item {
        width: 14.28%;
        
        @include media( tablet ) {
            width: 33.33%;
        }
        @include media( mobile ) {
            width: 25%;
        }
        @include media( mobile-small ) {
            width: 33.33%;
        }
        
    }
    &.column-8 .fox-grid-item {
        width: 12.5%;
        
        @include media( tablet ) {
            width: 25%;
        }
    }
    &.column-9 .fox-grid-item {
        width: 11.11%;
        
        @include media( tablet ) {
            width: 33.33%;
        }
        
    }
    &.column-10 .fox-grid-item {
        width: 10%;
        
        @include media( tablet ) {
            width: 20%;
        }
        @include media( mobile ) {
            width: 25%;
        }
        
    }
}
.fox-grid-item-main {
    
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0;
    
    img {
        display: block;
        width: 100%;
    }
}

/* Masonry Problem
---------------------------------------- */
.grid-sizer {
    // display: none;
}
.fox-masonry {
    
    min-height: 200px;
    position: relative;
    
    .fox-masonry-item {
        float: left;
    }
}
.fox-loading-element {
    
    display: block;
    position: absolute;
    top: 100px;
    left: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    
    margin: -20px 0 0 -20px;
    
    font-size: 24px;
    z-index: 200;
    
    i {
        display: block;
        line-height: inherit;
    }
    
    transition: opacity .3s, visibility .3s;
    
}
.loaded .fox-loading-element {
    opacity: 0;
    visibility: hidden;
}
.masonry-animation-element {
    opacity: 0;
    visibility: hidden;
    @include transform( translate(0,5px) );
    @include transition( all .3s ease-out );
    
    & + .masonry-animation-element {
        transition-delay: .15s;
    }
}
    
.fox-masonry-item.inview {
    .masonry-animation-element {
        opacity: 1;
        visibility: visible;
        @include transform( translate(0,0) );
    }
}

/* Metro
---------------------------------------- */
.fox-metro {
    
    .fox-metro-item {
        float: left;
        width: 33.33%;
        
        &:nth-child(6n+1) {
            clear: left;
        }
        &:nth-child(6n+1),
        &:nth-child(6n+4) {
            width: 66.66%;
        }
        &:nth-child(6n+4) {
            float: right;
            clear: right;
        }
        
    }
}

/* Grid Spacing
none, tiny, small, normal, wide, wider
---------------------------------------- */
.spacing-none {
    margin: 0;
    .fox-grid-item,
    .post-item,
    .main-stream-ad {
        padding: 0;
    }
    .post-item-body {
        padding-left: .8em;
        padding-right: .8em;
        
        // ???
        // padding-bottom: 2em;
    }
}
.spacing-tiny {
    margin: -40px -5px 0;
    .fox-grid-item {
        padding: 40px 5px 0;
    }
}
.spacing-small {
    margin: -40px -10px 0;
    .fox-grid-item {
        padding: 40px 10px 0;
    }
}
.spacing-normal {
    margin: -32px -16px 0;
    .fox-grid-item {
        padding: 32px 16px 0;
    }
}
.spacing-medium {
    margin: -48px -24px 0;
    .fox-grid-item {
        padding: 48px 24px 0;
    }
}
.spacing-wide {
    margin: -64px -32px 0;
    .fox-grid-item {
        padding: 64px 32px 0;
    }
}
.spacing-wider {
    margin: -80px -40px 0;
    .fox-grid-item {
        padding: 80px 40px 0;
    }
}

    /* ---- vertical spacing ---- */
.v-spacing-none {
    .post-list + .post-list {
        margin-top: 0;
    }
    .post-list-sep {
        padding-top: 0;
    }
}
.v-spacing-tiny {
    .post-list + .post-list {
        margin-top: .5em;
    }
    .post-list-sep {
        padding-top: .5em;
    }
}
.v-spacing-small {
    .post-list + .post-list {
        margin-top: 1em;
    }
    .post-list-sep {
        padding-top: 1em;
    }
}
.v-spacing-normal {
    .post-list + .post-list {
        margin-top: 2em;
    }
    .post-list-sep {
        padding-top: 2em;
    }
}
.v-spacing-medium {
    .post-list + .post-list {
        margin-top: 3.2em;
    }
    .post-list-sep {
        padding-top: 3.2em;
    }
}
.v-spacing-large {
    .post-list + .post-list {
        margin-top: 5em;
    }
    .post-list-sep {
        padding-top: 5em;
    }
}

@media (max-width: $ipad) {
    
    // wide, wider --> normal
    .spacing-wider,
    .spacing-wide,
    .spacing-medium {
        margin: -32px -16px 0;
        .fox-grid-item {
            padding: 32px 16px 0;
        }
    }
    
    .spacing-small {
        margin: -10px -5px 0;
        .fox-grid-item {
            padding: 10px 5px 0;
        }
    }
    
    // v spacing medium, large -> normal
    .v-spacing-medium {
        .post-list + .post-list {
            margin-top: 2em;
        }
        .post-list-sep {
            padding-top: 2em;
        }
    }
    .v-spacing-large {
        .post-list + .post-list {
            margin-top: 3em;
        }
        .post-list-sep {
            padding-top: 3em;
        }
    }
    
}

@media (max-width: $iphone) {
    
    // all to tiny spacing
    .spacing-wider,
    .spacing-wide,
    .spacing-medium,
    .spacing-normal,
    .spacing-small {
        margin: -10px -5px 0;
        .fox-grid-item {
            padding: 10px 5px 0;
        }
    }
    
}

// 2, 3, 4, 5 --> 2 columns
@media (max-width: $iphone) {
    
    // 4, 5, 6 -> 2 columns
    .fox-grid {
        &.column-3,
        &.column-4,
        &.column-5,
        &.column-6 {
            .fox-grid-item {
                width: 50%;
            }
        }
    }
    
}

/* 
 * Primary, Secondary and layout
 * Padding
 * we'll use padding of #wi-content wrapper
 * so that we can control it via page CSS
 *
 * .primary is the element that brings padding right when we have sidebar
-------------------------------------- */
.wi-content {
    // overflow: hidden; // NOTE!
    // overflow-x: hidden;
    padding: 20px 0 60px;
    
    @include media( tablet ) {
        padding-bottom: 40px;
    }
    @include media( mobile ) {
        padding-bottom: 30px;
    }
}
.home.blog .wi-content {
    overflow: hidden; // NOTE!
    
    padding-top: 10px;
    
    @include media( tablet ) {
        padding-top: 0 !important;
    }
}

/*
why??
.home.blog.paged .wi-content {
    padding-bottom: 60px;
    padding-top: 40px;
}
*/

/* ???
@media (max-width:1023px) {
    body .wi-content {
        padding-top:0;
    }
}
*/
.archive .wi-content {
    padding-top: 60px;
    padding-bottom: 80px;
}
.primary,
.secondary {
    display: block;
    min-height: 1px;
    position: relative;
    z-index: 20;
}

.has-sidebar {
    .primary,
    .secondary {
        float: left;
    }
    .primary {
        padding-right: 40px;
    }
}
.has-sidebar .primary,
.section-has-sidebar .section-primary {
    width: 74%;
    
    @include media( tablet ) {
        width: 70%;
    }
    
    @include media( mobile ) {
        width: 100%;
        float: none;
    }
}
.secondary,
.section-secondary {
    width: 26%;
    min-width: 100px;
    
    @include media( tablet ) {
        width: 30%;
    }
    
    @include media( mobile ) {
        width: 100%;
        float: none;
    }
}
.sidebar-left {
    .primary {
        padding-left: 40px;
        padding-right: 0;
        float: right;
    }
}

// sidebar layout starts from ipad portrait
@include media( tablet ) {

    .section-has-sidebar .section-primary,
    .has-sidebar .primary,
    .secondary,
    .section-secondary {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .sidebar-left .primary,
    .section-sidebar-left .section-primary {
        padding-left: 0;
        padding-right: 0;
        float: none;
    }
    
    // while it comes after .primary
    .secondary, 
    .section-secondary {
        margin-top: 2em;
    }
    
    /* hide it on ipad while ppl don't need to see sidebar for many times */
    .partial-content .secondary {
        display: none !important;
    }
    
}

@media ( max-width: 782px ) and ( min-width: 450px ) {
    
    /**
     * sidebar secondary on mobile
     * @since 4.3
     */
    .secondary,
    .section-secondary {
        .widget-area {
            .widget {
                width: 50%;
                padding: 30px 15px 0;
                margin: 0;
                display: block;
                float: left;
            }
            margin: -30px -15px 0;
        }
        .gutter-sidebar {
            width: 50%;
        }
    }
    .js .secondary .widget-area,
    .js .section-secondary .widget-area {
        opacity: 0;
        visibility: hidden;
        transition: all .3s ease-out;
        
        &.loaded {
            opacity: 1;
            visibility: visible;
        }
    }
    
}