/**
 * Keppel Real Estate - White Minimalist Theme Override
 * Inject this after all existing <link> stylesheets in each HTML <head>.
 * Targets the Sitecore XA theme (pre-optimized-min.css) and new theme (base.css / content.css).
 * No existing files are modified - fully reversible by removing this stylesheet.
 *
 * Usage in HTML:
 *   <link rel="stylesheet" href="theme-white-override.css">
 *   (or relative path from HTML location)
 */

/* ============ SYSTEM 1: Sitecore XA Overrides (pre-optimized-min.css) ============ */

/* 1 - Body & Base */
body,
body.special {
  background-color: #ffffff !important;
  color: #222222 !important;
}

body.special h1, body.special h2, body.special h3,
body.special h4, body.special h5, body.special h6 {
  color: #222222 !important;
}

/* 2 - Header */
header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

header #header-lower {
  background-color: #F5F5F5 !important;
}

header #header-search .search-box {
  background-color: #F5F5F5 !important;
  border: 1px solid #E5E5E5 !important;
}

header #nav-drawer {
  background-color: #ffffff !important;
  border-right: 1px solid #E5E5E5 !important;
}

header #header-upper > .component-content > .row > .container .link a {
  color: #222222 !important;
}

header #nav-drawer .component.link a {
  color: #222222 !important;
}

header #header-upper > .component-content > .row > .container .button a {
  border-color: #E5E5E5 !important;
  color: #222222 !important;
}

@media (max-width: 991px) {
  header {
    background-color: #ffffff !important;
  }
}

/* 3 - Footer */
footer {
  background-color: #322C2E !important;
  border-top: 1px solid #322C2E !important;
}

footer .link-list ul li a {
  color: #ffffff !important;
}


footer .link-list ul li a:hover::after {
  display: none !important;
}

footer h3 {
    color: #ffffff !important;
}

/* 4 - Container Background Classes */
.container-dark-background {
  background-color: #F5F5F5 !important;
  color: #222222 !important;
}

.container-darkgray-background {
  background-color: #F5F5F5 !important;
  color: #222222 !important;
}

.container-color-background {
  background-color: #F5F5F5 !important;
  color: #222222 !important;
}

.container-black-background {
  background-color: #F5F5F5 !important;
  color: #222222 !important;
}

.container-dark-red-background {
  background-color: #F5F5F5 !important;
  color: #222222 !important;
}

.container-gray-background {
  background-color: #F5F5F5 !important;
}

/* 5 - Content Section Shading */
html body .content-section > .grey {
  background-color: #F5F5F5 !important;
}

html body .content-section > .light-grey {
  background-color: #F5F5F5 !important;
}

html body .content-section > .black {
  background-color: #F5F5F5 !important; 
  /* background-color: #322C2E !important; */
  color: #ffffff !important;
}

/* html body .content-section > .black h1, 
html body .content-section > .black h2, 
html body .content-section > .black h3, 
html body .content-section > .black h4, 
html body .content-section > .black h5, 
html body .content-section > .black h6 {
  color: #ffffff !important;
} */


html body .content-section > .black,
html body .content-section > .grey,
html body .content-section > .light-grey {
  color: #222222 !important;
}

/* 5a - Transparent section overlay (e.g. "You may be interested in") */
html body .content-section .component-content.transparent::before {
  /* background-color: rgba(0, 0, 0, 0.85) !important; */
  background-color: rgba(211, 211, 211, 0.85) !important;
  opacity: 1 !important;
}

html body .content-section .component-content.transparent .field-sectiontitle,
html body .content-section .component-content.transparent h2,
html body .content-section .component-content.transparent h6 {
  color: #ffffff !important;
}

html body .content-section .component-content.transparent *,
html body .content-section .component-content.transparent .title-section h2,
html body .content-section .component-content.transparent .title-section h6 {
  color: #222222 !important;
}

html body .content-section .component-content.transparent .image-tiles-container *,
html body .content-section .component-content.transparent .image-tiles-container h2,
html body .content-section .component-content.transparent .image-tiles-container h6 {
  color: #ffffff !important;
}

