/* =====================================================
   ENGSCI – 3 PRIMARY TOKEN-BASED THEME SYSTEM
   Change ONLY the 3 brand colours below.
===================================================== */

:root {

  /* =====================================================
     🎨 BRAND INPUTS (EDIT THESE 3 ONLY)
  ===================================================== */

  --brand-primary: #426A5A;      /* replaces purple */
  --brand-accent:  #9a4433;      /* replaces orange */
  --brand-secondary: #0C2648;    /* replaces Oxford blue */

  /* =====================================================
     🔧 DERIVED TOKENS
  ===================================================== */

  /* Primary scale */
  --primary: var(--brand-primary);
  --primary-dark: color-mix(in srgb, var(--brand-primary) 85%, black);
  --primary-light: color-mix(in srgb, var(--brand-primary) 70%, white);
  --primary-lighter: color-mix(in srgb, var(--brand-primary) 30%, white);

  /* Accent scale */
  --accent: var(--brand-accent);
  --accent-dark: color-mix(in srgb, var(--brand-accent) 85%, black);
  --accent-light: color-mix(in srgb, var(--brand-accent) 70%, white);

  /* Secondary scale */
  --secondary: var(--brand-secondary);
  --secondary-dark: color-mix(in srgb, var(--brand-secondary) 85%, black);
  --secondary-light: color-mix(in srgb, var(--brand-secondary) 70%, white);

  /* Text */
  --text-primary: #111515;
  --text-inverse: #ffffff;

  /* Utility */
  --surface-highlight: var(--accent-light);
  --surface-overlay: var(--primary);

}
/* =====================================================
   Misc
===================================================== */

/* Banner Slider Loading line*/
.slidercontrols>span {
    background-color: var(--accent) !important;
}

/* Mobile Nav */
@media (max-width: 991px) {
    .navwrap {
        background: var(--brand-primary) !important;
    }
}

/* =====================================================
   HEADINGS / TITLES
===================================================== */

.h1, .h2, .h3,
.usercontent h1, .usercontent h2, .usercontent h3,
.mce-content-body h1, .mce-content-body h2, .mce-content-body h3,
.tabblocks-title, .casestudyslider-title,
.imageblock-title, .videoblock-title,
.imagegallery-title, .imagetextblock-title,
.linkblocks-title, .resourcesblock-title,
.projectshowcase-title, .faqmodule-title,
.whitebanner-title, .post-title,
.studyitem-title,
.publicationshome-title,
.linkblock-title,
.nextstudy-title,
.contactform-title,
.researchres-title,
.projectshowcase-subtitle,
.teamlink-subtitle,
.featuredblock-subtitle,
.introblock-subtitle {
    color: var(--primary) !important;
}

.h4,
.studyitem-subtitle,
.casestudypage-intro,
.teamlink-title {
    color: var(--primary-dark) !important;
}


/* =====================================================
   LINKS
===================================================== */

.a, .usercontent a, .mce-content-body a {
    color: var(--primary) !important;
}

.a:hover, .usercontent a:hover,
.mce-content-body a:hover {
    color: var(--accent) !important;
}


/* =====================================================
   NAVIGATION
===================================================== */

@media (min-width: 992px) {
    .nav ul > li.menu-item a::before {
        background: var(--accent) !important;
    }
}

.nav ul > li.menu-item-has-children > ul {
    background: var(--primary-dark) !important;
}

.nav ul > li.menu-item-has-children > ul li:hover > a,
.nav ul > li.menu-item-has-children > ul li > a:focus {
    background: var(--primary) !important;
    color: var(--text-inverse) !important;
}


/* =====================================================
   PSEUDO STRIPS / UNDERLINES / OVERLAYS
===================================================== */

.studyitem-title::before,
.teamlink-title::before,
.linkblock-date::before,
.linkblock-imgwrap::before,
.post-date::before,
.featuredblock-title::after,
.introblock-subtitle::after,
.nextstudy-subtitle::before,
.usercontent blockquote::before {
    background: var(--primary) !important;
}

.studyitem-title::before,
.teamlink-title::before {
    background: var(--surface-highlight) !important;
}

.studyitem-imgwrap::after,
.featuredblock-imgwrap::after,
.__DoES .ibmeslider-link-imgwrap::after,
.__DoES .ibmeslider-link-videowrap::after {
    background: var(--surface-overlay) !important;
}


