/* ============================================================================
   QUDS — application shell layer.
   CAMPAIGNPROOF-QUDS-UI-SPRINT-01
   ----------------------------------------------------------------------------
   Page skeleton: base document, skip link, brand header, primary navigation,
   page head, content container, footer. Logical properties are used so the
   shell is structurally ready for RTL locales (dir="rtl" flips it without
   CSS changes).
   ========================================================================== */

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--quds-page-bg);
  color: var(--quds-text);
  font-family: var(--quds-font);
  font-size: var(--quds-text-body);
  line-height: var(--quds-leading-body);
  -webkit-text-size-adjust: 100%;
}

/* --- Skip link (first focusable element on every page) ---------------------- */

.quds-skip {
  position: absolute;
  inset-inline-start: var(--quds-space-3);
  top: -60px;
  z-index: var(--quds-z-overlay);
  background: var(--quds-action-primary);
  color: var(--quds-text-invert);
  padding: var(--quds-space-2) var(--quds-space-4);
  border-radius: var(--quds-radius-sm);
  text-decoration: none;
  transition: top var(--quds-duration-fast) var(--quds-ease);
}
.quds-skip:focus { top: var(--quds-space-3); color: var(--quds-text-invert); }

/* --- Header ------------------------------------------------------------------ */

.quds-header {
  background: var(--quds-brand-950);
  color: var(--quds-text-invert);
  border-block-end: 3px solid var(--quds-accent-highlight);
  position: relative;
  z-index: var(--quds-z-header);
}
.quds-header-inner {
  max-width: var(--quds-content-width);
  margin-inline: auto;
  padding: var(--quds-space-3) var(--quds-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--quds-space-2) var(--quds-space-5);
}
.quds-brand {
  display: flex;
  align-items: baseline;
  gap: var(--quds-space-2);
  white-space: nowrap;
}
.quds-brand-mark {
  color: var(--quds-text-invert);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.quds-brand-mark:hover { color: var(--quds-brand-100); }
.quds-brand-product {
  color: var(--quds-brand-100);
  font-size: var(--quds-text-small);
  font-weight: 600;
  border-inline-start: 1px solid var(--quds-brand-700);
  padding-inline-start: var(--quds-space-2);
}

.quds-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--quds-space-1) var(--quds-space-2);
  margin-inline-start: auto;
}
.quds-nav a {
  color: var(--quds-brand-100);
  text-decoration: none;
  font-size: var(--quds-text-small);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--quds-radius-xs);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.quds-nav a:hover { background: var(--quds-brand-800); color: var(--quds-text-invert); }
.quds-nav a[aria-current="page"] {
  background: var(--quds-brand-800);
  color: var(--quds-text-invert);
  box-shadow: inset 0 -2px 0 var(--quds-accent-highlight);
}
.quds-nav a:focus-visible {
  outline: var(--quds-focus-ring-width) solid var(--quds-accent-surface);
  outline-offset: 1px;
}

/* --- Page head ------------------------------------------------------------------ */

.quds-pagehead {
  max-width: var(--quds-content-width);
  margin-inline: auto;
  padding: var(--quds-space-5) var(--quds-gutter) 0;
}
.quds-pagehead h1 { font-size: var(--quds-text-page); }
.quds-lede {
  color: var(--quds-text-secondary);
  max-width: var(--quds-readable-measure);
  margin: var(--quds-space-1) 0 0;
}
.quds-lede strong { color: var(--quds-text); }
.quds-descriptor {
  color: var(--quds-text-muted);
  font-size: var(--quds-text-small);
  margin: var(--quds-space-1) 0 0;
}

/* --- Main content container --------------------------------------------------------- */

.quds-main {
  max-width: var(--quds-content-width);
  margin-inline: auto;
  padding: 0 var(--quds-gutter) var(--quds-space-6);
}

/* Narrow variant for authentication / invitation acceptance. */
.quds-main-narrow { max-width: var(--quds-content-width-narrow); }

/* --- Footer ------------------------------------------------------------------------- */

.quds-footer {
  border-block-start: 1px solid var(--quds-border);
  margin-block-start: var(--quds-space-6);
}
.quds-footer-inner {
  max-width: var(--quds-content-width);
  margin-inline: auto;
  padding: var(--quds-space-4) var(--quds-gutter) var(--quds-space-6);
  color: var(--quds-text-muted);
  font-size: var(--quds-text-small);
}
.quds-footer-inner p { margin: var(--quds-space-1) 0; }
.quds-promise { color: var(--quds-text-secondary); font-weight: 600; }

/* --- Responsive gutters ---------------------------------------------------------------- */

@media (max-width: 640px) {
  .quds-header-inner,
  .quds-pagehead,
  .quds-main,
  .quds-footer-inner {
    padding-inline: var(--quds-gutter-mobile);
  }
  .quds-pagehead { padding-block-start: var(--quds-space-4); }
  .quds-nav { margin-inline-start: 0; width: 100%; }
}