/*
Theme Name:   Bricks Child Theme by Ocillo
Theme URI:    https://bricksbuilder.io/
Description:  A customized version of Bricks child theme. Use this child theme to extend Bricks.
Author:       Bricks and Ocillo
Author URI:   https://bricksbuilder.io/
Template:     bricks
Version:      1.1
Text Domain:  bricks
License: Proprietary
License URI: Contact Ocillo for licensing information
*/

/* Controls when content is wrapped on top of each other */
@media (max-width: 991px) {
    .brxe-section, .brxe-container, .brxe-block {
        flex-wrap: wrap;
    }
}

/* .hero-small-title {
   margin-left: 0.75em;
   position: relative;
}
   
.hero-small-title:before {
 content: "";
 border-style: solid;
 border-width: 0.2em 0 0.2em 0.4em; /* Scale with font size */
 border-color: transparent transparent transparent var(--primary);
 position: absolute;
 left: -0.75em;
 top: 0.6em; /* This is the key value - approximately 0.6em will position near the middle of the first line */
} */

:where(.brxe-form) .message.success {
    color: var(--font-weak);
    border-radius: var(--radius-s);
}

/* Anchor link scroll offset */
*[id] {
     scroll-margin-top: 140px;
}


/* Text container last child reset */
.text-container > :last-child {
   margin-block-end: 0;
}

/* Break long headings and paragraphs */
h1, h2, h3, h4, h5, h6, p {
   overflow-wrap: anywhere;
}

/* Heading spacing for text-container */
.text-container :is(h1, h2, h3, h4, h5, h6) {
   overflow-wrap: break-word;
   margin-block-start: var(--space-rem-2xl);
   margin-block-end: var(--space-rem-m);
}

/* Heading spacing for text-container */
.text-container {
	
}

/* Reset margin for h2 or h3 when they are the first child in the container */
.text-container h2:first-child {
   margin-block-start: 0;
}

.blockquote-container {
    margin-block-end: var(--space-rem-2xl);
    margin-block-start: var(--space-rem-2xl);
}

/* Reset headings with link */
:where(h1, h2, h3, h4, h5, h6) a {
   font-weight: inherit !important;
   text-decoration: inherit !important;
}

/* Captions */
figcaption {
	margin-top: var(--space-rem-m);
   text-align: left;
   font-size: var(--font-m);
   color: var(--font-weak);
   line-height: var(--line-height-2xl);
	letter-spacing: var(--letter-spacing-small);
   font-style: italic;
   font-weight: inherit;
   padding-bottom: var(--space-rem-2xs);
}

/* Spacing for figure and img */
.wp-block-image, .wp-block-video, figure {
    margin: var(--space-rem-l) 0 !important;
}

/* Lists */

/* Lists - scoped to text-container */
.text-container :is(dd, dl, dt, ol, ul) {
   margin-block-start: var(--space-rem-m);
   margin-block-end: var(--space-rem-l);
   padding-inline-start: var(--space-rem-l);
}

/* Reset ALL nested lists - scoped to text-container */
.text-container :is(ul ul, ul ol, ul dl,
                    ol ul, ol ol, ol dl,
                    dl ul, dl ol, dl dl) {
   margin-block-start: 0;
   margin-block-end: 0;
}

/* Tables */
table {
   margin-block-end: var(--space-rem-m);
   font-size: var(--text-m);
}

@media (max-width: 1024px) {
   table {
       font-size: var(--font-s);
   }
}

.wp-block-table td,
.wp-block-table td,
td,
table td {
   vertical-align: top;
   border-bottom: 1px solid var(--border-primary);
   border-left: none;
   border-right: none;
   padding: var(--space-rem-xs);
}

.wp-block-table th,
.wp-block-table thead,
th,
table th,
table thead th {
   vertical-align: bottom;
   text-align: left;
   border: none;
   font-weight: 600;
   padding: var(--space-rem-xs);
   color: var(--font-strong);
   border-bottom: 1px solid var(--font-strong);
}

.wp-block-table tfoot,
tfoot {
   font-weight: 600;
   border-top: 1px solid var(--font-strong);
}

/* Animated links */
.animated-link {
  position: relative;
  text-decoration: none;
  color: #333;
  padding-bottom: 3px;
}

.animated-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--primary);
  transition: width 0.3s ease-out;
}

/* Only apply hover animation on devices that support hover */
@media (hover: hover) {
  .animated-link:hover::after {
    width: 100%;
  }
}

/* For touch devices, use no animation */
@media (hover: none) {
  .animated-link::after {
    display: none;
  }
}