/* Hide City and Country on Moodle 5.0 signup */
.signupform #fitem_id_city,
.signupform #fitem_id_country {
  display: none !important;
}

/* Red primary buttons */
.btn.btn-primary {
  background-color: #A10E2E !important;
  border-color: #A10E2E !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: #8F0C28 !important; /* slightly darker hover */
  border-color: #8F0C28 !important;
}

/* Red focus ring + input highlight (Bootstrap/Moodle) */
:root{
  --o5-red: #A10E2E;
  --o5-red-dark: #8F0C28;
}

/* Inputs / selects / textareas focus */
.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus {
  border-color: var(--o5-red) !important;
  box-shadow: 0 0 0 0.2rem rgba(161, 14, 46, 0.25) !important;
  outline: 0 !important;
}

/* Checkboxes / radios focus ring */
.custom-control-input:focus ~ .custom-control-label::before,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--o5-red) !important;
  box-shadow: 0 0 0 0.2rem rgba(161, 14, 46, 0.25) !important;
}

/* Links (optional, for consistency) */
a:focus,
a:active {
  outline-color: var(--o5-red) !important;
}

/* Moodle "highlight" style boxes (common) */
.highlight,
.alert-info,
.alert-primary,
.bg-primary,
.border-primary {
  border-color: var(--o5-red) !important;
}

/* If Moodle uses a left border highlight (common in notices/blocks) */
.alert-info,
.alert-primary {
  border-left-color: var(--o5-red) !important;
}

/* Form validation colours (optional) */
.is-valid,
.was-validated .form-control:valid {
  border-color: var(--o5-red) !important;
}
.is-valid:focus,
.was-validated .form-control:valid:focus {
  box-shadow: 0 0 0 0.2rem rgba(161, 14, 46, 0.25) !important;
}

/* =========================
   COURSE INDEX (left menu)
   - Active item = red
   ========================= */

/* Active/current page item */
#courseindex .courseindex-item.pageitem,
#courseindex .courseindex-item.pageitem .courseindex-link {
  background-color: #A10E2E !important;
  color: #fff !important;
}

/* Underline SECTION TITLES only */
#courseindex .courseindex-section-title .courseindex-link {
  border-bottom: 1px solid rgba(161, 14, 46, 0.35) !important;
}

#courseindex .courseindex-section {
  outline: none !important;
  box-shadow: none !important;
}

/* Course index: remove the “special first section” blue focus box */
#courseindex .courseindex-section-title:first-of-type a:focus,
#courseindex .courseindex-section-title:first-of-type a:focus-visible,
#courseindex .courseindex-section-title:first-of-type button:focus,
#courseindex .courseindex-section-title:first-of-type button:focus-visible,
#courseindex .courseindex-section-title:first-of-type [role="button"]:focus,
#courseindex .courseindex-section-title:first-of-type [role="button"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Course index: remove blue click-focus border/box on section titles + sub-children */
#courseindex .courseindex-link:focus,
#courseindex .courseindex-link:focus-visible,
#courseindex .courseindex-link:active,
#courseindex .courseindex-item:focus,
#courseindex .courseindex-item:focus-within,
#courseindex .courseindex-section-title:focus,
#courseindex .courseindex-section-title:focus-within,
#courseindex a:focus,
#courseindex a:focus-visible,
#courseindex button:focus,
#courseindex button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Course page section expand/collapse icon buttons (blue -> red) */
a.btn.btn-icon.icons-collapse-expand {
  color: #A10E2E !important;
  background-color: rgba(161, 14, 46, 0.08) !important;
  border: none !important;
}

/* Hover/focus */
a.btn.btn-icon.icons-collapse-expand:hover,
a.btn.btn-icon.icons-collapse-expand:focus,
a.btn.btn-icon.icons-collapse-expand:focus-visible {
  color: #8F0C28 !important;
  background-color: rgba(161, 14, 46, 0.16) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Radio buttons – checked state (blue → red) */
.form-check-input[type="radio"]:checked {
  background-color: #A10E2E !important;
  border-color: #A10E2E !important;
}

/* Radio buttons – focus ring */
.form-check-input[type="radio"]:focus {
  border-color: #A10E2E !important;
  box-shadow: 0 0 0 0.2rem rgba(161, 14, 46, 0.25) !important;
}

/* Optional: hover (subtle) */
.form-check-input[type="radio"]:hover {
  border-color: #8F0C28 !important;
}

/* =========================
   COURSE INDEX – TEXT COLOURS
   ========================= */

/* Section titles (stronger red) */
#courseindex .courseindex-section-title a {
  color: #8F0C28 !important; /* dark red */
}

