/* Shared pieces for the Six Mile Web example sites (/demo/, /demo-fitness/).
   Loads after /styles.css; each example adds its own theme file. */
.demo-bar{background:#11161c;border-bottom:1px solid rgba(255,255,255,.12);color:#e9edf2;font-size:.82rem;text-align:center;padding:8px 0}
.demo-bar a{color:#fff;font-weight:600}
.demo-bar strong{color:var(--accent)}
.client-header{position:relative;z-index:5;border-bottom:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.client-header .header-inner{padding-top:12px;padding-bottom:12px}
.client-logo{width:44px;height:44px}
.client-nav{order:3;width:100%;justify-content:flex-start;gap:2px;flex-wrap:wrap}
.client-nav a{font-size:.9rem}
.client-header .client-call{display:none}
.photo{display:block;position:relative;overflow:hidden;border-radius:var(--radius)}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.tag{display:inline-block;border-radius:999px;padding:1px 10px;font-size:.76rem;font-weight:700;margin-right:6px;background:rgba(255,255,255,.08);border:1px solid var(--glass-edge);color:var(--accent)}
.stars{color:var(--accent);font-size:1.1rem;letter-spacing:3px}
.review blockquote{margin:10px 0;font-size:1rem;color:var(--ink)}
.review figcaption{color:var(--muted);font-size:.88rem}
.form{display:flex;flex-direction:column;gap:6px}
.form label{font-weight:600;font-size:.93rem;margin-top:8px}
.form input,.form textarea,.form select{font:inherit;color:var(--ink);background:rgba(0,0,0,.35);padding:12px 14px;border:1px solid rgba(255,255,255,.2);border-radius:12px;width:100%;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.form button{margin-top:16px;font-family:inherit}
.small{font-size:.82rem;color:var(--muted);margin:6px 0 0}
.client-footer{border-top:1px solid var(--glass-edge);color:var(--muted);padding:26px 0;font-size:.88rem}
.client-footer p{margin:4px 0}
.client-footer a{color:#fff}
.credits{font-size:.76rem;opacity:.85}
.nav a[aria-current="page"]{background:rgba(191,232,220,.12);color:#fff}
.ex-label{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:999px;border:1px dashed var(--accent);color:var(--accent);margin-bottom:14px}
@media (min-width:900px){
  .client-nav{order:0;width:auto}
  .client-header .client-call{display:inline-block;padding:10px 18px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Example-site nav on phones: one swipeable row under the logo (not part of the Six Mile Web menu toggle) */
@media (max-width:899px){
  .client-header nav{order:3;width:100%}
  .client-nav,.has-nav-js .client-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:0;justify-content:flex-start;scrollbar-width:none}
  .client-nav a,.has-nav-js .client-nav a{display:flex;align-items:center;min-height:44px;padding:8px 10px;font-size:.9rem;white-space:nowrap}
}