/*
Theme Name: GCC Block Theme
Theme URI: https://greenclosetcreative.com/
Author: AnnMarie DeVito - Web Developer 
Author URI: https://greenclosetcreative.com/
Description: Custom block theme created by Green Closet Creative.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 3.0.3
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: gcc-block-theme
*/


/* logo sizing */
.wp-block-site-logo img {
    transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 1485px) {
    .wp-block-site-logo img {
        max-width: 400px;
    }
}
@media screen and (max-width: 1375px) {
    .wp-block-site-logo img {
        max-width: 325px;
    }
}
@media screen and (max-width: 1300px) {
    .wp-block-site-logo img {
        max-width: 250px;
    }
}


/* reveal hero on home page */

#reveal-hero .wp-block-cover {
  height: 100%;
  min-height: 0;
}
#reveal-hero .wp-block-column {
  transition: all 0.3s ease-in-out;
}

@media screen and ( min-width: 782px) {
  #reveal-hero {
    height: 800px;
  }
  #reveal-hero .wp-block-cover p:not(:first-child),
  #reveal-hero .wp-block-cover .wp-block-buttons {
    opacity: 0;
    height: 0;
    width: 300px;
  }
  #reveal-hero .wp-block-column:hover .wp-block-cover p:not(:first-child),
  #reveal-hero .wp-block-column:hover .wp-block-cover .wp-block-buttons {
    opacity: 1;
    height: auto;
    transition: all 0.3s ease-in-out;
  }
  #reveal-hero .wp-block-column:hover {
    flex-basis: 30%;
  }
  #reveal-hero .wp-block-column:not(:hover) {
    flex-basis: 23.3333%;
  }
}

@media screen and (max-width: 1279px) {
  #reveal-hero {
    height: 600px;
  }
}
@media screen and (max-width: 1099px) {
  #reveal-hero .wp-block-cover p:not(:first-child),
  #reveal-hero .wp-block-cover .wp-block-buttons {
    width: 250px;
  }
}
@media screen and (max-width: 959px) {
  #reveal-hero .wp-block-cover p:not(:first-child),
  #reveal-hero .wp-block-cover .wp-block-buttons {
    width: 200px;
  }
}

@media screen and (max-width: 781px) {
  #reveal-hero {
    height: 800px;
  }
  #reveal-hero .wp-block-cover p:not(:first-child){
    display: none;
  }
  #reveal-hero .wp-block-column {
    height: 200px;
  }
  #reveal-hero .wp-block-cover p:not(:first-child),
  #reveal-hero .wp-block-cover .wp-block-buttons {
    width: 100%;
  }
  
}


/* home 3 icons */
#care-icons figcaption {
  color: var(--wp--preset--color--theme-secondary-3);
  font-size: var(--wp--preset--font-size--s);
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}
@media screen and (max-width: 666px) {
  #care-icons {
    flex-wrap: wrap;
  }
}

/* buttons with icons */
.wp-block-button.donate-button a.wp-block-button__link:after,
.wp-block-button.volunteer-button a.wp-block-button__link:after {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: bottom;
  margin-left: 10px;
  transition: all 0.3s ease-in-out;
}
.wp-block-button.donate-button a.wp-block-button__link:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="%2391aad7" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>');
}
.wp-block-button.donate-button a.wp-block-button__link:hover:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="%23e8f0fd" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>');
}
.wp-block-button.donate-button a.wp-block-button__link:hover {
  background-color: var(--wp--preset--color--theme-secondary-4) !important;
  color: var(--wp--preset--color--theme-secondary-1) !important;
}
.wp-block-button.volunteer-button a.wp-block-button__link:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" viewBox="0 0 28.1 30"><!-- Generator: Adobe Illustrator 29.5.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 137) --><defs><style> .st0 { fill: %2391aad7; } </style></defs><path class="st0" d="M15,0c1,0,1.9.8,1.9,1.9v12.2c0,.5.4.9.9.9s.9-.4.9-.9V3.8c0-1,.8-1.9,1.9-1.9s1.9.8,1.9,1.9v10.3c0,.5.4.9.9.9s.9-.4.9-.9v-6.6c0-1,.8-1.9,1.9-1.9s1.9.8,1.9,1.9v12.2c0,5.7-4.6,10.3-10.3,10.3h-1.1c-3.5,0-6.8-1.3-9.4-3.8L.7,20c-.9-.9-1-2.4,0-3.3s2.4-1,3.3,0l3.5,3.4c0,0,0-.2,0-.3V3.8c0-1,.8-1.9,1.9-1.9s1.9.8,1.9,1.9v10.3c0,.5.4.9.9.9s.9-.4.9-.9V1.9c0-1,.8-1.9,1.9-1.9ZM12.2,21.2c0,.7.3,1.4.8,1.9l3.2,2.9c.4.3.9.3,1.3,0l3.2-2.9c.5-.5.8-1.1.8-1.9,0-1.4-1.1-2.5-2.5-2.5h0c-.9,0-1.7.4-2.1,1.1-.5-.7-1.3-1.1-2.1-1.1h0c-1.4,0-2.5,1.1-2.5,2.5h0Z"/></svg>');
}
.wp-block-button.volunteer-button a.wp-block-button__link:hover:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" viewBox="0 0 28.1 30"><!-- Generator: Adobe Illustrator 29.5.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 137) --><defs><style> .st0 { fill: %23E8F0FD; } </style></defs><path class="st0" d="M15,0c1,0,1.9.8,1.9,1.9v12.2c0,.5.4.9.9.9s.9-.4.9-.9V3.8c0-1,.8-1.9,1.9-1.9s1.9.8,1.9,1.9v10.3c0,.5.4.9.9.9s.9-.4.9-.9v-6.6c0-1,.8-1.9,1.9-1.9s1.9.8,1.9,1.9v12.2c0,5.7-4.6,10.3-10.3,10.3h-1.1c-3.5,0-6.8-1.3-9.4-3.8L.7,20c-.9-.9-1-2.4,0-3.3s2.4-1,3.3,0l3.5,3.4c0,0,0-.2,0-.3V3.8c0-1,.8-1.9,1.9-1.9s1.9.8,1.9,1.9v10.3c0,.5.4.9.9.9s.9-.4.9-.9V1.9c0-1,.8-1.9,1.9-1.9ZM12.2,21.2c0,.7.3,1.4.8,1.9l3.2,2.9c.4.3.9.3,1.3,0l3.2-2.9c.5-.5.8-1.1.8-1.9,0-1.4-1.1-2.5-2.5-2.5h0c-.9,0-1.7.4-2.1,1.1-.5-.7-1.3-1.1-2.1-1.1h0c-1.4,0-2.5,1.1-2.5,2.5h0Z"/></svg>');
}
.wp-block-button.volunteer-button a.wp-block-button__link:hover {
  background-color: var(--wp--preset--color--theme-secondary-3) !important;
  color: var(--wp--preset--color--theme-secondary-1) !important;
}