/* =====================================================
   FILTER / LETTERBAR
===================================================== */

.letterbar-letter,
.letterbar-letter.__active,
.letterbar-letter:hover,
.letterbar-letter:focus {
    color: var(--accent) !important;
}

.letterbar-letter::after,
.filterbar.__alt .filterbar-title::after,
.filterbar.__alt .filterbar-list::after,
.filterbar.__alt .filterbar-list li.__active a::before {
    background: var(--accent) !important;
}

.filterbar.__alt .filterbar-list li a:hover,
.filterbar.__alt .filterbar-list li a:focus {
    color: var(--primary) !important;
}


/* =====================================================
   BUTTON SYSTEM
===================================================== */

.button,
.submit_wrap button,
.form-submit button,
.sliderbutton,
.shareblock-trigger {
    background: var(--accent) !important;
    border: 2px solid var(--accent) !important;
    color: var(--text-primary) !important;
}

.button:hover,
.submit_wrap button:hover,
.form-submit button:hover,
.sliderbutton:hover,
.shareblock-trigger:hover {
    background: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
    color: var(--text-inverse) !important;
}

.button-hover {
    background: var(--accent-dark) !important;
}


/* Ghost buttons */

.button.__ghost,
.submit_wrap button.__ghost,
.form-submit button.__ghost,
.sliderbutton.__ghost {
    background: transparent !important;
    border: 2px solid var(--accent) !important;
    color: var(--accent) !important;
}

.button.__ghost:hover,
.submit_wrap button.__ghost:hover,
.form-submit button.__ghost:hover,
.sliderbutton.__ghost:hover {
    background: var(--accent) !important;
    color: var(--text-inverse) !important;
}


/* =====================================================
   ACCORDION
===================================================== */

.accordion-head::after {
    color: var(--accent) !important;
}

.accordion-head:hover,
.accordion-head:focus {
    border-color: var(--accent) !important;
}

.accordion.__active .accordion-head {
    color: var(--primary) !important;
}

.accordion.__active .accordion-head::after {
    background: var(--primary) !important;
}


/* =====================================================
   SEARCH PANEL
===================================================== */

.search {
    background: var(--primary-dark) !important;
}

.searchicon,
.searchform .submit_wrap button,
.whitesearch .submit_wrap button {
    background: var(--accent) !important;
}

.searchicon:hover,
.searchform .submit_wrap button:hover,
.whitesearch .submit_wrap button:hover {
    background: var(--accent-dark) !important;
}


/* =====================================================
   PAGINATION
===================================================== */

.paging li.active a,
.paging li.paging-next a,
.paging li.paging-prev a {
    background: var(--primary-dark) !important;
    color: var(--text-inverse) !important;
}

.paging li a {
    color: var(--primary-dark) !important;
}

.paging li a:hover {
    border-color: var(--primary-dark) !important;
}


/* =====================================================
   FOOTER
===================================================== */

.footer {
    background: var(--secondary) !important;
}

.footer-aux ul li a::after {
    background: var(--accent) !important;
}


/* =====================================================
   FORMS
===================================================== */

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-dark) !important;
}

.umbraco-forms-form .umbraco-forms-navigation input[type="submit"] {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: var(--text-inverse) !important;
}

.umbraco-forms-form .umbraco-forms-navigation input[type="submit"]:hover {
    background-color: var(--accent) !important;
}

/* =====================================================
   PEOPLE SECTION
===================================================== */

/* Base underline stays primary */
.teamlink-title::before {
    background-color: var(--primary) !important;
}

/* Name darker */
.teamlink .teamlink-title span {
    color: var(--primary-dark) !important;
}

/* Title lighter */
.teamlink .teamlink-subtitle {
    color: var(--primary-light) !important;
}

/* Hover underline tint */
.projectshowcase-block .teamlink:hover .teamlink-title::before,
.projectshowcase-block .teamlink:focus .teamlink-title::before {
    background-color: var(--primary-lighter) !important;
}

/* Override any original accent hover rules */
.teamlink-title:before,
.teamlink-title:hover::before,
.teamlink-title:focus::before {
    background-color: var(--primary-lighter) !important;
}