/*
 * Essex SDS Hub — shared components: top bar, buttons, footer,
 * overlays (menu / admin access / site settings), toggles.
 */

/* ---------- Top navigation bar ---------- */
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 36px;
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--btn-gap);
}

/* Homepage symbol (Path 5) — 25 × 25 */
.logo-plus {
  display: block;
  width: 25px;
  height: 25px;
  color: var(--logo-fg);
  transition: transform 0.5s var(--ease-soft);
}
.logo-plus svg {
  width: 100%;
  height: 100%;
}
.logo-plus:hover {
  transform: rotate(90deg);
}

/* Circular buttons — R 36 px, line weight 1 px (Button styles) */
.btn-circle {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-fg);
  flex: 0 0 auto;
  transition: transform 0.25s var(--ease-soft);
}
.btn-circle svg {
  width: 100%;
  height: 100%;
}
.btn-circle:hover {
  transform: scale(1.06);
}
/* Accessibility symbol: centre dot R small 4 px / hover 8 px */
.btn-circle .btn-dot {
  fill: var(--btn-fg);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s var(--ease-soft);
}
.btn-circle:hover .btn-dot,
.btn-circle:focus-visible .btn-dot {
  transform: scale(2);
}

/* On-hover tag (GT America Mono 12/12, padding 4, 8 px below the button) */
.btn-circle[data-tag]::after {
  content: attr(data-tag);
  position: absolute;
  top: calc(100% + var(--btn-gap));
  padding: var(--btn-pad);
  border-radius: 2px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.btn-circle[data-tag]:hover::after,
.btn-circle[data-tag]:focus-visible::after {
  opacity: 1;
}
.btn-circle[data-tag-align="center"]::after { left: 50%; transform: translateX(-50%); }
.btn-circle[data-tag-align="right"]::after  { right: 0; }
.btn-circle[data-tag-align="left"]::after   { left: 0; }

/* Small text button — H 20 px / W hug, padding 4, radius 2 (Button styles) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-pad);
  height: 20px;
  padding: var(--btn-pad);
  border-radius: 2px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
button.tag:hover,
a.tag:hover {
  filter: brightness(1.08);
}

/* ---------- Footer (Footer Aubergine / Footer black) ---------- */
.site-footer {
  background: var(--footer-bg, var(--footer-aubergine));
  color: var(--footer-fg);
  padding: var(--margin);                        /* 42 @1280 */
  overflow: clip;
}
.site-footer--black {
  --footer-bg: var(--footer-black);
}
.footer__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.footer__clientlogo {
  width: 148.7px;
  height: 36px;
  flex: 0 0 auto;
}
.footer__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(0px, 26.63vw, 511px);        /* 341 @1280 */
  width: clamp(560px, 77.734375vw, 1493px);      /* 995 @1280 */
  max-width: 100%;
  gap: 48px;
}
.footer__top {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 12.734375vw, 245px);          /* 163 @1280 */
}
.footer__contact {
  width: clamp(180px, 18.90625vw, 363px);        /* 242 @1280 */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.footer__block h3 {
  font-weight: 500;
  margin-bottom: 20px;
  letter-spacing: -0.01em;           /* Figma: −1 % on footer headings */
}
.footer__block p,
.footer__block a {
  font-weight: 300;
}
.footer__block a {
  display: block;
  text-decoration: underline;
  text-underline-position: from-font;
}
/* NOTE (WCAG 2.2 target-size): the stacked footer e-mail links are drawn at an
   18 px pitch — a 24 px pitch is needed to satisfy 2.2 AA target size. Kept as
   drawn; raised with the design team in docs/wcag-contrast-audit.html. */
.footer__block a:hover {
  color: var(--link-hwb);
}
:root[data-theme="contrast"] .footer__block a:hover {
  color: #fff;
}
.footer__mid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.footer__settings {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding-block: 10px;
}
.footer__settings p {
  width: clamp(220px, 25.234375vw, 485px);       /* 323 @1280 */
  max-width: 100%;
}
/* footer buttons keep the blue/aubergine spec on the dark footer */
.site-footer .btn-circle {
  --btn-bg: var(--c-blue);
  --btn-fg: var(--c-aubergine);
}
:root[data-theme="contrast"] .site-footer .btn-circle {
  --btn-bg: var(--c-grey);
  --btn-fg: var(--c-black);
}
.footer__place {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__wordmark {
  width: 105.4px;
  height: 34.35px;
}
.footer__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.footer__bottom-left {
  display: flex;
  align-items: center;
  gap: clamp(40px, 12.65625vw, 243px);           /* 162 @1280 */
}
.footer__hwb {
  width: clamp(180px, 18.90625vw, 363px);        /* 242 @1280 */
  font-weight: 500;
  letter-spacing: -0.02em;
}
.footer__copy {
  width: clamp(180px, 20.078125vw, 386px);       /* 257 @1280 */
  font-weight: 300;
}
.footer__cookies {
  font-weight: 300;
}
.footer__cookies:hover {
  text-decoration: underline;
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
.overlay[data-open="true"] {
  display: block;
}
.overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 18, 0.55);
}
.overlay__panel {
  position: absolute;
  inset: 0;
  overflow: auto;
}

/* Menu — Place+ Black panel, photo column on the right */
.overlay--menu .overlay__panel {
  background: var(--c-black);
  color: var(--c-grey);
  padding: 42px var(--margin);
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: overlay-in 0.35s var(--ease-soft) both;
}
:root[data-theme="light"] .overlay--menu .overlay__panel,
:root[data-theme="contrast"] .overlay--menu .overlay__panel {
  background: var(--c-grey);
  color: var(--c-aubergine);
}
:root[data-theme="contrast"] .overlay--menu .overlay__panel {
  color: var(--c-black);
}
/* photo: left edge at 58.33 % + 2.33 px of the frame, full height */
.menu__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(58.33% + 2.33px);
  right: 0;
  overflow: hidden;
  pointer-events: none;
}
.menu__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: photo-in 0.8s var(--ease-soft) both;
}
:root[data-simplified="true"] .menu__photo img {
  animation: none;
}
:root[data-theme="contrast"] .menu__photo img {
  filter: grayscale(1) contrast(1.1);
}
.menu__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;
}
.menu__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.menu__links a,
.menu__links span {
  display: block;
  white-space: nowrap;
  transition: color 0.2s, transform 0.3s var(--ease-soft);
}
.menu__links a:hover {
  color: var(--accent-text);
  transform: translateX(8px);
}
:root[data-theme="contrast"] .menu__links a:hover {
  color: var(--c-black);
  text-decoration: underline;
}
/* pages that don't exist yet — muted, not clickable */
.menu__links span {
  color: var(--fg-muted);
}
.overlay--menu .menu__links span {
  color: #8a8a8a;
}
:root[data-theme="light"] .overlay--menu .menu__links span,
:root[data-theme="contrast"] .overlay--menu .menu__links span {
  color: #555;
}
.menu__foot {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  width: clamp(360px, 46.09375vw, 885px);        /* 590 @1280 */
  max-width: 100%;
}
.menu__contact {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.menu__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.menu__brand img {
  width: 186.2px;
  height: 43.5px;
}
.menu__brand a {
  font-weight: 500;
}
.menu__brand a:hover {
  text-decoration: underline;
}

/* Admin access — 50 % Place+ Grey veil over the page */
.overlay--admin .overlay__panel {
  background: rgba(208, 208, 208, 0.5);
  color: var(--c-aubergine);
  padding: 42px var(--margin) 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.admin__form {
  width: clamp(360px, 46.09375vw, 885px);        /* 590 @1280 */
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}
.admin__fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.admin__fields input {
  height: 28px;
  padding: var(--btn-pad);
  border: 0;
  border-radius: 2px;
  background: rgba(208, 208, 208, 0.3);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-aubergine);
}
.admin__fields input::placeholder {
  color: var(--c-dark-grey);
  text-transform: uppercase;
}
.admin__credit {
  color: var(--c-aubergine);
}
.admin__credit a:hover {
  text-decoration: underline;
}
.overlay--admin .logo-plus {
  color: var(--c-aubergine);
}

/* Site settings — bottom sheet, always the dark panel (Sustainability panel) */
.overlay--settings {
  z-index: 120;
}
.overlay--settings .overlay__panel {
  inset: auto 0 0 0;
  background: var(--c-black);
  color: var(--c-grey);
  --btn-bg: var(--c-blue);
  --btn-fg: var(--c-aubergine);
  animation: sheet-in 0.4s var(--ease-soft) both;
}
:root[data-theme="contrast"] .overlay--settings .overlay__panel {
  --btn-bg: var(--c-grey);
  --btn-fg: var(--c-black);
}
.settings {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 21px var(--margin) 42px;
  min-height: 373px;
}
.settings__grid {
  display: flex;
  gap: clamp(40px, 9.0625vw, 174px);             /* 116 @1280 */
  padding-top: 42px;
  width: 100%;
}
.settings__intro {
  width: clamp(300px, 38.28125vw, 735px);        /* 490 @1280 */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6.953125vw, 134px);           /* 89 @1280 */
}
.settings__intro .t-h2 {
  letter-spacing: -0.02em;           /* Figma: −2 % here (unlike H2 elsewhere) */
}
.settings__intro .settings__note {
  font-weight: 300;
  font-size: clamp(15px, 1.40625vw, 23px);  /* 18 @1280 */
  line-height: 1;                    /* Figma: 18/18 */
  letter-spacing: -0.02em;
  max-width: clamp(300px, 38.28125vw, 735px);    /* 490 @1280 */
}
.settings__options {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.609375vw, 89px);            /* 59 @1280 */
  width: clamp(300px, 36.171875vw, 695px);       /* 463 @1280 */
  max-width: 100%;
}
.settings > .btn-circle {
  position: absolute;
  top: 21px;
  right: var(--margin);
}

