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

/* Elements */
a { border-radius:4px; font-weight:600; outline-color:transparent; outline-offset:2px; outline-style:solid; transition:all ease-out 300ms; }
a:focus, a:focus-visible { outline:rgba(59, 130, 246, 0.5) solid 2px !important; }

body { min-height:100vh; }

button { border-radius:4px; font-weight:600; outline-color:transparent; outline-offset:2px; outline-style:solid; transition:all ease-out 300ms; white-space:nowrap; }
button:focus, button:focus-visible { outline:rgba(59, 130, 246, 0.5) solid 2px !important; }

header { left:0; right:0; position:absolute; top:0; z-index:9999; }

input { border-radius:4px; outline-color:transparent; outline-offset:2px; outline-style:solid; transition:all ease-out 300ms; }
input:focus, input:focus-visible { outline:rgba(59, 130, 246, 0.5) solid 2px !important; }

select { border-radius:4px; outline-color:transparent; outline-offset:2px; outline-style:solid; transition:all ease-out 300ms; }
select:focus, select:focus-visible { outline:rgba(59, 130, 246, 0.5) solid 2px !important; }

textarea { border-radius:4px; outline-color:transparent; outline-offset:2px; outline-style:solid; transition:all ease-out 300ms; }
textarea:focus, textarea:focus-visible { outline:rgba(59, 130, 246, 0.5) solid 2px !important; }

/* Utilities */
[x-cloak] { display: none !important; }

/* Header */
.header-navigation.header-navigation--desktop {}
.header-navigation.header-navigation--desktop nav {}
.header-navigation.header-navigation--desktop ul { align-items:center; display:flex; gap:48px; justify-content:flex-end; list-style:none; margin:0; padding:0; transition:all ease-out 300ms; }
.header-navigation.header-navigation--desktop li { position:relative; }
.header-navigation.header-navigation--desktop div { align-items:center; display:flex; gap:2px; justify-content:space-between; }
.header-navigation.header-navigation--desktop a { align-items:center; display:flex; flex-grow:1; gap:8px; font-family:"Barlow Condensed", sans-serif; font-size:1.375rem; justify-content:flex-start; line-height:1; text-transform:uppercase; }
.header-navigation.header-navigation--desktop a:focus, .header-navigation.header-navigation--desktop a:hover { color:var(--bricks-color-nxhzip); }
.header-navigation.header-navigation--desktop button { align-items:center; background:transparent; color:inherit; display:flex; flex-shrink:0; font-size:0.875rem; height:14px; justify-content:center; line-height:1; margin-top:2px; width:14px; }
.header-navigation.header-navigation--desktop ul > li:hover > ul,
.header-navigation.header-navigation--desktop ul > li.is-open > ul { opacity:1; transform:translate(0, 8px); visibility:visible; }
.header-navigation.header-navigation--desktop ul ul { background-color:var(--bricks-color-zoqygs); border-radius:8px; box-shadow:0 4px 8px 0 #03035c1a; display:block; font-size:0.875rem; left:0; line-height:1.25rem; opacity:0; padding:4px; position:absolute; top:100%; transform:translate(0, 0); width:160px; visibility:hidden; }
.header-navigation.header-navigation--desktop ul ul:before { content:''; height:8px; left:0; position:absolute; top:-8px; width:100%; }
.header-navigation.header-navigation--desktop ul ul a { font-size:1.25rem; font-weight:500; padding:8px; line-height:1; max-width:none; }
.header-navigation.header-navigation--desktop ul ul a:focus, .header-navigation.header-navigation--desktop ul ul a:hover { background-color:#9e09180d; color:var(--bricks-color-nxhzip); padding-left:12px; }
.header-navigation.header-navigation--desktop ul ul button { margin-right:12px; margin-top:0; transform:rotate(-90deg); }
.header-navigation.header-navigation--desktop ul ul > li:hover > ul,
.header-navigation.header-navigation--desktop ul ul > li.is-open > ul { transform:translate(8px, 0); }
.header-navigation.header-navigation--desktop ul ul ul { left:100%; top:-4px; }
.header-navigation.header-navigation--desktop ul ul ul:before { height:100%; left:-8px; position:absolute; width:8px; }

.header-navigation.header-navigation--mobile {}
.header-navigation.header-navigation--mobile nav {}
.header-navigation.header-navigation--mobile ul { display:flex; flex-direction:column; gap:16px; list-style:none; margin:0; padding:0; }
.header-navigation.header-navigation--mobile li {}
.header-navigation.header-navigation--mobile div { align-items:flex-start; display:flex; gap:24px; justify-content:space-between; }
.header-navigation.header-navigation--mobile a { font-family:"Barlow Condensed", sans-serif; font-size:1.375rem; line-height:1; text-transform:uppercase; }
.header-navigation.header-navigation--mobile a:focus, .header-navigation.header-navigation--mobile a:hover { color:var(--bricks-color-nxhzip); }
.header-navigation.header-navigation--mobile button { align-items:center; background:transparent; color:inherit; display:flex; flex-shrink:0; font-size:0.75rem; height:22px; justify-content:center; line-height:1; width:22px; }
.header-navigation.header-navigation--mobile ul > li.is-open > ul { display:flex; }
.header-navigation.header-navigation--mobile ul ul { display:none; margin-left:32px; margin-top:16px; }
.header-navigation.header-navigation--mobile ul ul a { font-size:1.25rem; font-weight:500; line-height:1; }
.header-navigation.header-navigation--mobile ul ul a:focus, .header-navigation.header-navigation--mobile ul ul a:hover { padding-left:4px; }