/* Load Nexus's own variable file first, so any variable a future WHMCS update
   adds there still exists; our values below then override the ones we change. */
@import url('../../nexus/css/custom.css');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* *****************************************************
   PeoplesHost theme for WHMCS 9 (child of Nexus)

   Matches www.peopleshost.com: steel navy #1F3A5F, bright blue #2D6CDF,
   logo orange #FFAC00 (text on orange is navy), tints #E1ECFA / #EEF3FA,
   footer #172D4A with a 5px orange top rule. Archivo headings,
   IBM Plex Sans body, IBM Plex Mono small labels.

   This is the only file in the child theme. The variables below are the
   ones Nexus defines in its own custom.css; the Nexus Cart order form
   reads them too (--primary, --text, --border, --rounding-...), so the
   cart picks up these colors without any files in templates/orderforms.
   ***************************************************** */

:root {
    --white: #fff;

    /* Blue-grey neutrals that sit with the navy (no pure greys, no black) */
    --neutral-50: #f7f9fc;
    --neutral-100: #eef3fa;
    --neutral-200: #e1e8f2;
    --neutral-300: #d3dce8;
    --neutral-400: #aebbcd;
    --neutral-500: #6b7a90;
    --neutral-600: #4a5b73;
    --neutral-700: #35517a;
    --neutral-800: #1f3a5f;
    --neutral-900: #172d4a;
    --neutral-950: #10233b;

    /* Brand blue scale */
    --primary-50: #eef3fa;
    --primary-100: #e1ecfa;
    --primary-200: #c3d6f6;
    --primary-300: #96b7ef;
    --primary-400: #5f8fe6;
    --primary-500: #2d6cdf;
    --primary-600: #2d6cdf;
    --primary-700: #2459bd;
    --primary-800: #1f4fa8;
    --primary-900: #1f3a5f;
    --primary-950: #172d4a;

    --primary: #2d6cdf;
    --primary-lifted: #2459bd;
    --primary-accented: #1f4fa8;

    --secondary: #6b7a90;
    --secondary-lifted: #4a5b73;
    --secondary-accented: #35517a;

    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    --info: #2d6cdf;
    --info-lifted: #2459bd;
    --info-accented: #1f4fa8;

    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Nexus uses "grayscale" for its dark buttons and borders: navy, hover to bright blue */
    --grayscale: #1f3a5f;
    --grayscale-lifted: #2d6cdf;
    --grayscale-accented: #172d4a;

    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    --text-inverted: #fff;
    --text-muted: #6b7a90;
    --text-lifted: #4a5b73;
    --text-accented: #35517a;
    --text: #1f3a5f;

    --border-muted: #e1e8f2;
    --border: #d3dce8;
    --border-lifted: #aebbcd;
    --border-accented: #6b7a90;

    --bg: #fff;
    --bg-muted: #f7f9fc;
    --bg-lifted: #eef3fa;
    --bg-accented: #e1ecfa;
    --bg-inverted: #1f3a5f;

    --yellow-200: #ffe199;
    --yellow-300: #ffac00;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    --rounding-sm: 4px;
    --rounding-md: 8px;
    --rounding-lg: 12px;

    --letter-spacing: 0em;
    --disabled-opacity: 25%;

    --ph-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ph-font-head: 'Archivo', 'IBM Plex Sans', Arial, sans-serif;
    --ph-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- Type ---------- */
body {
    font-family: var(--ph-font-body);
    color: var(--text);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.header-lined h1 {
    font-family: var(--ph-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}
a { color: var(--primary); }
a:hover, a:focus { color: var(--primary-lifted); }
.text-muted { color: var(--text-muted) !important; }

/* Visible keyboard focus everywhere */
a:focus-visible, .btn:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #ffac00;
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Buttons ---------- */
.btn { border-radius: var(--rounding-sm); font-weight: 600; }
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-lifted);
    border-color: var(--primary-lifted);
    color: #fff;
}
.btn-default:hover { color: #fff; }
body #main-body .btn-outline-primary { color: var(--primary); border-color: var(--primary); }
body #main-body .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: #fff; }

/* Purchase buttons use the site's orange call-to-action style (navy text, never white) */
#btnCompleteOrder,
body #order-standard_cart .btn-checkout,
body #order-standard_cart .products .product footer .btn-order-now {
    background: #ffac00;
    border-color: #ffac00;
    color: #1f3a5f;
    font-weight: 700;
}
#btnCompleteOrder:hover, #btnCompleteOrder:focus,
body #order-standard_cart .btn-checkout:hover,
body #order-standard_cart .products .product footer .btn-order-now:hover {
    background: #f29f00;
    border-color: #f29f00;
    color: #1f3a5f;
}

