/*
Theme Name: YDDD-Ultimate
Author: YDDD
Version: 1.0
Description: Fully modular premium customizable WordPress gallery framework.
Text Domain: new-yddd-ultimate
*/

@import url('./assets/css/core.css');
@import url('./assets/css/header.css');
@import url('./assets/css/navigation.css');
@import url('./assets/css/hero.css');
@import url('./assets/css/gallery.css');
@import url('./assets/css/footer.css');
@import url('./assets/css/ornaments.css');
@import url('./assets/css/responsive.css');

/* ==================================================
   THEME VARIABLES
================================================== */

:root{

    --yddd-content-bg:#111827;

    --yddd-social-icon-size:22px;

}

/* ==================================================
   MOBILE WIDTH FIX
================================================== */

@media (max-width: 768px){

    .container,
    .site-content,
    .site-main,
    #content,
    #primary{

        width:100% !important;

        max-width:100% !important;

        margin:0 !important;

        box-sizing:border-box;
    }

    .entry-content,
    .content-box,
    .post-card{

        width:100% !important;

        max-width:100% !important;

        margin-left:0 !important;

        margin-right:0 !important;

        box-sizing:border-box;
    }

    .hero-grid{

        width:100% !important;

        max-width:100% !important;

        margin:0 !important;
    }

    .hero-card{

        width:100% !important;

        max-width:100% !important;
    }
}

/* ==================================================
   FOOTER BUILDER OVERRIDES
================================================== */

.footer-grid{

    display:grid !important;

}

.footer-column{

    width:auto !important;

    min-width:0 !important;

    margin:0 !important;

    padding:0 !important;

}

/* ==================================================
   GLOBAL
================================================== */

html,
body{

    background:#000 !important;

    color:#fff;

    margin:0;
    padding:0;

}

/* ==================================================
   LINKS
================================================== */

a{

    color:#d4af37;

    text-decoration:none;

    transition:
    color .3s ease,
    opacity .3s ease;

}

a:hover{

    color:#40E0D0;

}

a:visited{

    color:#7fffd4;

}

a:active{

    color:#9acd32;

}

a:focus{

    outline:none;

    color:#40E0D0;

}

/* ==================================================
   WRAPPERS
================================================== */

.site,
#page{

    background:transparent !important;

}

main.site-content{

    background:var(--yddd-content-bg) !important;
    border-radius:12px;
}

.single-page-wrapper{

    padding-top:20px !important;
}

/* ==================================================
   GAPS BETWEEN SECTIONS
================================================== */

.premium-navbar,
.site-main,
.hero-grid{

    margin-top:0 !important;
}

.premium-navbar{

    position:relative;

    margin-top:0 !important;
}

/* Chromium desktop only */

@supports (-webkit-appearance:none){

    @media (min-width:769px){

        .premium-navbar{

            top:20px;

            margin-top:0 !important;
        }
    }
}

/* ==================================================
   CONTENT AREA
================================================== */

.site-content,
#content,
#primary,
.content-box,
.post-card,
.entry-content{

    background:var(--yddd-content-bg) !important;
    border-radius:12px !important;
    padding:16px !important;
    overflow:hidden;
}

.single-entry{

    background:var(--yddd-content-bg) !important;
    border-radius:12px !important;
    padding:16px !important;
    overflow:hidden;
}

/* ==================================================
   GALLERY PAGE
================================================== */

.yddd-gallery-page{

    background:transparent !important;

    position:relative;

    z-index:2;

}

/* ==================================================
   FOOTER
================================================== */

.site-footer,
footer{

    background:rgba(17,24,39,0.85) !important;

    color:#ddd !important;

    position:relative;

    z-index:3;

    border-top:1px solid rgba(212,175,55,.12);

    padding-top:40px !important;

    padding-bottom:40px !important;

}

.footer-column{

    border-radius:20px !important;

    overflow:hidden;

}

/* ==================================================
   FOOTER LINKS
================================================== */

.site-footer a,
footer a{

    color:#d4af37;

}

.site-footer a:hover,
footer a:hover{

    color:#40E0D0;

}

/* ==================================================
   FOOTER TYPOGRAPHY
================================================== */

.site-footer,
.site-footer *{

    font-size:16px !important;

    line-height:1.7 !important;

    transform:none !important;

}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6{

    font-size:24px !important;

    line-height:1.3 !important;

    margin-top:0 !important;

    margin-bottom:1px !important;

}

.site-footer p,
.site-footer li,
.site-footer span,
.site-footer a{

    margin-top:0 !important;

    margin-bottom:14px !important;

}

/* ==================================================
   FOOTER LAYOUT
================================================== */

.site-footer .footer-columns,
.site-footer .footer-widgets{

    display:flex;

    flex-wrap:wrap;

    gap:24px;

    align-items:flex-start !important;

    justify-content:space-between;

}

