/* ============================================================
 * licensing-options.css
 * Page-specific styles for /Support/licensing-options.php.
 *
 * Typography (h3, h4, p, li, body color, line-height, links)
 * and base table appearance are inherited from the site-wide
 * stylesheets loaded by maintemplate-1.inc (common-styles.css,
 * modern-layout.css). This file only contains styling for
 * components that don't exist elsewhere on the site:
 *   - the jump-to TOC box
 *   - the prose-only contact CTA box
 *   - the scenario / recommendation callouts and pills
 *   - the cost calculator (controls + result panel)
 *   - the "featured row" highlight used in pricing tables
 *   - a small footnote modifier for fine-print paragraphs
 * ============================================================ */

/* Section heading emphasis. The site-wide stylesheets leave h3/h4 fairly
 * flat; this gives the major section breaks on this page a clearer rhythm
 * without overriding the inherited font family or size. */
.licensing-options h3 {
	margin-top: 28px;
	padding-bottom: 4px;
	border-bottom: 2px solid #284829;
	color: #284829;
	font-size: 20px;
	font-weight: 600;
}
.licensing-options > h3:first-of-type { margin-top: 0; }
.licensing-options h4 {
	margin-top: 18px;
	padding-bottom: 2px;
	border-bottom: 1px solid #d4d4cc;
}

