.ogf-header-mount,
.ogf-header-mount *,
.ogf-exact-header,
.ogf-exact-header * {
    box-sizing: border-box;
}

/*
 * The mount remains inside Avada's column so the Builder controls document flow.
 * The actual header is then bled to the real browser viewport. JS writes the
 * exact viewport width and the mount's negative X offset, which avoids the
 * fragile left:50% / -50vw technique that breaks inside Avada flex containers.
 */
.ogf-header-mount,
.ogf-exact-header,
.ogf-exact-header *,
.ogf-exact-header *::before,
.ogf-exact-header *::after {
    box-sizing: border-box;
}

.ogf-header-mount {
    position: relative;
    display: block;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 99990;
}

.ogf-exact-header {
    position: relative;
    left: auto !important;
    right: auto !important;
    display: block;
    width: var(--ogf-viewport-w, 100vw);
    max-width: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: var(--ogf-bleed-left, calc(50% - 50vw)) !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: var(--ogf-red);
    color: var(--ogf-text);
    font-family: var(--ogf-font);
    font-weight: var(--ogf-font-weight);
    line-height: 1.2;
    z-index: 99990;
    isolation: isolate;
    overflow: visible;
}

/*
 * Stable sticky engine: the Avada Header Layout wrapper stays in normal document
 * flow. Only the isolated header is fixed while compact, and its original space
 * is preserved so scrolling never enters a resize feedback loop.
 */
.ogf-header-mount {
    overflow-anchor: none;
}

.ogf-header-mount.ogf-sticky-placeholder {
    height: var(--ogf-placeholder-h) !important;
    min-height: var(--ogf-placeholder-h) !important;
}

.ogf-exact-header.ogf-is-fixed {
    position: fixed !important;
    top: var(--ogf-adminbar-h, 0px) !important;
    left: 0 !important;
    right: auto !important;
    width: var(--ogf-viewport-w, 100vw) !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 99990 !important;
    overflow-anchor: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* In Avada Live Builder, the editor owns the fixed top toolbar and scroll
 * surface. The plugin intentionally stays in the full, non-fixed editing state.
 * The normal front-end preview retains the complete compact-on-scroll effect. */
.ogf-exact-header.ogf-editor-safe-mode {
    position: relative !important;
}

/* Only wrappers on the path to this plugin inside an Avada Header Layout are
 * normalized. No global Avada Container/Column rules are changed. */
.fusion-tb-header.ogf-avada-header-host,
.fusion-tb-header.ogf-avada-header-host .fusion-fullwidth.ogf-avada-header-ancestor,
.fusion-tb-header.ogf-avada-header-host .fusion-builder-row.ogf-avada-header-ancestor,
.fusion-tb-header.ogf-avada-header-host .fusion-layout-column.ogf-avada-header-ancestor,
.fusion-tb-header.ogf-avada-header-host .fusion-column-wrapper.ogf-avada-header-ancestor {
    overflow: visible !important;
}

.fusion-tb-header.ogf-avada-header-host .fusion-fullwidth.ogf-avada-header-ancestor,
.fusion-tb-header.ogf-avada-header-host .fusion-builder-row.ogf-avada-header-ancestor,
.fusion-tb-header.ogf-avada-header-host .fusion-layout-column.ogf-avada-header-ancestor,
.fusion-tb-header.ogf-avada-header-host .fusion-column-wrapper.ogf-avada-header-ancestor {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.fusion-tb-header.ogf-avada-header-host .fusion-fullwidth.ogf-avada-header-ancestor,
.fusion-tb-header.ogf-avada-header-host .fusion-layout-column.ogf-avada-header-ancestor,
.fusion-tb-header.ogf-avada-header-host .fusion-column-wrapper.ogf-avada-header-ancestor {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.fusion-tb-header.ogf-avada-header-host .fusion-builder-row.ogf-avada-header-ancestor {
    width: 100% !important;
}

.ogf-exact-header a,
.ogf-exact-header a:hover,
.ogf-exact-header a:focus {
    color: var(--ogf-text);
    text-decoration: none;
}

.ogf-exact-header a:focus-visible,
.ogf-exact-header button:focus-visible,
.ogf-mobile-menu a:focus-visible,
.ogf-mobile-menu button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.96);
    outline-offset: 2px;
}

.ogf-exact-header ul,
.ogf-exact-header li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ogf-exact-header button,
.ogf-exact-header input {
    font-family: inherit;
}

.ogf-container {
    width: min(var(--ogf-container), calc(100% - 36px));
    height: 100%;
    margin: 0 auto;
}

/* Desktop shell */
.ogf-desktop-shell {
    position: relative;
    height: var(--ogf-header-h);
    background: var(--ogf-red);
    overflow: visible;
    transition: height var(--ogf-sticky-anim) cubic-bezier(.2, .75, .2, 1);
}

.ogf-stripe-field {
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--ogf-stripe-h);
    background: var(--ogf-red);
    pointer-events: none;
    transition: height var(--ogf-sticky-anim) cubic-bezier(.2, .75, .2, 1);
}

