/* =========================================================================================
   Guest chrome — shared header/footer stylesheet (2026-08-13 header/footer unification pass)

   ONE stylesheet loaded on EVERY guest-facing surface in this install:
     - Smarty client area (homepage/login/register): linked from
       templates/vercaa-2026/includes/head.tpl, right after custom.css.
     - Standalone plain-PHP marketing pages (market/*.php, all 9): linked from market/_header.php.

   This is almost entirely the same ruleset that used to live only in custom.css's "Guest nav"
   block (added 2026-08-13, the original header redesign) plus the "Footer modernization" rules
   (also custom.css) — MOVED here, not duplicated, so the header/footer markup emitted by the new
   shared PHP renderer (templates/vercaa-2026/includes/shared-guest-chrome.php) has exactly one
   real stylesheet behind it in both contexts. custom.css still carries pointer comments at both
   old locations. See HANDOFF/report for the full rationale.

   TOKEN COMPATIBILITY: every var() below uses the WHMCS "app" token names (--primary, --text,
   --bg, --border-muted, --elevation-*, etc.) already defined in custom.css's :root. Those same
   names are now ALSO defined in market/_tokens.css (as aliases to the identical, already-brand-
   sampled --mc-* values, plus a real :root[data-theme="dark"] block) specifically so this one
   file resolves to the correct real value in either context — see that file's own docblock.
   No new hex literal is introduced anywhere in this file.
   ========================================================================================= */

/* -- Accessibility utility (Bootstrap's own .sr-only, reproduced here because market pages don't
   load Bootstrap CSS at all — needed for the cart link's "View Cart" screen-reader-only label). */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

header.header.guest-nav-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--border-muted);
    transition: box-shadow var(--duration-slow) var(--ease-standard);
}
header.header.guest-nav-header.guest-nav-header-scrolled { box-shadow: var(--elevation-2); }

.guest-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    height: 4.75rem;
    padding: 0 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.guest-nav-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: 0.5rem; }
.guest-nav-logo-img { height: 28px; width: auto; max-width: none; }
.guest-nav-logo-img-dark { display: none; }
:root[data-theme="dark"] .guest-nav-logo-img-light { display: none; }
:root[data-theme="dark"] .guest-nav-logo-img-dark { display: inline-block; }

/* -- Primary links + mega-menus (Hosting / Services) ------------------------------------- */
.guest-nav-links { display: flex; align-items: center; gap: 0.2rem; flex: 1 1 auto; min-width: 0; }

.guest-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    border: 0;
    background: transparent;
    border-radius: var(--rounding-md);
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-accented);
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.guest-nav-link:hover,
.guest-nav-link:focus-visible { background: var(--bg-muted); color: var(--text); }
.guest-nav-link-active,
.guest-nav-link[aria-current="page"] { color: var(--primary-accented); }
.guest-nav-mega-trigger[aria-expanded="true"] { background: var(--bg-muted); color: var(--text); }
.guest-nav-mega-chevron { width: 14px; height: 14px; transition: transform var(--duration-fast) var(--ease-out); }
.guest-nav-mega-trigger[aria-expanded="true"] .guest-nav-mega-chevron { transform: rotate(180deg); }

