/* i2t3 Floating section navigation (onepager).
 * A fixed, dark rounded pill on the right edge holding one dot per section.
 * Hovering a dot reveals its name as a popup label to the left; the burger
 * toggle expands the pill into a text menu (and, if enabled, lists the footer
 * menu). Rendered by Partials/Frontend/FloatingNav.html, variant controlled by
 * settings.navigation.floatingNav (dots-labels | dots | labels). Active state
 * (.is-active on a link) is toggled by floating-nav.js.
 */

.i2t3-floating-nav {
    position: fixed;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    z-index: 1030;
    display: none;
    padding: 0.85rem 0.7rem;
    background: rgba(20, 22, 26, 0.82);
    border-radius: 2rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.i2t3-floating-nav.is-active {
    display: block;
}

/* Hide on small screens — the regular header/burger nav takes over there.
 * Exception: when the floating nav IS the main navigation (no header -> the
 * template adds --mobile), keep it as a compact burger. The dot list collapses
 * so only the icon shows; tapping the burger opens the full-screen overlay
 * (which shows the list again). */
@media (max-width: 767.98px) {
    .i2t3-floating-nav { display: none !important; }
    .i2t3-floating-nav--mobile.is-active { display: block !important; }
    .i2t3-floating-nav--mobile .i2t3-floating-nav__list { display: none; }
    .i2t3-floating-nav--mobile:not(.is-expanded) .i2t3-floating-nav__toggle { margin-top: 0; }
    .i2t3-floating-nav--mobile.is-expanded .i2t3-floating-nav__list { display: flex; }
}

.i2t3-floating-nav__list,
.i2t3-floating-nav__extra {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.i2t3-floating-nav__list { gap: 0.7rem; }
.i2t3-floating-nav__item { margin: 0; }

/* A link is the row; position:relative so its label can pop out to the left
 * without taking layout space (which is what kept the dots from aligning). */
.i2t3-floating-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}

/* The dot */
.i2t3-floating-nav__dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.i2t3-floating-nav__link:hover .i2t3-floating-nav__dot,
.i2t3-floating-nav__link:focus-visible .i2t3-floating-nav__dot {
    border-color: #fff;
}

.i2t3-floating-nav__link.is-active .i2t3-floating-nav__dot {
    background: var(--i2t3-primary, #d8451f);
    border-color: var(--i2t3-primary, #d8451f);
    transform: scale(1.2);
}

/* The label — absolute popup to the LEFT of the dot. Out of flow, so every
 * dot stays on the same vertical line regardless of label length. */
.i2t3-floating-nav__label {
    position: absolute;
    right: 100%;
    top: 50%;
    margin-right: 0.6rem;
    transform: translateY(-50%) translateX(0.4rem);
    white-space: nowrap;
    font-family: var(--i2t3-font-body, inherit);
    font-size: 0.85rem;
    line-height: 1.2;
    padding: 0.3rem 0.6rem;
    border-radius: 0.35rem;
    background: var(--i2t3-background, #fff);
    color: var(--i2t3-text, #1d2228);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ---- Variant: dots + labels on hover/focus (default, hankel-style) ---- */
.i2t3-floating-nav--dots-labels .i2t3-floating-nav__link:hover .i2t3-floating-nav__label,
.i2t3-floating-nav--dots-labels .i2t3-floating-nav__link:focus-visible .i2t3-floating-nav__label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ---- Variant: dots only (labels stay for screen readers, never shown) ---- */
.i2t3-floating-nav--dots .i2t3-floating-nav__label { opacity: 0 !important; }
.i2t3-floating-nav--dots .i2t3-floating-nav__toggle { display: none; }

/* ---- Variant: labels always visible (permanent text menu) ---- */
.i2t3-floating-nav--labels .i2t3-floating-nav__link,
.i2t3-floating-nav.is-expanded .i2t3-floating-nav__link {
    justify-content: flex-start;
}
.i2t3-floating-nav--labels .i2t3-floating-nav__label,
.i2t3-floating-nav.is-expanded .i2t3-floating-nav__label {
    position: static;
    transform: none;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    color: #fff;
    box-shadow: none;
    padding: 0;
}
.i2t3-floating-nav--labels .i2t3-floating-nav__toggle { display: none; }

/* ---- Footer links inside the expanded popup ---- */
.i2t3-floating-nav__extra {
    gap: 0.5rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: none;
}
.i2t3-floating-nav.is-expanded .i2t3-floating-nav__extra { display: flex; }

/* Plain (dot-less) link: align its text with the dotted rows above. */
.i2t3-floating-nav__link--plain {
    justify-content: flex-start;
    padding-left: calc(12px + 0.55rem);
}
.i2t3-floating-nav__link--plain .i2t3-floating-nav__label {
    position: static;
    transform: none;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
    padding: 0;
    font-size: 0.8rem;
}

/* ---- Burger toggle ---- */
.i2t3-floating-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.75rem auto 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--i2t3-primary, #d8451f);
    cursor: pointer;
}

.i2t3-floating-nav__toggle-bar,
.i2t3-floating-nav__toggle-bar::before,
.i2t3-floating-nav__toggle-bar::after {
    display: block;
    width: 15px;
    height: 2px;
    background: #fff;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.i2t3-floating-nav__toggle-bar { position: relative; }

.i2t3-floating-nav__toggle-bar::before,
.i2t3-floating-nav__toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
}

.i2t3-floating-nav__toggle-bar::before { top: -5px; }
.i2t3-floating-nav__toggle-bar::after  { top: 5px; }

.i2t3-floating-nav.is-expanded .i2t3-floating-nav__toggle-bar { background: transparent; }
.i2t3-floating-nav.is-expanded .i2t3-floating-nav__toggle-bar::before { transform: translateY(5px) rotate(45deg); }
.i2t3-floating-nav.is-expanded .i2t3-floating-nav__toggle-bar::after  { transform: translateY(-5px) rotate(-45deg); }

/* ---- Vertical position (settings.navigation.floatingNavPosition) ----
 * middle = default (top:50% + translateY, see base rule). top/bottom dock near
 * the respective edge. */
.i2t3-floating-nav--pos-top {
    top: 1.5rem;
    transform: none;
}
.i2t3-floating-nav--pos-bottom {
    top: auto;
    bottom: 1.5rem;
    transform: none;
}

/* ---- Popup style: full-height overlay (settings.navigation.floatingNavPopup) ----
 * Collapsed it looks like the normal pill; once the burger is clicked it
 * becomes a full-height panel docked to the right with large names. */
.i2t3-floating-nav--popup-fullscreen.is-expanded {
    top: 0;
    bottom: 0;
    right: 0;
    transform: none;
    height: 100vh;
    height: 100dvh;
    width: min(420px, 100vw);
    max-width: 100vw;
    padding: 4rem 2.5rem;
    border-radius: 0;
    background: rgba(15, 17, 20, 0.96);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    overflow-y: auto;
}

.i2t3-floating-nav--popup-fullscreen.is-expanded .i2t3-floating-nav__list { gap: 1.4rem; }
/* Footer links: same row spacing as the main menu so the gaps match top to bottom. */
.i2t3-floating-nav--popup-fullscreen.is-expanded .i2t3-floating-nav__extra { gap: 1.4rem; }
.i2t3-floating-nav--popup-fullscreen.is-expanded .i2t3-floating-nav__dot { display: none; }
.i2t3-floating-nav--popup-fullscreen.is-expanded .i2t3-floating-nav__link { justify-content: flex-start; }

.i2t3-floating-nav--popup-fullscreen.is-expanded .i2t3-floating-nav__label {
    position: static;
    transform: none;
    margin: 0;
    padding: 0;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-family: var(--i2t3-font-heading, inherit);
    font-weight: 400;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    transition: color .15s ease;
}

/* Active item + hover in the fullscreen overlay: green, and NO transform — the
 * collapsed pill's hover rule would otherwise shift the big label and make it jump. */
.i2t3-floating-nav--popup-fullscreen.is-expanded .i2t3-floating-nav__link.is-active .i2t3-floating-nav__label,
.i2t3-floating-nav--popup-fullscreen.is-expanded .i2t3-floating-nav__link:hover .i2t3-floating-nav__label,
.i2t3-floating-nav--popup-fullscreen.is-expanded .i2t3-floating-nav__link:focus-visible .i2t3-floating-nav__label {
    transform: none;
    color: var(--i2t3-primary);
}

.i2t3-floating-nav--popup-fullscreen.is-expanded .i2t3-floating-nav__link--plain { padding-left: 0; }
/* Footer links match the section names in the full-height overlay (same size,
 * weight and colour); the divider above still groups them. */

/* Burger turns into a close (X) pinned to the top-right of the overlay. */
.i2t3-floating-nav--popup-fullscreen.is-expanded .i2t3-floating-nav__toggle {
    position: absolute;
    top: 1.5rem;
    right: 1.75rem;
    margin: 0;
    background: transparent;
}

/* ---- Home as a house icon (settings.navigation.floatingNavHome = house) ----
 * The first item renders a FontAwesome house instead of a dot. Reset the dot
 * box so only the glyph shows; colour it like the dots (muted → white → brand). */
.i2t3-floating-nav__dot--home {
    width: auto;
    height: 1.75rem;
    border: 0;
    background: transparent;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
}

.i2t3-floating-nav__dot--home svg {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
}

.i2t3-floating-nav__link:hover .i2t3-floating-nav__dot--home,
.i2t3-floating-nav__link:focus-visible .i2t3-floating-nav__dot--home {
    color: #fff;
}

/* Active home: tint the glyph (not a filled circle — override the generic dot). */
.i2t3-floating-nav__link.is-active .i2t3-floating-nav__dot--home {
    background: transparent;
    transform: none;
    color: var(--i2t3-primary, #d8451f);
}