/* connect-bootstrap-skin.css */
/* Load AFTER bootstrap.css and AFTER connect-brand.css */

:root{
  --bs-body-font-family: var(--cc-font);
  --bs-body-font-size: var(--cc-body-font-size);
  --bs-body-line-height: var(--cc-body-line-height);
  --bs-body-color: var(--cc-text);
  --bs-body-bg: var(--cc-bg);

  --bs-primary: var(--cc-primary);
  --bs-secondary: var(--cc-accent);

  --bs-link-color: var(--cc-primary);
  --bs-link-hover-color: var(--cc-accent);
}

/* Headings: match Divi vibe */
h1,h2,h3,.h1,.h2,.h3{
  font-family: var(--cc-font);
  font-weight: var(--cc-heading-font-weight);
}

/* Optional: accent heading utility */
.cc-accent-heading{
  color: var(--cc-accent) !important;
  font-size: var(--cc-heading-font-size);
  line-height: var(--cc-heading-line-height);
  font-weight: var(--cc-heading-font-weight);
}

/* ===============================
   CONNECT BUTTONS
   Use Bootstrap's own CSS variables so hover ALWAYS works.
   =============================== */

/* Shared Connect button styling */
.btn.btn-primary,
.btn.btn-warning{
  font-family: var(--cc-font);
  font-size: var(--cc-btn-font-size);
  font-weight: var(--cc-btn-font-weight);
  padding: var(--cc-btn-padding-y) var(--cc-btn-padding-x);
  border-radius: var(--cc-btn-radius);
  line-height: 1.2;
}

/* Blue button */
.btn.btn-primary{
  --bs-btn-color: var(--cc-btn-text);
  --bs-btn-bg: var(--cc-primary);
  --bs-btn-border-color: var(--cc-primary);

  --bs-btn-hover-color: var(--cc-btn-text);
  --bs-btn-hover-bg: var(--cc-hover);
  --bs-btn-hover-border-color: var(--cc-hover);

  --bs-btn-active-color: var(--cc-btn-text);
  --bs-btn-active-bg: var(--cc-hover);
  --bs-btn-active-border-color: var(--cc-hover);

  --bs-btn-focus-shadow-rgb: 64, 80, 158;
}

/* Orange button */
.btn.btn-warning{
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--cc-accent);
  --bs-btn-border-color: var(--cc-accent);

  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--cc-hover);
  --bs-btn-hover-border-color: var(--cc-hover);

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--cc-hover);
  --bs-btn-active-border-color: var(--cc-hover);

  --bs-btn-focus-shadow-rgb: 241, 145, 67;
}

/* Remove any default button shadows */
.btn{ box-shadow: none !important; }

/* Forms: slightly Divi-ish */
.form-control, .form-select{
  font-family: var(--cc-font);
  color: var(--cc-text);
}

.form-control:focus,
.form-select:focus{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(64, 80, 158, 0.25);
  border-color: rgba(64, 80, 158, 0.6);
}

/* Links */
a{ text-decoration-thickness: auto; }
a:hover{ text-decoration-color: currentColor; }

/* App-like surfaces */
.cc-surface{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}

/* Compact app headers */
.cc-page-title{
  font-size: 24px;
  font-weight: 700;
  margin-bottom: .25rem;
}
.cc-page-subtitle{
  color: var(--cc-text);
  opacity: .8;
  margin-bottom: 1rem;
}

/* Tables: a bit more “app” */
.table thead th{
  font-weight: 700;
  color: #444;
  border-bottom-width: 1px;
}
.table td, .table th{
  vertical-align: middle;
}