.guest-nav-mega { position: relative; }
/* 2026-08-13 motion pass — hosting.com-inspired timing (their real shipped dropdown: a 300ms
   ease-in-out transition on the hover-state change, z-index bumped on the open wrapper so the
   panel always stacks cleanly above page content). Adapted to Vercaa's own click-toggled ".show"
   state and brand tokens rather than copying their trigger mechanism or literal CSS: --duration-slow
   is this theme's own 300ms step and --ease-standard (cubic-bezier(0.4,0,0.2,1)) is its own
   enter-and-settle curve, already used for other "surface arrives/leaves" motion in custom.css
   (header shadow, sidebar width) — so the mega-menu now shares the exact same rhythm as the rest
   of the shell instead of inventing a one-off number.
   display stays "block" permanently (no more display:none swap) specifically so BOTH open and
   close can transition — the old display:none<->block swap could only ever animate the entrance
   (a forwards-filling @keyframes on .show) and always hard-cut on exit the instant Bootstrap's
   dropdown.js removed the class, which is the exact "instant snap" this pass fixes. Hiding is now
   opacity+visibility+pointer-events, which transitions cleanly in both directions and is immune to
   Bootstrap4's Popper.js (loaded for this dropdown, confirmed in scripts.min.js) writing its own
   inline `transform`/position styles for placement — this rule only ever animates opacity/
   visibility, never transform/position, so there is nothing for Popper's inline styles to fight.
   The entrance's translateY+scale still rides a `forwards` CSS *animation* (not a transition) on
   purpose: per spec a running/filled animation's value for an animated property outranks any
   inline style for as long as it's in effect, which is what already let the previous version's
   entrance transform coexist safely with Popper — same proven mechanism, just re-timed. Self-
   sufficient without Bootstrap's compiled .dropdown-menu rule (market pages load no Bootstrap CSS
   at all). Scoped to this one component class only, so it can never affect any other
   .dropdown-menu elsewhere in the WHMCS client area. */
/* 2026-08-25 mega-menu redesign (direct user request: "must be very innovative... currently
   looks outdated"). Was a flat white box, plain 1px border, generic elevation-3 shadow — visually
   disconnected from the glass/glow language the rest of the site now uses (vpn.php's device card,
   the homepage hero's search panel). Redesigned as a genuine glass panel: backdrop blur, a soft
   primary-tinted border/glow instead of a flat neutral one, a thin gradient accent hairline across
   the top, and a small connecting "notch" pointing back at the trigger so the panel reads as
   physically attached to it rather than a floating rectangle. Entrance motion switched from a
   flat fade+scale to a slightly springier settle (see guestNavMegaIn below) for a more "arrived
   with intent" feel matching hover-open being instantaneous now. */
.guest-nav-mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top left;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border-muted));
    border-radius: var(--rounding-2xl);
    box-shadow: var(--elevation-4), 0 0 0 1px color-mix(in srgb, var(--primary) 5%, transparent);
    padding: 0.9rem;
    margin-top: 0.85rem;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    min-width: 560px;
    overflow: hidden;
    transition: opacity var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
}
/* Top accent hairline — a thin brand-gradient strip, echoing the "colored line under a section"
   pattern the market pages' own feature cards already use (.hlp-feature-line), just horizontal
   across the panel's own top edge instead of under one card. */
.guest-nav-mega-panel::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 40%, var(--success)), transparent);
}
/* Connecting notch — a small rotated square clipped by the panel's own overflow:hidden, positioned
   under the trigger so the panel reads as attached rather than a disconnected floating box. Only
   the Hosting trigger sits far enough from the panel's left edge for this to land correctly under
   BOTH triggers without per-menu positioning, since both open flush-left. */
.guest-nav-mega-panel::after {
    content: ""; position: absolute; top: -7px; left: 1.35rem; width: 14px; height: 14px;
    background: var(--bg); border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border-muted));
    border-right: none; border-bottom: none; border-radius: 3px 0 0 0;
    transform: rotate(45deg);
}
@keyframes guestNavMegaIn {
    0% { opacity: 0; transform: translateY(-6px) scale(0.97); }
    60% { opacity: 1; transform: translateY(1px) scale(1.005); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.guest-nav-mega-panel.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: guestNavMegaIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: opacity var(--duration-slow) var(--ease-standard), visibility 0s linear 0s;
}
/* Ancestor z-index bump while open — the direct Vercaa-tokens equivalent of hosting.com's own
   `.parent:has(.desktop-header-nav:hover){ z-index:100 }` wrapper bump. */
.guest-nav-mega:has(.guest-nav-mega-panel.show) { z-index: 1001; }
@media (prefers-reduced-motion: reduce) {
    .guest-nav-mega-panel { transition-duration: 1ms; }
    .guest-nav-mega-panel.show { animation: none; transform: none; transition-duration: 1ms; }
}

.guest-nav-mega-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 0.15rem; position: relative; z-index: 1; }
.guest-nav-mega-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    border-radius: var(--rounding-lg);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}
/* Left accent bar that grows in on hover/focus, instead of the old translateX(2px) slide — reads
   as "this row is highlighted" more deliberately, matching the accent-line language established
   elsewhere on the site (feature-card underlines, active sidebar items). */