/* Desktop stripe engine.
 *
 * The olympiacos.org reference uses a strict 50/50 rhythm around a centered
 * solid-red branding block. The important detail is the PHASE: the left field
 * ends with a complete white band and the right field starts with a complete
 * white band. A viewport-anchored repeating background cannot guarantee that
 * because the center block cuts the pattern at an arbitrary point.
 *
 * Exact mode therefore gives each side its own pattern and anchors that pattern
 * to the center-block edge. The side bounds are expressed from the same
 * --ogf-brand-half variable used by the centered brand block, so Avada widths,
 * browser scrollbars, zoom rounding and viewport changes cannot introduce a
 * narrow interior stripe. Only the natural outermost viewport-clipped band may
 * be partial, exactly like the reference site. */
.ogf-stripe-field::before,
.ogf-stripe-field::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    background-repeat: repeat-x;
    background-origin: border-box;
    background-clip: border-box;
}

/* Legacy/custom pattern. Kept for backwards compatibility when the exact lock
 * is deliberately disabled in settings. */
.ogf-stripe-field::before {
    left: 0;
    right: calc(50% + var(--ogf-brand-half));
    background-image: linear-gradient(
        90deg,
        var(--ogf-red) 0,
        var(--ogf-red) var(--ogf-stripe-gap),
        var(--ogf-stripe) var(--ogf-stripe-gap),
        var(--ogf-stripe) 100%
    );
    background-size: calc(var(--ogf-stripe-gap) + var(--ogf-stripe-w)) 100%;
    background-position: var(--ogf-stripe-offset) top;
}

.ogf-stripe-field::after {
    left: calc(50% + var(--ogf-brand-half));
    right: 0;
    background-image: linear-gradient(
        90deg,
        var(--ogf-stripe) 0,
        var(--ogf-stripe) var(--ogf-stripe-w),
        var(--ogf-red) var(--ogf-stripe-w),
        var(--ogf-red) 100%
    );
    background-size: calc(var(--ogf-stripe-gap) + var(--ogf-stripe-w)) 100%;
    background-position: left top;
}

/* Reference-locked geometry. Each repeated tile is exactly 2 * stripe width.
 * The explicit final stop prevents interpolation/blended seams in Chromium and
 * WebKit. The left tile is aligned by its RIGHT edge; the right tile by its
 * LEFT edge. Consequently every interior white and red band is identical. */
.ogf-exact-header.ogf-uniform-stripes .ogf-stripe-field::before {
    left: 0;
    right: calc(50% + var(--ogf-brand-half));
    background-image: repeating-linear-gradient(
        90deg,
        var(--ogf-red) 0,
        var(--ogf-red) var(--ogf-stripe-w),
        var(--ogf-stripe) var(--ogf-stripe-w),
        var(--ogf-stripe) calc(var(--ogf-stripe-w) * 2)
    );
    background-size: calc(var(--ogf-stripe-w) * 2) 100%;
    background-position: right top;
}

