.accordion-block {
	padding-bottom: var(--padding) !important;
	padding-top: 0 !important;

  	@media screen and (max-width: 992px) {
		padding-bottom: calc(var(--padding) * 2) !important;

		.container {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
	}
	
}

.main > .accordion-block:not(.alignwide):not(.alignfull) {
	width: 100% !important;
	max-width: 100% !important;
}

.accordion {
  --accordion-padding-x: 30px;
  --accordion-padding-y: 25px;
  --accordion-radius: 5px;
  --accordion-transition: 0.25s ease-in-out;

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;

  .accordion-card {
    background-color: var(--wp--preset--color--white);
    position: relative;
    transition: background-color var(--accordion-transition);

    &:not(:first-child) {
      margin-top: 10px;
    }

    &.show {
      border-color: var(--wp--preset--color--blue);
    }
  }

  .accordion-header-toggle {
		/* Button Style Resets */
		appearance: none;
		background: transparent;
		border: none;
		font-family: inherit;
		text-align: left;
		width: 100%;
		
		/* Layout */
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		cursor: pointer;
		margin-bottom: 0;
		padding: var(--accordion-padding-y) var(--accordion-padding-x);
		border-radius: var(--accordion-radius);
		transition: var(--accordion-transition);
		background-color: var(--wp--preset--color--blue);
		color: var(--wp--preset--color--white);

		&:hover {
			background-color: var(--wp--preset--color--blue);
			color: var(--wp--preset--color--white);
			.accordion-header {
				color: var(--wp--preset--color--white) !important;
			}

			.icon {
				background-color: var(--wp--preset--color--blue);
				i {
					color: var(--wp--preset--color--white);
				}
			}
		}

		/* Keyboard Navigation Focus Indicator */
		&:focus-visible {
			outline: 3px solid var(--wp--preset--color--blue);
			outline-offset: 2px;
		}

		.accordion-header {
			color: var(--wp--preset--color--white);
			font-size: 20px;
			font-family: var(--wp--preset--font-family--petit-serif);
			line-height: 1.3;
			text-wrap: balance;
			transition: color var(--accordion-transition);
		}

		.icon {
			background-color: var(--wp--preset--color--blue);
			border-radius: 50%;
			display: grid;
			height: 30px;
			flex-shrink: 0;
			place-content: center;
			width: 30px;
			transition: background-color var(--accordion-transition), transform var(--accordion-transition);

			i {
				color: var(--wp--preset--color--white);
				font-size: 22px;
				transition: var(--accordion-transition);
			}
		}

		/* Active / Open State */
		&.show,
		&[aria-expanded="true"] {
			background-color: var(--wp--preset--color--blue);
			.accordion-header {
				color: var(--wp--preset--color--white) !important;
			}
			.icon {
				background-color: var(--wp--preset--color--blue);
				i {
					color: var(--wp--preset--color--white);
					transform: rotate(90deg);
				}
			}
		}
  }

  .accordion-inner {
		display: none;

		.accordion-inner-content {
			padding: calc(var(--accordion-padding-y) + 5px) var(--accordion-padding-x);
			box-sizing: border-box;

			.content {
				font-size: 16px;
				line-height: 1.6;

				iframe {
					max-width: 100% !important;
					position: relative !important;
					&[src*="issuu.com"] {
						aspect-ratio: 1 / 1;
					}
				}

				/* wpautop wraps embedded iframes (eg. Issuu embeds) in a <p> — exclude that
				   wrapper from the general text max-width below so it doesn't also squeeze
				   the iframe inside it down to 86%. */
				p:has(> iframe) {
					max-width: 100%;
				}

				*:not(iframe) {
					color: var(--wp--preset--color--navy) !important;
					max-width: 86%;
					@media screen and (max-width: 662px) {
						max-width: 100%;
					}

					&[style="text-align: center"] {
						margin-left: auto;
						margin-right: auto;
					}

				}


				/* Spacing for nested elements inside ACF content */
				p:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

}

/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
	.accordion {
		--accordion-padding-x: 20px;
		--accordion-padding-y: 16px;

		.accordion-header-toggle {
			.accordion-header {
				font-size: 18px;
			}

			.icon {
				width: 42px;
				height: 42px;

				i {
					font-size: 16px;
				}
			}
		}

		.accordion-inner {
			.accordion-inner-content {
				max-width: 100%;
			}
		}
	}
}