/* ============================================================
   HOSTINAP — WHMCS NEXUS CHILD THEME
   ============================================================

   Parent theme : nexus  (requires WHMCS 9.0 or later)
   Method       : CSS custom properties, per WHMCS's documented
                  Nexus customisation approach. No Sass build,
                  no template files overridden.

   Everything below overrides the defaults in theme.min.css.
   This file is loaded after it, so these values win.

   The palette matches hostinap.com exactly, so the marketing
   site and the client area feel like one product.
   ============================================================ */

:root {
    --white: #fff;

    /* ---- Neutral shades ----
       Warmed very slightly toward purple so greys sit next to
       the brand colour without looking muddy. */
    --neutral-50:  #fafafd;
    --neutral-100: #f3f2fa;
    --neutral-200: #e4e2f0;
    --neutral-300: #d0cde3;
    --neutral-400: #9b99b8;
    --neutral-500: #6c6a80;
    --neutral-600: #4d4b63;
    --neutral-700: #3a3756;
    --neutral-800: #211f3d;
    --neutral-900: #0f0c2e;
    --neutral-950: #06041a;

    /* ---- Hostinap brand purple ----
       Generated from #4636c5, the primary on the main site.
       Contrast checked: white text on --primary-600 = 8.55:1 */
    --primary-50:  #f7f7fb;
    --primary-100: #eeedf5;
    --primary-200: #d7d4ef;
    --primary-300: #b5afe9;
    --primary-400: #8d83dd;
    --primary-500: #5f51cf;
    --primary-600: #4334bc;
    --primary-700: #352996;
    --primary-800: #292074;
    --primary-900: #1e1851;
    --primary-950: #110d2d;

    /* ---- Primary semantic colours ----
       Nexus defaults these to neutrals. We point them at the
       brand ramp, using the shades WHMCS recommends in the
       comments of the stock file. */
    --primary:          var(--primary-600);
    --primary-lifted:   var(--primary-700);
    --primary-accented: var(--primary-800);

    /* ---- Secondary ---- */
    --secondary:          var(--neutral-500);
    --secondary-lifted:   var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* ---- Status colours ----
       Success and error keep Nexus's defaults, which are already
       accessible and instantly readable. Notice is pulled onto
       the brand purple, and warning onto the Hostinap gold. */
    /* Darkened from the marketing site's #10b981 — white text on
       that value only reaches 2.5:1. These pass WCAG AA. */
    --success:          #0b855d;
    --success-lifted:   #09714f;
    --success-accented: #086043;

    --info:          #155dfc;
    --info-lifted:   #1447e6;
    --info-accented: #193cb8;

    --notice:          var(--primary-500);
    --notice-lifted:   var(--primary-600);
    --notice-accented: var(--primary-700);

    /* Hostinap gold, darkened so white text on it passes AA.
       The bright #fbbf24 from the main site lives on as
       --yellow-300 below, for use as an accent rather than a
       button background. */
    --warning:          #b06005;
    --warning-lifted:   #965204;
    --warning-accented: #7f4504;

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

    /* ---- Grayscale / neutral semantic ---- */
    --grayscale:          var(--neutral-900);
    --grayscale-lifted:   var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

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

    /* ---- Text ----
       --text-muted is deliberately darker than Nexus's default.
       The stock value fails WCAG AA on white; this one passes. */
    --text-inverted: var(--white);
    --text-muted:    var(--neutral-500);
    --text-lifted:   var(--neutral-600);
    --text-accented: var(--neutral-700);
    --text:          var(--neutral-900);

    /* ---- Borders ---- */
    --border-muted:    var(--neutral-200);
    --border:          var(--neutral-300);
    --border-lifted:   var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* ---- Backgrounds ---- */
    --bg:          var(--white);
    --bg-muted:    var(--neutral-50);
    --bg-lifted:   var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* ---- Additional accents ---- */
    --yellow-200: #fef3c7;
    --yellow-300: #fbbf24;   /* Hostinap gold */
    --teal-300:   #5eead4;
    --teal-400:   #2dd4bf;
    --emerald-300:#6ee7b7;
    --pink-400:   #f472b6;

    /* ---- Typography ----
       Bumped one notch from Nexus's defaults. The stock scale
       starts at 10px, which is uncomfortable on mobile. */
    --text-xs: 0.6875rem;   /* 11px  (was 10px) */
    --text-sm: 0.8125rem;   /* 13px  (was 12px) */
    --text-md: 0.9375rem;   /* 15px  (was 14px) */
    --text-lg: 1.0625rem;   /* 17px  (was 16px) */

    /* ---- Outlines ---- */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* ---- Rounding ----
       Softer than stock, matching the rounded cards and pill
       buttons on hostinap.com. */
    --rounding-sm: 0.5rem;    /* 8px   (was 4px) */
    --rounding-md: 0.875rem;  /* 14px  (was 8px) */
    --rounding-lg: 1.25rem;   /* 20px  (was 12px) */

    /* ---- Other ---- */
    --letter-spacing: -0.005em;
    --disabled-opacity: 35%;
}


