/*
Theme Name: Agama Pro Child
Template: agama-pro
Theme URI: http://theme-vision.com/agama-pro/
Author: Theme Vision
Author URI: http://theme-vision.com/
Description: Agama Pro is Multi-Purpose, responsive WordPress theme.
Version:  1.5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, left-sidebar, grid-layout, flexible-header, accessibility-ready, buddypress, custom-background, custom-header, custom-logo, custom-menu, custom-colors, editor-style, featured-image-header, featured-images, full-width-template, footer-widgets, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, blog, e-commerce, education, entertainment, food-and-drink, holiday, news, photography, portfolio
Text Domain: agama-pro
*/

:root {
    --green-darkest: #085041;
    --green-dark:    #0A4535;
    --green-mid:     #0F6E56;
    --green:         #1D9E75;
    --green-pale:    #E1F5EE;
    --green-faint:   #F2FAF7;
    --hero-bg:       #0F6E56;
    --hero-heading:  #F0FAF6;
    --hero-body:     #A8D9C8;
    --hero-btn-bg:   #F0FAF6;
    --hero-btn-txt:  #085041;
    --ev-teal-bg:    #D4EFE6;
    --ev-teal-txt:   #0A4535;
    --ev-coral-bg:   #F5E0D8;
    --ev-coral-txt:  #5C2010;
    --ev-purple-bg:  #E5E3FB;
    --ev-purple-txt: #2D2578;
    --cta-bg:        #085041;
    --cta-txt:       #F0FAF6;
    --white:         #FFFFFF;
    --gray-faint:    #F5F5F3;
    --text-primary:  #1A1A17; /* These are probably controlled in Apperance > Customise*/
    --text-secondary:#4A4A44;
    --text-tertiary: #767670;
    --border:        rgba(0,0,0,0.08);
    --border-mid:    rgba(0,0,0,0.14);
	--inner:         1200px;
    --gap:           64px;
	--small-gap:	 32px;
	--font-body:     'DM Sans', sans-serif; /*actually skipping the first font, beccause Apperance > Customise don't have them */
	--font-display:  'DM Serif Display', serif;
}

.inner {
    max-width: var(--inner);
    margin: 0 auto;
    padding: 0 var(--gap);
    width: 100%;
}

/* --- TOP HEADER --- */
/* make the top part of the navbar follow 
 * before it was supposed to disappear when you scroll down
 * */
header#masthead {
	position: sticky; top: 0; z-index: 100;
}

/* override the padding */
#top-bar {
	padding: 12px var(--gap) !important;
}

#top-bar-wrap>div
{
	display: flex !important;
	align-items: center; 
	justify-content: space-between;
	
	column-gap: 10px;
	row-gap: 10px;
	
	float: none !important;
}

/* add gaps between the links*/
.top-links>ul {
	display: flex; 
	align-items: center;
	gap: 10px;
}

/* add border to links */
.top-links li:first-child>a, .top-links li>a
{
	padding: 8px 15px !important;
}

.top-links li>a
{
	/* stop link from splitting when the width becomes too small*/
	white-space: nowrap;
	
	/*font-size: 14px;*/
	border: 1px solid var(--border-mid); 
	border-radius: 20px;
	display: inline !important;
	/*color: var(--text-primary);*/
	background: var(--white);
	/*cursor: pointer;*/
	/*font-family: var(--font-body);*/ 
	/*transition: background 0.15s;*/
}

.top-links li>a:hover {
	background: var(--green-mid);
	color: var(--white) !important;
	border: 2px solid var(--white);
}

/* donation buttons color */
.top-links li:nth-of-type(4)>a
{
	border: none;
	background: var(--green-mid);
	color: var(--white) !important;
}
.top-links li:nth-of-type(4)>a:hover
{
	background: var(--green-darkest); 
}

@media screen and (max-width: 800px) 
{
	#top-bar-wrap>div
	{
		flex-direction: column;
	}
}

