/*
Theme Name: VTA Copy Center (Twenty-Twenty)
Description: A customized theme for VTA Document Services Online Form
Author: James Pham
Author URI: https://jamespham.io
Template: twentytwenty
Version: 1.13
*/

/***************/
/** VARIABLES **/
/***************/
:root {
    /* Colors */
    --darker-blue:              #0a5387;
    --dark-blue:                #29588C;
    --light-blue:               #4CB4E7;
    --cadet-blue:               #5f9ea0;

    --wc-blue:                  #017aca;
    --semantic-light-blue:      #96c8da;

    --off-white:                #f7f7f7;
    --lighter-gray:             #F4F4F4;
    --light-gray:               #EEEEEE;
    --medium-gray:              #cccccc;
    --dark-gray:                #9F9F9F;


    --dark-orange:              #e65100;

    --dark-red:                 #c62828;

    --green:                    #4caf50;
    --dark-green:               #1b5e20;

    /* Gradients */
    --header-gradient:          linear-gradient(
                                        90deg,
                                        rgba(10, 83, 135, 1) 0%,
                                        rgba(25, 95, 145, 1) 47%,
                                        rgba(80, 119, 161, 1) 79%,
                                        rgba(138, 164, 192, 1) 100%
                                );

    /* Borders */
    --thin-light-blue:          1px solid var(--semantic-light-blue);
    --thin-light-gray:          1px solid var(--light-gray);
    --thin-medium-gray:         1px solid var(--medium-gray);
    --thin-dark-blue:           1px solid var(--dark-blue);
    --normal-dark-blue:         2px solid var(--dark-blue);

    /* Dimensions */
    --footer-height:            166px;

    /* Button Shapes */
    --next-button-shape:        polygon(0% 0%, 75% 0%, 95% 50%, 75% 100%, 0% 100%);
    --next-button-padding:      1.5rem 4rem 1.5rem 2rem;

    --back-button-shape:        polygon(20% 0%, 100% 0%, 100% 100%, 20% 100%, 0% 50%);
    --back-button-padding:      1.5rem 2rem 1.5rem 4rem;

    --preview-button-shape:     polygon(0% 0%, 75% 0%, 90% 50%, 75% 100%, 0% 100%);
    --preview-button-padding:   1.5rem 2rem 1.5rem 2rem;

    /* Box shadows */
    /* @credit - https://codepen.io/sdthornton/pen/wBZdXq */
    --lightest-box-shadow:      0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --light-box-shadow:         0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --medium-box-shadow:        0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --heavy-box-shadow:         0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    --heaviest-box-shadow:      0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);

    /* Shapes */
    --octogon-clip:             polygon(10% 0, 90% 0, 100% 30%, 100% 70%, 90% 100%, 10% 100%, 0% 70%, 0% 30%);
    /* NOTE: these shapes are meant to be used w/ :before & :after classes */
    --top-trapazoid:            polygon(15px 0%, 0% 15px, 100% 15px, calc(100% - 15px) 0%);
    --top-trapazoid-reverse:    polygon(15px 15px, 0% 0%, 100% 0%, calc(100% - 15px) 15px);
    --bottom-trapazoid:         polygon(100% 100%, 0% 100%, 15px calc(100% - 15px), calc(100% - 15px) calc(100% - 15px));
    --bottom-trapazoid-reverse: polygon(100% calc(100% - 15px), 0% calc(100% - 15px), 15px 100%, calc(100% - 15px) 100%);
}

/** Animations **/
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


/************/
/** GLOBAL **/
/************/
html {
    box-sizing: border-box;
    font-size:  62.5%;
    min-width:  300px;
}

.hidden {
    display: none;
}

body {
    font-family:    "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    min-width:      300px;
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}

main#site-content {
    flex-grow: 2;
    overflow:  visible;
}

.main-content-background {
    background: var(--lighter-gray);
    border:     var(--thin-medium-gray);
}

ul {
    margin: 0;
}

/******************/
/** TOP NAV MENU **/
/******************/

/**
Menu Links
- Change color to black
 */
nav.primary-menu-wrapper > ul.primary-menu > li.menu-item > a {
    color: #000;
}

/**
Current/Selected Menu Links
- Change color to blue
- Remove underline from current link
 */
nav.primary-menu-wrapper ul.primary-menu > li.current-menu-item > a {
    color:           var(--light-blue);
    text-decoration: none;
}

/************/
/** HEADER **/
/************/

/**
Outside entry-header Wrapper
- flex the parent container
 */
header.entry-header {
    display:         flex;
    justify-content: start;
    flex:            0 0 100rem;
    min-width:       300px;
}

