/*

Theme Name:   Twenty Twenty One Child Theme (Dawson Walking Collective)
Theme URI:    https://dawsonwalks.mtlcreatives.ca/
Description:  A Twenty Twenty-One child theme for the Dawson Walking Collective
Author:       Patrick Phutthavong
Author URI:   http://patfp.com/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyone-child

*/

:root {
	--global--color-white: #ffffff;
	--global--color-grey: #6a6a6a;
	--global--color-yellow: #edc007 !important;
    --global--font-secondary: 'Roboto', sans-serif; /** Page font **/
}

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

div.section-header-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0px;
}

img.section-header-text {
    height: 60px;
}

img.section-header-rect {
    width: 100px;
}

/** 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;}

/** Remove anchor tag CSS effects for Site by PFP animation **/
a#pfp-animation:link { background-color: black !important; } 
a#pfp-animation:visited { background-color: black !important; } 
a#pfp-animation:active { background-color: black !important; } 
a#pfp-animation:hover { background-color: black !important; } 

/** Top Menu **/
.primary-navigation .primary-menu-container > ul > .menu-item > a {
    /**color: green !important;**/
    font-size: 28px !important;
    font-family: 'DM Serif Text', serif !important;
    font-weight: 400;
    letter-spacing: 1.5px;
}

.primary-navigation .primary-menu-container > ul > .menu-item > a:hover {
    /**color: #c1f200 !important;**/
    /**text-decoration: none !important;**/
    
}

.primary-navigation .primary-menu-container > ul >  li::before {
    content: "+";
    color: #c1f200;
    padding-top: 15px;
}

/** Top Navigation Menu: Removes the underline off the links but keeps the dotted line on hover-over **/
.primary-navigation .current-menu-item > a:first-child, .primary-navigation .current_page_item > a:first-child {
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-line: none;
}

/** Date and Time Styling **/
.date_wrapper {
    text-align: center;
    font-size: 36px !important;
    font-weight: bold;
    letter-spacing: 1.0px;
    margin-top: 40px;
    margin-bottom: 40px;
}
.day_of_week {
    font-family: 'DM Serif Text', serif !important;
    font-weight: 400;
    font-style: italic;
    text-transform: uppercase;
    color: #ecc100;

    
}
.year {
    font-weight: normal;
}
.time_of_walk{ 
    
}

/*==================================================
=            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-white) !important;
            --leader-image-width: 200px; /* Without this, the site logo expands to width of screen on iPhone 8+ */
		}

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
		
		:root {
			--leader-image-width: 400px;
		}

		/** Center top header logo only after hamburger disappears **/
		.site-branding {
			margin: auto;
		}
        
        .primary-navigation .primary-menu-container > ul >  li::before {
            padding-top: 20px;
        }
		
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
		
		:root {
			--global--font-size-base: 18px !important;
			/**--global--color-background: var(--global--color-yellow) !important;**/
			--leader-image-width: 650px;
		}
        
        .footer-col {
            padding-top: 0px;
        }
        

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
		
		:root {
			--leader-image-width: 800px;
		}
		
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
		
		:root {
			--global--font-size-base: 22px !important;
			--leader-image-width: 1000px;
            --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 800px); /** Change width of content area **/
		}
		
        .primary-navigation .primary-menu-container > ul >  li::before {
            padding-top: 15px;
        }

    }

/*==================================================
=          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: 'Questrial', sans-serif !important;
    letter-spacing: 2px;
    text-align: center;
}

.site-logo .custom-logo {
    max-width: var(--leader-image-width) !important;
    max-height: none;
    width: 100%;
}

.primary-navigation {
    margin-left: auto;
    margin-right: auto;
}

.primary-navigation > div > .menu-wrapper {
    justify-content: center;
}

.site-footer { 
	display: none; 
}

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

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

.photo-avatar {
    margin: 40px;
}