/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./blocks/header/src/view.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************/
.prismal-header .prismal-header-nav, .prismal-header .prismal-header-nav.prismal-header-nav-flyout {
  z-index: 200;
}

.prismal-header {
  position: relative;
  width: 100%;
  min-height: 3rem;
}

.prismal-header .prismal-header-nav {
  position: relative;
  min-height: 3rem;
  width: 100%;
  font-family: var(--font-default), "Sans-serif";
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.prismal-header .prismal-header-nav.prismal-header-nav-flyout {
  position: fixed;
  top: 0;
  left: 0;
}

:root {
  --font-default: Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --font-primary: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-secondary: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  --color-primary: #6200EE;
  --color-primary_: 98, 0, 238;
  --color-primary-light: #B988FF;
  --color-primary-light_: 185, 136, 255;
  --color-primary-dark: #230055;
  --color-primary-dark_: 35, 0, 85;
  --color-white: 255, 255, 255;
}

.prismal-header {
  display: flex;
  margin-block-start: 0;
}
.prismal-header.has-separator {
  --border-bottom: solid .1rem #CCCCCC;
}
.prismal-header.has-blur {
  --bg-blur: blur(10px);
}
.prismal-header .prismal-header-nav {
  display: flex;
  padding: 0 1rem;
  height: 5rem;
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  border-bottom: var(--border-bottom);
}
.prismal-header .prismal-header-nav > .wp-block-group.alignfull {
  flex: 1;
}
.prismal-header .prismal-header-nav.prismal-header-nav-flyout {
  height: 3rem;
  z-index: 200;
  border-radius: 1rem;
  width: 85%;
  left: 50% !important;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  -webkit-backdrop-filter: var(--bg-blur);
          backdrop-filter: var(--bg-blur);
  border-bottom: 0;
  --color-primary: white;
  color: white;
  margin-top: 1rem;
}

.wp-block-prismal-header-overlay {
  position: absolute;
}
.wp-block-prismal-header-overlay .prismal-header-nav {
  background-color: rgba(101, 101, 101, 0.3);
  -webkit-backdrop-filter: var(--bg-blur);
          backdrop-filter: var(--bg-blur);
  color: white;
}

/* Rule for when the WordPress admin bar is present (on desktop) */
body.admin-bar .wp-block-prismal-header .prismal-header-nav-flyout {
  top: 32px;
  /* Default height of the WordPress admin bar on desktop */
}

/* Rule for when the WordPress admin bar is present (on mobile/tablet) */
/* WordPress's breakpoint for the admin bar often changes around 782px */
@media screen and (max-width: 782px) {
  body.admin-bar .wp-block-prismal-header .prismal-header-nav-flyout {
    top: 46px;
    /* Default height of the WordPress admin bar on smaller screens */
  }
}

/*# sourceMappingURL=view.css.map*/