/*
Theme Name: WPDAC Archive
Author: Outright
Author URI: https://weareoutright.com/
Version: 0.0.1
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: wpdac-archive

*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

/* Fix strong and em styles */
strong{
    font-weight: bold;
}

em{
    font-style: italic;
}

u{
    text-decoration: underline;
}

/* Define font families for everything in the fonts directory */
@font-face {
    font-family: 'Flaviotte';
    src: url('/wp-content/themes/wpadc_archive/fonts/Flaviotte.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/wpadc_archive/fonts/Gotham-Book.otf') format('opentype');
    font-weight: 325;
    font-style: normal;
}
@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/wpadc_archive/fonts/Gotham-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/wpadc_archive/fonts/Gotham-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/wpadc_archive/fonts/Gotham-BookItalic.otf') format('opentype');
    font-weight: 325;
    font-style: italic;
}
@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/wpadc_archive/fonts/Gotham-Light.otf') format('opentype');
    font-weight: 300;
}
@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/wpadc_archive/fonts/Gotham-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}


html{
    font-size: 16px;
    color: white;
}

body{
    background: black;
    text-align: center;
}

.nav-toggle-button{
    background: transparent;
    cursor: pointer;
    border: 0;
}

/* HOME */
#home-title-wrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    max-width: 1032px;
    margin: 0 auto;
    padding-top: 40px;
}

.home-title-row{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#home-intro{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -311px;
}

#home-intro:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/wp-content/themes/wpadc_archive/images/WPA-ImageHero.png);
    background-repeat: repeat-x;
    background-position: 0 0;
    animation: Container_scrollBackground__cMte2 120s linear infinite;
    z-index: -1;
    opacity: .5;
}

@keyframes Container_scrollBackground__cMte2 {
    0% {
        background-position: -0 center;
    }
    100% {
        background-position: -3200px center;
    }
}

.home-intro-logo{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
}

.home-intro-search{
    width: 100%;
    max-width: 857px;
    margin: 0 auto;
    position: relative;
}

.home-intro-search input[type="text"]{
    display: block;
    width: 100%;
    padding: 17px 34px;
    border-radius: 100px;
    border: 0;
    font-size: 1.2rem; /* 18px */
}

.home-intro-search button[type="submit"]{
    background: transparent;
    border: 0;
    cursor: pointer;
    position: absolute;
    right: 17px;
    top: 13px;
}

#home-title-next{
    margin-top: -100px;
    padding-bottom: 100px;
}

#home-title-next a{
    background: transparent;
    cursor: pointer;
    border: 0;
    display: block;
    animation: Header_oscillate__kU54W 1.5s ease-in-out infinite;
}

@keyframes Header_oscillate__kU54W{
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(.75rem);
    }
    100% {
        transform: translateY(0);
    }
}

.edge{
    border-top: 1px solid white;
    width: 100%;
    max-width: 1032px;
}

.home-section{
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 52px;
    text-align: left;
    gap: 48px;
}

#featured-collections-and-stories{
    min-height: 415px;
}

#featured-collections-and-stories .background{
    background: white;
    border-radius: 40px 0 0 0;
    min-height: 415px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.title_row{
    position: relative;
    display: flex;
    color: black;
    max-width: 1032px;
    justify-content: space-between;
    gap: 14%;
    width: 100%;
    color: white;
}

.title_row h2{
    font-family: Flaviotte;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 378px;
    flex-shrink: 0;
}

.title_row p{
    font-family: Gotham;
    font-style: normal;
    font-weight: 325;
    line-height: 18.8px; /* 134.286% */
}

#featured-collections-and-stories .title_row{
    color: black;
}

.nav-toggle-button img{
    width: 24px;
    height: 24px;
}

/* HEADER */
.header-content{
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1032px;
    margin: 0 auto;
    padding: 45px 0;
}

.header-content .header-logo{
    height: 34px;
}

.header-buttons{
    display: flex;
    gap: 10px;
    align-items: center;
}

/* FOOTER */
#footer{
    height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 45px;
    box-sizing: border-box;
    text-align: left;
    background: white;
    position: relative;
    font-family: Gotham;
    font-size: 12px;
    font-style: normal;
    font-weight: 325;
    line-height: normal;
}

.footer-bg{
    border-top-left-radius: 40px;
    background: black;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

#footer.footer-homepage{
    background: #FF00D2;
    color: black;
}

