/* enterrahost.com — Zaraz consent modal, injected into the modal's shadow root.
   See assets/js/consent-modal.js for why this is JS-driven.

   Derived from the enterramon.com sheet so both sites look the same. The layout
   fixes made on enterramon are carried over deliberately: the + sits in grid
   column 3, :host is split from .cf_modal, the buttons keep their labels on one
   line, and there is margin above the rule. The pasted original predates all
   four.

   FONT: 'Plus Jakarta Sans' is already preloaded on this site, so the modal
   matches the rest of the page rather than falling back to system-ui.

   THEME: enterrahost has a light/dark toggle and defaults to DARK unless the OS
   prefers light, whereas enterramon is light-only. This sheet pins the modal to
   the light treatment so it matches enterramon, which is what was asked for. If
   it should follow the site's own theme instead, the dark block at the end is
   where to start. */


/* ---- Shell ----
   :host and .cf_modal are NOT the same element and must not share this rule.
   The card styling was applied to both, so the HOST also got 16px of padding -
   and with no content of its own that made it a 32x32 box sitting in the page.
   It changed height when this sheet landed, which was the layout shift.

   Worse, shadow-root !important outranks document !important, so nothing in
   build-compat.css could correct it from outside; the fix has to be here.

   The host carries no chrome at all: zero size, pinned, transparent. The card
   inside does all the visible work and positions against the viewport. */
:host {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: 24px !important;
  left: 24px !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  z-index: auto !important;
}

.cf_modal {
  background: #ffffff !important;
  color: #2c2f30 !important;
  border-radius: 1rem !important;
  padding: 16px !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05) !important;
  filter: none !important;
}
.cf_modal {
  position: fixed !important;
  top: auto !important; right: auto !important;
  bottom: 24px !important; left: 24px !important;
  margin: 0 !important;
  transform: none !important;
  width: min(400px, calc(100vw - 32px)) !important;
  max-width: 400px !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
}
.cf_modal h2, .cf_modal h3 {
  color: #2c2f30 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
#cf_modal_title {
  font-weight: 800 !important; font-size: 1.05rem !important;
  line-height: 1.2 !important; letter-spacing: -.02em !important;
  margin: 0 0 4px !important;
}

/* ---- Intro / legal copy ---- */
.cf_consent-intro, .cf_consent-intro p, .cf_modal p {
  text-align: left !important; font-size: 12.5px !important;
  line-height: 1.45 !important; color: #5c6270 !important; margin: 0 !important;
}
.cf_consent-intro p + p { margin-top: 6px !important; }
.cf_modal a, .cf_consent-intro a {
  color: #cc5a00 !important; text-decoration: none !important;
  border-bottom: 1px solid rgba(204,90,0,.38) !important;
  font-weight: 600 !important; display: inline !important; line-height: 1.6 !important;
}
.cf_modal a:hover, .cf_consent-intro a:hover { border-bottom-color: #cc5a00 !important; }
.cf_modal hr {
  background: #dadddf !important; height: 1px !important;
  border: 0 !important; margin: 12px 0 !important;
}

/* ---- Purpose rows: two columns, collapsed by default ---- */
.cf_consent-container, ul {
  padding: 0 !important; margin: 0 !important;
  overflow: visible !important; max-height: none !important;
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important;
}
.cf_consent-element {
  background: rgba(255,122,44,.1) !important;
  border: 1px solid #dadddf !important;
  border-radius: .75rem !important;
  /* extra room at the bottom of the orange blocks */
  padding: 8px 10px 12px !important;
  grid-template-columns: 16px 1fr auto !important;
  grid-column-gap: 8px !important;
  margin: 0 !important;
  cursor: pointer !important;
  align-content: start !important;
}
.cf_consent-element + .cf_consent-element { margin-top: 0 !important; }
.cf_consent-element h3 {
  font-weight: 600 !important; font-size: 12.5px !important;
  color: #2c2f30 !important; margin: 0 !important;
}
.cf_consent-element__checkbox-wrapper { width: 16px !important; height: 16px !important; padding-top: 2px !important; }
.cf-checkbox { accent-color: #ff7a2c !important; width: 16px !important; height: 16px !important; cursor: pointer !important; }

/* Collapsed by default; .zc-open toggled on click / Enter / Space */
.cf_consent-element p {
  max-height: 0 !important; opacity: 0 !important; overflow: hidden !important;
  margin: 0 !important; font-size: 12px !important; line-height: 1.4 !important;
  color: #5c6270 !important;
  transition: max-height .18s ease, opacity .18s ease, margin-top .18s ease !important;
}
.cf_consent-element.zc-open p {
  max-height: 200px !important; opacity: 1 !important; margin-top: 6px !important;
}

/* Expand / collapse affordance.
   grid-column was 2 - the label's own column - so the + wrapped onto a second
   row UNDER the label instead of taking the third column the grid already
   reserved for it (16px 1fr auto). Column 3 is that auto column. */
.cf_consent-element::after {
  content: '+';
  grid-column: 3;
  font-size: 14px;
  line-height: 1;
  color: #cc5a00;
  justify-self: end;
  align-self: start;
}
.cf_consent-element.zc-open::after { content: '-'; }

/* ---- Buttons ---- */
.cf_consent-buttons {
  background: #ffffff !important; border-top: 1px solid #dadddf !important;
  /* The list has margin:0, so this rule and button row sat flush against the
     Analytics/Marketing boxes - measured gap 0px. The margin goes ABOVE the
     border, so the space appears between the boxes and the rule. */
  padding: 16px 0 0 !important; margin: 16px 0 0 !important;
  gap: 6px !important; max-width: none !important;
  /* The ROW may wrap; the LABELS may not. At 400px the three buttons no longer
     fit on one line at the old padding, and flex-wrap:nowrap made each label
     break across two lines instead - "Accept All" over two lines. Wrapping the
     row is harmless; breaking a label is not. */
  flex-wrap: wrap !important;
}
.cf_button {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 600 !important; font-size: .78125rem !important;
  border-radius: 9999px !important; height: auto !important; line-height: 1.3 !important;
  padding: 8px 12px !important; border: 1px solid transparent !important;
  white-space: nowrap !important;
  flex-grow: 0 !important; margin: 0 !important;
}
.cf_button--accept { background: #ff7a2c !important; border-color: #ff7a2c !important; color: #ffffff !important; }
.cf_button--accept:hover { background: #cc5a00 !important; border-color: #cc5a00 !important; }
.cf_button--reject, .cf_button--save { background: #ffffff !important; border-color: #dadddf !important; color: #2c2f30 !important; }
.cf_button--reject:hover, .cf_button--save:hover {
  background: rgba(255,122,44,.1) !important; border-color: #ff7a2c !important; color: #cc5a00 !important;
}
.cf_button:focus-visible, .cf-checkbox:focus-visible {
  outline: 2px solid #ff7a2c !important; outline-offset: 2px !important;
}
.cf_consent-container { padding-right: 0 !important; margin-right: 0 !important; }

/* ---- Dark mode: modal defaults to #222; site is light-only ---- */
@media (prefers-color-scheme: dark) {
  :host, .cf_modal { background: #ffffff !important; color: #2c2f30 !important; }
  .cf_consent-buttons { background: #ffffff !important; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .cf_modal {
    left: 12px !important; bottom: 12px !important; padding: 16px !important;
    width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important;
  }
  .cf_consent-container, ul { grid-template-columns: 1fr !important; }
  .cf_button { flex-grow: 1 !important; }
}