/* CJP Real Estate — brand theme for vanilla-cookieconsent v3.
   Maps the library's CSS variables onto the site's design tokens (css/main.css).
   Accept all / Reject all are kept at equal visual weight (AEPD symmetry rule). */

#cc-main {
  /* Typography + surfaces */
  --cc-font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
  --cc-bg: var(--cjp-white, #fff);
  --cc-primary-color: var(--cjp-ink, #2A2722);
  --cc-secondary-color: var(--cjp-greige, #6B6358); /* body copy: 5.9:1 on white (stone was 3.8:1) */
  --cc-link-color: var(--cjp-gold-deep, #8A6A35);

  /* Radii + overlay */
  --cc-modal-border-radius: var(--radius-lg, 10px);
  --cc-btn-border-radius: var(--radius-sm, 4px);
  --cc-pm-toggle-border-radius: var(--radius-pill, 999px);
  --cc-overlay-bg: rgba(15, 14, 12, .55);
  --cc-modal-transition-duration: .3s;

  /* Primary button = "Accept all" → brand gold */
  --cc-btn-primary-bg: var(--cjp-gold, #A78143);
  --cc-btn-primary-color: var(--cjp-charcoal, #211E1A); /* charcoal on gold = 4.6:1, as the page's gold button (white was 3.6:1) */
  --cc-btn-primary-border-color: var(--cjp-gold, #A78143);
  --cc-btn-primary-hover-bg: var(--cjp-gold-light, #C2A165);
  --cc-btn-primary-hover-color: var(--cjp-charcoal, #211E1A);
  --cc-btn-primary-hover-border-color: var(--cjp-gold-light, #C2A165);

  /* Secondary button = "Reject all" / "Manage" → equal-weight charcoal outline */
  --cc-btn-secondary-bg: var(--cjp-sand, #F0E9DD);
  --cc-btn-secondary-color: var(--cjp-charcoal, #211E1A);
  --cc-btn-secondary-border-color: var(--cjp-charcoal, #211E1A);
  --cc-btn-secondary-hover-bg: var(--cjp-beige, #E5D8C4);
  --cc-btn-secondary-hover-color: var(--cjp-charcoal, #211E1A);
  --cc-btn-secondary-hover-border-color: var(--cjp-charcoal, #211E1A);

  /* Category blocks + toggles */
  --cc-cookie-category-block-bg: var(--cjp-offwhite, #FAF7F2);
  --cc-cookie-category-block-border: var(--cjp-beige, #E5D8C4);
  --cc-cookie-category-block-hover-bg: var(--cjp-sand, #F0E9DD);
  --cc-cookie-category-expanded-block-bg: var(--cjp-sand, #F0E9DD);
  --cc-separator-border-color: var(--cjp-beige, #E5D8C4);
  --cc-toggle-on-bg: var(--cjp-gold, #A78143);
  --cc-toggle-off-bg: var(--cjp-taupe, #BCAB90);
  --cc-toggle-readonly-bg: var(--cjp-beige, #E5D8C4);
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;

  /* Footer strip: the library derives these from its own :root defaults (a blue-grey), so set them here */
  --cc-footer-bg: var(--cjp-panel, #F5F0E7);
  --cc-footer-color: var(--cjp-greige, #6B6358); /* 5.2:1 on the panel */
  --cc-footer-border-color: var(--line, #E2D9CC);
}

/* Brand border weight on the secondary button so it reads as an equal CTA, not a link */
#cc-main .cm__btn--secondary,
#cc-main .pm__btn--secondary {
  border-width: 1px;
  border-style: solid;
  font-weight: 600;
}

/* Display headers (titles) in the brand serif to match the site */
#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  letter-spacing: .01em;
}

/* "Always on" badge used in the preferences section titles */
#cc-main .pm__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cjp-gold-deep, #8A6A35);
  background: var(--cjp-sand, #F0E9DD);
  border-radius: var(--radius-pill, 999px);
  vertical-align: middle;
}

/* ------------------------------------------------------------------
   ARUNA layouts (js/cookie-consent.js picks one at start-up, 900 px split)
   ------------------------------------------------------------------ */

/* Desktop: compact box, bottom right. From 900 px it stays clear of the bottom-centre
   scroll hint and walk skip link (max-width 50vw - 140px) and of the bottom-left captions. */
#cc-main .cm--box { max-width: 360px; }
@media (min-width: 900px) {
  #cc-main .cm--box { max-width: min(360px, calc(50vw - 140px)); }
}
#cc-main .cm--box .cm__title { font-size: 19px; }
#cc-main .cm--box .cm__title + .cm__desc { margin-top: .6em; }
#cc-main .cm--box .cm__desc { font-size: 13px; line-height: 1.55; }
#cc-main .cm--box .cm__btns { padding-top: .9rem; padding-bottom: .9rem; }
#cc-main .cm--box .cm__btn-group { grid-auto-flow: column; } /* Accept | Reject on one row, Configure below */
#cc-main .cm--box .cm__btn + .cm__btn { margin-top: 0; margin-left: .375rem; }
#cc-main .cm--box .cm__btn { min-height: 40px; padding: .5em .75em; }

/* Phones and tablets: one short full-width bar. The library stacks every button below 640 px
   (with !important); here they share one row, wrapping to two short rows under ~360 px. */
#cc-main .cm--bar {
  border-top: 1px solid var(--line, #E2D9CC);
  box-shadow: 0 -10px 30px rgba(33, 30, 26, .14);
}
#cc-main .cm--bar .cm__body { padding: 0; }
#cc-main .cm--bar .cm__texts { padding-top: 14px; }
#cc-main .cm--bar .cm__title { font-size: 18px; }
#cc-main .cm--bar .cm__title + .cm__desc { margin-top: 4px; }
#cc-main .cm--bar .cm__desc { max-height: 28vh; padding-bottom: 10px; font-size: 13px; line-height: 1.5; }
#cc-main .cm--bar .cm__btns {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 12px;
}
#cc-main .cm--bar .cm__btn-group { display: flex !important; flex-direction: row !important; gap: 8px; }
#cc-main .cm--bar .cm__btn-group:first-child { flex: 2 1 216px; }
#cc-main .cm--bar .cm__btn-group:last-child { flex: 1 1 96px; }
#cc-main .cm--bar .cm__btn + .cm__btn,
#cc-main .cm--bar .cm__btn-group + .cm__btn-group { margin: 0 !important; }
#cc-main .cm--bar .cm__btn { flex: 1 1 0 !important; min-width: 0; min-height: 40px; padding: 0 8px; }

/* While the bar is up, the pinned scenes' bottom captions ride above it: js/cookie-consent.js
   publishes the bar height as --cc-bar-h (never set for the desktop box). Offsets go through
   `bottom` (base values from css/aruna.css): GSAP writes inline `translate: none` on these captions. */
body.has-motion .hero-caption,
body.has-motion .walk-caption { transition: bottom .35s ease; }
html.show--consent body.has-motion .hero-caption { bottom: calc(clamp(20px, 4.5vh, 44px) + var(--cc-bar-h, 0px)); }
html.show--consent body.has-motion .walk-caption { bottom: var(--cc-bar-h, 0px); }

/* Short screens (e.g. 320x568): a two-row bar would reach the hero subtitle, so while it is up the
   title block centres in the space between the header and the bar. */
@media (max-height: 600px) {
  .hero-copy { transition: padding .35s ease; }
  html.show--consent .hero-copy { padding-top: var(--hd-h, 64px); padding-bottom: var(--cc-bar-h, 0px); }
}