/* background style override; added CSS ID */
#entry-header-outer {
    background: var(--darker-blue);
    background: var(--header-gradient);
}

/* override padding rules of outside wrapper */
.singular header.entry-header {
    padding:   0;
    min-width: 300px;
}

/**
Inner entry-header Wrapper
-define container style within header
 */
.entry-header-inner.section-inner.medium {
    max-width:    50rem;
    margin:       0;
    padding:      5rem;
    border-right: 2rem white solid;
    text-align:   right;
}

/**
Header Site Description
-style text for site description
 */
h2.header-site-description {
    color:     #ffffff;
    font-size: 2rem;
    margin:    0;
}

/**
Header Title
-style text for page title
 */
.entry-header-inner.section-inner.medium h1 {
    color:       var(--light-blue);
    font-weight: 700;
    font-size:   4rem;
}

/**
screensize < desktop (1200px)
 */
@media (max-width: 1440px) {

    /**
    Outside entry-header Wrapper
    - center the title container
   */
    header.entry-header {
        justify-content: center;
    }

    /**
    Inner entry-header Wrapper
    - center text
    - remove divider
    */
    .entry-header-inner.section-inner.medium {
        text-align: center;
        border:     none;
    }

}

/******************/
/** PAGE CONTENT **/
/******************/

/**
Outer Wrapper for Posts/Page Content
- add padding to match header divider
- extend page content to the bottom
 */
div.post-inner {
    padding-left: 50rem;
}

/**
Inner Wrapper for Posts/Page Content
- add margin to the top of the entry-content container
- remove "times" font styling
- set max-width (for bigger screen)
- add padding
 */
div.entry-content {
    opacity:     0;
    transition:  opacity 0.3s ease;
    margin-top:  2rem;
    font-family: unset;
    max-width:   1200px;
    padding:     2em;
    flex-grow:   1;
}

@media (min-width: 2200px) {
    div.post-inner {
        margin:  auto;
        padding: 0;
    }

    div.entry-content {
        margin: 2rem auto;
        width:  1200px;
    }
}

/**
Child elements in entry-content
- override margin-left to left justify children
 */
.entry-content > * {
    margin-left: unset;
}

/**
Entry Content Paragraph
- extend the width of the paragraph
- change font weight
*/
.entry-content > p {
    max-width:     100% !important;
    font-weight:   600;
    margin-bottom: 5rem;
}

/* screensize < Large Screen (1440px) */
@media (max-width: 1440px) {

    /**
    Outer Wrapper for Posts/Page Content
    - remove padding to match header divider
    */
    div.post-inner {
        padding: 0;
    }

    /**
    Entry Content
    - center entry content (left padding on parent container no longer exists)
     */
    .entry-content {
        margin: auto;
    }

    /**
    Entry Content Paragraph
    - center contents on smaller screens
    */
    .entry-content > * {
        margin: auto;
    }

}

/*******************/
/** SERVICES PAGE **/
/*******************/

/**
Service Page Shortcode Ultimate buttons
- align buttons to the left (against the divider)
 */

#post-8 div.post-inner.thin > div.entry-content div.su-button-center a:hover,
#post-8 div.post-inner.thin > div.entry-content div.su-button-center a:active {
    background: #074bca !important;
}

#post-8 div.post-inner.thin > div.entry-content div.su-button-center > a span {
    font-size:   14px !important;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !important;
    font-weight: 700;
    top:         0 !important;
    margin:      auto;
    min-width:   225px;
    text-align:  left;
}

#post-8 div.post-inner.thin > div.entry-content div.su-button-center a {
    text-decoration: none !important;
    align-items:     center;
    display:         inline-flex !important;
    width:           100% !important;
    max-width:       4200px;
}

#post-8 div.post-inner.thin div.entry-content div.su-button-center {
    justify-content:       center;
    display:               inline-flex !important;
    flex-grow:             1;
    flex-wrap:             wrap;
    width:                 50%;
    height:                60px;
    min-width:             250px;
    max-width:             450px;
    -webkit-border-radius: 7px !important;
    -moz-border-radius:    7px !important;
    border-radius:         7px !important;
    margin:                5px;
}

#post-8 div.post-inner.thin div.entry-content div.elementor-widget-container div.elementor-shortcode {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

div.su-button-center {
    text-align: left;
}

div.su-button-center > a {
    width: 25rem;
}

/**
Service Page Content
- add backround & border
 */
article#post-8 div.post-inner div.entry-content {
    background: var(--light-gray);
    border:     var(--thin-medium-gray);
}

/**
Service Page Paragraphs
- add font style
 */
article#post-8 div.post-inner div.entry-content > p.intro-text {
    font-size:   2.2rem;
    font-weight: 600;
    color:       var(--darker-blue);
}

