/* ── App Kindling Lite — kit layer (layers on Bootstrap + Cerulean) ───────
 *
 * Load order (partials/head.php):
 *   1. vendor/cerulean.min.css        Bootstrap 5.3 + Cerulean (base components)
 *   2. vendor/bootstrap-icons.min.css
 *   3. palette-<name>.css             sets --accent + --accent-rgb
 *   4. THIS FILE                      maps --accent → --bs-* + kit components
 *
 * A new color = a new palette-<name>.css. No edits needed here.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Accent → Bootstrap mapping ───────────────────────────────────────────
 * Bootstrap 5.3 bakes literal colors into component vars, so overriding
 * --bs-primary alone won't recolor buttons. Remap the bits the kit uses and
 * derive hover/active shades with color-mix() so a palette needs only --accent. */
:root {
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: var(--accent-rgb);
  /* Bootstrap drives a:hover off --bs-link-hover-color-rgb (and .btn-link:hover off
     --bs-link-hover-color). A darkened rgb triplet can't be derived in pure CSS, so
     keep link hover at the accent hue — consistent across both vars rather than
     mismatched. */
  --bs-link-hover-color: var(--accent);
  --bs-link-hover-color-rgb: var(--accent-rgb);
  /* gradient for the New Age hero + portrait frame, derived from the accent */
  --accent-grad-to: color-mix(in srgb, var(--accent) 55%, white);
}

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 70%, black);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb);   /* else focus ring stays Cerulean blue */
}
.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}
.navbar-nav .nav-link.active { color: var(--accent) !important; }
.text-primary { color: var(--accent) !important; }
.bg-primary { background-color: var(--accent) !important; }
.link-primary { color: var(--accent) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25);
}

/* honeypot field on the contact form (was theme.css .contact-form .hp) */
.hp { display: none; }

/* small uppercase label above a heading (kit convention; was theme.css .eyebrow) */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-bottom: .5rem;
}
.hero-newage .eyebrow { color: inherit; opacity: .85; }   /* white-on-gradient */

/* ── Brand / navbar ───────────────────────────────────────────────────── */
.navbar-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; }
.navbar-brand img { width: 36px; height: 36px; object-fit: contain; }
.navbar-brand .brand-tagline {
  display: block; font-size: .68rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .18em; opacity: .7; line-height: 1; margin-top: 1px;
}

/* ── Hero — Personal (columns come from Bootstrap row/col) ─────────────── */
.hero-personal { padding: 4.5rem 0 3.5rem; }
.hero-personal .hero-portrait img {
  width: 100%; max-width: 360px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 24px; padding: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-to));
  box-shadow: 0 30px 60px -20px rgba(var(--accent-rgb), .35);
}
.hero-personal .hero-socials { display: flex; gap: 1.1rem; margin-top: 1.5rem; font-size: 1.4rem; }
.hero-personal .hero-socials a { color: inherit; opacity: .6; transition: opacity .15s, transform .15s; }
.hero-personal .hero-socials a:hover { opacity: 1; color: var(--accent); transform: translateY(-2px); }

/* ── Hero — New Age (full-bleed gradient) ─────────────────────────────── */
.hero-newage {
  padding: 7rem 0 5rem; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-to));
}
.hero-newage .lead { color: rgba(255, 255, 255, .92); }
.hero-newage .btn-primary {            /* white CTA on the gradient */
  --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--accent);
  --bs-btn-hover-bg: rgba(255, 255, 255, .9); --bs-btn-hover-border-color: rgba(255, 255, 255, .9);
  --bs-btn-hover-color: var(--accent);
  --bs-btn-active-bg: #fff; --bs-btn-active-color: var(--accent); --bs-btn-active-border-color: #fff;
}
.hero-newage .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .6); }

/* feature-card icon (Bootstrap .card handles the rest) */
.feature-icon {
  font-size: 2rem; line-height: 1; margin-bottom: .6rem; display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-grad-to));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { padding: 1.5rem 0; border-top: 1px solid var(--bs-border-color); }
.site-footer .footer-socials a { color: var(--bs-secondary-color); margin: 0 .5rem; text-decoration: none; }
.site-footer .footer-socials a:hover { color: var(--accent); }