/*
 Theme Name:     HCC Divi Child Theme
 Theme URI:      https://www.hopeandcouragecollective.org
 Description:    HCC Divi Child Theme
 Author:         Hope & Courage
 Author URI:     https://www.hopeandcourage.ie
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
   
/* Add underline on hover to paragraph text links and links within lists */
p > a:hover, ol > li > a:hover, ul > li > a:hover {
text-decoration: underline;
}

/* style the top donate button */
        @media only screen and (min-width : 981px) {
            .top-donate-button {
                border-radius: 0px;}
            .top-donate-button a {
                color: #000!important;}
            li.top-donate-button {
                background-color:#DE7741; 
                font-weight: 500; 
                text-transform: uppercase; 
                text-align: center; 
                padding: 14px 13px 14px 10px!important;
                border-radius: 1px;
                -moz-transition: all 0.5s; 
                -webkit-transition: all 0.5s;
                transition: all 0.5s;
                height: 41px;}
            li.top-donate-button:hover {
                background-color:#DE7741;}
            .top-donate-button a:hover {
                opacity: 1!important;}}
 
    /*make sure text is blacK even when menu is fixed */
        @media only screen and (min-width : 981px) {
            .et-fixed-header #menu-coloured-menu-buttons li.current-menu-ancestor>a#mp_get_started, 
            .et-fixed-header #menu-coloured-menu-buttons li.current-menu-item>a#mp_get_started,
            .et-fixed-header #menu-coloured-menu-buttons li.current_page_item>a#mp_get_started,
            .et-fixed-header #menu-coloured-menu-buttons a#mp_get_started {
                color: black!important;}}


/* style the coloured menu buttons */
/* Add a border round main menu items */
@media only screen and (min-width: 300px) {
.coloured-menu-button a {
        border: 2px solid;
        border-radius: 20px;
	text-align: center;
        padding: 8px !important;
        top: -8px;
        /* Correct the space below the menu */
        margin-bottom: 15px;
    }
    /* Make space for submenu "arrows" */
.coloured-menu-button > .menu-item.menu-item-has-children > a {
        padding-right: 16px !important;
    }
    /* Correct the position of the arrows */
.coloured-menu-button > .menu-item.menu-item-has-children > a:after {
        top: 8px; /* Same as padding amount from above*/
    }
.vertical-200px-coloured-button-menu .coloured-menu-button a {
		width: 200px;
	}
}

.wp-block-separator {
border-bottom: 1px solid;
}


.coloured-menu-button.blue-menu-button-bg a {
	border-color: #5583EE;
	background-color: #5583EE;
	color: white;

}
.coloured-menu-button.pink-menu-button-bg a {
	border-color: #E29FBC;
	background-color: #E29FBC;
	color: white;
}
.coloured-menu-button.orange-menu-button-text a {
	border-color: #DE7741;
	color: #DE7741;
}
.coloured-menu-button.orange-menu-button-bg a {
	border-color: #DE7741;
	background-color: #DE7741;
}
.coloured-menu-button.yellow-menu-button-bg a {
	border-color: #EFC85E;
	background-color: #EFC85E;
}
.coloured-menu-button.yellow-menu-button-text a {
	border-color: #EFC85E;
	color: #EFC85E;
        border: 2px solid;
        border-radius: 20px;
        padding: 8px !important;
        top: -8px;
        margin-bottom: 15px;
}
.coloured-menu-button.blue-menu-button-text a {
	border-color: #5583EE;
	color: #5583EE;
        border: 2px solid;
        border-radius: 20px;
        padding: 8px !important;
        top: -8px;
        margin-bottom: 15px; 
}
.coloured-menu-button.pink-menu-button-text a {
	border-color: #E29FBC;
	color: #E29FBC;
        border: 2px solid;
        border-radius: 20px;
        padding: 8px !important;
        top: -8px;
        margin-bottom: 15px; 
}

/*display the desktop menu on all devices*/

.hcc-scrolling-nav-menu .et_pb_menu__menu {
	display: block !important
}


/*hide the mobile menu*/

.hcc-scrolling-nav-menu .et_mobile_nav_menu {
	display: none !important;
}


/*force the menu to fullwidth to allow for the menu to scroll within it*/
.hcc-scrolling-nav-menu .et_pb_menu__menu {
	width: 100%;
}


/*set the menu to automatically overflow*/
.hcc-scrolling-nav-menu .et_pb_menu__wrap {
	overflow: auto;
}


/*keep the menu items horizontal and avoid stacking*/
.hcc-scrolling-nav-menu .et_pb_menu__menu ul.et-menu {
	white-space: nowrap !important;
	flex-wrap: nowrap !important;
	margin: 10px auto;
}


/*hide scrollbar on IE, Edge, and Firefox*/

.hcc-scrolling-nav-menu .et_pb_menu__wrap {
	-ms-overflow-style: none;
	scrollbar-width: none;
}


/*hide scrollbar on Chrome, Safari, and Opera*/
.hcc-scrolling-nav-menu .et_pb_menu__wrap::-webkit-scrollbar {
	display: none;
}

/* Adding scroll hints to start and end of colour button menu on mobile */
@media all and (max-width:980px){
/* .hcc-scrolling-nav-menu .et_pb_menu__menu ul.et-menu:before {
content: "\53";
right: 0;
position: absolute;
font-family: 'ETmodules';
top: -18px;} */
ul#menu-coloured-menu-buttons::before {
   content: "\34";
   color: black;
   font-family: 'ETmodules';
   font-weight: 600;
   position: relative;
   top: 0px;
   right: 0px;
   font-size: 32px;
}
ul#menu-coloured-menu-buttons::after {
   content: "\35";
   color: black;
   font-family: 'ETmodules';
   font-weight: 600;
   position: relative;
   top: 0px;
  left: 0px;
   font-size: 32px;
}
}

