/* CSS Document */
/*------------------------------------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------- MOBILE NAV --------------------------------------------------------- */
/*------------------------------------------------------------------------------------------------------------------------------ */
#touch-menu, #touch-menu .mobile-menu {top:0; text-decoration:none;}
article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* global or in nav.css */
:root { --menu-top: 360px; } /* initial fallback */

/*--------------------------------------------------------- FRAME --------------------------------------------------------- */
a.back-to-top {display: none; width: 60px; height: 60px; text-indent: -9999px; position: fixed; z-index: 999; right: 20px; bottom: 20px; background: #6db33f url("/i/common/up-arrow.png") no-repeat center 43%; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}

html {
  font-family:'Baloo 2', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; /* Sets base size */
}

body {
  margin-top:185px; padding: 0;
  background: url("/i/bg-fullwidth-2600-hearts.jpg") repeat center center; background-size: cover; font-family: 'Baloo 2', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
	@media (max-width: 1250px) {body{margin-top: 185px;}}
	@media (max-width: 1100px) {body{margin-top: 147px;}}
	@media (max-width: 900px) {body{margin-top: 113px;}}
	@media (max-width: 775px) {body {margin-top: 142px;}}
	@media (max-width: 630px) {body {margin-top: 132px;}}
	@media (max-width: 575px) {body {margin-top: 135px;}}
	@media (max-width: 505px) {body {margin-top: 135px;}}
	@media (max-width: 460px) {body {margin-top: 120px;}}

.wrapper {max-width: 2000px; margin: 0 auto; padding: 0;box-sizing: border-box; }

/* The Close Button */
.close {color: red;float: right;font-size: 28px;font-weight: bold;}
.close:hover, .close:focus {color: #e01e3c;text-decoration: none;cursor: pointer;}

/* -------------------------------------------------- TOP NAV BAR ------------------------------------ */
#topbar {height:60px; background-color:#361a52; max-height: 60px; width:100%;}
#topwrap {height:60px; clear:both; max-height: 60px; width:85%; margin: 0 auto;}
#topleft {width:45%; margin:1.5% 3% 0 5%; text-align:left; float: left}
#topright {width:30%; max-height: 45px; margin-top:0.5%; text-align:right; float: right}

#ddfixedheader {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    background-color: #ffffff;
    z-index: 5000;
    padding: 0;
    transition: all 0.5s;
}

#ddfixedheader, #ddfixedheader * {box-sizing: border-box;}

/* ########## Fixed header when user begins to scroll down ########## */
html.collapseheader #ddfixedheader {position: fixed; border-bottom-width: 0; border-bottom-color: #698bbd; box-shadow: 0 2px 2px #eee; opacity: 1;}
/* ########## Fixed header ########## */
/* Make the logo smoothly resize */
#ddfixedheader .logo img {transition: max-width .25s ease, padding .25s ease, filter .25s ease;}

/* Desktop: shrink header padding and logo when scrolled */
html.collapseheader #ddfixedheader {padding-top: 2px !important;padding-bottom: 2px !important;}
html.collapseheader #ddfixedheader .logo img {max-width: 160px; padding: 4px 0; filter: saturate(1.05);}

@keyframes fadeIn {from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); }}

