/*
 Theme Name:   Bricks Child Theme - BMT
 Theme URI:    https://bricksbuilder.io/
 Description:  Bricks Child theme for BMT.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==============================================================================
   Base Variables
   Core design tokens for colors, spacing, typography, and more.
   ============================================================================== */
:root {  

  /* ----------------------------------
  Colors
  Base, Accent, Link/Util, neutrals, and legacy color definitions. Update as needed.
  ---------------------------------- */
  
  /* Navy: #202641 */
  --base-hsl: 229, 34%, 19%;

  --base: hsla(var(--base-hsl), 1);
  --base-d-1: hsla(230, 31%, 16%, 1);
  --base-d-2: hsla(231, 28%, 13%, 1);
  --base-d-3: hsla(234, 24%, 9%, 1);
  --base-d-4: hsla(235, 28%, 6%, 1);
  --base-l-1: hsla(233, 16%, 34%, 1);
  --base-l-2: hsla(234, 9%, 49%, 1);
  --base-l-3: hsla(235, 8%, 65%, 1);
  --base-l-4: hsla(235, 9%, 82%, 1);
  
  --base-t-40: hsla(var(--base-hsl), .4);
  --base-t-50: hsla(var(--base-hsl), .5);
  --base-t-60: hsla(var(--base-hsl), .6);
  --base-t-80: hsla(var(--base-hsl), .8);

  /* Mustard Yellow/Gold - #bf9456 from Divi  */
  --accent: hsla(35, 45%, 54%, 1);
  --accent-d-1: hsla(35, 37%, 43%, 1);
  --accent-d-2: hsla(35, 35%, 32%, 1);
  --accent-d-3: hsla(35, 32%, 22%, 1);
  --accent-d-4: hsla(34, 27%, 12%, 1);
  --accent-l-1: hsla(35, 47%, 64%, 1);
  --accent-l-2: hsla(34, 48%, 73%, 1);
  --accent-l-3: hsla(33, 50%, 82%, 1);
  --accent-l-4: hsla(32, 52%, 91%, 1);

  /* Ocean/ 'link' blue: #2ea3f2  from divi */
  --link: hsla(204, 88%, 56%, 1);
  --link-d-1: hsla(205, 61%, 46%, 1);
  --link-d-2: hsla(206, 55%, 35%, 1);
  --link-d-3: hsla(208, 47%, 24%, 1);
  --link-d-4: hsla(210, 35%, 13%, 1);
  --link-l-1: hsla(208, 87%, 69%, 1);
  --link-l-2: hsla(210, 87%, 78%, 1);
  --link-l-3: hsla(212, 88%, 86%, 1);
  --link-l-4: hsla(213, 88%, 93%, 1);

   /* Neutral Colors */  
  --light: hsla(0,0%,100%,1);
  --dark: hsla(0,0%,0%,1);
  
  --neutral-98: hsl(0, 0%, 98%); /* #fafafa; */
  --neutral-95: hsl(0, 0%, 95%); /* #f2f2f2 */
  --neutral-90: hsl(0, 0%, 90%); /* #e6e6e6 */ 
  --neutral-85: hsl(0, 0%, 85%);
  --neutral-80: hsl(0, 0%, 80%);

  --neutral-60: hsl(0, 0%, 60%);
  --neutral-50: hsl(0, 0%, 50%);
  --neutral-45: hsl(0, 0%, 45%);
  --neutral-40: hsl(0, 0%, 40%);     /* #666; */ 
  --neutral-20: hsl(0, 0%, 20%);     /* #333; */
  --neutral-15:  hsl(0, 0%, 15%);     /* #252525; */
  --neutral-5:  hsl(0, 0%, 5%);     
  
  /* ----------------------------------     
     Legacy colors from previous (Divi) site design.
     REMOVE once basic blocks are built
     ---------------------------------- */
  
  
  --c-near-white:    hsl(0, 0%, 97%);   /* #f7f7f7; */  
  --c-light-grey:    hsl(0, 0%, 89%);     /* #e3e3e3; */
  --c-grey:          hsl(0, 0%, 40%);     /* #666; */  
  --c-dark-grey:     hsl(0, 0%, 20%);     /* #333; */  
  --c-near-black:    hsl(0, 0%, 15%);     /* #252525; */
 
  
  /* ----------------------------------     
     EXTRA Colors
     ---------------------------------- */
  --c-review:      hsl(47, 92%, 53%); /* #f5c518 - Google Review */
  --c-bright-gold: hsl(41, 100%, 44%); /* #e09900; */


  /* ----------------------------------
     Spacing
     Responsive spacing units for margins, padding, and gaps.
     ---------------------------------- */

  --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem);
  --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
  --space-2xs: clamp(0.82rem, calc(0.17vw + 0.77rem), 0.99rem);
  --space-xs:  clamp(1.02rem, calc(0.37vw + 0.91rem), 1.4rem);
  --space-s:   clamp(1.28rem, calc(0.69vw + 1.06rem), 1.98rem);
  --space-m:   clamp(1.6rem, calc(1.18vw + 1.22rem), 2.8rem);
  --space-l:   clamp(2rem, calc(1.93vw + 1.38rem), 3.96rem);
  --space-xl:  clamp(2.5rem, calc(3.06vw + 1.52rem), 5.6rem);
  --space-2xl: clamp(3.13rem, calc(4.72vw + 1.61rem), 7.92rem);
  --space-3xl: clamp(3.91rem, calc(7.19vw + 1.61rem), 11.19rem);
  --space-4xl: clamp(4.88rem, calc(10.79vw + 1.43rem), 15.83rem);

  /* ----------------------------------
     Text Sizing
     Responsive font sizes for typography.
     ---------------------------------- */

  --text-xs:  clamp(1.26rem, calc(-0.11vw + 1.3rem), 1.15rem);
  --text-s:   clamp(1.42rem, calc(0.02vw + 1.42rem), 1.44rem);
  --text-m:   clamp(1.6rem, calc(0.2vw + 1.54rem), 1.8rem);
  --text-l:   clamp(1.8rem, calc(0.44vw + 1.66rem), 2.25rem);
  --text-xl:  clamp(2.02rem, calc(0.78vw + 1.78rem), 2.81rem);
  --text-2xl: clamp(2.28rem, calc(1.22vw + 1.89rem), 3.52rem);
  --text-3xl: clamp(2.56rem, calc(1.81vw + 1.99rem), 4.4rem);
  --text-4xl: clamp(2.88rem, calc(2.57vw + 2.06rem), 5.49rem);

  /* ----------------------------------
     Radius
     Border radius values for UI elements.
     ---------------------------------- */

  --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
  --radius-s:  clamp(0.6rem, calc(-0.2vw + 0.86rem), 0.8rem);
  --radius-m:  clamp(1rem, calc(-0.2vw + 1.26rem), 1.2rem);
  --radius-l:  clamp(1.6rem, calc(-0.39vw + 2.13rem), 2rem);
  --radius-xl: clamp(2.6rem, calc(-0.59vw + 3.39rem), 3.2rem);
  
  --radius-full:   999rem;
  --radius-circle: 50%;
  
  /* ----------------------------------
     Grid Layout
     Common grid values
     ---------------------------------- */
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));

  --grid-40_60: minmax(0,4fr) minmax(0,6fr);

    /* ----------------------------------
    Aspect Ratios
    Common aspect ratios
    ---------------------------------- */
    --aspect-3x2: 3 / 2;
    --aspect-5x3: 5 / 3;

}
 
