/**
 * BXP Cookie Consent — presentation layer
 *
 * Targets Pressidium Cookie Consent 1.9.x, which bundles Orest Bida's
 * CookieConsent 2.9.2. Selectors below are that library's v2 markup
 * (#cm / #cs / .c-bl / .b-tg). A future Pressidium release built on
 * CookieConsent v3 would rename all of them — see the note in CLAUDE.md.
 *
 * Design source: Figma "BXP_Corporate_Website_Cookie_Consent_072826"
 *   71:14   desktop / policy          71:31   desktop / customize
 *   71:109  mobile  / policy          71:129  mobile  / customize
 *
 * Copy, colours, categories and button roles all come from the plugin
 * settings (see .claude/pressidium-settings-figma-match.json). Only what
 * the plugin cannot express lives in this file.
 *
 * Loaded standalone rather than through the theme's webpack/SCSS pipeline:
 * that build has not run since 2024 and its node-sass 4.x caps out around
 * Node 14. Enqueued in functions/Assets/Assets.php.
 */

/* ---------------------------------------------------------------------------
   Tokens
   The plugin writes its own palette onto :root from the settings screen.
   Redeclaring on #cc--main keeps this file from fighting that, and keeps
   everything scoped to the consent UI.
   --------------------------------------------------------------------------- */

#cc--main {
  --bxp-blue: #0869ad;
  --bxp-navy: #001a33;
  --bxp-navy-fill: #011933;
  --bxp-text: #1e1e1e;

  --bxp-pad: 32px;
  --bxp-hdr-h: 64px;
  --bxp-ftr-h: 76px;

  --cc-font-family: 'real-head', Helvetica, Arial, sans-serif;
  --cc-font-size: 16px;
  --cc-border-radius: 20px;
  --cc-btn-border-radius: 0;
}

/* ---------------------------------------------------------------------------
   Shared button treatment (both modals)
   Library defaults are flex:1 (buttons stretch to fill) at .82em — the design
   wants intrinsic widths at a fixed 16px.
   --------------------------------------------------------------------------- */

#cc--main .c-bn {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The library's <=688px block sets width:100% on every button. */
  width: auto;
  height: 40px;
  min-height: 0;
  /* 18px + the 2px border reproduces the design's 20px inset, and keeps the
     bordered and solid variants the same size. */
  padding: 0 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.8px;
  text-transform: capitalize;
  border: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Outline (secondary) variant. The library paints these via
   :first-child / :last-child rules, so match that specificity. */
#cc--main #c-bns.swap button:first-child,
#cc--main #s-bns #s-rall-bn {
  background: transparent;
  border-color: var(--bxp-navy);
  color: var(--bxp-navy);
}

#cc--main #c-bns.swap button:first-child:hover,
#cc--main #c-bns.swap button:first-child:active,
#cc--main #s-bns #s-rall-bn:hover,
#cc--main #s-bns #s-rall-bn:active {
  background: var(--bxp-navy);
  color: #fff;
}

/* Solid (primary) variant. #s-sv-bn is secondary by default in the library. */
#cc--main #c-bns.swap button:last-child,
#cc--main #s-bns #s-all-bn,
#cc--main #s-bns #s-sv-bn {
  background: var(--bxp-navy-fill);
  border-color: var(--bxp-navy-fill);
  color: #fff;
}

#cc--main #c-bns.swap button:last-child:hover,
#cc--main #s-bns #s-all-bn:hover,
#cc--main #s-bns #s-sv-bn:hover {
  background: var(--bxp-navy);
  border-color: var(--bxp-navy);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Layer 1 — consent modal (#cm)
   --------------------------------------------------------------------------- */

#cc--main #cm {
  right: var(--bxp-pad);
  bottom: var(--bxp-pad);
  width: 492px;
  max-width: calc(100vw - 40px);
  padding: 0;
  border-radius: var(--cc-border-radius);
  background: #fff;
  font-family: var(--cc-font-family);
  color: var(--bxp-text);
}

/* Anchors the absolutely-positioned Customize link to the card. */
#cc--main #c-inr {
  position: relative;
}

#cc--main #c-inr-i {
  padding: 20px var(--bxp-pad) 0;
}

#cc--main #c-ttl {
  margin: 0 0 20px;
  padding: 0 0 16px;
  /* Figma draws the dividers at stroke-width 2. */
  border-bottom: 2px solid var(--bxp-blue);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--bxp-text);
}

