/* Shared shell. No universal form reset or third-party widget normalization. */
body.arb-demo-site {
  margin: 0;
  background: var(--arb-demo-bg);
  color: var(--arb-demo-ink);
  font-family: var(--arb-demo-body-font);
  font-size: 15px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.arb-demo-site a { color: var(--arb-demo-cta); text-underline-offset: .22em; }
body.arb-demo-site a:hover { color: var(--arb-demo-ink); }
body.arb-demo-site :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--arb-demo-cta);
  outline-offset: 3px;
}
body.arb-demo-site :where(h1, h2, h3, h4, h5, h6) {
  color: var(--arb-demo-ink);
  font-family: var(--arb-demo-display-font);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.025em;
}
body.arb-demo-site h1 { font-size: clamp(32px, 4vw, 44px); }
body.arb-demo-site h2 { font-size: 28px; }
body.arb-demo-site h3 { font-size: 22px; }
.arb-demo-header, .arb-demo-header *, .arb-demo-footer, .arb-demo-footer *,
.arb-demo-container, .arb-demo-content-card, .arb-demo-page-heading { box-sizing: border-box; }
.arb-demo-container { max-width: calc(1120px + var(--arb-demo-gutter) + var(--arb-demo-gutter)); width: 100%; margin-inline: auto; padding-inline: var(--arb-demo-gutter); }
.arb-demo-main { min-height: 52vh; padding-block: 48px 64px; }
.arb-demo-main:focus { outline-offset: -4px; }
.arb-demo-page-heading { margin-block-end: 32px; }
.arb-demo-page-heading h1 { margin: 0 0 12px; }
.arb-demo-entry-content { overflow-wrap: break-word; }
.arb-demo-entry-content > :first-child { margin-block-start: 0; }
.arb-demo-entry-content :where(img, video, iframe) { max-width: 100%; }
.arb-demo-entry-content img { height: auto; }
.arb-demo-entry-content figure { max-width: 100%; margin-inline: 0; }
.arb-demo-entry-content :where(p, ul, ol) { margin-block: 0 0 1.2em; }
.arb-demo-entry-content :where(h2, h3, h4) { margin-block: 1.3em .6em; }
.arb-demo-entry-content :where(pre, table) { max-width: 100%; }
.arb-demo-entry-content pre { overflow: auto; }
.arb-demo-content-card {
  padding: 28px;
  border: 1px solid var(--arb-demo-border);
  border-radius: var(--arb-demo-radius-lg);
  background: var(--arb-demo-surface);
  box-shadow: var(--arb-demo-shadow);
}
.arb-demo-content-card h2 { margin-top: 0; }
.arb-demo-content-card h2 a { text-decoration: none; }
.arb-demo-post-list { display: grid; gap: 24px; margin-bottom: 32px; }
.arb-demo-context { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-block-end: 26px; font-size: 14px; }
.arb-demo-context a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.arb-demo-eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: 12px; color: var(--arb-demo-muted); }
body.arb-demo-site .arb-demo-button,
body.arb-demo-site .arb-demo-search-form button,
body.arb-demo-site .arb-demo-comments .submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 11px 22px;
  border: 1px solid var(--arb-demo-cta); border-radius: var(--arb-demo-radius-pill);
  background: var(--arb-demo-cta); color: #fff;
  font: 500 14px/1.5 var(--arb-demo-body-font); text-decoration: none; cursor: pointer;
}
body.arb-demo-site .arb-demo-button:hover { background: var(--arb-demo-header); color: #fff; }
.arb-demo-search-form label { display: block; margin-bottom: 8px; }
.arb-demo-search-form > div { display: flex; flex-wrap: wrap; gap: 12px; }
.arb-demo-search-form input,
.arb-demo-comments input:not([type="checkbox"]):not([type="submit"]),
.arb-demo-comments textarea {
  box-sizing: border-box; max-width: 100%; min-height: 48px;
  padding: 10px 14px; border: 1px solid var(--arb-demo-border);
  border-radius: var(--arb-demo-radius-sm); background: #fff;
  color: var(--arb-demo-ink); font: inherit; font-size: 16px;
}
.arb-demo-comments textarea { width: 100%; }
.arb-demo-comments .comment-list { padding-left: 24px; }
.arb-demo-comments .comment-body { padding-block: 20px; border-bottom: 1px solid var(--arb-demo-border); }
.arb-demo-pagination, .arb-demo-main .nav-links { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 24px; }
.arb-demo-header [hidden] { display: none !important; }
body.arb-demo-site .arb-demo-skip-link {
  position: fixed; z-index: 100000; top: 10px; left: 16px; transform: translateY(-180%);
  padding: 12px 18px; border-radius: 8px; background: #fff; color: var(--arb-demo-ink);
}
body.arb-demo-site .arb-demo-skip-link:focus { transform: translateY(0); }
body.arb-demo-site .screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0;
  overflow: hidden; position: absolute !important; word-wrap: normal !important;
}
body.arb-demo-site .screen-reader-text:focus {
  clip: auto !important; clip-path: none; height: auto; width: auto; margin: 0;
  padding: 12px; background: #fff; color: var(--arb-demo-ink); z-index: 100000;
}

