/*
 * nr-site-polish — site-wide modernization layer.
 * Loads on every theme page (not just shortcode pages). Brings the
 * Latitude/Vultr aesthetic to the broader website chrome: typography,
 * links, generic buttons, forms, footer, mega menu.
 *
 * Conservative: targets generic selectors + scoped ones that don't
 * collide with Elementor's per-element overrides. Specificity stays
 * low so per-page Elementor styles still win where they exist.
 */

/* ── Typography: tighter modern sans, sharp letter-spacing ──────── */
body, p, li, td, th, input, select, textarea, button {
    font-family: var(--masterfont, "sofia-pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
    font-weight: 700;
    line-height: 1.15;
}
h1 { letter-spacing: -0.025em; line-height: 1.08; }
h2 { letter-spacing: -0.022em; line-height: 1.10; }

/* ── Links: clean modern underline rhythm in body copy ──────────── */
.entry-content a:not(.btn):not(.button):not(.elementor-button):not(.wp-block-button__link),
.post-content a:not(.btn):not(.button) {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(82, 167, 255, 0.55);
    transition: text-decoration-color 150ms ease-out, color 150ms ease-out;
}
.entry-content a:hover:not(.btn) { text-decoration-color: var(--secondary, #52a7ff); text-decoration-thickness: 2px; }

/* ── Generic buttons: sharper corners across the whole theme ────── */
button, .btn, .button, input[type="submit"], input[type="button"] {
    font-family: var(--masterfont, "sofia-pro", system-ui, sans-serif);
    transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary, .button-primary, .wp-block-button__link {
    /* Don't fight WP/Bootstrap colour, but sharpen the corners */
    border-radius: 6px !important;
}
/* Theme's existing pill buttons (signup CTAs etc.) — leave their
   pill shape alone; we only adjust hover behaviour to feel snappier. */
.btn:hover:not([disabled]),
.button:hover:not([disabled]),
input[type="submit"]:hover:not([disabled]) {
    transform: translateY(-1px);
    transition-duration: 150ms;
}

/* ── Form inputs: branded focus ring (matches our plan-grid look) ─ */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus,
.nice-select:focus {
    outline: none;
    border-color: var(--primary, #14bb60) !important;
    box-shadow: 0 0 0 3px rgba(20, 187, 96, 0.15) !important;
}

/* ── Site footer — keep the dark navy background but sharpen
       the corners on inner cards / sub-cards. Footer wraps every
       <footer> element on the page; the existing rule
       `footer { background:#051F38; padding:80px 0; color:white }`
       in main.css:681 is intentional for the page footer. We only
       tighten what's INSIDE the footer. */
footer h6, footer h5 {
    letter-spacing: -0.01em;
    font-weight: 700;
}
footer a {
    transition: color 150ms ease-out, opacity 150ms ease-out;
}
footer a:hover { color: var(--primary, #14bb60); opacity: 1; }

/* ── Selection color — brand-tinted */
::selection { background: rgba(20, 187, 96, 0.22); color: #0f1c2e; }

/* ── Modern focus rings for keyboard nav, brand-coloured ────────── */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary, #14bb60);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Smooth scroll + offset for anchor jumps (hero, sticky nav) ── */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nr-sticky-offset, 88px);
}

/* ── MegaMenu overrides — no plugin API, just CSS specificity to
       bring it in line with the rest of the modern aesthetic.
       The plugin emits #mega-menu-* IDs on its containers. */
#mega-menu-wrap-max_mega_menu_1 {
    background: transparent;
}
.mega-menu .mega-menu-item > a.mega-menu-link {
    font-weight: 600 !important;
    letter-spacing: 0.005em !important;
    transition: color 150ms ease-out, background 150ms ease-out !important;
    border-radius: 4px !important;
}
.mega-menu .mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.mega-menu .mega-menu-item:hover > a.mega-menu-link,
.mega-menu .mega-menu-item.mega-toggle-on > a.mega-menu-link {
    color: var(--primary, #14bb60) !important;
}
.mega-menu .mega-sub-menu {
    border-radius: 6px !important;
    box-shadow: 0 12px 32px rgba(15, 28, 46, 0.18), 0 4px 8px rgba(15, 28, 46, 0.08) !important;
    border: 1px solid rgba(15, 28, 46, 0.06) !important;
    backdrop-filter: saturate(140%);
}
.mega-menu .mega-sub-menu .mega-menu-item > a.mega-menu-link {
    border-radius: 4px !important;
}

/* Page-section spacing: a touch more breathing room on theme sections */
section + section { margin-top: clamp(20px, 3vw, 40px); }

/* ── Reduced motion: respect OS preference site-wide ───────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn:hover, .button:hover, button:hover { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
 * INFRA-FIRST HEADER STACK
 * - Compact dark topbar (network-operator aesthetic)
 * - Main menu pulled tight against the topbar so the dark gradient
 *   feels continuous from y=0 down through the hero
 * ───────────────────────────────────────────────────────────────── */
/* Pull the absolutely-positioned main menu close to the topbar.
   Old top: 74px assumed the legacy taller white topbar — with our
   compact dark one, that left a visible dead zone.
   IMPORTANT: scope to :not(.sticky-header) so the sticky variant
   (top:0 / top:32px when logged-in) keeps working when scrolling. */
/* Topbar is ~28px tall (7px padding × 2 + 14px content). Pull the
   menu just below it, with a 4px breathing-room buffer. */
.nr-header.header__main:not(.sticky-header) { top: 32px !important; }
body.logged-in .nr-header.header__main:not(.sticky-header) { top: 64px !important; } /* 32 admin bar + 32 topbar */
@media (max-width: 991.98px) {
    .nr-header.header__main:not(.sticky-header) { top: 28px !important; }
    body.logged-in .nr-header.header__main:not(.sticky-header) { top: 74px !important; }
}
/* Sticky header: pinned to viewport top (or below WP admin bar). The
   legacy main.css already does this without !important, but our
   non-sticky override above used !important so we restate sticky
   here at higher specificity to win the cascade. */
.nr-header.header__main.sticky-header { top: 0 !important; }
body.logged-in .nr-header.header__main.sticky-header { top: 32px !important; }
@media (max-width: 782px) {
    body.logged-in .nr-header.header__main.sticky-header { top: 46px !important; } /* WP admin bar grows */
}
/* Body bg fallback so any sliver between dark sections never shows white.
   Pages without a hero keep a subtle navy carry-over below the topbar. */
body.elementor-page { background-color: #0a1626; }


/* Phone/email duplicated the footer "Need us now?" card — hidden in
   the topbar but kept in the DOM so the geo-IP US↔NL swapping JS keeps
   working (it reads data-* attrs even on display:none elements). */
section.topbar ul.left,
section.topbar ul.right { display: none !important; }

/* TOPBAR REDESIGN (rev 3): announcement strip, not status spam.
   Repeating "ALL SYSTEMS OPERATIONAL" across hero panel + topbar +
   footer felt defensive. New approach: use the topbar as marketing
   real estate — a rotating announcement message + tiny status dot
   that links to the status page. Status presence is implied, not
   shouted. */
section.topbar {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(20, 187, 96, 0.06), transparent 60%),
        linear-gradient(90deg, #050f1c 0%, #061826 100%) !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--masterfont, "sofia-pro", system-ui, sans-serif);
    line-height: 1;
    position: relative;
    z-index: 5;
    min-height: 0;
}
section.topbar .container-fluid {
    position: relative;
    z-index: 1;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    gap: 20px;
}
/* LEFT: announcement message */
section.topbar .container-fluid::before {
    content: "✨ NEW  ·  A100 + A40 inference GPUs now available in Amsterdam — read more →";
    color: rgba(255, 255, 255, 0.85);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    padding-left: 6px;
}
/* RIGHT: status pill — green outline says "operational" without the dot
 * spam (user feedback: too many green dots site-wide) */
section.topbar .container-fluid::after {
    content: "STATUS";
    color: rgba(20, 187, 96, 0.85);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border: 1px solid rgba(20, 187, 96, 0.22);
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    section.topbar .container-fluid::before {
        font-size: 11px;
        content: "✨ NEW  ·  A100 GPUs in Amsterdam →";
    }
    section.topbar .container-fluid::after {
        content: "●";
        padding: 3px 6px;
    }
}
@media (max-width: 480px) {
    section.topbar .container-fluid::before {
        content: "✨ A100 GPUs in Amsterdam →";
    }
}

/* ──────────────────────────────────────────────────────────────────
 * Normalised .nr-btn — single canonical definition site-wide.
 *
 * Two competing rules exist in the codebase: the legacy main.css one
 * (padding 19×30, font 18px, square corners) and the modern
 * nr-plan-grid.css one (padding 10×18, font 13px, 6-radius). On
 * pages where nr-plan-grid.css is not enqueued the legacy version
 * wins, producing oversized buttons next to compact ones on the
 * same page. Rules below win on specificity (loaded last via
 * nr-site-polish, which is loaded site-wide) and override both.
 * ────────────────────────────────────────────────────────────── */
.nr-btn {
    --nr-btn-bg:        rgba(255, 255, 255, 0.06);
    --nr-btn-border:    rgba(255, 255, 255, 0.18);
    --nr-btn-color:     #ffffff;
    --nr-btn-radius:    6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid var(--nr-btn-border);
    border-radius: var(--nr-btn-radius);
    background: var(--nr-btn-bg);
    color: var(--nr-btn-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none;
    transition: background 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-appearance: none;
    appearance: none;
}
.nr-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30);
    color: #ffffff;
    gap: 12px;
    opacity: 1;
}

.nr-btn--primary {
    --nr-btn-bg:     var(--primary, #14bb60);
    --nr-btn-border: var(--primary, #14bb60);
    --nr-btn-color:  #ffffff;
    box-shadow: 0 4px 12px rgba(20, 187, 96, 0.25);
}
.nr-btn--primary:hover {
    background: #11a655;
    border-color: #11a655;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(20, 187, 96, 0.40);
}

.nr-btn--ghost {
    --nr-btn-bg:     transparent;
    --nr-btn-border: rgba(255, 255, 255, 0.20);
    --nr-btn-color:  #ffffff;
}

.nr-btn--small { padding: 8px 14px; font-size: 12px; }
.nr-btn--lg    { padding: 16px 28px; font-size: 15px; }

/* In a light section, swap the default chrome from white-on-dark to
 * dark-on-light without touching the primary variant. */
.nr-tone-light .nr-btn:not(.nr-btn--primary) {
    --nr-btn-bg:     #ffffff;
    --nr-btn-border: rgba(15, 32, 54, 0.18);
    --nr-btn-color:  #0f1c2e;
}
.nr-tone-light .nr-btn:not(.nr-btn--primary):hover {
    background: #f5f8fc;
    border-color: rgba(15, 32, 54, 0.32);
    color: #0a1626;
}

/* Keep the home product-card "Configure" arrow link looking like a
 * link, not a button — it sits inside its own rounded-corner card. */
.nr-home-products__cta {
    color: var(--primary, #14bb60) !important;
    font-weight: 600;
    text-decoration: none !important;
}