.ogf-exact-header.ogf-uniform-stripes .ogf-stripe-field::after {
    left: calc(50% + var(--ogf-brand-half));
    right: 0;
    background-image: repeating-linear-gradient(
        90deg,
        var(--ogf-stripe) 0,
        var(--ogf-stripe) var(--ogf-stripe-w),
        var(--ogf-red) var(--ogf-stripe-w),
        var(--ogf-red) calc(var(--ogf-stripe-w) * 2)
    );
    background-size: calc(var(--ogf-stripe-w) * 2) 100%;
    background-position: left top;
}

.ogf-brand-block {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: var(--ogf-brand-w);
    max-width: calc(100% - (var(--ogf-stripe-w) * 2));
    height: var(--ogf-stripe-h);
    transform: translateX(-50%);
    background: var(--ogf-red);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: height var(--ogf-sticky-anim) cubic-bezier(.2, .75, .2, 1);
}

.ogf-brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 18px;
    outline-offset: -4px;
    overflow: hidden;
}

.ogf-brand-image {
    display: block;
    width: auto;
    max-width: min(var(--ogf-logo-w), 100%);
    max-height: var(--ogf-logo-h);
    object-fit: contain;
    transition: width var(--ogf-sticky-anim) cubic-bezier(.2, .75, .2, 1), max-width var(--ogf-sticky-anim) cubic-bezier(.2, .75, .2, 1), max-height var(--ogf-sticky-anim) cubic-bezier(.2, .75, .2, 1), height var(--ogf-sticky-anim) cubic-bezier(.2, .75, .2, 1);
}

.ogf-brand-fallback {
    display: block;
    color: var(--ogf-text);
    font-size: clamp(26px, 2.25vw, 42px);
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* Reference sticky/compact desktop state. The recording shrinks only the striped brand band; the nav row keeps its height. */
.ogf-exact-header.ogf-is-desktop.ogf-is-scrolled .ogf-desktop-shell {
    height: calc(var(--ogf-compact-stripe-h) + var(--ogf-nav-h));
}

.ogf-exact-header.ogf-is-desktop.ogf-is-scrolled .ogf-stripe-field,
.ogf-exact-header.ogf-is-desktop.ogf-is-scrolled .ogf-brand-block {
    height: var(--ogf-compact-stripe-h);
}

.ogf-exact-header.ogf-is-desktop.ogf-is-scrolled:not(.ogf-bundled-logo) .ogf-brand-image-desktop {
    max-width: var(--ogf-compact-logo-w);
    max-height: calc(var(--ogf-compact-stripe-h) - 6px);
}

/* The bundled screenshot-derived lockup includes a red field. Cropping it in compact mode reproduces the reference compact lockup proportions exactly. */
.ogf-exact-header.ogf-bundled-logo .ogf-brand-image-desktop {
    width: var(--ogf-logo-w);
    height: var(--ogf-logo-h);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ogf-exact-header.ogf-bundled-logo.ogf-is-desktop.ogf-is-scrolled .ogf-brand-image-desktop {
    width: min(var(--ogf-compact-logo-w), 100%);
    height: var(--ogf-compact-stripe-h);
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

.ogf-nav-zone {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ogf-nav-h);
    background: var(--ogf-red);
}

.ogf-nav-inner {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 0;
    padding-left: var(--ogf-nav-inset);
    padding-right: 0;
}

.ogf-social {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ogf-social-desktop {
    flex: 0 0 auto;
    margin-right: var(--ogf-social-nav-gap);
    align-self: center;
}

.ogf-social-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    min-width: 25px;
    border-radius: 50%;
    background: var(--ogf-red-dark);
    color: var(--ogf-text) !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: transform 120ms ease, background-color 120ms ease;
}

.ogf-social-link:hover,
.ogf-social-link:focus-visible {
    transform: translateY(-1px);
    background: rgba(0, 0, 0, 0.28);
}

.ogf-social-link span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-0.25px);
}