/* ---------- Forms ---------- */
.form-control:focus, .custom-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.18);
}

/* ---------- Header ---------- */
header.header { border-bottom: 1px solid var(--border-muted); }
header.header .logo-img { max-height: 44px; width: auto; }
header.header .navbar a,
header.header .navbar-nav a { color: var(--text); font-weight: 500; font-size: 15.5px; }
header.header .navbar-nav > li > a:hover,
header.header .navbar-nav > li > a:focus { color: var(--primary); }
header.header .navbar-nav .dropdown-menu {
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-md);
    box-shadow: 0 12px 28px rgba(31, 58, 95, 0.14);
}
header.header .navbar-nav .dropdown-menu a { font-size: 14.5px; }
header.header .dropdown-item.active, header.header .dropdown-item:active,
header.header .dropdown-item:hover { background-color: var(--bg-lifted); }
header.header .toolbar .nav-link { border-color: var(--border); color: var(--text); }
header.header .toolbar .nav-link:hover { color: var(--primary); border-color: var(--primary); }
header.header .toolbar .badge,
#cartItemCount { background: #ffac00; color: #1f3a5f; font-weight: 700; }
header.header .search { border-color: var(--border); }

/* WHMCS's own "logged in as" bar: light tint under the navy site bar */
header.header .topbar { background-color: var(--bg-lifted); color: var(--text-accented); border-bottom: 1px solid var(--border-muted); }
header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text { color: var(--text-accented); }
header.header .topbar .active-client .btn.btn-active-client span { border-bottom-color: var(--text-accented); }

/* ---------- Page frame ---------- */
section#main-body { background-color: var(--bg-lifted); }
.master-breadcrumb, .master-breadcrumb .breadcrumb { background-color: var(--bg-accented); }
.master-breadcrumb .breadcrumb a { color: var(--text-accented); }
.master-breadcrumb .breadcrumb-item.active { color: var(--text); }