html body .content-section .component-content.transparent .arrow-link a::after, html body .content-section .component-content.transparent .arrow-link::after, html body .content-section .component-content.transparent a.arrow-link::after {
    filter: invert(1) !important;
}

/* 5b - Text Tiles (colored-tile / no-color) dark background -> light */
html body .text-tiles-list .tile .tile-inner {
  background-color: #F5F5F5 !important;
  color: #222222 !important;
  border-color: #E5E5E5 !important;
}

html body .text-tiles-list .tile h3,
html body .text-tiles-list .tile .tile-inner h3 {
  color: #222222 !important;
}

html body .text-tiles-list .tile p,
html body .text-tiles-list .tile .tile-inner p {
  color: #767575 !important;
}

/* 6 - Navigation & Breadcrumbs */
#breadcrumbs {
  background-color: #F5F5F5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

#breadcrumbs .breadcrumb-item a,
#breadcrumbs .breadcrumb-item {
  color: #767575 !important;
}

.navigation-main a {
  color: #222222 !important;
}

.navigation-main a:hover {
  color: #c8102e !important;
}

/* 7 - Text & Link Colours */
.arrow-link,
.arrow-link a,
a.arrow-link {
  color: #222222 !important;
  font-weight: 500 !important;
}

.arrow-link:hover,
.arrow-link a:hover,
a.arrow-link:hover {
  color: #c8102e !important;
}

/* 7.1 - Banner and Heading Text Contrast Fixes */
.banner-heading-text {
  color: #F5F5F5 !important;
  font-weight: 700 !important;
}

.field-headingtext {
  color: #F5F5F5 !important;
  font-weight: 600 !important;
}

.info {
  color: #F5F5F5 !important;
}

.image-tile-content h3,
.image-tile-content p,
.image-tile-content .arrow-link,
.image-tile-content .arrow-link a {
  color: #F5F5F5 !important;
}

.field-sectiontitle {
  color: #222222 !important;
  font-weight: 700 !important;
}

/* 7.2 - Paragraph text contrast */
p {
  color: #222222 !important;
}

/* 7.3 - Ensure proper contrast for all text elements */
h1, h2, h3, h4, h5, h6 {
  color: #222222 !important;
}

/* 7.4 - Link text in paragraphs */
p a {
  color: #c8102e !important;
  font-weight: 500 !important;
}

/* p a:hover {
  color: #94081f !important;
  text-decoration: underline !important;
} */

/* 7.5 - Additional contrast fixes for various text elements */
.field-text,
.field-description,
.field-content {
  color: #222222 !important;
}

.text-section,
.content-text {
  color: #222222 !important;
}


.image-callout>.component-content>.container .text-section .field-calloutcopy, .image-callout>.component-content>.container .text-section .field-calloutcopy p {
    color: #222222 !important;
}

/* 7.6 - Ensure all span elements have proper contrast */
span {
  color: inherit !important;
}

/* 7.7 - Fix any remaining light text on white backgrounds */
.component-content {
  color: #ffffff !important;
}

.black .component-content {
  color: #222222 !important
}


/* 7.8 - Ensure list items have proper contrast */
li {
  color: #767575 !important;
}

/* 7.9 - Fix any description text */
.description,
.subtitle,
.caption {
  color: #767575 !important;
}

/* 7.10 - Headings on dark backgrounds */
.section-title,
.section-heading,
.dark-background h1,
.dark-background h2,
.dark-background h3,
.dark-background h4,
.dark-background h5,
.dark-background h6 {
  color: #ffffff !important;
} 

/* 7.11 - Headings within cards on dark backgrounds */
.card-title,
.card-heading,
.special-features .field-title,
.you-may-be-interested-in .field-title {
  color: #ffffff !important;
}

/* 7.12 - Specific section headings */
.what-is-new h2,
.special-features h2,
.you-may-be-interested-in h2 {
  color: #ffffff !important;
}

/* 7.13 - Ensure all text within dark cards is light */
.dark-card .field-text,
.dark-card .field-description,
.dark-card p,
.dark-card a {
  color: #ffffff !important;
}

