/* ==========================================================================
   NexonHost chrome for WHMCS (phox)
   Ported 1:1 from the marketing front end: /opt/nexonhost/src/Layout.tsx
   as rendered into /opt/nexonhost/dist/index.html.

   Structure and colour live in inline styles copied verbatim from that
   render, exactly as React emits them. This file only carries what an
   inline style attribute cannot express: @font-face, :hover, media
   queries and the open/closed state of the dropdowns and mobile menu.

   Everything is scoped to .nx-chrome so phox keeps styling the client
   area. Loaded after core.css.
   ========================================================================== */

/* --- Fonts (self-hosted, same files the front end serves) --------------- */
@font-face{font-family:'Sora Fallback';src:local('Arial'),local('Roboto');size-adjust:97.41%;ascent-override:99.58%;descent-override:29.77%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Fallback';src:local('Arial'),local('Roboto');size-adjust:86.31%;ascent-override:118.75%;descent-override:31.86%;line-gap-override:0%}
@font-face{font-family:'Sora';font-style:normal;font-weight:600 700;font-display:optional;src:url('../nexonhost/fonts/sora-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:600 700;font-display:optional;src:url('../nexonhost/fonts/sora-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:optional;src:url('../nexonhost/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:optional;src:url('../nexonhost/fonts/ibm-plex-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* --- Neutralise phox/bootstrap inside the chrome ------------------------
   phox loads bootstrap 3 and core.css before this file. Those set a
   1.428 line-height, underline links on hover, cap images at 100% and
   give <p> a bottom margin — none of which the front end has. The chrome
   is rebuilt from the front end's own inline styles, so the inherited
   ones have to be reset or the two headers drift apart. */
.nx-chrome,
.nx-chrome *,
.nx-chrome *::before,
.nx-chrome *::after{box-sizing:border-box}
.nx-chrome{
  font-family:'IBM Plex Sans','IBM Plex Fallback',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
  line-height:normal;
  text-align:left;
  color:#16191e;
}
.nx-chrome a{text-decoration:none}
.nx-chrome a:hover,
.nx-chrome a:focus{text-decoration:none}
.nx-chrome p{margin:0}
.nx-chrome img{max-width:none;height:auto}
.nx-chrome button{font-family:inherit;-webkit-appearance:none;appearance:none}
/* core.css puts `transition: .24s ease-in-out` on every button (and phox
   eases link colours too). nexonhost.com switches hover and dropdown
   states instantly, so the easing is dropped to keep them identical. */
.nx-chrome a,
.nx-chrome button{transition:none}
.nx-chrome h2{font-family:inherit}
/* phox styles section#header / section#footer (sticky, padding, shadow).
   The chrome brings its own, so those ids are deliberately not used —
   these two guards only exist in case a future edit puts them back. */
.nx-chrome-header,
.nx-chrome-footer{padding:0;background:none;box-shadow:none;border:0}

/* --- Top bar ------------------------------------------------------------ */
.nx-topbar a:hover{color:#0849ef}

/* --- Header / nav ------------------------------------------------------- */
.nx-nav-link:hover{color:#0849ef}
.nx-login-btn:hover{background:#063bbd;color:#ffffff}
/* !important because the closed state (`background:transparent`) is an
   inline style copied from the front end, and inline beats a class. */
.nx-dd-btn.is-open{background:#eef4ff!important}

/* Dropdown panels. The front end toggles `display` on the element itself,
   which keeps every link in the static HTML for crawlers; same here, but
   driven by a class so the inline style can stay identical to the source. */
.nx-dd{display:none}
.nx-dd.is-open{display:block}
.nx-dd-group-title:hover{color:#063bbd}
.nx-dd-link:hover{color:#0849ef}
.nx-region:hover{border-color:#0849ef;background:#f2f6ff}

/* --- Mobile menu -------------------------------------------------------- */
.nx-mobile-menu{display:none}
.nx-mobile-menu.is-open{display:block}
.nx-mob-group-body{display:none}
.nx-mob-group.is-open .nx-mob-group-body{display:block}

/* --- Pre-footer CTA ----------------------------------------------------- */
.nx-cta-primary:hover{background:#e8f0ff;color:#0630a8}
.nx-cta-secondary:hover{background:rgba(255,255,255,.18);border-color:#ffffff;color:#ffffff}
.nx-cta-mail:hover{color:#ffffff}

/* --- Footer ------------------------------------------------------------- */
.nx-foot-link:hover{color:#0849ef}
.nx-foot-mail:hover{color:#0849ef}

/* The language picker has no counterpart on nexonhost.com but is a working
   feature here, so it is restyled to read as one more muted link in the
   bottom row rather than dropped. The menu itself keeps phox's styling —
   it is only visible while open. */
.nx-chrome-footer .languages-list{position:relative;display:inline-flex;align-items:center}
.nx-chrome-footer .languages-list .choose-language{
  background:none;border:0;padding:0;box-shadow:none;border-radius:0;
  font:500 13px 'IBM Plex Sans','IBM Plex Fallback',sans-serif;
  color:#6d7684;display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:normal;
}
.nx-chrome-footer .languages-list .choose-language:hover,
.nx-chrome-footer .languages-list .choose-language:focus{background:none;color:#0849ef}
.nx-chrome-footer .languages-list .choose-language i{font-size:10px}

/* --- Breakpoints (identical to the front end's) -------------------------
   The front end swaps the desktop nav for a burger in JS at width < 1100.
   Here both are in the DOM and CSS picks one, which renders the same and
   survives a resize without a reflow. */
@media (max-width:899px){
  .nx-topbar-hours{display:none!important}
  .nx-tap,
  .nx-chrome a[href^="tel:"],
  .nx-chrome a[href^="mailto:"]{display:inline-flex;align-items:center;min-width:26px;min-height:26px}
}
@media (max-width:639px){
  .nx-topbar-social{display:none!important}
  .nx-topbar{justify-content:center;gap:8px 16px;padding:8px 16px;font-size:12.5px}
}
@media (min-width:1100px){
  .nx-burger{display:none!important}
  .nx-mobile-menu{display:none!important}
}
@media (max-width:1099px){
  .nx-desktop-nav{display:none!important}
  .nx-dd{display:none!important}
  .nx-burger{display:flex!important}
}