/* ==================================================
   REUSABLE COMPONENTS
   Purpose:
   The shared component library — buttons, badges, cards,
   breadcrumbs, brand lockup, icon tiles, stat blocks,
   CTA bands, tag lists, the sidebar conversion card and
   the floating WhatsApp action. Page-type specific
   styling lives in its own stylesheet.
================================================== */

/* ==================================================
   ICON MASK REGISTRY
   Purpose:
   Lets any element pick a UI icon with a data-icon
   attribute — <span class="btn__icon" data-icon="arrow-right">
   — with no inline style and no inline SVG.

   Each name maps to an external SVG file through a custom
   property; one generic rule then applies it as a mask so
   the glyph is painted in currentColor and adapts to light
   and dark surfaces automatically.
================================================== */

[data-icon] {
  mask-image: var(--icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

[data-icon="menu"]            { --icon-url: url("../assets/icons/ui/menu.svg"); }
[data-icon="close"]           { --icon-url: url("../assets/icons/ui/close.svg"); }
[data-icon="search"]          { --icon-url: url("../assets/icons/ui/search.svg"); }
[data-icon="arrow-right"]     { --icon-url: url("../assets/icons/ui/arrow-right.svg"); }
[data-icon="arrow-up-right"]  { --icon-url: url("../assets/icons/ui/arrow-up-right.svg"); }
[data-icon="chevron-down"]    { --icon-url: url("../assets/icons/ui/chevron-down.svg"); }
[data-icon="chevron-right"]   { --icon-url: url("../assets/icons/ui/chevron-right.svg"); }
[data-icon="chevron-left"]    { --icon-url: url("../assets/icons/ui/chevron-left.svg"); }
[data-icon="check"]           { --icon-url: url("../assets/icons/ui/check.svg"); }
[data-icon="plus"]            { --icon-url: url("../assets/icons/ui/plus.svg"); }
[data-icon="minus"]           { --icon-url: url("../assets/icons/ui/minus.svg"); }
[data-icon="phone"]           { --icon-url: url("../assets/icons/ui/phone.svg"); }
[data-icon="mail"]            { --icon-url: url("../assets/icons/ui/mail.svg"); }
[data-icon="location"]        { --icon-url: url("../assets/icons/ui/location.svg"); }
[data-icon="clock"]           { --icon-url: url("../assets/icons/ui/clock.svg"); }
[data-icon="whatsapp"]        { --icon-url: url("../assets/icons/ui/whatsapp.svg"); }
[data-icon="shield"]          { --icon-url: url("../assets/icons/ui/shield.svg"); }
[data-icon="rocket"]          { --icon-url: url("../assets/icons/ui/rocket.svg"); }
[data-icon="users"]           { --icon-url: url("../assets/icons/ui/users.svg"); }
[data-icon="layers"]          { --icon-url: url("../assets/icons/ui/layers.svg"); }
[data-icon="database"]        { --icon-url: url("../assets/icons/ui/database.svg"); }
[data-icon="server"]          { --icon-url: url("../assets/icons/ui/server.svg"); }
[data-icon="code"]            { --icon-url: url("../assets/icons/ui/code.svg"); }
[data-icon="gauge"]           { --icon-url: url("../assets/icons/ui/gauge.svg"); }
[data-icon="lock"]            { --icon-url: url("../assets/icons/ui/lock.svg"); }
[data-icon="sparkle"]         { --icon-url: url("../assets/icons/ui/sparkle.svg"); }
[data-icon="filter"]          { --icon-url: url("../assets/icons/ui/filter.svg"); }
[data-icon="external"]        { --icon-url: url("../assets/icons/ui/external.svg"); }
[data-icon="quote"]           { --icon-url: url("../assets/icons/ui/quote.svg"); }
[data-icon="play"]            { --icon-url: url("../assets/icons/ui/play.svg"); }
[data-icon="pause"]           { --icon-url: url("../assets/icons/ui/pause.svg"); }
[data-icon="target"]          { --icon-url: url("../assets/icons/ui/target.svg"); }
[data-icon="compass"]         { --icon-url: url("../assets/icons/ui/compass.svg"); }
[data-icon="refresh"]         { --icon-url: url("../assets/icons/ui/refresh.svg"); }
[data-icon="download"]        { --icon-url: url("../assets/icons/ui/download.svg"); }
[data-icon="upload"]          { --icon-url: url("../assets/icons/ui/upload.svg"); }
[data-icon="file"]            { --icon-url: url("../assets/icons/ui/file.svg"); }
[data-icon="building"]        { --icon-url: url("../assets/icons/ui/building.svg"); }
[data-icon="sun"]             { --icon-url: url("../assets/icons/ui/sun.svg"); }
[data-icon="moon"]            { --icon-url: url("../assets/icons/ui/moon.svg"); }

/* ==================================================
   BRAND LOCKUP
   Mark plus wordmark. The wordmark is real text, not an
   image, so it stays crisp, selectable and translatable.
================================================== */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* The supplied logo, used as one image. Height is fixed and the width follows
   the artwork's own aspect ratio; the width/height attributes in the markup
   reserve the box so the header never shifts as the image decodes. */
.brand-lockup__image {
  height: 42px;
  width: auto;
  max-width: none;
}

.brand-lockup--lg .brand-lockup__image { height: 56px; }

@media (max-width: 480px) {
  .brand-lockup__image { height: 34px; }
  .brand-lockup--lg .brand-lockup__image { height: 46px; }
}

/* ==================================================
   BUTTONS
   One base class plus intent modifiers. Every variant
   keeps a 44px minimum touch target.
================================================== */

.btn {
  --btn-bg: var(--brand-500);
  --btn-fg: #FFFFFF;
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 0.72rem 1.55rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary — the single strongest action in any view. */
.btn--primary {
  --btn-bg: var(--brand-500);
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { --btn-bg: var(--brand-600); }

/* Secondary — outlined, pairs with primary. */
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--ink-800);
  --btn-border: var(--ink-200);
}
.btn--secondary:hover {
  --btn-bg: var(--surface-muted);
  --btn-border: var(--ink-300);
  --btn-fg: var(--ink-900);
}

/* Ghost — low-emphasis inline action. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand-600);
  --btn-border: transparent;
  padding-inline: var(--s-4);
}
.btn--ghost:hover { --btn-bg: var(--brand-50); }

/* Dark surface variants. */
.btn--on-dark {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #FFFFFF;
  --btn-border: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
}
.btn--on-dark:hover {
  --btn-bg: rgba(255, 255, 255, 0.16);
  --btn-border: rgba(255, 255, 255, 0.4);
}

.btn--light {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--ink-900);
}
.btn--light:hover { --btn-bg: var(--brand-50); }

.btn--sm { min-height: 40px; padding: 0.5rem 1.15rem; font-size: var(--fs-xs); }
.btn--lg { min-height: 54px; padding: 0.95rem 2.1rem; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }

/* Trailing icon nudges forward on hover to signal direction. */
.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: transform var(--transition-fast);
}