/* 7.14 - Specific text within image callout */
.image-callout > .component-content > .container .text-section ul li,
.image-callout > .component-content > .container .text-section .field-calloutlink {
  color: #ffffff !important;
}

/* 7.15 - Dark section backgrounds with light text */
.container-dark-background .field-title,
.container-dark-background h1,
.container-dark-background h2,
.container-dark-background h3,
.container-dark-background h4,
.container-dark-background h5,
.container-dark-background h6 {
  color: #ffffff !important;
}

.container-dark-background .field-text,
.container-dark-background p,
.container-dark-background li {
  color: #222222 !important;
}

/* 7.16 - Content sections with dark backgrounds */
.content-section.dark,
.content-section.black,
.content-section.grey {
  color: #ffffff !important;
}

.content-section.dark h1,
.content-section.dark h2,
.content-section.dark h3,
.content-section.dark h4,
.content-section.dark h5,
.content-section.dark h6 {
  color: #ffffff !important;
}

/* 7.17 - Component titles in dark sections */
.component-title,
.section-title-dark,
.field-title-dark {
  color: #ffffff !important;
}

/* 7.18 - All headings in any dark context */
*[style*="background-color: rgb(0,0,0)"] h1,
*[style*="background-color: #000000"] h1,
*[style*="background-color: rgb(0,0,0)"] h2,
*[style*="background-color: #000000"] h2,
*[style*="background-color: rgb(0,0,0)"] h3,
*[style*="background-color: #000000"] h3,
*[style*="background-color: rgb(0,0,0)"] h4,
*[style*="background-color: #000000"] h4,
*[style*="background-color: rgb(0,0,0)"] h5,
*[style*="background-color: #000000"] h5,
*[style*="background-color: rgb(0,0,0)"] h6,
*[style*="background-color: #000000"] h6 {
  color: #ffffff !important;
}

.image-callout > .component-content > .container .text-section ul li {
  color: #222222 !important;
}

.image-callout > .component-content > .container .text-section .field-calloutlink {
  color: #767575 !important;
}

/* 8 - Dividers & Borders */
.divider hr {
  border-color: #E5E5E5 !important;
}

.divider--dashed hr {
  border-color: #E5E5E5 !important;
}

.container-bordered {
  border-top-color: #E5E5E5 !important;
  border-bottom-color: #E5E5E5 !important;
}

/* 9 - Site/Region Selector */
.cross-origin-site-selector .site-selector--dropdown {
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.cross-origin-site-selector .site-selector--dropdown ul {
  border-color: #E5E5E5 !important;
}

.cross-origin-site-selector .site-selector--links a {
  color: #767575 !important;
}

/* 10 - Modal Overlay */
.modal-overlay {
  background-color: rgba(17, 24, 39, 0.6) !important;
  opacity: 1 !important;
}

/* 11 - Image Callout Accent Block */
div[data-image-offset='2-side-left'] + .container .image-section,
div[data-image-offset='3-side-left'] + .container .image-section,
div[data-image-offset='3-side-right'] + .container .image-section {
  background-color: #F5F5F5 !important;
}

/* 12 - Hero / Banner Overlays */
.banner-mask.cover-gradient,
.hero-mask.cover-gradient {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.15) 65%,
    rgba(0,0,0,0.50) 100%
  ) !important;
}

/* ============ SYSTEM 2: New Theme Overrides (base.css / content.css) ============ */

/* Override dark CSS variables */
:root {
  --keppel-bg-grey-1: #F5F5F5 !important;
  --keppel-bg-black:  #F5F5F5 !important;
  --keppel-bg-grey-2: #767575 !important;
}

/* Dark mode sections -> white */
.dark-mode,
.dark-mode .content-wrapper {
  background-color: #ffffff !important;
  color: #222222 !important;
}

.dark-mode header .header-wrapper {
  background-color: #ffffff !important;
}

.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode p, .dark-mode a, .dark-mode span,
.dark-mode li {
  color: #222222 !important;
}

/* Dark slide content backgrounds */
.content-slide-wrapper .responsive-container {
  background-color: #F5F5F5 !important;
}

