/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Global focus outline offset */ 
body.bricks-is-frontend :focus-visible {
  outline-offset: var(--outline-offset);
}

/* Custom Block Styles */

/* ==========================================================================
   Utilities
   ========================================================================== */

.gap-5 {
  gap: 0.5rem;
}

.gap-10 {
  gap: 1rem;
}

.gap-15 {
  gap: 1.5rem;
}

.gap-20 {
  gap: 2rem;
}

.gap-25 {
  gap: 2.5rem;
}

.gap-30 {
  gap: 3rem;
}


/* ==========================================================================
   Gutenberg fact boxes
   ========================================================================== */

/* Shared fact-box structure */
.wp-block-group:is(
  .is-style-blue-fact-left,
  .is-style-blue-fact-right,
  .is-style-blue-fact-full,
  .is-style-green-fact-left,
  .is-style-green-fact-right,
  .is-style-green-fact-full,
  .is-style-yellow-fact-left,
  .is-style-yellow-fact-right,
  .is-style-yellow-fact-full
),
.factbox {
  background-color: var(--factbox-background, transparent);
  border-radius: var(--radius-s);
  color: var(--factbox-color, inherit);
  margin-block: 1rem 1.5rem;
  padding: 2rem;
}

/* Fact-box color variants */
.wp-block-group:is(
  .is-style-blue-fact-left,
  .is-style-blue-fact-right,
  .is-style-blue-fact-full
),
.factbox.blue {
  --factbox-background: var(--dark-blue);
  --factbox-color: var(--light);
}

.wp-block-group:is(
  .is-style-green-fact-left,
  .is-style-green-fact-right,
  .is-style-green-fact-full
) {
  --factbox-background: var(--green-light);
  --factbox-color: var(--green);
}

.wp-block-group:is(
  .is-style-yellow-fact-left,
  .is-style-yellow-fact-right,
  .is-style-yellow-fact-full
),
.factbox.yellow {
  --factbox-background: var(--yellow);
  --factbox-color: var(--text-body);
}

/* Ensure Bricks/global typography colors do not override fact boxes */
.wp-block-group:is(
  .is-style-blue-fact-left,
  .is-style-blue-fact-right,
  .is-style-blue-fact-full,
  .is-style-green-fact-left,
  .is-style-green-fact-right,
  .is-style-green-fact-full,
  .is-style-yellow-fact-left,
  .is-style-yellow-fact-right,
  .is-style-yellow-fact-full
) :is(h2, h3, h4, h5, h6, a),
.factbox:is(.blue, .yellow) :is(h2, h3, h4, h5, h6, a) {
  color: inherit;
}

.wp-block-group:is(
  .is-style-blue-fact-left,
  .is-style-blue-fact-right,
  .is-style-blue-fact-full,
  .is-style-green-fact-left,
  .is-style-green-fact-right,
  .is-style-green-fact-full,
  .is-style-yellow-fact-left,
  .is-style-yellow-fact-right,
  .is-style-yellow-fact-full
) a,
.factbox:is(.blue, .yellow) a {
  text-decoration: underline;
}

/* Left-aligned fact boxes */
.wp-block-group:is(
  .is-style-blue-fact-left,
  .is-style-green-fact-left,
  .is-style-yellow-fact-left
),
.factbox.left {
  float: left;
  margin: 1rem 1.5rem 1.5rem 0 !important;
  width: 50%;
}

/* Right-aligned fact boxes */
.wp-block-group:is(
  .is-style-blue-fact-right,
  .is-style-green-fact-right,
  .is-style-yellow-fact-right
),
.factbox.right {
  float: right;
  margin: 1rem 0 1.5rem 1.5rem !important;
  width: 50%;
}

/* Full-width fact boxes */
.wp-block-group:is(
  .is-style-blue-fact-full,
  .is-style-green-fact-full,
  .is-style-yellow-fact-full
) {
  float: none;
  width: 100%;
}

/* Legacy fact-box content */
section.factbox :is(ul, ol) {
  margin: 1.5rem 0;
  padding-bottom: 0 !important;
  padding-left: 3rem !important;
}


/* ==========================================================================
   Gutenberg images and captions
   ========================================================================== */

figcaption.wp-element-caption {
  background-color: var(--dark-grey-light);
  color: var(--text-body);
  font-size: var(--text-s);
  font-style: italic;
  margin-top: 0;
  padding: 1rem;
  text-align: left;
}

