/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* ====================
 * Heading Utility
========================*/

.u-h1 {
  --u-heading-font-family: var(--fl-global-h1-font-family, inherit);
  --u-heading-weight:      var(--fl-global-h1-font-weight, 700);
  --u-heading-line-height: var(--fl-global-h1-line-height, 1.2);
  --u-heading-size:        var(--fl-global-h1-font-size, 72px);

  @media (max-width: 1200px) { --u-heading-size: var(--fl-global-h1-font-size-large,      64px); }
  @media (max-width:  992px) { --u-heading-size: var(--fl-global-h1-font-size-medium,     64px); }
  @media (max-width:  768px) { --u-heading-size: var(--fl-global-h1-font-size-responsive, 48px); }
}

.u-h2 {
  --u-heading-font-family: var(--fl-global-h2-font-family, inherit);
  --u-heading-weight:      var(--fl-global-h2-font-weight, 700);
  --u-heading-line-height: var(--fl-global-h2-line-height, 1.25);
  --u-heading-size:        var(--fl-global-h2-font-size, 64px);

  @media (max-width: 1200px) { --u-heading-size: var(--fl-global-h2-font-size-large,      48px); }
  @media (max-width:  992px) { --u-heading-size: var(--fl-global-h2-font-size-medium,     48px); }
  @media (max-width:  768px) { --u-heading-size: var(--fl-global-h2-font-size-responsive, 32px); }
}

.u-h3 {
  --u-heading-font-family: var(--fl-global-h3-font-family, inherit);
  --u-heading-weight:      var(--fl-global-h3-font-weight, 700);
  --u-heading-line-height: var(--fl-global-h3-line-height, 1.25);
  --u-heading-size:        var(--fl-global-h3-font-size, 32px);

  @media (max-width: 1200px) { --u-heading-size: var(--fl-global-h3-font-size-large,      32px); }
  @media (max-width:  992px) { --u-heading-size: var(--fl-global-h3-font-size-medium,     28px); }
  @media (max-width:  768px) { --u-heading-size: var(--fl-global-h3-font-size-responsive, 24px); }
}

.u-h4 {
  --u-heading-font-family: var(--fl-global-h4-font-family, inherit);
  --u-heading-weight:      var(--fl-global-h4-font-weight, 700);
  --u-heading-line-height: var(--fl-global-h4-line-height, 1.25);
  --u-heading-size:        var(--fl-global-h4-font-size, 24px);

  @media (max-width: 1200px) { --u-heading-size: var(--fl-global-h4-font-size-large,      24px); }
  @media (max-width:  992px) { --u-heading-size: var(--fl-global-h4-font-size-medium,     24px); }
  @media (max-width:  768px) { --u-heading-size: var(--fl-global-h4-font-size-responsive, 18px); }
}

.u-h5 {
  --u-heading-font-family: var(--fl-global-h5-font-family, inherit);
  --u-heading-weight:      var(--fl-global-h5-font-weight, 700);
  --u-heading-line-height: var(--fl-global-h5-line-height, 1.25);
  --u-heading-size:        var(--fl-global-h5-font-size, 18px);

  @media (max-width: 1200px) { --u-heading-size: var(--fl-global-h5-font-size-large,      18px); }
  @media (max-width:  992px) { --u-heading-size: var(--fl-global-h5-font-size-medium,     18px); }
  @media (max-width:  768px) { --u-heading-size: var(--fl-global-h5-font-size-responsive, 16px); }
}

.u-h6 {
  --u-heading-font-family: var(--fl-global-h6-font-family, inherit);
  --u-heading-weight:      var(--fl-global-h6-font-weight, 700);
  --u-heading-line-height: var(--fl-global-h6-line-height, 1.25);
  --u-heading-size:        var(--fl-global-h6-font-size, 14px);

  @media (max-width: 1200px) { --u-heading-size: var(--fl-global-h6-font-size-large,      14px); }
  @media (max-width:  992px) { --u-heading-size: var(--fl-global-h6-font-size-medium,     14px); }
  @media (max-width:  768px) { --u-heading-size: var(--fl-global-h6-font-size-responsive, 14px); }
}

/* --- Apply heading tokens --- */
.u-heading p,
.u-heading.u-h1,
.u-heading.u-h2,
.u-heading.u-h3,
.u-heading.u-h4,
.u-heading.u-h5,
.u-heading.u-h6 {
  font-family:  var(--u-heading-font-family);
  font-weight:  var(--u-heading-weight);
  line-height:  var(--u-heading-line-height);
  font-size:    var(--u-heading-size);
}

/*========================================
UTILITY CLASSES
Utility classes like .text-center, .mt-2, .hidden-desktop, etc.
========================================*/

/* ALIGNMENT CLASSES*/

/* Horizontal Alignment
(must be in beaver builder column module or other display:flex element) */

.self-align-end {
    align-self: flex-end;
}

.self-align-center {
    align-self: center;
}

.self-align-start {
    align-self: flex-start;
}

/* ACCESSIBILITY */

/* screen reader only utility class force absolute position */

.sr-only {
    position: absolute !important;
}

/* VISIBILITY */