/* The supplied 68px header, with a single navigation tree. */
.arb-demo-header {
  position: sticky; top: var(--arb-demo-header-offset); z-index: 100;
  background: rgba(51,95,95,.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(198,220,220,.12);
}
body.arb-demo-site.admin-bar { --arb-demo-header-offset: 32px; }
.arb-demo-nav-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; min-height: 68px; }
body.arb-demo-site .arb-demo-brand { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
body.arb-demo-site .arb-demo-brand-mark { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: linear-gradient(135deg, #9FC3C3, #4F8F8F); }
.arb-demo-brand-mark img { display: block; width: 32px; height: 36px; object-fit: contain; }
.arb-demo-brand .custom-logo-link { display: inline-flex; }
.arb-demo-brand .custom-logo { display: block; width: auto; max-width: 76px; max-height: 38px; }
body.arb-demo-site .arb-demo-brand-name { color: #fff; font-family: var(--arb-demo-display-font); font-size: 21px; line-height: 1.2; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.arb-demo-brand-name span { color: #9FC3C3; }
.arb-demo-navigation { flex: 1; }
.arb-demo-nav-links, .arb-demo-nav-submenu { padding: 0; margin: 0; list-style: none; }
.arb-demo-nav-links { display: flex; align-items: start; flex-wrap: wrap; gap: 8px; }
.arb-demo-nav-group { position: relative; }
body.arb-demo-site .arb-demo-nav-links > li > a,
.arb-demo-nav-links > li > button,
.arb-demo-nav-fallback {
  display: flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 8px 12px; border: 0; border-radius: 8px; background: transparent;
  color: #E2EEEE; font: 500 14px/1.5 var(--arb-demo-body-font); letter-spacing: .01em; text-decoration: none;
}
.arb-demo-nav-links button { cursor: pointer; }
body.arb-demo-site .arb-demo-nav-links > li > a:hover,
.arb-demo-nav-links > li > button:hover,
.arb-demo-nav-links > li > button[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.08); }
.arb-demo-chevron { flex-shrink: 0; transition: transform .2s ease; }
.arb-demo-nav-links > li > button[aria-expanded="true"] .arb-demo-chevron { transform: rotate(180deg); }
.arb-demo-nav-submenu { padding: 8px; min-width: 228px; border: 1px solid rgba(198,220,220,.16); border-radius: 16px; background: var(--arb-demo-dark-gradient); }
body.arb-demo-site .arb-demo-nav-submenu a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 12px; border-radius: 8px; color: #E2EEEE; font-size: 13.5px; text-decoration: none; }
body.arb-demo-site .arb-demo-nav-submenu a:hover { color: #fff; background: rgba(255,255,255,.08); }
.arb-demo-link-icon { width: 18px; flex-shrink: 0; color: var(--arb-demo-accent); text-align: center; }
.arb-demo-nav-actions { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
body.arb-demo-site .arb-demo-cart-link { color: #E2EEEE; min-height: 44px; padding: 10px 8px; text-decoration: none; }
body.arb-demo-site .arb-demo-buy-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px; background: #E2EEEE; color: #243F3F; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
body.arb-demo-site .arb-demo-buy-link:hover { background: #fff; color: #243F3F; }
.arb-demo-nav-toggle { align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px; border: 1px solid rgba(198,220,220,.4); border-radius: 8px; background: transparent; color: #fff; font: 500 14px/1.5 var(--arb-demo-body-font); cursor: pointer; }
.arb-demo-burger { display: grid; gap: 4px; width: 20px; }
.arb-demo-burger span { display: block; height: 2px; background: currentColor; }
.arb-demo-header :where(a, button):focus-visible, .arb-demo-footer a:focus-visible { outline-color: #E2EEEE; }

/* No-JS navigation is visible and naturally scrolls; enhancement restores compact shell. */
.arb-demo-header:not(.is-enhanced) { position: static; }
.arb-demo-header:not(.is-enhanced) .arb-demo-nav-wrap { padding-block: 16px; align-items: start; }
.arb-demo-header.is-enhanced .arb-demo-navigation { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.arb-demo-header.is-enhanced .arb-demo-nav-links { align-items: center; flex-wrap: nowrap; }
.arb-demo-header.is-enhanced .arb-demo-nav-submenu { position: absolute; z-index: 1; top: 100%; right: 0; max-height: 70vh; overflow-y: auto; box-shadow: var(--arb-demo-shadow-deep); }

/* Five-column footer uses the source's 640px / 900px grid transitions. */
.arb-demo-footer { padding-block: 56px 32px; background: var(--arb-demo-ink); border-top: 1px solid rgba(198,220,220,.08); }
.arb-demo-footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
.arb-demo-footer-brand p { max-width: 30ch; margin: 16px 0 0; color: #B9CECE; font-size: 13.5px; line-height: 1.8; }
body.arb-demo-site .arb-demo-footer-column h2 { margin: 4px 0 16px; color: #C6DCDC; font: 600 11.5px/1.6 var(--arb-demo-body-font); letter-spacing: .09em; text-transform: uppercase; }
.arb-demo-footer-column ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
body.arb-demo-site .arb-demo-footer-column a { color: #B9CECE; font-size: 14px; text-decoration: none; }
body.arb-demo-site .arb-demo-footer a:hover { color: #fff; }
.arb-demo-footer-bottom { border-top: 1px solid rgba(198,220,220,.12); padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.arb-demo-footer-bottom p { margin: 0; color: #B9CECE; font-size: 13px; }
body.arb-demo-site .arb-demo-footer-bottom p a { color: #C6DCDC; }
.arb-demo-socials { display: flex; gap: 10px; }
body.arb-demo-site .arb-demo-socials a { width: 38px; height: 38px; border: 1px solid rgba(198,220,220,.24); border-radius: 10px; background: rgba(255,255,255,.06); color: #C6DCDC; display: flex; align-items: center; justify-content: center; font-size: 14px; text-decoration: none; }
@media (min-width: 640px) { .arb-demo-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .arb-demo-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }
@media (min-width: 768px) {
  .arb-demo-header.is-enhanced .arb-demo-nav-toggle { display: none; }
  .arb-demo-header.is-enhanced .arb-demo-nav-wrap { flex-wrap: nowrap; }
}
@media (min-width: 768px) and (max-width: 1120px) {
  .arb-demo-nav-wrap { padding-inline: 20px; gap: 12px; }
  .arb-demo-header.is-enhanced .arb-demo-navigation { gap: 8px; }
  .arb-demo-nav-links > li > button, body.arb-demo-site .arb-demo-nav-links > li > a { padding-inline: 8px; font-size: 13.5px; }
  body.arb-demo-site .arb-demo-buy-link { padding-inline: 15px; font-size: 13.5px; }
  .arb-demo-nav-actions { gap: 4px; }
}
@media (max-width: 782px) { body.arb-demo-site.admin-bar { --arb-demo-header-offset: 46px; } }
@media (max-width: 767px) {
  .arb-demo-nav-wrap { justify-content: space-between; gap: 0 12px; padding-inline: var(--arb-demo-gutter); }
  .arb-demo-header.is-enhanced .arb-demo-nav-toggle { display: inline-flex; }
  .arb-demo-header.is-enhanced .arb-demo-navigation, .arb-demo-header:not(.is-enhanced) .arb-demo-navigation { flex-basis: 100%; }
  .arb-demo-header.is-enhanced .arb-demo-navigation { display: block; max-height: calc(100dvh - 68px - var(--arb-demo-header-offset)); overflow-y: auto; padding-block: 10px 22px; }
  .arb-demo-nav-links, .arb-demo-header.is-enhanced .arb-demo-nav-links { display: block; }
  .arb-demo-nav-links > li { border-bottom: 1px solid rgba(198,220,220,.12); }
  .arb-demo-nav-links > li > button, body.arb-demo-site .arb-demo-nav-links > li > a { width: 100%; min-height: 48px; padding: 12px 0; justify-content: space-between; font-size: 15px; }
  .arb-demo-header.is-enhanced .arb-demo-nav-submenu { position: static; border: 0; border-radius: 8px; min-width: 0; box-shadow: none; max-height: none; }
  .arb-demo-nav-actions { padding-top: 16px; }
  .arb-demo-brand { min-height: 68px; }
}
@media (max-width: 600px) { body.arb-demo-site.admin-bar { --arb-demo-header-offset: 0px; } }
@media (max-width: 560px) {
  .arb-demo-main { padding-block: 32px 48px; }
  .arb-demo-content-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .arb-demo-chevron { transition: none; }
}
@media print {
  .arb-demo-header, .arb-demo-footer, .arb-demo-context, .arb-demo-skip-link { display: none; }
  .arb-demo-main { max-width: none; padding: 0; }
  body.arb-demo-site { background: #fff; }
}