/*
 Theme Name:   Superfood Heroes
 Theme URI:    https://superfood.local
 Description:  A custome WordPress theme developed for Superfood Heroes, based on GeneratePress.
 Author:       Site Trio
 Author URI:   https://sitetrio.com
 Template:     generatepress
 Version:      0.1
*/

@font-face {
    font-family: 'Raleigh';
    src:  url('fonts/RaleighLTStd.woff2') format('woff2'),
          url('fonts/RaleighLTStd.woff') format('woff'),
          url('fonts/RaleighLTStd.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Raleigh Bold';
    src:  url('fonts/RaleighLTStd-Bold.woff2') format('woff2'),
          url('fonts/RaleighLTStd-Bold.woff') format('woff'),
          url('fonts/RaleighLTStd-Bold.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Trade Gothic';
    src:  url('fonts/TradeGothicLTPro-Cn18.woff2') format('woff2'),
          url('fonts/TradeGothicLTPro-Cn18.woff') format('woff'),
          url('fonts/TradeGothicLTPro-Cn18.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Trade Gothic Bold';
    src:  url('fonts/TradeGothicLTPro-BdCn20.woff2') format('woff2'),
          url('fonts/TradeGothicLTPro-BdCn20.woff') format('woff'),
          url('fonts/TradeGothicLTPro-BdCn20.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

p {
    margin-bottom: 1em;
}

.single .hero .entry-header {
    position: relative;
}

.hero .hero-header--image img {
    height: 100%;
    object-fit: contain;
}

.single .hero:not(.recipe) .entry-header,
.post-type-archive-hero .hero {
    border: 2px solid;
    padding: 1em;
}

.post-type-archive-hero .hero {
    background: #fff;
    padding: 0;
}

.post-type-archive-hero .gray-box {
    margin-bottom: 3em;
}

.mth-cta {
    text-align: center;
}

.mth-cta.gray-box {
    margin-top: 3em;
    margin-bottom: 3em !important;
}

.post-type-archive-hero .gray-box p:last-child {
    margin-bottom: 0;
}

.group-jumplinks {
    text-align: right;
    font-size: 16px;
}

.group-jumplink {
    margin-left: 0.25em;
    text-decoration: underline;
}

.group-jumplink::after {
    content: ",";
}

.group-jumplink:last-child::after {
    content: "";
}

.hero-group--heroes {
    display: flex;
    flex-direction: column;
}

.hero-group--heroes .hero {
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
}

.hero-group--heroes .hero .tagline {
    flex-grow: 1;
}

.hero-group--heroes .hero-header--image a,
.logged-out .hero-header--image {
    display: block;
    padding: 0.5em;
    max-height: 200px;
    text-align: center;
}

.hero-archive-card--header.logged-out {
    position: relative;
}

.preview-badge {
    display: block;
    font-size: 14px;
    padding: 0.25em 0.5em;
    background: #fff;
    border: 2px solid #4CAF50;
    border-radius: 3px;
    color: #4CAF50;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    transition: color 0.4s, border-color 0.4s;
}

.preview-badge:hover {
    border: 2px solid hsl(122, 39%, 38%);
    color: hsl(122, 39%, 48%);
}

.hero-group--heroes .hero-header--image img {
    max-height: 150px;
    object-fit: contain;
}

.hero-archive-card--content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 14px;
    padding: 1em;
}

.hero-archive-card--cta {
    text-align: right;
}

.hero-archive-card--attribute p {
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    font-weight: bold;
}

.hero-archive-card--attribute span {
    font-weight: normal;
    color: #818181;
}

.post-type-archive-hero .entry-title {
    font-size: 28px;
    padding: 0.25em 0 0.05em;
    text-align: center;
}

.hero-group--title {
    scroll-margin-top: 60px;
}

.border-color.legumes {
    border-color: #5080be !important;
}

.bg-color.legumes {
    background-color: rgba(80, 128, 190, 0.2);
}

.post-type-archive-hero .group-legumes .entry-title {
	background: #5080be;
}

.text-color.legumes {
	color: #5080be;
}

.border-color.red-orange {
    border-color: #f79645 !important;
}

.bg-color.red-orange {
    background-color: rgba(247, 150, 69, 0.2);
}

.post-type-archive-hero .group-red-orange .entry-title {
	background: #f79645;
}

.text-color.red-orange {
	color: #f79645;
}

.border-color.dark-green {
    border-color: #78923b !important;
}

.bg-color.dark-green {
	background-color: rgba(120, 146, 59, 0.2);
}

.post-type-archive-hero .group-dark-green .entry-title {
	background: #78923b;
}

.text-color.dark-green {
    color:#78923b;
}

.border-color.other {
    border-color: #8263a6 !important;
}

.bg-color.other {
	background-color: rgba(130, 99, 166, 0.2);
}

.post-type-archive-hero .group-other .entry-title {
	background: #8263a6;
}

.text-color.other {
	color: #8263a6;
}

.post-type-archive-hero .entry-title a,
.post-type-archive-hero .entry-title span {
    color: #fff;
}

.post-type-archive-hero .hero .cta {
    display: flex;
    align-items: center;
}

.archive-attribute.cta {
    flex-basis: 190px;
}

.hero-list ul > li {
    margin-bottom: 1em;
}

.hero-list a img {
    transition: transform 0.4s;
}

.hero-list a:hover img {
    transform: rotate(-10deg);
}

.hero-list img {
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: middle;
}

.hero-list ul {
    margin-bottom: 2em;
}

.hero-list .button {
    text-align: center;
    width: 100%;
}

.hero .entry-header::after {
    content: "";
	display: table;
	clear: both;
}

.program-panel {
    border: 1px solid rgba(0, 0, 0, 0.135);
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(202, 160, 160, 0.15);
    margin-bottom: .75em;
    transition: box-shadow 0.2s ease-in;
}

.program-panel.active {
    box-shadow: 2px 2px 15px rgba(0,0,0,0.25);
}

.st-accordion {
    border-radius: 10px;
    color: #333;
    font-size: 20px;
    margin-bottom: 0;
    padding: 1em 1em 0.85em;
    position: relative;
    width: 100%;
    text-align: left;
    transition: background-color 0.3s, font-weight 0.3s;
}

.accordion-specifier {
    font-size: 14px;
}

.st-accordion:hover {
    cursor: pointer;
}

.active .st-accordion {
    border-radius: 10px 10px 0 0;
}

.active .st-accordion,
.st-accordion:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.active .st-accordion {
    font-weight: bold;
}

.st-accordion::after {
    content: '\25BE';
    font-family: sans-serif;
    font-size: 16px;
    position: absolute;
    right: 1.5em;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .active .st-accordion::after {
    content: '\25B4';
  }

.hero-content .panel {
    display: none;
    font-size: 15px;
    overflow: hidden;
    padding: 2em 2em 1em;
}

.download-link--container span {
    font-size: 14px;
    color: #696969;
    font-style: italic;
}

.button .svg-inline--fa {
    margin-left: 0.5em;
}

.post-type-archive-hero .card-content {
    display: flex;
}

.post-type-archive-hero .page-header,
.page-template-getting-started .page-header {
    color: #ffffff;
    padding: 0;
    position: relative;
}

.post-type-archive-hero .page-header--inner,
.page-template-getting-started .page-header--inner {
    padding: 90px 20px 60px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    z-index: 3;
}

.post-type-archive-hero .page-header .page-title {
    font-size: 46px;
    margin-bottom: 0.25em;
}

.page-sub-title {
    max-width: 600px;
}

.page-header .gb-shapes {
    display: none;
}

.page-header .gb-shape {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    line-height: 0;
}

.page-header .gb-shapes .gb-shape-1 {
    color: #f7f8f9;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: -1px;
    transform: scaleX(-1);
}

.page-header .gb-shapes .gb-shape-1 svg {
    height: 120px;
    fill: currentColor;
    width: calc(100% + 1.3px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
}

.post-type-archive-hero .page-header {
    background-color: #66ff77;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 1000'%3E%3Cdefs%3E%3CradialGradient id='a' cx='500' cy='500' r='975' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2366ff77'/%3E%3Cstop offset='1' stop-color='%23240'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='500' cy='500' r='975' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23EF5' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23EF5' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1000' height='1000'/%3E%3Cg fill='none' stroke='%23081' stroke-width='10' stroke-miterlimit='10' stroke-opacity='.2'%3E%3Cpolygon points='-500%2C500 500%2C-500 1500%2C500 500%2C1500'/%3E%3Cpolygon points='-475%2C500 500%2C-475 1475%2C500 500%2C1475'/%3E%3Cpolygon points='-450%2C500 500%2C-450 1450%2C500 500%2C1450'/%3E%3Cpolygon points='-425%2C500 500%2C-425 1425%2C500 500%2C1425'/%3E%3Cpolygon points='-400%2C500 500%2C-400 1400%2C500 500%2C1400'/%3E%3Cpolygon points='-375%2C500 500%2C-375 1375%2C500 500%2C1375'/%3E%3Cpolygon points='-350%2C500 500%2C-350 1350%2C500 500%2C1350'/%3E%3Cpolygon points='-325%2C500 500%2C-325 1325%2C500 500%2C1325'/%3E%3Cpolygon points='-300%2C500 500%2C-300 1300%2C500 500%2C1300'/%3E%3Cpolygon points='-275%2C500 500%2C-275 1275%2C500 500%2C1275'/%3E%3Cpolygon points='-250%2C500 500%2C-250 1250%2C500 500%2C1250'/%3E%3Cpolygon points='-225%2C500 500%2C-225 1225%2C500 500%2C1225'/%3E%3Cpolygon points='-200%2C500 500%2C-200 1200%2C500 500%2C1200'/%3E%3Cpolygon points='-175%2C500 500%2C-175 1175%2C500 500%2C1175'/%3E%3Cpolygon points='-150%2C500 500%2C-150 1150%2C500 500%2C1150'/%3E%3Cpolygon points='-125%2C500 500%2C-125 1125%2C500 500%2C1125'/%3E%3Cpolygon points='-100%2C500 500%2C-100 1100%2C500 500%2C1100'/%3E%3Cpolygon points='-75%2C500 500%2C-75 1075%2C500 500%2C1075'/%3E%3Cpolygon points='-50%2C500 500%2C-50 1050%2C500 500%2C1050'/%3E%3Cpolygon points='-25%2C500 500%2C-25 1025%2C500 500%2C1025'/%3E%3Cpolygon points='0%2C500 500%2C0 1000%2C500 500%2C1000'/%3E%3Cpolygon points='25%2C500 500%2C25 975%2C500 500%2C975'/%3E%3Cpolygon points='50%2C500 500%2C50 950%2C500 500%2C950'/%3E%3Cpolygon points='75%2C500 500%2C75 925%2C500 500%2C925'/%3E%3Cpolygon points='100%2C500 500%2C100 900%2C500 500%2C900'/%3E%3Cpolygon points='125%2C500 500%2C125 875%2C500 500%2C875'/%3E%3Cpolygon points='150%2C500 500%2C150 850%2C500 500%2C850'/%3E%3Cpolygon points='175%2C500 500%2C175 825%2C500 500%2C825'/%3E%3Cpolygon points='200%2C500 500%2C200 800%2C500 500%2C800'/%3E%3Cpolygon points='225%2C500 500%2C225 775%2C500 500%2C775'/%3E%3Cpolygon points='250%2C500 500%2C250 750%2C500 500%2C750'/%3E%3Cpolygon points='275%2C500 500%2C275 725%2C500 500%2C725'/%3E%3Cpolygon points='300%2C500 500%2C300 700%2C500 500%2C700'/%3E%3Cpolygon points='325%2C500 500%2C325 675%2C500 500%2C675'/%3E%3Cpolygon points='350%2C500 500%2C350 650%2C500 500%2C650'/%3E%3Cpolygon points='375%2C500 500%2C375 625%2C500 500%2C625'/%3E%3Cpolygon points='400%2C500 500%2C400 600%2C500 500%2C600'/%3E%3Cpolygon points='425%2C500 500%2C425 575%2C500 500%2C575'/%3E%3Cpolygon points='450%2C500 500%2C450 550%2C500 500%2C550'/%3E%3Cpolygon points='475%2C500 500%2C475 525%2C500 500%2C525'/%3E%3C/g%3E%3Crect fill-opacity='.2' fill='url(%23b)' width='1000' height='1000'/%3E %3C/svg%3E");
    background-size: cover;
}

.page-template-getting-started .page-header {
    background-color: #ff0000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1000 1000'%3E%3Cdefs%3E%3CradialGradient id='a' cx='500' cy='500' r='60%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff0000'/%3E%3Cstop offset='1' stop-color='%23900'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='500' cy='500' r='70%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23FF0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1000' height='1000'/%3E%3Cg fill='none' stroke='%23F40' stroke-width='2' stroke-miterlimit='10' stroke-opacity='.5'%3E%3Ccircle cx='500' cy='500' r='725'/%3E%3Ccircle cx='500' cy='500' r='700'/%3E%3Ccircle cx='500' cy='500' r='675'/%3E%3Ccircle cx='500' cy='500' r='650'/%3E%3Ccircle cx='500' cy='500' r='625'/%3E%3Ccircle cx='500' cy='500' r='600'/%3E%3Ccircle cx='500' cy='500' r='575'/%3E%3Ccircle cx='500' cy='500' r='550'/%3E%3Ccircle cx='500' cy='500' r='525'/%3E%3Ccircle cx='500' cy='500' r='500'/%3E%3Ccircle cx='500' cy='500' r='475'/%3E%3Ccircle cx='500' cy='500' r='450'/%3E%3Ccircle cx='500' cy='500' r='425'/%3E%3Ccircle cx='500' cy='500' r='400'/%3E%3Ccircle cx='500' cy='500' r='375'/%3E%3Ccircle cx='500' cy='500' r='350'/%3E%3Ccircle cx='500' cy='500' r='325'/%3E%3Ccircle cx='500' cy='500' r='300'/%3E%3Ccircle cx='500' cy='500' r='275'/%3E%3Ccircle cx='500' cy='500' r='250'/%3E%3Ccircle cx='500' cy='500' r='225'/%3E%3Ccircle cx='500' cy='500' r='200'/%3E%3Ccircle cx='500' cy='500' r='175'/%3E%3Ccircle cx='500' cy='500' r='150'/%3E%3Ccircle cx='500' cy='500' r='125'/%3E%3Ccircle cx='500' cy='500' r='100'/%3E%3Ccircle cx='500' cy='500' r='75'/%3E%3Ccircle cx='500' cy='500' r='50'/%3E%3Ccircle cx='500' cy='500' r='25'/%3E%3C/g%3E%3Crect fill-opacity='.5' fill='url(%23b)' width='1000' height='1000'/%3E %3C/svg%3E");
    background-position: center;
    background-size: cover;
}

.gs-section {
    margin-bottom: 2em;
}

.gray-box,
.gs-introduction-content,
.wpum-registration-form,
.page .wpum-login-form,
.hero-content.logged-out {
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid #ddd;
    padding: 2em 3em;
}

.gray-box {
    box-shadow: -10px 10px 0 0 rgb(0 0 0 / 10%);
    margin-left: 10px;
}

.hero-content .gray-box {
    font-size: 16px;
    margin-bottom: 2.5em;
}

.hero-content .gray-box p:last-child {
    margin-bottom: 0;
}

.gs-introduction-content::after {
    content: "";
	display: table;
	clear: both;
}

.button-container {
    text-align: center;
}

.gs-introduction-content img {
    margin-bottom: 3em;
    margin-top: 3em;
}

.gs-introduction-content .button {
    margin: 0 auto;
}

.gs-introduction-content p:last-child,
.gs-cta p:last-child {
    margin-bottom: 0;
}

.gs-introduction-content p:last-child {
    font-style: italic;
    text-align: center;
}

.gs-cta {
    font-size: 115%;
    text-align: center;
}

.stakeholders-grid {
    display: flex;
    justify-content: space-between;
}

.stakeholders-block:first-child {
    margin-left: 0;
}

.stakeholders-block:last-child {
    margin-right: 0;
}

.stakeholders-block {
    background-color: hsl( 210, 50%, 50%);
    border-radius: 4px;
    flex: 1 1 auto;
    margin: 0 0.75em;
    position: relative;
    width: 100%;
}

.stakeholders-block--inner {
    align-items: center;
    display: flex;
    height: 100px;
    justify-content: center;
    padding: 5%;
}

.stakeholders-block h3 {
    color: #fff;
    font-size: 20px;
    margin: 0;
    text-align: center;
}

.stakeholders-block::after {
    border-top: 4px solid orange;
    content: "";
    display: block;
    height: 0;
    left: 100%;
    margin: 0;
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
	width: 1.5em;
}

.stakeholders-block:last-child::after {
    display: none;
}

.gs-steps-list {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 600px;
    padding: 0 2em;
    align-content: space-between;
    width: 100%;
}

.gs-step {
    background: white;
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    counter-increment: section;
    display: flex;
    flex-direction: column;
    padding: 1em;
    margin-bottom: 1em;
    position: relative;
}

.gs-step::before {
    background-color: hsl( 210, 50%, 50%);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.32);
    color: white;
    content: counter(section);
    display: block;
    left: -3em;
    line-height: 40px;
    height: 40px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
}

.gs-step::after {
    bottom: -1.2em;
    content: '';
    display: block;
    height: 1.2em;
    border-left: 4px solid orange;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.gs-step:last-child::after {
    display: none;
}

.gs-step h3,
.gs-step p:last-child {
    margin-bottom: 0;
}

.gs-step p {
    font-size: 16px;
}

.gs-step p:last-child {
    font-size: 14px;
    text-align: right;
}

.gs-step h3 {
    color: hsl( 210, 50%, 50%);
    font-size: 22px;
}

.gs-step .button {
    font-size: 16px;
}

.gs-step .button {
    align-self: flex-end;
    padding: 0.5em 1em;
}

.video-container {
    margin: 1em auto;
    max-width: 575px;
}

.button.download {
    text-align: center;
}

.wpum-action-links {
    margin-left: 0;
}

.hero-header {
    display: flex;
    flex-direction: column;
}

.hero-header .download {
    align-self: center;
    margin-top: 1.5em;
}

.hero-header--group {
    background: #fff;
    border: 2px solid darkgray;
    border-radius: 3px;
    display: block;
    font-size: 14px;
    padding: 0.25em 0.5em;
    position: absolute;
    right: 0.5em;
    top: 0.5em;
}

.hero-header--content {
    display: flex;
    flex-direction: column;
}

.hero-header--content .entry-title {
    font-size: 36px;
    margin-bottom: 0.25em;
}

.hero-attribute {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.135);
    border-radius: 10px;
    margin: 0;
    padding: 1em;
}

.hero-attribute p:last-of-type {
    margin-bottom: 0;
}

.hero-attribute span {
    font-weight: bold;
}

.hero-header--content .superpower {
    margin-bottom: 1em;
}

.hero-attribute:nth-of-type(2) {
    flex-grow: 1;
}

.download-all {
    align-self: flex-end;
}

.wpum-action-links {
    text-align: center;
}

.gs-login-prompt .wpum-action-links {
    margin: 0;
}

.footer-widgets {
    background-color: #55555e;
    color: #fff;
}

.footer-widgets a,
.footer-widgets widget-title {
    color: #fff;
}

.pb-downloads .standards-link {
    font-size: 16px;
    margin-top: 2em;
    text-align: center;
}

.pb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
    row-gap: 1em;
}

.pb-grid .button {
    font-size: 14px;
    width: 100%;
}

.return-link {
    margin-top: 1.5em;
}

@media (min-width: 769px) {
    .hero-header {
        flex-direction: row;
    }

    .hero-header--content .entry-title {
        text-align: right;
    }

    .page-header .gb-shapes {
        display: block;
    }

    .single .hero-header--image {
        margin-right: 1em;
        max-width: 150px;
        width: 100%
    }

    .wpum-registration-form .fieldset-user_firstname,
    .wpum-registration-form .fieldset-user_lastname,
    .wpum-registration-form .fieldset-wpum_city,
    .wpum-registration-form .fieldset-wpum_state {
        float: left;
    }

    .wpum-registration-form .fieldset-user_firstname,
    .wpum-registration-form .fieldset-user_lastname {
        width: calc( 50% - 1em );
    }

    .wpum-registration-form .fieldset-wpum_city {
        width: calc( 60% - 1em );
    }

    .wpum-registration-form .fieldset-wpum_state {
        width: calc( 40% - 1em );
    }

    .wpum-registration-form .fieldset-user_firstname,
    .wpum-registration-form .fieldset-wpum_city {
        margin-right: 2em;
    }

    .wpum-registration-form .fieldset-user_email,
    .wpum-registration-form .fieldset-wpum_position {
        clear: both;
    }

    .wpum-registration-form,
    .wpum-login-form {
        max-width: 75%;
        margin: 0 auto;
    }

    .hero-content .wpum-login-form {
        background: none;
        max-width: 100%;
        border: 0;
        padding: 0 0 1em;
    }

    .gs-login-prompt .wpum-login-form {
        border: 0;
    }
}

@media (min-width: 1024px) {
    .hero-content.logged-out {
        margin: 0 10%;
    }

    .hero-group--heroes {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 2em;
    }
    
    .hero-group--heroes .hero {
        margin-bottom: 2em;
        flex: 0 0 calc(33.30% - 1.33em);
    }
}