/*
  Hybrid Variant new_7
  - Structure: Tabbed (new_2)
  - Palette: Elegant (new_4)
  Maintenance note: Keep custom layer light; lean on Bootstrap utilities.
*/

/* Theme Variables */
:root {
  --primary: #198754;
  --bg: #fafafa;
  --ink: #2b2b2b;
  --light: #ffffff;
  --shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08);
  /* Bootstrap CSS variables for consistent theming */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-primary: var(--primary);
  --bs-success: var(--primary);
}

/* Base */
html {
  scroll-padding-top: 4.5rem;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* Typography */
.h-serif,
.section-title,
.navbar-brand {
  font-family: "Georgia", "Times New Roman", serif;
}

.section-title {
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.meta {
  font-size: .875rem;
  color: #6c757d;
}

/* Navigation */
.navbar {
  background: #1a1f1d;
}

.navbar-brand {
  font-weight: 700;
}

/* Hero */
.hero {
  /* Photo/illustration background with soft overlay and palette match */
  background-image:
    linear-gradient(to bottom, rgba(26, 31, 29, 0.38), rgba(26, 31, 29, 0.28)),
    url('../img/hero-fabric.svg'),
    linear-gradient(135deg, #e8f5e9, #fff);
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: cover, 80px 60px, auto;
  background-position: center, top left, center;
  padding: 5.5rem 0;
  color: #ffffff;
}

.hero .h-serif {
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* Content & Utilities */
.shadow-soft {
  box-shadow: var(--shadow);
}

.table {
  background: var(--light);
}

/* Tabs */
.nav-pills .nav-link {
  border-radius: 50rem;
  font-weight: 600;
}

.nav-pills .nav-link.active {
  background: var(--primary);
}

.tab-pane {
  animation: fade .25s ease-in;
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

.btn-success:hover {
  filter: brightness(0.92);
}

/* Focus visibility for accessibility */
.nav-link:focus-visible,
.btn-link:focus-visible,
.footer a:focus-visible,
a:focus-visible {
  outline: 3px solid #9fd3b5;
  outline-offset: 2px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .tab-pane {
    animation: none !important;
  }
}

/* Footer */
.footer {
  background: #1a1f1d;
  color: #cfcfcf;
  padding: 2rem 0 1rem;
  margin-top: 3rem;
}

.footer a {
  color: #9fd3b5;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}