/*
 * 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, "Mulish", 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, "Mulish", 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: every theme section already defines its own
   clamp(56px, 7vw, 96px) top/bottom padding. Adding margin between
   consecutive sections stacked extra blank space (e.g. between
   "Why Netrouting" and "Netrouting Guarantee" on city pages). */

/* ── 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) {
    /* On mobile the header drops out of `position: absolute` and flows
       naturally right after the topbar. With absolute, any mismatch
       between the topbar's natural height (~49 px, varies with phone+email
       wrap) and the header's `top` value showed a visible gap — the
       previous gradient-backdrop hack reduced the worst of it but a faint
       seam remained. Relative positioning makes the seam impossible by
       construction.
       Trade-off: the absolute layout also let hover-extended mega menus
       overlay the hero on desktop. Mobile uses the slide-out `.mobile-menu`
       drawer instead, so absolute is unneeded here. */
    .nr-header.header__main:not(.sticky-header) {
        position: relative !important;
        top: 0 !important;
        background: #0a1626 !important;
    }
    body.logged-in .nr-header.header__main:not(.sticky-header) {
        top: 0 !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.
   Was scoped to .elementor-page only — but on non-Elementor pages (Compliance,
   the careers landing, etc.) the topbar's natural height (~49 px on mobile)
   was less than the absolute-positioned header's `top: 60px`, leaving a ~10
   px window where white body bg leaked through between the phone row and the
   logo. Apply unconditionally — every visible content section paints its
   own background, so extending body to navy has no downside. */
html, body { background-color: #0a1626; }


/* Mobile sticky-header overlap fix
 * ────────────────────────────────
 * The mobile-only topbar fix (header.php) sets `section.topbar { z-index:
 * 1002 !important }` to defeat third-party hide rules. But that z-index
 * also wins against `.nr-header.sticky-header` (z-index 100) — so when the
 * user scrolls past the threshold and the header pins to top:0, the
 * still-partially-visible bottom edge of the topbar paints OVER the
 * sticky header, leaving a white-ish sliver above the navy bar.
 *
 * Drop the topbar's z-index back into a sane range so the fixed-position
 * sticky header paints over any portion of the topbar that hasn't fully
 * scrolled out yet. Visibility / display rules from the mobile fix stay
 * intact — only the stacking order changes.
 *
 * !important is required to win against the inline-style mobile fix. */
section.topbar { z-index: 1 !important; }


/* Topbar's left/right legacy <ul>s are no longer rendered (phone+email
   replaced by the .nr-topbar-promo__contact button). Defensive hide in
   case the legacy markup ever leaks back via a stored fragment. */
section.topbar ul.left,
section.topbar ul.right { display: none !important; }
/* Single-row layout on desktop: promo on the left, phone/email on the right.
   The topbar itself becomes a flex container with two children — the promo
   block and the container-fluid (phone/email) — sharing one row. */
@media (min-width: 992px) {
    section.topbar {
        display: flex !important;
        align-items: center;
        gap: 24px;
        padding: 5px 16px !important;
    }
    section.topbar .nr-topbar-promo { flex: 1 1 auto; padding: 0; }
    section.topbar .container-fluid { flex: 0 0 auto; padding: 0; }
}
/* On mobile, stack: promo above (full row), STATUS + Contact Sales below. */
@media (max-width: 991.98px) {
    section.topbar .container-fluid {
        padding: 4px 8px 2px;
        justify-content: center !important;
        gap: 8px;
    }
}

/* 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, "Mulish", 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: flex-end !important;  /* right-align: STATUS + phone + email all sit on the right edge */
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;                        /* wrap onto next line on narrow screens */
}
/* The announcement message + STATUS pill are now real <a> tags
 * rendered by header.php (see .nr-topbar-promo). Editable at
 * Appearance → Customize → Topbar promo. */
section.topbar .nr-topbar-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}
section.topbar .nr-topbar-promo__news {
    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;
    text-decoration: none;
    transition: color 150ms ease-out;
}
section.topbar .nr-topbar-promo__news:hover { color: #21D974; }
section.topbar .nr-topbar-promo__news-mobile { display: none; }
section.topbar .nr-topbar-promo__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;
    text-decoration: none;
    transition: background 150ms ease-out, border-color 150ms ease-out;
}
section.topbar .nr-topbar-promo__status:hover {
    background: rgba(20, 187, 96, 0.10);
    border-color: rgba(20, 187, 96, 0.45);
}
/* Contact Sales button — quieter than the green Get Started CTA on the
   header, but more inviting than a flat link. White-on-dark with subtle
   border, hover lifts to brand green. Sits flush with STATUS in the
   topbar's right-side group. */
section.topbar .nr-topbar-promo__contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
section.topbar .nr-topbar-promo__contact:hover {
    background: rgba(20, 187, 96, 0.10);
    border-color: rgba(20, 187, 96, 0.45);
    color: #ffffff;
}
section.topbar .nr-topbar-promo__contact .icon-envelope {
    font-size: 12px;
    color: rgba(20, 187, 96, 0.85);
}
@media (max-width: 768px) {
    section.topbar .nr-topbar-promo__news { font-size: 11px; }
    section.topbar .nr-topbar-promo__news-full { display: none; }
    section.topbar .nr-topbar-promo__news-mobile { display: inline; }
    section.topbar .nr-topbar-promo__status {
        padding: 3px 8px;
    }
}
/* Header logo on mobile. The header now has its own dark-gradient
 * backdrop (set further down) so the logo no longer needs a big top
 * buffer to feel separated from the topbar — the colour change does
 * that for us. Was 22px which produced a visible gap between the
 * topbar phone row and the logo. */
@media (max-width: 991.98px) {
    .header-main { padding-top: 8px !important; padding-bottom: 8px; }
    .header-main .logo { padding-top: 0; }
    .header-main .logo img { max-height: 44px; width: auto; }
}

/* ──────────────────────────────────────────────────────────────────
 * 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 {
    /* WCAG AA: white text on the brand green needs ≥4.5:1. The
       --primary token (#14bb60) sits at 2.92:1 — fails. Even the
       previous #0c8b48 (previously commented as 5.69:1) is actually
       only 4.38:1 — fails by a hair. Darkened to #0a763d which
       computes to 5.74:1 (AA comfortable pass). Hover goes darker
       still for the conventional hover-darkens-state cue. */
    --nr-btn-bg:     #0a763d;   /* 5.74:1 with #ffffff — AA pass */
    --nr-btn-border: #0a763d;
    --nr-btn-color:  #ffffff;
    box-shadow: 0 4px 12px rgba(10, 118, 61, 0.30);
}
.nr-btn--primary:hover {
    background: #075c2c;        /* 8.15:1 — AAA */
    border-color: #075c2c;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(10, 118, 61, 0.45);
}

.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;
}