.guest-nav-mega-item::before {
    content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px;
    border-radius: 999px; background: var(--primary); transform: scaleY(0); transform-origin: center;
    transition: transform var(--duration-fast) var(--ease-out);
}
.guest-nav-mega-item:hover,
.guest-nav-mega-item:focus-visible { background: var(--bg-muted); }
.guest-nav-mega-item:hover::before,
.guest-nav-mega-item:focus-visible::before { transform: scaleY(1); }
.guest-nav-mega-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--rounding-md);
    background: var(--primary-soft);
    color: var(--primary-accented);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.guest-nav-mega-item:hover .guest-nav-mega-icon,
.guest-nav-mega-item:focus-visible .guest-nav-mega-icon {
    transform: scale(1.08);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
}
.guest-nav-mega-icon svg { width: 20px; height: 20px; }
.guest-nav-mega-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.guest-nav-mega-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-md); color: var(--text); }
.guest-nav-mega-desc { font-size: var(--text-sm); color: var(--text-accented); line-height: 1.3; }

/* "Coming soon" pill — Cloud/WordPress/Managed WordPress Hosting mega items only (no real product
   configured on this install yet, see shared-guest-chrome.php's own docblock). Uses --warning
   (Vercaa Orange) so it visually reads as "not orderable yet" without implying an error. */
.guest-nav-mega-soon {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--warning-soft);
    color: var(--warning-accented);
    white-space: nowrap;
}

/* -- Knowledgebase search (real form: POST / name="search") ------------------------------ */
.guest-nav-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-muted);
    border: 1px solid var(--border-muted);
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    width: 190px;
    margin-left: 0.25rem;
    flex-shrink: 1;
    min-width: 120px;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), width var(--duration-slow) var(--ease-standard);
}
.guest-nav-search:focus-within {
    border-color: var(--primary);
    background: var(--bg);
    width: 230px;
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.guest-nav-search-icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.guest-nav-search-input {
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text);
    width: 100%;
    min-width: 0;
}
/* 2026-08-25: same bug class custom.css's .app-domain-upsell-input already documents and fixes --
   the sitewide global input:focus-visible box-shadow ring (custom.css's --focus-ring token,
   `0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring-color)`) is square-cornered by construction
   (the bare <input> has no border-radius of its own), so it rendered as a hard rectangle poking
   out past this field's fully rounded (border-radius:999px) pill wrapper -- confirmed live via
   getComputedStyle, the exact same visual mismatch that fix already describes. The WRAPPER
   (.guest-nav-search:focus-within, above) already gives this field its own correctly-rounded ring
   in the site's own brand purple -- this just suppresses the mismatched extra one on the bare
   input so only that one shows. */
.guest-nav-search-input:focus,
.guest-nav-search-input:focus-visible { outline: none; box-shadow: none; }
.guest-nav-search-input::placeholder { color: var(--text-muted); }

/* -- Right-hand action cluster ------------------------------------------------------------ */
.guest-nav-actions { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; flex-shrink: 0; }

.guest-nav-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--text-accented);
    flex-shrink: 0;
    transition: background-color var(--duration-slow) var(--ease-standard), color var(--duration-slow) var(--ease-standard), transform var(--duration-fast) var(--ease-out);
}
.guest-nav-icon-btn:hover { background: var(--bg-muted); color: var(--text); transform: translateY(-1px); }
.guest-nav-icon-btn:active { transform: translateY(0) scale(0.94); }
.guest-nav-icon-svg { width: 22px; height: 22px; }

/* Theme-toggle icon show/hide (2026-08-13 icon pass fix) — this exact rule already lives in
   custom.css (app-shell's own theme toggle uses the same two class names), but custom.css is NOT
   loaded on the market-page context at all (that context only links _tokens.css/_chrome.css/this
   file — see this file's own header docblock), so the guest theme-toggle button there had no rule
   hiding either icon and was silently rendering the moon AND the sun stacked together in every
   theme, a pre-existing bug surfaced while redrawing these exact icons. Duplicating the same
   logic here (not a new value — verbatim to custom.css) makes both contexts correct from the one
   real stylesheet each of them actually reads; harmless redundancy on the Smarty side, not a
   conflict, since both copies say the same thing. */
