/*
Theme name: HAGO theme
Author: Liam Chung
Description: wordpress theme for Help A Girl Out NGO
Version: 0.8
*/

/* ----------------------------------------------------------- */
/* SECTION 1: GENERIC SITE-WIDE STYLING */
/* ----------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, p, img, li a {
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--black);
  margin: 0;
  text-decoration: none;
}

html { margin-top: 0 !important }

body, html {
  background-color: var(--white);
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

img { max-width:100%; max-height:100%; width: auto; height: auto; }

/* wordpress feels the need to add empty p tags throughout the page that screw up spacing. this makes them go away */
p:empty{ display: none; }

#main-content { position: relative; margin-left: auto; margin-right: auto }

.wp-block-column { position: relative }
.wp-block-column .wp-block-buttons { position: absolute; bottom: 0; right: 10px }
.wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-button__link:visited { color: var(--black) !important }
/* ----------------------------------------------------------- */
/* SECTION 2: SPECIALTY CLASSES */
/* ----------------------------------------------------------- */

.fullwidth {
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: 50vw;
  width: 100vw;
  background-position: right center;
  background-repeat: no-repeat;
}



/*----------- BUTTON STYLING -------------- */

.wp-block-button__link, .wp-block-button__link:hover {
  color: var(--black);
  background-color: transparent;
  border: 1px solid;
  border-radius: 3px;
  line-height: 1.1;
  padding: .8rem 6rem .8rem 1.2rem;
}
.wp-block-button__link::after  {
  position: absolute;
  content: " ";
  width: 3.5rem;
  height: 1.2rem;
  background-image: url("assets/img/btn-arrow.svg");
  background-position: center center;
  background-repeat: no-repeat;
  transform: translateX(1.5rem);
  transition: .3s ease-out;
}
.wp-block-button__link:hover::after { transform: translateX(4rem); }
.wp-block-buttons.is-content-justification-right > .wp-block-button.wp-block-button, .wp-block-buttons > .wp-block-button.wp-block-button:not(:first-child) { margin-left: 1rem }



/*----------- CTA STYLING ----------------*/

.cta {
  border-top: 2px solid var(--maroon);
  border-bottom: 2px solid var(--maroon);
  padding: 8% 10%;
  background-image: url("assets/img/cta-backpocket.png");
  background-size: auto 140%;
}
.cta p { position: absolute; bottom: 0 }



/*----------- TOP BAR / MENU STYLING ------------- */