/* ==============================================================================
   Semantic Variables
   Component-specific variables derived from base tokens.
   ============================================================================== */
:root {
  
    /* ----------------------------------
        Text
        Variables for typography styles. 

        TEXT, HEADING, and DISPLAY fonts will be defined in the builder for preload.

        ---------------------------------- */

    /* Not used for now. */
    --text-font:    'Open Sans';
    --heading-font: 'Open Sans';
    --display-font: 'Poppins';
    
    --fallback-text-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --fallback-heading-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --fallback-display-font: Verdana, Trebuchet MS, Arial, sans-serif;

    --lh-h1: 1.1;
    --lh-h2: 1.2;
    --lh-h3: 1.3;
    --lh-h4: 1.3;
    --lh-h5: 1.3;
    --lh-h6: 1.4;

    --lh-text: 1.5;
    
    --text-body:  var(--neutral-40);
    --text-title: var(--neutral-15);

    --readable-text-width: 80ch;

    /* Only used for the subtitles, but lets keep it here */
    --subheading-letter-spacing: .3rem;
   
    /* ----------------------------------
        Layout
        Common variables for structural spacing.
        ---------------------------------- */

    --container-max-width:    1200px;
    --section-block-padding:  var(--space-2xl);
    --section-inline-padding: 5vw; /* 10% total padding for now - can make responsive later */
    
    --column-gap:   var(--space-l); /* Bigger? Smaller? clamp functions? 3% in divi.*/
    --column-gap-l: var(--space-xl); /* Wide spaced columns ?*/
    
    --content-gap: var(--space-l);
    --card-gap: var(--space-s);
    --card-padding: var(--space-s);

    /* extra margin to match section padding when there is a content-gap */
    --match-section-padding-delta: calc(var(--section-block-padding) - var(--content-gap));

    /* define a section as a grid. Used for split background. */
    --section-grid: minmax(var(--section-inline-padding), 1fr) 
                    minmax(0, var(--container-max-width)) 
                    minmax(var(--section-inline-padding), 1fr);

    /* a grid that takes up the entire container and creates gutters */
    --fullwidth-grid-w-gutters: minmax(var(--section-inline-padding), 1fr) 1fr minmax(var(--section-inline-padding), 1fr);
    
    
    /* ----------------------------------
        COMPUTATIONS
        Variables defined by non-trivial computations
        ---------------------------------- */
    
    /* Highlight Box offset:  padding + ( font-size * lh ) */
    --highlight-box-offset: calc( var(--space-l) + var(--text-xl) * var(--lh-h3) );

    
    /* ----------------------------------
        Decorations
        Semantic colors, spacing, shadows, transitions, etc.
        ---------------------------------- */

    --icon-color: var(--c-bright-gold);
    --hero-bg: var(--base-t-80);
    
    --bg-gray: var(--neutral-95);
    --bg-subtle: var(--neutral-98);

    --t: 300ms ease-in-out; /* default transition */
    --t-slow: .5s;
    --t-slow-gentle: .5s ease-in-out;
    --t-med:  .3s;
    --t-fast: .2s;

    --t-button: var(--t-med);

    --border-thick: 4px;

    
    /* Buttons */
    --button-border: 2px;
    --button-radius: var(--radius-xs);
    --button-move_y: calc(-5px);
    --button-fs: var(--text-s);
    --button-fw: 600;
    
    /* highlight-shadow */
    --shadow: 0 0 15px 0 hsl(210deg 30.43% 18.04% / 12%);
    
    /* cards */
    --card-border: var(--neutral-90);
    --card-shadow: 1px 1px 10px 4px var(--neutral-95);

    --card-border--base: var(--base-l-1);
    --card-shadow--base: 1px 1px 10px 4px hsl(0deg 0% 0% / 20%);

    --faq-bg: var(--bg-gray);
    --faq-bg-open: var(--light);
    --faq-border: var(--neutral-85);

    /* shadow on the blog cards */
    --large-shadow: 6px 6px 18px 0px rgba(0, 0, 0, 0.2);

    --elevating-shadow:  0px 12px 18px -6px rgba(0, 0, 0, 0.3);
    
    --image-accent-shadow: 8px 8px 0px 0px var(--accent);



    /* FOOTER AND HEADER */
    --footer-card-shadow: var(--elevating-shadow);    
    --header-shadow: var(--elevating-shadow);

    --header-sub-shadow: 0 2px 5px rgba(0, 0, 0, .1);

    /* fixed size to allow sticky menus etc */
    --header-nav-height: 8rem;
    --header-note-height: 3rem;
    --header-nav-height-mobile: 6rem;


    --header-icon-size: var(--text-l);
    --header-font-size: 1.6rem;
    --header-text: var(--neutral-20);
    --header-text-hover: hsla(0,0,0,.6);
    --header-text-active: var(--accent);
    
    --header-font-size-mobile: var(--text-xl);

    --header-height: calc(var(--header-nav-height) + var(--header-note-height));
    --header-height-mobile: calc(var(--header-nav-height-mobile) + var(--header-note-height));

    --contact-footer-height: 3rem;


    /*
    --success: hsla(136, 95%, 56%, 1);
    --error: hsla(351, 95%, 56%, 1); 
    */
}


/* ==============================================================================
   Base Typography
   Body and heading text styles
   ============================================================================== */

body {
    /* font-family: var(--text-font); set in the builder */
    font-weight: 400;
    font-size: var(--text-m);
    color: var(--text-body);
    line-height: var(--lh-text);
    text-wrap-style: pretty;
    text-wrap: pretty;


}


h1, h2, h3, h4, h5, h6 {
    /* font-family: var(--heading-font); */
    font-weight: 500;
    color: var(--text-title);
}

h1 {
    font-size: var(--text-4xl);
    line-height: var(--lh-h1);
}

h2 {
    font-size: var(--text-3xl);
    line-height: var(--lh-h2);
}

h3 {
    font-size: var(--text-2xl);
    line-height: var(--lh-h3);
}

h4 {
    font-size: var(--text-xl);
    line-height: var(--lh-h4);
}

h5 {
    font-size: var(--text-l);
    line-height: var(--lh-h5);
}

h6 {
    font-size: var(--text-s);
    line-height: var(--lh-h6);
}

/* ==============================================================================
   Utility Classes
   Classes that are not convenient to edit in the editor.
   ============================================================================== */

.u-light-accent {
    color: var(--light);
    font-weight: 200;
}