.site-footer .footer-box,
.site-footer .widget{

    flex:1;

    min-width:0;

    margin:0 !important;

    padding:0 !important;

    align-self:flex-start !important;

}

/* ==================================================
   SITE DESCRIPTION
================================================== */

.site-description{

    margin-top:6px;

    font-size:.95rem;

    opacity:.75;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* ==================================================
   GLOBAL SPACING
================================================== */

section,
.wp-block-group,
.wp-block-columns,
.wp-block-cover,
.wp-block-media-text,
.widget,
.footer-box,
.hero-section,
.gallery-section,
.content-section{

    padding-top:0 !important;

    padding-bottom:0 !important;

}



/* ==================================================
   HEADINGS
================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    margin-top:0 !important;

    line-height:1.2;

}

/* ==================================================
   PARAGRAPHS
================================================== */

p{

    margin-top:0 !important;

}

/* ==================================================
   TABLES
================================================== */

table{

    margin:20px 0 !important;

}

/* ==================================================
   DIVIDERS
================================================== */

hr,
.wp-block-separator{

    margin:24px auto !important;

}



/* ==================================================
   ENTRY CONTENT
================================================== */

.entry-content > *:last-child{

    margin-bottom:0 !important;

}


/* ==================================================
   SOCIAL ICONS
================================================== */

.footer-social-link svg{

    width:var(--yddd-social-icon-size,22px);

    height:var(--yddd-social-icon-size,22px);

    display:block;

}

/* ==================================================
   HERO BOX SECTION POSITION
================================================== */

@media (max-width:768px){

    .hero-grid{

        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden;
    }

    .hero-card{

        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        box-sizing:border-box;
    }

    .hero-card-inner{

        min-width:0 !important;
        width:100% !important;
    }

    .hero-image-wrap{

        min-width:0 !important;
    }

    .hero-content{

        min-width:0 !important;
    }

    .hero-content p,
    .hero-content h2{

        overflow-wrap:break-word;
    }
}

/* ==================================================
   ULTRA COMPACT LAYOUT
================================================== */

section,
.wp-block-group,
.wp-block-columns,
.wp-block-cover,
.wp-block-media-text,
.widget,
.footer-box,
.hero-section,
.gallery-section,
.content-section{

    margin-top:6px !important;
    margin-bottom:6px !important;
}

.site-content,
#content,
#primary,
.content-box,
.post-card,
.entry-content{

    padding:16px !important;
}

h1,
h2,
h3,
h4,
h5,
h6{

    margin-bottom:6px !important;
}

p,
li{

    margin-bottom:6px !important;
}

.gallery-grid,
.wp-block-gallery{

    gap:8px !important;
}

.wp-block-spacer{

    height:10px !important;
}

.site-footer{

    padding-top:12px !important;
    padding-bottom:12px !important;
}

.footer-grid{

    gap:12px !important;
}

/* ==================================================
   PADDING ON MOBILE SCREEN
================================================== */

@media(max-width:700px){

    .site-header.shrink .site-header-inner{

        min-height:60px !important;

        padding:4px 8px !important;

        gap:4px !important;
    }

    .site-header.shrink .custom-logo{

        max-width:100px !important;

        max-height:40px !important;
    }
}

@media (max-width:768px){

    .site-header{
        top:5px !important;
        width:calc(100% - 10px) !important;
    }

    .site-header.shrink{
        padding:5px 10px !important;
    }

    .site-header.shrink .custom-logo,
    .site-header.shrink .logo-wrapper img{
        max-width:120px !important;
        max-height:50px !important;
    }
}


@media (max-width:768px){

    /* Main containers */

    .container,
    .site-content,
    .site-main,
    #content,
    #primary{

        padding-left:6px !important;
        padding-right:6px !important;
    }

    /* Content cards */

        .entry-content,
        .content-box,
        .post-card{
        
            padding:10px !important;
            border-radius:10px !important;
        }

/* Global section spacing */

    section,
    .wp-block-group,
    .wp-block-columns,
    .wp-block-cover,
    .wp-block-media-text,
    .widget,
    .footer-box,
    .hero-section,
    .gallery-section,
    .content-section{

        margin-top:8px !important;
        margin-bottom:8px !important;
    }

    /* Headings */

    h1,h2,h3,h4,h5,h6{

        margin-bottom:8px !important;
    }

    /* Paragraphs */

    p{

        margin-bottom:8px !important;
    }

    /* Entry content elements */

    .entry-content > *{

        margin-bottom:10px !important;
    }

    /* Footer */

    .site-footer{

        padding-top:12px !important;
        padding-bottom:12px !important;
    }

    .footer-grid{

        gap:10px !important;
    }

    /* Gallery */

    .gallery-grid,
    .wp-block-gallery{

        gap:8px !important;
    }

    /* Spacer blocks */

    .wp-block-spacer{

        height:12px !important;
    }

}