/*
  Shared tokens and resets for every page in this solution.

  Matches the cam.com.na site styling (see the CI document: "Capricorn Asset Management
  Website: Corporate Identity"). The site's look is flat and square: navy #192f55 for titles,
  nav and buttons, red #c8272b only for hover/selected, grey #7f7f7f for secondary text,
  Calibri everywhere, 1px grey rules instead of cards and shadows.

  These pages sit INSIDE the site's master page, so everything is scoped to .sp-app (the class
  on each page's root element). Nothing here styles html, body or bare elements outside it.

  The site's global CSS that reaches in here, and how it's handled:
    - Bootstrap sets html to 10px            -> px only, never rem
    - CAM.css: * { margin: 0; padding: 0 }   -> every margin/padding is set explicitly
    - CAM.css: a:hover { color: red !important }, a { text-decoration: none !important }
                                             -> link-styled buttons re-assert colour with !important
    - CAM.css: h1-h4, p, body font sizes     -> our headings carry classes with their own sizes
*/
.sp-app {
  --app-navy: #192f55;
  --app-navy-dark: #10203d;
  --app-red: #c8272b;
  --app-grey: #7f7f7f;
  --app-text: #192f55;          /* the site sets body copy in navy */
  --app-border: #d6d9de;
  --app-rule: #eeeeee;          /* Bootstrap page-header rule */
  --app-surface: #ffffff;
  --app-surface-alt: #f7f7f7;
  --app-ok: #2e7d32;
  --app-warn: #a15c00;
  --app-focus: #c8272b;
  --app-font: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;

  box-sizing: border-box;
  color: var(--app-text);
  font-family: var(--app-font);
  font-size: 16px;
  line-height: 1.43;
}

/* The page's own centred column, like the site's Bootstrap .container (1170px + 15px gutters).
   The site's content pages bring that container in their own content, not from the master
   page, so on the Blank Web Part Page layout our page has to supply it (seen live: without it
   the page ran edge to edge). Page CSS sets only top/bottom padding, never left/right. */
.sp-app.sp-app {
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Explicit, not "inherit": children of <details> inherit through its shadow-DOM slot, which
   is content-box, so "inherit" would make every archive row overflow its list */
.sp-app *,
.sp-app *::before,
.sp-app *::after {
  box-sizing: border-box;
}

.sp-app :is(h1, h2, h3, h4, p) {
  margin: 0;
  font-family: var(--app-font);
  color: inherit;
}

.sp-app a:is(:link, :visited) {
  color: inherit;
}

.sp-app button,
.sp-app input,
.sp-app select {
  min-width: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.sp-app [hidden] {
  display: none !important;
}

.sp-app :focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}

.sp-app .sp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Page title: the site's h1.page-header (36px, light, grey rule under it) ---- */
.sp-app .sp-title {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--app-navy);
}

.sp-app .sp-subtitle {
  margin-top: var(--space-2);
  font-size: 18px;
  color: var(--app-grey);
}

/* ---- Buttons: square, navy, like the site's Explore button ---- */
.sp-app .sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  margin: 0;
  padding: 0 var(--space-5);
  border: 1px solid var(--app-navy);
  border-radius: 0;
  background: var(--app-surface);
  color: var(--app-navy);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.sp-app .sp-btn:hover {
  border-color: var(--app-red);
  color: var(--app-red) !important;
  background: var(--app-surface);
}

.sp-app .sp-btn--primary,
.sp-app a.sp-btn--primary:is(:link, :visited) {
  background: var(--app-navy);
  color: #fff;
}

/* CAM.css forces every hovered link red with !important; the site's own Explore button keeps
   its navy fill and turns border + text red, so do the same */
.sp-app .sp-btn--primary:hover {
  background: var(--app-navy);
  border-color: var(--app-red);
  color: var(--app-red) !important;
}

.sp-app .sp-btn--danger:hover {
  background: var(--app-red);
  border-color: var(--app-red);
  color: #fff !important;
}

.sp-app .sp-btn--small {
  min-height: 28px;
  padding: 0 var(--space-3);
  font-size: 13px;
}

.sp-app .sp-btn:disabled,
.sp-app .sp-btn:disabled:hover {
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-border) !important;
  cursor: default;
}

/* ---- Text inputs ---- */
.sp-app .sp-input {
  min-height: 36px;
  margin: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--app-border);
  border-radius: 0;
  background: var(--app-surface);
  font-size: 14px;
}

.sp-app .sp-input:focus {
  border-color: var(--app-navy);
  outline: none;
}

/* ---- Spinner ---- */
.sp-app .sp-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--app-rule);
  border-top-color: var(--app-red);
  border-radius: 50%;
  animation: sp-spin 0.8s linear infinite;
}

@keyframes sp-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sp-app .sp-spinner {
    animation: none;
  }
}