/*
 * ng-consent: styles for the reference banner. Self-contained: does not rely on
 * the nationalgrid.co.uk global stylesheet. Values are the computed styles of the
 * live banner (homepage.css, build 574.DomesticSite.20260825).
 *
 * Needs the HelveticaNeue webfont (weights 400, 500, 700) registered under the
 * family name "HelveticaNeue", as on the live site.
 *
 * Breakpoints used by the live banner:
 *   35.9375em (575px)  page gutter 16px -> 24px
 *   80em     (1280px)  dialog padding 24px -> 32px, title 24px -> 32px
 *   90em     (1440px)  body copy 16px -> 14px, link text 18px -> 24px
 */

dialog.ngc {
  --ngc-blue: #00148c;
  --ngc-text: #53565a;
  --ngc-tick: #009ddc;
  --ngc-box: #f0f0f0;
  --ngc-gutter: 16px;

  box-sizing: border-box;
  max-width: min(740px, 100% - 2 * var(--ngc-gutter));
  padding: 24px;
  border: none;
  border-radius: 24px;
  background: #fff;
  color: #000;
  font-family: HelveticaNeue, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

dialog.ngc *,
dialog.ngc *::before,
dialog.ngc *::after {
  box-sizing: border-box;
}

dialog.ngc::backdrop {
  background-color: rgba(0, 20, 140, 0.8);
  backdrop-filter: blur(5px);
}

body[data-ngc-active='true'] {
  overflow: hidden !important;
}

.ngc__title {
  margin: 0 0 24px;
  padding: 0;
  color: var(--ngc-blue);
  font-family: HelveticaNeue, sans-serif;
  font-size: 24px;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
}

.ngc__content {
  color: var(--ngc-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.389;
}

.ngc__form {
  margin: 0;
}

.ngc__text {
  margin: 0;
  font-size: 16px;
}

.ngc__or {
  margin: 0 0 24px;
}

/* Buttons are reset to bare text; the look comes from .ngc__cta. */
.ngc__accept,
.ngc__save {
  display: inline-block;
  margin: 0;
  border: none;
  background: none;
  color: var(--ngc-text);
  font-family: HelveticaNeue, sans-serif;
  font-size: 100%;
  line-height: 1.15;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ngc__accept {
  padding: 16px 6px;
}

.ngc__save {
  padding: 32px 0 8px;
}

/* "Diamond link": rotated square with an arrow, then bold text. */
.ngc__link {
  display: inline;
  color: var(--ngc-blue);
  font-weight: 700;
}

.ngc__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  padding: 8px;
}

.ngc__save .ngc__cta {
  padding: 0;
}

.ngc__diamond {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  min-width: 40px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--ngc-blue);
  color: #fff;
  transform: rotate(45deg);
}

.ngc__icon {
  display: flex;
  width: 100%;
  height: 100%;
}

.ngc__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  transform: scale(0.25) rotate(-45deg);
  transition: transform 150ms ease-in-out;
}

.ngc__cta-text {
  display: block;
  padding: 0 16px;
  font-size: 18px;
  text-decoration: underline;
  text-decoration-color: transparent;
}

.ngc__save .ngc__cta-text {
  padding: 0;
}

.ngc__accept:hover .ngc__icon svg {
  transform: scale(0.25) rotate(0deg);
}

.ngc__accept:hover .ngc__cta-text,
.ngc__save:hover .ngc__cta-text {
  text-decoration-color: currentColor;
  transition: 150ms ease-in-out;
}

/* Checkboxes */
.ngc__options {
  display: flex;
}

.ngc__option {
  display: flex;
  flex-flow: row;
  align-items: baseline;
  margin-right: 10%;
}

.ngc__checkbox {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 4px;
  border: none;
  border-radius: 4px;
  background-color: var(--ngc-box);
  font-size: 0.9rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ngc__checkbox::before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: var(--ngc-text);
  transform: scale(0);
  transform-origin: center;
  transition: 120ms transform ease-in-out;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJpY29uLW1pbmlfX2NoZWNrLXRoaW4tY2hlY2stdGhpbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCg0KPHBhdGggaWQ9Imljb24tbWluaV9fY2hlY2stdGhpbi1jaGVjay10aGluLTIiICBkPSJNOS42LDI4LjNMMCwxOC43bDIuMS0yLjFMOS42LDI0TDI5LjksMy43TDMyLDUuOUw5LjYsMjguM3oiLz4NCjwvc3ZnPg==");
  mask: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJpY29uLW1pbmlfX2NoZWNrLXRoaW4tY2hlY2stdGhpbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCg0KPHBhdGggaWQ9Imljb24tbWluaV9fY2hlY2stdGhpbi1jaGVjay10aGluLTIiICBkPSJNOS42LDI4LjNMMCwxOC43bDIuMS0yLjFMOS42LDI0TDI5LjksMy43TDMyLDUuOUw5LjYsMjguM3oiLz4NCjwvc3ZnPg==");
}

.ngc__checkbox:checked::before {
  transform: scale(1);
  background-color: var(--ngc-tick);
}

.ngc__label {
  margin: auto 0 auto 8px;
  color: var(--ngc-text);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.ngc__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 35.9375em) {
  dialog.ngc { --ngc-gutter: 24px; }
}

@media (min-width: 80em) {
  dialog.ngc { padding: 32px; }
  .ngc__title { margin-bottom: 16px; font-size: 32px; }
}

@media (min-width: 90em) {
  .ngc__text { font-size: 14px; }
  .ngc__cta-text { font-size: 24px; }
}