@layer bricks-adapter {

/*
Why this works

• The [class^="brxe-"], [class*=" brxe-"] selectors auto-apply to any Bricks element now and later.
  This gives every bricks element a clean baseline.
• :where() keeps specificity at 0, so utilities/components css easily override.
• fw-scope is applied to the body via functions.php so it applies to everything.
*/

/* NOTE: guard added → body.fw-scope:not([data-builder-window="iframe"]) */

/* COMMON BASES with fallbacks in case Bricks changes class names later */
body.fw-scope :where([class^="brxe-"], [class*=" brxe-"]){
  margin: 0;
  line-height: 1.5;
  background: none;
  border: 0;
}

/* SECTION */
/* === FRONT-END LAYOUT DEFAULTS (do not affect Builder iframe) === */
body.fw-scope :where(.brxe-section, section){
  position: relative;
  padding-block: calc(2 * var(--fw-space-2xl)); /* Top & bottom */
  padding-inline: var(--fw-space-s); /* Left & right */
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* CONTAINER */
body.fw-scope :where(.brxe-container){
  width: 100%;
  max-width: var(--fw-max-width-container);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

/* BLOCK DIV */
body.fw-scope :where(.brxe-block){
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  row-gap: var(--fw-space-s);
  min-width: 0; /* avoid overflow when used as flex child */
}

/* DIV */
body.fw-scope :where(.brxe-div){
  /* Only affects elements already set to display:flex by Bricks or utilities */
  /* Do NOT force flex-direction here — this broke Builder & some layouts */
  padding: 0;
}

/* TEXT & RICH TEXT */
body.fw-scope :where(.brxe-text-basic, .brxe-text){
  font-size: var(--fw-text-size-m);
}

/* Baseline: links are underlined by default (not buttons) */
body.fw-scope :where(a, .brxe-text-link)
  :not([class^="fw-btn"], [class*=" fw-btn"], [role="button"]) {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Hover/focus — still underline, EXCEPT fw-btn* */
body.fw-scope :where(
  a:not([class^="fw-btn"], [class*=" fw-btn"]),
  .brxe-text-link:not([class^="fw-btn"], [class*=" fw-btn"])
):is(:hover, :focus-visible){
  text-decoration: underline;
}

/* Belt-and-braces for links inside .brxe-text */
body.fw-scope .brxe-text a:not([class^="fw-btn"], [class*=" fw-btn"]):is(:hover, :focus-visible){
  text-decoration: underline;
}

/* BUTTONS - Reset for all native buttons/toggles — no layout added */
body.fw-scope :where(button, [type="button"], [type="submit"]){
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0; /* removes the extra space that pushed chevrons */
  margin: 0;
  line-height: 1;
  appearance: none;
}

/* IMAGES */
body.fw-scope :where(.brxe-image, picture){
  display: block;
  max-width: 100%;
  line-height: 0; /* kills baseline gap around inline images */
}

/* Actual image element */
body.fw-scope :where(.brxe-image img, picture > img, img){
  max-width: 100%;
  height: auto;
  display: block;
}

/* VIDEO (Bricks + common embeds) */
body.fw-scope :where(.brxe-video, video, iframe[src*="youtube"], iframe[src*="vimeo"]){
  max-width: 100%;
  height: auto;
  display: block;
}

/* ACCORDION */
body.fw-scope :where(.brxe-accordion){
  display: grid;
  gap: var(--fw-space-xs);
}

/* Accordion Title (the toggle) */
body.fw-scope :where(.brxe-accordion) :where(.accordion-title h1, .accordion-title h2, .accordion-title h3, button[aria-expanded]){
  font-size: var(--fw-heading-h5);
}

/* Accordion Subtitle (common patterns) */
body.fw-scope :where(.brxe-accordion) :where(.accordion-subtitle){
  font-size: var(--fw-text-size-s);
  font-style: italic;
}

/* Accordion Content panel */
body.fw-scope :where(.brxe-accordion) :where(.accordion-content-wrapper, [role="region"], [data-accordion-content]){
  font-size: var(--fw-text-size-m);
}

/* COUNTER */
body.fw-scope :where(.brxe-counter){
  max-width: 100%;
  height: auto;
  display: block;
}

/* ALERT (Bricks + role fallback) */
body.fw-scope :where(.brxe-alert, [role="alert"], .alert){
  padding: var(--fw-space-s);
  border-top: 1px solid;
  border-bottom: 1px solid;
}

/* Alert content text */
body.fw-scope :where(.brxe-alert, [role="alert"], .alert) :where(.content, .brxe-text, .brxe-rich-text){
  font-size: var(--fw-text-size-m);
  line-height: var(--fw-line-height-text);
}

/* POPUP OVERLAY / BACKDROP (tolerant; tighten if you know exact classes) */
body.fw-scope :where(.brxe-popup, .brx-popup, [class*="popup-overlay"], [class*="popup-backdrop"], [data-popup-overlay], [data-overlay]){
  padding: var(--fw-space-m);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fw-clr-backdrop); /* adapter may reference neutral tokens */
  transition: var(--fw-transition-fast);
}

/* POPUP CONTENT (dialog panel) */
body.fw-scope :where(.brxe-popup, .brx-popup, [role="dialog"], [data-popup-content]) :where(.popup-content, [class*="popup-content"], .brxe-div, .brxe-block){
  padding: var(--fw-space-m);
  max-width: var(--fw-max-width-popup);
  background-color: var(--fw-clr-white);
  transition: var(--fw-transition-fast);
}

/* FORMS — base, low-specificity via :where() */
body.fw-scope :where(.brxe-form){
  display: grid;
  column-gap: var(--fw-space-s);
  row-gap: 0;
}

/* Labels */
body.fw-scope :where(.brxe-form) :where(label){
  font-size: var(--fw-text-size-xs);

}

/* Typography for all text-like controls */
body.fw-scope :where(.brxe-form) :where(input, select, textarea){
  font-size: var(--fw-text-size-s);
  line-height: var(--fw-line-height-text);
}

/* Box styling (avoid checkboxes/radios/files/range/color/hidden) */
body.fw-scope :where(.brxe-form)
:where(
  input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden]),
  select,
  textarea
){
  border: 1px solid currentColor; /* adapter: color-agnostic, uses currentColor */
  width: 100%;
  box-sizing: border-box;
}

/* Make checkboxes & radios align nicely */
body.fw-scope .brxe-section .brxe-form :is(input[type=checkbox], input[type=radio]){
  vertical-align: middle;
}

/* Checkbox size */
body.fw-scope input[type="checkbox"]{
  width: 1.1rem;
  height: 1.1rem;
}

/* Placeholder size */
body.fw-scope :where(.brxe-form) :where(input::placeholder, textarea::placeholder){
  font-size: var(--fw-text-size-s);
}

/* Captcha/backstop */
body.fw-scope :where(.brxe-form) :where(.captcha, .g-recaptcha){
  margin-bottom: var(--fw-space-2xs);
}

/*  RICH TEXT LISTS  */

/* Base reset & indents (top-level only) */
body.fw-scope .brxe-text > :is(ul, ol){
  margin: 0; /* kill UA gaps */
    padding-inline-start: var(--fw-space-2xs); /* base indent */
      margin-block-end: var(--fw-space-2xs); /* default gap after lists */
  list-style-position: outside;
}

/* Deeper levels (true nested + <p> + ul pattern) */
body.fw-scope .brxe-text li > :is(ul, ol),
body.fw-scope .brxe-text li > p + :is(ul, ol){
  padding-inline-start: calc(var(--fw-space-xs) * 2);
  margin-block-start: calc(var(--fw-space-3xs)/2);
  list-style-position: outside;
}

/* EXTRA CONTROL: when a list immediately follows a paragraph */
body.fw-scope .brxe-text p + ul,
body.fw-scope .brxe-text p + ol {
  margin-block-start: var(--fw-space-2xs); 
  /* This is the paragraph → list spacing */
}

/* Item spacing */
body.fw-scope .brxe-text :is(ul, ol) > li + li{
  margin-block-start: var(--fw-space-3xs);
}
body.fw-scope .brxe-text :is(ul, ol) :is(ul, ol) > li + li{
  margin-block-start: calc(var(--fw-space-3xs)/4);
}

/* Optional: comfy line-height */
body.fw-scope .brxe-text li{ line-height: 1.5; }

/* Top-level custom icon*/
body.fw-scope .brxe-text > ul{ list-style: none; }

body.fw-scope .brxe-text > ul > li{
  position: relative;
  padding-inline-start: var(--fw-space-m); /* space for icon */
}

body.fw-scope .brxe-text > ul > li::before{
  content: "";
  position: absolute;
  inset-block-start: .3em;
  inset-inline-start: 0.2em;
  width: 1em;
  height: 1em;
  background-color: var(--fw-list-marker, currentColor); /* hook; set in framework/components */
  -webkit-mask: var(--fw-list-mask, url('/wp-content/uploads/Tick.svg')) no-repeat center; /*can now change the list icon by setting --fw-list-mask */
          mask: var(--fw-list-mask, url('/wp-content/uploads/Tick.svg')) no-repeat center;
  -webkit-mask-size: contain;
          mask-size: contain;
          color:var(--fw-text);
}

/* Other List Icon overrides - apply class OR data attribute to rich text element */

/* Cross */
.fw-list-cross,
[data-list-style="cross"]{
  --fw-list-mask: url('/wp-content/uploads/Cross.svg');
}

/* Re-enable native bullets - apply class OR data attribute on the .brxe-text element */
body.fw-scope .brxe-text.fw-list-bullets > ul,
body.fw-scope .brxe-text[data-list-style="bullets"] > ul{
  list-style: disc;
  padding-inline-start: 1.5em; /* normal indent */
}

body.fw-scope .brxe-text.fw-list-bullets > ul > li,
body.fw-scope .brxe-text[data-list-style="bullets"] > ul > li{
  padding-inline-start: 0; /* remove icon spacing */
}

body.fw-scope .brxe-text.fw-list-bullets > ul > li::before,
body.fw-scope .brxe-text[data-list-style="bullets"] > ul > li::before{
  content: none; /* remove tick/cross */
}




/* Nested ULs: bullets, no custom icon */
body.fw-scope .brxe-text li > ul,
body.fw-scope .brxe-text li > p + ul{
  list-style: disc;
}

body.fw-scope .brxe-text li > ul > li,
body.fw-scope .brxe-text li > p + ul > li{
  position: static;
  padding-inline-start: 0;
}

body.fw-scope .brxe-text li > ul > li::before,
body.fw-scope .brxe-text li > p + ul > li::before{
  content: none;
}

/* Top-level ordered lists: indent number + text together */
body.fw-scope .brxe-text > ol{
  /* base indent + space that matches the tick icon width */
  padding-inline-start: calc(var(--fw-space-2xs) + var(--fw-space-l));
}

/* Make sure we don't add extra padding just on the text */
body.fw-scope .brxe-text > ol > li{
  padding-inline-start: calc(var(--fw-space-3xs)/3);
}







}