.ogf-social-svg {
    display: block;
    width: 13px;
    height: 13px;
    overflow: visible;
}

.ogf-facebook-letter {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 900;
    transform: translateY(1px) !important;
}

.ogf-linkedin-letter {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.ogf-social-link.ogf-social-linkedin span {
    font-size: 10px;
}

.ogf-social-link.ogf-social-youtube span {
    font-size: 10px;
}

.ogf-main-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--ogf-nav-gap);
    min-width: 0;
    white-space: nowrap;
}

.ogf-nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.ogf-nav-link {
    position: relative;
    display: flex !important;
    align-items: center;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ogf-text) !important;
    font-size: var(--ogf-nav-size) !important;
    font-weight: var(--ogf-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ogf-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--ogf-underline-offset);
    height: var(--ogf-underline-h);
    background: var(--ogf-text);
    opacity: 0;
    transform: scaleX(0.35);
    transform-origin: 50% 50%;
    transition: opacity var(--ogf-anim) ease, transform var(--ogf-anim) ease;
}

.ogf-nav-item.is-active > .ogf-nav-link::after,
.ogf-nav-item.is-current > .ogf-nav-link::after,
.ogf-nav-item:hover > .ogf-nav-link::after,
.ogf-nav-link:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

/* While another menu is being explored, hide the persistent current-page line
 * so the hover/active underline behaves like the reference header. */
.ogf-main-nav:hover .ogf-nav-item.is-current:not(:hover):not(.is-active) > .ogf-nav-link::after,
.ogf-exact-header.ogf-has-active-panel .ogf-nav-item.is-current:not(.is-active) > .ogf-nav-link::after {
    opacity: 0;
    transform: scaleX(0.35);
}

/* Mega layer overlays the page, matching the reference behavior. */
.ogf-mega-layer {
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.ogf-mega-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, var(--ogf-red) 0%, var(--ogf-panel-bottom) 100%);
    color: var(--ogf-text);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-1px);
    transition:
        opacity var(--ogf-anim) cubic-bezier(.2, .75, .2, 1),
        transform var(--ogf-anim) cubic-bezier(.2, .75, .2, 1),
        visibility 0s linear var(--ogf-anim);
}

.ogf-mega-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

.ogf-mega-grid {
    display: grid;
    grid-template-columns: repeat(var(--ogf-cols), minmax(0, 1fr));
    gap: var(--ogf-col-gap);
    height: auto;
    min-height: var(--ogf-mega-min-h);
    padding: var(--ogf-panel-pt) var(--ogf-mega-grid-right) var(--ogf-panel-pb) var(--ogf-mega-grid-left);
}

.ogf-mega-column {
    position: relative;
    min-width: 0;
    padding: 0 var(--ogf-mega-col-pad);
}

.ogf-mega-column.has-separator::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, var(--ogf-sep-opacity));
}

.ogf-mega-column h3 {
    position: relative;
    display: inline-block;
    margin: 0 0 var(--ogf-heading-mb) !important;
    padding: 0 0 var(--ogf-heading-pb) !important;
    border: 0 !important;
    color: var(--ogf-text) !important;
    font-family: var(--ogf-font) !important;
    font-size: var(--ogf-title-size) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-transform: uppercase;
}

.ogf-mega-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--ogf-heading-underline-ratio);
    height: var(--ogf-heading-underline-h);
    background: currentColor;
}

.ogf-heading-spacer {
    height: calc(var(--ogf-title-size) + var(--ogf-heading-pb) + var(--ogf-heading-underline-h) + var(--ogf-heading-mb) + 2px);
}

