/*
 * ADJASA content styles
 * --------------------------------------------------------------------------
 * Typography and blocks. Loaded on the public site and inside the block
 * editor, so what is seen while editing is what is published.
 * All values come from tokens.css.
 */

/* Fluid type, Squarespace style: size = (n - 1) x fluid unit + 1rem.
   The fluid unit is 1.2vw on desktop, a height-based unit on phones, and is
   capped so that "4" is exactly 4rem on a large screen. */
:root { --adj-f: min(var(--adj-fluid), 1rem); }

body {
	margin: 0;
	background-color: var(--adj-bg);
	color: var(--adj-text);
	font-family: var(--adj-font-body);
	font-weight: var(--adj-body-weight);
	font-size: calc((var(--adj-normal) - 1) * var(--adj-f) + 1rem);
	line-height: var(--adj-body-line);
	letter-spacing: var(--adj-body-spacing);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Headings ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: var(--adj-heading-gap) 0;
	color: var(--adj-heading);
	font-family: var(--adj-font-heading);
	font-weight: var(--adj-heading-weight);
	line-height: var(--adj-heading-line);
	letter-spacing: var(--adj-heading-spacing);
	text-transform: var(--adj-heading-case);
	overflow-wrap: break-word;
}
h1 { font-size: calc((var(--adj-h1) - 1) * var(--adj-f) + 1rem); }
h2 { font-size: calc((var(--adj-h2) - 1) * var(--adj-f) + 1rem); }
h3 { font-size: calc((var(--adj-h3) - 1) * var(--adj-f) + 1rem); }
h4, h5, h6 { font-size: calc((var(--adj-h4) - 1) * var(--adj-f) + 1rem); }

/* Bold inside a heading keeps the heading face, one step heavier. */
h1 strong, h2 strong, h3 strong, h4 strong { font-weight: var(--adj-bold-weight); }

/* Running text -------------------------------------------------------------- */
p { margin: var(--adj-para-gap) 0; }
strong, b { font-weight: var(--adj-bold-weight); }
em, i { font-style: italic; }

.has-large-font-size  { font-size: calc((var(--adj-large) - 1) * var(--adj-f) + 1rem) !important; }
.has-normal-font-size { font-size: calc((var(--adj-normal) - 1) * var(--adj-f) + 1rem) !important; }
.has-small-font-size  { font-size: calc((var(--adj-small) - 1) * var(--adj-f) + 1rem) !important; }

