/* ------------------------------------------------------------------------------------------
   Brand tokens (colors and type from HomeHandoff_Brand_Kit/tokens/home-handoff-brand.css, the kit made
   under the product's working title),
   mapped onto Bootstrap 5.3's variables so every page picks up the brand in light and dark.

   Brand rules applied here: purple for navigation and primary actions; lime only for
   completion moments (Publish, Published) with near-black text, never white; neutral cards
   so photos and documents stay easy to scan.
   ------------------------------------------------------------------------------------------ */

/* Brand fonts, self-hosted (no third-party font service). Variable fonts: one file covers
   every weight. Latin subset from Fontsource 5.3.0; licenses (SIL OFL 1.1) in wwwroot/fonts. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
}

:root,
[data-bs-theme="light"] {
  --hh-purple: #6424f4;
  --hh-purple-hover: #5014d6;
  --hh-purple-soft: #e8ddff;
  --hh-purple-text: #6424f4;
  --hh-lime: #c8ff00;
  --hh-lime-hover: #b2e600;
  --hh-ink: #17171c;
  --hh-text-muted: #676071;
  --hh-canvas: #f8f7fc;
  --hh-surface: #ffffff;
  --hh-border: #ded8e8;

  --hh-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --hh-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --hh-radius-sm: 0.5rem;
  --hh-radius-md: 0.875rem;
  --hh-radius-lg: 1.25rem;
  --hh-shadow-card: 0 12px 30px rgb(23 23 28 / 0.08);

  /* Bootstrap builds link colors from these; the dark theme overrides them below. */
  --bs-link-color-rgb: 100, 36, 244;
  --bs-link-hover-color-rgb: 80, 20, 214;
}

[data-bs-theme="dark"] {
  /* Dark palette from the brand kit. Text links use the lighter purple, which keeps
     readable contrast (about 6:1) on the dark canvas; the brand's #8B5CFF is used for
     the logo and outlines, where it's large enough to read. */
  --hh-purple: #8b5cff;
  --hh-purple-hover: #a17cff;
  --hh-purple-soft: #2e2445;
  --hh-purple-text: #a17cff;
  --hh-ink: #f8f5ff;
  --hh-text-muted: #bbb2c8;
  --hh-canvas: #141218;
  --hh-surface: #211d29;
  --hh-border: #393143;
  --hh-shadow-card: 0 12px 30px rgb(0 0 0 / 0.35);
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--hh-font-body);
  --bs-body-bg: var(--hh-canvas);
  --bs-body-bg-rgb: 248, 247, 252;
  --bs-body-color: var(--hh-ink);
  --bs-emphasis-color: var(--hh-ink);
  --bs-secondary-color: var(--hh-text-muted);
  --bs-tertiary-bg: var(--hh-canvas);
  --bs-border-color: var(--hh-border);
  --bs-border-radius: var(--hh-radius-sm);
  --bs-border-radius-lg: var(--hh-radius-md);
  --bs-link-color: var(--hh-purple-text);
  --bs-link-hover-color: var(--hh-purple-hover);
  --bs-primary: #6424f4;
  --bs-primary-rgb: 100, 36, 244;
  --bs-focus-ring-color: rgb(100 36 244 / 0.35);
  --bs-heading-color: var(--hh-ink);
}

[data-bs-theme="dark"] {
  --bs-body-bg-rgb: 20, 18, 24;
  --bs-link-color-rgb: 161, 124, 255;
  --bs-link-hover-color-rgb: 184, 156, 255;
  --bs-focus-ring-color: rgb(161 124 255 / 0.5);
}

html {
  font-size: 16px;
}

body {
  background-color: var(--hh-canvas);
  color: var(--hh-ink);
}

