/*
 Theme Name:        Uptown Charity Theme
 Text Domain:       uptown-child-charity
 Author:            April Auger
 Author URI:        https://aprilauger.com
 Description:       Charity is a child theme designed to be used alongside the Uptown theme.
 Template:          uptown
 Version:           1.0.0
 Requires at least: 6.4
 Tested up to:      7.0
 Requires PHP:      8.3
 License:           GNU General Public License v2 or later
 License URI:       http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Buttons */
#header .header__wrapper .header__navbar .buttons a {
	background-color: var(--xui-primary);
	border-color: var(--xui-primary);
	border-radius: 2rem;
	border-style: solid;
	border-width: 1px;
	color: var(--xui-white);
	font-family: var(--xui-font-heading);
	font-size: var(--xui-font-size-sm);
	font-style: inherit;
	font-weight: 500;
	letter-spacing: 0.04rem;
	line-height: 1;
	padding: 0.5rem 1rem;
}

#header .header__wrapper .header__navbar .buttons a:hover,
#header .header__wrapper .header__navbar .buttons a:active {
	background-color: var(--xui-secondary);
	border-color: var(--xui-secondary);
	border-style: solid;
	border-width: 1px;
	color: var(--xui-white);
}

.is-style-outline .wp-block-button__link {
	border: 1px solid var(--xui-white);
}

.is-style-outline .wp-block-button__link:hover {
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.1);
}

/* Images */
.post-image {
	border-radius: 1rem;
}

/* Header */
@media (min-width: 1200px) {
	.header__wrapper.start-style,
	.header__wrapper.start-style .header__navbar,
	.header__wrapper.start-style .header__navbar.dropdown-shadow {
		box-shadow: none !important;
	}

	.header__wrapper:not(.start-style) .header__navbar {
		box-shadow: 0 0.5rem 1.5rem rgb(31 52 70 / 12%);
	}
}

/* Hero */
.hero {
	--hero-blue-soft: #dfeaf2;
	--hero-green-soft: #dbeadd;

	overflow: hidden;
	position: relative;
}

.hero__content h1 {
	line-height: 1.02;
	margin: 0 0 1.5rem;
	max-width: 25rem;
}

.hero__content p {
	line-height: 1.55;
	margin: 0 0 1.4rem;
	max-width: 32rem;
}

.hero__images {
	overflow: visible;
	position: relative;
	z-index: 1;
}

.hero__images > .kt-inside-inner-col {
	display: grid;
	min-height: clamp(30rem, 37vw, 36rem);
	overflow: visible;
	place-items: center;
}

.hero-image {
	aspect-ratio: 1;
	isolation: isolate;
	margin: 0 auto;
	overflow: visible;
	position: relative;
	transform: translateX(1.5rem);
	width: min(38rem, 46vw);
}

/* Green upper-left panel */
.hero-image::before {
	background: var(--hero-green-soft);
	border-radius: 1.5rem;
	content: "";
	height: 50%;
	left: -4%;
	position: absolute;
	top: -5%;
	transform: rotate(-4deg);
	width: 50%;
	z-index: 0;
}

/* Blue lower-right panel */
.hero-image::after {
	background: var(--hero-blue-soft);
	border-radius: 1.5rem;
	bottom: 7%;
	content: "";
	height: 50%;
	position: absolute;
	right: -4%;
	transform: rotate(4deg);
	width: 50%;
	z-index: 0;
}

/* Main image */
.hero__image {
	aspect-ratio: 1;
	border: 1rem solid #fff;
	border-radius: 1.5rem;
	box-shadow:
		0 0 0 1px rgb(47 111 168 / 5%),
		0 1.25rem 2.75rem rgb(31 52 70 / 12%);
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 87%;
	z-index: 1;
}

