/*
  QWAKU HQ - WEBSITE COMPONENTS (code version of the Figma page "QWAKU HQ - WEBSITE COMPONENTS")
  Uses only the semantic names from qwaku-group-website-styles.css, so Light/Dark and future
  brands work automatically. Load the styles file first, then this file.
  Class names follow the Figma component names: q-button, q-field, q-tag, q-filter-tag,
  q-card, q-nav, q-footer, q-popup.
*/

/* ---------- shared ---------- */
.q-focus-ring:focus-visible,
.q-button:focus-visible, .q-filter-tag:focus-visible, .q-card:focus-visible,
.q-field__input:focus-visible {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: var(--border-width-focus-offset);
}
.q-icon { width: var(--icon-m); height: var(--icon-m); flex: none; display: block; fill: currentColor; }
.q-icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* ---------- button ---------- */
.q-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-s);
  height: 48px; padding: 0 var(--spacing-l); border: 0; border-radius: var(--radius-button);
  font-family: var(--font-display), sans-serif; font-size: var(--font-size-16); font-weight: var(--font-weight-semibold);
  line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--motion-hover-duration) var(--motion-hover-easing),
              color var(--motion-hover-duration) var(--motion-hover-easing);
  background: var(--button-primary-bg); color: var(--button-primary-text);
}
.q-button:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-text-hover, var(--button-primary-text)); }
.q-button:active { background: var(--button-primary-bg-pressed); color: var(--button-primary-text-pressed, var(--button-primary-text)); }
.q-button--secondary { background: var(--button-secondary-bg); color: var(--button-secondary-text); }
.q-button--secondary:hover { background: var(--button-secondary-bg-hover); color: var(--button-secondary-text-hover, var(--button-secondary-text)); }
.q-button--secondary:active { background: var(--button-secondary-bg-pressed); color: var(--button-secondary-text-pressed, var(--button-secondary-text)); }
.q-button--ghost { background: transparent; color: var(--button-ghost-text); }
.q-button--ghost:hover { background: var(--button-ghost-bg-hover); }
.q-button--ghost:active { background: var(--button-ghost-bg-pressed); }
.q-button--danger { background: var(--button-danger-bg); color: var(--button-danger-text); }
.q-button--danger:hover { background: var(--button-danger-bg-hover); }
.q-button--danger:active { background: var(--button-danger-bg-pressed); }
.q-button--ghost:hover, .q-button--ghost:active { color: var(--button-ghost-text); }
.q-button--danger:hover, .q-button--danger:active { color: var(--button-danger-text); }
.q-button--small { height: 36px; padding: 0 var(--spacing-m); font-size: var(--font-size-14); }
.q-button--small .q-icon { width: var(--icon-s); height: var(--icon-s); }
.q-button--icon { width: 48px; padding: 0; }
.q-button--icon.q-button--small { width: 36px; }
.q-button--full { width: 100%; }
.q-button:disabled, .q-button[aria-disabled="true"],
.q-button:disabled:hover, .q-button:disabled:active {
  background: var(--button-disabled-bg); color: var(--button-disabled-text); cursor: not-allowed;
}
.q-button--ghost:disabled { background: transparent; }