.footer-homepage .footer-bg{
    background: white;
}

.footer-content{
    width: 100%;
    max-width: 1032px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-content .newsletter-link{
    border-radius: 20px;
    border: 1px solid #9B9B9B;
    color: #ffff;
    text-decoration: none;
    padding: 8px 18px;
    display: inline-block;
    margin-bottom: 38px;
}

.footer-homepage .footer-content .newsletter-link{
    color: #000;
}

.footer-logo{
    width: 169px;
    height: 49px;
}

.footer-content .row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-content a{
    text-decoration: none;
}

.footer-content .social-links{
    display: flex;
    gap: 18px;
}



/* PAGES */
.page-title-wrapper{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.page-title-content{
    min-height: 121px;
    width: 100%;
    max-width: 1032px;
    position: relative;
}

.page-title-wrapper h1{
    color: #FFF;
    font-family: Flaviotte;
    font-size: 96px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    text-align: left;
    position: absolute;
    bottom: -31px;
}

.page-title-wrapper .post-edit-link{
    position: absolute;
    bottom: 4px;
    right: 0;
    color: white;
    font-family: Gotham;
    text-decoration: none;
}


/* SLIDE IN MENU */
#slide-in-menu{
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
}

#slide-in-content{
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(180deg,#6741f5,#f66639);
    right: -100%;
    pointer-events: all;
    transition: right .4s ease-out;
    padding: 55px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

body.menu-open{
    overflow: hidden;
}

body.menu-open #slide-in-content{
    right: 0;
}

#slide-in-content .top-row{
    display: flex;
    justify-content: space-between;
    max-width: 1032px;
    width: 100%;
}

#slide-in-content .header-logo{
    height: 34px;
}

#slide-in-content .menu{
    display: flex;
    flex-direction: column;
    gap: 56px;
}

#slide-in-content .menu li{
    display: flex;
    justify-content: center;
    align-items: center;
}

#slide-in-content .menu a{
    color: #FFF;
    text-align: center;
    font-family: Flaviotte;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    text-transform: uppercase;
}

#slide-in-content .menu .external-link:after{
    content: '';
    width: 40px;
    height: 40px;
    background: url(/wp-content/themes/wpadc_archive/images/arrow-diag.svg);
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#slide-in-content .footer-slide-in-menu{
    width: 100%;
    max-width: 1032px;
    text-align: left;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 45px;
    box-sizing: border-box;
    text-align: left;
    position: relative;
    font-family: Gotham;
    font-size: 12px;
    font-style: normal;
    font-weight: 325;
    line-height: normal;
}

.pre-footer-link{
    position: relative;
    height: 183px;
    display: block;
    text-decoration: none;
}

.pre-footer-link .content{
    width: 100%;
    max-width: 1032px;
    display: flex;
    align-items: flex-end;
    color: var(--White, #FFF);
    font-family: Flaviotte;
    font-size: 96px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 auto;
    text-transform: uppercase;
}

.pre-footer-link span{
    position: absolute;
    bottom: -31px;
}


@media screen and (max-width: 1032px){
    #slide-in-content .top-row{
        flex-direction: column;
        gap: 2rem;
    }

    #slide-in-content .header-buttons{
        justify-content: flex-end;
        padding-right: 1rem;
    }

    #home-title-wrapper{
        padding: 40px 1rem 0;
    }

    #home-intro{
        padding: 0 1rem;
    }

    .title_row{
        flex-direction: column;
        padding: 0 1rem;
    }
    
    .title_row h2{
        width: auto;
        max-width: 100vw;
    }

    .footer-content{
        padding: 0 1rem;
    }

    .footer-content .row{
        flex-direction: column;
        gap: 2rem;
    }
}

@media screen and (max-width: 768px){
    .header-content{
        flex-direction: column-reverse;
        padding: 10px;
        gap: 10px;
    }

    .header-buttons{
        justify-content: flex-end;
    }

    .header-content .search-toggle{
        flex-grow: 1;
    }

    .page-title-wrapper{
        margin-top: 20px;
    }

    .page-title-wrapper h1{
        font-size: 42px;
        bottom: -14px;
    }

    .page-title-wrapper .post-edit-link{
        display: none;
    }

    .page-title-content{
        min-height: 70px;
    }

    .footer-content > div:first-child{
        text-align: center;
    }
}