/* SDG / chart section overlays */
.sdg-wrapper .sdg-list-hover {
  background-color: rgba(0,0,0,0.08) !important;
}

/* 13 - Text on dark/image backgrounds — keep white for legibility */
.field-subheadingtext {
  color: #ffffff !important;
}

/* .field-callouttitle,
h3.field-callouttitle {
  color: #ffffff !important;
}

.field-calloutcopy,
.field-calloutcopy p {
  color: #ffffff !important;
} */

.image-callout>.component-content .field-callouttitle {
    color: #ffffff !important;
}
.component-content.transparent .image-callout>.component-content>.container .text-section .field-calloutcopy, .component-content.transparent .image-callout>.component-content>.container .text-section .field-calloutcopy p {
    /* color: #ffffff !important; */
     color: #222222 !important;
}


.image-callout>.component-content div[data-image-offset='2-side-left']+.container .field-callouttitle {
    color: #222222 !important;
}


.component-content.black .image-callout>.component-content .field-callouttitle {
   color: #222222 !important; 
}

.tile--title,
.field-tiletitle,
.tile--content .tile--title {
  color: #ffffff !important;
}

.content-section .title-row a {
    border: 1px solid #c8102e;
    color: #c8102e;
}

.content-section .title-row a:hover {
    border: 1px solid #c8102e;
    background: #c8102e;
    color: #ffffff;
}

.tabs ul.tabs-heading .field-heading,
li[tabindex] .field-heading {
  color: #555555 !important;
}


/* Tabs heading text (e.g. "Enquiries" tab labels on coloured tab strip) */
li[tabindex].active .field-heading {
  color: #ffffff !important;
}



/* 14 - Tile description — dark text on light card backgrounds */
.tile--desc,
.field-tiledescription {
  color: #222222 !important;
}

/* 15 - Icon images — invert white icons to dark on white backgrounds */
footer .icon-link-list li a img {
  filter: invert(0) !important;
}

/* Search button icon — ensure visible dark icon on white header */
header .search-box button {
  filter: invert(1) !important;
}


.cross-origin-site-selector .site-selector--flag img[src$="globe_icon.svg"] {

    filter: invert(1) !important;
}

.icon-link-list .field-linkicon img {
  /* filter: invert(1); */
  max-width: 25px;
  width: 100%;
}

.cross-origin-site-selector .site-selector--dropdown .site-selector--flag img {
  filter: unset !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 50%;
}

.cross-origin-site-selector .site-selector--data .site-selector--flag img {
  border: 1px solid #E5E5E5 !important;
    border-radius: 50%;
}

.cross-origin-site-selector .site-selector--dropdown ul li:first-child .site-selector--flag img[src$="globe_icon.svg"] {
  filter: invert(1) !important;
}



.tabs-container .text-section .field-calloutcopy {
  color: #222222 !important;
}

.keppel-gallery .item--info .field-imagetitle {
  color: #ffffff !important;
}
.keppel-gallery.default .splide__slide .item--info .field-imagedescription {
   color: #ffffff !important;
}

#celebratelifewithus .keppel-gallery .item--info .field-imagetitle {
  color: #ffffff !important;
}
#celebratelifewithus .keppel-gallery .item--info .field-imagedescription {
  color: #ffffff !important;
}

.feature-tiles .tile--desc * {
   color: #ffffff !important;
}
.feature-tiles--wrapper.splide__list .tile--title.field-tiletitle {
   color: #ffffff !important;
}
.feature-tiles--wrapper.splide__list#splide02-list .tile--title.field-tiletitle {
   color: #222222 !important;
}

.feature-tiles--wrapper.splide__list#splide03-list .tile--title.field-tiletitle {
    color: #222222 !important;
}


#buildacareerwithus .feature-tiles--wrapper.splide__list#splide02-list .tile--title.field-tiletitle {
    color: #222222 !important;
}


#ourwayoflife .feature-tiles--wrapper.splide__list .tile--title.field-tiletitle {
   color: #222222 !important;
}
#ourwayoflife .feature-tiles .tile--desc * {
    color: #222222 !important;
}


