/**
 * Froggy Base: self-hosted brand typeface + font overrides, scoped to the
 * Froggy Landing page template only.
 */

@font-face {
  font-family: "Futura Now Headline";
  src: url("fonts/futura-now-headline/FuturaNowHeadline.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura Now Headline";
  src: url("fonts/futura-now-headline/FuturaNowHeadlineItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Futura Now Headline";
  src: url("fonts/futura-now-headline/FuturaNowHeadlineMedium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura Now Headline";
  src: url("fonts/futura-now-headline/FuturaNowHeadlineMediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Futura Now Headline";
  src: url("fonts/futura-now-headline/FuturaNowHeadlineBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura Now Headline";
  src: url("fonts/futura-now-headline/FuturaNowHeadlineBoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Futura Now Headline";
  src: url("fonts/futura-now-headline/FuturaNowHeadlineExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura Now Headline";
  src: url("fonts/futura-now-headline/FuturaNowHeadlineBlack.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura Now Headline";
  src: url("fonts/futura-now-headline/FuturaNowHeadlineExtraBlack.ttf") format("truetype");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

.page-template-template-froggy-landing-php {
  --font-default: "Futura Now Headline", Arial, sans-serif;
  --font-title: "Futura Now Headline", Arial, sans-serif;
}

/**
 * Headings and body text default to black on this landing page.
 * - .is-dark-mode sections (e.g. a froggy-background with a dark color)
 *   keep their own light text color, so headings placed inside a dark
 *   section stay readable instead of turning invisible black-on-dark-blue.
 */
.page-template-template-froggy-landing-php h1,
.page-template-template-froggy-landing-php h2,
.page-template-template-froggy-landing-php h3,
.page-template-template-froggy-landing-php h4,
.page-template-template-froggy-landing-php h5,
.page-template-template-froggy-landing-php h6,
.page-template-template-froggy-landing-php .blocks .wp-block-heading.is-style-h1,
.page-template-template-froggy-landing-php .blocks .wp-block-heading.is-style-h2,
.page-template-template-froggy-landing-php .blocks .wp-block-heading.is-style-h3,
.page-template-template-froggy-landing-php .blocks .wp-block-heading.is-style-h4,
.page-template-template-froggy-landing-php .blocks .wp-block-heading.is-style-h5,
.page-template-template-froggy-landing-php p {
  color: #000;
}

.page-template-template-froggy-landing-php h1,
.page-template-template-froggy-landing-php h2,
.page-template-template-froggy-landing-php h3,
.page-template-template-froggy-landing-php h4,
.page-template-template-froggy-landing-php h5,
.page-template-template-froggy-landing-php h6,
.page-template-template-froggy-landing-php .blocks .wp-block-heading.is-style-h1,
.page-template-template-froggy-landing-php .blocks .wp-block-heading.is-style-h2,
.page-template-template-froggy-landing-php .blocks .wp-block-heading.is-style-h3,
.page-template-template-froggy-landing-php .blocks .wp-block-heading.is-style-h4,
.page-template-template-froggy-landing-php .blocks .wp-block-heading.is-style-h5 {
  font-weight: 900;
}

.page-template-template-froggy-landing-php h1,
.page-template-template-froggy-landing-php .blocks .wp-block-heading.is-style-h1 {
  /* scales between ~28px on narrow screens and 60px from ~960px viewport up */
  font-size: clamp(1.75rem, .75rem + 5vw, 3.75rem);
}

/**
 * A paragraph directly following a heading shouldn't also add its own
 * top margin on top of the heading's bottom margin - avoids double
 * spacing.
 */
.page-template-template-froggy-landing-php :is(h1, h2, h3, h4, h5, h6, .wp-block-heading) + p {
  margin-top: 0;
}

.page-template-template-froggy-landing-php .is-dark-mode h1,
.page-template-template-froggy-landing-php .is-dark-mode h2,
.page-template-template-froggy-landing-php .is-dark-mode h3,
.page-template-template-froggy-landing-php .is-dark-mode h4,
.page-template-template-froggy-landing-php .is-dark-mode h5,
.page-template-template-froggy-landing-php .is-dark-mode h6,
.page-template-template-froggy-landing-php .blocks .is-dark-mode .wp-block-heading.is-style-h1,
.page-template-template-froggy-landing-php .blocks .is-dark-mode .wp-block-heading.is-style-h2,
.page-template-template-froggy-landing-php .blocks .is-dark-mode .wp-block-heading.is-style-h3,
.page-template-template-froggy-landing-php .blocks .is-dark-mode .wp-block-heading.is-style-h4,
.page-template-template-froggy-landing-php .blocks .is-dark-mode .wp-block-heading.is-style-h5,
.page-template-template-froggy-landing-php .is-dark-mode p {
  color: inherit;
}

/**
 * The site's global ".blocks .alignfull" rule (assets/styles/base/_blocks.scss)
 * adds top/bottom margin to any full-width block. That leaves an ugly gap
 * of page background showing above/below full-bleed froggy blocks that
 * have their own background color/image (e.g. froggy-background,
 * froggy-media-text set to "full"). Kill it for those, so the color runs
 * edge-to-edge into the next block. Not scoped to the landing template -
 * this is a structural fix that applies wherever these blocks are used.
 */
.blocks .alignfull.wp-block-acf-froggy-background,
.blocks .alignfull.wp-block-acf-froggy-media-text,
.blocks .alignfull.wp-block-acf-froggy-icon-cards,
.blocks .alignfull.wp-block-acf-froggy-card-carousel {
  margin-top: 0;
  margin-bottom: 0;
}

.page-template-template-froggy-landing-php .is-style-pretitle {
  color: #000;
  font-family: "Futura Now Headline";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 85%; /* 13.6px */
  letter-spacing: 1.6px;
  margin-bottom: 0;
}

.site .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
  color: #000;
  leading-trim: both;
  text-edge: cap;
  font-family: var( --font-title, "sans-serif");
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 85%; /* 13.6px */
}

/* Keep labels readable when the form sits inside a dark froggy-background
   section - .is-dark-mode is an ancestor of .gform_wrapper here, not a
   descendant, so it must come before it in the selector. */
.site .is-dark-mode .gform_wrapper .gform_body .gform_fields .gfield .gfield_label,
.site .is-dark-mode .gform_wrapper .gform_body .gfield_label .gfield_required_asterisk {
  color: inherit;
}

.site .gform_wrapper .gform_body .gform_fields .gfield.gfield input {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.20);
  background: #F5F5F7;
}

.site .gform_wrapper .gform_footer input[type="submit"].gform_button.gform_button {
  border-radius: 50px;
  background: #000;
  color: #FFF;
  border: 1px solid #000;
  font-family: var( --font-default, "sans-serif");
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-bottom: 0;
  transition: background-color 0.3s, color 0.3s;
}

.site .gform_wrapper .gform_footer input[type="submit"].gform_button.gform_button:hover {
  background-color: #FFF;
  color: #000;
  transform: none;
}

.site .gform_wrapper .gform_required_legend {
  display: none !important;
}

.site .gform_wrapper .gform_body .gfield_label .gfield_required_asterisk {
  color: #000;
  font-family: "Futura Now Headline";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 85%;
}

/**
 * Consistent 1200px content width across froggy blocks, so full-bleed
 * sections (froggy-background set to "full") and blocks that don't get
 * WordPress's automatic alignwide cap (1216px, only applies to "wide")
 * still line up with each other instead of drifting to different widths.
 * Targets each block's own inner content element, not its outer
 * "wp-block-acf-froggy-*" wrapper, so it doesn't fight that wrapper's
 * align/alignwide/alignfull classes.
 */
.froggy-background__content,
.froggy-icon-cards,
.froggy-card-carousel,
.froggy-media-text {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}