.topbar {
  position: fixed;
  top: 0;
  display: grid;
  grid-template-columns: 175px auto;
  z-index: 999;
  padding: 45px 5%;
  width: 90%;
  height: 45px;
  background: transparent linear-gradient(180deg, #F7F6F2 0%, #F7F6F2F7 70%, #F7F6F200 100%) 0% 0% no-repeat padding-box;
}
.topbar-holder { height: 135px; }
.header-logo { grid-column: 1  }
.navmenu { grid-column: 2 }
.hamburger { grid-column: 2 }

.hamburger { text-align: right; height: 30px }

/* this applies to both black line in header and footer */
.blackline { height: 2px; max-height: unset; max-width: unset; position: absolute; margin-left: auto; margin-right: auto; left: -9999px; right: -9999px; }
/* this is header blackline only. see footer styling for that blackline */
.topbar .blackline { bottom: 30px }

.menubar li a { text-transform: uppercase }
.menubar li { display: inline; padding: .7rem .95rem .5rem 1rem; margin-left: 2rem; transition: 0.8s }
.menubar li a:hover { color: inherit; text-decoration: none }
.menubar li:hover { opacity: 1 !important }
.menubar:hover li{ opacity: .2 }
.menubar .current-menu-item {
  border-radius: 5px;
  line-height: 1;
}
.menubar {
  text-align: right;
  margin: 0;
  margin-top: 5px;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}



/*----------- FOOTER STYLING ------------- */

.footer {
  display: grid;
  grid-template-columns: 140px 190px auto;
  grid-template-rows: 60px 35px auto;
  position: relative;
  z-index: 999;
  padding: 2rem 5% 2.2rem 5%
}
.footer-logo { grid-area: 1 / 1  }
.footer .blackline { grid-row: 2; grid-column: 1 / 4 }
.footer .navmenu { grid-row: 1; grid-column: 2 / 4; align-items: end; display: grid; }
.footer .mmc { grid-row: 3; grid-column: 1 / 3; }
.footer .socials { grid-area: 3 / 3 }

.footerbar a, .footerbar a:selected  { color: var(--black) }
.footerbar li { display: inline; padding: .7rem .95rem .5rem 1rem; margin-left: 2rem; transition: 0.8s }
.footerbar li a { text-transform: uppercase }

.footerbar {
  text-align: right;
  margin: 5px 0 0 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}

.footer .blackline { top: 10px }

.footer .mmc { display: grid; grid-template-columns: 30px auto; }
.footer .mmc img { grid-column: 1 }
.footer .mmc p { grid-column: 2; font-size: 10px; margin-left: 10px }

.footer .socials { text-align: right; padding-right: .95rem }
.footer .socials * { display: inline-block; height: 20px }
.footer .socials a { margin-left: 6px;transform: translateY(3px); }
.footer .arrow { height: 5px; margin-bottom: 3px }


.mfooter{
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto auto auto auto;
  position: relative;
  z-index: 999;
  padding: 2rem 5% 2.2rem 5%;
  text-align: center;
}
.mobile .footer-logo img { width: 300px; margin-bottom: 10px }
.mobile .join { margin: 15px 0 }
.socials-1 img, .socials-2 img, .socials-3 img, .socials-4 img { width: 50px }
.mobile .mmc { margin-top: 20px; text-align: left }
.mobile .footer-logo { grid-area: 1 / 1 / 1 / 5 }
.mobile .blackline   { grid-area: 2 / 1 / 2 / 5 }
.mobile .join        { grid-area: 2 / 1 / 2 / 5; font-size: 25px }
.mobile .social-1    { grid-area: 3 / 1 / 3 / 1 }
.mobile .social-2    { grid-area: 3 / 2 / 3 / 2 }
.mobile .social-3    { grid-area: 3 / 3 / 3 / 3 }
.mobile .social-4    { grid-area: 3 / 4 / 3 / 4 }
.mobile .mmc         { grid-area: 4 / 1 / 4 / 5 }

/*----------- HOME PAGE ------------- */

.cbox {
  border: 2px solid;
  border-radius: 5px;
  padding: 4rem 25px;
}


.home-vid {
  text-align: center;
  margin-left: auto; margin-right: auto;
  border-radius: 5px;
  position:relative;
}
.home-vid img {
  width: 70%;
  margin-left: auto; margin-right: auto;
  border: solid 2px var(--maroon);
  border-radius: 5px;
}
.home-vid::after {
  position: absolute;
  cursor: pointer;
  content: " ";
  width: 70%;
  background-image: url("assets/img/vid-play.svg");
  background-position: center center;
  background-repeat: no-repeat;
  margin-left: auto; margin-right: auto;
  left: 0; right: 0;
  margin-top: auto; margin-bottom: auto;
  top: 0; bottom: 0;
}

#vid-container {
      height: 100vh;
      width: 100vw;
      position: fixed;
      top: 0px;
      left: 0px;
      transition: 0.7s;
      opacity: 0;
      z-index: 0;
      background-color: var(--white);
      overflow: hidden;
      pointer-events: none;
}
#vid-container iframe { display: initial !important; position: absolute; margin-left: auto; margin-right: auto; left: -999rem; right: -999rem; margin-top: auto; margin-bottom: auto; top: -999rem; bottom: -999rem }
#vid-container button { background-color: transparent; border: none; height: 2rem; position: absolute; top: 2rem; right: 2rem }


.green-box {
  padding: 130px 0;
  border-top: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  background-image: url("assets/img/landfil.png");
  background-size: auto 130%;
}

#poverty { color: var(--purple) }

/* touching media-text. for the big purple mt at the bottom of the page, and on the get inv page  */
.touch-mt h1 { font-weight: 600; }

.touch-mt .wp-block-media-text__content {
  border: solid 2px;
  border-radius: 5px;
  margin: 0;
  height: 100%;
  padding: 0% 8%;
}

.touch-mt { position: relative }
.touch-mt .join-home { position: absolute; bottom: 5%; }

