/* Glen Abbey Rulebook — mobile-first layout layer.
   Loaded AFTER styles.css so the un-mediaed rules here are the MOBILE base;
   min-width queries scale up from there. Never add max-width queries to this
   file — that inverts the cascade and reintroduces desktop-first thinking.

   Breakpoints: 480 (large phone) · 768 (tablet) · 1024 (desktop) */

/* ---------- 1. Token scale: phone values are the base ---------- */
:root {
	--text-display-1: 30px;
	--lh-display-1: 1.15;
	--text-display-2: 24px;
	--lh-display-2: 1.2;
	--text-title: 20px;
	--text-subtitle: 18px;
	--text-lead: 17px;
	--gutter-page: 16px;
}

@media (min-width: 480px) {
	:root {
		--text-display-1: 34px;
		--text-display-2: 27px;
		--gutter-page: 20px;
	}
}

@media (min-width: 768px) {
	:root {
		--text-display-1: 38px;
		--lh-display-1: 1.1;
		--text-display-2: 30px;
		--lh-display-2: 1.16;
		--text-title: 23px;
		--text-subtitle: 19px;
		--text-lead: 18px;
		--gutter-page: 24px;
	}
}

@media (min-width: 1024px) {
	:root {
		--text-display-1: 44px;
		--lh-display-1: 1.08;
		--text-display-2: 34px;
		--lh-display-2: 1.14;
		--text-title: 26px;
		--text-subtitle: 20px;
		--text-lead: 19px;
	}
}

/* ---------- 2. Page-level guards ---------- */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	overflow-x: hidden;
}

/* Long unbroken strings (URLs, emails, doc names) must not force a sideways
   scroll on a narrow screen. */
h1,
h2,
h3,
h4,
p,
a,
li,
blockquote {
	overflow-wrap: break-word;
}

/* Anything genuinely wide scrolls inside its own box, never the page. */
pre,
table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* iOS zooms the page when a focused input is under 16px. Never let that happen. */
input,
select,
textarea {
	font-size: max(16px, 1em);
}

/* ---------- 3. Detail layouts (content + sidebar) ----------
   Used by RuleScreen, FaqScreen, FileRequestScreen. On a phone the sidebar
   is NOT a sidebar — it stacks under the content it supports. */
.ga-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
}

.ga-detail > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.ga-detail {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--space-10);
	}
}

/* The support rail only sticks once there's a real viewport to stick within.
   A sticky element on a phone just eats the screen. */
.ga-detail-aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.ga-detail-aside {
		position: sticky;
		top: 88px;
	}
}

/* ---------- 4. Topic tile grid ---------- */
.ga-tile-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
}

.ga-tile-grid > * {
	min-width: 0;
}

@media (min-width: 480px) {
	.ga-tile-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

@media (min-width: 768px) {
	.ga-tile-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ga-tile-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- 5. Home split (feature list + callout rail) ---------- */
.ga-home-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
}

.ga-home-split > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.ga-home-split {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--space-8);
	}
}

/* The rail is nudged down to clear the section heading on desktop only —
   on mobile that padding is just a gap in the middle of the page. */
.ga-home-rail {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-top: 0;
}

@media (min-width: 1024px) {
	.ga-home-rail {
		padding-top: 52px;
	}
}

/* ---------- 6. Hero ---------- */
.ga-hero {
	background: var(--surface-inverse);
	color: var(--text-inverse);
	border-radius: var(--radius-lg);
	padding: var(--space-8) var(--space-5);
	margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
	.ga-hero {
		padding: var(--space-12) var(--space-8);
		margin-bottom: var(--space-10);
	}
}

@media (min-width: 1024px) {
	.ga-hero {
		padding: var(--space-16) var(--space-12);
		margin-bottom: var(--space-12);
	}
}

.ga-hero-inner {
	max-width: 640px;
}

/* ---------- 7. Filter bar ---------- */
/* The "Hide summaries" switch is pushed right on desktop; on a phone that
   creates an awkward orphan, so it wraps onto its own line instead. */
.ga-filterbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: var(--space-6);
}

.ga-filterbar-end {
	margin-left: 0;
	width: 100%;
}

@media (min-width: 768px) {
	.ga-filterbar-end {
		margin-left: auto;
		width: auto;
	}
}

/* ---------- 8. Site header ---------- */
.ga-header-inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	width: 100%;
	max-width: var(--width-page);
	margin: 0 auto;
	padding: var(--space-3) var(--gutter-page);
}

/* Desktop nav and the compact search are hidden on phones; the menu button
   takes over. Both are display:none rather than visually-hidden so they are
   removed from the tab order too. */
.ga-nav-desktop,
.ga-header-search {
	display: none;
}

@media (min-width: 1024px) {
	.ga-nav-desktop {
		display: flex;
		align-items: center;
		gap: var(--space-5);
	}

	.ga-header-search {
		display: block;
		width: 280px;
		margin-left: auto;
	}
}

/* The "Official HOA site" CTA moves into the mobile menu rather than
   competing with the logo for a phone's header width. */
.ga-header-cta {
	display: none;
}

@media (min-width: 1024px) {
	.ga-header-cta {
		display: inline-flex;
		flex-shrink: 0;
	}
}

.ga-menu-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-left: auto;
	min-height: 44px;
	min-width: 44px;
	padding: 0 12px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: transparent;
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-semibold);
	cursor: pointer;
}

.ga-menu-button:hover {
	background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 1024px) {
	.ga-menu-button {
		display: none;
	}
}

/* Mobile menu panel */
.ga-mobile-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-3) var(--gutter-page) var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 1024px) {
	.ga-mobile-menu {
		display: none;
	}
}

.ga-mobile-menu a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 4px;
	color: #fff;
	text-decoration: none;
	font-size: var(--text-body-md);
	font-weight: var(--weight-medium);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ga-mobile-menu a[aria-current="page"] {
	color: var(--green-300, #9ec8a8);
	font-weight: var(--weight-semibold);
}

.ga-mobile-menu-search {
	padding: var(--space-3) var(--gutter-page) 0;
}

@media (min-width: 1024px) {
	.ga-mobile-menu-search {
		display: none;
	}
}

/* ---------- 9. Site footer ---------- */
.ga-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
}

.ga-footer-grid > * {
	min-width: 0;
}

@media (min-width: 640px) {
	.ga-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8);
	}
}

@media (min-width: 1024px) {
	.ga-footer-grid {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

/* ---------- 10. Touch targets ----------
   Pointer-coarse only: keeps desktop density intact while guaranteeing every
   interactive control clears the 44px minimum on a touchscreen. */
@media (pointer: coarse) {
	button,
	[role="button"],
	a.ga-tap,
	.ga-mobile-menu a {
		min-height: 44px;
	}
}

/* ---------- 11. Print ---------- */
@media print {
	.ga-detail {
		grid-template-columns: minmax(0, 1fr);
	}

	.ga-detail-aside,
	.ga-menu-button,
	.ga-mobile-menu,
	.ga-nav-desktop,
	.ga-header-search {
		display: none !important;
	}
}