@charset "UTF-8";
/**
 * Main stylesheet entry point.
 *
 * Compiles to assets/css/main.css (see package.json — `npm run scss:watch`
 * while working, `npm run scss:build` for a final compressed build). The
 * compiled CSS in assets/css/ is what's actually enqueued and committed;
 * these SCSS sources are the thing to edit, never assets/css/main.css
 * directly.
 *
 * theme.json remains the source of truth for the core design system
 * (colour, type, spacing tokens). This file is for anything that needs
 * hand-written CSS beyond what theme.json/block settings can express —
 * keep new partials scoped (one concern per file) and import them below.
 */
/**
 * Site-wide custom properties.
 *
 * theme.json remains the source of truth for the core design system
 * (colour, type, spacing). This is for the smaller set of values that
 * don't have a theme.json equivalent but still want to be defined once
 * and reused — logo height being the first case. Plain CSS custom
 * properties rather than Sass variables, so any partial can reference
 * them directly (var(--logo-height)) without an explicit @use, the same
 * pattern already used for --fuga-g3s-menu-offset etc.
 */
:root {
  --logo-height: 54px;
  --logo-width: 71px;
  --wp--preset--font-size--small: 0.875rem;
  --wp--preset--font-size--medium: max(1rem,1.111vw);
  --wp--preset--font-size--large: max(2rem,2.222vw);
  --wp--preset--font-size--x-large: max(3rem,3.333vw);
}

.wp-site-blocks {
  position: relative;
}

main, footer {
  margin: 0 !important;
}

/**
 * Shared background layer utilities.
 *
 * .bg-layer — base fixed-position crossfade layer, used by scroll-section.
 *   Opacity toggled by JS (.is-active). clip-path containment is added by
 *   _scroll-section.scss since that's where it's needed.
 *   hero-section overrides to position:absolute in _hero-section.scss.
 *
 * .bg-overlay — flat dark overlay. Two uses:
 *   scroll-section: position:fixed, JS-toggled (.is-active), clip-path from
 *     _scroll-section.scss via .scroll-section__overlay class.
 *   hero-section: position:absolute, always-on at --overlay-opacity.
 *     Overridden in _hero-section.scss.
 */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.bg-layer.is-active {
  opacity: 1;
}

.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, var(--overlay-opacity, 0.45));
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.bg-overlay.is-active {
  opacity: 1;
}

.mega-menu {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30);
}
.mega-menu p {
  margin-top: 0;
}

.mega-menu__intro-title,
.mega-menu__column-title {
  font-weight: 700;
  margin-bottom: var(--wp--preset--spacing--10);
}

.mega-menu__intro-text {
  font-size: var(--wp--preset--font-size--medium);
}

.mega-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu__link {
  margin-bottom: var(--wp--preset--spacing--10);
}

.mega-menu__link a {
  text-decoration: none;
}

.mega-menu__link a:hover {
  text-decoration: underline;
}

/* Open/close mechanics — same on every screen size, whether the menu ends
   up full-width-and-absolute (desktop) or stacked-in-flow (mobile/tablet). */
.fuga-g3s-has-mega-menu {
  position: relative;
}

.wp-block-navigation__submenu-container.has-mega-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

.fuga-g3s-has-mega-menu:hover > .wp-block-navigation__submenu-container.has-mega-menu,
.fuga-g3s-has-mega-menu:focus-within > .wp-block-navigation__submenu-container.has-mega-menu,
.fuga-g3s-has-mega-menu.is-open > .wp-block-navigation__submenu-container.has-mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: none;
}

.mega-menu-wrapper {
  width: 100%;
}

/* Toggle button. Always present below the desktop breakpoint (click is the
   only way to open a stacked menu); above it, hidden on hover-capable
   devices since hover already does the job, kept for touch/keyboard. */
.fuga-g3s-mega-menu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.fuga-g3s-mega-menu-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -65%) rotate(45deg);
}

.fuga-g3s-has-mega-menu.is-open > .fuga-g3s-mega-menu-toggle::after {
  transform: translate(-50%, -35%) rotate(-135deg);
}