.keppel-gallery .item--info .field-imagedescription {
   color: #ffffff !important;
}

header .search-box input {
    background: #ffffff !important;
}

header #header-search .search-box {
    background-color: #ffffff !important;
    border: none !important;
}

div[data-image-offset='2-side-left'] + .container .image-section, div[data-image-offset='3-side-left'] + .container .image-section, div[data-image-offset='3-side-right'] + .container .image-section {
    background-color: unset !important;
}



/* SCOPED 2026-09-20. This used to read
       .article-card .arrow-link, .arrow-link a, a.arrow-link
   - only the FIRST selector carried the .article-card prefix. The other two are
   the GLOBAL selectors from section 7 repeated verbatim, so this rule silently
   re-declared EVERY arrow-link on the site as white, later in the file and at
   equal specificity with !important. Later wins, so the dark #222 from section 7
   never applied and every link outside a dark card rendered white-on-white -
   visible only on :hover, which section 7 still turned red. Reported by Hong Vui
   on /realestate/id/media-releases/.
   The white is only ever wanted ON the dark card overlay, so all three selectors
   are scoped to it now. The .media-releases-listing patch below was a
   per-component plaster for this same bug and is kept only as belt-and-braces. */
.article-card .arrow-link,
.article-card .arrow-link a,
.article-card a.arrow-link {
    color: #ffffff !important;
}


.media-releases-listing a.arrow-link {
    color: #222222 !important;
}


#article-header h4 {
  color: #ffffff !important;
}
#article-header h1 {
  color: #ffffff !important;
}


.member-tiles>.component-content .field-membername, .member-tiles>.component-content .field-memberrole {
  color: #222222 !important;
}


.cross-origin-site-selector .site-selector--dropdown .site-selector--data a {
    color: #222222 !important;
}

header .search-box input {
    color: #222222 !important;
}

.feature-tiles .tile--content>a {
    color: #da2128 !important;
}

#keppel-empty .feature-tiles--wrapper.splide__list .tile--title.field-tiletitle {
    color: #222222 !important;
}

/* html body #keppel-empty .content-section > .black .feature-tiles--wrapper.splide__list .tile--title.field-tiletitle {
  color: #ffffff !important;
} */

.facet-date-range .from-date span, .facet-date-range .to-date span {
  color: #222222 !important;
}



.media-releases-listing .date-selector-row span {
  color: #222222 !important;
}

.pagination>ul li.active, .pagination>ul li:hover {
    color: #fff !important;
}

/* ============ RETAINED BRAND ELEMENTS (Keppel Red #C8102E) ============ */
/* These are intentionally kept for brand identity */
#article-content-container ul>li::before, .media-release-details ul>li::before, .rich-text ul>li::before {
    background-color: #222222;
}

.media-releases-listing .datepicker input {
   color: #222222 !important;   
  border: 1px solid #bcb6b6;
}


.pika-single.dark-theme {
    color: #222222 !important;
    background: #ffffff !important;
    border: 1px solid #bcb6b6 !important;
    border-bottom-color: #bcb6b6 !important;
}

.dark-theme .pika-button {
    color: #222222;
    background: #ffffff;
}

.dark-theme .pika-label {
    background-color: #ffffff;
}

.dark-theme .pika-next, .dark-theme .pika-prev {
  filter: invert(1) !important;
}


.search-result-list a {
    color: #222222 !important;
}


.search-results.article-listing.grid-view .list-item-content h3 {
  color: #ffffff !important;
}


.search-results.article-listing.grid-view .list-item-content .arrow-link {
  color: #ffffff !important;
}


.results-count {
  color: #222222;
}


.cross-origin-site-selector .site-selector--data .site-selector--country {
  color: #222222 !important;
}


.tabs ul.tabs-heading>li {
    background-color: #ffffff !important;
}


.tabs ul.tabs-heading>li.active {
    background-color: #c8102e !important;
}



.media-releases-listing a.button.arrow-button {
  background-color: #c8102e !important;
}

