/*
 * The public homepage. Copy and images are core blocks, so everything here is
 * layout and tone only — nothing that the Board would need a developer to change.
 *
 * Class hooks come from the blocks' own "Additional CSS class" field, so an editor
 * can add a paragraph or reorder a section without breaking the styling.
 */

/*
 * The footer is a separate top-level block, a sibling of .ms-home rather than a
 * child, so it has to declare the tokens itself. Without this `var(--h-ink)`
 * resolves to nothing, the dark ground never paints, and the light footer text
 * sits on white — invisible. Declare tokens on every root that uses them.
 */
.ms-home,
.ms-home-foot {
	--h-ink: #1b2930; --h-soft: #4c5d66; --h-sea: #0f5568; --h-line: #d2ccbf; --h-sand: #ece7dc;
	--h-sage: #55634a;
	--h-serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
}

/*
 * The display face. The site-wide Inter switch rewrites every h1/h2/h3 to one
 * sans — correct inside the members' area, where the job is scanning, and wrong
 * on the front door, where the association wants to look like somewhere people
 * live rather than an intranet. These selectors are class-based so they out-rank
 * that element-level rule without needing !important.
 *
 * Serif is spent on the things a reader stops at: the name, the standfirst, the
 * figures, the section headings, the manual's contents and the closing line.
 * Labels, navigation and the small print stay in Inter.
 */
.ms-home { font-size: 19px; line-height: 1.65; }

.ms-home .entry,
body.ms-home-page .eightcol { max-width: none; }

/* --- masthead: image, then the name, the numbers and the sign-in --- */
.ms-home-hero img { display: block; width: 100%; height: clamp(14rem, 32vw, 24rem); object-fit: cover; object-position: 50% 46%; }
.ms-home-hero figcaption { display: none; }

.ms-home-plate { background: #fcfaf6; border-bottom: 1px solid var(--h-line); padding: clamp(1.75rem, 4vw, 2.75rem) 0; }
.ms-home-plate .wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem); margin-bottom: 0; }
.ms-home-name { font-family: var(--h-serif); font-weight: 700; font-size: clamp(2.5rem, 6.5vw, 4.25rem); line-height: 1.02; letter-spacing: -.018em; margin: 0 0 .625rem; }
.ms-home-lead { font-family: var(--h-serif); font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.4; color: var(--h-soft); max-width: 90%; margin: 0 0 1.25rem; }

