/* ==========================================================================
   adamfreight.com: phone clean-up (Hever / Varia classic theme)
   Paste into: Appearance > Customize > Additional CSS
   Built Oct 4, 2026. Uses only the theme's own colors:
   primary #1279BE (blue), tertiary #C5C5C5 (light gray), foreground #303030.
   No red/green anywhere. Everything except the footer is limited to phone widths.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FOOTER: one centered column at every width
   (widget block > footer menu > site title line)
   -------------------------------------------------------------------------- */
body .site-footer {
	display: block;               /* theme makes it a 2-column flex row at 640px+ */
	text-align: center;
	border-top: 1px solid var(--wp--preset--color--tertiary, #C5C5C5);
	margin-top: 16px;
	padding-top: 32px;
	padding-bottom: 40px;
}
body .site-footer > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Contact block (footer widget area) */
body .site-footer .widget-area {
	display: block;               /* theme uses flex at 782px+ */
	max-width: 36rem;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}
body .site-footer .widget-area .widget {
	width: auto;                  /* theme gives widgets a 50% / 33% column */
	margin: 0 auto;
}
body .site-footer .widget-area .widget p {
	text-align: center;
	margin: 0 0 12px;
	line-height: 1.6;
	text-wrap: balance;
}
body .site-footer .widget-area .widget p:last-child {
	margin-bottom: 0;
}
body .site-footer .widget-area a[href^="mailto:"] {
	overflow-wrap: anywhere;      /* long email never pokes past the edge */
}

/* Footer menu: centered, evenly spaced, wraps cleanly */
body .site-footer .footer-navigation,
body .site-footer .footer-navigation > div {
	display: block;
	text-align: center;
}
body .site-footer .footer-navigation {
	margin-top: 24px;
	padding: 0 8px;
}
body .site-footer .footer-navigation .footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 6px;
	max-width: 36rem;
	margin: 0 auto;
	padding: 0;
}
body .site-footer .footer-navigation .footer-menu > li {
	margin: 0;
	padding: 0;
}
body .site-footer .footer-navigation .footer-menu > li > a {
	display: inline-block;
	padding: 12px 8px;            /* about 44px tall tap target */
	line-height: 1.3;
}
/* The "Tools" parent links to "#" and has no sub-items in the footer, so it
   goes nowhere. Hide it there (it stays in the header menu). */
body .site-footer .footer-menu > li.menu-item-1765,
body .site-footer .footer-menu > li:has(> a[href="#"]) {
	display: none;
}

/* Site title line in footer is redundant with the contact block + menu */
body .site-footer .site-info {
	display: none;
}

