/*
Theme Name: Innovative 3PL
Description: Faithful rebuild of innovative3pl.com's BigCommerce (Cornerstone-based Stencil) storefront. The look is live's own compiled theme CSS (assets/css/live-theme.css) and live's custom page templates (template-parts/bc/); this file is only the bridge.
Version: 0.1.0
Text Domain: innovative3pl
*/

/* The contact form's honeypot. */
.st-hp { position: absolute !important; left: -9999px !important; }

/* ------------------------------------------------------------------------------------------------
   Layout fixes from the 2026-11-04 styling audit (audit/ in the toolkit). Every one of these was
   already wrong on the BigCommerce store; the rebuild had copied it faithfully.
   ------------------------------------------------------------------------------------------------ */

/* Cornerstone's .page is a nested grid row (margin 0 -.75rem) that expects a padded .container
   around it. BigCommerce's custom templates put it straight in .body, so those pages were 21px
   wider than the screen: sideways scrolling on phones and 10.5px cut off on the left. */
.body > .page { margin-left: 0; margin-right: 0; }

/* Templates whose text sat on the screen edge get Cornerstone's .container gutter:
   search results, brand pages, the 404 page and /sitemap.php (h1 + list straight in .body). */
.body > section.page > .page-content,
.body > div.page,
.body > main.page > section.page-content { padding-left: 1.5rem; padding-right: 1.5rem; }
.body > h1 { padding-left: 1.5rem; padding-right: 1.5rem; }
.body > ul { margin-left: 1.5rem; margin-right: 1.5rem; }

/* Blog index: "Next" was floated to the far right edge of the page, away from the page numbers. */
.pagination-item--next,
.pagination-item--previous { float: none; }

/* Blog posts: their own stylesheet (the i3pl-blog rules in live-theme.css) is built for a 1180px
   column, but Cornerstone narrows .blog-post-body to 50% on desktop, which squeezed the guide
   layout to a 366px main column with headings spilling out of their cards. */
.blog-post-body:has(.i3pl-blog-pro) { width: 100%; }

/* Four posts (Magento 2, BigCommerce, 3PL vs 4PL, 3PL Fulfillment Services) title their hero with an
   h2, which the post CSS paints navy - navy on the navy hero, unreadable. Same treatment as the h1s. */
.i3pl-blog-pro .i3pl-blog-hero h2 { color: #ffffff !important; text-shadow: 0 3px 18px rgba(0, 0, 0, .18); }
.i3pl-blog-pro .i3pl-blog-hero h2:after { display: none; }

/* The post hero title never went below 36px, so long words ("WooCommerce") were cut off on phones. */
@media (max-width: 760px) {
	.i3pl-blog-pro .i3pl-blog-hero h1 { font-size: clamp(26px, 8.4vw, 36px); overflow-wrap: break-word; }
}

/* /brands/: the brand grid carries the same -.75rem row margin. */
.body > main.page > .brandGrid { margin-left: 0; margin-right: 0; }

/* Phone tap targets: page numbers (19x22) and the post share icons (20x28) were under 24px. */
@media (max-width: 767px) {
	.pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; }
	.socialLinks__link { padding: 6px; margin: -6px; box-sizing: content-box; }
}

/* ------------------------------------------------------------------------------------------------
   Contact page: the "i3pl-contact" section (eyebrow, cards, service tiles, FAQ) shipped with no CSS
   at all on BigCommerce - the matching i3pl-blog styles made it into the theme, these never did -
   so it rendered as loose text. Styled with the same tokens as the blog/page-builder sections.
   ------------------------------------------------------------------------------------------------ */
.i3pl-contact-compact {
	--navy: #14213d; --blue: #1f5f9f; --sky: #e8f0fb; --bg: #f6f8fb; --text: #44515f; --border: #e2e8f0;
	margin: 36px 0 44px;
	text-align: left;
}
.form + .i3pl-contact-compact { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--border); }
.i3pl-contact-compact * { box-sizing: border-box; }
.i3pl-contact-wrap { max-width: 1180px; margin: 0 auto; }
.i3pl-contact-header { margin-bottom: 24px; }
.i3pl-contact-eyebrow {
	display: inline-block; margin-bottom: 14px; padding: 7px 14px; border-radius: 999px;
	background: var(--sky); color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.i3pl-contact-compact h2 { margin: 0 0 12px; color: var(--navy); font-size: clamp(26px, 3vw, 36px); line-height: 1.15; font-weight: 800; }
.i3pl-contact-compact h3 { margin: 0 0 10px; color: var(--navy); font-size: 19px; line-height: 1.3; font-weight: 700; }
.i3pl-contact-compact p { margin: 0 0 14px; color: var(--text); font-size: 15.5px; line-height: 1.7; }
.i3pl-contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; margin-bottom: 20px; }
.i3pl-contact-card {
	padding: 28px; border: 1px solid var(--border); border-radius: 22px; background: #fff;
	box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}
.i3pl-contact-card.dark { border-color: transparent; background: linear-gradient(135deg, #14213d, #1f5f9f); }
.i3pl-contact-card.dark h3,
.i3pl-contact-card.dark p,
.i3pl-contact-card.dark span,
.i3pl-contact-card.dark strong,
.i3pl-contact-card.dark a { color: #fff; }
.i3pl-contact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 4px 0 0; padding: 0; list-style: none; }
.i3pl-contact-list li { position: relative; padding-left: 22px; color: var(--text); font-size: 15px; line-height: 1.5; }
.i3pl-contact-list li:before { content: "\2713"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.i3pl-contact-info { display: grid; gap: 14px; margin-top: 4px; }
.i3pl-contact-info-item { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 15px; line-height: 1.55; }
.i3pl-contact-info-item strong { display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.i3pl-service-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; }
.i3pl-mini-service { padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg); }
.i3pl-mini-service p { margin: 0; }
.i3pl-mini-label {
	display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; margin-bottom: 14px;
	padding: 0 9px; border-radius: 14px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .04em;
}
.i3pl-contact-faq details { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.i3pl-contact-faq summary {
	position: relative; padding: 16px 52px 16px 20px; color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.4;
	cursor: pointer; list-style: none;
}
.i3pl-contact-faq summary::-webkit-details-marker { display: none; }
.i3pl-contact-faq summary:after {
	content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--blue); font-size: 24px; font-weight: 400;
}
.i3pl-contact-faq details[open] summary:after { content: "\2013"; }
.i3pl-contact-faq details p { margin: 0; padding: 0 20px 18px; }
@media (max-width: 800px) {
	.i3pl-contact-grid,
	.i3pl-service-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.i3pl-contact-card { padding: 22px; }
	.i3pl-contact-list { grid-template-columns: 1fr; }
}