/* the four numbers, as a row of editable columns */
.ms-home-facts { max-width: 90%; border-top: 1px solid var(--h-line); margin: 0 0 1rem; gap: 0 !important; }
.ms-home-facts .wp-block-column { border-bottom: 1px solid #e0dace; padding: .8125rem 1rem .8125rem 0; margin: 0; }
.ms-home-facts p { margin: 0; font-size: 1rem; color: var(--h-soft); line-height: 1.3; }
.ms-home-facts p.ms-home-fig { font-family: var(--h-serif); margin-top: .0625rem; font-size: 1.4375rem; font-weight: 600; color: var(--h-ink); font-variant-numeric: tabular-nums; }

/* --- sign-in --- */
.ms-home-signin { background: var(--h-sand); border: 1px solid var(--h-line); border-radius: 4px; padding: 1.25rem 1.25rem 1.375rem; }
.ms-home-signin-h { font-family: var(--h-serif); font-weight: 600; margin: 0 0 .75rem; font-size: 1.3125rem; }
.ms-home-field { display: grid; gap: .3125rem; margin: 0 0 .875rem; }
.ms-home-field label { font-size: 1.0625rem; font-weight: 500; }
.ms-home-field input { font: inherit; font-size: 1.0625rem; width: 100%; min-height: 3.125rem; padding: .5rem .75rem; background: #fff; border: 1px solid var(--h-line); border-radius: 4px; }
.ms-home-remember { display: flex; align-items: center; gap: .5625rem; min-height: 2.75rem; margin: 0 0 .875rem; }
.ms-home-remember input { width: 1.625rem; height: 1.625rem; accent-color: var(--h-sea); flex: none; margin: 0; }
.ms-home-remember label { font-size: 1.0625rem; }
.ms-home-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 100%;
	min-height: 3.125rem; padding: .6875rem 1.5rem; border-radius: 4px;
	font: 600 1.0625rem/1.2 inherit; cursor: pointer; text-decoration: none;
	background: var(--h-sea); color: #fcfaf6; border: 1px solid #0a4053;
}
.ms-home-btn:hover, .ms-home-btn:focus { background: #0a4053; color: #fcfaf6; }
.ms-home-signin-aside { margin: .4375rem 0 0; font-size: 1rem; color: var(--h-soft); }
.ms-home-signin form { margin: 0; }

/* --- prose sections --- */
.ms-home-strip { padding: clamp(2rem, 4.5vw, 3rem) 0; border-top: 1px solid var(--h-line); }
.ms-home-strip .wp-block-heading { font-family: var(--h-serif); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.2; max-width: 24ch; margin: 0 0 1rem; }
.ms-home-strip p { max-width: 34rem; }
.ms-home-closing { font-family: var(--h-serif); font-size: 1.375rem; line-height: 1.4; margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid var(--h-line); max-width: 32ch; }
.ms-home-seelist { max-width: 26rem; }
.ms-home-seelist li { padding: .5rem 0; border-bottom: 1px solid #e0dace; list-style: none; }
.ms-home-seelist { padding-left: 0; margin-left: 0; }

/* --- table of contents (shortcode; counts read live) --- */
.ms-home-contents { background: #fcfaf6; border-top: 1px solid var(--h-line); padding: clamp(2rem, 4.5vw, 3rem) 0; }
.ms-toc-cols { display: grid; gap: clamp(2rem, 6vw, 5rem); margin-top: 1.5rem; }
@media only screen and (min-width: 992px) { .ms-toc-cols { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.ms-toc-group + .ms-toc-group { margin-top: 1.75rem; }
.ms-toc-group h3 { font-size: 1rem; line-height: 1.3; font-weight: 600; color: #55634a; margin: 0 0 .25rem; padding-bottom: .4375rem; border-bottom: 1px solid var(--h-line); }
.ms-toc-group--spine h3 { font-size: 1.0625rem; line-height: 1.3; color: var(--h-ink); border-bottom: 2px solid var(--h-ink); }
.ms-toc-list { list-style: none; margin: 0; padding: 0; }
.ms-toc-list li { display: flex; align-items: baseline; gap: .5rem; padding: .5rem 0; margin: 0; }
.ms-toc-mark { flex: none; width: 1.5rem; font-family: var(--h-serif); font-size: 1.125rem; font-weight: 600; color: var(--h-sage); }
.ms-toc-name { font-family: var(--h-serif); font-size: 1.125rem; }
.ms-toc-dots { flex: 1 1 auto; min-width: 1.25rem; border-bottom: 1px dotted var(--h-line); transform: translateY(-.3em); }
.ms-toc-qty { flex: none; font-size: 1rem; color: var(--h-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-toc-total { display: flex; align-items: baseline; gap: .5rem; margin: .375rem 0 0; padding-top: .6875rem; border-top: 1px solid var(--h-line); font-size: 1rem; color: var(--h-soft); }
.ms-toc-total b { font-family: var(--h-serif); font-size: 1.125rem; font-weight: 600; color: var(--h-ink); }

@media only screen and (max-width: 781px) {
	.ms-home-facts { max-width: 100%; }
	.ms-home-facts .wp-block-column { padding-right: .5rem; }
	.ms-home-lead { max-width: 100%; }
}

/* =====================================================================
   Full width. A homepage should not sit in the content column with the
   sidebar beside it, so on this page only the sidebar steps aside and the
   content runs edge to edge. The page title is hidden because the design
   carries its own <h1>; that also keeps exactly one h1 on the page.
   ===================================================================== */
body.ms-home-page aside.fourcol,
body.ms-home-page #footer-widgets,
body.ms-home-page h1.pagetitle { display: none; }

body.ms-home-page .eightcol {
	width: 100%;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body.ms-home-page #main > .row { max-width: none; margin: 0; }
body.ms-home-page article.page,
body.ms-home-page .eightcol article { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }
body.ms-home-page .entry { margin: 0; }
body.ms-home-page #main { padding-top: 0; }

/* the blocks themselves keep a readable measure inside the full-width bands */
.ms-home > .wp-block-group > .wp-block-columns,
.ms-home > .wp-block-group > .wp-block-heading,
.ms-home > .wp-block-group > p,
.ms-home > .wp-block-group > .ms-toc {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
.ms-home-hero { margin: 0; }

/* the theme draws the content column as a bordered card; a homepage is not a card */
body.ms-home-page .eightcol {
	border: 0;
	background: none;
	box-shadow: none;
	padding: 0;
}
body.ms-home-page #main { padding-bottom: 0; }
body.ms-home-page .wrapper { max-width: none; margin: 0; }

/* =====================================================================
   Phones. Most residents arrive on one.

   A contents row is name · leader · count, held on one line by the leader
   and a nowrap count. At 390px the longest division name needs 397px in a
   350px column, so below 640px the leader goes and the count is allowed to
   drop to its own line rather than push the row wider than the screen.
   ===================================================================== */
@media only screen and (max-width: 640px) {
	.ms-toc-list li,
	.ms-toc-total { flex-wrap: wrap; }
	.ms-toc-name { flex: 1 1 auto; min-width: 0; }
	.ms-toc-dots { display: none; }
	.ms-toc-qty { margin-left: auto; }
	.ms-toc-mark { width: 1.25rem; }

}


/* -----------------------------------------------------------------
   Core's own block CSS loads after this file, so two rules need more
   specificity than core's to win rather than more !important:
     .wp-block-image img            { height: auto }
     .wp-block-columns > .column    { flex-basis: 100% !important } @ <=781px
   ----------------------------------------------------------------- */
.ms-home .ms-home-hero img { height: clamp(14rem, 32vw, 24rem); }

@media only screen and (max-width: 781px) {
	/* the four numbers sit two-up rather than one per line */
	.ms-home .ms-home-facts.wp-block-columns { flex-wrap: wrap !important; gap: 0 !important; }
	.ms-home .ms-home-facts.wp-block-columns > .wp-block-column {
		flex-basis: 50% !important;
		flex-grow: 0;
		max-width: 50%;
	}
	/* a 2.4:1 photograph at 390px is a sliver; give the band a little height */
	.ms-home .ms-home-hero img { height: clamp(10rem, 42vw, 18rem); }
}

/* The contents heading is the one other place the serif earns its keep. */
.ms-home-contents > .wp-block-heading,
.ms-home-contents h2 {
	font-family: var(--h-serif);
	font-weight: 600;
	font-size: clamp(1.625rem, 3.6vw, 2.25rem);
	line-height: 1.2;
	margin: 0 0 .5rem;
}

/*
 * Full-bleed bands, constrained text.
 *
 * The theme wraps page content in a 1280px column, which is right for reading and
 * wrong for the photograph and the coloured bands behind it — inset backgrounds
 * make the page read as a document sitting on a page rather than as the front of
 * a place. The bands break out to the window edge; their contents are pushed back
 * onto the same 1280px column so nothing shifts against the header above it.
 *
 * `calc(50% - 50vw)` is measured against the element's own containing block, so
 * this works wherever the band sits in the theme's nesting. The padding uses max()
 * so the gutter never drops below 20px on a narrow window.
 */
.ms-home-hero,
.ms-home-plate,
.ms-home-contents {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.ms-home-plate,
.ms-home-contents {
	padding-left: max(20px, calc(50vw - 640px));
	padding-right: max(20px, calc(50vw - 640px));
}

/* The photograph is the one thing that should touch all four edges. */
.ms-home-hero img { width: 100%; }

/* =====================================================================
 * Phones. Most residents arrive on one, so this is the real layout, not
 * the fallback.
 * ===================================================================== */

@media only screen and (max-width: 640px) {
	/*
	 * Contents rows. A dotted leader needs width to make sense, and these names
	 * are long: "Declaration of Covenants, Conditions, and Restrictions" cannot
	 * share a 350px line with a letter and a count. Letting it wrap freely put
	 * the letter on one line, the name on the next and the count alone on a
	 * third. Instead the letter and name hold the first line and the count sits
	 * beneath, indented to the name's left edge so the column still reads.
	 */
	.ms-toc-dots { display: none; }

	.ms-toc-list li {
		flex-wrap: nowrap;
		align-items: baseline;
		padding: .625rem 0;
	}

	.ms-toc-mark { width: 1.375rem; }

	/*
	 * The name wraps inside its own box and the count stays put on the right,
	 * so a short entry is one line and only a long one runs to two. Forcing the
	 * count onto its own line made every row two lines, which was worse.
	 */
	.ms-toc-name {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ms-toc-qty {
		flex: 0 0 auto;
		margin-left: .75rem;
		font-size: .9375rem;
	}

	/* The block library's column gutters hang 4px past the plate on a phone. */
	.ms-home .wp-block-columns,
	.ms-home .wp-block-column {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/*
	 * WCAG 2.2 asks for 24x24 on any target. Inline links sit at the text's own
	 * line height, which is 21–22px here, so they are given the difference as
	 * padding rather than by inflating the type around them.
	 */
	.ms-home-signin-aside a,
	.ms-home a.ms-home-more,
	.ms-home-plate p a {
		display: inline-block;
		min-height: 24px;
		padding-block: 2px;
	}
}

/* =====================================================================
 * Footer.
 *
 * The theme's own footer is a thin bar with a privacy link, which leaves the
 * page ending on a list of section counts. This is the association's own block
 * — who they are, who runs the place day to day, and where else to go — built
 * from core blocks so the board can edit every word of it.
 *
 * Ink ground, the same full-bleed treatment as the bands above it. Deliberately
 * quiet: no accent, no rules between columns, since it closes the page rather
 * than competing with the sign-in.
 * ===================================================================== */

.ms-home-foot {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	padding: clamp(2.25rem, 5vw, 3.25rem) max(20px, calc(50vw - 640px));
	background: var(--h-ink);
	color: #e6e2d9;
}

.ms-home-foot .ms-foot-cols { gap: clamp(1.75rem, 4vw, 3rem); margin-bottom: 0; }

.ms-home-foot .ms-foot-h {
	font-family: var(--h-serif);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	color: #e6e2d9;
	margin: 0 0 .5625rem;
}

.ms-home-foot p,
.ms-home-foot li {
	color: #c4cacd;
	font-size: 1.0625rem;
	line-height: 1.55;
	margin: 0 0 .625rem;
}

.ms-home-foot .ms-foot-address { line-height: 1.7; }

.ms-home-foot a {
	color: #e6e2d9;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ms-home-foot a:hover { color: #fff; }

.ms-home-foot a:focus-visible {
	outline: 3px solid #7fb2c4;
	outline-offset: 3px;
}

.ms-home-foot ul.ms-foot-links,
.ms-home-foot .ms-foot-links {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}

.ms-home-foot ul.ms-foot-links li { list-style: none; margin-left: 0; }

.ms-home-foot .ms-foot-links li { margin: 0; }

/* 24px minimum target, given as padding so the type stays where the design put it. */
.ms-home-foot .ms-foot-links a {
	display: inline-block;
	min-height: 24px;
	padding-block: 4px;
}

@media only screen and (max-width: 640px) {
	.ms-home-foot .ms-foot-cols { gap: 1.75rem; }
	.ms-home-foot .ms-foot-links a { padding-block: 7px; }   /* thumbs, not cursors */
}

/*
 * The contents list keeps picking up the browser's default ul indent — the
 * theme's `.entry ul` out-ranks a bare `.ms-toc-list`, and with content-box
 * sizing that padding is added to a 100% width, so on a phone the column ran
 * ~40px wider than the page and the counts fell off the right edge. Scoped one
 * level deeper so it wins, and sized border-box so padding can never widen it.
 */
.ms-home .ms-toc-list,
.ms-home ul.ms-toc-list {
	box-sizing: border-box;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
	list-style: none;
}

.ms-home .ms-toc-list li { box-sizing: border-box; max-width: 100%; }

.ms-home .ms-toc-group,
.ms-home .ms-toc-cols { min-width: 0; max-width: 100%; }

@media only screen and (max-width: 640px) {
	/*
	 * A grid track's automatic minimum is the item's min-content, so a single
	 * `auto` column grows past its container rather than letting the text wrap —
	 * the contents column was running 36px wider than the page. `minmax(0, 1fr)`
	 * is the fix; `min-width: 0` on the item alone does not reach the track.
	 * Scoped to phones so the two-column desktop rule above is left alone.
	 */
	.ms-home .ms-toc-cols { grid-template-columns: minmax(0, 1fr); }
	.ms-home .ms-toc-group { min-width: 0; }

	/* The theme indents list items 20px; these rows carry their own letter column. */
	.ms-home .ms-toc-list li { margin-left: 0; margin-right: 0; }
}

/*
 * The block editor gives every top-level block a vertical margin, which left a
 * 24px white strip above and below the footer — the page looked as though it
 * had ended twice. The footer closes the page, so it sits flush against the
 * band above it and the theme's privacy bar below.
 */
.ms-home-foot {
	margin-top: 0;
	margin-bottom: 0;
}

/* The gap above came from the preceding group's own bottom margin, not the footer's. */
.ms-home { margin-bottom: 0; }
.ms-home > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }