/* ==========================================================================
   Kleinfontein.net — Cassiopeia user.css
   Brand overrides to match original Shape5 Forte template look
   
   MOENIE HIERDIE LEER WYSIG NIE — Kontak Jaco as nodig
   DO NOT EDIT THIS FILE — Contact Jaco if changes are needed
   
   This file targets ONLY Cassiopeia template classes (stable).
   Extension-specific CSS is handled by each extension's own config.
   ========================================================================== */

/* --- Google Fonts -------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Raleway:wght@400;600;700&display=swap");

/* --- CSS Custom Properties ----------------------------------------------- */
:root {
  --brand-red:        #c82f2c;
  --brand-red-hover:  #aa110e;
  --body-bg:          #505050;
  --header-bg:        #3a3a3a;
  --content-bg:       #ffffff;
  --text-colour:      #333333;
  --sidebar-bg:       #414141;
  --max-width:        1400px;

  /* Neutralize Cassiopeia color system — pure grey, no color tint */
  --hue: 0;
  --cassiopeia-color-primary: #333333;
  --cassiopeia-color-link:    #333333;
  --cassiopeia-color-hover:   #555555;
  --link-color: #333333;
  --link-color-rgb: 51, 51, 51;
  --link-hover-color: #555555;
  --link-hover-color-rgb: 85, 85, 85;
  --template-bg-light: #f5f5f5;
  --template-text-dark: #333333;
  --template-special-color: #333333;

  /* Override all hsl(--hue, 40%, X%) computed colors to neutral greys */
  --template-bg-dark:      hsl(0, 0%, 20%);
  --template-bg-dark-3:    hsl(0, 0%, 97%);
  --template-bg-dark-5:    hsl(0, 0%, 95%);
  --template-bg-dark-7:    hsl(0, 0%, 93%);
  --template-bg-dark-10:   hsl(0, 0%, 90%);
  --template-bg-dark-15:   hsl(0, 0%, 85%);
  --template-bg-dark-20:   hsl(0, 0%, 80%);
  --template-bg-dark-30:   hsl(0, 0%, 70%);
  --template-bg-dark-40:   hsl(0, 0%, 60%);
  --template-bg-dark-50:   hsl(0, 0%, 50%);
  --template-bg-dark-60:   hsl(0, 0%, 40%);
  --template-bg-dark-65:   hsl(0, 0%, 35%);
  --template-bg-dark-70:   hsl(0, 0%, 30%);
  --template-bg-dark-75:   hsl(0, 0%, 25%);
  --template-bg-dark-80:   hsl(0, 0%, 20%);
  --template-bg-dark-90:   hsl(0, 0%, 10%);
}

/* --- Body & Global ------------------------------------------------------- */
body {
  background-color: var(--body-bg);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-colour);
  font-size: 14px;
  line-height: 1.6;
}

/* --- Container / Layout -------------------------------------------------- */
.container-header,
.site-grid,
.container-banner,
.container-footer {
  max-width: var(--max-width);
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

/* --- HEADER -------------------------------------------------------------- */
/* Override Cassiopeia dark header - make it WHITE like original Forte */
header.header.container-header.full-width,
header.header.container-header,
.container-header {
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  max-width: var(--max-width);
  width: 96%;
  margin: 0 auto;
}

/* Override all white-on-dark text colors in header */
.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .mod-menu,
.container-header .mod-menu a,
.container-header .mod-menu button,
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-finder,
.container-header .mod-finder a:not(.jmodedit) {
  color: var(--text-colour) !important;
}

/* Remove the white underline effect on nav items */
.container-header .mod-menu > li:after,
.container-header .metismenu > li > a:after,
.container-header .metismenu > li > button:before {
  display: none !important;
}

/* Logo area */
.navbar-brand {
  padding: 10px 0;
  margin: 0;
}

.brand-logo img {
  max-height: 50px;
  width: auto;
}

/* --- NAVIGATION ---------------------------------------------------------- */
/* Nav below logo on white background (matching Forte) */
.container-nav {
  background-color: transparent;
  padding: 0 !important;
  margin: 0;
}

/* Top-level nav links */
.container-nav .mod-menu.nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
}

.container-nav .mod-menu.nav > .nav-item {
  position: relative;
}