.app-theme-icon-light { display: none; }
:root[data-theme="dark"] .app-theme-icon-dark { display: none; }
:root[data-theme="dark"] .app-theme-icon-light { display: inline; }

.guest-nav-icon-btn.cart-btn .badge-pill {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--secondary);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--bg), 0 2px 5px -1px color-mix(in srgb, var(--secondary) 55%, transparent);
}
/* 2026-08-14 dark-mode contrast fix: same white-on-#f97316 (2.8:1) fail as .app-icon-badge in
   custom.css (this is the guest header's own cart-count badge — the logged-in header's equivalent
   component). Identical fix: swap text to var(--text-inverted) (#14121c in dark mode, 6.61:1 on
   #f97316) rather than the fill, for the same --secondary-accented-is-already-aliased-elsewhere
   reason documented on that other fix. */
:root[data-theme="dark"] .guest-nav-icon-btn.cart-btn .badge-pill { color: var(--text-inverted); }

.guest-nav-cluster { display: flex; align-items: center; gap: 0.75rem; margin-left: 0.25rem; }
.guest-nav-loginlink {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    padding: 0.5rem 0.4rem;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out);
}
.guest-nav-loginlink:hover { color: var(--primary); }

.guest-nav-cta {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 700;
    color: #fff;
    /* 2026-08-25 light-mode contrast fix (DEFERRED.md §11.2), same fix/reasoning as .btn-primary
       in custom.css: resting-state white text on raw --primary was 4.36:1, fails WCAG AA. Moved to
       --primary-lifted (5.99:1) -- the exact value the dark-mode override further down already
       uses for the same reason, now unified across both themes at rest. :hover/:active below were
       already safe (--primary-lifted/--primary-accented respectively). */
    background: var(--primary-lifted);
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--primary) 50%, transparent);
    transition: background-color var(--duration-slow) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.guest-nav-cta:hover {
    background: var(--primary-lifted);
    box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--primary) 55%, transparent);
    transform: translateY(-1px);
    color: #fff;
}
.guest-nav-cta:active { background: var(--primary-accented); transform: translateY(0); }
/* 2026-08-14 dark-mode contrast fix: resting-state white text on raw --primary is only 4.36:1 (this
   is the site's own header "Client Area" button, visible on every guest page). The :active state is
   worse still in dark mode specifically — --primary-accented now resolves to the new bright
   --primary-glow (custom.css) for its real, correct role (text-on-dark), which as a background under
   white text drops to ~3.5:1. Both pinned to --primary-lifted (white text: 5.99:1), matching
   .btn-primary's identical fix in custom.css. */
:root[data-theme="dark"] .guest-nav-cta,
:root[data-theme="dark"] .guest-nav-cta:active {
    background: var(--primary-lifted);
}

.guest-nav-mobile-toggle {
    position: relative;
    display: none;
    border: 0;
    background: transparent;
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: var(--rounding-md);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.guest-nav-mobile-toggle:hover { background: var(--bg-muted); }
/* Hamburger <-> close morph (2026-08-13 motion pass) — two stacked SVGs cross-faded with a
   rotate+scale via the button's own "aria-expanded" attribute, which guest-chrome.js and
   app-shell.js already flip on every open/close (no JS change needed at all). Same considered
   ~200ms/ease-standard rhythm as the mega-menu, just shorter since this is a small icon-only move
   rather than a whole panel arriving. */
.guest-nav-hamburger-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.guest-nav-hamburger-close {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.5);
}
.guest-nav-mobile-toggle[aria-expanded="true"] .guest-nav-hamburger-open {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.5);
}
.guest-nav-mobile-toggle[aria-expanded="true"] .guest-nav-hamburger-close {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .guest-nav-hamburger-icon { transition-duration: 1ms; }
}