/* Cards, sidebar, tiles */
.card { border-color: var(--border-muted); border-radius: var(--rounding-md); }
.primary-content .card { box-shadow: 0 1px 2px rgba(31, 58, 95, 0.05); }
.sidebar .card-header, .sidebar .card-sidebar .panel-title { color: var(--text); font-family: var(--ph-font-head); }
.sidebar .list-group-item { color: var(--text); }
.sidebar .list-group-item:hover { background-color: var(--bg-lifted); color: var(--primary); }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    background-color: var(--bg-accented);
    color: var(--text);
    box-shadow: inset 3px 0 0 var(--primary);
}
.tiles { border-radius: var(--rounding-md); overflow: hidden; border: 1px solid var(--border-muted); }
.tiles .tile { background-color: #fff; border-right: 1px solid var(--border-muted); }
.tiles .tile:hover { background-color: var(--bg-muted); }
.tiles .tile .stat { font-family: var(--ph-font-head); font-weight: 800; color: var(--text); }
.tiles .tile .title { font-family: var(--ph-font-mono); font-weight: 500; letter-spacing: 0.08em; color: var(--text-lifted); }
.tiles .tile i { color: var(--bg-accented); }
.tiles .tile:hover i { color: var(--primary-200); }
.tiles .tile .highlight.bg-color-blue { background-color: var(--primary); }
.tiles .tile .highlight.bg-color-gold { background-color: #ffac00; }

/* Card footers and info alerts in brand tints */
.card-footer { background-color: var(--bg-muted); border-top-color: var(--border-muted); }
.alert-info { background-color: var(--bg-accented); border-color: var(--primary-200); color: var(--text); }
.alert-info a { color: var(--primary-lifted); }

/* Tables */
.table thead th { color: var(--text-lifted); border-bottom-color: var(--border); }
.table td, .table th { border-top-color: var(--border-muted); }

/* ---------- Site top bar and footer (output by includes/hooks/peopleshost_theme.php) ---------- */
.ph-topbar {
    background: #1f3a5f;
    color: #fff;
    font-size: 13.5px;
    line-height: 1;
}
.ph-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.ph-topbar nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ph-topbar a { color: #fff; text-decoration: none; padding: 6px 0; display: inline-block; }
.ph-topbar a:hover, .ph-topbar a:focus { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ph-topbar .ph-top-right { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.ph-topbar .ph-phone { font-family: var(--ph-font-mono); font-weight: 500; font-size: 14px; }
.ph-topbar .ph-247 { color: #d5dee9; }
@media (max-width: 991.98px) {
    .ph-topbar nav, .ph-topbar .ph-247 { display: none; }
    .ph-topbar .container { justify-content: center; }
}

/* The site footer replaces Nexus's footer when the hook is installed */
body:has(.ph-footer) footer.footer { display: none; }
.ph-footer {
    background: #172d4a;
    border-top: 5px solid #ffac00;
    color: #fff;
    padding: 56px 0 28px;
    font-size: 15px;
}
.ph-footer .ph-ft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; }
.ph-footer .ph-ft-brand { font-family: var(--ph-font-head); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; }
.ph-footer p { margin: 12px 0 0; font-size: 14.5px; color: #d5dee9; max-width: 260px; }
.ph-footer .ph-ft-phone { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--ph-font-mono); color: #fff; }
.ph-footer nav { display: flex; flex-direction: column; gap: 10px; }
.ph-footer .ph-ft-label { font-family: var(--ph-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #d5dee9; margin-bottom: 4px; }
.ph-footer a { color: #fff; text-decoration: none; }
.ph-footer a:hover, .ph-footer a:focus { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ph-footer .ph-ft-bbb { display: inline-flex; margin-top: 14px; border-radius: 4px; }
.ph-footer .ph-ft-bbb img { display: block; width: 200px; height: 42px; }
.ph-footer .ph-ft-legal {
    margin-top: 44px; padding-top: 22px; border-top: 1px solid #35517a;
    display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13.5px; color: #d5dee9;
}
.ph-footer .ph-ft-legal a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ph-footer .ph-ft-lang { background: transparent; border: 1px solid #35517a; color: #fff; border-radius: 4px; padding: 4px 12px; font-size: 13.5px; }

/* 60-day money-back guarantee box on the order pages (added by the hook) */
.ph-guarantee {
    display: flex; align-items: center; gap: 14px;
    max-width: 560px; margin: 20px auto; padding: 14px 18px;
    background: #fff; border: 1px solid var(--border-muted); border-left: 4px solid #ffac00;
    border-radius: var(--rounding-md); text-align: left; color: var(--text); font-size: 14.5px; line-height: 1.45;
}
.ph-guarantee svg { flex: none; }
.ph-guarantee strong { display: block; font-family: var(--ph-font-head); font-size: 16px; color: var(--text); }
.ph-guarantee a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
#orderSummary + .ph-guarantee { margin: 14px 0 0; max-width: none; }
.ph-domain-help { border-left-color: var(--primary); max-width: none; margin: 20px 0; }