.facet-dropdown select.facet-dropdown-select {
    background-color: #ffffff !important;
    color: #222222;
}

/*footer .icon-link-list .field-linkicon img {
    filter: invert(1) !important;  


.navigation-main nav>ul li.submenu>div::after {
    filter: invert(1);
}}*/

/* 
#keppel-empty>.component-content>.row>.tabs .tabs-select {
  display: none;
  position: relative;
}
*/

main .search-box input {
    border-bottom: 1px solid #bcb6b6;
}

.button-download a, .cta-button>.component-content>div>a, .load-more input, .popup-download-button.button-red a[data-role=button], a.button-red, div.button-red>a {
    color: #fff !important;
}

.table-wrapper table tr td {
  color: #222222 !important;
  border: 1px solid #E7E6E6 !important;
}

.table-wrapper table tr {
    border-bottom: 1px solid #E7E6E6 !important;
}
.card-tiles .card--body {
    background-color: #ffffff;
}


#location .card-tiles .card--body {
    color: #767575 !important
}
#contact .card-tiles .card--body {
    color: #767575 !important
}

.sitecore-form .form-checkbox-list>label:not(:empty), .sitecore-form .form-radio-list>label:not(:empty) {
  color: #222222 !important;
}

.sitecore-form .form-checkbox label, .sitecore-form .form-radio label {
  color: #222222 !important;
}

.facet-heading-dropdown {
   color: #222222 !important; 
}

.facet-heading-dropdown::after {
  filter: invert(1);
}


.search-filter-checkboxes .facet-search-filter .facets-dropdown-group {
    background: #fff;
}

.article-listing ul.search-result-list>li a .tag {
    background-color: #fff;
}

.news-body {
   color: #222222 !important; 
}


.news-body ul li {
   color: #222222 !important; 
}

.news-enquiries ul li {
   color: #222222 !important; 
}

.project-award .project-award-inner .project-award-content h4 {
  color: #ffffff !important;
} 
.project-award .project-award-inner .project-award-content h5 {
  color: #ffffff !important;
} 

.project-award .popup-content .popup-wrapper {
    background-color: #ffffff;
    color: #222222;
}

.rte ul li {
  color: #222222 !important; 
}

.feature-tiles .tile--subtitle {
  color: #222222 !important; 
}

footer h3 {
  color: #ffffff !important;
}

.spotlight-slider .article-title {
  color: #ffffff !important;
}
.spotlight-slider .article-subtitle {
  color: #ffffff !important;
}


#keppel-empty #growwithus .feature-tiles--wrapper.splide__list .tile--title.field-tiletitle {
	color: #ffffff !important;
}

.gray .image-callout>.component-content .field-callouttitle {
	color: #222222 !important
}

#article-header .banner-content h4 {
    color: #222222 !important
}

#article-header .banner-content h1 {
	color: #222222 !important
}

#article-header .banner-content h3 {
	color: #222222 !important
}

#article-header:has(.desktop-banner img) .banner-content :is(h4, h1, h3) {
    color: #ffffff !important;
}

.media-release-details div.news-date {
    color: #222222 !important
}

@media screen and (max-width: 768px) {

  .spotlight-slider .article-title {
    color: #ffffff !important;
  }

  .spotlight-slider .article-subtitle {
    color: #ffffff !important;
  }

 .spotlight-slider .splide__slide>.article-card .article-content {
    min-height: 420px;
}

  .tabs div.tabs-select {

      border: 1px solid #707070 !important;
      background: #ffffff !important;
      color: #555555 !important;
  }

  .tabs div.tabs-select:after {
      filter: invert(1);
  }
  .ham-btn span {
    background-color: #000;
}


   /* .tabs div.tabs-select:after {
      position: absolute;
      top: 21px;
      right: 10px;

  }  */
}