.btn:hover .btn__icon--arrow { transform: translateX(3px); }

/* ==================================================
   TEXT LINK WITH ARROW
   Used at the foot of every card.
================================================== */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand-600);
}

.link-arrow::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask: url("../assets/icons/ui/arrow-right.svg") no-repeat center / contain;
  -webkit-mask: url("../assets/icons/ui/arrow-right.svg") no-repeat center / contain;
  transition: transform var(--transition-fast);
}

.link-arrow:hover::after { transform: translateX(4px); }

/* ==================================================
   BADGES & PILLS
================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.32rem 0.8rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
}

.badge--outline {
  background-color: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--ink-500);
}

.badge--on-dark {
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.badge--accent {
  background-color: var(--accent-100);
  color: #8A5A00;
}

.badge--sample {
  background-color: var(--surface-sunken);
  color: var(--ink-500);
  border: 1px dashed var(--ink-300);
}

/* Dot-prefixed eyebrow pill used above hero headlines. */
.badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

/* ==================================================
   TAG LIST
   Technology chips on cards and inner pages.
================================================== */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.26rem 0.68rem;
  border-radius: var(--radius-sm);
  background-color: var(--surface-sunken);
  color: var(--ink-500);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

a.tag:hover {
  background-color: var(--brand-50);
  color: var(--brand-700);
}