a {
	color: var(--adj-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: opacity 0.1s linear;
}
a:hover { opacity: 0.7; }

ul, ol { margin: var(--adj-para-gap) 0; padding-left: 2.4em; }
li { margin: 0.5rem 0; }
li > ul, li > ol { margin: 0.5rem 0; }

hr, .wp-block-separator {
	height: 1px;
	margin: var(--adj-block-gap) 0;
	border: 0;
	background-color: currentColor;
	opacity: 0.2;
}

blockquote, .wp-block-quote {
	margin: var(--adj-block-gap) 0;
	padding: 0;
	border: 0;
	font-size: calc((var(--adj-large) - 1) * var(--adj-f) + 1rem);
	line-height: 1.5;
}

/* Sections ------------------------------------------------------------------
   One section = one full-width band, like a Squarespace page section.
   Padding left and right is the page padding; the blocks inside are centred
   at the content width (or the max page width when set to "wide"). */
.adjasa-section {
	box-sizing: border-box;
	padding: var(--adj-section-pad) var(--adj-page-padding);
	background-color: var(--adj-bg);
	color: var(--adj-text);
}
.adjasa-section.is-style-adjasa-small { padding-top: var(--adj-section-pad-s); padding-bottom: var(--adj-section-pad-s); }
.adjasa-section > :first-child { margin-top: 0; }
.adjasa-section > :last-child  { margin-bottom: 0; }

/* Colour themes for a section, as in Squarespace (White / Light / Dark). */
.adjasa-section.is-style-adjasa-light { --adj-bg: var(--adj-light); }
.adjasa-section.is-style-adjasa-dark {
	--adj-bg: var(--adj-black);
	--adj-text: var(--adj-white);
	--adj-heading: var(--adj-white);
	--adj-link: var(--adj-white);
	--adj-button-bg: var(--adj-white);
	--adj-button-text: var(--adj-black);
}

/* Images ------------------------------------------------------------------ */
.wp-block-image { margin: var(--adj-block-gap) auto; }
.wp-block-image img { display: block; width: 100%; height: auto; }
.wp-block-image figcaption,
.wp-block-image .wp-element-caption {
	margin: 0.75rem 0 0;
	font-size: calc((var(--adj-small) - 1) * var(--adj-f) + 1rem);
	text-align: left;
}

/* Buttons ----------------------------------------------------------------- */
.wp-block-buttons { margin: var(--adj-block-gap) 0; gap: 0.8rem; }
.wp-block-button .wp-block-button__link,
.adjasa-form button[type="submit"] {
	display: inline-block;
	box-sizing: border-box;
	padding: 1.2rem 2.004rem;
	border: 0;
	border-radius: var(--adj-button-radius);
	background-color: var(--adj-button-bg);
	color: var(--adj-button-text);
	font-family: var(--adj-font-body);
	font-size: calc((var(--adj-button) - 1) * var(--adj-f) + 1rem);
	font-weight: var(--adj-button-weight);
	letter-spacing: var(--adj-button-spacing);
	text-transform: var(--adj-button-case);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.1s linear;
}
.wp-block-button .wp-block-button__link:hover,
.adjasa-form button[type="submit"]:hover { opacity: 0.8; }

/* Executive committee grid ------------------------------------------------ */
.adjasa-people {
	display: grid;
	grid-template-columns: repeat(var(--adj-grid-cols), minmax(0, 1fr));
	gap: var(--adj-grid-row-gap) var(--adj-grid-col-gap);
	margin-top: var(--adj-block-gap);
}
.adjasa-person > * { margin-top: 0; margin-bottom: 0; }
.adjasa-person .wp-block-image { margin: 0 0 1.4rem; }
.adjasa-person .wp-block-image img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
.adjasa-person h3 {
	margin: 0 0 0.4rem;
	font-size: calc((var(--adj-h4) - 1) * var(--adj-f) + 1rem);
}
.adjasa-person p { margin: 0 0 1.1rem; }
.adjasa-person .wp-block-buttons { margin: 0; }
.adjasa-person .wp-block-button .wp-block-button__link {
	padding: 0.8rem 1.336rem;
	font-size: calc((var(--adj-small) - 1) * var(--adj-f) + 1rem);
}

/* Membership form --------------------------------------------------------- */
.adjasa-form { margin: var(--adj-block-gap) 0 0; }
.adjasa-form fieldset { margin: 0 0 1.5rem; padding: 0; border: 0; min-width: 0; }
.adjasa-form legend { padding: 0; margin: 0 0 0.35rem; }
.adjasa-form .adjasa-field { margin: 0 0 1.5rem; }
.adjasa-form .adjasa-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.adjasa-form .adjasa-field-row .adjasa-field { margin-bottom: 0; }
.adjasa-form label { display: block; margin: 0 0 0.35rem; line-height: 1.4; }
.adjasa-form .adjasa-sub { font-size: calc((var(--adj-small) - 1) * var(--adj-f) + 1rem); }
.adjasa-form .adjasa-req { margin-left: 0.3em; opacity: 0.6; font-size: calc((var(--adj-small) - 1) * var(--adj-f) + 1rem); }
.adjasa-form input[type="text"],
.adjasa-form input[type="email"],
.adjasa-form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--adj-field-border);
	border-radius: 0;
	background-color: var(--adj-field-bg);
	color: #000000;
	font: inherit;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}
.adjasa-form textarea { min-height: 7.5rem; resize: vertical; }
.adjasa-form input:focus,
.adjasa-form textarea:focus { outline: 0; border-color: var(--adj-field-focus); box-shadow: 0 0 0 1px var(--adj-field-focus); }
.adjasa-form .adjasa-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.adjasa-form-message { margin: var(--adj-block-gap) 0 0; padding: 1rem 1.25rem; border: 1px solid currentColor; }
.adjasa-form-message.is-error { color: var(--adj-error); }
.adjasa-form-message:focus { outline: 0; }

@media (max-width: 767px) {
	.adjasa-form .adjasa-field-row { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	a, .wp-block-button .wp-block-button__link, .adjasa-form button[type="submit"] { transition: none; }
}