/* Anvoy Statement of Faith -- /values and the twelve value pages.
   Colours are written as Bootstrap --bs-* variables only, so the whole sheet
   follows the light/dark toggle without a second set of rules. */

/* --- shared bits ---------------------------------------------------------- */
.av-v-eyebrow {
	font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
	color: var(--bs-secondary-color);
}
.av-v-serif { font-family: Georgia, 'Times New Roman', serif; }

/* The numbered square that identifies a value everywhere it appears. */
.av-v-num {
	flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: .4rem;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .95rem; line-height: 1;
}
.av-v-num.sm { width: 1.6rem; height: 1.6rem; font-size: .8rem; border-radius: .3rem; }
.av-v-num.md { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
.av-v-num.lg { width: 3.2rem; height: 3.2rem; font-size: 1.6rem; border-radius: .5rem; }

.av-v-stat { font-size: .82rem; color: var(--bs-secondary-color); }
.av-v-stat b { color: var(--bs-emphasis-color); font-size: 1.05rem; }

/* --- landing: the Trinity frame ------------------------------------------- */
.av-v-group-head { border-radius: .5rem .5rem 0 0; padding: .55rem .8rem; }
.av-v-group-body {
	border: 1px solid var(--bs-border-color); border-top: 0; border-radius: 0 0 .5rem .5rem;
	padding: .7rem; height: 100%;
}
.av-v-tile {
	display: block; text-decoration: none; color: inherit; height: 100%;
	border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .7rem .8rem;
	background: var(--bs-body-bg); transition: box-shadow .12s ease, transform .12s ease;
}
.av-v-tile:hover, .av-v-tile:focus-visible {
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12); transform: translateY(-2px); color: inherit;
}
.av-v-tile .av-v-name { font-weight: 700; font-size: 1.05rem; }

/* --- landing: the sticky 1..12 rail --------------------------------------- */
.av-v-rail {
	position: sticky; top: 0; z-index: 5; background: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color); padding: .4rem .6rem; margin-bottom: 1rem;
}
.av-v-rail a {
	text-decoration: none; font-size: .8rem; padding: .12rem .45rem; border-radius: .3rem;
	color: var(--bs-secondary-color); white-space: nowrap;
}
.av-v-rail a:hover, .av-v-rail a.active { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); }

/* --- landing: one value section ------------------------------------------- */
/* scroll-margin keeps the sticky rail from covering the heading we jumped to */
.av-v-sec { scroll-margin-top: 3.5rem; }
.av-v-sec-head { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .9rem; border-radius: .5rem .5rem 0 0; }
.av-v-sec-body {
	border: 1px solid var(--bs-border-color); border-top: 0; border-radius: 0 0 .5rem .5rem; padding: .9rem;
}
.av-v-att { border-left: 3px solid var(--bs-border-color); padding: .1rem 0 .1rem .7rem; height: 100%; }
.av-v-att-name { font-weight: 700; font-size: .95rem; }
.av-v-att-desc { font-size: .9rem; color: var(--bs-secondary-color); margin: 0; }

/* --- value page: attribute cards that open to their scripture ------------- */
.av-v-card { border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; }
.av-v-card > .av-v-card-hd {
	width: 100%; text-align: left; border: 0; background: var(--bs-tertiary-bg);
	padding: .55rem .8rem; display: flex; gap: .6rem; align-items: baseline;
}
.av-v-card > .av-v-card-hd:hover { background: var(--bs-secondary-bg); }
.av-v-card > .av-v-card-hd .av-v-caret { transition: transform .15s ease; flex: 0 0 auto; }
.av-v-card > .av-v-card-hd[aria-expanded="true"] .av-v-caret { transform: rotate(180deg); }
.av-v-card-bd { border-top: 1px solid var(--bs-border-color); padding: .6rem .8rem; }

.av-v-ref { font-weight: 700; font-size: .85rem; }
.av-v-vtext { font-size: .9rem; }
.av-v-vtext sup { color: var(--bs-secondary-color); font-weight: 700; margin-right: .15rem; }

/* --- print: drop the chrome and let the whole statement flow as a document -- */
@media print {
	.av-subnav, .av-netbar, .navbar, footer, .av-v-rail, .av-v-noprint { display: none !important; }
	.av-v-sec { break-inside: avoid; page-break-inside: avoid; }
	.av-v-card-bd { display: block !important; }
	a[href]::after { content: ""; }
	body { background: #fff; }
}

/* The attribute name in a card header. The header is a flex row, so without
   this the name column shrinks and the Anchor mark wraps onto a line of its
   own above the name -- which reads as a bullet rather than as a mark on the
   word it belongs to. */
.av-v-card > .av-v-card-hd > .av-v-att-hd { white-space: nowrap; flex: 0 0 auto; }

/* The Anchor mark on the public statement. 53 of the 96 attributes carry it
   (sql/091); the other 43 carry nothing, because a mark on both halves is just
   noise. currentColor, so it takes the value's own colour, and it prints. */
.av-v-anchor {
	color: var(--bs-primary);
	display: inline-flex;
	align-items: center;
	vertical-align: -.13em;
}
.av-v-anchor svg { display: block; }