/* ---------- text field ---------- */
.q-field { display: flex; flex-direction: column; gap: var(--spacing-s); }
.q-field__label { font-family: var(--font-body), sans-serif; font-weight: var(--font-weight-semibold); font-size: var(--font-size-16); color: var(--text-primary); }
.q-field__input {
  height: 48px; padding: 0 var(--spacing-m); border-radius: var(--radius-button);
  background: var(--bg-surface); color: var(--text-primary);
  border: var(--border-width-default) solid var(--border-strong);
  font-family: var(--font-body), sans-serif; font-size: var(--font-size-16);
  transition: border-color var(--motion-hover-duration) var(--motion-hover-easing);
}
.q-field__input::placeholder { color: var(--input-placeholder); opacity: 1; }
.q-field__input:hover { border-color: var(--input-border-hover); }
.q-field__input:focus { outline: none; border: var(--border-width-focus) solid var(--border-focus); padding: 0 calc(var(--spacing-m) - 1px); }
.q-field__help { font-family: var(--font-body), sans-serif; font-size: var(--font-size-14); color: var(--text-secondary); }
.q-field__error { display: none; align-items: center; gap: var(--spacing-xs); font-family: var(--font-body), sans-serif; font-size: var(--font-size-14); color: var(--feedback-error-text); }
.q-field__error .q-icon { width: var(--icon-s); height: var(--icon-s); }
.q-field--error .q-field__input { border: var(--border-width-focus) solid var(--input-border-error); padding: 0 calc(var(--spacing-m) - 1px); }
.q-field--error .q-field__help { display: none; }
.q-field--error .q-field__error { display: flex; }
.q-field--disabled .q-field__label, .q-field--disabled .q-field__help { color: var(--text-disabled); }
.q-field__input:disabled { background: var(--button-disabled-bg); color: var(--text-disabled); border-color: var(--border-subtle); cursor: not-allowed; }

/* ---------- tag ---------- */
.q-tag {
  display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-s);
  border-radius: var(--radius-pill); font-family: var(--font-display), sans-serif; font-weight: var(--font-weight-bold);
  font-size: var(--font-size-12); letter-spacing: var(--letter-spacing-label-02); text-transform: uppercase; line-height: 1.25;
  background: var(--bg-subtle); color: var(--text-secondary);
}
.q-tag--brand   { background: var(--bg-surface-selected); color: var(--text-brand); }
.q-tag--success { background: var(--feedback-success-bg); color: var(--feedback-success-text); }
.q-tag--error   { background: var(--feedback-error-bg);   color: var(--feedback-error-text); }
.q-tag--warning { background: var(--feedback-warning-bg); color: var(--feedback-warning-text); }
.q-tag--info    { background: var(--feedback-info-bg);    color: var(--feedback-info-text); }

/* ---------- filter tag (a toggle button: aria-pressed="true" = selected) ---------- */
.q-filter-tag {
  display: inline-flex; align-items: center; gap: var(--spacing-xs); height: 36px; padding: 0 var(--spacing-m);
  border-radius: var(--radius-pill); border: var(--border-width-default) solid var(--border-strong);
  background: var(--bg-surface); color: var(--text-primary); cursor: pointer;
  font-family: var(--font-display), sans-serif; font-weight: var(--font-weight-semibold); font-size: var(--font-size-14);
  transition: background-color var(--motion-hover-duration) var(--motion-hover-easing);
}
.q-filter-tag:hover { background: var(--bg-surface-hover); }
.q-filter-tag:active { background: var(--bg-subtle); }
.q-filter-tag[aria-pressed="true"] { background: var(--tag-selected-bg); color: var(--tag-selected-text); border-color: transparent; }
.q-filter-tag:disabled { background: var(--button-disabled-bg); color: var(--button-disabled-text); border-color: transparent; cursor: not-allowed; }