@media screen and (max-width: 600px)
{
	.top-links>ul {
		display: grid; 
		grid-template-columns: 1fr 1fr;
	}
	
	.top-links li>a {
		display: flex !important;
    	justify-content: center;
		align-items: center;
	}
}

/* they removed the box shadow, i just added it back */
@media (max-width: 767px) {
	.sticky-header {
		webkit-box-shadow: 0 1px 4px 0 rgba(167, 169, 164, .75) !important;
    	box-shadow: 0 1px 4px 0 rgba(167, 169, 164, .75) !important;
	}
}

/* --- BOTTOM HEADER --- */
.sticky-header {
	border-bottom: 1px solid var(--white);	
}

.sticky-nav {
	display: flex;	
}

.sticky-nav>li>a
{
	line-height: 50px;
}

.sticky-header-inner
{
	min-height: 50px;
}

.site-header .sticky-header nav {
	padding-right: none !important;
	float: none !important;
}

.sticky-nav>li.main-menu-item
{
	padding-right: 27px;
	padding-left: 20px;
	cursor: pointer;
	
	border-bottom: 3px solid transparent;
}

.sticky-nav>li.main-menu-item:hover
{
	border-bottom: 3px solid var(--green-dark);
}

.sticky-header ul
{
	float: none !important;
}

.sticky-nav ul.sub-menu
{
	transform: translatey(5px);
}

/* make a small gap */
.sticky-nav ul.sub-menu
{
	border-left: 1px solid var(--white);
}

.sticky-nav ul.sub-menu ul.sub-sub-menu
{
	border-right: 1px solid var(--white);
}

/* remove the bottom border thing */
.sticky-nav>li>ul, .sticky-nav > li > ul > li > ul
{
	border-bottom: none;
}

/* MOBILE BOTTOM HEADER */

nav.mobile-menu>ul.menu>li.menu-item-has-children>.dropdown-toggle:after {
	color: var(--green-dark);
}

nav.mobile-menu>ul.menu>li>ul li>a {
	font-size: 1em;
}

/* --- FOOTER WIDGETS --- */
/* this is the footer section above the aboriginal flag */
/* this is Footer Widget 1, Footer Widget 2, Footer Widget 3, etc in Appearance > Widgets */
#footer-wrapper {
	border-top: 1px solid var(--border) !important;
}

/* remove title underlines (e.g. Contact Us) */
.footer-widgets .widget-title:after
{
	display: none;
}

.footer-widgets h3.widget-title 
{
	/* cut down the padding and margin under the title*/
	padding: 0;
	margin-bottom: 14px;
	
	/* stop making the text capitalised */
	text-transform: none;
	
	/* override font*/
	/*font-family: 'DM Sans', sans-serif !important;*/
	font-weight: 600 !important;
}

.footer-org-desc {
	margin-bottom: 16px;
}

.footer-widgets .widget li
{
	padding: 0;
	margin-bottom: 10px;
}

/* --- FOOTER --- */
/* Please find the HTML in Appearannce > Customise > Footer > General > Code*/
.footer-top {
	border-top: 1px solid var(--border);
	padding: 20px 0;
}

.footer-top .inner {
	display: flex; align-items: center; gap: 16px;
	line-height: 1.7;
}

.footer-bottom {
	border-top: 1px solid var(--border);
	padding: 20px 0;
}
.footer-bottom .inner {
	display: flex; align-items: center; justify-content: space-between;
	line-height: 1.65;
	padding-bottom: 0;
}

@media (max-width: 600px) {
	.footer-top .inner {
		flex-direction: column
	}
}

/* --- HERO --- */
/* Section right underneath the navbar in the home page */
/* Please find this in templates/hero.php */
.hero {
	background: var(--hero-bg);
	padding: 100px 0 100px;
}
.hero .inner {
	display: flex; align-items: center;
	justify-content: space-between; gap: 48px;
}
.hero-left { max-width: 580px; }

