/**
 * @L Breakpoints:
 * W >= 431: Dock icons start centering horizontally and transform into desktop dock design. Space between icons starts growing upto 70px. icons grow upto 80px
 *
 */
html {
  --fla-heading-font-family: "CenturyGothicStd", "Inter", sans-serif;
  --fla-subheading-font-family: "Poppins";
  --fla-body-font-family: "Inter", "Helvetica Neue", "Arial", "Helvetica", "sans-serif";
  --fla-text-color-light: rgba(255,255,255,0.618);
}

body {
  --fla-dock-height: 0px;
}

body[data-fla-state*="do:1"] {
  --fla-dock-height: var(--fla-footer-height);
}

/**
 * TO BE INCLUDED WITHIN THE CONTENT CONTAINING ELEMENT
 * (WHERE THE SCOLLING DOES HAPPEN)
 */
/**
 * Must be applied not to the block element but the h1/h2/h3 directly
 * block must be display: contents
 */
/**
  NOTE: THIS IS SPECIFIC TO FONTS
  ARIAL: 0.318/2
 */
/**
 * What this does, is:
 * Given a Text like "First, Last and Always" we have the descender "y"
 * this mixin calculates the space that is taken by descenders and subtracts it
 * from the height of the element via negative margin bottom. By the way:
 * the descender space is also taken if we have text that does NOT have a descender!
 * When to use:
 * - The text block needs to sit bottom align with a specific design line or element
 *
 * When NOT to use:
 * - If another text block is placed below this one. in that case we need to use another mixin "centuryGothicDescendantEqualizer"
 *
 * Get the UnitsPerEM via "ttx -t head CenturyGothicStd.ttf" (fonttools)
 * Get the sTypoDescender via `ttx -t OS/2 CenturyGothicStd.ttf` (fonttools)
 * Calculate the Descener Ratio: Descender Ratio = |sTypoDescender| / unitsPerEm
 * Translate into CSS: margin-bottom: calc(-1*<DescenderRatio>)
 *
 * @see https://stackoverflow.com/questions/27631736/meaning-of-top-ascent-baseline-descent-bottom-and-leading-in-androids-font
 */
/**
 What we do here is:
 Based on this graphic: https://i.sstatic.net/LwZJF.png we cut off the
 distance from the bottom to the Descent
 */
/**
 * @deprecated Moved to a SDC component
 */
/**
 * Meant to glue the menu image before and after the content area so it can be used as glass background..
 */
/**
 * Use the content's image as a background below the content area to prevent boring grey areas
 */
/*
 * Use this for sections where the main content area must start below the header (not overlayed by the glass header)
 * to look fine u need to define a backkground image either for the body element or the layout container
 */
footer {
  container-name: footer-container;
  container-type: size;
}

body {
  --fla-dock-icon-size: 50px;
  --fla-dock-icon-margin: 10px;
  --fla-dock-link-fontsize: 0;
}

@media screen and (min-width: 351px) and (min-height: 601px) {
  body {
    --fla-dock-icon-size: 60px;
    --fla-dock-icon-margin: 20px;
  }
}

@media screen and (min-width: 501px) and (min-height: 931px) {
  body {
    --fla-dock-icon-size: 75px;
  }
}

@media screen and (min-width: 731px) and (min-height: 931px) {
  body {
    --fla-dock-icon-margin: 40px;
    --fla-dock-link-fontsize: 0.65em;
  }
}

@media screen and (min-width: 900px) and (min-height: 931px) {
  body {
    --fla-dock-icon-size: calc( 0.6 * var(--fla-footer-height) ) ;
    --fla-dock-icon-margin: calc( 0.5 * var(--fla-dock-icon-size) );
    --fla-dock-link-fontsize: calc( 0.13 * var(--fla-dock-icon-size) );
  }
}

@container footer-container (min-width: 1300px) {
  body {
    --fla-dock-icon-margin: calc( 3 * var(--fla-dock-icon-size) );
  }
}

/**
  * DOCK tab (upper half of an isosceles trapezoid with rounded corners)
  */
footer a.fla-toggle-dock {
  display: none;
}

/*
footer a.fla-toggle-dock {
  //@include container-init(fla-dock-menu-icon);
  --icon-ratio: 1;
  --font-size: 1.5rem;
  --line-height: var(--bs-body-line-heigth, 1.42857143);
  --border-radius: 1rem;
  --padding-y: 0.5rem;
  --padding-x: 0.75rem;
  --height: calc( var(--padding-y) * 2 + var(--font-size)*var(--line-height) / var(--icon-ratio) );
  --width: auto;
  --distance-from-viewport-corner: 1.5rem;
    @include glass-effect-1(-1, var(--border-radius));
    &, &:before {
      border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius);
      background-color: rgba(0, 0, 0, 0.618);
      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.618);
    }
    content: " ";
    position: absolute;
    top: calc(-1 * var(--height) - var(--distance-from-viewport-corner));
    left: var(--distance-from-viewport-corner);
    width: var(--width);
    padding: var(--padding-y) var(--padding-x);

    text-align: left;
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: white;
    border-bottom: none;
    z-index: 10;
    i{
    font-style: normal !important;
    }
}
// variant where the icon is in the upper left area of the main content area
/*
footer a.fla-toggle-dock {
  position: fixed;
  top: calc(var(--distance-from-viewport-corner) + var(--fla-header-height));
}
//*/
footer #block-mobilefootermenu ul.menu, footer #block-mobile-main-menu ul.menu {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  line-height: 0;
  font-size: var(--fla-dock-link-fontsize);
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(var(--fla-dock-link-fontsize) * 1.5);
  margin-bottom: 0;
}