:is(
  .is-style-image-full,
  .is-style-image-full-caption
) {
  width: 100%;
}

:is(
  .is-style-image-full,
  .is-style-image-full-caption
) img {
  display: block;
  height: auto;
  max-width: none;
  width: 100%;
}

:is(
  .is-style-image-full,
  .is-style-image-left,
  .is-style-image-right
) img {
  border-radius: var(--radius-s);
}

:is(
  .is-style-image-full-caption,
  .is-style-image-left-caption,
  .is-style-image-right-caption
) img {
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}

.is-style-image-full-caption figcaption.wp-element-caption {
  border-radius: 0 0 var(--radius-s) var(--radius-s) !important;
}

:is(
  .is-style-image-left,
  .is-style-image-left-caption
) {
  float: left;
  margin: 0 1.5rem 0 0;
  width: 50%;
}

:is(
  .is-style-image-right,
  .is-style-image-right-caption
) {
  float: right;
  margin: 0 0 0 1.5rem;
  width: 50%;
}

:is(
  .is-style-image-left-caption,
  .is-style-image-right-caption
) figcaption.wp-element-caption {
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  margin: 0;
}


/* ==========================================================================
   Gutenberg blockquotes
   ========================================================================== */

blockquote.wp-block-quote {
  border-color: var(--primary-blue);
  border-left-width: 0.5rem;
  padding-left: 2rem;
}

blockquote.cite,
blockquote.wp-block-quote p {
  font-weight: 700;
}

blockquote.cite cite,
blockquote.wp-block-quote cite {
  font-size: var(--text-s);
  font-style: italic;
  font-weight: normal;
}


/* ==========================================================================
   Gutenberg tables
   ========================================================================== */

.wp-block-table thead {
  border: 0.1rem solid var(--dark-grey-light);
}

.text-content table,
.is-style-stripes table {
  border: 0.1rem solid var(--dark-grey-accent);
  border-collapse: collapse;
  color: var(--text-body);
  margin-bottom: 2rem;
  width: 100%;
}

.text-content table :is(thead, tfoot) th,
.is-style-stripes table :is(thead, tfoot) th {
  background-color: var(--dark-blue);
  color: var(--light);
  text-align: left;
}

.text-content :is(.is-style-stripes, .is-style-regular) table :is(th, td) {
  border: 0.1rem solid var(--dark-grey-light);
  padding: 0.5rem;
}

.text-content table.stripes tbody tr:nth-of-type(odd),
.text-content .is-style-stripes table tbody tr:nth-of-type(odd) {
  background-color: var(--dark-grey-light) !important;
}


/* ==========================================================================
   Gutenberg buttons
   ========================================================================== */

.button-in-content,
.is-style-nvl-primary-btn .wp-element-button {
  background-color: var(--primary-blue);
  border: 0.1rem solid var(--primary-blue);
  border-radius: var(--radius-m);
  color: var(--light);
  display: inline-block;
  font-size: var(--text-m);
  line-height: 1.6;
  margin: 2rem 0;
  padding: 0.8rem 1.6rem;
  text-decoration: none !important;
  transition:
    background-color var(--ease-in-out-slow),
    color var(--ease-in-out-slow);
}

.button-in-content:hover,
.is-style-nvl-primary-btn .wp-element-button:hover {
  background-color: transparent;
  color: var(--primary-blue);
  text-decoration: none !important;
}


/* ==========================================================================
   Google Programmable Search
   ========================================================================== */

.google-search .gsc-input {
  padding: 0;
}

input.gsc-input {
  background: none !important;
}

.google-search .gsc-above-wrapper-area {
  display: none;
}

.google-search :is(
  .gsc-input-box,
  table.gsc-search-box,
  tr td.gsc-search-button,
  tr td.gsc-input
) {
  border: none !important;
}

.google-search tr td.gsc-search-button {
  padding: 0 !important;
}

.google-search .gsc-search-button-v2 {
  height: 4rem;
  margin-bottom: 1.4rem;
}


/* ==========================================================================
   Responsive styles
   ========================================================================== */

/*
 * The breakpoint remains in pixels intentionally.
 * Media-query rem units use the browser's initial font size rather than the
 * site's 10px root font-size convention.
 */