.socials-1 img, .socials-2 img, .socials-3 img, .socials-4 img { width: 50px }
.join-home { text-align: right; padding-right: .95rem }
.join-home * { color:var(--purple); display: inline-block; height: 20px }
.join-home a { margin-left: 6px;transform: translateY(3px); }
.join-home .arrow { height: 5px; margin-bottom: 3px }

/* ---------- ABOUT PAGE ------------ */


.abt-header h1 { position: relative; z-index: 2 }
.abt-header figure { position: absolute;  z-index: 0 }
.abt-header .wp-block-button { background: #F7F6F24D 0% 0% no-repeat padding-box; }

.about-arrows h2 { font-weight: 400 }


@media only screen and (max-width: 767px) {
  .hover-pic figure { opacity: 0.3 }
}
@media only screen and (min-width: 768px) {
  .hover-pic figure { opacity: 0 }
}
.hover-pic { position: relative }
.hover-pic figure {
  position: absolute;
  top: -999px; bottom: -999px;
  margin-top: auto; margin-bottom: auto;
  margin-left: auto; margin-right: auto;
  left: 0; right: 0;
  height: min-content;
  z-index: 1;
  text-align: center;
  transition: .4s ease-out;
}
.hover-pic:hover figure { opacity: 1 }

.abt-arrow { position: relative }
.abt-arrow svg { margin-left: auto; margin-right: auto; position: absolute; left: -999px; right: -999px }

.team .grids-area { margin: 1rem 2rem }


.material-icons-prev {
  transform: scaleX(-1);
  width: 20px;
  height: auto;
}

.material-icons-next {
  width: 20px;
  height: auto;
}

.carousel-container {
  width: 80%;
  margin-top: 0px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 10;
}

.carousel-inner { overflow: hidden; }
.track { display: inline-flex; transition: transform 0.5s }

.carousel-container .card {
  width: 350px;
  height:100px;
  flex-shrink: 0;
  padding-right: 15px;
  box-sizing: border-box;
}

.carousel-container .nav button {
  border: none;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background-color: transparent;
}
.carousel-container .nav .prev { left: -60px; display: block; }
.carousel-container .nav .next { right: -60px; }

.carousel-container .card figure {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  height: 100px;
}

/* ---------- PROGRAMS PAGE --------- */

.surface { margin: 1rem 0; padding: 1rem 2rem; border-radius: 5px; border: 2px solid var(--purple); transition: color .3s ease-out; }
.surface:hover { color: var(--purple) }

/* overall just for borders, background colors, and padding on program boxes */
/* some changes for mobile to sizing and borders */
@media only screen and (max-width: 767px) {
  .prog-box { border: 1px solid #C7C7C7 }
  .prog-box .grids-area:nth-of-type(3) h1 { font-size: 40px }
  .prog-box .grids-area:nth-of-type(4) h1 { font-size: 40px }
  .prog-box .grids-area:nth-of-type(3) h6 { font-weight: bolder; font-size: 20px }
  .prog-box .grids-area:nth-of-type(4) h6 { font-weight: bolder; font-size: 20px; margin-bottom: 2rem }
  .prog-box .grids-area:not(:first-of-type) .wp-block-group { padding: 1rem 2rem; }
}
@media only screen and (min-width: 768px) {
  .prog-box .grids-area:not(:first-of-type) { transform: translateY(10px); }

  .prog-box .grids-area:first-of-type { border: 1px solid #333333; border-radius: 5px }
  .prog-box .grids-area:not(:first-of-type) .wp-block-group {
    border: 1px solid #333333;
    padding: 2rem;
  }
}
.prog-box .grids-area:not(:first-of-type) .wp-block-group {
  background-color: var(--white);
  border-radius: 5px;
}
.prog-box img { width:100%; border-radius: 5px }
.prog-box figcaption { display: none }
.prog-box .grids-area:nth-of-type(3) .wp-block-group, .prog-box .grids-area:nth-of-type(4) .wp-block-group { height: 100%; display: flex; align-items: center; justify-content: center }
.prog-box .grids-area:nth-of-type(3) .wp-block-group__inner-container, .prog-box .grids-area:nth-of-type(4) .wp-block-group__inner-container { display: flex; flex-direction: column; justify-content: center }

.img-list { display: none }



/* behaviour of gallery items: must be marginless full width, and all except first be hidden */
/*
.prog-hide-spacer { display: none }
.slideshow .blocks-gallery-item { width: 100% }
.slideshow .blocks-gallery-grid { width: 100% }
.slideshow .blocks-gallery-grid li { margin: 0 !important }
.slideshow .blocks-gallery-item { display: none }
.slideshow .blocks-gallery-item:first-of-type { display: block }*/

/* ---------- GET INVOLVED PAGE ----- */

.inv-header h1 { line-height: 1 }

@media only screen and (min-width: 768px) {
  .end:hover { color: var(--pink); border: 2px solid var(--pink) }
  .end { border: 2px solid var(--white); padding: 3px }
  .end:hover::after, .end:hover::before { opacity: 1 }
}
.end { font-weight: 800; border-bottom: 2px solid var(--pink); transition: border .3s ease-out, color .3s ease-out; position: relative }
.end::after, .end::before {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--pink);
  transition: .3s ease-out;
  opacity: 0;
}

@media only screen and (max-width: 781px) {
	.ways-top .wp-block-column, .ways-bot .wp-block-column {
	  margin-left: 0 !important; margin-top: 2rem
	}
	.ways-top .wp-block-columns, .ways-bot .wp-block-columns { margin-bottom: 0 }
}

.touch-mt figure { height: 100% }
.touch-mt img { height: 100%; object-fit: cover }

.ways-top, .ways-bot { justify-content: center }
.ways-top .wp-block-column, .ways-bot .wp-block-column { 
	border: 2px solid; 
	padding: 3rem 2rem; 
	border-radius: 5px; 
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.ways-top h6, .ways-bot h6, .ways-top .wp-block-buttons, .ways-bot .wp-block-buttons { 
	position: relative; bottom: unset; right: unset
}
.ways-top .wp-block-button__link::after, .ways-bot .wp-block-button__link::after { position: relative }
.ways-top .wp-block-button__link, .ways-bot .wp-block-button__link { padding: calc(.667em + 2px) calc(1.333em + 2px);  }
.ways-top h6, .ways-bot h6 { margin-bottom: 20px }
.ways-top h2, .ways-bot h2 { margin-bottom: 30px }
.ways-top .wp-block-column:nth-of-type(1) h2, .ways-top .wp-block-column:nth-of-type(1) { color: var(--teal) }
.ways-top .wp-block-column:nth-of-type(2) h2, .ways-top .wp-block-column:nth-of-type(2) { color: var(--maroon) }
.ways-top .wp-block-column:nth-of-type(3) h2, .ways-top .wp-block-column:nth-of-type(3) { color: var(--pink) }
.ways-bot .wp-block-column:nth-of-type(1) h2, .ways-bot .wp-block-column:nth-of-type(1) { color: var(--pink) }
.ways-bot .wp-block-column:nth-of-type(2) h2, .ways-bot .wp-block-column:nth-of-type(2) { color: var(--purple) }
.ways-bot .wp-block-column:nth-of-type(3) h2, .ways-bot .wp-block-column:nth-of-type(3) { color: var(--teal) }


.material-icons-prev {
  transform: scaleX(-1);
  width: 20px;
  height: auto;
}

.material-icons-next {
  width: 20px;
  height: auto;
}

.test-carousel-container {
  width: 80%;
  margin-top: 0px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 10;
}

.test-carousel-inner { overflow: hidden; }
.track { display: inline-flex; transition: transform 0.5s }

.test-card {
  width: 100%;
  height: min-content;
  flex-shrink: 0;
  padding-right: 15px;
  box-sizing: border-box;
  padding: 0 2%;
}
.test-card > div {
  border: 2px solid #333333;
  border-radius: 5px;
  padding: 2.5rem;
}
.test-card .wp-block-media-text__content { position: relative; height: 100% }
.test-card > .wp-block-media-text__content > .wp-block-group { position: absolute; bottom: 0 }

.test-carousel-container .nav button {
  border: none;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background-color: transparent;
}
.test-carousel-container .nav .prev { left: -60px; display: block; }
.test-carousel-container .nav .next { right: -60px; }

.test-card figure {
  display: flex;
  justify-content: center;
  align-items: center;
}