/* ---------- cards ---------- */
.q-card {
  display: flex; flex-direction: column; background: var(--bg-surface); color: var(--text-primary);
  border: var(--border-width-default) solid var(--border-subtle); border-radius: var(--radius-card);
  box-shadow: var(--shadow-s); text-decoration: none; overflow: hidden;
  transition: box-shadow var(--motion-hover-duration) var(--motion-hover-easing), background-color var(--motion-hover-duration) var(--motion-hover-easing);
}
.q-card:hover { box-shadow: var(--shadow-m); }
.q-card:active { box-shadow: var(--shadow-s); background: var(--bg-surface-hover); }
.q-card__image { aspect-ratio: 16 / 10; background: var(--bg-subtle); display: grid; place-items: center; color: var(--icon-secondary); }
.q-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-s); padding: var(--space-card-padding); }
.q-card__title { margin: 0; font-family: var(--font-display), sans-serif; font-weight: var(--font-weight-bold); font-size: var(--font-size-20); line-height: 1.25; color: var(--text-primary); }
.q-card__text { margin: 0; font-family: var(--font-body), sans-serif; font-size: var(--font-size-14); line-height: 1.6; color: var(--text-secondary); }
.q-card__link { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-family: var(--font-display), sans-serif; font-weight: var(--font-weight-semibold); font-size: var(--font-size-14); color: var(--text-link); }
.q-card__link .q-icon { width: var(--icon-s); height: var(--icon-s); }
.q-card:hover .q-card__link { color: var(--text-link-hover); }
.q-card--service { padding: var(--space-card-padding); gap: var(--spacing-s); }
.q-card__icon-box { width: 56px; height: 56px; border-radius: var(--radius-m); background: var(--bg-icon-box); color: var(--icon-brand); display: grid; place-items: center; }
.q-card__icon-box .q-icon { width: var(--icon-xl); height: var(--icon-xl); }

/* ---------- navigation ---------- */
.q-nav {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  height: 80px; padding: 0 var(--spacing-xl); background: var(--bg-frosted);
  -webkit-backdrop-filter: var(--backdrop-blur-m); backdrop-filter: var(--backdrop-blur-m); box-shadow: var(--shadow-s);
}
.q-nav__logo { display: block; height: 40px; }
.q-nav__logo svg { height: 100%; width: auto; display: block; }
.q-nav__links { display: flex; align-items: center; gap: var(--spacing-l); list-style: none; margin: 0; padding: 0; }
.q-nav__link {
  position: relative; display: inline-block; padding: var(--spacing-s) var(--spacing-xs);
  font-family: var(--font-display), sans-serif; font-weight: var(--font-weight-semibold); font-size: var(--font-size-16);
  color: var(--text-primary); text-decoration: none; border-radius: var(--radius-pill);
  transition: color var(--motion-hover-duration) var(--motion-hover-easing);
}
.q-nav__link:hover, .q-nav__link[aria-current="page"] { color: var(--text-brand); }
.q-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--spacing-xs); right: var(--spacing-xs); bottom: 2px;
  height: var(--border-width-medium); background: var(--border-current); border-radius: 2px;
}
.q-nav__menu-button { display: none; }
.q-nav__panel {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: var(--spacing-l);
  padding: var(--spacing-m); background: var(--bg-surface);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--motion-dropdown-open-duration) var(--motion-dropdown-open-easing),
              transform var(--motion-dropdown-open-duration) var(--motion-dropdown-open-easing),
              visibility 0s linear var(--motion-dropdown-open-duration);
}
.q-nav__panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.q-nav__panel-head { display: flex; align-items: center; justify-content: space-between; }
.q-nav__panel-links { list-style: none; margin: 0; padding: 0; }
.q-nav__panel-links a {
  display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-m) 0;
  border-bottom: var(--border-width-default) solid var(--border-subtle); text-decoration: none;
  font-family: var(--font-display), sans-serif; font-weight: var(--font-weight-bold); font-size: var(--font-size-28); color: var(--text-primary);
}
.q-nav__panel-links a[aria-current="page"] { color: var(--text-brand); }
.q-nav__panel-links .q-icon { width: var(--icon-l); height: var(--icon-l); color: var(--icon-secondary); }
.q-nav__panel .q-button { margin-top: auto; }
@media (max-width: 899px) {
  .q-nav { height: 64px; padding: 0 var(--spacing-m); }
  .q-nav__links, .q-nav__cta { display: none; }
  .q-nav__menu-button { display: inline-flex; }
}