/* ============================================================
   OPTIONAL EXTRAS
   ------------------------------------------------------------
   The variables above do the vast majority of the work. Below
   are a few extras that pull the client area closer to the main
   site. All are safe to delete if you prefer stock Nexus
   behaviour — none of them are required for the theme to work.
   ============================================================ */

/* Match the marketing site's typefaces.
   Delete these two rules if you'd rather keep Nexus's stack. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4 {
    font-family: 'Poppins', 'Inter', sans-serif;
    letter-spacing: -0.02em;
}

/* Pill-shaped primary buttons, as on the main site.
   EDIT ME: if Nexus's button class differs in your version,
   inspect the element and update the selector. */
.btn-primary,
button[type="submit"].btn-primary {
    border-radius: 999px;
}

/* Visible keyboard focus ring — accessibility.
   Nexus's default focus styling is subtle on some elements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--outline-lg) solid var(--primary-400);
    outline-offset: 2px;
}

/* Respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   BRAND BAR — styles for the optional header/footer snippets
   in includes/BRANDING-SNIPPETS.tpl

   Only needed if you paste those snippets into your head.tpl
   and footer.tpl copies. Harmless if you don't — the selectors
   simply won't match anything.
   ============================================================ */

.hostinap-brandbar {
    background: linear-gradient(135deg, var(--primary-950) 0%, var(--primary-800) 60%, var(--primary-700) 100%);
    color: #fff;
    font-family: 'Inter', -apple-system, sans-serif;
}
.hostinap-brandbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 28px;
}
.hostinap-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    flex-shrink: 0;
}
.hostinap-logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
}
.hostinap-ap { color: var(--yellow-300); }

.hostinap-brandnav {
    display: flex;
    gap: 4px;
    flex: 1;
    align-items: center;
}
.hostinap-brandnav a {
    color: rgba(255,255,255,0.85);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 7px 12px;
    border-radius: var(--rounding-sm);
    transition: background 0.18s, color 0.18s;
}
.hostinap-brandnav a:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
}
.hostinap-brandnav a.hostinap-offer { color: var(--yellow-300); }

.hostinap-wa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    flex-shrink: 0;
    transition: transform 0.18s;
}
.hostinap-wa:hover { transform: translateY(-1px); color: #fff; }

@media (max-width: 820px) {
    .hostinap-brandnav { display: none; }
    .hostinap-brandbar-inner { justify-content: space-between; gap: 12px; }
}

.hostinap-brandfooter {
    background: var(--primary-950);
    color: rgba(255,255,255,0.55);
    font-size: 12.5px;
}
.hostinap-brandfooter-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.hostinap-brandfooter p { margin: 0; }
.hostinap-brandfooter nav { display: flex; gap: 18px; flex-wrap: wrap; }
.hostinap-brandfooter a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.18s;
}
.hostinap-brandfooter a:hover { color: var(--yellow-300); }