@media (max-width: 980px) {
  /* Fact boxes */
  .wp-block-group:is(
    .is-style-blue-fact-left,
    .is-style-blue-fact-right,
    .is-style-green-fact-left,
    .is-style-green-fact-right,
    .is-style-yellow-fact-left,
    .is-style-yellow-fact-right
  ),
  .factbox:is(.left, .right) {
    float: none;
    margin: 0 0 1.5rem !important;
    width: 100%;
  }

  /* Gutenberg images */
  :is(
    .is-style-image-left,
    .is-style-image-left-caption,
    .is-style-image-right,
    .is-style-image-right-caption
  ) {
    float: none;
    margin: 0 0 1.5rem;
    width: 100%;
  }

  :is(
    .is-style-image-left,
    .is-style-image-left-caption,
    .is-style-image-right,
    .is-style-image-right-caption
  ) img {
    width: 100%;
  }

  /* Non-Divi legacy image compatibility */
  .wp-caption {
    width: 100%;
  }

  :is(.img-left, .img-left.third) {
    float: none;
    margin-right: 0;
    width: 100%;
  }

  :is(.img-right, .img-right.third) {
    float: none;
    margin-left: 0;
    width: 100%;
  }

  .wp-caption.img-caption-left {
    float: none;
    margin-right: 0;
    min-width: 100%;
  }

  .wp-caption.img-caption-right {
    float: none;
    margin-left: 0;
    min-width: 100%;
  }
}


/* Fix Gutenberg full-width images inside columns */

.wp-block-column > figure.wp-block-image.alignfull,
.wp-block-column > figure.wp-block-image.alignwide,
.wp-block-column figure.wp-block-image.alignfull,
.wp-block-column figure.wp-block-image.alignwide {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.wp-block-column > figure.wp-block-image.alignfull img,
.wp-block-column > figure.wp-block-image.alignwide img,
.wp-block-column figure.wp-block-image.alignfull img,
.wp-block-column figure.wp-block-image.alignwide img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Same fix if SVG is output inline instead of as an img */
.wp-block-column > figure.wp-block-image.alignfull svg,
.wp-block-column > figure.wp-block-image.alignwide svg,
.wp-block-column figure.wp-block-image.alignfull svg,
.wp-block-column figure.wp-block-image.alignwide svg {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
}
/* Text Link with an icon: remove underline from the entire anchor */
:where(#brx-content) a.brxe-text-link:has(> .icon) {
  text-decoration: none;
}

/* Text inside a Text Link inherits the colour set on the link element */
:where(#brx-content) a.brxe-text-link > .text {
  color: inherit;
}

/* Table styles */

/* Responsive container */

.table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-m);
  margin-bottom: 2rem;
}

.table-scroll:focus-visible {
  outline: 0.2rem solid var(--dark-blue);
  outline-offset: 0.2rem;
}

/* Base table */

.data-table {
  inline-size: 100%;
	width: 100%;
  min-inline-size: 44rem;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th,
.data-table td {
  padding-block: clamp(0.875rem, 1.5vw, 1.25rem);
  padding-inline: clamp(1rem, 2vw, 2rem);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--border-primary);
  border-inline-end: 1px solid var(--border-primary);
}

.data-table tr > :last-child {
  border-inline-end: 0;
}

.data-table tbody:last-child tr:last-child > * {
  border-block-end: 0;
}

/* Header */

.data-table thead th {
  background: var(--dark-blue);
  color: var(--light);
  vertical-align: middle;
}

/* Optional striping */

.data-table.table-striped tbody tr:nth-child(odd) > td {
  background: var(--dark-grey-light);
}

/* Grouped row heading */

.data-table .table-group {
  inline-size: 12rem;
  vertical-align: middle;
  background: var(--dark-grey-light);
}

/* Compact columns */

.data-table .table-col-compact {
  inline-size: 8rem;
  text-align: center;
  white-space: nowrap;
}

/* Links */

.data-table a {
  color: var(--primary-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

.data-table a:focus-visible {
  outline: 0.15rem solid currentColor;
  outline-offset: 0.2rem;
  border-radius: var(--radius-m);
}

/* Separation between tbody groups */

.data-table tbody + tbody > tr:first-child > * {
  border-block-start: 0.2rem solid var(--border-primary);
}