/* Main JADU Subsite CSS */
:root {
  --primary-color: #AE5885;
  --accent-color: var(--primary-color);
  --card-bg: #ffffff;
  --card-text: #0b0d0e;
  --card-shadow: 0 6px 16px rgba(16, 24, 40, 0.08),
                  0 2px 4px rgba(16, 24, 40, 0.06);
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

/* Header and banner */
.header {
  background-color: #fff;
}

.header--fixed {
  background-color: #fff;
}

#main > header,
body.landing #page-wrapper,
body.is-mobile.landing #banner,
body.is-mobile.landing .wrapper.style4 {
  background-image: url("/leap/site/images/Pink_background.png") !important;
}


/* Force header background on all pages */
header,
.header,
#header,
.header--fixed,
.header.header--fixed,
#header.header--fixed {
    background-color: var(--primary-color) !important;
    color: var(--card-text) !important;
}

/* TILE CARDS */ 
.item { 
    font-family: 'Open Sans',sans-serif; 
    text-align: left; 
    font-size: 16px; 
    background: var(--primary-color); 
    border-radius: 10px; 
    text-transform: none; 
    color: #fff;   
    padding: 20px; 
    margin:10px; 
    height:220px; 
}

/* Remove any unwanted overlay or gradient from Jadu landing pages */
body.landing header,
body.landing .header,
body.landing #header,
body.landing .header--fixed {
    background-color: var(--primary-color) !important;
    box-shadow: none !important;
}

/* Fix sticky header colour when scrolling */
.header--fixed,
#header.header--fixed {
    background-color: var(--primary-color) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}


/* Menu */
#menu {
  background: var(--primary-color);
}

/* Global button styling (kept) */
button {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  color: var(--card-text);

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;

  min-height: 48px;
  padding: .75rem 1rem .75rem 1.25rem;

  background: var(--card-bg);
  border: none;
  border-radius: 6px;
  box-shadow: var(--card-shadow);

  position: relative;
  cursor: pointer;

  transition:
    transform .06s ease,
    box-shadow .12s ease,
    text-decoration-color .12s ease;
}

button:hover {
  text-decoration: underline;
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px rgba(16, 24, 40, 0.12),
    0 3px 8px rgba(16, 24, 40, 0.08);
  color: var(--card-text);
  background: var(--card-bg);
  cursor: pointer;
}

/* Buttons inside wrapper.style5 */
.wrapper.style5 .button:hover {
  background-color: var(--card-bg);
}

.wrapper.style5 button {
  color: var(--card-text);
  box-shadow: var(--card-shadow);
}

/* Generic item/widget styling (kept) */
.item {
  font-family: 'Open Sans', sans-serif;
  text-align: left;
  font-size: 16px;
  background: var(--primary-color);
  border-radius: 10px;
  text-transform: none;
  color: #fff;
  padding: 20px;
  margin: 10px;
  height: 220px;
}

.widget-row { margin-left: 0rem; margin-right: 0rem; }
.widget-width { float: left; padding: 0 0rem; }

/* Focus (keyboard) accessibility for buttons */
button:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent-color), white 30%);
  outline-offset: 3px;
}

/* Footer – match primary site colour */
footer,
#footer,
.site-footer {
  background-color: var(--primary-color);
  color: #ffffff;
}

/* Footer links */
footer a,
#footer a,
.site-footer a {
  color: #ffffff;
}

footer a:hover,
#footer a:hover,
.site-footer a:hover {
  text-decoration: underline;
}


/* Force footer colour on all pages, including homepage */
footer,
#footer,
.site-footer {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

footer * {
  background-color: transparent !important;
  color: inherit !important;
}
/* 1. MENU - Hide Account and Categories headings and links */
#menu > div.h2,
#menu > div.h2 + ul.list--navigation {
    display: none;
}