/* Form styles */
.gform_wrapper .gform_required_legend,
.gform_wrapper .gform_required_legend .gfield_required_asterisk,
.gform_wrapper form .gform-body .gfield_required {
    font-size: 16px;
    font-weight: bold;
}
.gform_wrapper form .gform-body .gform-field-label {
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 8px;
}
.gform_wrapper form .gform-body input,
.gform_wrapper form .gform-body select {
    border-color: var(--wp--preset--color--theme-secondary-4);
    border-radius: 30px;
    border-width: 1px;
    height: 58px;
}
.gform_wrapper form .gform-body textarea {
    border-color: var(--wp--preset--color--theme-secondary-4);
    border-width: 1px;
}
.gform_wrapper form .gform_footer input[type="submit"] {
    background-color: var(--wp--preset--color--theme-primary);
    border-color: var(--wp--preset--color--theme-primary);
    border-radius: 30px;
    border-style: solid;
    border-width: 2px;
    color: var(--wp--preset--color--theme-secondary-4);
    cursor: pointer;
    font-size: var(--wp--preset--font-size--s);
    font-weight: 700;
    letter-spacing: 1px;
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}
.gform_wrapper form .gform_footer input[type="submit"]:hover {
    background-color: var(--wp--preset--color--theme-secondary-4);
    border-color: var(--wp--preset--color--theme-secondary-4);
    color: var(--wp--preset--color--theme-primary);
}


/* Inverted radius buttons */
@property --_x {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.inverted-radius figure {
  --w: 100%; /* image width */
  --r: 0.5em; /* radius */

  display: grid;
  place-items: end end;
  font: bold 40px/1.5 monospace;
  transition: --_x 0.5s;
  cursor: pointer;
  margin: 0;
}

.inverted-radius figure > * {
  grid-area: 1/1;
}

.inverted-radius figure img {
  width: var(--w);
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
  border-radius: 0;
  --_m: / calc(2 * var(--r)) calc(2 * var(--r))
    radial-gradient(#000 69%, #0000 72%);
  --_g: conic-gradient(
    from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),
    #0000 25%,
    #000 0
  );
  --_d: (0.5lh + var(--r));
  mask: calc(100% - var(--_d) - var(--_x)) 100% var(--_m),
    100% calc(100% - var(--_d)) var(--_m),
    radial-gradient(0.5lh at 100% 100%, #0000 99%, #000 calc(100% + 1px))
      calc(-1 * var(--r) - var(--_x)) calc(-1 * var(--r)),
    var(--_g) calc(-1 * var(--_d) - var(--_x)) 0,
    var(--_g) 0 calc(-1 * var(--_d));
  mask-repeat: no-repeat;
}

.inverted-radius figure figcaption {
  height: 1lh;
  width: calc(1lh + var(--_x));
  box-sizing: border-box;
  translate: calc(0.5lh - var(--r)) calc(0.5lh - var(--r));
  overflow: hidden;
  background: var(--wp--preset--color--theme-primary);
  color: var(--wp--preset--color--theme-secondary-4);
  border-inline: calc(0.5lh - 0.5ch) solid #0000;
  clip-path: inset(5px round 1lh);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

.inverted-radius figure figcaption > span:first-child {
  opacity: 0;
  display: inline-block;
  font-size: 1.188rem;
  position: relative;
  top: -8px;
  left: -12px;
}
.inverted-radius figure figcaption > span:last-child {
  display: inline-block;
  font-size: 1.188rem;
  position: absolute;
  top: 1.2rem;
  right: 0;
}
.inverted-radius figure figcaption > span:last-child svg {
  width: 24px;
  height: 24px;
}

.inverted-radius figure:hover {
  --_x: 3.5em;
}
.inverted-radius figure:hover figcaption {
  background: var(--wp--preset--color--theme-secondary-4);
  color: var(--wp--preset--color--theme-white);
}
.inverted-radius figure:hover figcaption > span:first-child {
  opacity: 1;
  transition: all 0.3s ease-in-out;
  transition-delay: 0.2s;
}
.inverted-radius figure:hover figcaption > span:last-child svg path {
  fill: #ffffff;
  transition: all 0.3s ease-in-out;
}
  

/* icons with text sections */
@media screen and (max-width: 599px) {
  .with-icon {
    flex-wrap: wrap;
    gap: 1rem;
  }
  
}


p.has-icon img { vertical-align: middle; }