#cc--main #c-txt {
  margin: 0;
  padding: 0 0 20px;
  border-bottom: 2px solid var(--bxp-blue);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--bxp-text);
}

#cc--main #c-txt a,
#cc--main #c-txt .cc-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
}

/* The Customize control is a data-cc="c-settings" button inside the
   description. Lift it out of the text flow and onto the button row.
   Because it is absolutely positioned it no longer contributes height,
   so #c-txt's bottom border still sits tight under the copy. */
/* Specificity note: the #c-txt link rule above is two IDs deep, so this
   selector has to match it or font-size:inherit wins. */
#cc--main #c-txt .bxp-cc-customize {
  position: absolute;
  left: var(--bxp-pad);
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  height: 40px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 20px;
  text-decoration: underline;
  text-transform: none;
  letter-spacing: normal;
  color: var(--bxp-text);
}

#cc--main #c-bns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
  margin: 0;
  padding: 20px var(--bxp-pad) 16px;
}

/* Neutralise the library's button+button margin now that gap handles spacing.
   margin-top is set by its <=688px block. */
#cc--main #c-bns button+button,
#cc--main #s-bns button+button {
  margin-left: 0;
  margin-top: 0;
  float: none;
}

/* ---------------------------------------------------------------------------
   Layer 2 — preferences modal (#cs / #s-inr)
   The design anchors this bottom-right like the consent modal; the library's
   "box" layout centres it, so override the wrapper's alignment.
   --------------------------------------------------------------------------- */

#cc--main #s-cnt #c-vln,
#cc--main #s-cnt #cs {
  display: block;
  height: 100%;
}

/* The design shows the page undimmed behind the preferences panel.
   Click-outside-to-close is bound to #s-cnt, not the overlay, so hiding
   this does not cost any behaviour. */
#cc--main #cs-ov {
  display: none;
}

/* Fixed rather than absolute: the library nests this four levels deep
   (#s-cnt > #c-vln > #cs > #c-s-in) and only the outermost is positioned,
   so anchoring to the viewport is the predictable choice. The slide
   transition transforms #s-inr, which is below this element. */
#cc--main #s-cnt #c-s-in {
  position: fixed;
  right: var(--bxp-pad);
  bottom: var(--bxp-pad);
  left: auto;
  top: auto;
  transform: none;
  width: 492px;
  max-width: calc(100vw - 40px);
  /* Figma specifies 560, but its layout only fits because one category
     description uses leading-normal (~22px) where every other uses 1.5 (24px).
     With consistent leading plus the spacing around the privacy line, the
     content needs 400px: 64 header + 20 + 400 + 20 + 76 footer = 580. */
  height: min(580px, calc(100vh - 64px));
}

#cc--main #s-inr {
  width: 100%;
  height: 100%;
  margin: 0;
  padding-top: var(--bxp-hdr-h);
  padding-bottom: var(--bxp-ftr-h);
  border-radius: var(--cc-border-radius);
  background: #fff;
  font-family: var(--cc-font-family);
  color: var(--bxp-navy);
}

/* Header ------------------------------------------------------------------ */

/* The library borders the header and footer edge-to-edge. The design insets
   both rules to the content width, matching layer 1 — so draw them as
   pseudo-elements instead. Absolutely positioned, so they never become a
   flex/grid item of the footer.
 *
 * Do NOT add `position: relative` here: the library positions #s-hdr and
 * #s-bns absolutely, and #s-inr reserves space for them via padding. Making
 * them relative drops both into normal flow and pushes the panel down by the
 * header's full height. They already establish a containing block as-is. */
#cc--main #s-hdr {
  height: var(--bxp-hdr-h);
  padding: 0 var(--bxp-pad);
  border-bottom: none;
}

#cc--main #s-hdr::after,
#cc--main #s-bns::before {
  content: '';
  position: absolute;
  left: var(--bxp-pad);
  right: var(--bxp-pad);
  height: 2px;
  background: var(--bxp-blue);
}

#cc--main #s-hdr::after {
  bottom: 0;
}

#cc--main #s-bns::before {
  top: 0;
}

#cc--main #s-ttl {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--bxp-text);
}

#cc--main #s-c-bnc {
  position: relative;
}

#cc--main #s-c-bn {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  min-height: 0;
  padding: 0;

  position: relative;
  top: 2px;
  left: 5px;
}