@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .fuga-g3s-mega-menu-toggle {
    display: none;
  }
  .fuga-g3s-has-mega-menu::after {
    content: "";
    display: none;
    height: calc(var(--logo-height) + var(--wp--preset--spacing--30));
    position: absolute;
    left: -15px;
    top: 0;
    width: calc(100% + 30px);
  }
  .fuga-g3s-has-mega-menu:hover::after {
    display: block;
  }
  .wp-block-navigation__submenu-container.has-mega-menu::before {
    content: "";
    display: block;
    height: var(--wp--preset--spacing--30);
    position: absolute;
    left: 0;
    top: calc(-1 * var(--wp--preset--spacing--30));
    width: 100%;
  }
}
/* --- Desktop: full-width bar, anchored via JS-calculated offset --- */
@media (min-width: 1000px) {
  .fuga-g3s-has-mega-menu > .wp-block-navigation__submenu-container.has-mega-menu {
    /* Absolute, not fixed: this stays anchored to the trigger's own
       position in the document, so it scrolls naturally with a static
       header instead of needing to track scroll position with JS.
       Both offsets are calculated by assets/js/mega-menu.js via
       getBoundingClientRect, since neither can be known in CSS alone:
       --fuga-g3s-menu-offset shifts the bar left to span the full
       viewport width despite the trigger not being at the page edge;
       --fuga-g3s-menu-top aligns it with the header's actual bottom
       edge rather than just the trigger's own height, since those
       can differ. */
    position: absolute;
    top: var(--fuga-g3s-menu-top, 100%);
    left: calc(-1 * var(--fuga-g3s-menu-offset, 0px));
    width: 100vw !important;
    background-color: var(--wp--preset--color--white);
    border: 0;
    max-height: 80vh;
  }
  .fuga-g3s-has-mega-menu:hover > .wp-block-navigation__submenu-container.has-mega-menu,
  .fuga-g3s-has-mega-menu:focus-within > .wp-block-navigation__submenu-container.has-mega-menu,
  .fuga-g3s-has-mega-menu.is-open > .wp-block-navigation__submenu-container.has-mega-menu {
    overflow-y: auto;
  }
  .mega-menu {
    --mm-right-spc: calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--30) + var(--logo-width));
    flex: 1;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    padding: 0 var(--mm-right-spc) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
    position: relative;
  }
  .mega-menu:before {
    background-color: rgba(0, 0, 0, 0.15);
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    left: var(--wp--preset--spacing--50);
    top: calc(-1 * (var(--wp--preset--spacing--30) + var(--logo-height) / 5));
    right: var(--mm-right-spc);
  }
}
/* --- Below 1000px: normal stacked flow, no absolute positioning at all --- */
@media (max-width: 999.98px) {
  .mega-menu {
    grid-template-columns: 1fr;
  }
}
/**
 * Header styles.
 *
 * Layout/structure lives in parts/header.html as usual (built in the block
 * editor) — this is for anything that needs hand-written CSS beyond what
 * theme.json/block settings can express.
 */
header {
  position: relative;
  z-index: 1000;
}

.g3s-front-page-header {
  background-color: transparent;
  color: var(--wp--preset--color--white);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.g3s-front-page-header .g3s-logo {
  background-image: url(../img/g3s-logo_wht.svg);
}
.g3s-front-page-header .wp-block-navigation {
  color: var(--wp--preset--color--white);
}

@media (min-width: 600px) {
  .g3s-header-content {
    flex-direction: row-reverse;
  }
  .g3s-header-content > .wp-block-navigation {
    flex: 1;
  }
}

.g3s-logo {
  background: url(../img/g3s-logo_blk.svg) right center no-repeat;
  background-size: contain;
  height: var(--logo-height);
  position: relative;
  width: var(--logo-width);
}
.g3s-logo a {
  display: block;
  height: 100%;
  opacity: 0;
  overflow: auto;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .g3s-header, .g3s-front-page-header .g3s-header {
    transition: 0.3s;
  }
  .g3s-header .g3s-logo, .g3s-front-page-header .g3s-header .g3s-logo {
    transition: 0.3s;
  }
  .g3s-header .wp-block-navigation, .g3s-front-page-header .g3s-header .wp-block-navigation {
    transition: color 0.3s;
  }
  .g3s-header:hover, .g3s-front-page-header .g3s-header:hover {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--contrast);
  }
  .g3s-header:hover .g3s-logo, .g3s-front-page-header .g3s-header:hover .g3s-logo {
    background-image: url(../img/g3s-logo_blk.svg);
  }
  .g3s-header:hover .wp-block-navigation, .g3s-front-page-header .g3s-header:hover .wp-block-navigation {
    color: var(--wp--preset--color--contrast);
  }
}
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    float: right;
    margin-left: 0.4em;
    margin-top: 0.25em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    vertical-align: middle;
    transition: transform 0.2s;
  }
  .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content::before {
    transform: rotate(180deg);
  }
}
.yoast-breadcrumbs {
  font-size: var(--wp--preset--font-size--medium);
  text-transform: uppercase;
}
.yoast-breadcrumbs a {
  color: currentColor;
  text-decoration: none;
}
.yoast-breadcrumbs .breadcrumb_last {
  color: var(--wp--preset--color--highlight);
}