.hero__image img {
	aspect-ratio: 1;
	border-radius: inherit;
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/* Tablet */
@media (max-width: 1024px) {
	.hero-image::before {
		height: 50%;
		left: -2.5%;
		width: 54%;
	}

	.hero-image::after {
		bottom: 0;
		height: 51%;
		right: -2%;
		width: 57%;
	}

	.hero__image {
		border-width: 0.75rem;
		width: 89%;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.hero__image {
		border-radius: 1.25rem;
		border-width: 0.5rem;
		width: 89%;
	}

	.hero-image {
		margin-inline: auto;
		transform: none;
		width: min(30rem, 88vw);
	}

	.hero-image::before {
		height: 49%;
		left: -2%;
		width: 53%;
	}

	.hero-image::after {
		bottom: 1rem;
		height: 50%;
		right: -2%;
		transform: rotate(3deg);
		width: 56%;
	}
}

@media (max-width: 480px) {
	.hero__image {
		border-radius: 1rem;
		width: 90%;
	}

	.hero-image::before {
		left: -1.5%;
		top: -1.5%;
	}

	.hero-image::after {
		bottom: -1.5%;
		right: -1.5%;
	}
}

/* Other */
#title-block.bkg-img .tb-wrapper::before {
	background: linear-gradient(
		90deg,
		rgb(47 111 168 / 92%) 0%,
		rgb(47 111 168 / 88%) 30%,
		rgb(47 111 168 / 72%) 42%,
		rgb(47 111 168 / 42%) 52%,
		rgb(47 111 168 / 12%) 59%,
		transparent 64%
	);
}

.media h3 {
	font-size: 1.5rem;
}

:root
	:where(
		.wp-block-image.is-style-rounded img,
		.wp-block-image .is-style-rounded img
	) {
	border-radius: 1rem;
}

/* Gravity Forms — global */
.gform_wrapper {
  --form-text: #112337;
  --form-muted: #5f6b79;
  --form-border: #c7d1dc;
  --form-border-hover: #93a2b2;
  --form-surface: var(--xui-gray-150, #eef3f7);
  --form-field-background: rgba(255, 255, 255, 0.68);
  --form-field-background-hover: rgba(255, 255, 255, 0.86);
  --form-field-background-focus: #fff;
  --form-error: #b42318;
  --form-control-height: 3rem;
  --form-radius: 0.375rem;
  --form-focus: var(--xui-primary, #005a7a);
  --form-focus-ring: rgba(0, 90, 122, 0.18);

  /*
   * Orbital theme bridge.
   * Gravity Forms injects per-form --gf-* values with ID-level specificity,
   * so these global overrides need !important to remain consistent.
   */
  --gf-ctrl-bg-color: var(--form-field-background) !important;
  --gf-ctrl-bg-color-hover: var(--form-field-background-hover) !important;
  --gf-ctrl-bg-color-focus: var(--form-field-background-focus) !important;
  --gf-ctrl-border-color: var(--form-border) !important;
  --gf-ctrl-border-color-hover: var(--form-border-hover) !important;
  --gf-ctrl-border-color-focus: var(--form-focus) !important;
  --gf-ctrl-border-size: 1px !important;
  --gf-ctrl-size: var(--form-control-height) !important;
  --gf-ctrl-radius: var(--form-radius) !important;
  --gf-ctrl-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(17, 35, 55, 0.025) !important;
  --gf-ctrl-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(17, 35, 55, 0.035) !important;
  --gf-ctrl-shadow-focus:
    0 0 0 3px var(--form-focus-ring),
    0 1px 2px rgba(17, 35, 55, 0.06) !important;

  width: 100%;
  padding: clamp(1.5rem, 3vw, 3rem);
  color: var(--form-text);
  background: var(--form-surface);
  border-radius: 1rem;
}

.gform_wrapper,
.gform_wrapper *,
.gform_wrapper *::before,
.gform_wrapper *::after {
  box-sizing: border-box;
}

/* Heading and required fields */
.gform_wrapper .gform_heading {
  margin-bottom: 2rem;
}

.gform_wrapper .gform_required_legend {
  display: none;
  margin: 0;
  color: var(--form-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.gform_wrapper .gfield_required {
  margin-left: 0.2rem;
  color: var(--form-error);
  font-size: inherit;
}

/* Field layout and spacing */
.gform_wrapper .gform_fields {
  column-gap: clamp(1rem, 2vw, 1.5rem);
  row-gap: clamp(1.5rem, 2.5vw, 2rem);
}

.gform_wrapper .gfield,
.gform_wrapper fieldset,
.gform_wrapper .ginput_complex > span {
  min-width: 0;
}

.gform_wrapper fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.gform_wrapper .ginput_complex {
  column-gap: 1rem;
  row-gap: 1rem;
}

.gform_wrapper .ginput_complex > span {
  margin: 0;
}

/* Labels */
.gform_wrapper .gfield_label {
  display: inline-block;
  margin: 0 0 0.5rem;
  color: var(--form-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.gform_wrapper .gform-field-label--type-sub {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--form-muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Text-like controls */
.gform_wrapper :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="month"],
  input[type="week"],
  select,
  textarea
) {
  width: 100%;
  min-height: var(--form-control-height);
  padding: 0.75rem 1rem;
  color: var(--form-text);
  background-color: var(--form-field-background);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(17, 35, 55, 0.025);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.gform_wrapper textarea {
  min-height: 9rem;
  resize: vertical;
}

.gform_wrapper select {
  padding-right: 2.75rem;
  cursor: pointer;
}

.gform_wrapper input[type="file"] {
  width: 100%;
  min-height: var(--form-control-height);
  padding: 0.65rem;
  color: var(--form-text);
  background-color: var(--form-field-background);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  font: inherit;
  font-size: 1rem;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

/* Hover */
.gform_wrapper :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="month"],
  input[type="week"],
  input[type="file"],
  select,
  textarea
):hover:not(:disabled):not([readonly]) {
  background-color: var(--form-field-background-hover);
  border-color: var(--form-border-hover);
}

/* Focus */
.gform_wrapper :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="month"],
  input[type="week"],
  input[type="file"],
  select,
  textarea
):focus {
  background-color: var(--form-field-background-focus);
  border-color: var(--form-focus);
  outline: 0;
  box-shadow:
    0 0 0 3px var(--form-focus-ring),
    0 1px 2px rgba(17, 35, 55, 0.06);
}

@supports (color: color-mix(in srgb, black, white)) {
  .gform_wrapper {
    --form-focus-ring: color-mix(in srgb, var(--form-focus) 20%, transparent);
  }
}

.gform_wrapper :focus-visible {
  outline-offset: 2px;
}

/* Placeholder, disabled, and read-only states */
.gform_wrapper ::placeholder {
  color: #74808d;
  opacity: 1;
}

.gform_wrapper :is(input, select, textarea):disabled,
.gform_wrapper :is(input, textarea)[readonly] {
  color: #66717e;
  background-color: rgba(226, 231, 236, 0.8);
  border-color: #ccd3db;
  cursor: not-allowed;
  opacity: 1;
}

/* Checkboxes and radio buttons */
.gform_wrapper :is(input[type="checkbox"], input[type="radio"]) {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--form-focus);
  cursor: pointer;
}

.gform_wrapper :is(.gchoice, .ginput_container_consent) {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.gform_wrapper :is(.gfield_checkbox, .gfield_radio) {
  display: grid;
  gap: 0.75rem;
}

.gform_wrapper :is(
  .gform-field-label--type-inline,
  .gfield_consent_label
) {
  color: var(--form-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}

/* Descriptions and validation */
.gform_wrapper :is(.gfield_description, .gsection_description) {
  margin-top: 0.5rem;
  color: var(--form-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.gform_wrapper .gfield_error :is(input, select, textarea),
.gform_wrapper :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--form-error);
}

.gform_wrapper :is(.validation_message, .gfield_validation_message) {
  color: var(--form-error);
}

/* Submit button */
.gform_wrapper .gform_button {
  border-radius: 999px !important;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.gform_wrapper .gform_button:hover {
  background-color: var(--xui-secondary) !important;
}

.gform_wrapper .gform_button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--form-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .gform_wrapper *,
  .gform_wrapper *::before,
  .gform_wrapper *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Sponsor logos */
.logo-gallery .kb-gallery-image-contain {
	padding-bottom: clamp(8rem, 30%, 10rem) !important;
}

.logo-gallery .kb-gallery-image-contain img {
	inset: 50% auto auto 50% !important;
	width: auto !important;
	height: auto !important;
	max-width: min(260px, 85%) !important;
	max-height: 110px !important;
	object-fit: contain;
	transform: translate(-50%, -50%) !important;
}

a {
	font-weight: 500;
}

/* Newsletter Reader */
.reader h3 {
	font-size: 1.5rem;
}

/* Staff */
.staff-list {
	text-align: center;
}

.staff-list > .row {
	justify-content: center;
}

.staff-list .staff__photo {
	margin-left: auto;
	margin-right: auto;
}

/* Title block */
@media (max-width: 991.98px) {
    #title-block.bkg-img .tb-wrapper::before {
        background: var(--xui-primary);
        opacity: .87;
    }
}

/* Footer */
#footer .d-flex.justify-content-between {
	align-items: center !important;
}

@media (max-width: 991.98px) {
	#footer #menu-footer-menu {
		flex-direction: column;
		gap: 0.25rem;
	}

	#footer .d-flex.justify-content-between {
		flex-direction: column-reverse !important;
		gap: 1rem;
	}

	#footer .social-media {
		display: flex;
		justify-content: center;
		text-align: center;
	}

	#footer .copyright {
		text-align: center;
	}

	#footer .column {
		margin-bottom: 0;
	}
}

/* Other */
@media (min-width: 1200px) {
    .header-fixed.home {
        --header-fixed-offset: 75px;
    }
}

.wp-block-button .has-primary-color.has-white-background-color:hover {
	color: var(--xui-white) !important;
	background: transparent !important;
	border: 1px solid var(--xui-white) !important;
}

.optimal-line-length {
	max-width: 900px;
	margin: auto;
}

iframe {
    border-radius: 1rem !important;
}

#footer {
	background: var(--xui-gray-200);
}

.page-id-134 h1 {
	font-style: italic;
}

.page-description {
	max-width: 550px;
	font-size: 1.25rem;
}

.page-id-134 #title-block {
    margin-bottom: 0;
}