/*
 * Lake Auburn Legal -- phone layer: tokens, type, section headings and chrome.
 *
 * The original's own mobile layout, below Duda's 768px breakpoint, measured at a 390px viewport
 * against the snapshot. Loaded after lake-auburn-legal.css and responsive.css, whose rules it
 * overrides; phone-sections.css carries the page sections. Where a pattern pins a desktop value
 * inline, only !important reaches it.
 */

@media (max-width: 767px) {
	.lal {
		--lal-gutter: 15.6px;
		--lal-section-y: 39px;
		font-size: 15px;
	}

	.lal-prose p,
	.lal-list li,
	.lal-deflist li {
		font-size: 15px;
		line-height: 30px;
	}

	/* Items run on at 30px lines with no extra pixel, the text 30px in from the column. */
	.lal-list li,
	.lal-deflist li {
		margin-left: 30px;
		padding-bottom: 0;
	}

	/* Section headings: the serif line at 24px, the sans line at 15px, every line of both on a 36px
	   line box as the original sets them inside one heading; the badge 10px under it. */
	.lal-heading__title {
		font-size: 24px;
		line-height: 36px;
	}

	.lal-heading__sub {
		margin-top: 0;
		font-size: 15px;
		line-height: 36px;
	}

	.lal-tips .lal-heading__sub {
		font-size: 16px;
	}

	.lal .lal-heading__badge {
		margin: 10px 0 0;
	}

	/* The badge boxes, each the original's image box with the disc fitted inside it. */
	.lal .lal-cards .lal-heading__badge {
		width: 79px;
		height: 79px;
		margin-inline: auto;
	}

	.lal .lal-why .lal-heading__badge {
		width: 82px;
		height: 76px;
	}

	.lal .lal-process .lal-heading__badge {
		width: 66px;
		height: 65px;
		margin-left: 10px;
	}

	.lal .lal-tips .lal-heading__badge {
		width: 80px;
		height: 72px;
	}

	.lal .lal-local .lal-heading__badge {
		width: 81px;
		height: 69px;
		margin-top: 15px;
	}

	/* The gap from the badge to the copy beneath it, per section. */
	.lal .lal-cards .lal-heading {
		margin-bottom: 17px;
	}

	.lal .lal-why .lal-heading {
		margin-bottom: 26px;
	}

	.lal .lal-process .lal-heading {
		margin-bottom: 15px;
	}

	.lal .lal-tips .lal-heading {
		margin-bottom: 22px;
	}

	.lal .lal-local .lal-heading {
		margin-bottom: 18px;
	}

	/* Masthead: hamburger on the left, a 120x85 logo just right of centre, the telephone mark on
	   the right, all centred on the logo's 85px row; then the 39px strip, pulled 20px up under the
	   logo as the original's own section is. */
	.lal-header__top {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: 'toggle logo phone';
		padding-top: 20px;
	}

	.lal-header__logo {
		grid-area: logo;
		margin-left: 20px;
	}

	.lal-header__logo img {
		width: 120px;
	}

	/* A 40px target whose 30x23 glyph box lands where the original's does (x24, y51). */
	.lal-js .lal-header__toggle {
		grid-area: toggle;
		justify-self: start;
		width: 40px;
		height: 40px;
		margin-left: 3.4px;
	}

	.lal-header__toggle svg {
		width: 30px;
		height: 23px;
	}

	.lal-header__phone {
		grid-area: phone;
		justify-self: end;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin-right: -15.1px;
	}

	/* The strip is drawn at its closed 39px size from the top, so an open menu grows the bar beneath it
	   on white rather than scaling the strip's disc up behind the links. */
	.lal-header__navbar {
		position: relative;
		min-height: 39px;
		margin-top: -20px;
		background-size: auto 39px;
		background-position: 0 0;
	}

	/* The open menu, as the original's drawer sets it: 16px links on 42px rows, 28px in. */
	.lal-header__navbar .lal-nav {
		gap: 0;
		padding: 51px 0 12px 12.4px;
	}

	.lal-header__navbar .lal-nav a {
		padding-bottom: 10px;
		font-size: 16px;
		line-height: 32px;
	}

	/* Footer: 39px above the columns, 82px below, each title 16px on 33px lines with its rule 14px
	   under it, and 12px between the columns. */
	.lal-footer__cols {
		gap: 12px;
		padding: 39px 0 82px;
	}

	.lal-footer__title {
		margin: 0;
		font-size: 16px;
		line-height: 33px;
	}

	.lal-footer .lal-rule {
		width: 72px;
	}

	/* A column ends on its last paragraph; the social marks are not shown on a phone. */
	.lal-footer__cols p:last-of-type {
		margin-bottom: 0;
	}

	.lal-footer__social {
		display: none;
	}

	.lal-footer__cols > div:nth-child(2) p {
		max-width: 292px;
	}

	/* The colophon: the breadcrumb 20px down at 15px, the notice 14px under the rule, 78px beneath. */
	.lal-colophon {
		padding: 20px 0 78px;
	}

	.lal-colophon p.lal-colophon__crumb {
		margin-bottom: 0;
		font-size: 15px;
		line-height: 30px;
	}

	.lal-colophon hr {
		margin: 14px 0;
	}
}