/* ============================================================
   JH ROOFING — COOKIE CONSENT UI
   Dependency-free. Namespaced .jhcc- to avoid theme collisions.
   Brand colours: edit the four --jhcc-* variables below only.
   ============================================================ */

:root{
  --jhcc-accent:        #0A6788;   /* JH brand teal — buttons, focus ring */
  --jhcc-accent-hover:  #084F68;
  --jhcc-ink:           #123240;   /* JH dark navy — body text */
  --jhcc-surface:       #FFFFFF;
  --jhcc-radius:        10px;
  --jhcc-font:          inherit;
}

.jhcc-root, .jhcc-root *{ box-sizing:border-box; }
.jhcc-root{ font-family:var(--jhcc-font); color:var(--jhcc-ink); }

/* ---------- Layer 1: banner ---------- */
.jhcc-banner{
  position:fixed; inset:auto 0 0 0; z-index:2147483000;
  background:var(--jhcc-surface);
  border-top:1px solid rgba(0,0,0,.10);
  box-shadow:0 -6px 28px rgba(0,0,0,.16);
  padding:20px clamp(16px,4vw,40px);
  transform:translateY(100%);
  transition:transform .28s ease;
}
.jhcc-banner[data-open="true"]{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .jhcc-banner{ transition:none; } }

.jhcc-banner__inner{
  max-width:1180px; margin:0 auto;
  display:flex; gap:24px; align-items:center; flex-wrap:wrap;
}
.jhcc-copy{ flex:1 1 420px; min-width:260px; }
.jhcc-title{ margin:0 0 6px; font-size:1.0625rem; font-weight:700; line-height:1.3; }
.jhcc-text{ margin:0; font-size:.875rem; line-height:1.55; color:#3C444D; }
.jhcc-text a{ color:var(--jhcc-accent); text-decoration:underline; }

.jhcc-actions{
  flex:0 1 auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}

/* Equal prominence: Accept and Reject share identical geometry & weight.
   ICO requires the reject option to be as easy to find and use as accept. */
.jhcc-btn{
  font:inherit; font-size:.875rem; font-weight:600; line-height:1;
  padding:13px 22px; min-width:132px; text-align:center;
  border-radius:var(--jhcc-radius); border:2px solid transparent;
  cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.jhcc-btn:focus-visible{ outline:3px solid var(--jhcc-accent); outline-offset:2px; }

.jhcc-btn--primary{ background:var(--jhcc-accent); border-color:var(--jhcc-accent); color:#fff; }
.jhcc-btn--primary:hover{ background:var(--jhcc-accent-hover); border-color:var(--jhcc-accent-hover); }

/* Reject = same size, same weight, same visual salience, outlined variant */
.jhcc-btn--secondary{ background:#fff; border-color:var(--jhcc-accent); color:var(--jhcc-accent); }
.jhcc-btn--secondary:hover{ background:color-mix(in srgb, var(--jhcc-accent) 8%, #ffffff); }

.jhcc-btn--ghost{
  background:transparent; border-color:#C7CDD4; color:#3C444D;
  font-weight:500; min-width:auto; padding:13px 18px;
}
.jhcc-btn--ghost:hover{ border-color:#8E979F; }

/* ---------- Layer 2: preferences modal ---------- */
.jhcc-overlay{
  position:fixed; inset:0; z-index:2147483001;
  background:rgba(10,13,17,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.jhcc-overlay[data-open="true"]{ opacity:1; visibility:visible; }

.jhcc-modal{
  background:var(--jhcc-surface); border-radius:14px;
  width:min(680px,100%); max-height:min(86vh,760px);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.34);
}
.jhcc-modal__head{
  padding:22px 26px 16px; border-bottom:1px solid #E7EAEE;
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
}
.jhcc-modal__head h2{ margin:0; font-size:1.125rem; font-weight:700; }
.jhcc-close{
  background:none; border:0; cursor:pointer; font-size:1.6rem; line-height:1;
  color:#6B747C; padding:2px 6px; border-radius:6px;
}
.jhcc-close:hover{ color:var(--jhcc-ink); }
.jhcc-close:focus-visible{ outline:3px solid var(--jhcc-accent); outline-offset:2px; }

.jhcc-modal__body{ padding:6px 26px 20px; overflow-y:auto; }
.jhcc-intro{ font-size:.875rem; line-height:1.6; color:#3C444D; margin:16px 0 20px; }

.jhcc-group{ border:1px solid #E7EAEE; border-radius:var(--jhcc-radius); padding:16px 18px; margin-bottom:12px; }
.jhcc-group__top{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.jhcc-group__name{ font-size:.9375rem; font-weight:700; margin:0; }
.jhcc-group__desc{ font-size:.8125rem; line-height:1.55; color:#59616A; margin:8px 0 0; }
.jhcc-group__always{ font-size:.8125rem; font-weight:600; color:#2E7D4F; white-space:nowrap; }

/* Switch — unticked by default, never pre-selected */
.jhcc-switch{ position:relative; display:inline-block; width:46px; height:26px; flex:0 0 auto; }
.jhcc-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.jhcc-switch__track{
  position:absolute; inset:0; background:#C7CDD4; border-radius:999px;
  transition:background-color .18s ease; pointer-events:none;
}
.jhcc-switch__track::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  background:#fff; border-radius:50%; transition:transform .18s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.jhcc-switch input:checked + .jhcc-switch__track{ background:var(--jhcc-accent); }
.jhcc-switch input:checked + .jhcc-switch__track::after{ transform:translateX(20px); }
.jhcc-switch input:focus-visible + .jhcc-switch__track{ outline:3px solid var(--jhcc-accent); outline-offset:2px; }

.jhcc-table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:.75rem; }
.jhcc-table th, .jhcc-table td{ text-align:left; padding:6px 8px; border-bottom:1px solid #EEF1F4; vertical-align:top; }
.jhcc-table th{ color:#6B747C; font-weight:600; }
.jhcc-details summary{ cursor:pointer; font-size:.8125rem; color:var(--jhcc-accent); margin-top:10px; }

.jhcc-modal__foot{
  padding:16px 26px 22px; border-top:1px solid #E7EAEE;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}

/* ---------- Persistent re-open control ---------- */
.jhcc-reopen{
  position:fixed; left:16px; bottom:16px; z-index:2147482999;
  background:#fff; color:#3C444D; border:1px solid #C7CDD4; border-radius:999px;
  font:inherit; font-size:.75rem; font-weight:600; padding:9px 14px; cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.14); display:none;
}
.jhcc-reopen[data-open="true"]{ display:inline-flex; align-items:center; gap:7px; }
.jhcc-reopen:hover{ border-color:#8E979F; }
.jhcc-reopen:focus-visible{ outline:3px solid var(--jhcc-accent); outline-offset:2px; }

@media (max-width:640px){
  .jhcc-banner{ max-height:88vh; overflow-y:auto; }
  .jhcc-actions{ width:100%; }
  .jhcc-actions .jhcc-btn{ flex:1 1 100%; }
  .jhcc-modal__foot .jhcc-btn{ flex:1 1 100%; }
  .jhcc-reopen{ left:12px; bottom:12px; }
}