.container-nav .mod-menu.nav > .nav-item > a,
.container-nav .mod-menu.nav > .nav-item > button {
  color: var(--text-colour) !important;
  font-family: "Raleway", "Open Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Separator text in buttons */
.container-nav .mod-menu__separator {
  color: var(--text-colour) !important;
  font-family: "Raleway", "Open Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* Hover state */
.container-nav .mod-menu.nav > .nav-item > a:hover,
.container-nav .mod-menu.nav > .nav-item > a:focus,
.container-nav .mod-menu.nav > .nav-item > button:hover,
.container-nav .mod-menu.nav > .nav-item > button:focus {
  background-color: var(--brand-red);
  color: #ffffff !important;
}

.container-nav .mod-menu.nav > .nav-item > button:hover .mod-menu__separator,
.container-nav .mod-menu.nav > .nav-item > button:focus .mod-menu__separator {
  color: #ffffff;
}

/* Active separator white */
.container-nav .mod-menu.nav > .nav-item.active > button .mod-menu__separator,
.container-nav .mod-menu.nav > .nav-item.current > button .mod-menu__separator {
  color: #ffffff;
}

/* Active / current menu item - RED BACKGROUND like original */
.container-nav .mod-menu.nav > .nav-item.active > a,
.container-nav .mod-menu.nav > .nav-item.current > a,
.container-nav .mod-menu.nav > .nav-item.active > button,
.container-nav .mod-menu.nav > .nav-item.current > button {
  background-color: var(--brand-red);
  color: #ffffff !important;
}

.container-nav .mod-menu.nav > .nav-item.active > button .mod-menu__separator,
.container-nav .mod-menu.nav > .nav-item.current > button .mod-menu__separator {
  color: #ffffff;
}

/* Dropdown chevron icon */
.container-nav .icon-chevron-down {
  font-size: 10px;
  color: var(--text-colour) !important;
}

/* White chevron on active/hover items */
.container-nav .nav-item.active .icon-chevron-down,
.container-nav .nav-item.current .icon-chevron-down,
.container-nav .nav-item:hover .icon-chevron-down {
  color: #ffffff !important;
}

/* --- Dropdown Menus ------------------------------------------------------ */
.container-nav .mod-menu__sub {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-top: 3px solid var(--brand-red);
  padding: 5px 0;
  min-width: 220px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
}

.container-nav .mod-menu__sub .nav-item > a,
.container-nav .mod-menu__sub .nav-item > button,
.container-nav .mod-menu__sub .mod-menu__separator {
  color: var(--text-colour) !important;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  padding: 6px 18px;
  display: block;
  text-decoration: none !important;
  transition: background-color 0.15s, color 0.15s;
}

.container-nav .mod-menu__sub .nav-item > a:hover,
.container-nav .mod-menu__sub .nav-item > a:focus,
.container-nav .mod-menu__sub .nav-item > button:hover {
  background-color: var(--brand-red);
  color: #ffffff !important;
}

/* Nested sub-menus */
.container-nav .mod-menu__sub .mod-menu__sub {
  border-top: 2px solid var(--brand-red);
}

/* --- Search Box in Header ------------------------------------------------ */
.container-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 6px 0;
}

.container-search .form-control {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  color: #333;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 2px 0 0 2px;
  max-width: 160px;
}

.container-search .form-control::placeholder {
  color: #999;
}

.container-search .form-control:focus {
  background-color: #ffffff;
  border-color: var(--brand-red);
  box-shadow: none;
  color: #333;
}

.container-search .btn-primary {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 0 2px 2px 0;
}

/* Search text color override for white header */
.container-header .container-search .form-control {
  color: #333 !important;
}

/* --- BANNER / PROMO AREA ------------------------------------------------- */
/* Grey info bar with login link (replaces old promo1) */
.container-banner {
  display: block;
}

/* --- MAIN CONTENT AREA --------------------------------------------------- */
.site-grid {
  background-color: var(--content-bg);
  padding: 0;
  border-radius: 0;
  margin-top: 0;
}

/* Content component area */
.container-component {
  padding: 20px 25px;
}

/* --- SIDEBAR ------------------------------------------------------------- */
/* Right sidebar */
.container-sidebar-right,
.sidebar-right {
  padding: 15px;
  background-color: #f9f9f9;
}

/* --- SIDEBAR MODULE HEADERS — RED BARS ----------------------------------- */
/* This is the signature Kleinfontein look: red header bar with white text */
.container-sidebar-right .card,
.sidebar-right .card,
.container-sidebar-right .mod-custom,
.sidebar-right .mod-custom,
.container-sidebar-right [class*="mod-"],
.sidebar-right [class*="mod-"] {
  margin-bottom: 15px;
}

/* Module titles in sidebar - dark grey bar with red left accent (matches Forte) */
.container-sidebar-right h3,
.sidebar-right h3,
.container-sidebar-right .card-header,
.sidebar-right .card-header,
.container-sidebar-right .mod-header,
.sidebar-right .mod-header {
  background-color: #292929;
  color: #ffffff !important;
  font-family: "Raleway", "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  margin: 0 0 0 0;
  border: none;
  border-left: 3px solid var(--brand-red);
  border-radius: 0;
  line-height: 1.3;
}

/* Ensure links in sidebar headers are also white */
.container-sidebar-right h3 a,
.sidebar-right h3 a,
.container-sidebar-right .card-header a,
.sidebar-right .card-header a {
  color: #ffffff !important;
  text-decoration: none;
}

/* Sidebar module body */
.container-sidebar-right .card-body,
.sidebar-right .card-body {
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-top: none;
  font-size: 13px;
  line-height: 1.6;
}

/* Sidebar module wrapper styling */
.container-sidebar-right .card,
.sidebar-right .card {
  border: none;
  border-radius: 0;
  overflow: hidden;
}

/* --- HEADINGS ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", "Open Sans", sans-serif;
  font-weight: 700;
  color: var(--text-colour);
}

h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

/* Article titles */
.page-header h1,
.blog .page-header h2,
.item-page h1,
.item-page h2 {
  font-family: "Raleway", "Open Sans", sans-serif;
  font-weight: 700;
  color: var(--text-colour);
  padding-bottom: 0;
  margin-bottom: 15px;
}

/* --- LINKS --------------------------------------------------------------- */
/* Links are dark by default (matching original Forte), red only on hover */
a {
  color: var(--text-colour);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--brand-red);
  text-decoration: underline;
}