.tag--on-dark {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-on-dark-muted);
}

/* ==================================================
   CARD
   Base surface for every card variant on the site.
================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              border-color var(--transition-normal);
}

.card--interactive:hover {
  transform: translateY(-4px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow-lg);
}

.card--muted { background-color: var(--surface-muted); }

.card--on-dark {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-on-dark-muted);
}

.card--on-dark:hover { border-color: rgba(255, 255, 255, 0.24); }

/* Whole-card link: the title anchor stretches to cover the card so the
   entire surface is clickable while only one link is announced. */
.card__link-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-3);
}

.card__description {
  color: var(--ink-500);
  font-size: var(--fs-sm);
  line-height: 1.65;
  flex-grow: 1;
}

.card--on-dark .card__title { color: var(--color-on-dark); }
.card--on-dark .card__description { color: var(--color-on-dark-muted); }

.card__footer {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--color-border);
}

.card--on-dark .card__footer { border-top-color: rgba(255, 255, 255, 0.1); }

/* ==================================================
   ICON TILE
   Rounded square that holds a content icon at the top of
   service, technology and industry cards.
================================================== */

.icon-tile {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s-5);
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, var(--brand-50), #FFFFFF);
  border: 1px solid var(--brand-100);
  flex-shrink: 0;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.icon-tile img { width: 26px; height: 26px; }

.card--interactive:hover .icon-tile {
  background: linear-gradient(140deg, var(--brand-100), var(--brand-50));
  border-color: var(--brand-300);
}

.icon-tile--on-dark {
  background: var(--brand-wash);
  border-color: rgba(78, 155, 255, 0.32);
}

.icon-tile--sm { width: 42px; height: 42px; border-radius: var(--radius-sm); }
.icon-tile--sm img { width: 21px; height: 21px; }

/* ==================================================
   BREADCRUMBS
   Present on every page below the homepage; mirrored by
   BreadcrumbList structured data in the page head.
================================================== */

.breadcrumb {
  font-size: var(--fs-xs);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-400);
}

.breadcrumb__item:not(:last-child)::after {
  content: "";
  width: 13px;
  height: 13px;
  background-color: currentColor;
  opacity: 0.55;
  mask: url("../assets/icons/ui/chevron-right.svg") no-repeat center / contain;
  -webkit-mask: url("../assets/icons/ui/chevron-right.svg") no-repeat center / contain;
}

.breadcrumb__link { color: var(--ink-300); }
.breadcrumb__link:hover { color: #FFFFFF; }

.breadcrumb__item[aria-current="page"] { color: var(--brand-300); font-weight: var(--fw-medium); }

/* Light-surface variant for pages without a dark hero. */
.breadcrumb--on-light .breadcrumb__link { color: var(--ink-500); }
.breadcrumb--on-light .breadcrumb__link:hover { color: var(--brand-600); }
.breadcrumb--on-light .breadcrumb__item[aria-current="page"] { color: var(--ink-700); }

/* ==================================================
   FEATURE LIST
   Checklist of capabilities or outcomes.
================================================== */

.feature-list { display: grid; gap: var(--s-3); }

.feature-list__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-600);
}

/* Tinted disc … */
.feature-list__item::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-100);
}

/* … with the check glyph masked on top so it inherits the brand colour. */
.feature-list__item::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 12px;
  height: 12px;
  background-color: var(--brand-600);
  mask: url("../assets/icons/ui/check.svg") no-repeat center / contain;
  -webkit-mask: url("../assets/icons/ui/check.svg") no-repeat center / contain;
}

