/* =============================================================
WP-ONLY LAYOUT OVERRIDES (NOT part of the shared static css/)
Re-asserts the layout declarations that Elementor's atomic base
stylesheet (.e-flexbox-base / .e-div-block-base, loaded after our
central CSS) overrides at equal specificity. Doubling the class
selector (0,2,0) beats Elementor's single class (0,1,0) regardless
of cascade order, so the centralized layout wins on native widgets.
Skin/typography/colors are already inherited from global.css+blog.css.
============================================================= */
/* ---- Post card ---- */
.post-card.post-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.post-card__img-wrap.post-card__img-wrap { position: relative; overflow: hidden; display: block; aspect-ratio: 3 / 2; }
.post-card__img-wrap.post-card__img-wrap > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.post-card__body.post-card__body { display: flex; flex-direction: column; flex: 1; }
.post-card__meta.post-card__meta { display: flex; flex-direction: row; align-items: center; }
.post-card__footer.post-card__footer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.post-card__read-link.post-card__read-link { display: inline-flex; flex-direction: row; align-items: center; }
/* e-image renders ![]()
; keep the cover-fill behavior the static card uses */
.post-card__img-wrap.post-card__img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-card__img-wrap.post-card__img-wrap :is(figure,a,span) { display: block; position: absolute; inset: 0; margin: 0; }
/* ---- Featured card ---- */
.blog-featured__card.blog-featured__card { display: grid; padding: 0; overflow: hidden; }
@media (min-width: 768px) { .blog-featured__card.blog-featured__card { grid-template-columns: 1fr 1fr; } }
.blog-featured__body.blog-featured__body { display: flex; flex-direction: column; justify-content: center; }
.blog-featured__meta.blog-featured__meta { display: flex; flex-direction: row; align-items: center; }
.blog-featured__author.blog-featured__author { display: flex; flex-direction: row; align-items: center; }
.blog-featured__author-avatar.blog-featured__author-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blog-featured__author-info.blog-featured__author-info { display: flex; flex-direction: column; }
.blog-featured__img-wrap.blog-featured__img-wrap { position: relative; overflow: hidden; }
.blog-featured__img-wrap.blog-featured__img-wrap > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.blog-featured__img-wrap.blog-featured__img-wrap img { object-fit: cover; }
@media (max-width: 767px) { .blog-featured__img-wrap.blog-featured__img-wrap { aspect-ratio: 3 / 2; } }
/* ---- Blog grid fallback (when not using a loop-grid's own columns) ---- */
.blog-grid__list.blog-grid__list { display: grid; }
@media (min-width: 600px) { .blog-grid__list.blog-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .blog-grid__list.blog-grid__list { grid-template-columns: repeat(3, 1fr); } }
/* ---- Filter / pagination rows ---- */
.blog-filter__inner.blog-filter__inner { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; }
.blog-pagination__inner.blog-pagination__inner { display: flex; flex-direction: row; align-items: center; justify-content: center; }
/* ---- Nav / footer (static chrome) ---- */
.nav__inner.nav__inner { display: flex; flex-direction: row; align-items: center; }
.footer-grid.footer-grid { display: grid; }
@media (min-width: 640px) { .footer-grid.footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-links.footer-links { display: flex; flex-direction: column; }
.footer-bottom.footer-bottom { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
/* =============================================================
BOX MODEL — padding / margin / gap / centering
============================================================= */
/* Hero */
.blog-hero.blog-hero { padding: 0 var(--pad-h); }
.blog-hero__content.blog-hero__content { width: 100%; max-width: var(--max-w); margin-left: auto; margin-right: auto; padding: calc(clamp(40px, 5vw, 64px) + 66px) 0 clamp(48px, 6vw, 72px); }
.blog-hero__kicker.blog-hero__kicker { margin-bottom: 16px; }
.blog-hero__h1.blog-hero__h1 { margin-bottom: 16px; }
/* Featured */
.blog-featured.blog-featured { padding: var(--pad-v) var(--pad-h) 0; }
.blog-featured__inner.blog-featured__inner { width: 100%; max-width: var(--max-w); margin-left: auto; margin-right: auto; }
.blog-featured__body.blog-featured__body { padding: 28px 20px; }
@media (min-width: 768px) { .blog-featured__body.blog-featured__body { padding: 32px 28px; } }
@media (min-width: 1024px) { .blog-featured__body.blog-featured__body { padding: 40px; } }
.blog-featured__meta.blog-featured__meta { gap: 12px; margin-bottom: 16px; padding: 0; }
.blog-featured__title.blog-featured__title { margin-bottom: 14px; }
.blog-featured__excerpt.blog-featured__excerpt { margin-bottom: 24px; }
.blog-featured__author.blog-featured__author { gap: 12px; padding: 0; }
/* Filter */
.blog-filter.blog-filter { padding: 48px var(--pad-h) 0; }
.blog-filter__inner.blog-filter__inner { width: 100%; max-width: var(--max-w); margin-left: auto; margin-right: auto; gap: 6px; padding-bottom: 32px; }
/* Grid */
.blog-grid.blog-grid { padding: 48px var(--pad-h) var(--pad-v); }
.blog-grid__inner.blog-grid__inner { width: 100%; max-width: var(--max-w); margin-left: auto; margin-right: auto; }
/* Post card internals */
.post-card__body.post-card__body { padding: 24px; }
.post-card__meta.post-card__meta { gap: 10px; margin-bottom: 12px; padding: 0; }
.post-card__title.post-card__title { margin-bottom: 14px; }
.post-card__excerpt.post-card__excerpt { margin-bottom: 20px; }
.post-card__footer.post-card__footer { padding: 16px 0 0; }
.post-card__read-link.post-card__read-link { gap: 5px; }
/* =============================================================
CARD ALIGNMENT GUARDRAILS (title/excerpt clamp + footer bottom)
============================================================= */
.post-card__title.post-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.post-card__excerpt.post-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.post-card__footer.post-card__footer { margin-top: auto; }
/* Read link — matches the news read-more: animated underline + sliding arrow.
The underline is .post-card__read-link::after (blog.css / blog-post.css); the
arrow moves to the inner link's ::after here (atomic has no inline SVG) so it
doesn't collide with the underline's ::after. */
.post-card__read-link a::after {
content: ''; display: inline-block; width: 13px; height: 13px; margin-left: 6px; vertical-align: -1px; flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3E%3Cpath%20d='M1%207h12m0%200L8%202.5M13%207l-5%204.5'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3E%3Cpath%20d='M1%207h12m0%200L8%202.5M13%207l-5%204.5'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
transition: transform 180ms var(--ease);
}
.post-card__read-link:hover a::after { transform: translateX(3px); }
/* =============================================================
LOOP-GRID PAGINATION (styled like the static .blog-pagination)
Scoped under .blog-grid__inner for (0,3,0).
============================================================= */
.blog-grid__inner .elementor-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding-top: 48px; margin-top: var(--pad-v); border-top: 1px solid var(--c-border); }
.blog-grid__inner .elementor-pagination .page-numbers { min-width: 42px; height: 42px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid transparent; font-family: var(--font); font-size: 14px; font-weight: 600; line-height: 1; color: var(--c-text-muted); background: transparent; text-decoration: none; transition: color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease); }
.blog-grid__inner .elementor-pagination a.page-numbers:hover { color: var(--c-navy); background: rgba(4, 30, 66, 0.04); }
.blog-grid__inner .elementor-pagination .page-numbers.current { color: var(--c-blue); background: rgba(0, 25, 255, 0.06); border-color: rgba(0, 25, 255, 0.15); }
.blog-grid__inner .elementor-pagination .page-numbers.prev, .blog-grid__inner .elementor-pagination .page-numbers.next { color: var(--c-navy); font-size: 17px; }
.blog-grid__inner .elementor-pagination .page-numbers.dots { min-width: 24px; color: var(--c-text-muted); background: transparent; border: 0; }
/* =============================================================
CTA SECTION (static, reused on index + single)
============================================================= */
.cta-section.cta-section { padding: clamp(100px, 14vw, 160px) var(--pad-h); text-align: center; }
.cta-inner.cta-inner { width: 100%; max-width: 680px; margin-left: auto; margin-right: auto; }
.section-kicker.section-kicker { margin-bottom: 14px; }
.cta-headline.cta-headline { margin-bottom: 18px; }
.cta-body.cta-body { max-width: 48ch; margin-left: auto; margin-right: auto; margin-bottom: 40px; }
.cta-trust.cta-trust { margin-top: 24px; }
.cta-arrow-graphic.cta-arrow-graphic { position: absolute; right: -80px; top: 50%; transform: translateY(-50%); width: min(500px, 42vw); opacity: 0.18; z-index: 1; pointer-events: none; padding: 0; }
.cta-arrow-graphic.cta-arrow-graphic img { width: 100%; height: auto; display: block; }
/* Button pill (.btn) */
.btn.btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px; border-radius: 100px; width: auto; }
.btn--lg.btn--lg { padding: 18px 34px; }
.btn--sm.btn--sm { padding: 10px 18px; }
.btn--primary.btn--primary { background: var(--c-blue); color: #FFFFFF; }
/* =============================================================
TAXONOMY FILTER (native Pro widget, styled as .blog-filter__btn)
Scoped under .blog-filter__inner for (0,3,0). Active = aria-pressed.
============================================================= */
.blog-filter__inner .e-filter { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.blog-filter__inner .e-filter .e-filter-item { font-family: var(--font); font-size: 13px; font-weight: 600; line-height: 1; padding: 9px 20px; border-radius: 100px; border: 1px solid var(--c-border); background: transparent; color: var(--c-text-muted); cursor: pointer; white-space: nowrap; transition: color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease); }
.blog-filter__inner .e-filter .e-filter-item:hover { color: var(--c-navy); border-color: rgba(4, 30, 66, 0.25); background: rgba(4, 30, 66, 0.03); }
.blog-filter__inner .e-filter .e-filter-item[aria-pressed="true"], .blog-filter__inner .e-filter .e-filter-item.e-active, .blog-filter__inner .e-filter .e-filter-item[aria-current] { color: var(--c-blue); border-color: var(--c-blue); background: rgba(0, 25, 255, 0.05); }
/* =============================================================
THEME CHROME SUPPRESSION (hide UiCore page-title bar)
============================================================= */
.uicore-page-title { display: none !important; }
/* =============================================================
NAV CTA responsive hide (below 900px it lives in the hamburger menu)
============================================================= */
@media (max-width: 899px) {
.nav__cta { display: none !important; }
}
/* =============================================================
NAV — NATIVE ELEMENTOR BRIDGE
The header is native atomic widgets. Atomic v4 can't emit ul/li/nav
tags, can't put a class on the ![]()
, renders no inline SVG, and its
base CSS overrides display/flex (containers default to width:100% and
flex-shrink). These rules re-map the central .nav__menu>li /
.nav__dropdown a / hamburger span / logo img / mobile accordion rules
onto the div-based structure (.nav__item, a.nav__link, a.nav__dd-link,
glyph .nav__chevron, span bars).
============================================================= */
/* Header height + content alignment.
(1) Atomic .e-con injects ~10px padding on EVERY container — including the
header element itself (.nav) and .nav__inner. That vertical padding inflated
the header and made it overhang the .mobile-menu top offset (clipped the first
row "Services"), so keep it at 0.
(2) The horizontal pad-h must live on the OUTER .nav (the way .blog-hero
carries it), and .nav__inner must be a max-w centered box with NO inner
padding — otherwise the header content was 2×pad-h narrower than the hero, so
the logo/CTA sat indented from the page content edges on desktop. Vertical
stays 0 (height fix holds); on mobile (viewport < max-w) it renders identical. */
.nav.nav { padding: 0 var(--pad-h); }
.nav__inner.nav__inner { max-width: var(--max-w); margin-left: auto; margin-right: auto; padding: 0; }
.nav__inner.nav__inner > *, .nav__item.nav__item, .nav__link.nav__link, .nav__link.nav__link > *, .nav__cta.nav__cta, .nav__cta.nav__cta > * { flex: 0 0 auto; width: auto; }
/* Desktop menu wrapper (central .nav__menu is display:none, flex >=900) */
.nav__menu.nav__menu { display: none; }
@media (min-width: 900px) { .nav__menu.nav__menu { display: flex; flex-direction: row; align-items: center; gap: 4px; margin-right: 20px; } }
/* Menu item (replaces .nav__menu > li) */
.nav__item.nav__item { position: relative; display: flex; align-items: center; }
.nav__item.nav__item::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
/* Top link (replaces .nav__menu > li > a) */
.nav__link.nav__link { display: flex; flex-direction: row; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: rgba(240, 246, 252, 0.82); padding: 8px 12px; border-radius: 6px; white-space: nowrap; text-decoration: none; cursor: pointer; transition: color 220ms var(--ease), background 220ms var(--ease); }
.nav__link.nav__link:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.09); }
.nav__link.nav__link.is-active { color: var(--c-soft-blue); }
.nav.is-scrolled .nav__link.nav__link { color: var(--c-navy); }
.nav.is-scrolled .nav__link.nav__link:hover { color: var(--c-blue); background: rgba(0, 25, 255, 0.05); }
/* Chevron: atomic v4 can't emit inline SVG, so the markup carries a glyph span.
Hide the glyph and paint the EXACT static-site chevron via a mask-image data
URI, tinted with currentColor so it follows the nav text color (white →
navy on scroll). Matches css/global.css .nav__chevron (10x6, 1.5 round stroke). */
.nav__chevron.nav__chevron {
font-size: 0; line-height: 0; display: inline-block; width: 10px; height: 6px; flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%20viewBox='0%200%2010%206'%3E%3Cpath%20d='M1%201l4%204%204-4'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%20viewBox='0%200%2010%206'%3E%3Cpath%20d='M1%201l4%204%204-4'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0.65; transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.nav__item.nav__item:hover .nav__chevron { transform: rotate(180deg); opacity: 1; }
/* Dropdown sizing: Elementor gives the atomic container width:100% (= the narrow
.nav__item), which clips long items like "Customs & Trade Compliance" (short
lists like Resources happen to fit). Size to the widest item instead. */
.nav__dropdown.nav__dropdown { width: max-content; min-width: 220px; overflow: visible; padding: 6px 0; }
/* Dropdown reveal on hover */
.nav__item.nav__item:hover .nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__item.nav__item:hover .nav__dropdown--right { transform: translateX(0) translateY(0); }
/* Dropdown links (central .nav__dropdown a is display:block) */
.nav__dropdown .nav__dd-link.nav__dd-link { display: block; width: 100%; white-space: nowrap; }
/* Logo: _css_classes lands on the widget wrapper; make the img fill it */
.nav__logo-img .elementor-widget-container, .nav__logo-img img { display: block; height: 100%; width: auto; }
/* Give the logo img an EXPLICIT pixel height (not height:100% of the widget
wrapper). iOS Safari failed to resolve the % chain through Elementor's
widget-container and rendered the logo tiny; explicit px + max-width:none
renders identically on iOS/Android. Matches css/global.css (light 28, dark 32). */
.nav__logo-img--light.nav__logo-img--light img,
.nav__logo-img--light.nav__logo-img--light .elementor-widget-container img { display: block; height: 28px; width: auto; max-width: none; }
.nav__logo-img--dark.nav__logo-img--dark img,
.nav__logo-img--dark.nav__logo-img--dark .elementor-widget-container img { display: block; height: 32px; width: auto; max-width: none; }
/* Hamburger container (central wants column) + desktop hide */
.nav__hamburger.nav__hamburger { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 5px; }
@media (min-width: 900px) { .nav__hamburger.nav__hamburger { display: none; } }
/* Mobile accordion (central .mobile-submenu-wrap is display:grid) */
.mobile-submenu-wrap.mobile-submenu-wrap { display: grid; grid-template-rows: 0fr; }
.mobile-menu__item.is-open .mobile-submenu-wrap.mobile-submenu-wrap { grid-template-rows: 1fr; }
.mobile-submenu.mobile-submenu { display: flex; flex-direction: column; }
.mobile-submenu.mobile-submenu a { display: block; }
.mobile-menu__link.mobile-menu__link, .mobile-submenu-trigger.mobile-submenu-trigger { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
/* Mobile padding reset. Every atomic .e-con injects a default 10px padding.
In the accordion chain the collapsed wrap/inner keep that padding OUTSIDE the
0fr grid track, so items WITH sub-items showed ~40px of dead space (the "weird
padding"). Zero the Elementor padding and re-assert the central rhythm at
doubled specificity (0,2,0) so mobile matches the static build. */
.mobile-menu.mobile-menu { padding: 8px 0 56px; }
.mobile-menu__list.mobile-menu__list { padding: 0 var(--pad-h); }
.mobile-menu__item.mobile-menu__item { padding: 0; }
.mobile-menu__link.mobile-menu__link, .mobile-submenu-trigger.mobile-submenu-trigger { padding: 20px 0; }
.mobile-submenu-wrap.mobile-submenu-wrap { padding: 0; }
.mobile-submenu-inner.mobile-submenu-inner { overflow: hidden; min-height: 0; padding: 0; }
.mobile-submenu.mobile-submenu { padding: 4px 0 20px; }
.mobile-submenu.mobile-submenu a { padding: 12px 16px; }
/* Mobile chevron: same mask-image treatment as the desktop one (14x9, 1.8 round
stroke), tinted with currentColor; central turns it soft-blue when .is-open. */
.mobile-chevron.mobile-chevron {
font-size: 0; line-height: 0; display: inline-block; width: 14px; height: 9px; flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='9'%20viewBox='0%200%2014%209'%3E%3Cpath%20d='M1%201.5l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='9'%20viewBox='0%200%2014%209'%3E%3Cpath%20d='M1%201.5l6%206%206-6'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0.45; transition: transform 280ms var(--ease), opacity 220ms var(--ease);
}
.mobile-menu__item.is-open .mobile-chevron.mobile-chevron { transform: rotate(180deg); opacity: 1; }
/* =============================================================
NAV — MOBILE HEADER HEIGHT + MENU/CTA PROPORTIONS (post-QA #3)
Match the static prototype's mobile menu (css/global.css) exactly.
The header is the static 66px (Elementor can't inflate it now that
.nav padding is 0); the .mobile-menu top is locked to the SAME value
so there's no overlap. The mobile CTA block + button re-assert the
central spacing/full-width that Elementor's atomic defaults clobber:
Resources→button gap (32px, not Elementor's 10px) and a centered,
near-full-width pill (not the content-hugging default .btn).
============================================================= */
@media (max-width: 899px) {
.nav__inner.nav__inner { height: 66px; min-height: 0; }
.mobile-menu.mobile-menu { top: 66px; }
}
.mobile-menu__cta.mobile-menu__cta { padding: 32px var(--pad-h) 0; }
.mobile-menu__cta .btn.btn { width: 100%; justify-content: center; padding: 18px 28px; }
/* =============================================================
FOOTER — NATIVE ELEMENTOR BRIDGE (Theme Builder footer id 340)
Native atomic rebuild of the static footer using the central
.footer-* classes. Same model as the NAV bridge: skin (bg / type /
color / the separator border) wins from global.css; the box-model
(padding / gap / grid / width) is re-asserted here because Elementor's
atomic base clobbers it. Col 1 = logo + newsletter (WPForms 337);
cols 2-4 = Services / Company / Resources. The thin bottom separator
is the central .footer-grid border-bottom (matches blog.html).
============================================================= */
/* Root section padding + kill the atomic 10px padding on footer containers */
.footer.footer { padding: 72px var(--pad-h) 40px; }
.footer-grid.footer-grid > *, .footer-newsletter.footer-newsletter,
.footer-bottom.footer-bottom, .footer-legal.footer-legal { padding: 0; }
/* Grid: gap + the separator line + spacing that Elementor drops */
.footer-grid.footer-grid { gap: 40px 32px; padding-bottom: 56px; margin-bottom: 32px; border-bottom: 1px solid var(--c-border); }
/* Logo (v3 image: _css_classes lands on the widget wrapper) */
.footer-logo-img .elementor-widget-container { display: block; }
.footer-logo-img img { display: block; height: 40px; width: auto; max-width: none; margin: 0; }
/* Column label + newsletter heading */
.footer-col-label.footer-col-label { margin: 0 0 18px; }
.footer-newsletter-label.footer-newsletter-label { font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--c-navy); margin: 80px 0 3px; max-width: none; }
/* Link columns: central flex-column + gap; reset the atomic box */
/* Links: reset .footer-links' OWN atomic 10px padding (it's a grandchild of
.footer-grid, so the ">*" reset above didn't reach it) so the links line up
under the column label; left-align the atomic items. */
.footer-links.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 0; }
.footer-links.footer-links > a { width: auto; padding: 0; justify-content: flex-start; }
/* Bottom bar: atomic children default to width:100% → they wrapped and stacked
on the left. width:auto lets space-between put © left / legal right (desktop). */
.footer-bottom.footer-bottom { gap: 12px 24px; }
.footer-bottom.footer-bottom > * { width: auto; }
.footer-copy.footer-copy { margin: 0; }
.footer-legal.footer-legal { display: flex; flex-direction: row; gap: 20px; }
.footer-legal.footer-legal > a { width: auto; padding: 0; }
/* Newsletter (WPForms 337) as an attached input-group pill (email input + navy
Submit inside ONE rounded border), matching the reference. "Modern" markup is
ID-scoped, so we override under #wpforms-337 with !important. Only the email
field shows — every other field (incl. the stray text field_2) is hidden. */
.footer-newsletter .wpforms-container { margin: 0; max-width: 440px; }
#wpforms-337 .wpforms-field { display: none !important; }
#wpforms-337 .wpforms-field-email { display: block !important; padding: 0 !important; margin: 0 !important; }
#wpforms-337 .wpforms-field-label, #wpforms-337 .wpforms-required-label { display: none !important; }
#wpforms-337 form.wpforms-form { display: flex !important; align-items: center; gap: 0; max-width: 440px; background: #ffffff; border: 1px solid var(--c-border); border-radius: 100px; padding: 5px 5px 5px 6px; box-shadow: 0 1px 2px rgba(4,30,66,0.04); }
#wpforms-337 .wpforms-field-container { flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; }
#wpforms-337 .wpforms-field-email input { width: 100% !important; height: auto !important; border: 0 !important; background: transparent !important; padding: 11px 18px !important; border-radius: 100px !important; box-shadow: none !important; color: var(--c-navy) !important; font-family: var(--font) !important; font-size: 14px !important; }
#wpforms-337 .wpforms-field-email input::placeholder { color: var(--c-text-muted) !important; opacity: 1; }
#wpforms-337 .wpforms-submit-container { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; display: flex; }
#wpforms-337 button.wpforms-submit { height: auto !important; padding: 13px 28px !important; border: 0 !important; border-radius: 100px !important; background: var(--c-navy) !important; color: #ffffff !important; font-family: var(--font) !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; transition: filter 0.15s var(--ease); }
#wpforms-337 button.wpforms-submit:hover { filter: brightness(1.18) !important; }
/* Social icons (LinkedIn / Facebook): atomic v4 can't emit inline SVG, so each
icon is a hidden glyph span painted with a mask-image data URI; grey by
default, brand-coloured on hover. Placeholder # hrefs — linked later. */
.footer-social.footer-social { display: flex; flex-direction: row; align-items: center; gap: 16px; margin-top: 22px; padding: 0; }
.footer-social.footer-social > a { width: auto; padding: 0; }
.footer-social__link.footer-social__link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.footer-social__icon.footer-social__icon { display: inline-block; width: 21px; height: 21px; font-size: 0; line-height: 0; background-color: var(--c-text-muted); transition: background-color 150ms var(--ease); -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
.footer-social__icon--li { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M20.45%2020.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85%200-2.14%201.45-2.14%202.94v5.67H9.35V9h3.41v1.56h.05c.48-.9%201.64-1.85%203.37-1.85%203.6%200%204.27%202.37%204.27%205.45v6.29zM5.34%207.43a2.06%202.06%200%201%201%200-4.13%202.06%202.06%200%200%201%200%204.13zM7.12%2020.45H3.56V9h3.56v11.45zM22.22%200H1.77C.79%200%200%20.77%200%201.72v20.56C0%2023.23.79%2024%201.77%2024h20.45c.98%200%201.78-.77%201.78-1.72V1.72C24%20.77%2023.2%200%2022.22%200z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M20.45%2020.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85%200-2.14%201.45-2.14%202.94v5.67H9.35V9h3.41v1.56h.05c.48-.9%201.64-1.85%203.37-1.85%203.6%200%204.27%202.37%204.27%205.45v6.29zM5.34%207.43a2.06%202.06%200%201%201%200-4.13%202.06%202.06%200%200%201%200%204.13zM7.12%2020.45H3.56V9h3.56v11.45zM22.22%200H1.77C.79%200%200%20.77%200%201.72v20.56C0%2023.23.79%2024%201.77%2024h20.45c.98%200%201.78-.77%201.78-1.72V1.72C24%20.77%2023.2%200%2022.22%200z'/%3E%3C/svg%3E"); }
.footer-social__icon--fb { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M24%2012.07C24%205.4%2018.63%200%2012%200S0%205.4%200%2012.07C0%2018.1%204.39%2023.1%2010.13%2024v-8.44H7.08v-3.49h3.05V9.41c0-3.02%201.79-4.69%204.53-4.69%201.31%200%202.68.24%202.68.24v2.97h-1.51c-1.49%200-1.96.93-1.96%201.89v2.26h3.33l-.53%203.49h-2.8V24C19.61%2023.1%2024%2018.1%2024%2012.07z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M24%2012.07C24%205.4%2018.63%200%2012%200S0%205.4%200%2012.07C0%2018.1%204.39%2023.1%2010.13%2024v-8.44H7.08v-3.49h3.05V9.41c0-3.02%201.79-4.69%204.53-4.69%201.31%200%202.68.24%202.68.24v2.97h-1.51c-1.49%200-1.96.93-1.96%201.89v2.26h3.33l-.53%203.49h-2.8V24C19.61%2023.1%2024%2018.1%2024%2012.07z'/%3E%3C/svg%3E"); }
.footer-social__link.footer-social__link:hover .footer-social__icon--li { background-color: #0A66C2; }
.footer-social__link.footer-social__link:hover .footer-social__icon--fb { background-color: #1877F2; }
/* Social icons — corrections: the SVG masks now carry width/height (without
which mask-image renders as a blank grey box); Instagram added (3 icons:
IG / FB / LI); Instagram hover colour. Also kills the WPForms auto-injected
field_2 — a stray "Email" text field NOT in the form config (WPForms adds it
at render); a double-ID selector (2,0,0) beats WPForms' own field CSS. */
#wpforms-337 #wpforms-337-field_2-container { display: none !important; }
/* Footer social — REBUILT in the WP editor as native Elementor Social Icons
widgets (Facebook / Instagram / LinkedIn, Font Awesome), one per
.footer-social__link div. These rules come LATER in the cascade (so they win
over the dead mask-based rules above) and strip Elementor's default
coloured-circle chrome down to a bare icon: grey by default, brand-coloured on
hover — applies on the front AND in the editor preview (same enqueue). */
.footer-social.footer-social { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.footer-social.footer-social > * { width: auto; height: auto; padding: 0; }
.footer-social .footer-social__link.footer-social__link { width: auto; height: auto; padding: 0; }
.footer-social .elementor-widget-social-icons { margin: 0; }
.footer-social .elementor-social-icons-wrapper { display: flex; margin: 0; padding: 0; }
.footer-social .elementor-grid, .footer-social .elementor-grid-item { margin: 0; padding: 0; }
.footer-social .elementor-social-icon {
--e-social-icon-icon-color: var(--c-text-muted);
background-color: transparent !important; background-image: none !important;
width: 24px !important; height: 24px !important; min-width: 0 !important;
padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.footer-social .elementor-social-icon svg { width: 21px !important; height: 21px !important; fill: var(--c-text-muted); transition: fill 160ms var(--ease); }
.footer-social .elementor-social-icon i { font-size: 21px; color: var(--c-text-muted); transition: color 160ms var(--ease); }
.footer-social .elementor-social-icon:hover { background-color: transparent !important; }
.footer-social .elementor-social-icon-facebook:hover svg { fill: #1877F2; }
.footer-social .elementor-social-icon-facebook:hover i { color: #1877F2; }
.footer-social .elementor-social-icon-instagram:hover svg { fill: #E4405F; }
.footer-social .elementor-social-icon-instagram:hover i { color: #E4405F; }
.footer-social .elementor-social-icon-linkedin:hover svg { fill: #0A66C2; }
.footer-social .elementor-social-icon-linkedin:hover i { color: #0A66C2; }
/* (Legacy mask rules below target .footer-social__icon--* which no longer exist
after the editor rebuild — kept inert, superseded by the rules above.) */
.footer-social__link.footer-social__link:hover .footer-social__icon--ig { background-color: #E4405F; }
.footer-social__icon--ig { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202.16c3.2%200%203.58.01%204.85.07%201.17.05%201.8.25%202.23.41.56.22.96.48%201.38.9.42.42.68.82.9%201.38.16.42.36%201.06.41%202.23.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.05%201.17-.25%201.8-.41%202.23-.22.56-.48.96-.9%201.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68%201.38-.9.42-.16%201.06-.36%202.23-.41%201.27-.06%201.65-.07%204.85-.07M12%200C8.74%200%208.33.01%207.05.07%205.78.13%204.9.33%204.14.63c-.79.31-1.46.72-2.13%201.38C1.35%202.68.94%203.35.63%204.14.33%204.9.13%205.78.07%207.05.01%208.33%200%208.74%200%2012s.01%203.67.07%204.95c.06%201.27.26%202.15.56%202.91.31.79.72%201.46%201.38%202.13.67.66%201.34%201.07%202.13%201.38.76.3%201.64.5%202.91.56C8.33%2023.99%208.74%2024%2012%2024s3.67-.01%204.95-.07c1.27-.06%202.15-.26%202.91-.56.79-.31%201.46-.72%202.13-1.38.66-.67%201.07-1.34%201.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.31-.79-.72-1.46-1.38-2.13-.67-.66-1.34-1.07-2.13-1.38-.76-.3-1.64-.5-2.91-.56C15.67.01%2015.26%200%2012%200zm0%205.84a6.16%206.16%200%20100%2012.32%206.16%206.16%200%20000-12.32zM12%2016a4%204%200%20110-8%204%204%200%20010%208zm6.4-10.85a1.44%201.44%200%20100%202.88%201.44%201.44%200%20000-2.88z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202.16c3.2%200%203.58.01%204.85.07%201.17.05%201.8.25%202.23.41.56.22.96.48%201.38.9.42.42.68.82.9%201.38.16.42.36%201.06.41%202.23.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.05%201.17-.25%201.8-.41%202.23-.22.56-.48.96-.9%201.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68%201.38-.9.42-.16%201.06-.36%202.23-.41%201.27-.06%201.65-.07%204.85-.07M12%200C8.74%200%208.33.01%207.05.07%205.78.13%204.9.33%204.14.63c-.79.31-1.46.72-2.13%201.38C1.35%202.68.94%203.35.63%204.14.33%204.9.13%205.78.07%207.05.01%208.33%200%208.74%200%2012s.01%203.67.07%204.95c.06%201.27.26%202.15.56%202.91.31.79.72%201.46%201.38%202.13.67.66%201.34%201.07%202.13%201.38.76.3%201.64.5%202.91.56C8.33%2023.99%208.74%2024%2012%2024s3.67-.01%204.95-.07c1.27-.06%202.15-.26%202.91-.56.79-.31%201.46-.72%202.13-1.38.66-.67%201.07-1.34%201.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.31-.79-.72-1.46-1.38-2.13-.67-.66-1.34-1.07-2.13-1.38-.76-.3-1.64-.5-2.91-.56C15.67.01%2015.26%200%2012%200zm0%205.84a6.16%206.16%200%20100%2012.32%206.16%206.16%200%20000-12.32zM12%2016a4%204%200%20110-8%204%204%200%20010%208zm6.4-10.85a1.44%201.44%200%20100%202.88%201.44%201.44%200%20000-2.88z'/%3E%3C/svg%3E"); }
.footer-social__icon--fb { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M24%2012.07C24%205.4%2018.63%200%2012%200S0%205.4%200%2012.07C0%2018.1%204.39%2023.1%2010.13%2024v-8.44H7.08v-3.49h3.05V9.41c0-3.02%201.79-4.69%204.53-4.69%201.31%200%202.68.24%202.68.24v2.97h-1.51c-1.49%200-1.96.93-1.96%201.89v2.26h3.33l-.53%203.49h-2.8V24C19.61%2023.1%2024%2018.1%2024%2012.07z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M24%2012.07C24%205.4%2018.63%200%2012%200S0%205.4%200%2012.07C0%2018.1%204.39%2023.1%2010.13%2024v-8.44H7.08v-3.49h3.05V9.41c0-3.02%201.79-4.69%204.53-4.69%201.31%200%202.68.24%202.68.24v2.97h-1.51c-1.49%200-1.96.93-1.96%201.89v2.26h3.33l-.53%203.49h-2.8V24C19.61%2023.1%2024%2018.1%2024%2012.07z'/%3E%3C/svg%3E"); }
.footer-social__icon--li { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M20.45%2020.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85%200-2.14%201.45-2.14%202.94v5.67H9.35V9h3.41v1.56h.05c.48-.9%201.64-1.85%203.37-1.85%203.6%200%204.27%202.37%204.27%205.45v6.29zM5.34%207.43a2.06%202.06%200%201%201%200-4.13%202.06%202.06%200%200%201%200%204.13zM7.12%2020.45H3.56V9h3.56v11.45zM22.22%200H1.77C.79%200%200%20.77%200%201.72v20.56C0%2023.23.79%2024%201.77%2024h20.45c.98%200%201.78-.77%201.78-1.72V1.72C24%20.77%2023.2%200%2022.22%200z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M20.45%2020.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85%200-2.14%201.45-2.14%202.94v5.67H9.35V9h3.41v1.56h.05c.48-.9%201.64-1.85%203.37-1.85%203.6%200%204.27%202.37%204.27%205.45v6.29zM5.34%207.43a2.06%202.06%200%201%201%200-4.13%202.06%202.06%200%200%201%200%204.13zM7.12%2020.45H3.56V9h3.56v11.45zM22.22%200H1.77C.79%200%200%20.77%200%201.72v20.56C0%2023.23.79%2024%201.77%2024h20.45c.98%200%201.78-.77%201.78-1.72V1.72C24%20.77%2023.2%200%2022.22%200z'/%3E%3C/svg%3E"); }
/* =============================================================
SINGLE POST — NATIVE ELEMENTOR BRIDGE (Theme Builder single id 343)
Native atomic rebuild of blog-post.html. Skin/typography come from the
centralized blog-post.css; box-model (grid/flex/padding/position) is
re-asserted here because Elementor's atomic base clobbers it. Interactive
parts are Elementor Pro widgets (theme-post-content, table-of-contents,
share-buttons, loop-grid) styled to the design.
============================================================= */
/* Hero: featured image (v3 image widget, dynamic) as background, navy overlay
(central ::before) above it, content on top. */
.post-hero.post-hero { position: relative; overflow: hidden; padding: 0 var(--pad-h); }
.post-hero__bg .elementor-widget-container, .post-hero__bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.post-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.post-hero.post-hero::before { z-index: 1; }
.post-hero__content.post-hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--max-w); margin-left: auto; margin-right: auto; padding: calc(clamp(40px, 5vw, 64px) + 66px) 0 clamp(48px, 6vw, 72px); }
.post-hero__meta.post-hero__meta { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
.post-hero__author.post-hero__author { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.post-hero__category.post-hero__category { display: inline-block; width: auto; font-size: 10px; letter-spacing: 0.08em; line-height: 1.4; padding: 3px 11px; margin-bottom: 28px; }
/* Article layout: main + sidebar grid */
.article-section.article-section { padding: clamp(48px, 6vw, 72px) var(--pad-h) var(--pad-v); }
.article-layout.article-layout { display: grid; grid-template-columns: 1fr; gap: 48px; max-width: var(--max-w); margin-left: auto; margin-right: auto; }
@media (min-width: 960px) { .article-layout.article-layout { grid-template-columns: 1fr 320px; gap: 64px; } }
.article-layout.article-layout > * { padding: 0; }
.article-body.article-body { min-width: 0; padding: 0; }
/* Body richtext (theme-post-content): the UiCore/Elementor kit tints the h2/h3
a light colour and resizes them, so re-assert the design-system scale + navy
at doubled specificity (+ !important on the props the theme forces) so the
article body matches blog-post.css. Paragraphs/lists already inherit fine but
are re-stated for a self-contained block. */
.article-body.article-body h2 { font-size: clamp(24px, 2.8vw, 32px) !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: var(--tracking); color: var(--c-navy) !important; margin: 48px 0 20px; }
.article-body.article-body h2:first-child { margin-top: 0; }
.article-body.article-body h3 { font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: var(--tracking); color: var(--c-navy) !important; margin: 36px 0 16px; }
.article-body.article-body h2 + h3 { margin-top: 24px; }
.article-body.article-body p { font-size: 16px; line-height: 1.6; color: var(--c-text-muted); margin: 0 0 24px; }
.article-body.article-body p:last-child { margin-bottom: 0; }
.article-body.article-body ul, .article-body.article-body ol { margin: 0 0 24px; padding-left: 24px; }
.article-body.article-body ul { list-style: disc; }
.article-body.article-body ol { list-style: decimal; }
.article-body.article-body li { font-size: 16px; line-height: 1.6; color: var(--c-text-muted); margin-bottom: 8px; }
.article-body.article-body strong { font-weight: 600; color: var(--c-navy); }
.article-sidebar.article-sidebar { display: none; padding: 0; }
@media (min-width: 960px) { .article-sidebar.article-sidebar { display: block; } }
.sidebar-sticky.sidebar-sticky { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 32px; padding: 0; }
.sidebar-toc.sidebar-toc, .sidebar-cta.sidebar-cta, .sidebar-cta__content.sidebar-cta__content { padding: 0; }
.sidebar-cta.sidebar-cta { padding: 28px; }
/* Table of Contents widget -> match the STATIC .sidebar-toc reference exactly
(blog-post.html): plain card + "In this article" label (sentence-case navy
bold) + a flat link list with a thin FULL-WIDTH separator between rows (last
top-level row none), sub-headings indented 16px. No inner box / rail.
Notes: the "bullets" are inline