/* Elements - Common Classes Start */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Background Utilities */
/* ------------------------------------------------*/

.bg-accent {
  background-color: var(--accent);
}

.bg-additional {
  background-color: var(--additional);
}

.bg-base {
  background-color: var(--base);
}

.bg-base-tint {
  background-color: var(--base-tint);
}

.bg-base-shade {
  background-color: var(--base-shade);
}

.bg-base-opp {
  background-color: var(--base-opp);
}

/* Brand background utilities */
.bg-brand-black {
  background-color: var(--brand-black);
}

.bg-brand-white {
  background-color: var(--brand-white);
}

.bg-brand-blue {
  background-color: var(--brand-blue);
}

.bg-brand-surface-dark {
  background-color: var(--brand-surface-dark);
}

.bg-brand-surface-light {
  background-color: var(--brand-surface-light);
}

.bg-brand-graphite {
  background-color: var(--brand-graphite);
}


/* ------------------------------------------------*/
/* Stroke / Border Utilities */
/* ------------------------------------------------*/

.st-accent {
  border: 1px solid var(--accent);
}

.st-additional {
  border: 1px solid var(--additional);
}

.st-base {
  border: 1px solid var(--base);
}

.st-base-tint {
  border: 1px solid var(--base-tint);
}

.st-base-shade {
  border: 1px solid var(--base-shade);
}

.st-base-opp {
  border: 1px solid var(--base-opp);
}

/* Semantic stroke utilities */
.st-bright {
  border: 1px solid var(--st-bright);
}

.st-medium {
  border: 1px solid var(--st-medium);
}

.st-muted {
  border: 1px solid var(--st-muted);
}


/* ------------------------------------------------*/
/* Text Colour Utilities */
/* ------------------------------------------------*/

.t-accent {
  color: var(--accent);
}

/* Danger / alert text — used by pinned-section items with tone="alert"
   (e.g. the red "Problem" headings). Reads well on light and dark surfaces. */
.t-error {
  color: #e5484d;
}

.t-additional {
  color: var(--additional);
}

.t-bright {
  color: var(--t-bright);
}

.t-medium {
  color: var(--t-medium);
}

.t-muted {
  color: var(--t-muted);
}

.t-muted-extra {
  color: var(--t-muted-extra);
}

.t-opp-bright {
  color: var(--t-opp-bright);
}

.t-brand-blue {
  color: var(--brand-blue);
}


/* ------------------------------------------------*/
/* Radius Utilities */
/* ------------------------------------------------*/

.radius-s {
  -moz-border-radius: var(--_radius-s);
       border-radius: var(--_radius-s);
  overflow: hidden;
}

.radius-m {
  -moz-border-radius: var(--_radius-m);
       border-radius: var(--_radius-m);
  overflow: hidden;
}

.radius-l {
  -moz-border-radius: var(--_radius-l);
       border-radius: var(--_radius-l);
  overflow: hidden;
}

.radius-xl {
  -moz-border-radius: var(--_radius-xl);
       border-radius: var(--_radius-xl);
  overflow: hidden;
}


/* ------------------------------------------------*/
/* Height Utilities */
/* ------------------------------------------------*/

.fullheight-l {
  height: auto;
}

@media only screen and (min-width: 992px) {
  .fullheight-l {
    height: 100%;
  }
}

.fullheight-xl {
  height: auto;
}

@media only screen and (min-width: 1200px) {
  .fullheight-xl {
    height: 100%;
  }
}


/* ------------------------------------------------*/
/* Animation Helpers */
/* ------------------------------------------------*/

.anim-zoom-in-container,
.anim-zoom-out-container {
  -webkit-transform-origin: center;
     -moz-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}


/* ------------------------------------------------*/
/* Padding Utilities */
/* ------------------------------------------------*/

.padding-4 {
  padding: 2.6rem 3rem;
}

@media only screen and (min-width: 768px) {
  .padding-4 {
    padding: 3.6rem 4rem;
  }
}

.padding-5x4 {
  padding: 2.6rem 3rem;
}

@media only screen and (min-width: 768px) {
  .padding-5x4 {
    padding: 4rem 5rem;
  }
}


/* ------------------------------------------------*/
/* Desktop Card Width Utilities */
/* ------------------------------------------------*/

@media only screen and (min-width: 1200px) {
  .card-desktop-4 {
    width: -moz-calc(40% - 1.5rem);
    width: calc(40% - 1.5rem);
  }

  .card-desktop-6 {
    width: -moz-calc(60% - 1.5rem);
    width: calc(60% - 1.5rem);
  }
}

/* ------------------------------------------------*/
/* Elements - Common Classes End */
/* ------------------------------------------------*/

.radius-m-clip {
  border-radius: var(--_radius-m);
  overflow: hidden;
}