/* ========================================
   VAAC CUSTOM THEME (BASED ON BRAND GUIDE)
======================================== */

/* ========= GOOGLE FONTS ========= */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;700&family=Open+Sans:wght@400;600&display=swap');

/* ========= DESIGN TOKENS ========= */
:root {
  --primary: #5a2653;
  --primary-dark: #3e405b;

  --accent-blue: #a7c7e7;
  --accent-red: #d98c95;
  --accent-yellow: #f3cf94;
  --accent-teal: #4fa7a0;

  --bg: #f7f5f2;
  --bg-soft: #edeae6;

  --text: #3e405b;
  --text-light: #697596;

  --border: #e0ddd8;

  --radius: 6px;
}

/* ========= GLOBAL ========= */
body {
  font-family: 'Open Sans', sans-serif;
  color: var(--text);
  background-color: var(--bg);
}

a {
  color: var(--primary);
  font-weight: 600;
}

a:hover {
  color: var(--primary-dark);
}

/* ========= TYPOGRAPHY ========= */
h1, h2, h3, h4 {
  font-family: 'Nunito Sans', sans-serif;
  color: var(--primary);
  font-weight: 700;
}

h5, h6 {
  font-family: 'Nunito Sans', sans-serif;
  color: var(--text);
}

p {
  line-height: 1.7;
}

/* ========= NAVBAR ========= */
.navbar {
  background-color: var(--primary);
  border: none;
  border-radius: 0;
}

.navbar-brand,
.navbar-nav > li > a {
  color: #ffffff !important;
  font-weight: 600;
}

.navbar-nav > li > a:hover,
.navbar-nav > .active > a {
  background-color: var(--primary-dark) !important;
}

/* ========= HERO / HEADER ========= */
.jumbotron {
  background-color: var(--bg-soft);
  border-radius: var(--radius);
}

/* ========= BUTTONS ========= */
.btn {
  border-radius: var(--radius);
  font-weight: 600;
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

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

/* Secondary button (nice VAAC feel) */
.btn-default {
  background-color: var(--accent-yellow);
  border-color: var(--accent-yellow);
  color: #333;
}

.btn-default:hover {
  background-color: #e6b96f;
}

/* ========= PANELS ========= */
.panel {
  border-radius: var(--radius);
  border-color: var(--border);
}

.panel-heading {
  background-color: var(--bg-soft);
  color: var(--primary);
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
}

/* ========= CARDS / CONTENT BLOCKS ========= */
.well,
.panel-body {
  
  border-radius: var(--radius);
}

/* ========= SIDEBAR ========= */
.sidebar {
  background-color: var(--bg-soft);
  padding: 20px;
  border-radius: var(--radius);
}

/* ========= FOOTER ========= */
footer {
  background-color: var(--primary);
  color: #ffffff;
  padding: 40px 0;
}

footer a {
  color: var(--accent-yellow);
}

footer a:hover {
  color: #ffffff;
}

/* ========= E-VOICE COMPONENTS ========= */
.includelet-title {
  font-family: 'Nunito Sans', sans-serif;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 10px;
}

/* ========= SECTIONS ========= */
.section {
  padding: 50px 0;
}

.section-alt {
  background-color: var(--bg-soft);
}

/* ========= UTILITIES ========= */
.text-muted {
  color: var(--text-light);
}

/* Accent helpers (use in content) */
.bg-blue { background-color: var(--accent-blue); }
.bg-red { background-color: var(--accent-red); }
.bg-yellow { background-color: var(--accent-yellow); }
.bg-teal { background-color: var(--accent-teal); }

/* ========= FORMS ========= */
.form-control {
  border-radius: var(--radius);
  border-color: var(--border);
  box-shadow: none;
}

.form-control:focus {
  border-color: var(--primary);
}

/* ========= MOBILE ========= */
@media (max-width: 768px) {
  .navbar-nav {
    background-color: var(--primary);
  }

  .section {
    padding: 25px 0;
  }
}