/*
 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
*/

:root {

--neutral-h: 39;
--neutral-s: 34%;
--neutral-l: 80%;


--secondary-h: 210;
--secondary-s: 5%;
--secondary-l: 33%;


/* Brand colors */

--primary: hsla(204, 67%, 12%, 1);
--accent: hsla(204, 66%, 47%, 1);

--neutral: hsla(var(--neutral-h), var(--neutral-s), var(--neutral-l), 1);
--neutral-dark: hsla(var(--neutral-h), var(--neutral-s), calc(.8 * var(--neutral-l)), 1);
--secondary: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 1);
--secondary-light: hsla(var(--secondary-h), var(--secondary-s), calc(2 * var(--secondary-l)), 1);
--base: hsla(180, 7%, 97%, 1);


/* Typography */

--text-accent: 'Cormorant Garamond';
--text-primary: Outfit;

--text-xs: clamp(1.3rem, 0.287vw + 1.208rem, 1.6rem);
--text-small: clamp(1.6rem, 0.394vw + 1.474rem, 2rem);
--text-regular: clamp(1.8rem, 0.591vw + 1.611rem, 2.4rem);
--text-medium: clamp(2.4rem, 0.394vw + 2.274rem, 2.8rem);
--text-large: clamp(2.8rem, 1.912vw + 2.188rem, 4.8rem);
--text-xxl: clamp(3.2rem, 2.756vw + 2.318rem, 6rem);
--text-display: clamp(4rem, 2.953vw + 3.055rem, 7rem);


/* Layout Spacing */

--section-padding-l-r: clamp(1.6rem, 4.724vw + 0.088rem, 6.4rem);
--section-padding-t-b: clamp(4rem, 7.087vw + 1.732rem, 11.2rem);

--content-gap-xs: 1.2rem;
--content-gap-small: 2rem;
--content-gap-regular: clamp(1.8rem, 0.591vw + 1.611rem, 2.4rem);
--content-gap-medium: calc(1.34 * var(--content-gap-regular));
--content-gap-large: calc(2 * var(--content-gap-regular));
--content-gap-xxl: calc(2 * var(--content-gap-large));

--hero-top-padding: calc(var(--section-padding-t-b) + var(--site-logo-height));


/* Buttons */

--button-padding-l-r: 2em;
--button-padding-t-b: .5em;

/* Borders */

--border-radius: 16px;
--border-radius-large: 50px;
--border-width: 2px;


/* Sizing */

--site-logo-height: clamp(2rem, 0.956vw + 1.694rem, 3rem);



}

body *:focus {
    outline: none !important;
}

body *:focus-visible {
    outline: solid var(--secondary) 2px !important;
    outline-offset: 5px !important;
}

/* Classes */

.nav--onscroll {
    background-color: var(--neutral-dark);
    border-bottom: var(--border-width) solid var(--primary);
    transition: all .5s ease;

}