@media screen and (min-width: 431px) {
  footer #block-mobilefootermenu ul.menu, footer #block-mobile-main-menu ul.menu {
    width: calc( 5 * var(--fla-dock-icon-size) + 4 * var(--fla-dock-icon-margin));
  }
}

@container footer-container (min-width: 1300px) {
  footer #block-mobilefootermenu ul.menu, footer #block-mobile-main-menu ul.menu {
    justify-content: center;
    gap: var(--fla-dock-icon-size);
  }
}

footer #block-mobilefootermenu li.menu-item, footer #block-mobile-main-menu li.menu-item {
  cursor: pointer;
  display: inline-block;
  flex-grow: 0;
  text-align: center;
  box-sizing: content-box;
  position: relative;
  padding-top: 0;
  height: calc( var(--fla-dock-icon-size));
  width: var(--fla-dock-icon-size);
  padding-bottom: calc(var(--fla-dock-link-fontsize) + 0.5em);
  font-size: 2em;
}

@container footer-container (min-width: 1300px) {
  footer #block-mobilefootermenu li.menu-item, footer #block-mobile-main-menu li.menu-item {
    width: auto !important;
  }
}

footer #block-mobilefootermenu li.menu-item:before, footer #block-mobile-main-menu li.menu-item:before {
  content: " ";
  aspect-ratio: 1;
  height: var(--fla-dock-icon-size);
  width: var(--fla-dock-icon-size);
  border-radius: 10%;
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
  transition-property: background-size;
  transition-timing-function: ease-out;
  transition-duration: 0.2s;
}

footer #block-mobilefootermenu li.menu-item:hover:before, footer #block-mobile-main-menu li.menu-item:hover:before {
  background-size: 105% auto;
}

footer #block-mobilefootermenu li.menu-item a, footer #block-mobile-main-menu li.menu-item a {
  font-weight: bolder;
}

footer #block-mobilefootermenu li.menu-item a svg, footer #block-mobile-main-menu li.menu-item a svg {
  display: none;
}

footer #block-mobilefootermenu li.menu-item:before, footer #block-mobile-main-menu li.menu-item:before {
  color: transparent;
  text-shadow: 0px 0px 10px black;
}

footer #block-mobilefootermenu li.menu-item:nth-of-type(1):before, footer #block-mobile-main-menu li.menu-item:nth-of-type(1):before {
  background-image: url("/themes/custom/fla/img/icons/dock/v3/S-and-H.jpg");
}

footer #block-mobilefootermenu li.menu-item:nth-of-type(2):before, footer #block-mobile-main-menu li.menu-item:nth-of-type(2):before {
  background-image: url("/themes/custom/fla/img/icons/dock/v3/FLA-Expertise_minimal.png");
}

footer #block-mobilefootermenu li.menu-item:nth-of-type(3):before, footer #block-mobile-main-menu li.menu-item:nth-of-type(3):before {
  background-image: url("/themes/custom/fla/img/icons/dock/v3/Portfolio.jpg");
}

footer #block-mobilefootermenu li.menu-item:nth-of-type(4):before, footer #block-mobile-main-menu li.menu-item:nth-of-type(4):before {
  background-image: url("/themes/custom/fla/img/icons/dock/v3/Inspiration.jpg");
}

footer #block-mobilefootermenu li.menu-item:nth-of-type(5):before, footer #block-mobile-main-menu li.menu-item:nth-of-type(5):before {
  background-image: url("/themes/custom/fla/img/icons/dock/v3/Contact-Us.jpg");
}

footer #block-mobilefootermenu li.menu-item.menu-item--active-trail:before, footer #block-mobile-main-menu li.menu-item.menu-item--active-trail:before {
  color: #669900;
}

footer #block-mobilefootermenu li.menu-item a, footer #block-mobile-main-menu li.menu-item a {
  padding: 0;
  font-size: var(--fla-dock-link-fontsize);
  display: block;
  width: 100%;
  cursor: pointer;
  line-height: normal;
  margin-block-start: 0.5em;
}

footer #block-mobilefootermenu li.menu-item a.is-active, footer #block-mobilefootermenu li.menu-item a:hover, footer #block-mobilefootermenu li.menu-item a:active, footer #block-mobile-main-menu li.menu-item a.is-active, footer #block-mobile-main-menu li.menu-item a:hover, footer #block-mobile-main-menu li.menu-item a:active {
  color: #669900 !important;
}

@container footer-container (min-width: 1300px) {
  footer #block-mobilefootermenu li.menu-item a, footer #block-mobile-main-menu li.menu-item a {
    white-space: nowrap;
  }
}

footer #block-mobilefootermenu li.menu-item:hover a, footer #block-mobile-main-menu li.menu-item:hover a {
  color: #669900;
}

.layout-container {
  transition-property: padding-bottom;
  transform-style: flat;
  transition-timing-function: ease-out;
  transition-duration: 0.1s;
}

body .layout-container {
  padding-bottom: 0;
}

body footer {
  bottom: calc(-1 * var(--fla-footer-height, 80px));
  transition-property: bottom;
  transition-timing-function: ease-in-out;
  transition-duration: 0.3s;
}

body[data-fla-state*="do:1"] .layout-container,
body[data-fla-state*="do:2"] .layout-container {
  padding-bottom: calc(var(--fla-footer-height) - 1px);
}

html.glass-dock body[data-fla-state*="do:1"] .layout-container, html.glass-dock body[data-fla-state*="do:2"] .layout-container {
  padding-bottom: 0 !important;
}

body[data-fla-state*="do:1"] footer,
body[data-fla-state*="do:2"] footer {
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*# sourceMappingURL=fla-dock.css.map */