/* ---------- footer (always on the teal brand background) ---------- */
.q-footer {
  display: flex; flex-direction: column; gap: var(--spacing-xl); padding: var(--spacing-xl);
  background: var(--bg-brand); color: var(--text-on-brand);
  font-family: var(--font-body), sans-serif; font-size: var(--font-size-14);
  /* the footer is always teal, so its inline logo uses the primary (on teal) colours in both modes */
  --logo-mark: var(--color-secondary-500); --logo-wordmark: var(--color-neutral-off-white); --logo-tail: var(--color-logo-tail-on-teal);
}
.q-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-xl); }
.q-footer__about { display: flex; flex-direction: column; gap: var(--spacing-m); max-width: 320px; }
.q-footer__about p { margin: 0; line-height: 1.6; }
.q-footer__logo { height: 48px; }
.q-footer__logo svg { height: 100%; width: auto; display: block; }
.q-footer__social { display: flex; gap: var(--spacing-m); }
.q-footer__social a { color: var(--text-on-brand); }
.q-footer__social .q-icon { width: var(--icon-l); height: var(--icon-l); }
.q-footer__columns { display: flex; flex-wrap: wrap; gap: var(--spacing-xl); }
.q-footer__col { display: flex; flex-direction: column; gap: var(--spacing-s); }
.q-footer__col h3 { margin: 0; font-family: var(--font-display), sans-serif; font-weight: var(--font-weight-bold); font-size: var(--font-size-14); letter-spacing: var(--letter-spacing-label-01); text-transform: uppercase; }
.q-footer a { position: relative; color: var(--text-on-brand); text-decoration: none; border-radius: var(--radius-pill); }
.q-footer a:hover { text-decoration: underline; }
.q-footer__divider { height: 1px; background: var(--border-subtle); border: 0; margin: 0; }
.q-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-m); font-size: var(--font-size-12); }
.q-footer__legal nav { display: flex; gap: var(--spacing-l); font-size: var(--font-size-14); }

/* ---------- pop-up (uses the native <dialog> element) ---------- */
.q-popup {
  width: min(560px, calc(100vw - 32px)); padding: var(--spacing-l); border: var(--border-width-default) solid var(--border-subtle);
  border-radius: var(--radius-card); background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-l);
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity var(--motion-popup-close-duration) var(--motion-popup-close-easing),
              transform var(--motion-popup-close-duration) var(--motion-popup-close-easing);
}
.q-popup[open].is-visible { opacity: 1; transform: none;
  transition: opacity var(--motion-popup-open-duration) var(--motion-popup-open-easing),
              transform var(--motion-popup-open-duration) var(--motion-popup-open-easing); }
.q-popup::backdrop { background: var(--bg-overlay); }
.q-popup__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-m); }
.q-popup__title { margin: 0; font-family: var(--font-display), sans-serif; font-weight: var(--font-weight-extrabold); font-size: var(--font-size-24); }
.q-popup__body { margin: var(--spacing-m) 0; font-family: var(--font-body), sans-serif; font-size: var(--font-size-16); line-height: 1.6; color: var(--text-secondary); }
.q-popup__actions { display: flex; justify-content: flex-end; gap: var(--spacing-s); }

@media (prefers-reduced-motion: reduce) {
  .q-button, .q-card, .q-nav__panel, .q-popup, .q-filter-tag { transition: none !important; }
}

/* ---------- link focus rings: 16px of room left and right of the text, 8px above and below ---------- */
.q-nav__link:focus-visible, .q-footer a:focus-visible { outline: none; }
.q-nav__link:focus-visible::before, .q-footer a:focus-visible::before {
  content: ""; position: absolute; pointer-events: none; border-radius: var(--radius-pill);
  border: var(--border-width-focus) solid var(--border-focus);
}
.q-nav__link:focus-visible::before { inset: 0 calc(-1 * var(--spacing-s) - var(--spacing-xs)); }
.q-footer a:focus-visible::before { inset: calc(-1 * var(--spacing-s)) calc(-1 * var(--spacing-m)); }
.q-footer__social a:focus-visible::before { inset: calc(-1 * var(--spacing-xs)); }