/* -- Mobile off-canvas drawer -------------------------------------------------------------- */
.guest-nav-drawer-root {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1041;
}
.guest-nav-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) ease-in-out;
}
.guest-nav-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 86vw);
    background: var(--bg);
    border-left: 1px solid var(--border-muted);
    box-shadow: var(--elevation-4);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--duration-drawer-close) ease-in-out;
}
.guest-nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border-muted);
    flex-shrink: 0;
}
.guest-nav-drawer-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); color: var(--text); }
.guest-nav-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text-accented);
    border-radius: 999px;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.guest-nav-drawer-close:hover { background: var(--bg-muted); }
.guest-nav-drawer-close svg { width: 20px; height: 20px; }
.guest-nav-drawer-inner { padding: 1.1rem 1.25rem 2rem; display: flex; flex-direction: column; gap: 0.35rem; }

.guest-nav-drawer-search,
.guest-nav-drawer-link,
.guest-nav-drawer-toggle {
    width: 100%;
}
.guest-nav-drawer-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-muted);
    border: 1px solid var(--border-muted);
    border-radius: 999px;
    padding: 0.65rem 1rem;
    margin-bottom: 0.5rem;
}
.guest-nav-drawer-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.guest-nav-drawer-search .guest-nav-search-input { font-size: var(--text-md); }

.guest-nav-drawer-link,
.guest-nav-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0.5rem;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
    border-radius: var(--rounding-md);
    text-align: left;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.guest-nav-drawer-link:hover,
.guest-nav-drawer-toggle:hover { background: var(--bg-muted); }
.guest-nav-drawer-chevron { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-out); }
.guest-nav-drawer-toggle[aria-expanded="true"] .guest-nav-drawer-chevron { transform: rotate(180deg); }

/* 2026-08-13 motion pass — a touch of hosting.com's own mobile-nav "directional, level-aware"
   feel without restructuring this accordion's existing flat markup: the group itself still grows
   on a smooth max-height/opacity transition (now the same --duration-slow/--ease-standard rhythm
   as the rest of this pass), and each real link inside it now slides in from the left with a
   short per-item stagger (30ms/item, matching the exit-faster-than-enter + stagger-sequence
   guidance) so opening a group reads as items arriving in sequence rather than a single flat
   block appearing — a considered approximation of a real slide panel using zero extra DOM. */
.guest-nav-drawer-sublist {
    display: flex;
    flex-direction: column;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--duration-slow) var(--ease-standard), opacity var(--duration-fast) var(--ease-out);
}
.guest-nav-drawer-sublist.guest-nav-drawer-sublist-open { max-height: 24rem; opacity: 1; }
.guest-nav-drawer-sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.5rem 0.65rem 1.5rem;
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-accented);
    border-radius: var(--rounding-md);
    opacity: 0;
    transform: translateX(-10px);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.guest-nav-drawer-sublink:hover { background: var(--bg-muted); color: var(--text); }
.guest-nav-drawer-sublist-open .guest-nav-drawer-sublink { opacity: 1; transform: translateX(0); }
.guest-nav-drawer-sublist-open .guest-nav-drawer-sublink:nth-child(1) { transition-delay: 0.02s; }
.guest-nav-drawer-sublist-open .guest-nav-drawer-sublink:nth-child(2) { transition-delay: 0.05s; }
.guest-nav-drawer-sublist-open .guest-nav-drawer-sublink:nth-child(3) { transition-delay: 0.08s; }
.guest-nav-drawer-sublist-open .guest-nav-drawer-sublink:nth-child(4) { transition-delay: 0.11s; }
.guest-nav-drawer-sublist-open .guest-nav-drawer-sublink:nth-child(5) { transition-delay: 0.14s; }
.guest-nav-drawer-sublist-open .guest-nav-drawer-sublink:nth-child(6) { transition-delay: 0.17s; }
.guest-nav-drawer-sublist-open .guest-nav-drawer-sublink:nth-child(7) { transition-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
    .guest-nav-drawer-sublist,
    .guest-nav-drawer-sublink { transition-duration: 1ms; transition-delay: 0s; }
}

