/* =========================================================================
   Block content: entry layout and the theme's block styles (inc/setup.php).
   Loaded on the front end and inside the editor canvas, so content looks the
   same in both. Colours come from the theme.json presets.
   ========================================================================= */

/* ---------- Entry layout (page content outside a block theme) ---------- */
.odja-entry {
	--odja-entry-gutter: 20px;
	padding-inline: var(--odja-entry-gutter);
}
.odja-entry > * {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	margin-block: 0;
}
.odja-entry > * + * { margin-block-start: var(--wp--style--block-gap); }
.odja-entry > .alignwide { max-width: var(--wp--style--global--wide-size); }
.odja-entry > .alignfull { max-width: none; margin-inline: calc(-1 * var(--odja-entry-gutter)); }
.odja-entry > .alignfull + .alignfull { margin-block-start: 0; }
.odja-entry > .alignleft { float: left; margin-inline-end: 1.5em; }
.odja-entry > .alignright { float: right; margin-inline-start: 1.5em; }
.odja-entry::after { content: ""; display: table; clear: both; }

/* A full-width section at the very start or end of a page sits flush against the header or footer. */
.odja-section:has(> .odja-entry > .alignfull:first-child) { padding-top: 0; }
.odja-section:has(> .odja-entry > .alignfull:last-child) { padding-bottom: 0; }

/* ---------- Dark sections: headings and links follow the section's text colour ---------- */
.has-secondary-background-color :is(h1, h2, h3, h4, h5, h6),
.has-primary-dark-background-color :is(h1, h2, h3, h4, h5, h6),
.has-foreground-background-color :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
.has-secondary-background-color a:where(:not(.wp-element-button)),
.has-primary-dark-background-color a:where(:not(.wp-element-button)),
.has-foreground-background-color a:where(:not(.wp-element-button)) { color: inherit; }
.has-secondary-background-color .is-style-eyebrow { color: var(--wp--preset--color--primary-light); }
.has-primary-dark-background-color .is-style-eyebrow { color: inherit; }

/* Outline buttons take the surrounding text colour; on a dark section that's white. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) { background: transparent; border: 2px solid currentColor; padding: calc(.75em - 2px) calc(1.5em - 2px); }
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) { color: var(--wp--preset--color--primary-dark); }
:is(.has-secondary-background-color, .has-primary-dark-background-color) .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) { color: #fff; }
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover { background: var(--wp--preset--color--secondary); border-color: var(--wp--preset--color--secondary); color: #fff; }
:is(.has-secondary-background-color, .has-primary-dark-background-color) .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover { background: #fff; border-color: #fff; color: var(--wp--preset--color--secondary); }
.wp-block-button__link.has-background-background-color:hover { background: var(--wp--preset--color--surface) !important; }

/* ---------- Home hero ---------- */
.odja-hero {
	background-image:
		linear-gradient(90deg, var(--wp--preset--color--secondary) 25%, color-mix(in srgb, var(--wp--preset--color--secondary) 30%, transparent) 100%),
		url(../img/hero.jpg);
	background-position: center, right center;
	background-size: cover;
	border-bottom: 4px solid var(--wp--preset--color--highlight);
}
@media (max-width: 781px) {
	.odja-hero {
		background-image:
			linear-gradient(color-mix(in srgb, var(--wp--preset--color--secondary) 82%, transparent), color-mix(in srgb, var(--wp--preset--color--secondary) 82%, transparent)),
			url(../img/hero.jpg);
	}
}
.odja-hero h1 { max-width: 16em; margin-block: .25em .4em; }
.odja-hero .is-style-lead { max-width: 36em; color: #dfe5ee; }
.odja-hero .wp-block-buttons { margin-top: 2rem; }

/* ---------- Paragraph: eyebrow and lead ---------- */
.is-style-eyebrow {
	color: var(--wp--preset--color--primary-dark);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.is-style-eyebrow + :is(h1, h2, h3) { margin-block-start: .35em !important; }
.is-style-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; }

/* ---------- Group: card and shaded panel ---------- */
.wp-block-group.is-style-card {
	height: 100%;
	padding: 28px 28px 24px;
	background: var(--wp--preset--color--background);
	border: 1px solid #e2ddd2;
	border-top: 4px solid var(--wp--preset--color--primary);
	border-radius: 4px;
}
.wp-block-group.is-style-card > :first-child { margin-top: 0; }
.odja-feature::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--odja-icon) center / 40px no-repeat var(--wp--preset--color--tint);
}
.odja-feature--advocacy { --odja-icon: url(../img/icons/advocacy.svg); }
.odja-feature--development { --odja-icon: url(../img/icons/development.svg); }
.odja-feature--resources { --odja-icon: url(../img/icons/resources.svg); }
.wp-block-group.is-style-card > * + * { margin-block-start: 1rem; }
.wp-block-group.is-style-panel {
	padding: 28px 32px;
	background: var(--wp--preset--color--tint);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 0 4px 4px 0;
}
.wp-block-group.is-style-panel > :first-child { margin-top: 0; }
.wp-block-column > .wp-block-group.is-style-card:only-child { height: 100%; }

.odja-more a { font-weight: 600; text-decoration: none; }
.odja-more a::after { content: " →"; }
.odja-more a:hover { text-decoration: underline; }

/* ---------- Separator: short rule ---------- */
.wp-block-separator.is-style-short {
	width: 64px;
	max-width: 64px;
	margin-inline: 0 auto;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--highlight);
	opacity: 1;
}
.has-text-align-center + .wp-block-separator.is-style-short { margin-inline: auto; }