/* --------------------------------------------------------------------------
   2. TRAILER GUIDE TABLE (page 1751): stacked cards on phones
   Works with the current core Table block (no content edit needed).
   Labels follow the column order; if a column is added, renamed or moved,
   update the five "content:" labels below to match.
   Targets the page ID now, and the class "afc-trailer-table" if it is added
   to the Table block (Advanced > Additional CSS class).
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
	.page-id-1751 .entry-content .wp-block-table,
	.afc-trailer-table {
		overflow: visible;
	}
	.page-id-1751 .entry-content .wp-block-table table,
	.page-id-1751 .entry-content .wp-block-table tbody,
	.page-id-1751 .entry-content .wp-block-table tr,
	.afc-trailer-table table,
	.afc-trailer-table tbody,
	.afc-trailer-table tr {
		display: block;
		width: 100%;
		min-width: 0;
	}
	/* hide the header row visually (labels repeat in each card) */
	.page-id-1751 .entry-content .wp-block-table thead,
	.afc-trailer-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.page-id-1751 .entry-content .wp-block-table tr,
	.afc-trailer-table tr {
		border: 1px solid var(--wp--preset--color--tertiary, #C5C5C5);
		border-radius: 6px;
		margin: 0 0 16px;
		padding: 0 14px 4px;
		box-sizing: border-box;
		background: var(--wp--preset--color--background, #fff);
	}
	.page-id-1751 .entry-content .wp-block-table td,
	.afc-trailer-table td {
		display: grid;
		grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
		gap: 12px;
		border: 0;
		border-bottom: 1px solid var(--wp--preset--color--tertiary, #C5C5C5);
		padding: 8px 0;
		text-align: left;
		font-size: 0.95rem;
		line-height: 1.45;
	}
	.page-id-1751 .entry-content .wp-block-table td:last-child,
	.afc-trailer-table td:last-child {
		border-bottom: 0;
	}
	/* first cell = card title (trailer name) */
	.page-id-1751 .entry-content .wp-block-table td:first-child,
	.afc-trailer-table td:first-child {
		display: block;
		font-size: 1.1rem;
		padding: 12px 0 10px;
		border-bottom: 3px solid var(--wp--preset--color--primary, #1279BE);
	}
	.page-id-1751 .entry-content .wp-block-table td::before,
	.afc-trailer-table td::before {
		font-weight: 700;
		font-size: 0.85rem;
		line-height: 1.45;
		color: var(--wp--preset--color--foreground, #303030);
		opacity: 0.8;
	}
	.page-id-1751 .entry-content .wp-block-table td:first-child::before,
	.afc-trailer-table td:first-child::before {
		content: none;
	}
	.page-id-1751 .entry-content .wp-block-table td:nth-child(2)::before,
	.afc-trailer-table td:nth-child(2)::before { content: "Deck or inside length"; }
	.page-id-1751 .entry-content .wp-block-table td:nth-child(3)::before,
	.afc-trailer-table td:nth-child(3)::before { content: "Width"; }
	.page-id-1751 .entry-content .wp-block-table td:nth-child(4)::before,
	.afc-trailer-table td:nth-child(4)::before { content: "Max freight height (legal)"; }
	.page-id-1751 .entry-content .wp-block-table td:nth-child(5)::before,
	.afc-trailer-table td:nth-child(5)::before { content: "Typical max freight weight"; }
	.page-id-1751 .entry-content .wp-block-table td:nth-child(6)::before,
	.afc-trailer-table td:nth-child(6)::before { content: "Best for"; }
}

/* --------------------------------------------------------------------------
   3. HEADER: SRC logo upper left (Customizer Site Logo), sized for phones
   and desktop. Site title stays clipped by the theme when a logo is set.
   Theme wraps the logo in .site-logo (direct grid child of .site-header).
   -------------------------------------------------------------------------- */
body .site-header .site-logo {
	line-height: 0;
}
body .site-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
body .site-header .custom-logo-link img,
body .site-header .custom-logo {
	max-height: 84px;
	width: auto;
	height: auto;
	display: block;
}
@media only screen and (max-width: 559px) {
	body.mobile-nav-side .site-header.has-menu,
	body.mobile-nav-side .site-header.has-logo.has-menu {
		display: grid;
		grid-template-areas: "site-logo main-navigation";
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 12px;
		justify-items: stretch;
	}
	/* Beat Hever's .mobile-nav-side .has-menu .site-logo { justify-self: center } */
	body.mobile-nav-side .site-header.has-menu .site-logo,
	body.mobile-nav-side .site-header.has-logo.has-menu .site-logo {
		grid-area: site-logo;
		justify-self: start;
		margin: 0;
		text-align: left;
	}
	body .site-header .main-navigation {
		grid-area: main-navigation;
		justify-self: end;
	}
	body .site-header .custom-logo-link img,
	body .site-header .custom-logo {
		max-height: 70px;
	}
}

/* --------------------------------------------------------------------------
   4. BUTTONS: stack full width, equal widths, on phones
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
	.entry-content .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.entry-content .wp-block-buttons > .wp-block-button {
		width: 100%;
		margin: 0;
	}
	.entry-content .wp-block-buttons > .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   5. MOBILE MENU: 48px rows, clear sub-item indent
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 559px) {
	body.mobile-nav-side .site-header #site-navigation.main-navigation > div > ul {
		margin: 0;
		padding: 0;
	}
	body.mobile-nav-side .site-header #site-navigation.main-navigation > div > ul > li {
		padding: 0;
		border-bottom: 1px solid var(--wp--preset--color--tertiary, #C5C5C5);
	}
	body.mobile-nav-side .site-header #site-navigation.main-navigation > div > ul > li:last-child {
		border-bottom: 0;
	}
	body.mobile-nav-side .site-header #site-navigation.main-navigation > div > ul > li > a,
	body.mobile-nav-side .site-header #site-navigation.main-navigation .sub-menu .menu-item a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 8px 4px;
		box-sizing: border-box;
		line-height: 1.3;
	}
	/* sub-items: indented under a blue rule instead of "-" dashes */
	body.mobile-nav-side .site-header #site-navigation.main-navigation .sub-menu {
		margin: 0 0 10px 6px;
		padding: 0 0 0 16px;
		border-left: 3px solid var(--wp--preset--color--primary, #1279BE);
	}
	body.mobile-nav-side .site-header #site-navigation.main-navigation .sub-menu .menu-item a {
		font-weight: 400;
	}
	body.mobile-nav-side .site-header #site-navigation.main-navigation .sub-menu .menu-item a::before {
		content: none;
	}
	/* "Tools" is only a heading (it links to "#"): show it as a small label */
	body.mobile-nav-side .site-header #site-navigation.main-navigation > div > ul > li > a[href="#"] {
		min-height: 44px;
		font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		opacity: 0.75;
		pointer-events: none;
	}
	body.mobile-nav-side .site-header #site-navigation.main-navigation .current-menu-item > a {
		color: var(--wp--preset--color--primary, #1279BE);
	}
}