/* Force single column for menus in footer */
.footer-menu-locations li, .footer-menu-locations li a {
    width: 100%;
    text-align: left;
}

@media screen and (max-width: 980px) {

/* Stop footer menus turning into burgers */
.footer-menu-locations  .et_pb_menu__menu {
display: block;
}

.footer-menu-locations  .mobile_menu_bar {
display: none;
}

}

/* =============================================== */
/* Fullscreen menu on Mobile and maybe on Desktop! */
/* =============================================== */

/*align the hamburger menu to the right right*/

.always-burger-menu .hcc-fullscreen-menu .et_pb_menu__wrap {
	justify-content: flex-start !important;
}


/*hide the desktop version of the menu*/

.always-burger-menu .hcc-fullscreen-menu .et_pb_menu__wrap .et_pb_menu__menu {
	display: none !important;
}


/*show the mobile version of the menu on desktop*/

.always-burger-menu .hcc-fullscreen-menu .et_pb_menu__wrap .et_mobile_nav_menu {
	display: block !important;
	align-items: left !important;
}


/*style the opened menu*/

.always-burger-menu .hcc-fullscreen-menu .opened #mobile_menu1 {
	width: 100vw !important;
	position: fixed !important;
	top: 0em !important;
	left: 0vw !important;
	height: 100vh !important;
	display: flex !important;
	justify-content: left !important;
	flex-direction: column !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: visibility 0.3s, opacity 0.3s ease-in-out;
	padding: 0 !important;
	z-index: 4000
}


/*style the closed menu*/

.always-burger-menu .hcc-fullscreen-menu .closed #mobile_menu1 {
	background-color: #fff !important;
	text-align: center !important;
	width: 100vw !important;
	position: fixed !important;
	left: 100vw !important;
	top: 0em !important;
	height: 100vh !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	flex-direction: column !important;
	transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out;
	opacity: 0 !important;
	visibility: hidden !important;
}


/*remove the bullet points from the list items*/

.always-burger-menu .hcc-fullscreen-menu #mobile_menu1 li {
	list-style: none !important;
	text-align: center !important;
	width: 100%
}


/*move the menu to the top above other elements*/

.always-burger-menu .hcc-fullscreen-menu .et_pb_menu__wrap span.mobile_menu_bar {
	z-index: 999999 !important;
}


/*change the opened menu icon*/

.always-burger-menu .hcc-fullscreen-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
	content: "\4d" !important;
}


/*make the hamburger menu fixed position on mobile*/

.always-burger-menu .hcc-fullscreen-menu .opened .mobile_menu_bar {
	position: fixed !important;
}


