/* Lantern look: one shared style for every Lantern page (atlas, place pages, compare, training, landing).
 * Loaded by Lantern Learn on pages with body class .lx-look. It evens out buttons, cards, focus rings
 * and link underlines, and styles the two pieces Lantern Learn adds outside its own pages.
 */
.lx-look {
	--lk-plum: #3D1F5C; --lk-plum-2: #7A4A9E; --lk-plum-3: #B99AD0; --lk-lav: #F4EDF8;
	--lk-gold: #E3A93B; --lk-gold-soft: #F6D58E; --lk-focus: #D9A23B; --lk-ink: #2A2230;
	--lk-radius: 18px; --lk-shadow: 0 14px 34px -26px rgba(61, 31, 92, .6);
}

/* Focus: one clear, warm ring everywhere */
.lx-look main :focus-visible, .lx-look .wp-site-blocks :focus-visible { outline: 3px solid var(--lk-focus) !important; outline-offset: 3px; }

/* Buttons: same shape, weight and touch size */
.lx-look :is(.lx-btn, .skcm-btn, .skcm-hero-btn, .skau-btn, .skinv-btn) {
	border-radius: 999px !important; min-height: 44px; font-weight: 700; line-height: 1.2;
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	transition: transform .2s ease, box-shadow .2s ease;
}
.lx-look :is(.lx-btn, .skcm-btn, .skcm-hero-btn, .skau-btn, .skinv-btn):hover { transform: translateY(-1px); }

/* Cards: same corners and softer shadow */
.lx-look :is(.lt-card, .ltr-card, .lxl-card, .lx-alert) { border-radius: var(--lk-radius) !important; }
.lx-look :is(.lt-card, .lxl-card) { box-shadow: var(--lk-shadow); }

/* Links and headings */
.lx-look main a { text-underline-offset: 3px; }
.lx-look main :is(h1, h2, h3) { text-wrap: balance; }

/* "Learn what this law means" card on state and country pages */
.ltp-placecard {
	display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; box-sizing: border-box;
	max-width: 1100px; margin: 2.4rem auto; padding: 1.5rem 1.4rem; border-radius: 22px; color: #fff;
	background: radial-gradient(circle at 92% 0%, rgba(246, 213, 142, .25), transparent 40%), linear-gradient(120deg, #2E1647 0%, #3D1F5C 45%, #6A3C8F 100%);
}
.ltp-placecard-lantern { width: 64px; height: auto; display: block; }
.ltp-placecard .ltp-placecard-h { color: #fff !important; font-size: clamp(1.35rem, 3.4vw, 1.75rem); margin: 0 0 .4rem; line-height: 1.2; }
.ltp-placecard p { color: #fff; margin: 0 0 .9rem; max-width: 60ch; }
.ltp-placecard .ltp-placecard-act { margin: 0; }
.ltp-placecard a.ltp-placecard-btn, .lx-look .ltp-placecard a.ltp-placecard-btn {
	display: inline-flex; align-items: center; min-height: 46px; padding: .65rem 1.4rem; border-radius: 999px;
	background: linear-gradient(130deg, #EDB94E, var(--lk-gold, #E3A93B)) !important; color: #2E1647 !important; font-weight: 700; text-decoration: none !important;
}
.ltp-placecard a.ltp-placecard-btn:hover { transform: translateY(-1px); }
@media (min-width: 640px) { .ltp-placecard { grid-template-columns: auto 1fr; padding: 1.8rem 2rem; } }

/* "Prefer short lessons?" banner on the older training guides */
.ltp-oldban {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; box-sizing: border-box;
	margin: 0 0 1.8rem; padding: 1rem 1.25rem; border-radius: 16px; background: var(--lk-lav, #F4EDF8); border: 1px solid #E2D3EE;
}
.ltp-oldban p { margin: 0; }
.ltp-oldban .ltp-oldban-h { font-weight: 700; color: var(--lk-plum, #3D1F5C); }
.ltp-oldban .ltp-oldban-t { max-width: 62ch; }
.ltp-oldban a.ltp-oldban-btn, .lx-look .ltp-oldban a.ltp-oldban-btn {
	display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.25rem; border-radius: 999px; white-space: nowrap;
	background: linear-gradient(130deg, #3D1F5C, #7A4A9E) !important; color: #fff !important; font-weight: 700; text-decoration: none !important;
}

/* The "add your name" box on the training pages: stack on phones so nothing runs off the screen */
@media (max-width: 640px) {
	.lx-look .ltr-hello { flex-wrap: wrap !important; }
	.lx-look .ltr-hello > * { min-width: 0; }
	.lx-look .ltr-hello-in { flex: 1 1 100% !important; width: 100%; }
	.lx-look .ltr-hello-field { flex-wrap: wrap; max-width: 100%; }
	.lx-look .ltr-hello-field :is(input, select) { min-width: 0; max-width: 100%; flex: 1 1 100%; }
}

@media (prefers-color-scheme: dark) {
	.ltp-oldban { background: #241D2C; border-color: #4A3D5A; }
	.ltp-oldban .ltp-oldban-h { color: #E3CCF5; }
}
@media (prefers-reduced-motion: reduce) {
	.lx-look *, .ltp-placecard * { transition: none !important; transform: none !important; }
}
@media print { .ltp-placecard, .ltp-oldban { display: none !important; } }