/* --------------------------------------------------------------------------
   6. GALLERIES (Recent Shipments, Home): even square tiles on phones
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {
	.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
		aspect-ratio: 1 / 1;
		flex-grow: 0;
		overflow: hidden;
	}
	.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		flex: 1 1 auto;
	}
	.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image > a {
		display: block;
		width: 100%;
		height: 100%;
	}
}

/* --------------------------------------------------------------------------
   8. Quote page: center Get My Quote submit
   -------------------------------------------------------------------------- */
.page-id-1725 .wp-block-jetpack-button,
.page-id-1725 .jetpack-submit-button,
.page-id-1725 .wp-block-button.wp-block-jetpack-button {
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
}


/* --------------------------------------------------------------------------
   9. Fixed full-width header (sticky fails in this theme layout)
   -------------------------------------------------------------------------- */
body .site-header,
#masthead.site-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 1000 !important;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
	padding-left: 16px;
	padding-right: 16px;
	background-color: var(--wp--preset--color--background, #fff) !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
body .site-header.responsive-max-width,
#masthead.site-header.responsive-max-width {
	max-width: none !important;
	width: 100% !important;
}
body.admin-bar .site-header,
body.admin-bar #masthead.site-header {
	top: 32px !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar .site-header,
	body.admin-bar #masthead.site-header {
		top: 46px !important;
	}
}
/* Reserve space so content isn't hidden under the fixed bar.
   Desktop logo ~72px + padding ≈ 88px; phone ~60px + padding ≈ 76px. */
body #page {
	padding-top: 100px;
}
@media only screen and (max-width: 559px) {
	body #page {
		padding-top: 88px;
	}
}
/* Header is below admin bar, so reserve header height + admin bar */
body.admin-bar #page {
	padding-top: 132px; /* ~100 header + 32 admin */
}
@media screen and (max-width: 782px) {
	body.admin-bar #page {
		padding-top: 146px; /* ~100 + 46 admin */
	}
}
@media only screen and (max-width: 559px) {
	body.admin-bar #page {
		padding-top: 134px; /* ~88 + 46 admin */
	}
}
/* Normal menu link colors */
body .site-header #site-navigation.main-navigation > div > ul > li > a {
	color: inherit;
	text-shadow: none;
}


/* --------------------------------------------------------------------------
   9e. Two equal cells: logo centered left, menu centered right
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 560px) {
	body .site-header.has-logo.has-menu,
	body .site-header.has-logo:not(.has-title-and-tagline) {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		grid-template-areas: "site-logo main-navigation" !important;
		align-items: center !important;
		column-gap: 0;
	}
	body .site-header .site-logo {
		grid-area: site-logo !important;
		justify-self: center !important;
		margin: 0 !important;
		text-align: center;
	}
	body .site-header .main-navigation {
		grid-area: main-navigation !important;
		justify-self: center !important;
		margin: 0 !important;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	body .site-header #site-navigation.main-navigation > div,
	body .site-header #site-navigation.main-navigation > div > ul {
		width: auto;
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
	}
}
@media only screen and (max-width: 559px) {
	body.mobile-nav-side .site-header.has-menu,
	body.mobile-nav-side .site-header.has-logo.has-menu {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		grid-template-areas: "site-logo main-navigation" !important;
		align-items: center !important;
	}
	body.mobile-nav-side .site-header.has-menu .site-logo,
	body.mobile-nav-side .site-header.has-logo.has-menu .site-logo {
		grid-area: site-logo !important;
		justify-self: center !important;
		margin: 0 !important;
		text-align: center;
	}
	body .site-header .main-navigation {
		grid-area: main-navigation !important;
		justify-self: center !important;
		display: flex;
		justify-content: center;
		width: 100%;
	}
}