.ogf-mega-column li {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

.ogf-mega-column li + li {
    margin-top: 2px !important;
}

.ogf-mega-column a {
    display: inline-block !important;
    padding: 0 !important;
    color: var(--ogf-text) !important;
    font-family: var(--ogf-font) !important;
    font-size: var(--ogf-link-size) !important;
    font-weight: var(--ogf-font-weight) !important;
    line-height: var(--ogf-link-lh) !important;
    opacity: 1;
    transition: opacity 100ms ease;
}

.ogf-mega-column a:hover,
.ogf-mega-column a:focus-visible {
    opacity: 0.72;
}

.ogf-mega-panel.is-compact .ogf-mega-grid {
    grid-template-columns: minmax(250px, 360px) !important;
    justify-content: start;
    min-height: var(--ogf-compact-mega-min-h);
}

/* Mobile shell - reference-style fixed left drawer with page push */
.ogf-mobile-menu,
.ogf-mobile-menu * {
    box-sizing: border-box;
}

.ogf-mobile-menu a,
.ogf-mobile-menu a:hover,
.ogf-mobile-menu a:focus {
    color: var(--ogf-text);
    text-decoration: none !important;
}

.ogf-mobile-menu ul,
.ogf-mobile-menu li {
    margin: 0 !important;
    padding: 0;
    list-style: none !important;
}

.ogf-mobile-shell {
    display: none;
    position: relative;
    background: var(--ogf-red);
}

.ogf-mobile-bar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: var(--ogf-mobile-h);
    padding: var(--ogf-mobile-stripe-h) 14px 0;
    background: var(--ogf-red);
    overflow: hidden;
}

.ogf-mobile-bar::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ogf-mobile-stripe-h);
    background-color: var(--ogf-red);
    background-image: linear-gradient(
        90deg,
        var(--ogf-red) 0,
        var(--ogf-red) var(--ogf-mobile-stripe-gap),
        var(--ogf-stripe) var(--ogf-mobile-stripe-gap),
        var(--ogf-stripe) 100%
    );
    background-size: calc(var(--ogf-mobile-stripe-gap) + var(--ogf-mobile-stripe-w)) 100%;
    background-position-x: var(--ogf-mobile-stripe-offset);
    background-repeat: repeat-x;
    pointer-events: none;
}

/* Exact olympiacos.org mobile rhythm. The supplied phone reference has seven
 * complete red pillars and eight equal white bands (white at both viewport
 * edges). The cycle is calculated from the configured pillar count, so the
 * number and phase stay identical on 360/390/412/430px phones instead of a
 * fixed-pixel pattern showing fewer stripes on narrower screens. Desktop stripe
 * geometry is intentionally untouched. */
.ogf-exact-header.ogf-mobile-reference-stripes .ogf-mobile-bar::before {
    background-color: var(--ogf-stripe);
    background-image: linear-gradient(
        90deg,
        var(--ogf-stripe) 0,
        var(--ogf-stripe) 50%,
        var(--ogf-red) 50%,
        var(--ogf-red) 100%
    );
    background-size: var(--ogf-mobile-stripe-cycle) 100%;
    background-position: left top;
    background-repeat: repeat-x;
}

.ogf-mobile-brand {
    position: absolute;
    z-index: 2;
    top: var(--ogf-mobile-stripe-h);
    bottom: 0;
    left: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 118px);
    transform: translateX(-50%);
    min-width: 0;
}

.ogf-mobile-brand img {
    display: block;
    width: auto;
    max-width: min(var(--ogf-mobile-logo-w), calc(100vw - 126px));
    max-height: calc(var(--ogf-mobile-h) - var(--ogf-mobile-stripe-h) - 8px);
    object-fit: contain;
}

/* The supplied lockup contains its own red field. A measured cover-crop reproduces
 * the narrower mobile mark in the recording without needing another asset. */
.ogf-exact-header.ogf-bundled-logo .ogf-mobile-brand {
    width: min(var(--ogf-mobile-logo-w), calc(100vw - 110px));
    height: var(--ogf-mobile-logo-crop-h);
    max-width: none;
}