/* ============ MOBILE SLIDER FIX: "What's New" (spotlight-slider) ============
 * Issue: This slider's Splide markup is pre-initialized with desktop inline
 * styles (each .splide__slide hard-coded to width: calc(25% - 22.5px), and the
 * .splide__list has an inline transform). On narrow viewports those inline
 * styles win, so the carousel keeps its 4-up desktop layout and cannot be
 * swiped. Other sliders on the page (e.g. .image-slider in "Special Features")
 * do NOT have those baked-in inline styles, which is why they work on mobile.
 *
 * Fix: On mobile only, convert the splide__track into a native horizontal
 * scroll container with scroll-snap. This bypasses the broken JS state and
 * gives a smooth, swipeable experience using only CSS.
 * --------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

  /* Hide arrow buttons - native swipe replaces them */
  .spotlight-slider .splide__arrows,
  .spotlight-slider .splide__arrow {
    display: none !important;
  }

  /* Make the track horizontally scrollable */
  .spotlight-slider .splide__track {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 16px !important;
    padding: 0 16px !important;
  }

  /* Hide the scrollbar visually but keep scrolling */
  .spotlight-slider .splide__track {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .spotlight-slider .splide__track::-webkit-scrollbar {
    display: none !important;
  }
}


/* ============ MOBILE TABS-SELECT FIX: strip stray <br> tags =================
 * Issue: Keppel custom JS (pre-optimized-min.js) builds the mobile tabs-select
 * dropdown via:
 *     const s = li.querySelector(".field-heading").innerHTML;
 *     div.innerText = s;
 * The source markup formats headings across multiple indented lines, so
 * innerHTML returns "\n   China\n   ". When that string is assigned to
 * innerText, the HTML spec's "rendered text fragment" algorithm converts each
 * \n into a <br> element, producing <br>China<br> inside .tabs-select — visible
 * as extra vertical padding around the label on mobile.
 *
 * Fix: hide <br> children inside .tabs-select. Pure CSS, no JS/HTML edits.
 * --------------------------------------------------------------------------- */
.tabs-select br {
  display: none !important;
}


.privacy-warning::before {
    background-color: #c8102e !important;
}


.privacy-warning .close {
    background-color: #c8102e !important;
}

.privacy-warning::after {
    background-color: #c8102e !important;
}

.image-callout > .component-content div[data-image-offset="3-side-left"] + .container .image-section::after {
    background-color: #c8102e !important;
}


.content-section .transparent {
    background-image: unset !important;
}

html body .content-section .component-content.transparent::before {
    background-color: #F5F5F5 !important;
}

.privacy-warning {
  background: #F5F5F5 !important;
  border: 1px solid #E5E5E5 !important;
}

.privacy-warning .info {
  color: #222222 !important;
}

.privacy-warning .submit a {
    border: 1px solid #E5E5E5 !important;
    color: #222222 !important;

}

.privacy-warning .submit a:hover {
    background-color: rgb(255 255 255) !important;
}

.image-slider .image-slider-item .field-slideimage img {
	object-fit: cover;
}

.publish-date {
	color: #222222 !important;
}

.translate-language-links .row {
  color: #222222;
}

/* Optional: Ensures the 'EN' and '中文' links keep their original link color */
.translate-language-links .row a {
  color: #da2128; /* Replace with your actual link color if needed */
}

.translate-language-links .row a:first-child {
  margin-right: 10px; 
}

/* Pushes the | away from the second link (中文) */
.translate-language-links .row a:last-child {
  margin-left: 10px; 
}

.social-share-buttons img {
	filter: invert(1);
}

main .search-box input {
    border: 1px solid #bcb6b6;
    min-width: 100%;
}

/*
.search-results-count, .search-result-list {
	display: none;
}
*/


.gsc-wrapper {
    max-width: 100% !important;
}

.sitecore-form form>div {
    background-color: #F5F5F5 !important;
}


.arrow-link a::after, .arrow-link::after, a.arrow-link::after {
    filter: invert(1) !important;
}

.news-enquiries > div {
	color: #222222 !important;
}

.news-downloads > div {
	color: #222222 !important;
}

.feature-tiles .tile--content>a::after {
    filter: invert(1) !important;
}

