/*
  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;          /* the CI grey: large text and rules only (3.9:1 on white) */
  --app-muted: #666666;         /* small secondary text: the CI grey, darkened to 5.7:1 on white */
  --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;
  --app-font-heading: var(--app-font);
  --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). Widths per kind of page, as on BW-CMS and CGP-CMS:
     --app-page-max   1170px by default (public pages); admin pages 1600px (admin.css)
     --app-gutter     15px by default; admin pages grow it to 40px on wide screens
   Page CSS sets only top/bottom padding, never left/right. */
.sp-app {
  --app-page-max: 1170px;
  --app-gutter: 15px;
}

.sp-app.sp-app {
  width: 100%;
  max-width: var(--app-page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--app-gutter);
  padding-right: var(--app-gutter);
}

/* 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, ul, ol, dl, dd) {
  margin: 0;
  font-family: var(--app-font);
  color: inherit;
}

/* Bootstrap makes labels bold with a bottom margin */
.sp-app label {
  margin-bottom: 0;
  font-weight: inherit;
}

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

.sp-app button,
.sp-app input,
.sp-app select,
.sp-app textarea {
  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 textarea.sp-input {
  padding: var(--space-2) var(--space-3);
  line-height: 1.4;
  resize: vertical;
}

.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;
  }
}