/**
 * Hero section.
 *
 * Layout per spec: section is the flex column wrapper at min-height:100dvh;
 * .hero-section__content is flex:1 (fills available space, pushes buttons
 * to the bottom); .hero-section__buttons sizes to its own content.
 *
 * bg-layer and bg-overlay from _utilities.scss are designed for the
 * scroll-section (body-level, fixed, JS-toggled). Hero-section overrides
 * both back to position:absolute (scrolls with the section) and the
 * overlay to always-on (opacity from CSS variable, no JS toggle needed).
 */
.hero-section {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  color: var(--wp--preset--color--white);
  position: relative;
  z-index: 10;
}
.admin-bar .hero-section {
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height));
}

.hero-section > .bg-layer {
  position: absolute;
  z-index: 0;
}

.hero-section > .bg-overlay {
  position: absolute;
  opacity: var(--overlay-opacity, 0.3);
  transition: none;
}

.hero-section__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero-section__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--wp--preset--spacing--50);
}

.hero-section__title {
  font-size: max(3.875rem, 4.3vw);
  font-weight: 700;
  margin: 0 0 var(--wp--preset--spacing--20);
}

.hero-section__strapline {
  margin: 0;
  max-width: 27em;
  font-size: var(--wp--preset--font-size--large);
}

.hero-section__buttons {
  display: flex;
  flex-wrap: wrap;
}

.hero-section__button {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--wp--preset--spacing--10);
  padding: 1.35em var(--wp--preset--spacing--50);
  text-decoration: none;
  text-align: left;
  font-weight: 500;
}

.hero-section__button--primary {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

.hero-section__button--secondary {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--contrast);
}

.hero-section__button::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  margin-left: auto;
}

.hero-section__button--jump_link::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.hero-section__button--page_link::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}

.hero-section__video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/**
 * Scroll Section + Scroll Panel.
 *
 * Background approach: bg-layers are position:fixed but clip-path clamps
 * them to the section's visible viewport slice — so they only ever appear
 * where the section actually is, with no dependency on surrounding content
 * having explicit backgrounds/z-index. --clip-top and --clip-bottom are
 * CSS custom properties set on .scroll-section by view.js on every scroll
 * event. bg-layers inherit these via the cascade.
 *
 * Stacking within the section:
 *   z-index 0 — bg-layers (fixed, clipped)
 *   z-index 1 — bg-overlay (fixed, clipped)
 *   z-index 2 — .scroll-section__inner (content, always on top)
 *
 * Page-level scroll-snap: html.has-scroll-section gets
 * scroll-snap-type:y proximity (added by view.js). Individual panels get
 * scroll-snap-align:start set by view.js based on height vs viewport.
 *
 * Desktop layout matches the prototype:
 *   Left column: flex-basis:35%, margin-top:10dvh, position:sticky top:0
 *   Panels:      margin-top:80dvh (creates scroll space before first panel)
 */
.scroll-section {
  position: relative;
}

.scroll-section > .bg-layer {
  clip-path: inset(var(--clip-top, 100px) 0 var(--clip-bottom, 100px) 0);
  transition: opacity 0.9s;
}

.scroll-section__overlay {
  clip-path: inset(var(--clip-top, 100px) 0 var(--clip-bottom, 100px) 0);
  transition: opacity 0.6s ease;
}

.scroll-section__inner {
  position: relative;
  z-index: 2;
}

html.has-scroll-section {
  scroll-snap-type: y proximity;
}

.scroll-section__inner {
  padding: 0 var(--wp--preset--spacing--30);
}

.scroll-section__left-sticky {
  padding: var(--wp--preset--spacing--30) 0;
  color: var(--wp--preset--color--white);
}

.scroll-section__title {
  margin: 0 0 var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--white);
}

.scroll-section__sub-text {
  margin: 0;
  opacity: 0.8;
}

.scroll-section__panels {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--30);
}

.scroll-panel .acf-innerblocks-container {
  width: 100%;
}

