/* HourlyVPS shared components, on every page: chips, badges, FAQ, breadcrumbs, callout.
   The page sections (rules, spec sheet, CTA band, sticky CTA, blog reads) are in sections.css
   (every view except the blog's own), the pricing widgets (tape, plan table, ladder, duration
   cards) in widgets.css (only views that print them): see hvps_theme_css_bundles() in inc/assets.php. */

/* Chips and badges */
.chip{display:inline-flex;align-items:center;min-height:44px;padding:.375rem .875rem;border:1.5px solid var(--muted);border-radius:var(--r);background:transparent;color:var(--ink);font-size:.9375rem;font-weight:600}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.badge{display:inline-block;padding:0 .4375rem;border:1px solid var(--muted);border-radius:2px;color:var(--muted);font-size:.75rem;font-weight:600;line-height:1.5;vertical-align:.1em}
.badge--ded{border-color:var(--ink);color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq__item{margin:0;padding:0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none}
.faq__q{margin:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;padding:1.125rem 0;font-size:1.125rem;font-weight:600;line-height:1.35;cursor:pointer;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__icon{width:1.25rem;height:1.25rem;transition:transform .15s ease}
.faq__item[open] .faq__icon{transform:rotate(45deg)}
.faq__a{max-width:46rem;margin:0;padding-bottom:1.25rem}
.faq__a>*+*{margin-top:.75rem}

/* ---------- Breadcrumbs ---------- */
.crumbs{padding-top:1.25rem;font-size:.875rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"";width:1px;height:.9em;margin:0 .625rem;background:var(--notch);transform:skewX(-18deg)}
.crumbs a{display:inline-block;padding-block:.25rem;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{font-weight:550}

/* ---------- Callout ---------- */
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.875rem;padding:1rem 1.125rem;background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--ink);border-radius:var(--r)}
.callout--warning{border-left-color:var(--error)}
.callout--tip{border-left-color:var(--cap)}
.callout__icon{width:1.375rem;height:1.375rem;margin-top:.125rem}
.callout--warning .callout__icon{color:var(--error)}
.callout--tip .callout__icon{color:var(--cap)}
.callout__label{font-weight:650}
.callout__body>*+*{margin-top:.5rem}

/* ---------- Forced colours (Windows contrast themes) ---------- */
@media (forced-colors:active){
.chip[aria-pressed=true]{forced-color-adjust:none;background:Highlight;background:SelectedItem;color:HighlightText;color:SelectedItemText}
.badge{border-color:CanvasText}
}