/* Article title links */
.page-header a,
h2 a,
h3 a {
  color: var(--text-colour);
}

.page-header a:hover,
h2 a:hover,
h3 a:hover {
  color: var(--brand-red);
}

/* Read more links */
.readmore a,
a.readmore {
  color: var(--text-colour);
  text-transform: uppercase;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
}

.readmore a:hover,
a.readmore:hover {
  color: var(--brand-red);
}

/* --- BREADCRUMBS --------------------------------------------------------- */
.mod-breadcrumbs {
  background-color: #f5f5f5;
  font-size: 12px;
  padding: 8px 15px;
  margin-bottom: 15px;

}

/* --- BUTTONS ------------------------------------------------------------- */
.btn-primary,
.btn-primary.disabled,
button.btn-primary {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: #ffffff;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.03em;
  border-radius: 2px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus {
  background-color: var(--brand-red-hover);
  border-color: var(--brand-red-hover);
  color: #ffffff;
}

.btn-outline-primary {
  color: var(--brand-red);
  border-color: var(--brand-red);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: #ffffff;
}

/* --- FOOTER -------------------------------------------------------------- */
footer.footer,
.container-footer {
  background-color: var(--header-bg);
  color: #cccccc;
  font-size: 13px;
  padding: 20px 0;
}

/* Full-width footer background */
footer.footer.full-width {
  max-width: 100%;
  width: 100%;
}

footer.footer a {
  color: #ffffff;
}

footer.footer a:hover {
  color: var(--brand-red);
}

/* --- Breadcrumb "You are here" ------------------------------------------- */
.mod-breadcrumbs__here {
  font-weight: 600;
}

/* --- Pagination ---------------------------------------------------------- */
.pagination {
  justify-content: center;
}

.page-item.active .page-link {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
}

.page-link {
  color: var(--text-colour);
}

.page-link:hover {
  color: var(--brand-red);
}

/* Page counter (Page 1 of 7) */
.counter.float-end {
  float: none !important;
  text-align: center;
  display: block;
  margin-top: 10px;
}

/* --- Back-to-top --------------------------------------------------------- */
.back-to-top-link {
  background-color: var(--brand-red);
}

.back-to-top-link:hover {
  background-color: var(--brand-red-hover);
}

/* --- Selection highlight ------------------------------------------------- */
::selection {
  background-color: var(--brand-red);
  color: #ffffff;
}

/* --- Mobile Adjustments -------------------------------------------------- */
@media (max-width: 992px) {
  header.header.container-header {
    flex-wrap: wrap;
  }

  .container-nav {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .container-nav .mod-menu.nav {
    flex-direction: column;
    width: 100%;
  }

  .container-nav .mod-menu.nav > .nav-item > a,
  .container-nav .mod-menu.nav > .nav-item > button {
    padding: 10px 15px;
    font-size: 13px;
  }

  .container-search {
    padding: 8px 0;
    width: 100%;
  }

  .container-search .form-control {
    max-width: 100%;
  }

  .container-sidebar-right,
  .sidebar-right {
    padding: 15px 0;
  }
}


/* ==========================================================================
   Phase 4b — Layout & styling updates (2026-03-17)
   ========================================================================== */

/* --- TASK 1: Header — Logo + Nav on SAME ROW ----------------------------- */
/* Override Cassiopeia grid to flex so logo and nav sit side-by-side */
header.header.container-header.full-width,
header.header.container-header {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 15px;
}

/* Logo grid-child */
header.header .grid-child:first-of-type {
  flex: 0 0 auto;
  margin-right: 20px;
}

/* Make logo bigger to match old site proportions */
.brand-logo img {
  max-height: 50px !important;
  height: 50px !important;
  width: auto;
}

/* Nav grid-child — take remaining space */
header.header .grid-child.container-nav {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Nav items should wrap if needed */
.container-nav .mod-menu.nav {
  flex-wrap: wrap;
}

/* --- TASK 3: Grey info bar below header ---------------------------------- */
.container-banner.full-width {
  background-color: #292929 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kf-info-bar {
  max-width: var(--max-width);
  width: 96%;
  margin: 0 auto;
  padding: 4px 15px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 12px;
  font-family: "Raleway", "Open Sans", sans-serif;
}

.kf-info-login {
  color: #c82f2c !important;
  text-decoration: none !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  transition: color 0.2s ease;
}

.kf-info-login:hover {
  color: var(--brand-red) !important;
}

/* --- TASK 4: Sidebar first word red -------------------------------------- */
.kf-first-word {
  color: #c82f2c !important;
}

/* --- TASK 5: Remove underline from article title links ------------------- */
.page-header a,
h1 a,
h2 a,
.blog-item h2 a,
.item-page h1 a,
.page-header a:hover,
h1 a:hover,
h2 a:hover {
  text-decoration: none !important;
}

/* --- TASK 6: Compact search — icon only ---------------------------------- */
.container-search .form-control {
  display: none !important;
}

.container-search .btn-primary {
  border-radius: 2px !important;
  padding: 6px 10px !important;
}

/* --- Responsive: keep stacked on mobile ---------------------------------- */
@media (max-width: 992px) {
  header.header.container-header.full-width,
  header.header.container-header {
    flex-direction: column;
    align-items: flex-start;
  }

  header.header .grid-child:first-of-type {
    margin-right: 0;
  }

  header.header .grid-child.container-nav {
    width: 100%;
  }
}


/* --- TASK 7: Hover dropdowns on desktop ---------------------------------- */
@media (min-width: 993px) {
  /* Parent items with dropdowns - style the toggle button like a nav link */
  .container-nav .mod-menu__toggle-sub {
    cursor: pointer;
  }

  /* Position parent items for dropdown */
  .container-nav .mod-menu.nav > .nav-item {
    position: relative;
  }

  /* Hide submenus by default - override Cassiopeia JS toggle */
  .container-nav .mod-menu__sub {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
  }

  /* Show submenu on hover */
  .container-nav .mod-menu.nav > .nav-item:hover > .mod-menu__sub {
    display: block !important;
  }

  /* Nested submenus fly out right */
  .container-nav .mod-menu__sub .mod-menu__sub {
    top: 0;
    left: 100%;
  }

  .container-nav .mod-menu__sub .nav-item {
    position: relative;
  }

  .container-nav .mod-menu__sub .nav-item:hover > .mod-menu__sub {
    display: block !important;
  }

  /* Close submenus when mouse leaves */
  .container-nav .mod-menu.nav > .nav-item:not(:hover) > .mod-menu__sub {
    display: none !important;
  }
}

/* --- Pagination block backgrounds --------------------------------------- */
.page-link {
  background-color: #f5f5f5 !important;
  border-color: #ddd !important;
}

.page-item.active .page-link {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #fff !important;
}

/* --- Login page: Forgot password/username blocks ------------------------ */
.com_users .list-group-item,
.com_users .well,
.com_users .card {
  background-color: #ffffff !important;
  border-color: #e0e0e0 !important;
}