/*
 * "theme": "library" (the FAQ page, 2026-09-26). Loaded only on its page (inc/catalog.php).
 *
 * A library card catalogue: cedar drawers with brass label holders, every answer on a ruled
 * index card. Cedar #3b2518 / #26170e, walnut #5a3a26, brass #b8903f / #e0c27a, card
 * #fffdf6, paper band #f4ede1, ink #2a1e16, soft ink #5e4d40, muted #8b7a6b, rule #e6dccb,
 * ruled blue #d9e5ee, margin red #e2a39c. The search and the drawers: assets/js/catalog-library.js.
 */

.tgc--library { color: #2a1e16; }
.tgc--library .tgc-band--white { background: #fbf8f1; }
.tgc--library .tgc-band--cream { background: #f4ede1; }
.tgc--library .tgc-kicker { color: #8a6424; }
.tgc--library .tgc-title { color: #2a1e16; }
.tgc--library .tgc-title em { color: #8a6424; }
.tgc--library .tgc-lead { color: #5e4d40; }
.tgc--library .tgc-textlink { color: #7a4f16; }
.tgc--library .tgc-textlink:hover { color: #3b2518; }
.tgc--library .tgc-btn--line { border-color: #3b2518; color: #3b2518; }
.tgc--library .tgc-btn--line:hover { background: #3b2518; color: #fffdf6; }
.tgc--library .tgc-micro .tgc-ico { color: #b8903f; }
.tgc--library .tgc-band--cta .tgc-head::before { background: #b8903f; box-shadow: 0 0 0 5px rgba(184, 144, 63, .2); }

/* ---------------------------------------------------------------- The drawer hero */

.tgc-hero--drawer {
	padding: 40px 24px 64px; color: #fffdf6;
	background-color: #3b2518;
	background-image:
		radial-gradient(ellipse at 50% 0%, rgba(224, 194, 122, .16), rgba(224, 194, 122, 0) 60%),
		repeating-linear-gradient(92deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px, rgba(0, 0, 0, .05) 7px 9px, transparent 9px 16px),
		linear-gradient(180deg, #4a2e1d 0%, #2f1d12 100%);
}
.tgc-hero--drawer::before { display: none; }
.tgc-hero--drawer .tgc-hero__inner { max-width: 920px; }
.tgc-hero--drawer .tgt-crumbs a:hover { color: #e0c27a; }
.tgc-hero--drawer .tgc-kicker--light { color: #e0c27a; }
/* The title sits on a card in a brass label holder, with a rivet either side. */
.tgc-hero--drawer .tgc-hero__title {
	position: relative; display: inline-block; max-width: 100%; margin-top: 6px; padding: 22px 42px 24px;
	border: 3px solid #b8903f; border-radius: 8px;
	background: linear-gradient(180deg, #fbf3df 0%, #efe0bd 100%);
	box-shadow: inset 0 0 0 5px #fbf3df, inset 0 0 0 6px rgba(184, 144, 63, .5), 0 18px 36px rgba(0, 0, 0, .35);
	font-size: clamp(30px, 2.2vw + 18px, 50px); color: #2a1e16;
}
.tgc-hero--drawer .tgc-hero__title::before,
.tgc-hero--drawer .tgc-hero__title::after {
	content: ''; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #f3dfa6, #9c7428 70%); box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.tgc-hero--drawer .tgc-hero__title::before { left: 12px; }
.tgc-hero--drawer .tgc-hero__title::after { right: 12px; }
.tgc-hero--drawer .tgc-hero__title em { color: #8a5a14; }
.tgc-hero--drawer .tgc-hero__lead { max-width: 700px; color: rgba(255, 250, 238, .82); }

/* The search box, then the questions people ask most. */
.tgc-search {
	display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 30px auto 0; padding: 7px 7px 7px 20px;
	border: 1px solid rgba(224, 194, 122, .5); border-radius: 14px; background: #fffdf6;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}
.tgc-search:focus-within { box-shadow: 0 0 0 4px rgba(224, 194, 122, .45), 0 18px 40px rgba(0, 0, 0, .3); }
.tgc-search > .tgc-ico { flex: none; width: 20px; height: 20px; color: #8b7a6b; }
.tgc-search input {
	flex: 1; min-width: 0; padding: 12px 4px; border: 0; background: transparent; outline: 0;
	font: 17px/1.3 'Trebuchet MS', 'Segoe UI', sans-serif; color: #2a1e16;
}
.tgc-search input::placeholder { color: #9b8b7c; }
.tgc-search input::-webkit-search-cancel-button { cursor: pointer; }
.tgc-search button {
	flex: none; padding: 14px 24px; border: 0; border-radius: 10px; background: #b8903f; color: #26170e;
	font: 700 15px/1 'Trebuchet MS', 'Segoe UI', sans-serif; cursor: pointer; transition: background .2s ease;
}
.tgc-search button:hover { background: #e0c27a; }
.tgc-search__popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13.5px; color: rgba(255, 250, 238, .7); }
.tgc-search__popular a { padding: 6px 14px; border: 1px solid rgba(224, 194, 122, .45); border-radius: 999px; color: #f3e3bb; text-decoration: none; transition: background .2s ease, color .2s ease; }
.tgc-search__popular a:hover { background: #e0c27a; color: #26170e; }

/* ---------------------------------------------------------------- The card index */

.tgc-band--answers { padding-top: 56px; }
.tgc-answers { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 48px; align-items: start; }
.tgc-answers__side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tgc-answers__drawers { display: flex; flex-direction: column; gap: 6px; }
.tgc-drawer {
	display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%;
	padding: 9px 12px 9px 9px; border: 1px solid #5a3a26; border-radius: 8px;
	background: linear-gradient(180deg, #5a3a26 0%, #452b1b 100%); color: #f7ecd4;
	font: 700 14px/1.25 'Trebuchet MS', 'Segoe UI', sans-serif; text-align: left; cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 #2a1a10; transition: transform .15s ease, background .2s ease;
}
.tgc-drawer:hover { transform: translateX(3px); }
.tgc-drawer:focus-visible { outline: 3px solid #e0c27a; outline-offset: 2px; }
.tgc-drawer__code {
	display: grid; place-items: center; height: 26px; border: 1px solid #b8903f; border-radius: 4px;
	background: linear-gradient(180deg, #fbf3df, #ecdcb6); color: #5a3a26; font-size: 11px; letter-spacing: .06em;
}
.tgc-drawer__count { min-width: 26px; padding: 3px 7px; border-radius: 999px; background: rgba(0, 0, 0, .25); font-size: 12px; text-align: center; color: #e0c27a; }
.tgc-drawer.is-on { border-color: #b8903f; background: linear-gradient(180deg, #d9b765 0%, #b8903f 100%); color: #26170e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 #7a5a1f; }
.tgc-drawer.is-on .tgc-drawer__count { background: rgba(38, 23, 14, .18); color: #26170e; }
.tgc-drawer.is-empty { opacity: .45; }
.tgc-answers__ask { padding: 22px 22px 20px; border: 1px solid #e6dccb; border-radius: 12px; background: #fffdf6; }
.tgc-answers__asktitle { margin: 0 0 6px; font-family: Georgia, 'Times New Roman', serif; font-size: 20px; color: #2a1e16; }
.tgc-answers__asktext { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #5e4d40; }
.tgc-answers__ask .tgc-btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: 14.5px; }
.tgc-answers__ask .tgc-textlink { margin-top: 14px; }

.tgc-answers__status { margin: 0 0 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8b7a6b; }
.tgc-answers__group { margin: 0 0 40px; scroll-margin-top: 110px; }
.tgc-answers__group[hidden] { display: none; }
.tgc-answers__gtitle { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #e6dccb; font-family: Georgia, 'Times New Roman', serif; font-size: 26px; font-weight: 400; color: #2a1e16; }
.tgc-answers__gtitle span { padding: 5px 9px; border: 1px solid #b8903f; border-radius: 4px; background: #fbf3df; font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #5a3a26; }

/* One question per index card: a red rule under the heading line, blue rules under the answer,
   and a second card peeking out behind it. */
.tgc-qcard {
	position: relative; margin: 0 0 14px; border: 1px solid #e6dccb; border-radius: 4px; background: #fffdf6;
	box-shadow: 0 1px 1px rgba(42, 30, 22, .05), 4px 4px 0 -1px #fbf8f1, 4px 4px 0 0 #e6dccb;
	scroll-margin-top: 110px; transition: box-shadow .25s ease, transform .25s ease;
}
.tgc-qcard[hidden] { display: none; }
.tgc-qcard:hover { box-shadow: 0 10px 24px rgba(42, 30, 22, .08), 4px 4px 0 -1px #fbf8f1, 4px 4px 0 0 #e6dccb; }
.tgc-qcard:target { border-color: #b8903f; box-shadow: 0 0 0 3px rgba(184, 144, 63, .35), 4px 4px 0 -1px #fbf8f1, 4px 4px 0 0 #e6dccb; }
.tgc-qcard__q {
	list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
	padding: 18px 20px 16px; border-bottom: 2px solid transparent; cursor: pointer;
}
.tgc-qcard__q::-webkit-details-marker { display: none; }
.tgc-qcard details[open] > .tgc-qcard__q { border-bottom-color: #e2a39c; }
.tgc-qcard__no { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: #a0896f; font-variant-numeric: tabular-nums; }
.tgc-qcard__title { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 19px; font-weight: 400; line-height: 1.4; color: #2a1e16; transition: color .2s ease; }
.tgc-qcard__q:hover .tgc-qcard__title { color: #7a4f16; }
.tgc-qcard__mark { position: relative; width: 32px; height: 32px; border: 1px solid #dccfb8; border-radius: 50%; color: #8a6424; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.tgc-qcard__mark::before, .tgc-qcard__mark::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s ease; }
.tgc-qcard__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.tgc-qcard details[open] .tgc-qcard__mark { border-color: #3b2518; background: #3b2518; color: #fffdf6; }
.tgc-qcard details[open] .tgc-qcard__mark::after { transform: translate(-50%, -50%) rotate(0); }
.tgc-qcard__a {
	padding: 6px 20px 16px 20px;
	background-image: repeating-linear-gradient(180deg, transparent 0 27px, #d9e5ee 27px 28px);
	background-position: 0 6px;
}
.tgc-qcard__a > p:first-child { margin: 0; font-size: 16px; line-height: 28px; color: #3d3027; }
.tgc-qcard__a a { color: #7a4f16; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tgc-qcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0; padding-top: 6px; background: #fffdf6; }
.tgc-qcard .tgc-qcard__link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #3b2518; color: #fffdf6; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s ease; }
.tgc-qcard .tgc-qcard__link:hover { background: #5a3a26; color: #fffdf6; }
.tgc-qcard__link .tgc-ico { width: 14px; height: 14px; }
.tgc-qcard__copy { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 10px; border: 0; border-radius: 999px; background: transparent; color: #8b7a6b; font: 700 12.5px/1 'Trebuchet MS', 'Segoe UI', sans-serif; cursor: pointer; }
.tgc-qcard__copy:hover { background: #f4ede1; color: #3b2518; }
.tgc-qcard__copy .tgc-ico { width: 14px; height: 14px; }
.tgc-qcard__copy.is-done { color: #2f7a45; }
.tgc-qcard mark { padding: 0 2px; border-radius: 3px; background: #f5dd98; color: inherit; }

.tgc-answers__empty { padding: 40px 30px; border: 2px dashed #dccfb8; border-radius: 12px; background: #fffdf6; text-align: center; }
.tgc-answers__empty[hidden] { display: none; }
.tgc-answers__emptytitle { margin: 0 0 8px; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; color: #2a1e16; }
.tgc-answers__empty p { margin: 0 0 20px; color: #5e4d40; }

/* ---------------------------------------------------------------- Smaller screens */

@media (max-width: 1024px) {
	.tgc-answers { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.tgc-answers__side { position: static; min-width: 0; }
	/* The drawers become a row that scrolls sideways; the ask card moves under the cards. */
	.tgc-answers__drawers { flex-direction: row; gap: 8px; margin: 0 -24px; padding: 4px 24px 10px; overflow-x: auto; scrollbar-width: thin; }
	.tgc-drawer { flex: none; width: auto; grid-template-columns: auto auto auto; }
	.tgc-drawer:hover { transform: none; }
	.tgc-answers__ask { display: none; }
}

@media (max-width: 760px) {
	.tgc-hero--drawer { padding: 30px 16px 48px; }
	.tgc-hero--drawer .tgc-hero__title { padding: 16px 26px 18px; }
	.tgc-hero--drawer .tgc-hero__title::before { left: 8px; }
	.tgc-hero--drawer .tgc-hero__title::after { right: 8px; }
	.tgc-search { padding-left: 14px; }
	.tgc-search input { font-size: 16px; }
	.tgc-search button { padding: 13px 16px; }
	.tgc-answers__drawers { margin: 0 -20px; padding: 4px 20px 10px; }
	.tgc-answers__gtitle { font-size: 22px; }
	.tgc-qcard__q { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 16px 16px 14px; }
	.tgc-qcard__no { grid-column: 1 / -1; }
	.tgc-qcard__title { font-size: 17.5px; }
	.tgc-qcard__a { padding: 6px 16px 14px; }
	.tgc-qcard__copy { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tgc-drawer, .tgc-qcard { transition: none; }
}