/* screensize < Medium Screens (1440px) */
@media (max-width: 1440px) {

    /**
    Service Page Shortcode Ultimate buttons
    - center buttons
     */
    div.su-button-center {
        text-align: center;
        margin:     2rem auto;
    }

}

/************/
/** FOOTER **/
/************/

/**
Parent Footer Container
- create blue background
- set text color as white
- reduce padding
- set min height
- align items vertically
 */
footer#site-footer {
    background:  var(--light-blue);
    color:       white;
    padding:     1rem;
    min-height:  var(--footer-height);
    display:     flex;
    align-items: center;
}

/**
Inner Footer Wrapper
- Center child items vertically
- expand the site of the container
- make position relative to "To the Top"
 */
footer#site-footer > div.section-inner {
    position:    relative;
    align-items: center;
    margin:      0 2rem;
    max-width:   unset;
}

/**
Footer Credits
 */
div.footer-credits {
    font-size: 2rem;
}

/**
Copyright
- increase font-size
 */
div.footer-credits > p.footer-copyright {
    font-size:      2rem;
    text-transform: uppercase;
}

/**
"Powered by WordPress" logo
- change color to white
- increase font-size
 */
div.footer-credits > p.powered-by-wordpress {
    font-size: 2.0rem;
    color:     white;
}

/**
Footer Contact Container
- add padding to container
 */
footer > div.section-inner > div.footer-contact {
    padding:    2rem;
    flex-basis: 510px;
}

@media (max-width: 1024px) {
    /**
    Footer Contact Container
    - hide on smaller screens
     */
    footer > div.section-inner > div.footer-contact {
        display: none;
    }
}

/**
Footer Contact Details
- reduce spacing between the paragraphs
 */
footer > div.section-inner > div.footer-contact p.footer-contact-info {
    margin-bottom: 2px;
}

/**
Inner Footer Menu Wrapper
- increase width
 */
nav.inner-footer-menu-wrapper {
    width:   50rem;
    padding: 2rem;
}

/**
Inner UL for Inner Footer Menu
- create flex behavior
- remove margin
- set max height to force vertical wrapping
 */
nav.inner-footer-menu-wrapper > ul.inner-footer-menu {
    display:         flex;
    flex-direction:  column;
    flex-wrap:       wrap;
    list-style:      none;
    margin:          0;
    max-height:      12rem;
    justify-content: space-between;
}

nav.inner-footer-menu-wrapper > ul.inner-footer-menu > li {
    display: inline;
}

/**
Menu Items
- change color, boldness, + font size
 */
nav.inner-footer-menu-wrapper > ul.inner-footer-menu > li > a {
    color:       white;
    font-size:   2rem;
    font-weight: 700;
}

/**
To The Top Link
- change font color
- adjust permanent position
 */
a.to-the-top {
    display: none;
    color:   white;
}


/**
< Smaller Screens (1200px)
 */
@media (max-width: 1200px) {

    /**
    Inner Footer Menu Wrapper
    - hide footer menu on smaller viewports
    */
    nav.inner-footer-menu-wrapper {
        display: none;
    }

    /**
    To The Top Link
    - show
     */
    a.to-the-top {
        display:  block;
        position: absolute;
        right:    0;
        bottom:   0;
    }

}

/* change verbiage early to avoid text collision */
@media (max-width: 835px) {

    .to-the-top-long {
        display: none;
    }

    /* override parent media query */
    .to-the-top-short {
        display: inline !important;
    }

}

/******************/
/** CONTACT PAGE **/
/******************/

/**
Contact Sub-Header
 */
div.entry-content > h5.contact-sub-header {
    text-decoration: underline;
}

/**
Contact Paragraph
- reduce font-weight
 */
div.entry-content > p.contact-paragraph {
    font-weight: 400;
}

/**
Center Map Image
 */
div.entry-content > figure.location-map {
    margin: auto;
}

/**
Contact Page Container
- add background color and border
 */
article#post-980 > div.post-inner > div.entry-content {
    background: var(--light-gray);
    border:     var(--thin-medium-gray);
}

/*********************/
/** USER GUIDE PAGE **/
/*********************/

/**
Remove strange max-width on WP content
 */
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: unset;
}

/**
Sub-Headers
- add text underline
 */
div.entry-content > h3 {
    text-decoration: underline;
}

/**
User Guide Page Container
- add background color and border
 */
article#post-890 > div.post-inner > div.entry-content {
    background: var(--light-gray);
    border:     var(--thin-medium-gray);
}

/**
Table of Contents
- reduce width
 */
ol.table-of-contents {
    max-width: 380px !important;
    margin:    auto;
}