/* Sub-items / activities (lighter red) */
#courseindex .courseindex-link {
  color: rgba(161, 14, 46, 0.75) !important;
}

/* Hover state – slightly stronger */
#courseindex .courseindex-link:hover,
#courseindex .courseindex-section-title a:hover {
  color: #A10E2E !important;
}

/* Active/current item keeps white text */
#courseindex .courseindex-item.pageitem .courseindex-link {
  color: #fff !important;
}

/* Locked items slightly muted */
#courseindex .courseindex-locked + .courseindex-link,
#courseindex .courseindex-link .courseindex-locked {
  color: rgba(161, 14, 46, 0.45) !important;
}

/* =========================
   COURSE CONTENT – SECTION HEADERS (right-hand list)
   ========================= */

/* Section title text colour */
.course-content .sectionname,
.course-content h3.sectionname {
  color: #8F0C28 !important; /* dark red */
}

/* Underline like left index section titles */
.course-content .sectionname {
  border-bottom: 1px solid rgba(161, 14, 46, 0.35) !important;
  padding-bottom: 0.35rem;
}

/* Hover – slightly brighter */
.course-content .sectionname:hover {
  color: #A10E2E !important;
}

/* Chevron / expand icon */
.course-content .sectionname .btn-icon,
.course-content .sectionname svg {
  color: #A10E2E !important;
}

/* =========================
   COURSE INDEX – BACKGROUND COLOUR
   ========================= */

/* Left course index drawer background */
#theme_boost-drawers-courseindex,
#theme_boost-drawers-courseindex .drawer,
#theme_boost-drawers-courseindex .drawerheader,
#theme_boost-drawers-courseindex .drawercontent {
  background-color: rgba(161, 14, 46, 0.08) !important; /* light red */
}

/* =========================
   AVAILABILITY MESSAGES
   (activities + sections)
   ========================= */

/* Activity + section availability boxes */
.activity-availability,
.activity-availabilityinfo,
.section-availability,
.section-availabilityinfo,
.availabilityinfo.isrestricted {
  background-color: rgba(161, 14, 46, 0.08) !important; /* light red */
  color: #8F0C28 !important; /* dark red text */
  border: none !important;
  border-radius: 8px;
}

/* Icons (lock etc.) */
.activity-availability .icon,
.activity-availabilityinfo .icon,
.section-availability .icon,
.section-availabilityinfo .icon {
  color: #A10E2E !important;
}

/* Links inside availability text */
.activity-availability a,
.activity-availabilityinfo a,
.section-availability a,
.section-availabilityinfo a {
  color: #A10E2E !important;
  text-decoration: underline;
}

/* Force child text to inherit colour (kills Moodle grey/blue) */
.activity-availability *,
.activity-availabilityinfo *,
.section-availability *,
.section-availabilityinfo * {
  color: inherit !important;
}

/* Kill the last remaining BLUE link inside availability messages */
.availabilityinfo a,
.availabilityinfo a:visited,
.availabilityinfo a:hover,
.availabilityinfo a:focus,
.availabilityinfo a:active,
.availabilityinfo strong,
.availabilityinfo a strong {
  color: #A10E2E !important;
}


/* =========================
   COURSE CONTENT – ACTIVITY TITLE LINKS
   ========================= */

/* Activity name links (blue → brand red) */
.activityname a,
.activityname a:visited {
  color: #8F0C28 !important; /* dark red */
  text-decoration: underline;
}

/* Hover state */
.activityname a:hover {
  color: #A10E2E !important; /* primary red */
}

