/*

Theme Name:   Twenty Twenty Five Child Theme (RHS 2001 Reunion)
Theme URI:    https://rhs2001reunion.com/
Description:  A Twenty Twenty-Five child theme for the RHS 2001 Reunion website
Author:       Patrick Phutthavong
Author URI:   http://patfp.com/
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  twentytwentyfive-child

*/

:root {
	--global--color-white: #ffffff;
	--global--color-grey: #6a6a6a;
	--global--color-yellow: #edc007 !important;
    --global--font-secondary: 'Roboto', sans-serif; /** Page font **/
    --bs-link-color-rgb: #000000 !important;
    --wp--style--global--content-size: 145px !important; /* Width of slices */
}

/* Padding of theme content area */
.has-global-padding
 {
    padding-right: 0px !important;
    padding-left: 0px !important;
}


html, body {
    letter-spacing: 1.5px;
}


/** Center a group of unordered list items. **/
ul {
  display: table;
  margin: 0 auto;
}

.footer-col {
    padding-top: 40px;
}

.footer-info {
    text-align: center;
    padding-top: 50px;
    letter-spacing: 2px;
}

/** Because bootstraps reboot.scss file overwrites regular achnor tag styles,
we need to specifically target content to make the links black, not blue **/
.entry-content > p > a:link      {color: #000000 !important;}
.entry-content > p > a:visited   {color: #000000 !important;}
.entry-content > p > a:active    {color: #000000 !important;}
.entry-content > p > a:hover     {color: #000000 !important;}

.footer-info > p > a:link      {color: #ffffff !important;}
.footer-info > p > a:visited   {color: #ffffff !important;}
.footer-info > p > a:active    {color: #ffffff !important;}
.footer-info > p > a:hover     {color: #ffffff !important;}

/* Underline all links */
:root :where(.wp-block-post-title a:where(:not(.wp-element-button))) {
    text-decoration: underline;
}



/** Date and Time Styling **/
.date_wrapper {
    /*text-align: center;*/
    font-size: 36px !important;
    font-weight: bold;
    letter-spacing: 1.0px;
    margin-top: 10pt;
    margin-bottom: 10pt;
}
.day_of_week, .faq-question, .faq-answer, .committee-job {
    font-family: 'DM Serif Text', serif !important;
    font-weight: 400;
    font-style: italic;
    text-transform: uppercase;
    color: #085e3c;   
}
.year {
    font-weight: normal;
}
.committee-job {
    
}


.alert-banner {
    /* background-color: #085e3c; */
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    font-size: 0.8em;
    padding-top: 10pt;
    padding-bottom: 10pt;
}

/* Targets header site logo banner */
.is-layout-flex > :is(*, div)
 {
    margin: 0;
    padding-left: 20pt;
    padding-right: 20pt;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}


.content-container {
    padding: 10px;
    margin: 0;
    width: 1000px;
    margin-bottom: 40pt;
}
img.section-header {
    margin-bottom: 10pt;
    width: 310px;
}
.header-line {
    width: 100%;
    border-top: dotted;
    margin-bottom: 10pt;
}
.content-slice-intro {
}
.content-slice-committee {
}
.content-slice-faq {
}
.content-slice-survey {
}
.content-slice-contact {
}

img.profile-pic {
    margin-bottom: 20pt;
    margin-top: 10pt;
}

.button {
    background-color: #085e3c;
    border-left: 10px solid #cbb976 !important;
    color: white;
    text-transform: uppercase;
    padding: 15px 32px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
p.info_footer {
    text-align: center;
}


/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    /**@media only screen and (min-width : 320px) {**/
    @media only screen and (min-width : 150px) {
		
		:root {
			--global--font-size-base: 16px !important;
			--global--color-background: var(--global--color-yellow) !important;
            
		}

    }

    @media only screen and (min-width : 350px) {
        
		:root {
			 --wp--style--global--content-size: 330px !important; /* Width of slices */
		}

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
		:root {
            --wp--style--global--content-size: 460px !important; /* Width of slices */
		}
        img.section-header {
            width: 440px;
        }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
		
		:root {
			--global--font-size-base: 18px !important;
            --wp--style--global--content-size: 748px !important; /* Width of slices */
			/*--global--color-background: var(--global--color-yellow) !important;*/
		}
        
        .alert-banner {
            font-size: 0.9em;
        }
        
        img.section-header {
            width: 628px;
        }
        
        img.profile-pic {
            float: left;
            margin-right: 20pt;
            margin-bottom: 20pt;
            margin-top: 10pt;
        }

        .footer-col {
            padding-top: 0px;
        }
        
        p.info_footer {
            text-align: left;
        }
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
		
        :root {
            --wp--style--global--content-size: 972px !important; /* Width of slices */
		}
		
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
		
		:root {
			--global--font-size-base: 22px !important;
            --wp--style--global--content-size: 1000px !important; /* Width of slices */
		}
        
        .alert-banner {
            font-size: 1em;
        }

    }

/*==================================================
=          END Bootstrap 3 Media Queries           =
==================================================*/

body, html {
    background-color: var(--global--color-background) !important;
    font-size: var(--global--font-size-base);
}

h1, .h1, h2, .h2, h3, .h3 {
    font-family: 'Arimo', sans-serif !important;
    letter-spacing: 2px;
    font-weight: 700 !important;
    font-style: normal;
}


div.custom-footer-slice {
    background-color: #085e3c;
    padding: 50px;
    color: #ffffff;
}

hr {
    width: 50% !important;
    height: 6px !important;
    background: black;
    margin-top: 20pt !important;
    margin-bottom: 20pt !important;
}