.ogf-exact-header.ogf-bundled-logo .ogf-mobile-brand img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

.ogf-mobile-brand span {
    color: var(--ogf-text);
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
}

.ogf-mobile-toggle {
    position: relative;
    z-index: 4;
    display: inline-flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.ogf-mobile-toggle span {
    position: absolute;
    left: 8px;
    width: 24px;
    height: 2px;
    border-radius: 99px;
    background: var(--ogf-text);
    transition: transform var(--ogf-anim) ease, top var(--ogf-anim) ease, opacity var(--ogf-anim) ease;
}

.ogf-mobile-toggle span:nth-child(1) { top: 12px; }
.ogf-mobile-toggle span:nth-child(2) { top: 19px; }
.ogf-mobile-toggle span:nth-child(3) { top: 26px; }

.ogf-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
    top: 19px;
    transform: rotate(45deg);
}
.ogf-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ogf-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
    top: 19px;
    transform: rotate(-45deg);
}

.ogf-mobile-toggle[aria-expanded="true"] {
    z-index: 1000000;
}

.ogf-mobile-toggle[aria-expanded="true"] span {
    width: 28px;
    left: 6px;
    height: 2.5px;
    background: #fff !important;
    opacity: 1;
}

.ogf-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.ogf-mobile-menu {
    position: fixed;
    z-index: 999999;
    top: var(--ogf-adminbar-h, 0px);
    left: 0;
    width: min(var(--ogf-mobile-drawer-w), calc(100vw - 64px));
    height: calc(100vh - var(--ogf-adminbar-h, 0px));
    height: calc(100dvh - var(--ogf-adminbar-h, 0px));
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ogf-red);
    color: var(--ogf-text);
    font-family: var(--ogf-font);
    font-weight: var(--ogf-font-weight);
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-100%, 0, 0);
    transition:
        transform var(--ogf-anim) cubic-bezier(.2, .75, .2, 1),
        visibility 0s linear var(--ogf-anim);
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    contain: paint;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.12);
}

.ogf-mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

/* Always-visible mobile drawer close control.
 * This lives inside the portalled drawer itself, so it cannot disappear behind
 * Avada wrappers, header transforms, or off-canvas page shifting. */
.ogf-mobile-menu-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 56px;
    padding: 4px 8px;
    background: var(--ogf-red);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.ogf-mobile-menu .ogf-mobile-close {
    position: relative;
    z-index: 21;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
}

.ogf-mobile-menu .ogf-mobile-close span {
    position: absolute;
    left: 10px;
    top: 22px;
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 99px;
    background: #fff !important;
    opacity: 1 !important;
    transform-origin: center;
    pointer-events: none;
}

.ogf-mobile-menu .ogf-mobile-close span:first-child {
    transform: rotate(45deg);
}

.ogf-mobile-menu .ogf-mobile-close span:last-child {
    transform: rotate(-45deg);
}

.ogf-mobile-menu .ogf-mobile-close:hover,
.ogf-mobile-menu .ogf-mobile-close:focus,
.ogf-mobile-menu .ogf-mobile-close:focus-visible {
    background: rgba(0, 0, 0, 0.12) !important;
    color: #fff !important;
}

.ogf-mobile-menu .ogf-mobile-close:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: -5px;
}

html.ogf-offcanvas-open,
body.ogf-offcanvas-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.ogf-offcanvas-shift-target {
    transition: transform var(--ogf-shift-duration, 0ms) cubic-bezier(.2, .75, .2, 1) !important;
}

.ogf-offcanvas-shift-target.ogf-offcanvas-shift {
    will-change: transform;
    transform: translate3d(var(--ogf-active-drawer-width, 284px), 0, 0) !important;
}

