/* ==========================================================================
   24Care — Shared base for custom page templates
   Child theme root. Loaded by every c24 template before its own stylesheet.

   Scoped to .c24-page, which every template puts on its <main> element.
   Everything here is shared: brand tokens, typography, buttons, the reveal
   animation, and Gravity Forms styling.
   ========================================================================== */

.c24-page {
  --indigo: #3D3E59;
  --parchment: #F4F1EA;
  --white: #FFFFFF;
  --cinnamon: #C37350;
  --cinnamon-dark: #A55C3D;
  --border: #DDD8CE;
  --text-muted: #6E6C7A;

  --font-head: "Cabin", sans-serif;
  --font-body: "EB Garamond", serif;

  --gutter: 24px;
  --max: 1200px;

  /* Height of the site header. Templates with a dark hero pull it up by this
     amount so the transparent header overlays it. Measure the header and
     adjust this one value if it is off. */
  --header-height: 80px;

  font-family: var(--font-body);
  color: var(--indigo);
}

.c24-page * {
  box-sizing: border-box;
}

/* The site header sits above the hero in the DOM. Lifting it into its own
   stacking context keeps it painting over a hero that has been pulled up
   underneath it. */
.elementor-location-header,
[data-elementor-type="header"],
.site-header {
  position: relative;
  z-index: 10;
}

.c24-container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.c24-page h1,
.c24-page h2,
.c24-page h3 {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--indigo);
  margin: 0 0 16px;
  line-height: 1.15;
}

.c24-page p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.c24-page .c24-eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinnamon);
  margin-bottom: 12px;
}

.c24-page .c24-section-title {
  font-size: clamp(28px, 3.2vw, 40px);
}

/* Light variants carry the .c24-page prefix so they outrank the base rules
   above. A bare class selector loses and renders indigo on indigo. */
.c24-page .c24-section-title--light,
.c24-page .c24-heading--light {
  color: var(--white);
}

.c24-page .c24-text--light {
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.c24-page .c24-btn {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  padding: 14px 32px;
  border-radius: 80px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.c24-page .c24-btn--primary {
  background-color: var(--cinnamon);
  color: var(--white);
}

.c24-page .c24-btn--primary:hover,
.c24-page .c24-btn--primary:focus {
  background-color: var(--cinnamon-dark);
  color: var(--white);
  transform: translateY(-2px);
}

.c24-page .c24-link-arrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 500;
  color: var(--cinnamon);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  margin-top: 8px;
}

.c24-page .c24-link-arrow::after {
  content: " \2192";
}

.c24-page .c24-link-arrow:hover {
  color: var(--cinnamon-dark);
}

/* --------------------------------------------------------------------------
   Checklist marker, shared by inclusion lists
   -------------------------------------------------------------------------- */

.c24-page .c24-check {
  position: relative;
  padding-left: 30px;
  font-size: 18px;
  line-height: 1.5;
}

.c24-page .c24-check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--cinnamon);
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2016%2016'%20fill%3D'none'%20stroke%3D'%23C37350'%20stroke-width%3D'2'%3E%3Cpath%20d%3D'M4%208.5l2.5%202.5L12%205.5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Reveal animation

   The .c24-reveal class is added by JavaScript, not in the markup. If JS is
   unavailable the class never lands and everything renders visible, so the
   page can never be left blank by a failed script.
   -------------------------------------------------------------------------- */

.c24-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.c24-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .c24-reveal,
  .c24-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Gravity Forms
   -------------------------------------------------------------------------- */

.c24-page .gform_wrapper {
  --gf-color-primary: var(--cinnamon);
  --gf-color-primary-rgb: 195, 115, 80;
  --gf-color-primary-contrast: #FFFFFF;
  --gf-color-primary-darker: var(--cinnamon-dark);
  --gf-ctrl-border-color: var(--border);
  --gf-ctrl-border-color-focus: var(--indigo);
  --gf-ctrl-radius: 2px;
  --gf-ctrl-btn-bg-color-primary: var(--cinnamon);
  --gf-ctrl-btn-bg-color-hover-primary: var(--cinnamon-dark);
  --gf-ctrl-btn-color-primary: #FFFFFF;
  --gf-ctrl-btn-radius: 80px;
  --gf-field-gap-y: 12px;
  --gf-form-gap-y: 12px;

  margin: 0;
}

/* Gravity Forms applies its own row spacing that outranks the gap variables
   above, so set the grid gap directly and zero the per-field margins it also
   adds. Without this the fields sit roughly 40px apart. */
.c24-page .gform_wrapper .gform_fields {
  row-gap: 12px !important;
  grid-row-gap: 12px !important;
}

.c24-page .gform_wrapper .gfield {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.c24-page .gform_wrapper .ginput_complex {
  margin-bottom: 0 !important;
}

.c24-page .gform_wrapper input[type="text"],
.c24-page .gform_wrapper input[type="email"],
.c24-page .gform_wrapper input[type="tel"],
.c24-page .gform_wrapper textarea,
.c24-page .gform_wrapper select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--white);
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 1.4;
  color: var(--indigo);
  -webkit-appearance: none;
  appearance: none;
}

/* Selects need a fixed height rather than vertical padding. GF sets its own
   min-height, which beats a plain height and leaves the text stranded at the
   top of a stretched box, so both are set here. 48px matches the computed
   height of the text inputs above: 16px at 1.4 line-height, plus 12px padding
   top and bottom, plus the borders. */
.c24-page .gform_wrapper select {
  height: 48px !important;
  min-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 40px;
  line-height: normal;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20fill%3D'%233D3E59'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M7%2010l5%205%205-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.c24-page .gform_wrapper .gfield_label {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--indigo);
  margin-bottom: 6px;
}

.c24-page .gform_wrapper input:focus,
.c24-page .gform_wrapper textarea:focus,
.c24-page .gform_wrapper select:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px rgba(61, 62, 89, 0.18);
  outline: none;
}

.c24-page .gform_wrapper .gform_footer {
  margin: 0;
  padding: 16px 0 0;
}

.c24-page .gform_wrapper .gform_footer input[type="submit"],
.c24-page .gform_wrapper .gform_footer button[type="submit"],
.c24-page .gform_wrapper .gform_footer .gform_button,
.c24-page .gform_wrapper .gform-theme-button {
  background-color: var(--cinnamon) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 80px !important;
  padding: 14px 32px !important;
  font-family: var(--font-head) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  width: auto !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.c24-page .gform_wrapper .gform_footer input[type="submit"]:hover,
.c24-page .gform_wrapper .gform_footer button[type="submit"]:hover,
.c24-page .gform_wrapper .gform_footer .gform_button:hover,
.c24-page .gform_wrapper .gform-theme-button:hover {
  background-color: var(--cinnamon-dark) !important;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Shared responsive
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .c24-page p {
    font-size: 17px;
  }

  .c24-page .c24-check {
    font-size: 17px;
  }
}