/* Foundation School global branding — loaded on every page.
   Overrides RemUI's stock blue brand with the navy + gold palette
   and applies League Spartan / Nunito typography across the site. */

:root {
  --fs-bg:        #F4EFE3;
  --fs-bg-2:      #FBF7EF;
  --fs-surface:   #FFFFFF;
  --fs-border:    #E6DDCC;
  --fs-ink:       #2F2250;
  --fs-ink-2:     #3A2F58;
  --fs-muted:     #7A6F86;
  --fs-navy:      #4C2A92;
  --fs-navy-d:    #3A1F75;
  --fs-navy-l:    #6D49C2;
  --fs-navy-ghost: rgba(76, 42, 146, 0.08);
  --fs-navy-ring:  rgba(76, 42, 146, 0.16);
  --fs-gold:      #F4BE41;
  --fs-gold-d:    #C47E0A;
  --fs-r-md:      14px;
  --fs-r-lg:      18px;
  --fs-r-pill:    999px;
  --fs-font-head: 'League Spartan', system-ui, sans-serif;
  --fs-font-body: 'Nunito', system-ui, sans-serif;
}

/* ============================================================
   TYPOGRAPHY — apply Foundation School fonts site-wide.
   Skip login pagelayout (it has its own scoped rules) to avoid
   double-application precedence issues.
   ============================================================ */
body:not(.pagelayout-login) {
  font-family: var(--fs-font-body) !important;
}
body:not(.pagelayout-login) h1,
body:not(.pagelayout-login) h2,
body:not(.pagelayout-login) h3,
body:not(.pagelayout-login) h4,
body:not(.pagelayout-login) h5,
body:not(.pagelayout-login) h6,
body:not(.pagelayout-login) .h1,
body:not(.pagelayout-login) .h2,
body:not(.pagelayout-login) .h3,
body:not(.pagelayout-login) .h4,
body:not(.pagelayout-login) .h5,
body:not(.pagelayout-login) .h6,
body:not(.pagelayout-login) .pagetitle,
body:not(.pagelayout-login) .page-header-headings h1 {
  font-family: var(--fs-font-head) !important;
  letter-spacing: -0.01em !important;
}

/* ============================================================
   PRIMARY BRAND COLOR — replace RemUI's #0051f9 with our navy.
   ============================================================ */
body:not(.pagelayout-login) .btn-primary,
body:not(.pagelayout-login) input[type="submit"].btn-primary {
  background-color: var(--fs-navy) !important;
  border-color: var(--fs-navy) !important;
  color: #fff !important;
}
body:not(.pagelayout-login) .btn-primary:hover,
body:not(.pagelayout-login) input[type="submit"].btn-primary:hover {
  background-color: var(--fs-navy-d) !important;
  border-color: var(--fs-navy-d) !important;
}
body:not(.pagelayout-login) .btn-primary:focus,
body:not(.pagelayout-login) .btn-primary:focus-visible {
  box-shadow: 0 0 0 4px var(--fs-navy-ring) !important;
}

/* Outline variants */
body:not(.pagelayout-login) .btn-outline-primary {
  color: var(--fs-navy) !important;
  border-color: var(--fs-navy) !important;
  background: transparent !important;
}
body:not(.pagelayout-login) .btn-outline-primary:hover {
  color: #fff !important;
  background-color: var(--fs-navy) !important;
  border-color: var(--fs-navy) !important;
}

/* Secondary buttons — navy outline */
body:not(.pagelayout-login) .btn-secondary {
  background: var(--fs-navy-ghost) !important;
  border-color: transparent !important;
  color: var(--fs-navy) !important;
}
body:not(.pagelayout-login) .btn-secondary:hover {
  background: var(--fs-navy) !important;
  color: #fff !important;
}

/* Bootstrap utility classes that RemUI uses */
body:not(.pagelayout-login) .bg-primary,
body:not(.pagelayout-login) .badge-primary,
body:not(.pagelayout-login) .badge.bg-primary { background-color: var(--fs-navy) !important; color: #fff !important; }
body:not(.pagelayout-login) .text-primary { color: var(--fs-navy) !important; }
body:not(.pagelayout-login) .border-primary { border-color: var(--fs-navy) !important; }

/* Links */
body:not(.pagelayout-login) a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--fs-navy);
}
body:not(.pagelayout-login) a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--fs-navy-d);
}

/* ============================================================
   RemUI specific overrides — top navbar header menu, sidebar, etc.
   ============================================================ */

/* Header / top navbar — RemUI uses .edw-navbar */
body:not(.pagelayout-login) .header-menu-text-active,
body:not(.pagelayout-login) .navbar-light .nav-link.active,
body:not(.pagelayout-login) .navbar-light .nav-link:hover {
  color: var(--fs-navy) !important;
}

/* Sidebar / drawer active item */
body:not(.pagelayout-login) .list-group-item.active,
body:not(.pagelayout-login) .nav-pills .nav-link.active,
body:not(.pagelayout-login) .nav-pills .show > .nav-link {
  background-color: var(--fs-navy) !important;
  border-color: var(--fs-navy) !important;
  color: #fff !important;
}