/* Active/current (when clicked) */
.activityname a:active,
.activityname a:focus {
  color: #A10E2E !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================
   LESSON PREVIEW NOTICE
   ========================= */

/* "Lesson is currently being previewed" */
.alert.alert-info {
  background-color: rgba(161, 14, 46, 0.08) !important; /* light red */
  color: #8F0C28 !important; /* dark red text */
  border: none !important;
}

/* Links inside the alert */
.alert.alert-info a {
  color: #A10E2E !important;
  text-decoration: underline;
}

/* Close (X) button */
.alert.alert-info .btn-close {
  filter: none;
  opacity: 0.7;
}
.alert.alert-info .btn-close:hover {
  opacity: 1;
}

/* Ensure inner text doesn't revert to blue/grey */
.alert.alert-info * {
  color: inherit !important;
}

/* Lesson page header / question container – force Over5 colour everywhere */
#id_pageheadercontainer,
#id_pageheadercontainer * {
  color: #8F0C28 !important;
}

/* =========================
   COMPLETION / TO-DO BOXES
   ========================= */

/* ONLY the innermost box gets the pink */
.completion-info {
  background-color: rgba(161, 14, 46, 0.06) !important;
  border-radius: 0.75rem;
  padding: 0.75rem;
}

/* force outer wrappers to stay uncoloured */
.automatic-completion-conditions,
.activity-information {
  background: transparent !important;
  box-shadow: none !important;
}

/* TO DO badges only (exclude success) */
.completion-info .badge.bg-light,
.completion-info .badge:not(.bg-success) {
  background-color: rgba(161, 14, 46, 0.12) !important;
  color: #A10E2E !important;
  border: 1px solid rgba(161, 14, 46, 0.25);
}

/* Text inside TO DO badges */
.completion-info .badge:not(.bg-success) * {
  color: #A10E2E !important;
}

/* Kill the left/right “strip” coming from the header/wrapper padding */
.activity-header,
.activity-header .activity-information,
.activity-header .automatic-completion-conditions {
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep ONLY the inner box coloured */
.activity-header .completion-info {
  background-color: rgba(161, 14, 46, 0.06) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem !important;
}

/* =========================================================
   LOGIN + SIGNUP ONLY (white box = .login-container)
   >=1100px  : gutter image
   <1100px   : faint background INSIDE .login-container
   Image     : /assets/img/cover-plain.png
   ========================================================= */

body#page-login-index,
body#page-login-signup{
  --o5-cover: url("/assets/img/cover-plain.png");
  --o5-cover-text: url("/assets/img/cover.png");
}

/* ----- DESKTOP / WIDE: gutter image ----- */
@media (min-width:1100px){
  body#page-login-index::before,
  body#page-login-signup::before{
    content:"";
    position:fixed;
    left:70px;
    top:50%;
    transform:translateY(-50%);
    width:160px;
    height:240px;
    background: var(--o5-cover-text) center / cover no-repeat;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.28);
    pointer-events:none;
    z-index:999;
  }

  /* ensure no faint layer on desktop */
  body#page-login-index .login-container::before,
  body#page-login-signup .login-container::before{
    content:none !important;
  }
}

/* ----- MOBILE / NARROW: faint background inside the WHITE BOX ----- */
@media (max-width:1099.98px){

  /* hide gutter image */
  body#page-login-index::before,
  body#page-login-signup::before{
    content:none !important;
  }

  /* .login-container is the white box */
  body#page-login-index .login-container,
  body#page-login-signup .login-container{
    position:relative !important;
    overflow:hidden !important;
    background-color:#fff !important;
	
	background-position: center top !important;  /* or 0 0 */
    background-origin: border-box !important;
    background-clip: border-box !important;	
  }

  /* faint cover layer INSIDE the white box */
  body#page-login-index .login-container::before,
  body#page-login-signup .login-container::before{
    content:"";
    position:absolute;
    inset:0;
    background-image: var(--o5-cover);
	background-repeat: repeat;
	background-position: center top;
	background-size: 500px auto;

    opacity:0.20;
    pointer-events:none;
    z-index:0;
  }

  /* keep the form/content above the faint layer */
  body#page-login-index .login-container > *,
  body#page-login-signup .login-container > *{
    position:relative !important;
    z-index:1 !important;
  }
}