/*remove the default blue border top on the mobile menu*/

.always-burger-menu .hcc-fullscreen-menu .et_mobile_menu {
	border-top: none;
}


/*remove the default background color on menu items*/

.always-burger-menu .hcc-fullscreen-menu .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*remove the default hover background color and adjust opacity*/

.et_mobile_menu li a:hover {
	background-color: transparent;
	opacity: 1;
}


/*remove the default border bottom on menu items*/

.always-burger-menu .hcc-fullscreen-menu .et_mobile_menu li a {
	border-bottom: none;

/* NB20230627T1630  New layout based on fullwidth blog rather than grid */
    /* This is giving the color of the whole grid */
.hcc-blog-grids .et_pb_ajax_pagination_container {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 300px 300px 300px 300px;
        background-color: red;
}
@media only screen and (max-width: 768px) {
.hcc-blog-grids .et_pb_ajax_pagination_container {
        display: grid;
        grid-gap: 0px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows:300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px;
        grid-gap: 5px;
        background-color: white;
}
}
.hcc-blog-grids .entry-title {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        padding: 10px;
        margin-top: 60px;
        z-index: 4;
        color: #fff!important;
        background-color: rgba(222, 222, 222, 0.7);
        border-color: white;
        border-style: solid;
        border-width: 1px;
}
/* This targets the excerpt
 * .hcc-blog-grids .post-content-inner {
 *         position: inline;
 *         top: 50%;
 *         left: 50%;
 *         transform: translate(-50%, -50%);
 *         width: 70%;
 *         padding: 10px;
 *         margin-top: 60px;
 *         z-index: 4;
 *         color: #fff!important;
 *         }*/
.hcc-blog-grids .entry-featured-image-url {
            opacity: 1;
            z-index: 1;
        }

   .hcc-blog-grids  img {
       background: rgba(0,255,0,0.5);
    height: 300px!important;
    object-fit: cover;
    opacity: 0.7;
}
}

/* This removes the shadow allowing me to use Divi's box layout to manage the width of the arch container */
#page-container { -moz-box-shadow:none !important; -webkit-box-shadow:none !important; box-shadow:none !important; 
			width: 100%!important;
			max-width:1200;
		}
/* Customise Layout for News Reports Blog */
.news-page-blog .et_pb_ajax_pagination_container {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 300px 300px 300px 300px;
}
@media only screen and (max-width: 768px) {
.news-page-blog.et_pb_ajax_pagination_container {
        display: grid;
        grid-gap: 0px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows:300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px;
        grid-gap: 5px;
        background-color: blue;
}
.news-page-blog .entry-title {
	display: none;
}
    .news-page-blog .et_pb_post.has-post-thumbnail .post-meta {
	display: inline-block;
	    margin-left: 5px;
    }
    .news-page-blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
	    float: left;
	    width: 85px;
	    object-fit: cover;
	    margin-bottom: 0px!important;
    }

    .news-page-blog .post-content {
	display: inline-block;
	margin-left: 90px;
	margin-top: -30px;
    }
}
@media only screen and (min-width: 1080px) {
/* Customise Layout for News Reports Blog */
    .news-page-blog .et_pb_post.has-post-thumbnail .entry-title {
	    display: none;
	    background: paleblue;
    }
    /* This is to display the date as formatted in the blog module */
    .news-page-blog .et_pb_post.has-post-thumbnail .post-meta {
        float: left;
        width: 120px;
        margin-right: 0%;
    }
    .news-page-blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
	    display: inline; 
	    width: 200px;
	    object-fit: cover;
	    float: none;
            margin: 0 15px 0 0;
	    margin-bottom: 0px!important;
    }
    .news-page-blog .post-content {
	    display: inline; 
	    float: right;
	    padding-left: 330pX;
    }

.news-page-blog .et_pb_post {
	border-bottom: 1px;
	border-color: #c9c9c9;
	}
}