.section--dark .feature-list__item { color: var(--color-on-dark-muted); }
.section--dark .feature-list__item::before {
  background-color: rgba(22, 104, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(78, 155, 255, 0.35);
}
.section--dark .feature-list__item::after { background-color: var(--brand-300); }

/* ==================================================
   STAT BLOCK
   Only ever populated with facts the company can stand
   behind — see js/counters.js for the animation.
================================================== */

.stat-grid {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.stat {
  padding: var(--s-6);
  border-radius: var(--radius-md);
  background-color: var(--surface-muted);
  border: 1px solid var(--color-border);
}

.stat--on-dark {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--ink-900);
}

.stat--on-dark .stat__value { color: #FFFFFF; }

.stat__label {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.stat--on-dark .stat__label { color: var(--color-on-dark-muted); }

/* ==================================================
   CTA BAND
   Full-width conversion block reused across pages.
================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  background: var(--gradient-night);
  color: var(--color-on-dark-muted);
  isolation: isolate;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: min(560px, 80%);
  aspect-ratio: 1;
  z-index: -1;
  background: radial-gradient(circle, rgba(22, 104, 255, 0.4), transparent 65%);
  filter: blur(10px);
}

.cta-band__inner {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}

@media (min-width: 880px) {
  .cta-band__inner { grid-template-columns: 1.35fr auto; gap: var(--s-12); }
}

.cta-band__title {
  font-size: var(--fs-h2);
  color: #FFFFFF;
  margin-bottom: var(--s-4);
}

.cta-band__text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-on-dark-muted);
  max-width: 54ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ==================================================
   SIDEBAR WIDGETS
   Related-link lists and the conversion card that sit in
   the sticky aside of every inner page.
================================================== */

.aside-card {
  padding: var(--s-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}

.aside-card + .aside-card { margin-top: var(--s-5); }

.aside-card__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--color-border);
}

.aside-links { display: grid; gap: var(--s-1); }

.aside-links__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink-600);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.aside-links__link::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0;
  background-color: currentColor;
  mask: url("../assets/icons/ui/arrow-right.svg") no-repeat center / contain;
  -webkit-mask: url("../assets/icons/ui/arrow-right.svg") no-repeat center / contain;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  transform: translateX(-4px);
}

.aside-links__link:hover {
  background-color: var(--brand-50);
  color: var(--brand-700);
}

.aside-links__link:hover::after { opacity: 1; transform: translateX(0); }

/* Dark conversion card in the sidebar. */
.aside-card--cta {
  background: var(--gradient-night);
  border-color: transparent;
  color: var(--color-on-dark-muted);
}

.aside-card--cta .aside-card__title {
  color: #FFFFFF;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.aside-card__text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: var(--s-5);
}

/* ==================================================
   CONTACT DETAIL LIST
   Address, phone and hours; also used inside the footer.
================================================== */

.contact-list { display: grid; gap: var(--s-4); }

.contact-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.contact-list__icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  background-color: var(--brand-500);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.contact-list__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 2px;
}

/* ==================================================
   FLOATING WHATSAPP ACTION
   Present on every page. Expands to a label on hover and
   on wide viewports, stays a 56px target on mobile.
================================================== */

/*
   A round button carrying the WhatsApp glyph in white on WhatsApp green.

   This replaced a green pill with the word "WhatsApp" set beside a generic
   chat outline. Two problems with that: the outline was not the WhatsApp mark
   and so carried none of its recognition, and a wide pill covers page content
   on every scroll. The circular badge is the treatment people already know,
   and it takes up a third of the width.

   The visible word is gone but the accessible name is not — the label is kept
   in the markup for screen readers, and the link carries an aria-label too.
*/
.whatsapp-float {
  position: fixed;
  right: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  bottom: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #25D366;
  color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.34),
              0 4px 12px rgba(6, 12, 31, 0.24);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  color: #FFFFFF;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 34px rgba(37, 211, 102, 0.44),
              0 6px 16px rgba(6, 12, 31, 0.3);
}

.whatsapp-float__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: currentColor;
  mask: url("../assets/icons/ui/whatsapp.svg") no-repeat center / contain;
  -webkit-mask: url("../assets/icons/ui/whatsapp.svg") no-repeat center / contain;
}

/* Kept for assistive technology; the glyph carries the meaning visually. */
.whatsapp-float__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Nudge the button up when the sticky mobile call bar is present. */
@media (max-width: 767px) {
  .whatsapp-float { bottom: 5.25rem; }
}

