/* ET EXPO site chrome - the ONE header and ONE footer of every public page (MGC-UI-001, Owner 2026-11-01).
 *
 * The markup lives in platform-persistence-core/src/main/resources/site-chrome/{header,footer}.html and is
 * emitted unchanged by every server-rendered page (PublicSiteChrome) and copied into every static page
 * (scripts/site-chrome/sync-static-chrome.mjs). These rules are the reference /services.html header and
 * footer, scoped to [data-site-chrome] so a page's own stylesheet cannot reshape them. Page content lines up
 * with them by using .site-shell (or .container): the same 1280px measure and 24px gutter.
 * Exempt: the Request a Quote pages keep their own header (Owner 2026-11-01).
 */
:root { --site-shell-max: var(--container-max, 1280px); --site-shell-pad: var(--container-pad, 24px); }

[data-site-chrome] .container,
.site-shell { box-sizing: border-box; width: 100%; max-width: var(--site-shell-max) !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--site-shell-pad) !important; padding-right: var(--site-shell-pad) !important; }

/* Header */
nav.navbar[data-site-chrome="header"] { position: sticky; top: 0; left: 0; width: 100%; z-index: 1000; padding: 16px 0; margin: 0;
  background: rgba(10,12,16,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle, #2a2f37);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif); box-sizing: border-box; }
/* The reference pages were laid out under a fixed bar (their hero starts 150px down); they keep it. */
body.site-chrome-fixed nav.navbar[data-site-chrome="header"] { position: fixed; }
[data-site-chrome="header"] .nav-flex { display: flex; justify-content: space-between; align-items: center; }
[data-site-chrome="header"] .logo { display: inline-block; }
[data-site-chrome="header"] .logo img { height: 26px; width: auto; display: block; }
[data-site-chrome="header"] .nav-left { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; flex: 0 0 auto; min-width: max-content; }
[data-site-chrome="header"] .nav-social { display: flex; align-items: center; gap: 13px; padding-left: 16px; border-left: 1px solid var(--border-subtle, #2a2f37); flex-wrap: nowrap; white-space: nowrap; flex: 0 0 auto; }
[data-site-chrome="header"] .nav-social a { color: var(--text-secondary, #a0aab5); font-size: 1rem; line-height: 1; text-decoration: none; transition: color .2s, transform .3s; }
[data-site-chrome="header"] .nav-social a:hover { color: var(--accent, #ff6b4a); transform: translateY(-2px); }
[data-site-chrome="header"] .nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
[data-site-chrome="header"] .nav-links a.link { position: relative; color: var(--text-secondary, #a0aab5); font-size: var(--text-sm, .9rem); text-decoration: none; transition: color .2s; }
[data-site-chrome="header"] .nav-links a.link.active,
[data-site-chrome="header"] .nav-links a.link:hover { color: var(--accent, #ff6b4a); }
[data-site-chrome="header"] .nav-links a.link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--accent, #ff6b4a); transition: width .3s; }
[data-site-chrome="header"] .nav-links a.link.active::after,
[data-site-chrome="header"] .nav-links a.link:hover::after { width: 100%; }
[data-site-chrome="header"] .nav-toggle { display: none; background: none; border: 0; color: var(--text-primary, #fff); font-size: 1.3rem; cursor: pointer; }

@media (max-width: 860px) {
  [data-site-chrome="header"] .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10,12,16,0.98); backdrop-filter: blur(12px); border-top: 1px solid var(--border-subtle, #2a2f37); border-bottom: 1px solid var(--border-subtle, #2a2f37); padding: 8px 0; }
  [data-site-chrome="header"] .nav-links.open { display: flex; }
  [data-site-chrome="header"] .nav-links a.link { padding: 14px 24px; }
  [data-site-chrome="header"] .nav-links a.btn, [data-site-chrome="header"] .nav-links a.btn.sm { margin: 10px 24px 4px; justify-content: center; }
  [data-site-chrome="header"] .nav-toggle { display: block; }
}
@media (max-width: 767px) {
  [data-site-chrome="header"] .nav-flex { min-height: 44px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; }
  [data-site-chrome="header"] .nav-left { display: contents; }
  [data-site-chrome="header"] .nav-left .logo { grid-column: 1; grid-row: 1; align-self: center; width: fit-content; }
  [data-site-chrome="header"] .nav-social { grid-column: 1 / -1; grid-row: 2; width: 100%; display: flex; justify-content: center; min-width: 0; gap: 14px; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--border-subtle, #2a2f37); }
  [data-site-chrome="header"] .nav-social a { flex: 0 0 36px; width: 36px; min-height: 36px; display: inline-grid; place-items: center; text-align: center; font-size: .95rem; }
  [data-site-chrome="header"] .nav-toggle { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; grid-column: 2; grid-row: 1; margin-left: auto; }
}

/* Footer - one width everywhere: the header's container. Pages used to narrow it to their own column
   (--et-public-shell-max 1080/1100/1120), which is exactly what put it out of line with the header. */
footer[data-site-chrome="footer"] { background: var(--bg-footer, #07090c); padding: 48px 0 32px; font-family: var(--font-sans, 'Inter', system-ui, sans-serif); }
footer[data-site-chrome="footer"] > .container { max-width: var(--site-shell-max) !important; }
footer[data-site-chrome="footer"] .footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; margin-bottom: 32px; }
footer[data-site-chrome="footer"] .footer-col { flex: 1 1 180px; }
footer[data-site-chrome="footer"] .footer-col h3 { font-size: var(--text-base, 1rem); font-weight: 500; margin: 0 0 16px; color: var(--text-primary, #fff); }
footer[data-site-chrome="footer"] .footer-col p { color: var(--text-secondary, #a0aab5); font-size: var(--text-xs, .85rem); line-height: 1.7; margin-top: 12px; }
footer[data-site-chrome="footer"] .footer-col a { color: inherit; text-decoration: none; }
footer[data-site-chrome="footer"] .footer-col a:hover { color: var(--accent, #ff6b4a); }
footer[data-site-chrome="footer"] .social-row { display: flex; gap: 10px; margin-top: 18px; }
footer[data-site-chrome="footer"] .social-row a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border-subtle, #2a2f37); color: var(--text-secondary, #a0aab5); }
footer[data-site-chrome="footer"] .social-row a:hover { color: var(--accent, #ff6b4a); border-color: var(--accent, #ff6b4a); }
footer[data-site-chrome="footer"] hr { border: 0; border-top: 1px solid var(--border-subtle, #2a2f37); margin: 32px 0; }
footer[data-site-chrome="footer"] .copyright { font-size: .75rem; color: var(--text-secondary, #a0aab5); }

/* Content frame (Owner 2026-11-01: "页脚要和边框线对齐"). Every page family used to pick its own column - 760, 820, 920,
   1000, 1040, 1080, 1100, 1120, 1180px - so its borders never met the header's and footer's edges. The outer content
   frame of each family is now the header/footer frame; reading text inside keeps a comfortable measure, left-aligned on
   that frame, while pictures, tables and bordered panels run to its edges. */
main.wrap,
.et-shell-1080 .wrap, .et-shell-1120 .wrap,
:where(body) .container,
.bp-page .bp-shell, .bp-page .package-detail-shell,
main.ty-wrap,
.blog-article .ba-wrap, .cn-page .cn-wrap,
article.lb-content, nav[data-site-chrome] ~ .customer-shell {
  box-sizing: border-box; width: 100%; max-width: var(--site-shell-max) !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--site-shell-pad) !important; padding-right: var(--site-shell-pad) !important;
}
.blog-article .ba-body, .blog-article .ba-head { max-width: var(--site-shell-max) !important; }
.blog-article .ba-body > :is(p, ul, ol, h2, h3, h4, blockquote),
.blog-article .ba-head > :is(p, h1),
article.lb-content :is(p, li), .cn-page .cn-wrap > :is(p, .cn-lead) { max-width: 82ch; }
/* A bordered frame is itself the line: its border, not its text, sits on the header/footer edges. */
article.lb-content { max-width: calc(var(--site-shell-max) - 2 * var(--site-shell-pad)) !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Expo Services: the ordering app keeps its own links (ET Platform, Logout) as a bar under the site header, without a
   second logo, and its panels run the full frame. */
nav[data-site-chrome] ~ .customer-shell .customer-nav { justify-content: flex-end; padding-bottom: 24px; }
nav[data-site-chrome] ~ .customer-shell .customer-nav > a:first-child { display: none; }
nav[data-site-chrome] ~ .customer-shell .customer-main { max-width: none; }
/* A page without its own reset kept the browser's 8px body margin, which pulled the header's rule line in from the edges. */
body:has(> nav[data-site-chrome="header"]) { margin: 0; }