/* ============================================
   STARTING SOLIDS AUSTRALIA — TEVELLO THEME
   Brand-corrected: Baloo 2 + Poppins, locked palette
   ============================================ */

/* ---- BRAND FONTS (must stay at the very top) ---- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---- ROOT VARIABLES (locked brand palette) ---- */
:root {
  --primary-color: #1d4653;     /* Deep teal — headings, header/footer, primary buttons, body text */
  --primary-light: #39a487;     /* Emerald — CTAs, hovers, links, progress, success */
  --accent-rose:   #e49aa3;     /* Dusty rose — secondary buttons, accent borders, badges */
  --accent-blush:  #f3b8b7;     /* Blush pink — panels, card fills, alternating rows */
  --accent-sage:   #a6ccd2;     /* Soft sage teal — info blocks, icon discs */
  --background:    #fbe6e7;     /* Pale pink cream — page background */
  --surface:       #ffffff;     /* White — cards, contrast surfaces */
  --text-dark:     #1d4653;     /* Body text = deep teal (never pure black) */
  --text-light:    #5b7780;     /* Muted teal-grey for secondary text */
  --border-color:  #f1d7d9;     /* Soft blush border */
  --success-color: #39a487;     /* Emerald */
  --error-color:   #c0626b;     /* Muted rose-red (functional only) */
}