#cc--main #s-c-bn::before,
#cc--main #s-c-bn::after {
  width: 1.5px;
  height: 14px;
  top: 5px;
  left: 11px;
  background: var(--bxp-text);
}

/* Scroll region ----------------------------------------------------------- */

/* No bottom padding: the footer's rule already separates the list, and the
   content is a near-exact fit for the 560px card.
 *
 * Flex so the categories can be reordered. Pressidium assigns cookie tables to
 * blocks by hardcoded index (1=necessary, 2=analytics, 3=targeting,
 * 4=preferences) in Cookie_Consent.php, so the config's block order is not
 * ours to choose — reordering there silently hands each category the wrong
 * table. The design's Necessary / Functional / Analytics order is applied here
 * instead. */
#cc--main #s-bl {
  display: flex;
  flex-direction: column;
  padding: 20px var(--bxp-pad) 20px;
}

#cc--main #s-bl .c-bl:first-child {
  order: 0;
}

#cc--main #s-bl .c-bl:has(.c-tgl[value='necessary']) {
  order: 1;
}

#cc--main #s-bl .c-bl:has(.c-tgl[value='preferences']) {
  order: 2;
}

#cc--main #s-bl .c-bl:has(.c-tgl[value='analytics']) {
  order: 3;
}

#cc--main #s-bl .c-bl:last-child {
  order: 4;
}

/* Flatten the category blocks: the design has no card chrome, no hover
   state and no accordion. */
#cc--main #s-bl .c-bl,
#cc--main #s-bl .c-bl.b-ex {
  margin: 0 0 16px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  transition: none;
}

#cc--main #s-bl .c-bl:hover,
#cc--main #s-bl .c-bl.b-ex:hover {
  background: transparent;
}

#cc--main #s-bl .c-bl:first-child {
  margin-bottom: 20px;
}

/* "See our Privacy Policy." reads as a footnote to the whole list rather than
   part of the last category, so it gets its own breathing room above, and the
   scroll area's bottom padding holds it off the footer rule. */
#cc--main #s-bl .c-bl:last-child {
  margin-top: 4px;
  margin-bottom: 0;
}

#cc--main #s-bl .title {
  position: relative;
  margin: 0;
  min-height: 24px;
}

#cc--main #s-cnt .b-bn .b-tl {
  width: auto;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: var(--bxp-navy);
  cursor: default;
  transition: none;
}

#cc--main #s-cnt .b-bn .b-tl:hover,
#cc--main #s-cnt .b-bn .b-tl:active {
  background: none;
}

/* Kill the accordion: hide the chevron, and force every panel open so the
   category descriptions read as body copy rather than hidden content. */
#cc--main .b-bn .exp::before,
#cc--main .act .b-bn .exp::before {
  display: none;
}

#cc--main #s-bl .b-acc,
#cc--main #s-bl .act .b-acc {
  display: block;
  max-height: none;
  overflow: visible;
  border-radius: 0;
}

/* Blocks with a toggle get ".desc b-acc"; the intro and privacy-policy blocks
   have no toggle and get ".desc" alone, so both need styling. */
#cc--main #s-bl .b-acc .p,
#cc--main #s-bl .desc .p {
  margin: 4px 0 0;
  padding: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--bxp-navy);
}

#cc--main #s-bl .c-bl:first-child .p {
  margin-top: 0;
}

/* Cookie tables stay in the plugin settings for the record, but the design
   has no room for them — disclosure lives in the Privacy Policy. */
#cc--main #s-bl .b-acc table {
  display: none;
}

/* The library renders .cc-link as bold with a border-bottom "underline".
   Adding text-decoration on top of that produces a double rule, so drop the
   border and inherit the surrounding weight. */
#cc--main .cc-link,
#cc--main #s-bl a,
#cc--main #s-bl .cc-link {
  border: none;
  border-bottom: none;
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
}

/* Necessary: the design replaces the disabled toggle with a text label. */
#cc--main #s-bl .b-tg:has(.c-ro),
#cc--main #s-bl .c-tg.c-ro {
  display: none;
}

#cc--main #s-bl .c-bl:has(.c-tg.c-ro) .title::after {
  content: 'Always Active';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--bxp-navy);
}

/* Toggles ----------------------------------------------------------------- */
/* Library sizes these in em (3.4em x 1.5em); the design is a fixed
   39x20 pill with a 16px knob and 2px inset, so travel is 19px. */