.feature-tiles #splide01-list .tile--content>a::after {
    content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDkuODg3Ij48cGF0aCBpZD0iSWNvbl9hd2Vzb21lLWNoZXZyb24tZG93biIgZGF0YS1uYW1lPSJJY29uIGF3ZXNvbWUtY2hldnJvbi1kb3duIiBkPSJNNC45NTcsMTQuNTI0bC00LjQtNC40YS41NDMuNTQzLDAsMCwxLDAtLjc2OGwuNTEzLS41MTNhLjU0My41NDMsMCwwLDEsLjc2OCwwbDMuNSwzLjQ4NywzLjUtMy40ODdhLjU0My41NDMsMCwwLDEsLjc2OCwwbC41MTMuNTEzYS41NDMuNTQzLDAsMCwxLDAsLjc2OGwtNC40LDQuNEEuNTQzLjU0MywwLDAsMSw0Ljk1NywxNC41MjRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOC42ODMgMTAuMjg1KSByb3RhdGUoLTkwKSIgZmlsbD0iI2RhMjEyOCIvPjwvc3ZnPg==) !important;
	filter: invert(0) !important;
}

.image-tiles-container .arrow-link a::after, .image-tiles-container .arrow-link::after, .image-tiles-container a.arrow-link::after {
    filter: invert(0) !important;
}

.image .image-caption, .video:not(html) .video-caption {
    display: inline-block;
    padding: 15px 50px;
    font-size: .75em;
    color: #999 !important;
}

.field-calloutcopy a {
	text-decoration: underline;
	text-underline-offset: 3px;
}


html body .content-section .component-content .image-tiles-container .arrow-link::after {
	filter: invert(0) !important;
}

.tabs .tabs-container .tab>.row>*, .tabs .tabs-container .tab>.row>*>.component-content>* {
 
    color: #222222 !important;
}

html body .content-section .rich-text .component-content div {
	color: #222222 !important;
}


@media screen and (max-width: 768px) {
	header #search-trigger-toggle::after {
		filter: invert(1) !important;
	}
	
	.facet-date-range.wp-native-date input {
		width: 100% !important;
	}

	.facet-date-range.wp-native-date a.arrow-button {
		width: 100% !important;
	}
	
}


#keppel-empty #growwithus .component-content.transparent .feature-tiles--wrapper.splide__list .tile--title.field-tiletitle {
    color: #222222 !important;
}


.article-listing .arrow-link a::after, .article-listing .arrow-link::after, .article-listing a.arrow-link::after {
    filter: unset !important;
}



.anchor-sections .card-tiles .card--body {
    color: #222222 !important;
}

.anchor-sections .card-tiles .card--title {
    color: #ffffff !important;
}


.articles-list.spotlight-slider.display-as-slider .article-card .arrow-link::after {
	filter: unset !important;
}

header #header-upper > .component-content > .row > .container .button a {

	transition: all 0.3s;
}


header #header-upper > .component-content > .row > .container .button a:hover {
	background: #c8102e !important;
    color: #ffffff !important;
}


footer .link-list ul li a:hover::after {
    opacity: 1 !important;
}

.gcsc-more-maybe-branding-root {
	display: none !important;
}

/* UAT2 2026-10-26: Privacy Policy / T&C - list items black like the paragraphs (ol.lettered = legal pages only) */
.rich-text ol.lettered > li,
.rich-text:has(ol.lettered) li {
	color: #000 !important;
}


html body .component-content.light-grey .text-tiles-list .tile .tile-inner {
    background-color: #ffffff !important;
    color: #222222 !important;
}

footer .link-list ul li a::after {
    width: 100%;
    height: 2px;
    content: '';
    display: block;
    background-color: #c8102e;
    -webkit-transform: skew(-45deg);
    transform: skew(-45deg);
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity .3s;
}


footer .link-list ul li .field-link a:hover::after,
footer .link-list ul li .field-link a:focus-visible::after {
    content: '' !important;
    display: block !important;
    opacity: 1 !important;
}


.logo-tiles .lightbox--inner {
    background-color: #ffffff !important;
}


.logo-tiles .lightbox--inner .logo-tile--desc {
    color: #222222 !important;
}

.media-release-details .disclaimer .cntpopup {
	background-color: #ffffff;
}