h1, h2, .h1, .h2, .h3, .display-6, .navbar-brand {
  font-family: var(--hh-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.text-muted,
.text-body-secondary,
.form-text {
  color: var(--hh-text-muted) !important;
}

/* Navigation ---------------------------------------------------------------------------- */
.hh-navbar {
  background-color: var(--hh-surface);
  border-bottom: 1px solid var(--hh-border);
}

.hh-navbar .nav-link {
  color: var(--hh-ink);
  font-weight: 500;
  border-radius: var(--hh-radius-sm);
}

.hh-navbar .nav-link:hover,
.hh-navbar .nav-link:focus-visible {
  color: var(--hh-purple-text);
}

.hh-navbar .nav-link.active,
.hh-navbar .nav-link[aria-current="page"] {
  color: var(--hh-purple-text);
  background-color: var(--hh-purple-soft);
  font-weight: 600;
}

@media (min-width: 768px) {
  .hh-navbar .navbar-nav .nav-link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--hh-ink);
  font-size: 1.25rem;
}

.navbar-brand:hover {
  color: var(--hh-ink);
}

.brand-mark {
  width: 32px;
  height: 32px;
}

.brand-mark-dark {
  display: none;
}

[data-bs-theme="dark"] .brand-mark-light {
  display: none;
}

[data-bs-theme="dark"] .brand-mark-dark {
  display: inline-block;
}

/* Surfaces ------------------------------------------------------------------------------ */
.card {
  --bs-card-bg: var(--hh-surface);
  --bs-card-border-color: var(--hh-border);
  --bs-card-border-radius: var(--hh-radius-md);
  --bs-card-inner-border-radius: calc(var(--hh-radius-md) - 1px);
  --bs-card-color: var(--hh-ink);
}

.list-group {
  --bs-list-group-bg: var(--hh-surface);
  --bs-list-group-border-color: var(--hh-border);
  --bs-list-group-color: var(--hh-ink);
  --bs-list-group-border-radius: var(--hh-radius-md);
  --bs-list-group-action-hover-bg: var(--hh-canvas);
  --bs-list-group-action-hover-color: var(--hh-ink);
}

.list-group-flush {
  --bs-list-group-bg: transparent;
}

footer {
  background-color: var(--hh-surface);
  border-color: var(--hh-border) !important;
}

/* Forms: large, friendly controls on the surface color ---------------------------------- */
.form-control,
.form-select {
  background-color: var(--hh-surface);
  border-color: var(--hh-border);
  color: var(--hh-ink);
  border-radius: var(--hh-radius-sm);
  padding: 0.625rem 0.875rem;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--hh-surface);
  color: var(--hh-ink);
  border-color: var(--hh-purple);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-label {
  font-weight: 500;
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:focus {
  border-color: var(--hh-purple);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* Buttons ------------------------------------------------------------------------------- */
.btn {
  border-radius: var(--hh-radius-md);
  font-weight: 600;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.btn-lg {
  border-radius: var(--hh-radius-md);
}

.btn-sm {
  border-radius: var(--hh-radius-sm);
}

/* White text on the brand purple (about 6.8:1) in both themes. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6424f4;
  --bs-btn-border-color: #6424f4;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5014d6;
  --bs-btn-hover-border-color: #5014d6;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4510bd;
  --bs-btn-active-border-color: #4510bd;
  --bs-btn-disabled-bg: #6424f4;
  --bs-btn-disabled-border-color: #6424f4;
}

.btn-outline-primary {
  --bs-btn-color: var(--hh-purple-text);
  --bs-btn-border-color: var(--hh-purple);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6424f4;
  --bs-btn-hover-border-color: #6424f4;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5014d6;
  --bs-btn-active-border-color: #5014d6;
}

.btn-outline-secondary {
  --bs-btn-color: var(--hh-ink);
  --bs-btn-border-color: var(--hh-border);
  --bs-btn-hover-color: var(--hh-ink);
  --bs-btn-hover-bg: var(--hh-canvas);
  --bs-btn-hover-border-color: var(--hh-text-muted);
  --bs-btn-active-color: var(--hh-ink);
  --bs-btn-active-bg: var(--hh-border);
  --bs-btn-active-border-color: var(--hh-text-muted);
  --bs-btn-disabled-color: var(--hh-text-muted);
  --bs-btn-disabled-border-color: var(--hh-border);
}

/* Lime is for completion moments only, always with near-black text. */
.btn-accent {
  --bs-btn-color: #17171c;
  --bs-btn-bg: #c8ff00;
  --bs-btn-border-color: #c8ff00;
  --bs-btn-hover-color: #17171c;
  --bs-btn-hover-bg: #b2e600;
  --bs-btn-hover-border-color: #b2e600;
  --bs-btn-active-color: #17171c;
  --bs-btn-active-bg: #a3d400;
  --bs-btn-active-border-color: #a3d400;
}

/* Status badges: always text, never color alone ----------------------------------------- */
.badge {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.4em 0.75em;
}

.badge-published {
  background-color: #c8ff00;
  color: #17171c;
}

.badge-draft {
  background-color: var(--hh-purple-soft);
  color: var(--hh-purple-text);
}

.badge-archived {
  background-color: var(--hh-border);
  color: var(--hh-ink);
}

/* Landing page -------------------------------------------------------------------------- */
.hh-hero {
  background-color: #17171c;
  color: #f8f5ff;
  border-radius: var(--hh-radius-lg);
}

.hh-hero h1 {
  color: #f8f5ff;
}

.hh-hero .lead {
  color: #d9d3e3;
}

/* On the dark canvas the ink panel would disappear; lift it onto the card surface instead. */
[data-bs-theme="dark"] .hh-hero {
  background-color: var(--hh-surface);
  border: 1px solid var(--hh-border);
}

.hh-hero-mark {
  width: 96px;
  height: 96px;
}

.hh-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background-color: var(--hh-purple-soft);
  color: var(--hh-purple-text);
  font-weight: 700;
}

/* Theme switch in the navbar ------------------------------------------------------------ */
.theme-toggle {
  color: var(--hh-ink);
}

/* Existing helpers ---------------------------------------------------------------------- */

/* Keeps line breaks the user typed in multi-line text. */
.text-preline {
  white-space: pre-line;
}

/* Handoff photos and thumbnails keep a tidy grid regardless of the original image size. */
.handoff-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.handoff-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.handoff-fields dt {
  font-weight: 600;
}

.handoff-fields dd {
  margin-bottom: 0.25rem;
}

/* Marks the contractor preview so it isn't mistaken for the live homeowner page. */
.preview-banner {
  border-left: 4px solid var(--hh-purple);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* The validation summary hides its placeholder with an inline style, which the Content-Security-Policy
   blocks. Hide an empty (valid) summary here instead; it switches class when errors appear. */
.validation-summary-valid {
    display: none;
}