.guest-nav-drawer-divider { height: 1px; background: var(--border-muted); margin: 0.6rem 0; flex-shrink: 0; }

.guest-nav-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.4rem;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 700;
    color: #fff;
    background: var(--primary);
    padding: 0.85rem 1rem;
    border-radius: 999px;
    transition: background-color var(--duration-slow) var(--ease-standard), transform var(--duration-fast) var(--ease-out);
}
.guest-nav-drawer-cta:hover { background: var(--primary-lifted); color: #fff; }
.guest-nav-drawer-cta:active { transform: scale(0.98); }
/* 2026-08-14 dark-mode contrast fix: same resting-state white-on-raw-#a83fff fail (4.36:1) as
   .guest-nav-cta above (the mobile drawer's version of the same CTA). */
:root[data-theme="dark"] .guest-nav-drawer-cta { background: var(--primary-lifted); }

body.guest-nav-drawer-open { overflow: hidden; }
body.guest-nav-drawer-open .guest-nav-backdrop { display: block; opacity: 1; pointer-events: auto; }
body.guest-nav-drawer-open .guest-nav-drawer {
    transform: translateX(0);
    transition: transform var(--duration-drawer-open) ease-in-out;
}

@media (max-width: 900px) {
    .guest-nav-inner { height: 4.25rem; padding: 0 1.1rem; gap: 0.5rem; }
    .guest-nav-links,
    .guest-nav-cluster { display: none; }
    .guest-nav-mobile-toggle { display: inline-flex; }
}

/* =========================================================================================
   Footer — real multi-column footer (2026-08-14 footer rebuild), shared identically everywhere
   (Smarty client area's footer.tpl + every market/*.php page via market/_footer.php — same real
   vercaa_render_guest_footer() markup, see shared-guest-chrome.php).

   REPLACES the earlier copyright-only footer (2026-08-12/13 unification pass) per direct user
   feedback ("there is no footer, in the footer") -- that pass's own market-page footer (3 link
   columns + social) was retired at a point when the site had only a handful of pages; the site
   has since grown to ~20 real pages, so a real footer earns its place back. No social icons are
   reintroduced (no real social accounts are configured on this install -- would be fabricated
   links), but 5 genuine link columns are: brand mark, Hosting, Domains & Services, Company, Legal.
   Same flat surface + fading top hairline the old footer used; the real copyright line moves into
   its own bottom bar below the link grid instead of being the whole footer.
   ========================================================================================= */
footer.footer {
    position: relative;
    background-color: var(--bg-muted);
    color: var(--text);
    font-size: var(--text-md);
}
footer.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, 92%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-lifted), transparent);
}
footer.footer .guest-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.75rem; }

.guest-footer-top {
    display: grid;
    grid-template-columns: minmax(150px, 1.1fr) repeat(4, minmax(130px, 1fr));
    gap: 2.5rem 1.5rem;
    padding: 3rem 0 2.25rem;
    text-align: left;
}

.guest-footer-col-brand { display: flex; flex-direction: column; }
.guest-footer-logo { display: inline-flex; align-self: flex-start; }
.guest-footer-logo-img { height: 26px; width: auto; max-width: none; }

.guest-footer-heading {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-lifted);
    margin: 0 0 1rem;
}

.guest-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.guest-footer-links a {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: var(--text-md);
    color: var(--text-accented);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
.guest-footer-links a:hover { color: var(--primary-accented); }
.guest-footer-links a:focus-visible {
    color: var(--primary-accented);
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 3px;
    border-radius: 4px;
}
.guest-footer-links a .guest-nav-mega-soon { font-size: 0.6rem; padding: 0.1rem 0.4rem; }

.guest-footer-bottom {
    border-top: 1px solid var(--border-muted);
    padding: 1.5rem 0;
    text-align: center;
}
footer.footer .copyright { margin: 0; color: var(--text-lifted); letter-spacing: 0.01em; }

@media (max-width: 900px) {
    .guest-footer-top { grid-template-columns: repeat(2, 1fr); }
    .guest-footer-col-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .guest-footer-top { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 0 2rem; }
    .guest-footer-col-brand { grid-column: auto; }
}