/* ---- GENERAL CONTAINER & BACKGROUND ---- */
body,
.tevello-container,
.tevello-wrapper {
  background-color: var(--background);
  color: var(--text-dark);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

/* ---- HEADINGS (Baloo 2) ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Baloo 2', cursive;
  color: var(--text-dark);
  font-weight: 700;
  line-height: 1.25;
}

h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--primary-color);
  border-bottom: 3px solid var(--accent-rose);
  padding-bottom: 12px;
}

h2 {
  font-size: 24px;
  color: var(--primary-color);
  margin-top: 24px;
  margin-bottom: 16px;
}

h3 {
  font-size: 18px;
  color: var(--text-dark);
  margin-top: 16px;
  margin-bottom: 12px;
}

/* ---- HEADER & NAVIGATION ---- */
.tevello-header,
.tevello-nav,
header {
  background-color: var(--primary-color);
  color: #ffffff;
  border-bottom: 3px solid var(--accent-rose);
}

.tevello-header h1,
.tevello-header h2,
.tevello-nav a {
  color: #ffffff;
  font-weight: 600;
}

.tevello-nav a:hover {
  background-color: var(--primary-light);
  color: #ffffff;
}

/* ---- BUTTONS ---- */
.tevello-btn,
button,
.button,
.btn {
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tevello-btn:hover,
button:hover,
.button:hover,
.btn:hover {
  background-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(29, 70, 83, 0.20);
}

.tevello-btn-cta,
button.cta,
.button.cta {
  background-color: var(--primary-light);
  color: #ffffff;
}

.tevello-btn-cta:hover,
button.cta:hover,
.button.cta:hover {
  background-color: #2f8c72;
}

.tevello-btn-secondary,
button.secondary,
.button.secondary {
  background-color: var(--accent-rose);
  color: #ffffff;
}

.tevello-btn-secondary:hover,
button.secondary:hover,
.button.secondary:hover {
  background-color: #d98890;
  box-shadow: 0 4px 12px rgba(228, 154, 163, 0.30);
}

.tevello-btn-outline,
button.outline,
.button.outline {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.tevello-btn-outline:hover,
button.outline:hover,
.button.outline:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

/* ---- CARDS & CONTAINERS ---- */
.tevello-card,
.card,
.container-box {
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(29, 70, 83, 0.06);
  transition: all 0.3s ease;
}

.tevello-card:hover,
.card:hover,
.container-box:hover {
  box-shadow: 0 6px 18px rgba(57, 164, 135, 0.12);
  border-color: var(--accent-sage);
}

/* ---- FORM INPUTS ---- */
input,
textarea,
select,
.form-input,
.form-control {
  background-color: var(--surface);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text-dark);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.form-control:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(57, 164, 135, 0.15);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-light);
}

/* ---- LABELS ---- */
label,
.form-label {
  color: var(--text-dark);
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

/* ---- LINKS ---- */
a,
.link {
  color: var(--primary-light);
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
}

a:hover,
.link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* ---- BADGES & TAGS ---- */
.badge,
.tag,
.label-badge {
  background-color: var(--accent-rose);
  color: #ffffff;
  border-radius: 999px;
  padding: 6px 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.badge.success,
.tag.success { background-color: var(--success-color); color: #ffffff; }
.badge.error,
.tag.error { background-color: var(--error-color); color: #ffffff; }
.badge.primary,
.tag.primary { background-color: var(--primary-color); color: #ffffff; }

/* ---- ALERTS & MESSAGES ---- */
.alert,
.message,
.notification {
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  border-left: 4px solid;
}

.alert-success,
.message-success,
.notification-success {
  background-color: #e6f4ef;
  border-left-color: var(--success-color);
  color: var(--text-dark);
}

.alert-error,
.message-error,
.notification-error {
  background-color: #f8e6e8;
  border-left-color: var(--error-color);
  color: var(--text-dark);
}

.alert-info,
.message-info,
.notification-info {
  background-color: #eaf3f5;
  border-left-color: var(--accent-sage);
  color: var(--text-dark);
}

.alert-warning,
.message-warning,
.notification-warning {
  background-color: #fdeef0;
  border-left-color: var(--accent-rose);
  color: var(--text-dark);
}

/* ---- TABLES ---- */
table,
.table { width: 100%; border-collapse: collapse; background-color: var(--surface); }

table thead,
.table thead { background-color: var(--primary-color); color: #ffffff; }

table th,
.table th {
  padding: 12px;
  text-align: left;
  font-family: 'Baloo 2', cursive;
  font-weight: 600;
  border-bottom: 2px solid var(--primary-light);
}

table td,
.table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-dark);
}

table tbody tr:nth-child(even),
.table tbody tr:nth-child(even) { background-color: #fdeef0; }

table tbody tr:hover,
.table tbody tr:hover { background-color: #f6e0e2; }

/* ---- PAGINATION ---- */
.pagination,
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }

.pagination a,
.pagination button,
.pager a,
.pager button {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-dark);
  background-color: var(--surface);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination a:hover,
.pagination button:hover,
.pager a:hover,
.pager button:hover,
.pagination .active,
.pager .active {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

/* ---- MODALS & OVERLAYS ---- */
.modal,
.dialog,
.overlay { background-color: rgba(29, 70, 83, 0.5); }

.modal-content,
.dialog-content {
  background-color: var(--surface);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(29, 70, 83, 0.25);
}

.modal-header,
.dialog-header {
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.modal-footer,
.dialog-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  margin-top: 16px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ---- TABS ---- */
.tabs,
.tab-nav { display: flex; border-bottom: 2px solid var(--border-color); }

.tab,
.tab-item {
  padding: 12px 20px;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  font-weight: 500;
}

.tab:hover,
.tab-item:hover,
.tab.active,
.tab-item.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-light);
}

/* ---- PROGRESS BARS ---- */
.progress,
.progress-bar { background-color: var(--accent-blush); border-radius: 999px; height: 8px; overflow: hidden; }

.progress-fill,
.progress-bar-fill { background-color: var(--primary-light); height: 100%; transition: width 0.3s ease; }

/* ---- SPINNERS ---- */
.spinner,
.loader {
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-light);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- BREADCRUMBS ---- */
.breadcrumb,
.breadcrumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: 16px;
}
.breadcrumb a,
.breadcrumbs a { color: var(--primary-light); }
.breadcrumb a:hover,
.breadcrumbs a:hover { color: var(--primary-color); }
.breadcrumb span,
.breadcrumbs span { color: var(--text-light); }

/* ---- DROPDOWNS ---- */
.dropdown-menu,
.select-dropdown-menu {
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(29, 70, 83, 0.12);
  min-width: 200px;
  z-index: 1000;
}

.dropdown-item,
.select-dropdown-item {
  padding: 12px 16px;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dropdown-item:hover,
.select-dropdown-item:hover { background-color: #fdeef0; color: var(--primary-color); }
.dropdown-item.active,
.select-dropdown-item.active { background-color: var(--primary-color); color: #ffffff; }

/* ---- FOOTER ---- */
footer,
.tevello-footer {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 24px;
  margin-top: 40px;
  border-top: 3px solid var(--accent-rose);
}
footer a,
.tevello-footer a { color: var(--accent-blush); }
footer a:hover,
.tevello-footer a:hover { color: #ffffff; text-decoration: underline; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  .tevello-card, .card, .container-box { padding: 16px; }
  .tevello-btn, button, .button, .btn { padding: 10px 20px; font-size: 14px; }
  .modal-content, .dialog-content { padding: 16px; }
  .tabs, .tab-nav { flex-wrap: wrap; }
  .tab, .tab-item { padding: 10px 16px; font-size: 14px; }
}

/* ---- UTILITY CLASSES ---- */
.text-primary   { color: var(--primary-color); }
.text-accent    { color: var(--primary-light); }
.text-secondary { color: var(--text-light); }
.text-success   { color: var(--success-color); }
.text-error     { color: var(--error-color); }

.bg-primary { background-color: var(--primary-color); color: #ffffff; }
.bg-emerald { background-color: var(--primary-light); color: #ffffff; }
.bg-rose    { background-color: var(--accent-rose);   color: #ffffff; }
.bg-blush   { background-color: var(--accent-blush);  color: var(--text-dark); }
.bg-sage    { background-color: var(--accent-sage);   color: var(--text-dark); }
.bg-light   { background-color: var(--background);    color: var(--text-dark); }

.border-primary   { border: 2px solid var(--primary-color); }
.border-secondary { border: 2px solid var(--accent-rose); }

.rounded { border-radius: 8px; }
.rounded-lg { border-radius: 14px; }
.rounded-full { border-radius: 999px; }

.shadow { box-shadow: 0 2px 8px rgba(29, 70, 83, 0.10); }
.shadow-lg { box-shadow: 0 10px 30px rgba(29, 70, 83, 0.15); }

.m-0 { margin: 0; } .m-1 { margin: 8px; } .m-2 { margin: 16px; } .m-3 { margin: 24px; }
.p-0 { padding: 0; } .p-1 { padding: 8px; } .p-2 { padding: 16px; } .p-3 { padding: 24px; }

/* ---- ANIMATIONS ---- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes slideIn { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.slide-in { animation: slideIn 0.3s ease-in-out; }

/* ---- TEVELLO SPECIFIC ---- */
.tevello-widget { border-radius: 14px; border: 1px solid var(--border-color); background-color: var(--surface); }

.tevello-widget-header {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 14px 14px 0 0;
  font-family: 'Baloo 2', cursive;
  font-weight: 600;
}

.tevello-widget-body { padding: 16px; }

.tevello-widget-footer {
  border-top: 1px solid var(--border-color);
  padding: 12px 16px;
  background-color: #fdeef0;
  border-radius: 0 0 14px 14px;
}

.tevello-rating { color: var(--accent-rose); font-size: 18px; }
.tevello-rating.active { color: var(--primary-light); }

.tevello-comment {
  background-color: #fdeef0;
  border-left: 3px solid var(--primary-light);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.tevello-comment-author { font-weight: 600; color: var(--primary-color); }
.tevello-comment-date { font-size: 12px; color: var(--text-light); }
.tevello-comment-text { color: var(--text-dark); margin-top: 8px; line-height: 1.5; }

/* ---- PRINT ---- */
@media print {
  body { background-color: #ffffff; }
  .tevello-header, footer { background-color: var(--primary-color); color: #ffffff; }
  a { color: var(--primary-color); }
  .no-print { display: none; }
}

/* ---- HEADING COLOUR OVERRIDE ----
   Forces every lesson heading (and any text inside it) to brand deep teal,
   even where a colour was set manually in the editor. */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
  color: #1d4653 !important;
}