/* ---------- List: check marks ---------- */
.wp-block-list.is-style-checks { list-style: none; padding-left: 0; }
.wp-block-list.is-style-checks li { position: relative; padding-left: 1.9em; margin-bottom: .5em; }
.wp-block-list.is-style-checks li::before {
	content: "";
	position: absolute;
	left: .15em;
	top: .3em;
	width: .55em;
	height: .95em;
	border: solid var(--wp--preset--color--primary);
	border-width: 0 .18em .18em 0;
	transform: rotate(45deg);
}

/* ---------- Stats band (About) ---------- */
.odja-stats-band { border-bottom: 4px solid var(--wp--preset--color--highlight); }
.odja-stats { text-align: center; }
.odja-stats > .wp-block-column + .wp-block-column { border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.odja-stat__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--highlight);
}
.odja-stat__label { margin-block-start: .5rem !important; color: #dfe5ee; }
@media (max-width: 781px) {
	.odja-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 32px 16px !important; }
	.odja-stats > .wp-block-column + .wp-block-column { border-left: 0; }
}

/* ---------- Timeline (About) ---------- */
.wp-block-list.odja-timeline { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 2px solid #e2ddd2; }
.odja-timeline li { position: relative; padding-bottom: 28px; }
.odja-timeline li:last-child { padding-bottom: 0; }
.odja-timeline li::before {
	content: "";
	position: absolute;
	left: -36px;
	top: .3em;
	width: 14px;
	height: 14px;
	border: 3px solid var(--wp--preset--color--surface);
	border-radius: 50%;
	background: var(--wp--preset--color--highlight);
	box-shadow: 0 0 0 1px var(--wp--preset--color--highlight);
}
.odja-timeline strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--secondary);
}

/* ---------- People (Board) ---------- */
.odja-region { color: var(--wp--preset--color--muted); }
.odja-officers h3 { font-size: var(--wp--preset--font-size--large); }
.wp-block-list.odja-people {
	max-width: var(--wp--style--global--wide-size);
	margin-block-start: var(--wp--preset--spacing--60);
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px 20px;
}
.odja-people li {
	padding: 14px 18px;
	background: var(--wp--preset--color--background);
	border: 1px solid #e2ddd2;
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 4px;
}
.odja-people strong { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 600; color: var(--wp--preset--color--secondary); }
.odja-people span { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* ---------- Contact cards ---------- */
.odja-contact-value { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 600; color: var(--wp--preset--color--secondary); overflow-wrap: anywhere; }
.odja-contact-value a { color: inherit; text-decoration: none; }
.odja-contact-value a:hover { color: var(--wp--preset--color--primary-dark); text-decoration: underline; }
.odja-contact-value + p { color: var(--wp--preset--color--muted); }

/* ---------- Pricing cards (Join) ---------- */
.wp-block-group.odja-price-card { display: flex; flex-direction: column; }
.odja-price-card .wp-block-buttons { margin-top: auto; padding-top: 1rem; }
.odja-price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.75rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--secondary);
}
.odja-price span { font-family: var(--wp--preset--font-family--body); font-size: 1rem; font-weight: 400; color: var(--wp--preset--color--muted); }
.wp-block-group.is-style-card > .odja-price-note { margin-block-start: .4rem; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.is-style-panel code { padding: .1em .4em; background: var(--wp--preset--color--background); border: 1px solid #e2ddd2; border-radius: 3px; font-size: .9em; }

/* ---------- WPForms (Contact) ---------- */
.odja-form-card .wpforms-container {
	--wpforms-field-border-radius: 4px;
	--wpforms-field-border-color: #cfc8ba;
	--wpforms-field-text-color: var(--wp--preset--color--foreground);
	--wpforms-label-color: var(--wp--preset--color--secondary);
	--wpforms-label-sublabel-color: var(--wp--preset--color--muted);
	--wpforms-button-background-color: var(--wp--preset--color--primary-dark);
	--wpforms-button-text-color: #fff;
	--wpforms-button-border-radius: 4px;
	margin: 0;
}
.odja-form-card .wpforms-container .wpforms-field-label { font-weight: 600; }
.odja-form-card .wpforms-container :is(input, select, .wpforms-field-row).wpforms-field-medium { max-width: 100%; }
.odja-form-card .wpforms-container :is(input, textarea):focus { border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 1px var(--wp--preset--color--primary); }
.odja-form-card .wpforms-container .wpforms-submit { font-weight: 600; padding-inline: 1.5em; }
.odja-form-card .wpforms-container .wpforms-submit:hover { background: var(--wp--preset--color--secondary) !important; }

/* ---------- Core block touches ---------- */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table :is(th, td) { border: 1px solid #e2ddd2; padding: .6em .8em; text-align: left; }
.wp-block-table thead { background: var(--wp--preset--color--surface); border-bottom: 2px solid var(--wp--preset--color--primary); }
.wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: .75em; }
.wp-block-file__button { border-radius: 4px; }
.wp-block-image img { border-radius: 4px; }
.wp-block-embed iframe { max-width: 100%; }

/* ---------- PMPro restricted-content message ---------- */
.pmpro_content_message { max-width: var(--wp--style--global--content-size); margin-inline: auto; }

/* ---------- Embedded Google Calendar (Custom HTML block) ---------- */
.odja-calendar { max-width: var(--wp--style--global--wide-size); margin-inline: auto; background: var(--wp--preset--color--background); border: 1px solid #e2ddd2; border-radius: 4px; overflow: hidden; }
.odja-calendar iframe { display: block; width: 100%; height: 600px; border: 0; }
@media (max-width: 600px) { .odja-calendar iframe { height: 480px; } }