.hero-eyebrow {
	font-size: 13px; font-weight: 500;
	color: var(--hero-body);
	letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px;
}

/* make the text bigger for chinese translation 
 * this is because the english fonts are disable when lang="zh-HK"
 * */
html[lang="zh-HK"] .hero-eyebrow {
	font-size: 16px;	
}

.hero-title {
	font-family: var(--font-display);
	font-size: 42px; 
	/* font-weight: 400; */
	font-weight: 600;
	color: var(--hero-heading); line-height: 1.2; margin-bottom: 18px;
}
.hero-sub {
	font-size: 17px; color: var(--hero-body);
	line-height: 1.75; margin-bottom: 36px; max-width: 480px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-btn-primary {
	font-size: 15px; padding: 13px 28px;
	background: var(--hero-btn-bg); 
	color: var(--hero-btn-txt) !important; /* important to stop Apperance > Customise Skins hover */
	border: none; border-radius: 20px; cursor: pointer; font-weight: 500;
	font-family: var(--font-body); transition: background 0.15s;
	
	text-align: center;
}
.hero-btn-primary:hover { background: var(--white); }
.hero-btn-secondary {
	font-size: 15px; padding: 13px 28px;
	background: transparent; 
	color: var(--hero-heading) !important; /* important to stop Apperance > Customise Skins hover */
	border: 1.5px solid var(--hero-body); border-radius: 20px;
	cursor: pointer; font-family: var(--font-body); transition: background 0.15s;
	
	text-align: center;
}
.hero-btn-secondary:hover { background: rgba(255,255,255,0.08); }

.hero-stats { 
	display: flex; 
	flex-direction: column; 
	gap: 12px; 
	flex-shrink: 0; 
	line-height: 1.65; /* this has been ADDED */
}

.hero-stat {
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 18px; padding: 18px 28px;
	text-align: center; min-width: 130px;
}
.hero-stat-num   { font-size: 26px; font-weight: 500; color: var(--hero-heading); }
.hero-stat-label { font-size: 13px; color: var(--hero-body); margin-top: 4px; }

@media (max-width: 600px) {
	.hero-stats {
		margin: auto;
		width: 100%;
	}
	
	.hero .inner {
		flex-direction: column;
		
		padding: 0 var(--small-gap);
	}
	
	.hero-actions {
		justify-content: center;
	}
	
	.hero-actions * {
		width: 100%;
	}
}


/* --- BANNER SPECIAL EVENT --- */
.banner .mobile
{
	display: none;
}

.banner a.banner-button
{
	border-radius: 20px;
	background: linear-gradient(135deg, #c69c49, #e6d49c);
	color: white !important;
	padding: 13px 28px;
	
	font-size: 15px;
	border: none; 
	cursor: pointer; 
	font-weight: 500;
	font-family: var(--font-body); 
	transition: filter 0.2s;
	
	text-align: center;
}

.banner a.banner-button:hover {
  filter: brightness(0.9);  /* lighten */
}

.banner a.banner-button:active {
  filter: brightness(0.9);   /* darken on click */
}

.banner
{
	position: relative;
}

.banner .banner-inner
{
	pointer-events: none;
}

.banner a.banner-button 
{
	pointer-events: fill;
}


.banner .non-mobile .banner-inner
{
	height: 100%;
    width: 25%;
    position: absolute;
    /* transform: translateX(-50%); */
    right: 0px;
    top: 0px;
    /* margin: auto; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner .mobile a.banner-button
{	
	position: absolute;
    transform: translateX(50%);
    right: 50%;
    bottom: 24px;
}

@media (max-width: 600px) {
	.banner .mobile {
		display: block;
	}
	
	.banner .non-mobile{
		display: none;
	}
	
}

/* --- DONATE --- */
/* this and TRUST BAND section has been added into footer.php only if the current page is the home page*/
/* find the html at /templates/donate.php and /templates/trust-band.php */
.donate-section {
	background: var(--green);
	padding: 56px 0;
}
.donate-section .inner {
	display: flex; align-items: center;
	justify-content: space-between; gap: 32px;
}
.donate-title {
	font-family: var(--font-display); font-size: 26px; 
	/*font-weight: 400;*/
	font-weight: 600;
	color: var(--white); margin-bottom: 10px;
}
.donate-sub { font-size: 16px; color: var(--white); line-height: 1.7; max-width: 560px; opacity: 0.9; }
.donate-btn {
	font-size: 15px; padding: 14px 32px;
	background: var(--hero-btn-bg); color: var(--hero-btn-txt);
	border: none; border-radius: 20px; cursor: pointer; font-weight: 500;
	font-family: var(--font-body); white-space: nowrap; flex-shrink: 0;
	transition: background 0.15s;
}
.donate-btn:hover { background: var(--white); }

@media (max-width: 600px)
{
	.donate-section .inner {
		flex-direction: column;
	}
}

/* --- EVENTS MOVING (automatically slides) --- */

/* this css doesn't seem to work anymore */
/*.events-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
}

.event-card {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: calc(33% - 40px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.event-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}*/

article.apbPost
{
	width: inherit;
	/*height: 296.2px;*/
	height: 332.2px;
}

#apbAdvancedPosts-1
{
	margin-bottom: 24px;
}

/* --- EVENTS --- */

/* To edit colours you can go to Events Addons > Shortcode Settings */
/* Make sure "Find out more" buttons snap to the bottom*/
div.ect-carousel-event-area {
	display: flex;
	flex-direction: column;
}

.ect-carousel-readmore {
	margin-top: auto;
	
	display: flex !important;
	justify-content: center !important;
}

.ect-carousel-readmore a {
	width: fit-content !important;
	padding: 8px 30px !important;
}

/* make the "find out more" button have rounded corners*/
.ect-carousel-readmore a {
	border-radius: 20px;
}

/* add border and make it rounded for the entire event */
.ect-carousel-event-area {
	border: 1px solid var(--border);
	border-radius: 20px;
	
	padding-bottom: 20px !important;
}
.ect-carousel-image {
	border-radius: 20px 20px 0 0;
}

.ect-carousel-event-area:hover {
	border-color: var(--border-mid);
}

.ect-carousel-title {
	text-align: center;
}

.ect-carousel-date {
	/* make the date section have rounded corners*/
	border-radius: 5px;
	/* center the text */
	text-align: center;
}

/* center location address */
div.ect-carousel-venue
{
	display: flex;
	justify-content: center;
}

div.carousel-view-venue
{
	display: flex;
}

div.carousel-view-venue, span.ect-venue-details
{
	width: fit-content !important;
}

/* make the location icon red */
i.ect-icon-location
{
	color: #ea4235;
}

/* show the location icon, but filled in */
i.ect-icon-location:before
{
	content: "\e811";	
}

/* make the time icon bigger */
i.ect-icon-clock
{
	font-size: medium;
}

/* make the time text bigger */
.ect-carousel-date .ev-time
{
	font-size: .55em !important;
}

/* change the colour of the carousel arrows to be darker */
#ect-carousel-wrapper .ect-events-carousel .slick-arrow i
{
	background: var(--green-mid) !important;
	box-shadow: 2px 2px 0 1px slategray !important;
	border-radius: 5px;
}

#ect-carousel-wrapper .ect-carousel-readmore a
{
	border: none;
	color: var(--white) !important;
	background-color: var(--green-mid);
}

#ect-carousel-wrapper .ect-carousel-readmore a:hover{
	opacity: 1;
	background-color: var(--green-darkest)
}


/* make date banner smaller */
.ect-carousel-date
{
	padding: 10px 10px !important;
}

/* make image section smaller */
.ect-carousel-image, .ect-carousel-image a 
{
	height: 150px !important;
}

.ect-carousel-image img {
	height: inherit !important;
}