/* ======================================================
   Tinker Fox – Custom Styles
   Primary: Orange
   Accent: Teal
   ====================================================== */

/* ---------- CSS Variables ---------- */
:root {
  --tf-orange: #f28c28;
  --tf-orange-dark: #d97706;
  --tf-teal: #1fa4a9;
  --tf-teal-dark: #158489;

  --tf-text-dark: #1f2933;
  --tf-text-muted: #6b7280;
  --tf-bg-light: #f9fafb;
}

/* ---------- Base Typography ---------- */
body {
  color: var(--tf-text-dark);
  line-height: 1.6;
}

h1, h2, h3, h4, h5 {
  letter-spacing: -0.02em;
}

.lead {
  color: var(--tf-text-muted);
}

/* ---------- Navbar ---------- */
.navbar-brand {
  color: var(--tf-orange);
}

.navbar-brand:hover {
  color: var(--tf-orange-dark);
}

.nav-link {
  font-weight: 500;
}

.nav-link:hover {
  color: var(--tf-teal);
}

/* ---------- Navbar Logo ---------- */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tf-orange);
  line-height: 1;
}

.navbar-brand img {
  height: 36px;
  width: auto;
  display: block;
}

.navbar-brand span {
  font-weight: 700;
  font-size: 28px; /* Match SVG height -8 */
  line-height: 1;
  display: flex;
  align-items: center;
}

@media (max-width: 576px) {
  .navbar-brand img {
    height: 32px;
  }

  .navbar-brand span {
    font-size: 32px;
  }
}


/* ---------- Buttons ---------- */
.btn-primary {
  background-color: var(--tf-orange);
  border-color: var(--tf-orange);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--tf-orange-dark);
  border-color: var(--tf-orange-dark);
}

.btn-outline-primary {
  color: var(--tf-teal);
  border-color: var(--tf-teal);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--tf-teal);
  border-color: var(--tf-teal);
  color: #fff;
}

/* ---------- Links ---------- */
a {
  color: var(--tf-teal);
  text-decoration: none;
}

a:hover {
  color: var(--tf-teal-dark);
  text-decoration: underline;
}

/* ---------- Sections ---------- */
section {
  scroll-margin-top: 80px;
}

.bg-light {
  background-color: var(--tf-bg-light) !important;
}

/* ---------- Cards ---------- */
.card {
  border: none;
  border-radius: 0.75rem;
}

.card-title {
  font-weight: 600;
}

.card-img-top {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

/* ---------- Lists ---------- */
ul {
  padding-left: 1.2rem;
}

ul li {
  margin-bottom: 0.4rem;
}

/* ---------- Images ---------- */
img {
  max-width: 100%;
  height: auto;
}

/* ---------- Footer ---------- */
footer {
  color: var(--tf-text-muted);
}

footer a {
  color: var(--tf-teal);
}

footer a:hover {
  color: var(--tf-teal-dark);
}

/* ---------- Utility ---------- */
.shadow-sm {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.rounded {
  border-radius: 0.75rem !important;
}

.border-dashed {
  border: 2px dashed #d1d5db !important;
  background-color: #fafafa;
}