@media (min-width: 1000px) {
  .scroll-section__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--50);
    padding: 0 var(--wp--preset--spacing--50);
  }
  .scroll-section__left {
    flex-basis: 35%;
    flex-shrink: 0;
    margin-top: 10dvh;
    position: sticky;
    top: 0;
  }
  .scroll-section__left-sticky {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    padding: 0;
  }
  .scroll-section__panels {
    flex: 1;
    display: block;
    margin-top: 80dvh;
    gap: 0;
    padding: 0;
  }
  .scroll-panel {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 100dvh;
    padding: var(--wp--preset--spacing--40) 0;
  }
}
/**
 * Overlay scroll panels.
 *
 * Each panel becomes position: sticky; top: 0, so panels scroll in from
 * below and stack on top of each other as the user scrolls. The wrapper
 * stays in normal document flow — putting sticky + overflow-y on the same
 * element is mutually exclusive (browser drops one), so the scroll happens
 * in the page context, not inside a scroll container on the wrapper.
 *
 * Later panels naturally stack above earlier ones via DOM order, so no
 * explicit z-index juggling is needed.
 *
 * The total scroll distance between panels = sum of panel heights, which
 * is determined by the wrapper's natural height. The "scroll on to the
 * next section" behaviour at the end is free — once the wrapper itself
 * scrolls off, the page continues normally.
 */
.g3s-panel-overlay-scroll .wp-block-media-text__content {
  padding: var(--wp--preset--spacing--50);
}

@media (min-width: 1000px) {
  .g3s-panel-overlay-scroll > .wp-block-group {
    display: block;
  }
}

@media (min-width: 1000px) {
  .g3s-panel-overlay-scroll > .wp-block-group > .wp-block-group {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding-top: var(--wp--preset--spacing--50);
    position: sticky;
    top: var(--wp--preset--spacing--50);
    min-height: calc(100dvh - var(--wp--preset--spacing--50));
  }
  .admin-bar .g3s-panel-overlay-scroll > .wp-block-group > .wp-block-group {
    top: calc(var(--wp--preset--spacing--50) + var(--wp-admin--admin-bar--height));
    min-height: calc(100dvh - (var(--wp--preset--spacing--50) + var(--wp-admin--admin-bar--height)));
  }
}

/**
 * Footer icon buttons (.g3s-footer-buttons).
 *
 * Three circular white buttons (home, back-to-top, LinkedIn) with the
 * contrast colour icon centred. Text is visually hidden but kept in the
 * DOM so screen readers still get the link label. Icons are injected
 * inline by assets/js/footer.js so they pick up currentColor.
 */
.g3s-footer-buttons {
  gap: var(--wp--preset--spacing--20);
}

.g3s-button-home .wp-block-button__link,
.g3s-button-btt .wp-block-button__link,
.g3s-button-linkedin .wp-block-button__link {
  width: max(36px, 2.5vw);
  height: max(36px, 2.5vw);
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--wp--preset--color--contrast) !important;
  background-color: var(--wp--preset--color--white) !important;
}
.g3s-button-home .wp-block-button__link svg,
.g3s-button-btt .wp-block-button__link svg,
.g3s-button-linkedin .wp-block-button__link svg {
  position: absolute;
  width: max(1rem, 1.111vw);
  height: max(1rem, 1.111vw);
  flex-shrink: 0;
}

/**
 * Editor-only style overrides.
 *
 * Scoped to .editor-styles-wrapper — only applies inside the block editor
 * iframe, never on the front end.
 */
.editor-styles-wrapper .scroll-section > .bg-layer,
.editor-styles-wrapper .scroll-section > .scroll-section__overlay {
  display: none;
}
.editor-styles-wrapper .scroll-section__panels {
  height: auto;
  overflow-y: visible;
  scroll-snap-type: none;
  margin-top: 0;
}
.editor-styles-wrapper .scroll-section__inner {
  min-height: 0;
}
.editor-styles-wrapper .scroll-panel {
  min-height: 300px;
}
.editor-styles-wrapper [data-type="fuga-g3s/scroll-section"],
.editor-styles-wrapper [data-type="fuga-g3s/hero-section"] {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.editor-styles-wrapper .has-global-padding {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.editor-styles-wrapper .is-layout-constrained > .alignfull,
.editor-styles-wrapper .is-layout-constrained > .wp-block.alignfull,
.editor-styles-wrapper .has-global-padding > .alignfull,
.editor-styles-wrapper .has-global-padding > .wp-block.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  align-self: stretch;
}
.editor-styles-wrapper .scroll-section {
  background-color: var(--wp--preset--color--contrast);
}

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