/* Footnote text (small, muted) */
.licensing-options .lo-footnote { font-size: 0.85em; color: #666; }

/* Collapsible product-group sections. The page heading for each product
 * group is the <summary> of a <details>, so the whole block of pricing
 * information can be expanded or collapsed. Anchor links into a closed
 * details auto-open it in modern browsers.
 *
 * Visual styling mirrors the .mpl-section pattern used on
 * /Purchase/commercialproducts.php (defined in GeneratePriceList.inc):
 *   - Title at 18px / weight 600 / color #222
 *   - Arrow on the LEFT of the title with margin-right: 6px
 *   - Collapsed = down triangle (\25BC), Expanded = up triangle (\25B2)
 *   - Body wrapped in a card: white background, 1px e3e3e3 border,
 *     10px border-radius, soft shadow
 */
.licensing-options details.lo-section { margin: 22px 0; }
.licensing-options details.lo-section > summary {
	cursor: pointer;
	user-select: none;
	list-style: none;
	outline: none;
	display: inline-block;
	margin: 0 0 10px 0;
}
.licensing-options details.lo-section > summary::-webkit-details-marker { display: none; }
.licensing-options details.lo-section > summary > h3 {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 600;
	color: #222;
	border-bottom: none;
}
.licensing-options details.lo-section > summary > h3::before {
	content: "\25BC"; /* down-pointing triangle = collapsed */
	display: inline-block;
	margin-right: 6px;
}
.licensing-options details.lo-section[open] > summary > h3::before {
	content: "\25B2"; /* up-pointing triangle = expanded */
}
.licensing-options details.lo-section > .lo-section-body {
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
	padding: 18px 22px;
}
/* Prevent the inner h3's margin-top from pushing the first content
 * away from the top of the card, and similarly trim the last child. */
.licensing-options details.lo-section > .lo-section-body > :first-child { margin-top: 0; }
.licensing-options details.lo-section > .lo-section-body > :last-child  { margin-bottom: 0; }

/* Modernized table styling: green header bar, striped body rows, full
 * gridlines. Matches the look used on /Support/Licensing.php and the
 * commercial price-list pages. */
.licensing-options table {
	border-collapse: collapse;
	width: 100%;
	max-width: 900px;
	margin: 12px 0 20px;
	font-size: 14px;
	border-radius: 8px;
	overflow: hidden;
}
.licensing-options table.lo-table-wide { max-width: none; }
.licensing-options table th,
.licensing-options table td {
	border: 1px solid #c8c4ba;
	padding: 7px 10px;
	vertical-align: middle;
}
.licensing-options table thead th {
	background: #284829;
	color: #fff;
	font-weight: 600;
	text-align: left;
}
.licensing-options table thead th.num { text-align: right; }
.licensing-options table tbody tr:nth-child(even) td { background: #fafaf6; }
.licensing-options table tbody tr.lo-featured td,
.licensing-options table tbody tr.lo-featured:nth-child(even) td { background: #fff8d8; }

/* Jump-to TOC box */
.licensing-options .lo-toc {
	background: #f6f7f4;
	border: 1px solid #e3e3e3;
	border-left: 4px solid #284829;
	border-radius: 8px;
	padding: 12px 16px;
	margin: 14px 0 24px;
	font-size: 14px;
}
.licensing-options .lo-toc strong { margin-right: 8px; color: #284829; }
.licensing-options .lo-toc a {
	display: inline-block;
	margin: 2px 6px 2px 0;
	padding: 4px 12px;
	border: 1px solid #d4d4cc;
	border-radius: 14px;
	background: #fff;
	color: #284829;
	text-decoration: none;
	font-weight: 600;
}
.licensing-options .lo-toc a:hover {
	background: #284829;
	color: #fff;
	border-color: #284829;
}

/* Prose-only contact CTA (shown when region has no active pricelist) */
.licensing-options .lo-contact-cta {
	background: #fff4dc;
	border: 1px solid #f3d49a;
	border-left: 4px solid #eba734;
	padding: 12px 16px;
	margin: 16px 0 20px;
	border-radius: 4px;
}
.licensing-options .lo-contact-cta strong { color: #8a5a00; }

/* Right-aligned numeric cells inside pricing tables */
.licensing-options table th.num,
.licensing-options table td.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Scenario callouts: 2-column grid on wide screens, single column on mobile */
.licensing-options .lo-scenarios {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 14px 0 20px;
}
.licensing-options .lo-scenario {
	background: #fff;
	border: 1px solid #e3e3e3;
	border-left: 4px solid #284829;
	border-radius: 8px;
	padding: 14px 18px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	margin: 0;
	display: flex;
	flex-direction: column;
}
.licensing-options .lo-scenario h4 {
	margin: 0 0 8px;
	padding: 0;
	border: none;
	color: #284829;
	font-size: 15px;
}
.licensing-options .lo-scenario p { margin: 4px 0; font-size: 14px; }
.licensing-options .lo-scenario .lo-rec {
	font-weight: 600;
	margin-top: auto;
	padding-top: 8px;
	color: #1a1a1a;
}
@media (max-width: 720px) {
	.licensing-options .lo-scenarios { grid-template-columns: 1fr; }
}

/* FAQ collapsibles. Each <details class="lo-faq-item"> renders as a card
 * with a chevron on the right that flips when the item is open. */
.licensing-options .lo-faq { margin: 10px 0 0; }
.licensing-options details.lo-faq-item {
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	margin: 0 0 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.licensing-options details.lo-faq-item > summary {
	cursor: pointer;
	user-select: none;
	list-style: none;
	outline: none;
	padding: 12px 44px 12px 16px;
	font-weight: 600;
	color: #1a1a1a;
	font-size: 14.5px;
	position: relative;
}
.licensing-options details.lo-faq-item > summary::-webkit-details-marker { display: none; }
.licensing-options details.lo-faq-item > summary::after {
	content: "\25BC";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #6b6b6b;
	font-size: 11px;
	transition: transform 0.15s;
}
.licensing-options details.lo-faq-item[open] > summary::after { content: "\25B2"; }
.licensing-options details.lo-faq-item > .lo-faq-body {
	padding: 0 16px 14px;
	border-top: 1px solid #f0f0ec;
	margin-top: -1px;
}
.licensing-options details.lo-faq-item > .lo-faq-body > :first-child { margin-top: 10px; }
.licensing-options details.lo-faq-item > .lo-faq-body > :last-child { margin-bottom: 0; }

/* Small "tag" pills used inside scenarios */
.licensing-options .lo-pill {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid #d4d4cc;
	border-radius: 10px;
	font-size: 0.8em;
	background: #f6f7f4;
	color: #444;
	margin-right: 4px;
	margin-bottom: 4px;
}

/* Cost calculator */
.licensing-options .lo-calc-box {
	background: #fafaf6;
	border: 1px solid #d4d4cc;
	border-radius: 6px;
	padding: 18px 20px;
	margin: 12px 0;
}
.licensing-options .lo-calc-row { margin: 10px 0; }
.licensing-options .lo-calc-row label {
	display: inline-block;
	min-width: 200px;
	font-weight: 600;
}
.licensing-options .lo-calc-row select,
.licensing-options .lo-calc-row input[type="range"] {
	padding: 5px 8px;
	border: 1px solid #c8c4ba;
	border-radius: 4px;
	background: #fff;
	font: inherit;
}
.licensing-options .lo-calc-row input[type="range"] { width: 280px; padding: 0; vertical-align: middle; }
.licensing-options .lo-mono {
	font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
	font-weight: 700;
	margin-left: 8px;
}
.licensing-options .lo-calc-result {
	background: #fff;
	border: 1px solid #d4d4cc;
	padding: 14px 16px;
	margin-top: 14px;
	border-radius: 4px;
}
.licensing-options .lo-calc-result h5 { margin: 0 0 8px; }
.licensing-options .lo-calc-recommendation {
	background: #fff8d8;
	border-left: 4px solid #c47800;
	padding: 10px 14px;
	margin: 0 0 12px;
}

/* Mobile tweaks for the components defined above */
@media (max-width: 720px) {
	.licensing-options .lo-toc a { display: block; margin: 4px 0; }
	.licensing-options .lo-calc-row label { display: block; min-width: 0; margin-bottom: 4px; }
	.licensing-options .lo-calc-row input[type="range"] { width: 100%; }
}