/* Mobile tweak: if you want a smaller collapsed logo on ≤900px */
@media (max-width: 900px) {
  html.collapseheader #ddfixedheader .logo img {max-width: 160px;padding: 2px 0;}}

.header-left {flex: 0 0 20%; padding: 20px;}
	.logo {width:100%; float: none; margin-left: 3%;}
	.logo img {max-width: 225px; height: auto; padding: 15px;}
.header-right {flex: 0 0 80%; display: flex; flex-direction: column; align-items: flex-start;}

	@media (max-width: 1250px ) {
		.logo {width: 100%; margin: 0 auto;padding: 0;clear: both;}
		.logo img {max-width: 200px;height: auto;padding: 15px;margin: 0 auto;}
		.header-left {flex: 0 0 15%; padding: 20px;}
		.header-right {flex: 0 0 85%; display: flex; flex-direction: column; align-items: flex-start;}
	}
	@media (max-width: 1100px ) {
		.logo {width: 100%; margin: 0 auto;padding: 0; clear: both;}
		.logo img {max-width: 190px;height: auto;padding: 10px;margin: 0 auto;}
		.header-left {flex: 0 0 20%; padding: 10px;}
		.header-right {flex: 0 0 80%; display: flex; flex-direction: column; align-items: flex-start;}
	}
	@media (max-width: 900px ) {
		header {display: flex; flex-direction: column-reverse;}
		.header-left, .header-right {flex: 0 1 100%; width: 100%; margin: 0 auto; text-align: center;}
		.logo {width: 100%; margin: 0 auto;padding: 0;clear: both;}
		.logo img {max-width: 185px;height: auto;padding: 0;margin: 0 auto;}
		.header-right {display: flex;flex-direction: column; align-items: flex-start; background-color: #fff;}
	}
	@media (max-width: 768px ) {
		.logo {width: 80%;padding: 2%;text-align:center;}
		#ddfixedheader {flex-direction: column; align-items: stretch;}
	}


nav {display:block; background:#ffffff; width:100%; margin:0 auto; text-align:center; z-index: 1000;}

/* Ensure the UL that holds the top-level items has no default padding */
	@media screen and (min-width: 901px) and (max-width: 1300px) {nav .menu { margin: 0; padding: 0; }}
/* Ensure the UL that holds the top-level items has no default padding */
	@media (max-width: 1024px ) {
		nav ul {width: 100%; padding-top:0px; margin:0 auto;}
		nav ul li {line-height: 1.4em; margin-left:10px; list-style-type:none; list-style:none;}
	}
	@media (max-width: 900px) {
		nav {position: relative; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
		 nav .menu {
			position: fixed;
			top: calc(var(--menu-top, 360px) + var(--mobile-menu-gap)); /* keep + small gap */
			left: 0;
			width: 100vw;
			max-height: 80vh;
			overflow-y: auto;
			background: #542989;
			box-shadow: 0 4px 16px rgba(0,0,0,.12);
			flex-direction: column;
			padding-top: 0;            /* ensure no extra top padding sneaks in */
		  }
	}


.menu {display:block; width:100%;}

/* TOP LEVEL MENU FONT */
.menu li {font-size:1.4em; padding:0;}
.menu > li > ul.sub-menu > li > a {font-size:1em;}

	@media (max-width: 1250px) {.menu li {font-size:1em !important;}}
	@media (max-width: 1100px) {.menu li {font-size:1em !important; padding:0px;}}


.menu li {display: inline-block; position: relative; z-index:100; margin-left:2%;}
.menu li.help {width:170px;}
.menu li.about {width:170px;}
.menu li.fam {width:170px;}
.menu li.contact {width:170px;}
.menu li.donate {width:170px; background-color:#e21d37;} 


@media (max-width: 1450px) {
  	.menu li.help {width:170px;}
	.menu li.about {width:150px;}
	.menu li.fam {width:150px;}
	.menu li.contact {width:150px;}
	.menu li.donate {width:150px;}
}
@media (max-width: 1250px) {
	.menu li {margin-left:0;}
	.menu li.about {width:150px; margin-left: 0 !important; }
	.menu li.help {width:160px;}
	.menu li.fam {width:130px;}
	.menu li.contact {width:160px;}
	.menu li.donate {width:130px;}
}

@media (max-width: 1100px) {
	.menu li.help {width:150px;}
	.menu li.about {width:130px;}
	.menu li.fam {width:120px;}
	.menu li.contact {width:130px;}
	.menu li.donate {width:120px;}
}

.menu li:first-child{margin-left:0;}

.menu li a {font-weight:600; text-decoration:none; padding:10px 10px 7px 10px; display:block; color:#552988;
-webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s;}

.menu li.donate a {color:#fff;}
	@media (max-width: 900px) {.menu li.donate a {color:#fff; background-color: #e21d37;}}

.menu li a:hover, .menu li:hover > a{color:#ffffff; background:#552988;}
.menu ul {margin: 0; padding: 0; width: auto; position: absolute; top: 100%; left: 0; background: #ffffff; visibility: hidden; opacity:0; transition: opacity 0.3s ease, visibility 0.3s ease;}

.menu ul {border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds depth */ overflow: hidden; border: 1px solid #ddd; animation: fadeIn 0.3s ease-in-out;}

.menu ul {background: linear-gradient(to bottom, #ffffff, #f9f9f9);}
.menu ul li {display:block; float: none; background:none; margin:0;padding:0; line-height:1em;}
.menu ul li a {font-weight:normal; text-decoration:none; display:block; color:#552988; background:#c0cfe1;}


/* NEW */
.menu ul li a {padding: 10px 15px; margin: 0; border: none; box-sizing: border-box;}
.menu ul, .menu ul li a {box-sizing: border-box;}
.menu ul li a:hover, .menu ul li:hover > a{background:#eeeeee; color:#552988;}
.menu li:hover > ul{ visibility:visible; opacity: 1;}

/* NEW */
.menu ul li a {transition: background 0.3s ease, color 0.3s ease;}
.menu ul li a:hover {background: #f5f5f5;color: #552988;}
.menu ul ul {left: 0px; top: 0px;}

.mobile-menu{display:none; width:100%; padding:11px; background:#ffffff; color:#552988; text-transform:uppercase; font-weight:600; overflow:hidden;}
.mobile-menu:hover{display:block; background:#fff; color:#ffffff; text-decoration:none;}


@media (max-width: 1380px) {.menu li{display: inline-block; position: relative; z-index:100; margin-left:2%;}}
		
/* --- Mobile Navigation Styles --- */
	
	@media (max-width: 900px) {
		/* Hidden by default on mobile */
		.hamburger {display: flex; position: absolute; top: 10px; right: 15px; z-index: 2100;}
		  .menu {
			position: fixed;                /* more reliable overlay than absolute */
			top: var(--menu-top);           /* dynamic top based on header height */
			left: 0;
			width: 100vw;
			background-color: #542989;
			box-shadow: 0 4px 16px rgba(0,0,0,0.12);
			flex-direction: column;
			padding: 0;
			max-height: 80vh;
			overflow-y: auto;
			z-index: 2000;
			transition: transform 0.3s ease;
  }

		  .menu.active {display: flex; transform: translateY(0);}
		  .menu li {display: block; width: 100%; margin: 0; border-bottom: 1px solid #eee; position: relative;}
		  .menu li a {
			padding: 12px 15px;
			color: #552988;
			background: #fff;
			border: none;
			box-sizing: border-box;
			transition: background 0.2s;
		  }
		  .menu li a:hover {background: #f5f5f5; color: #552988;
		 }
		  /* Submenu styles for mobile */
		  .menu ul {
			position: static;
			width: 100%;
			box-shadow: none;
			border-radius: 0;
			background: #f9f9f9;
			visibility: visible;
			opacity: 1;
			display: none;
			padding: 0;
			margin: 0;
			transition: none;
		  }
		.menu li.open > ul {display: block;}
		.menu ul li a {padding: 16px 32px; background: #f9f9f9; color: #552988; border: none;}
		.menu ul li a:hover {background: #eee; color: #552988;}
		.menu li:hover > ul, .menu ul li:hover > a {background: inherit; color: inherit;}
		
		.menu li.help, .menu li.about, .menu li.fam, .menu li.contact, .menu li.donate {width:100%;}

}
/* ---- Mobile: place overlay directly below the hamburger + 30px gap ---- */
@media (max-width: 900px) {:root {--mobile-menu-gap: 0px;}

  /* Keep menu hidden until opened */
  nav .menu:not(.active) { display: none !important; }
  nav .menu.active      { display: flex !important; }

  /* Make sure the hamburger stays on top and clickable */
  #ddfixedheader .hamburger,
  #ddfixedheader .uneven-hamburger-icon,
  #hamburgertoggler {
    position: relative;  /* or absolute/fixed if you already position it */
    z-index: 6000;       /* above the menu */
    pointer-events: auto;
  }
}
@media (max-width: 900px) {.mobile-menu {display:block; margin-top:25px; width:100%;}}

/* --- Mobile: visual cue + toggle button for items with children --- */

@media (max-width: 900px) {

  /* Mark parent items so we can pad their link to make room for the toggle */
  .menu li.has-children > a {
    padding-right: 56px;    /* room for the 44px toggle */
    position: relative;
  }

  /* The toggle button itself */
  .menu .submenu-toggle {
    position: absolute;      /* anchor to the right edge of the row */
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;            /* accessible finger target */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #552988;          /* brand purple */
    border-radius: 6px;
    z-index: 6001;           /* above the row background */
    cursor: pointer;
  }

  /* Focus state for accessibility */
  .menu .submenu-toggle:focus-visible {
    outline: 2px solid #ffc425;   /* brand yellow */
    outline-offset: 2px;
  }

  /* Draw the chevron (>) using borders; rotate on open */
  .menu .submenu-toggle::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);           /* points RIGHT by default */
    transition: transform .2s ease;
  }

  /* When the LI is open, rotate chevron to point DOWN */
  .menu li.open > .submenu-toggle::before {
    transform: rotate(45deg);            /* points DOWN */
  }
}

/* Hide the mobile toggles on desktop */
@media (min-width: 901px) {
  .menu .submenu-toggle { display: none !important; }
}

@media (max-width: 900px) {
  /* The parent row (the link) becomes the positioning context */
  .menu li.has-children > a {
    position: relative;
    padding-right: 56px; /* room for a 44px toggle + 12px right gutter */
    display: block;      /* ensure it has its own box */
  }

 /* Toggle is the *sibling* right after <a> */
  .menu li.has-children > .submenu-toggle {
    position: absolute;
    right: 8px;

    /* Center on the link row, not the LI */
    top: 50%;
    transform: translateY(-50%);

    width: 44px;
    height: 44px;        /* nice finger target */
    display: flex;
    align-items: center; /* centers the chevron inside the 44px button */
    justify-content: center;

    border: 0;
    background: transparent;
    color: #552988;
    border-radius: 6px;
    cursor: pointer;
  }

  /* Chevron graphic */
  .menu li.has-children > .submenu-toggle::before {
    content: "";
    width: 10px; height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);              /* points RIGHT by default */
    transition: transform .2s ease;
  }

  .menu li.open > .submenu-toggle::before {
    transform: rotate(45deg);               /* points DOWN when open */
  }

}
/* === MOBILE MENU VISIBILITY SAFEGUARD (add at end of nav.css) === */
@media (max-width: 900px) {
  /* Hidden by default on mobile */
  nav .menu:not(.active) {
    display: none !important;
  }

  /* When opened (via hamburger) */
  nav .menu.active {
    display: flex !important;  /* must be explicit since we hide with !important */
  }

 .hamburger,
 .uneven-hamburger-icon,
  #hamburgertoggler {
    position: absolute; /* or fixed, if you prefer it pinned to the viewport */
    top: 10px;
    right: 15px;
    z-index: 4500;      /* higher than the header & menu */
    pointer-events: auto;
  }
 
/* Make the icon sit above the overlay and clickable */
  #ddfixedheader .hamburger,
  #ddfixedheader .uneven-hamburger-icon,
  #hamburgertoggler {
    position: relative;      /* or absolute/fixed if you prefer */
    z-index: 6000;           /* ABOVE header(5000) & menu(3000) */
    pointer-events: auto;
  }

  /* Visibility rules (keep these at the end of nav.css) */
  nav .menu:not(.active) { display: none !important; }
  nav .menu.active      { display: flex !important; }

.menu {/* was: top: 360px; */top: var(--header-height-mobile);}

}

/* === MOBILE: keep chevrons aligned to the top of their row === */
@media (max-width: 900px) {
  /* Ensure the LI is a positioning context (already true in many setups) */
  .menu li.has-children { position: relative; }

  /* Stop vertical-centering; pin to the top edge of the row */
  .menu .submenu-toggle,
  .menu li.has-children > .submenu-toggle {
    top: 0 !important;              /* was: 50% */
    transform: none !important;      /* was: translateY(-50%) */
    height: 44px;                     /* tap target height; adjust if your row height differs */
    display: flex;
    align-items: center;              /* centers the chevron inside the 44px button */
    justify-content: center;
  }

  /* Remove any previous nudge that pushed the icon down */
  .menu .submenu-toggle::before {margin-top: 0 !important;}
}
/* === MOBILE: chevron turns white when parent is open === */
@media (max-width: 900px) {
  .menu li.open > .submenu-toggle::before {border-right-color: #ffffff !important; border-bottom-color: #ffffff !important;}}

/* Desktop/tablet: make submenu items smaller (root-relative) */
@media (min-width: 901px) {nav .menu > li > ul.sub-menu li > a {font-size: 1.2rem; line-height: 1.3;}
}


/* Desktop/tablet: make first-level submenus match their parent width */
@media (min-width: 901px) {
  /* Ensure each top-level LI is a positioning context (you already do this elsewhere) */
  nav .menu > li { position: relative; }

  /* Force dropdown to be as wide as its parent LI */
  nav .menu > li > ul.sub-menu {
    left: 0;                 /* align under the parent */
    width: 100%;
    min-width: 100%;         /* prevents shrinking to content */
  }
}