/* Avada Header Layout Sections can live outside #wrapper. In that topology the
 * page wrapper shifts but the header does not, leaving the hamburger underneath
 * the drawer and making the close X appear to be missing. JS applies this class
 * only when the selected page shift target does not contain the header. The
 * exposed part of the header then moves by the same drawer width, matching the
 * reference mobile behavior and keeping the transformed X visible. */
.ogf-exact-header.ogf-mobile-header-shift {
    will-change: transform;
    transform: translate3d(var(--ogf-active-drawer-width, 284px), 0, 0) !important;
    transition: transform var(--ogf-shift-duration, 150ms) cubic-bezier(.2, .75, .2, 1) !important;
}

.ogf-mobile-nav {
    display: block;
}

.ogf-mobile-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.ogf-mobile-item-head {
    display: flex;
    align-items: stretch;
    min-height: var(--ogf-mobile-row-h);
}

.ogf-mobile-item-head > a {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    padding: 0 10px !important;
    color: var(--ogf-text) !important;
    font-size: var(--ogf-mobile-nav-size) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-transform: uppercase;
}

.ogf-mobile-accordion-toggle {
    position: relative;
    width: 38px;
    flex: 0 0 38px;
    border: 0;
    background: transparent;
    color: var(--ogf-text);
    cursor: pointer;
}

.ogf-mobile-accordion-toggle span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translate(-50%, -65%) rotate(45deg);
    transition: transform var(--ogf-anim) ease;
}

.ogf-mobile-accordion-toggle[aria-expanded="true"] span::before {
    transform: translate(-50%, -30%) rotate(225deg);
}

.ogf-mobile-submenu {
    padding: 4px 10px 10px;
    background: rgba(0, 0, 0, 0.035);
}

.ogf-mobile-column {
    padding: 9px 0 1px;
}

.ogf-mobile-column + .ogf-mobile-column {
    margin-top: 6px;
}

.ogf-mobile-column h3 {
    display: inline-block;
    margin: 0 0 5px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--ogf-text) !important;
    font-family: var(--ogf-font) !important;
    font-size: var(--ogf-mobile-sub-size) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-transform: uppercase;
}

.ogf-mobile-column li + li {
    margin-top: 2px !important;
}

.ogf-mobile-column a {
    display: block !important;
    padding: 1px 0 !important;
    color: var(--ogf-text) !important;
    font-family: var(--ogf-font) !important;
    font-size: var(--ogf-mobile-sub-size) !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
}

.ogf-social-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.ogf-social-mobile .ogf-social-link {
    width: var(--ogf-mobile-social-size);
    height: var(--ogf-mobile-social-size);
    min-width: var(--ogf-mobile-social-size);
}

.ogf-exact-header.ogf-is-mobile .ogf-desktop-shell {
    display: none !important;
}

.ogf-exact-header.ogf-is-mobile .ogf-mobile-shell {
    display: block !important;
}

.ogf-exact-header.ogf-is-desktop .ogf-desktop-shell {
    display: block !important;
}

.ogf-exact-header.ogf-is-desktop .ogf-mobile-shell {
    display: none !important;
}

@media (max-width: 980px) {
    .ogf-desktop-shell { display: none; }
    .ogf-mobile-shell { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .ogf-exact-header *,
    .ogf-exact-header *::before,
    .ogf-exact-header *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}

/* Native WordPress menu source: preserve heading typography when a Level-2 item is clickable. */
.ogf-exact-header .ogf-mega-column h3 > .ogf-mega-heading-link,
.ogf-exact-header .ogf-mobile-column h3 > a {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: inherit !important;
    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
    text-transform: inherit !important;
}

.ogf-exact-header .ogf-mega-column h3 > .ogf-mega-heading-link:hover,
.ogf-exact-header .ogf-mega-column h3 > .ogf-mega-heading-link:focus-visible,
.ogf-exact-header .ogf-mobile-column h3 > a:hover,
.ogf-exact-header .ogf-mobile-column h3 > a:focus-visible {
    color: inherit !important;
    text-decoration: none !important;
}