#cc--main .b-tg,
#cc--main .b-tg .c-tg,
#cc--main .b-tg .c-tgl,
#cc--main span.t-lb {
  width: 39px;
  height: 20px;
  border-radius: 20px;
}

#cc--main #s-bl .b-tg {
  position: absolute;
  right: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  margin: 0;
}

#cc--main .b-tg .c-tg::after {
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  box-shadow: none;
}

#cc--main .b-tg .c-tgl:checked~.c-tg::after {
  transform: translateX(19px);
  background: #fff;
}

/* The design has no glyphs inside the track. */
#cc--main .b-tg .on-i,
#cc--main .b-tg .off-i {
  display: none;
}

/* Footer ------------------------------------------------------------------ */

/* The three buttons total exactly the 428px content width, so they must not
   wrap and nothing may claim the free space — space-between reproduces the
   design's 16px gaps on its own. */
#cc--main #s-bns {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--bxp-ftr-h);
  padding: 20px var(--bxp-pad) 16px;
  border-top: none;
}

/* DOM order is Accept All, Reject, Save. Design order is
   Reject (far left), Save, Accept All. */
#cc--main #s-bns #s-rall-bn {
  order: 1;
}

#cc--main #s-bns #s-sv-bn {
  order: 2;
}

#cc--main #s-bns #s-all-bn {
  order: 3;
}

/* ---------------------------------------------------------------------------
   Mobile — 393px reference frames
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  #cc--main {
    --bxp-pad: 16px;
    /* 20 top + 40 + 16 gap + 40 + 16 bottom */
    --bxp-ftr-h: 132px;
  }

  /* The library's <=688px block applies padding with !important. */
  #cc--main #cm,
  #cc--main #cm.box {
    padding: 0 !important;
    width: auto;
    left: 20px;
    right: 20px;
    bottom: 20px;
    max-width: none;
  }

  #cc--main #c-txt {
    font-size: 15px;
  }

  /* Policy footer stays a single row: Customize left, Reject + Accept All
     right, matching 71:109. The library stacks it into a column below 688px. */
  #cc--main #c-bns {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  #cc--main .c-bn {
    padding: 0 14px;
  }

  #cc--main #s-cnt #c-s-in {
    right: 20px;
    left: 20px;
    bottom: 20px;
    top: auto;
    width: auto;
    max-width: none;
    height: min(553px, calc(100vh - 120px));
  }

  /* Customize footer becomes two rows: Save Preferences on its own line,
     then Reject + Accept All beneath it (71:129 / 108:44).
     Grid rather than flex — flex-basis:100% would stretch the button to
     fill the row instead of keeping it right-aligned at intrinsic width. */
  #cc--main #s-bns {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      'save   save   save'
      'spacer reject accept';
    align-content: center;
  }

  #cc--main #s-bns #s-sv-bn {
    grid-area: save;
    justify-self: end;
    margin: 0;
  }

  #cc--main #s-bns #s-rall-bn {
    grid-area: reject;
    margin: 0;
  }

  #cc--main #s-bns #s-all-bn {
    grid-area: accept;
    margin: 0;
  }

  /* Visible scroll affordance on the category list. */
  #cc--main #s-bl::-webkit-scrollbar {
    width: 6px;
  }

  #cc--main #s-bl::-webkit-scrollbar-thumb {
    border: none;
    border-radius: 100em;
  }
}

/* ---------------------------------------------------------------------------
   Narrow phones — the layer-1 footer runs out of room
 *
 * "Customize" is absolutely positioned bottom-left while Reject and Accept All
 * are right-aligned in the same band, so they collide rather than reflow. At
 * the design's 393px the row needs 298px of the 321px available; below roughly
 * 370px it overlaps.
 *
 * First tighten the row, which holds the single-line layout down to 360px and
 * keeps every common handset (360, 375, 390) on the intended design.
   --------------------------------------------------------------------------- */

@media (max-width: 389px) {
  #cc--main #c-bns {
    gap: 10px;
  }

  #cc--main #c-bns .c-bn {
    padding: 0 12px;
  }
}

/* Below that the two buttons alone claim the width, so give the link its own
   row underneath. It stays anchored to #c-inr, so growing the button band's
   bottom padding lifts the buttons clear of it. */
@media (max-width: 359px) {
  #cc--main #c-bns {
    padding-bottom: 68px;
  }

  #cc--main #c-txt .bxp-cc-customize {
    bottom: 16px;
  }
}