/* Toggle — 36 × 18 track radius 2, 12 px round knob */
.toggle {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  letter-spacing: 0;                 /* Figma: 0 % on toggle rows */
}
.toggle .t-xs {
  letter-spacing: 0;
}
.toggle__switch {
  position: relative;
  width: 36px;
  height: 18px;
  border-radius: 2px;
  background: #717171;
  flex: 0 0 auto;
  margin-top: 9px;
  transition: background 0.2s;
}
.toggle__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-black);
  transition: left 0.2s var(--ease-soft);
}
.toggle[aria-checked="true"] .toggle__switch {
  background: var(--c-blue);
}
:root[data-theme="contrast"] .toggle[aria-checked="true"] .toggle__switch {
  background: var(--c-grey);
}
.toggle[aria-checked="true"] .toggle__switch::after {
  left: 20px;
}
.toggle__label {
  font-weight: 500;
  color: #8a8a8a;             /* Figma #717171 → AA on the dark sheet */
  transition: color 0.2s;
}
.toggle[aria-checked="true"] .toggle__label {
  color: var(--c-blue);
}
:root[data-theme="contrast"] .toggle[aria-checked="true"] .toggle__label {
  color: var(--c-grey);
}
.toggle__desc {
  font-weight: 300;
  color: var(--c-grey);
}
.toggle[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}
/* Cookie sheet: the "strictly necessary" row is always on — shown in full,
   not greyed like a temporarily unavailable setting */
.toggle.toggle--locked[aria-disabled="true"] {
  cursor: default;
  opacity: 1;
}
.cookies__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.cookies__status {
  color: var(--fg-muted);
  min-height: 12px;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes photo-in {
  from { opacity: 0; scale: 1.04; }
  to   { opacity: 1; scale: 1; }
}
@keyframes sheet-in {
  from { translate: 0 100%; }
  to   { translate: 0 0; }
}