/* =====================================================================
   ACC LEARN
   Loads after the theme's acc-tokens / acc-base / acc-components and
   acc-service.css, and only adds the pieces Learn needs on top of them.
   Every value reads the theme tokens, with a fallback so the pages still
   hold together if a token is renamed.
   ===================================================================== */

.acc-learn {
	--acc-learn-radius: var(--acc-tile-radius, 18px);
	--acc-learn-gold: #C7A96B;
	--acc-learn-forest: #16291F;
}

/* Search box (Learn home, search, glossary term side panel) */
.acc-learn-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--acc-space-3, 0.75rem);
	max-width: 640px;
	margin-top: var(--acc-space-5, 1.5rem);
}
.acc-learn-search input[type="search"] {
	flex: 1 1 260px;
	min-height: 48px;
	padding: 0 1rem;
	font: inherit;
	color: var(--acc-ink, #1d2a22);
	background: var(--acc-white, #fff);
	border: 1px solid var(--acc-line, #d9d4c7);
	border-radius: var(--acc-radius, 10px);
}
.acc-learn-search input[type="search"]:focus { outline: 3px solid var(--acc-focus, #C7A96B); outline-offset: 2px; }
.acc-service__side .acc-learn-search { margin: var(--acc-space-3, 0.75rem) 0; }
.acc-service__side .acc-learn-search .acc-btn { flex: 1 1 100%; }

/* "Start here" callout spacing on Learn home */
.acc-learn-start { margin: 0; }

/* Topic tiles on Learn home */
.acc .acc-learn-topics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--acc-grid-gap, 1.5rem);
	margin: var(--acc-space-6, 2rem) 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.acc .acc-learn-topic {
	display: flex;
	flex-direction: column;
	gap: var(--acc-space-3, 0.75rem);
	margin: 0 !important;
	padding: var(--acc-space-6, 2rem);
	background: var(--acc-white, #fff);
	border: 1px solid var(--acc-line, #d9d4c7);
	border-top: 4px solid var(--acc-learn-gold);
	border-radius: var(--acc-learn-radius);
	list-style: none !important;
}
.acc .acc-learn-topic__title { margin: 0 !important; font-size: var(--acc-fs-h4, 1.35rem); }
.acc .acc-learn-topic__title a { text-decoration: none !important; color: var(--acc-heading, #16291F) !important; }
.acc .acc-learn-topic__title a:hover { text-decoration: underline !important; text-decoration-color: var(--acc-learn-gold) !important; }
.acc-learn-topic__text { margin: 0 !important; font-size: var(--acc-fs-sm, 0.95rem); color: var(--acc-muted, #4b5a50); }
.acc .acc-learn-topic__list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.acc .acc-learn-topic__list li { margin: 0 !important; padding: 6px 0 !important; border-top: 1px solid var(--acc-line, #e4dfd2); list-style: none !important; }
.acc-learn-topic__soon { margin: 0 !important; font-size: var(--acc-fs-sm, 0.95rem); font-style: italic; color: var(--acc-muted, #4b5a50); }
.acc-learn-topic .acc-link-arrow { margin-top: auto; }

/* Article cards (topic pages, search, "Learn more" on term pages) */
.acc .acc-learn-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--acc-grid-gap, 1.5rem);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.acc .acc-learn-cards > li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.acc .acc-learn-cards--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin-top: var(--acc-space-4, 1rem) !important; }
html body .acc-learn a.acc-learn-card {
	display: flex;
	flex-direction: column;
	gap: var(--acc-space-2, 0.5rem);
	height: 100%;
	box-sizing: border-box;
	padding: var(--acc-space-5, 1.5rem);
	background: var(--acc-white, #fff);
	border: 1px solid var(--acc-line, #d9d4c7);
	border-radius: var(--acc-learn-radius);
	text-decoration: none !important;
	color: var(--acc-ink, #1d2a22) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html body .acc-learn a.acc-learn-card:hover,
html body .acc-learn a.acc-learn-card:focus-visible { border-color: var(--acc-learn-gold); box-shadow: 0 0 0 1px var(--acc-learn-gold), var(--acc-shadow, 0 6px 18px rgba(22, 41, 31, 0.08)); }
.acc-learn-card__kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc-green-ink, #2f5a43); }
.acc .acc-learn-card__title { font-family: var(--acc-font-head) !important; font-size: var(--acc-fs-h5, 1.2rem); line-height: 1.25; color: var(--acc-heading, #16291F) !important; -webkit-text-fill-color: var(--acc-heading, #16291F) !important; }
.acc-learn-card__text { font-size: var(--acc-fs-sm, 0.95rem); line-height: 1.55; color: var(--acc-muted, #4b5a50); }
.acc-learn-card__more { margin-top: auto; padding-top: var(--acc-space-2, 0.5rem); font-size: var(--acc-fs-sm, 0.95rem); font-weight: 700; color: var(--acc-green-ink, #2f5a43); }
.acc-learn-card__more::after { content: " \2192"; }

/* Reviewed-by line under the title */
.acc-learn-review {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: var(--acc-space-3, 0.75rem) 0 0 !important;
	font-size: var(--acc-fs-sm, 0.95rem);
	font-weight: 500;
	color: var(--acc-green-ink, #2f5a43);
}
.acc-learn-review::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5a43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.6-7 9-4-1.4-7-4.5-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Key points box */
.acc-learn-points {
	margin: 0 0 var(--acc-space-6, 2rem);
	padding: var(--acc-space-5, 1.5rem) var(--acc-space-6, 2rem);
	background: var(--acc-sage-light, #E7EEE5);
	border-left: 4px solid var(--acc-learn-forest);
	border-radius: var(--acc-radius, 10px);
}
.acc .acc-learn-points__title { margin: 0 0 var(--acc-space-3, 0.75rem) !important; font-size: var(--acc-fs-h5, 1.2rem); }
.acc .acc-learn-points ul { margin: 0 !important; padding-left: 1.2em !important; }
.acc .acc-learn-points li { margin: 0.35em 0 !important; }
.acc .acc-learn-points p:last-child { margin-bottom: 0 !important; }

/* Questions to ask */
.acc-learn-questions {
	margin: var(--acc-space-7, 2.5rem) 0;
	padding: var(--acc-space-6, 2rem);
	background: var(--acc-cream, #FAF6EE);
	border: 1px solid var(--acc-line, #d9d4c7);
	border-radius: var(--acc-learn-radius);
}
.acc .acc-learn-questions h2 { margin-top: 0 !important; }
.acc .acc-learn-questions ol { margin: var(--acc-space-4, 1rem) 0 0 !important; padding-left: 1.4em !important; }
.acc .acc-learn-questions li { margin: 0.5em 0 !important; padding-left: 0.25em; }
.acc .acc-learn-questions li::marker { font-weight: 700; color: var(--acc-green-ink, #2f5a43); }

/* Sources and disclaimers */
.acc-learn-sources { margin-top: var(--acc-space-7, 2.5rem); font-size: var(--acc-fs-sm, 0.95rem); }
.acc .acc-learn-sources h2 { font-size: var(--acc-fs-h5, 1.2rem); }
.acc-learn-disclaimer, .acc-term__credit {
	margin-top: var(--acc-space-6, 2rem) !important;
	font-size: var(--acc-fs-sm, 0.95rem);
	color: var(--acc-muted, #4b5a50);
}
.acc-learn-referral p { font-size: var(--acc-fs-sm, 0.95rem); }

/* Glossary words inside articles */
html body a.acc-gloss {
	position: relative;
	text-decoration: underline dotted !important;
	text-decoration-color: var(--acc-learn-gold) !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px;
	color: inherit !important;
	cursor: help;
}
/* learn.js moves the tip to <body> while it shows (so no container clips it),
   which puts it outside .acc-learn: colors are written out, not variables. */
.acc-gloss__tip {
	position: absolute;
	z-index: 9999;
	max-width: min(320px, calc(100vw - 32px));
	padding: 0.75rem 0.9rem;
	font-family: var(--acc-font-body, inherit);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	color: #FAF6EE;
	-webkit-text-fill-color: #FAF6EE;
	background: #16291F;
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(22, 41, 31, 0.25);
	pointer-events: none;
}
.acc-gloss__tip[hidden] { display: none; }

/* A–Z bar */
.acc .acc-learn-az ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 var(--acc-space-6, 2rem) !important;
	padding: 0 !important;
	list-style: none !important;
}
.acc .acc-learn-az li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.acc-learn-az a, .acc-learn-az span {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	font-family: var(--acc-font-head);
	font-size: 1.05rem;
	border-radius: 8px;
}
html body .acc-learn .acc-learn-az a { background: var(--acc-white, #fff); border: 1px solid var(--acc-line, #d9d4c7); color: var(--acc-heading, #16291F) !important; text-decoration: none !important; }
html body .acc-learn .acc-learn-az a:hover, html body .acc-learn .acc-learn-az a:focus-visible { background: var(--acc-learn-forest); border-color: var(--acc-learn-forest); color: #FAF6EE !important; -webkit-text-fill-color: #FAF6EE; }
.acc-learn-az span { color: var(--acc-muted, #4b5a50); opacity: 0.45; }

/* Glossary filter */
.acc-learn-filter { max-width: 560px; margin-top: var(--acc-space-5, 1.5rem); }
.acc-learn-filter label { display: block; margin-bottom: 6px; font-weight: 700; }
.acc-learn-filter input {
	width: 100%;
	min-height: 48px;
	padding: 0 1rem;
	font: inherit;
	background: var(--acc-white, #fff);
	border: 1px solid var(--acc-line, #d9d4c7);
	border-radius: var(--acc-radius, 10px);
	box-sizing: border-box;
}
.acc-learn-filter input:focus { outline: 3px solid var(--acc-focus, #C7A96B); outline-offset: 2px; }
.acc-learn-filter__count { min-height: 1.5em; margin: 6px 0 0 !important; font-size: var(--acc-fs-sm, 0.95rem); color: var(--acc-muted, #4b5a50); }

/* Glossary list */
.acc-gloss-group { scroll-margin-top: 120px; padding: var(--acc-space-5, 1.5rem) 0; border-top: 1px solid var(--acc-line, #d9d4c7); }
.acc-gloss-group[hidden] { display: none; }
.acc .acc-gloss-group__letter { margin: 0 0 var(--acc-space-4, 1rem) !important; font-size: 2rem; color: var(--acc-learn-gold) !important; -webkit-text-fill-color: var(--acc-learn-gold) !important; }
.acc .acc-gloss-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--acc-space-4, 1rem) var(--acc-space-6, 2rem);
	margin: 0 !important;
}
.acc-gloss-item[hidden] { display: none; }
.acc .acc-gloss-item dt { margin: 0 !important; font-family: var(--acc-font-head); font-size: 1.1rem; }
.acc .acc-gloss-item dd { margin: 2px 0 0 !important; font-size: var(--acc-fs-sm, 0.95rem); line-height: 1.5; color: var(--acc-muted, #4b5a50); }
html body .acc-learn .acc-gloss-item dt a { color: var(--acc-heading, #16291F) !important; text-decoration: none !important; }
html body .acc-learn .acc-gloss-item dt a:hover { text-decoration: underline !important; text-decoration-color: var(--acc-learn-gold) !important; }

/* Glossary term page */
.acc-term__title::first-letter { text-transform: uppercase; }
.acc-term__say { display: flex; flex-wrap: wrap; align-items: center; gap: var(--acc-space-3, 0.75rem); margin: var(--acc-space-3, 0.75rem) 0 0 !important; }
.acc-term__pron { font-size: 1.1rem; color: var(--acc-muted, #4b5a50); }
.acc-term__listen {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	font: inherit;
	font-weight: 700;
	color: var(--acc-learn-forest);
	background: var(--acc-white, #fff);
	border: 1px solid var(--acc-line, #d9d4c7);
	border-radius: 999px;
	cursor: pointer;
}
.acc-term__listen:hover, .acc-term__listen:focus-visible { border-color: var(--acc-learn-gold); }
.acc-term__listen.is-playing { background: var(--acc-sage-light, #E7EEE5); }
.acc .acc-term__definition { font-size: 1.25rem; line-height: 1.6; }
.acc .acc-term__definition p { color: var(--acc-heading, #16291F); }
.acc-term__note { margin-top: var(--acc-space-6, 2rem); }
.acc-term__uses { margin-top: var(--acc-space-7, 2.5rem); }
.acc-term__nearby {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--acc-space-4, 1rem);
	margin-top: var(--acc-space-7, 2.5rem);
	padding-top: var(--acc-space-5, 1.5rem);
	border-top: 1px solid var(--acc-line, #d9d4c7);
}
.acc-term__nearby a { display: flex; flex-direction: column; font-family: var(--acc-font-head); text-decoration: none !important; }
.acc-term__nearby a span { font-family: var(--acc-font-body, inherit); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc-muted, #4b5a50); }
.acc-term__next { margin-left: auto; text-align: right; }

@media (prefers-reduced-motion: reduce) {
	html body .acc-learn a.acc-learn-card { transition: none; }
}