/* ==================================================
   PAGINATION / PREV-NEXT
================================================== */

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  padding-top: var(--s-8);
  border-top: 1px solid var(--color-border);
}

.pager__link {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--ink-600);
}

.pager__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-400);
}

.pager__link:hover { color: var(--brand-600); }

/* ==================================================
   NOTICE
   Neutral callout used for sample-project labelling and
   the "no testimonials yet" placeholder, so the site
   never implies claims it cannot support.
================================================== */

.notice {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--radius-md);
  background-color: var(--surface-muted);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-500);
}

.notice__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: var(--brand-500);
  mask: url("../assets/icons/ui/sparkle.svg") no-repeat center / contain;
  -webkit-mask: url("../assets/icons/ui/sparkle.svg") no-repeat center / contain;
}

.notice--on-dark {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-on-dark-muted);
}

/* ==================================================
   TOPIC TAGS
   Purpose:
   The chip row that surfaces topic pages inside page
   content, and the "also searched as" list on a topic
   page itself.

   Tags are deliberately not in the navigation — a menu
   is for the handful of things a visitor is looking
   for, not for every topic the site covers — so these
   chips are how the topic pages are reached.
================================================== */

.tag-strip {
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid var(--color-border);
}

.tag-strip__heading {
  margin-bottom: var(--s-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tag-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag-chip {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background-color: var(--color-surface);
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.tag-chip:hover,
.tag-chip:focus-visible {
  border-color: var(--brand-500);
  background-color: var(--brand-50);
  color: var(--brand-700);
}

/* The alternative phrasings on a topic page.
   Set as a dense multi-column list rather than a paragraph: it is reference
   material a visitor scans to confirm they are in the right place, and a wall
   of comma-separated phrases would read as keyword stuffing. */
.alias-list {
  columns: 3 210px;
  column-gap: var(--s-6);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.alias-list li {
  break-inside: avoid;
  padding: 3px 0;
}

/* ==================================================
   ACCENT SWITCHER
   Purpose:
   The colour control in the top bar. Sets data-accent
   on <html>; the palettes themselves live in
   css/variables.css.

   Every swatch takes its colour from a class rather
   than an inline style, because inline style attributes
   are not used anywhere on this site and the audit
   fails the build if one appears.
================================================== */

/* Nothing here works without JavaScript, so it is not shown without it. */
.no-js .theme-switch { display: none; }

.theme-switch {
  position: relative;
  display: inline-flex;
}

.theme-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-on-dark-muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast),
              color var(--transition-fast);
}

.theme-switch__toggle:hover,
.theme-switch__toggle:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/* The dot previews the live accent, so the control shows its own state. */
.theme-switch__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
}

.theme-switch__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 216px;
  padding: var(--s-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--surface);
  box-shadow: 0 20px 44px rgba(6, 12, 31, 0.24);
}

.theme-switch__panel[hidden] { display: none; }

.theme-switch__heading {
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.theme-switch__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}

.theme-switch__swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(6, 12, 31, 0.12);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.theme-switch__swatch:hover,
.theme-switch__swatch:focus-visible { transform: scale(1.12); }

.theme-switch__swatch.is-current {
  border-color: var(--color-heading);
  transform: scale(1.06);
}

/* One class per palette, mirroring the [data-accent] blocks in variables.css. */
.theme-switch__swatch--default { background-color: #1668FF; }
.theme-switch__swatch--indigo  { background-color: #5B4BE8; }
.theme-switch__swatch--violet  { background-color: #8A3FFC; }
.theme-switch__swatch--teal    { background-color: #0E9384; }
.theme-switch__swatch--emerald { background-color: #12934F; }
.theme-switch__swatch--orange  { background-color: #E2650F; }
.theme-switch__swatch--crimson { background-color: #DC2647; }

/* The word is dropped on small screens; the dot alone carries the meaning
   and the top bar has no room to spare. */
@media (max-width: 600px) {
  .theme-switch__text { display: none; }
  .theme-switch__toggle { padding: 4px 7px; }
}