/* Customise Layout for Solidarity Stories Blog */
/* Solidarity Blog Layout on Mobile */
@media only screen and (max-width: 768px) {
.hcc_solidarity_blog .et_pb_ajax_pagination_container {
        display: grid;
        grid-gap: 0px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 400px 400px 400px;
        grid-gap: 15px;
}
.hcc_solidarity_blog .entry-title {
	display: none;
}

    /* This allows me to map meta data repeatedly starting at top left of the featured images */
.hcc_solidarity_blog  article {
	position: relative;
}

/* The Featured Image */
.hcc_solidarity_blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
            margin: 0 0 0 0;
	    padding-left: 0px;
	    margin-bottom: 0px!important;
	    align:left;
    }

.hcc_solidarity_blog .et_pb_post.has-post-thumbnail .entry-featured-image-url img {
	    width: 100%;
	    height: 115px!important;
	    object-fit: cover;
    }


/* Targeting the individual meta tags to separate them */

/* This is to display the DATE as formatted in the blog module */
 .hcc_solidarity_blog .et_pb_post .post-meta span.published {
	position: absolute;
	top: 350px;
	left: 0px;
	color: #c9c9c9!important;
	background: #ffffff!important;
	padding: 0px;
	margin: 0px;
	text-align: left;
	font-size: 12px;
}
    /* First Category name */
.hcc_solidarity_blog .et_pb_post .post-meta a:nth-child(2) {
	position: absolute;
	top: 120px;
	left: 0px;
	color: #5583EE!important;
        border: 1px solid;
	border-color: #5583EE;
	background: #FFFFFF!important;
	margin-top: 10px;
	margin-bottom: 15px;
	border-radius: 20px;
	border-width: 1px!important;
	text-align: center;
	font-size: 8px;
	border-color: #5583EE!important;
	width: 65%;
}
    .hcc_solidarity_blog .post-content {
	    display: inline-block; 
	    float: left;
	    margin-top: 40px;
    }

.hcc_solidarity_blog .et_pb_post {
	border-bottom: 1px;
	border-color: #c9c9c9;
	}



}
/* Solidarity Blog on Desktop */
@media only screen and (min-width: 1080px) {
.hcc_solidarity_blog .et_pb_ajax_pagination_container {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 400px 400px 400px;
}

    .hcc_solidarity_blog .et_pb_post.has-post-thumbnail .entry-title {
	    display: none;
    }
    /* This allows me to map meta data repeatedly starting at top left of the featured images */
.hcc_solidarity_blog  article {
	position: relative;
}

/* Targeting the individual meta tags to separate them */

/* This is to display the DATE as formatted in the blog module */
 .hcc_solidarity_blog .et_pb_post .post-meta span.published {
	position: absolute;
	top: 365px;
	left: 0px;
	color: #c9c9c9!important;
	background: #ffffff!important;
	padding: 0px;
	margin: 0px;
	text-align: left;
}
    /* First Category name */
.hcc_solidarity_blog .et_pb_post .post-meta a:nth-child(2) {
	position: absolute;
	top: 245px;
	left: 0px;
	color: #5583EE!important;
        border: 1px solid;
	border-color: #5583EE;
	background: #FFFFFF!important;
	margin-top: 10px;
	margin-bottom: 15px;
	border-radius: 20px;
	border-width: 1px!important;
	text-align: center;
	font-size: 10px;
	border-color: #5583EE!important;
	width: 35%;
}

/* The Featured Image */
.hcc_solidarity_blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
	    object-fit: cover;
            margin: 0 0 0 0;
	    padding-left: 0px;
	    margin-bottom: 0px!important;
	    align:left;
    }
    .hcc_solidarity_blog .post-content {
	    display: inline-block; 
	    float: left;
	    margin-top: 40px;
    }

.hcc_solidarity_blog .et_pb_post {
	border-bottom: 1px;
	border-color: #c9c9c9;
	}

}

.hcc_solidarity_blog .et_pb_module .et_pb_post {
    display: flex;
    flex-direction: column;
}
.hcc_solidarity_blog .et_pb_module .et_pb_post .entry-title {
    order: 0;
}
.hcc_solidarity_blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
    order: 1;
}
.hcc_solidarity_blog .et_pb_module .et_pb_post .post-meta {
    order: 3;
}


/* Vertical in page navigation for Work page */
#menu-work-in-3-areas-vertical .current-menu-item a.mPS2id-highlight{
background: white!important;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

.text-list-with-small-gap li {
	margin-bottom: 10px;
}