/* Course cards */
body:not(.pagelayout-login) .course-card,
body:not(.pagelayout-login) .dashboard-card {
  border-radius: var(--fs-r-lg) !important;
  border: 1px solid var(--fs-border) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body:not(.pagelayout-login) .course-card:hover,
body:not(.pagelayout-login) .dashboard-card:hover {
  transform: translateY(-2px);
  border-color: var(--fs-navy-ring) !important;
  box-shadow: 0 14px 36px rgba(28,22,16,.10) !important;
}

/* Tabs / breadcrumb */
body:not(.pagelayout-login) .breadcrumb a,
body:not(.pagelayout-login) .nav-tabs .nav-link {
  color: var(--fs-ink-2);
}
body:not(.pagelayout-login) .nav-tabs .nav-link.active {
  color: var(--fs-navy) !important;
  border-bottom-color: var(--fs-navy) !important;
}

/* Pagination */
body:not(.pagelayout-login) .page-link {
  color: var(--fs-navy);
}
body:not(.pagelayout-login) .page-item.active .page-link {
  background-color: var(--fs-navy) !important;
  border-color: var(--fs-navy) !important;
}

/* Form inputs (logged-in pages — keep RemUI's borders but tint focus ring) */
body:not(.pagelayout-login) .form-control:focus,
body:not(.pagelayout-login) input:focus,
body:not(.pagelayout-login) select:focus,
body:not(.pagelayout-login) textarea:focus {
  border-color: var(--fs-navy) !important;
  box-shadow: 0 0 0 3px var(--fs-navy-ring) !important;
}

/* Notification dot / counter */
body:not(.pagelayout-login) .count-container,
body:not(.pagelayout-login) .badge-counter,
body:not(.pagelayout-login) .notification-count-container {
  background: var(--fs-navy) !important;
  color: #fff !important;
}

/* Edwiser admin presets / settings widgets (where applicable) */
body:not(.pagelayout-login) .toggle-switch input:checked + .slider {
  background-color: var(--fs-navy) !important;
}

/* ============================================================
   NAVBAR BRAND — swap RemUI's text "Rock Solid: Foundation School"
   for the Rock Solid logo image.
   ============================================================ */
body:not(.pagelayout-login) .iconsitename,
body:not(.pagelayout-login) .navbar-brand-logo.iconsitename {
  display: inline-block !important;
  width: clamp(140px, 14vw, 200px) !important;
  height: 44px !important;
  background: url('../pix/logo.png') left center/contain no-repeat !important;
  font-size: 0 !important;
  color: transparent !important;
  vertical-align: middle !important;
  padding: 0 !important;
  /* Hide the inline color hex too (set as inline style="color: ..."): */
}
body:not(.pagelayout-login) .iconsitename i,
body:not(.pagelayout-login) .iconsitename .fa { display: none !important; }
@media (max-width: 640px) {
  body:not(.pagelayout-login) .iconsitename {
    width: 130px !important;
    height: 36px !important;
  }
}

/* RemUI's top navbar — keep clean cream bg, navy active/hover indicators.
   Targets all the various nav classes RemUI emits across page layouts. */
body:not(.pagelayout-login) .primary-navigation .nav-link,
body:not(.pagelayout-login) .navbar .nav-link {
  font-family: var(--fs-font-head) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--fs-ink-2) !important;
}
body:not(.pagelayout-login) .primary-navigation .nav-link.active,
body:not(.pagelayout-login) .primary-navigation .nav-link:hover,
body:not(.pagelayout-login) .navbar .nav-link.active,
body:not(.pagelayout-login) .navbar .nav-link:hover {
  color: var(--fs-navy) !important;
}
/* Active underline indicator */
body:not(.pagelayout-login) .primary-navigation .nav-link.active::after,
body:not(.pagelayout-login) .nav-tabs .nav-link.active {
  border-bottom-color: var(--fs-navy) !important;
  background-color: var(--fs-navy) !important;
}

/* User dropdown chips (profile menu trigger) */
body:not(.pagelayout-login) .usermenu .nav-link,
body:not(.pagelayout-login) [data-region="user-menu-toggle"] {
  border-radius: 999px !important;
  padding: 4px 10px 4px 4px !important;
  transition: background .15s ease !important;
}
body:not(.pagelayout-login) .usermenu .nav-link:hover,
body:not(.pagelayout-login) [data-region="user-menu-toggle"]:hover {
  background: var(--fs-navy-ghost) !important;
}

/* Dropdown menus (profile menu items, notification list, etc.) — soften borders + apply brand hover */
body:not(.pagelayout-login) .dropdown-menu {
  border: 1px solid var(--fs-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 36px rgba(28,22,16,.10) !important;
  padding: 6px !important;
}
body:not(.pagelayout-login) .dropdown-item {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: var(--fs-ink-2) !important;
}
body:not(.pagelayout-login) .dropdown-item:hover,
body:not(.pagelayout-login) .dropdown-item:focus {
  background: var(--fs-navy-ghost) !important;
  color: var(--fs-navy) !important;
}
body:not(.pagelayout-login) .dropdown-item.active,
body:not(.pagelayout-login) .dropdown-item:active {
  background: var(--fs-navy) !important;
  color: #fff !important;
}

/* Categories dropdown trigger (the chip-styled one) */
body:not(.pagelayout-login) .primary-navigation .dropdown-toggle {
  background: var(--fs-navy-ghost) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
}
body:not(.pagelayout-login) .primary-navigation .dropdown-toggle:hover {
  background: var(--fs-navy-ring) !important;
  color: var(--fs-navy) !important;
}

/* Notification count badge — was RemUI default blue */
body:not(.pagelayout-login) .count-container,
body:not(.pagelayout-login) .notification-count-container,
body:not(.pagelayout-login) .popover-region-notifications .count-container,
body:not(.pagelayout-login) [data-region="count-container"] {
  background-color: var(--fs-navy) !important;
  color: #fff !important;
}