@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;700;900&display=swap');

/* =====================================================================
   HeyItsMOO — client portal branding
   =====================================================================
   Rebuilt 2026-09-10. This is the only file that differs from stock
   Nexus apart from theme.yaml; every .tpl is untouched, so a WHMCS
   upgrade cannot produce a template merge conflict.

   CONTRAST RULE, do not break it:
   --moo-pasture (#4ade80) and --moo-yellow (#facc15) are LIGHT. White
   text on either is about 1.8:1 and fails WCAG AA outright. Both are
   only ever used behind --moo-black text (about 9:1 and 11:1). Where a
   green needs to sit on white — links, quiet text — use
   --moo-pasture-text (#15803d, 5.4:1), never the brand green itself.
   Black is the PRIMARY here and green is the accent, which is also how
   the main site is built: white bar, black wordmark, green underline.
   ===================================================================== */

:root {
    /* ---- brand ---- */
    --moo-black:        #1a1a1a;
    --moo-pasture:      #4ade80;  /* accent surfaces — black text only */
    --moo-pasture-dark: #22c55e;  /* pressed / active */
    --moo-pasture-text: #166534;  /* green legible on white AND on tinted panels */
    --moo-yellow:       #facc15;  /* CTA hover, warnings — black text only */
    --moo-bg-light:     #f0fdf4;
    --moo-white:        #ffffff;

    --font-head: 'Fredoka', ui-rounded, system-ui, sans-serif;
    --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ---- Nexus token overrides ---------------------------------- */
    /* Primary is BLACK, not green — see the contrast rule above. */
    --primary:           var(--moo-black);
    --primary-lifted:    #2d2d2d;
    --primary-accented:  #404040;

    --secondary:          #4b5563;
    --secondary-lifted:   #374151;
    --secondary-accented: #1f2937;

    /* Success is the one place the brand green carries meaning. The
       darker value is used so success text stays readable on white. */
    --success:          var(--moo-pasture-text);
    --success-lifted:   #166534;
    --success-accented: #14532d;

    --warning:          #a16207;
    --warning-lifted:   #854d0e;
    --warning-accented: #713f12;

    --text:          var(--moo-black);
    --text-accented: #374151;
    --text-lifted:   #4b5563;
    --text-muted:    #6b7280;
    --text-inverted: var(--moo-white);

    --bg:          var(--moo-white);
    --bg-muted:    #fafdfb;
    --bg-lifted:   #f4faf6;
    --bg-accented: #e9f6ee;
    --bg-inverted: var(--moo-black);

    --border-muted:    #e4e4e7;
    --border:          #d0d5dd;
    --border-lifted:   #9ca3af;
    --border-accented: var(--moo-black);

    --rounding-sm: 0.375rem;
    --rounding-md: 0.625rem;
    --rounding-lg: 0.875rem;
}

/* ---- typography ------------------------------------------------- */
body {
    font-family: var(--font-body);
    color: var(--moo-black);
    background: #fafdfb;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand,
.btn {
    font-family: var(--font-head);
    letter-spacing: -0.01em;
}

h1, h2, h3, .h1, .h2, .h3 { font-weight: 700; }

a { color: var(--moo-pasture-text); }
a:hover, a:focus { color: #166534; }

/* ---- masthead ---------------------------------------------------- */
/* Mirrors the main site: white bar, heavy black wordmark, thick green
   rule underneath. */
#header, .header {
    background: var(--moo-white);
    border-bottom: 4px solid var(--moo-pasture);
    box-shadow: 0 1px 3px rgba(26, 26, 26, .06);
}

.navbar-brand {
    color: var(--moo-black) !important;
    font-weight: 700;
    font-size: 1.5rem;
    white-space: nowrap;
}

/* The cow comes from CSS so no template is edited. It is decorative,
   so it is hidden from assistive tech — the company name follows it. */
.navbar-brand::before {
    content: "\1F404";
    margin-right: .4rem;
    speak: never;
}

/* If a logo image is ever set in General Settings, drop the emoji so the
   brand is not doubled up. */
.navbar-brand:has(img)::before { content: none; }
.navbar-brand img { max-height: 40px; width: auto; }

/* ---- buttons ----------------------------------------------------- */
.btn { font-weight: 600; border-radius: var(--rounding-md); }

.btn-primary {
    background: var(--moo-black);
    border-color: var(--moo-black);
    color: var(--moo-white);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--moo-pasture);
    border-color: var(--moo-black);
    color: var(--moo-black);   /* black on green — never white */
}
.btn-primary:active { background: var(--moo-pasture-dark); color: var(--moo-black); }

.btn-success {
    background: var(--moo-pasture);
    border-color: var(--moo-pasture-dark);
    color: var(--moo-black);
}
.btn-success:hover { background: var(--moo-pasture-dark); color: var(--moo-black); }

.btn-warning {
    background: var(--moo-yellow);
    border-color: #eab308;
    color: var(--moo-black);
}

.btn-outline-primary {
    border-color: var(--moo-black);
    color: var(--moo-black);
}
.btn-outline-primary:hover {
    background: var(--moo-pasture);
    color: var(--moo-black);
}

/* ---- surfaces ---------------------------------------------------- */
.card, .panel, .well, .list-group-item {
    border-radius: var(--rounding-lg);
    border-color: var(--border-muted);
}
.card-header, .panel-heading {
    background: var(--moo-bg-light);
    border-bottom: 1px solid var(--border-muted);
    font-family: var(--font-head);
    font-weight: 600;
}

/* ---- forms ------------------------------------------------------- */
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], select, textarea {
    border-radius: var(--rounding-sm);
    border-color: var(--border);
}
.form-control:focus, .form-select:focus, select:focus, textarea:focus {
    border-color: var(--moo-pasture-dark);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .35);
}

/* Visible keyboard focus everywhere — the stock theme is faint. */
a:focus-visible, .btn:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--moo-pasture-dark);
    outline-offset: 2px;
}

/* ---- tables ------------------------------------------------------ */
.table thead th {
    background: var(--moo-bg-light);
    border-bottom: 2px solid var(--moo-pasture);
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--moo-black);
}
.table-hover tbody tr:hover { background: var(--moo-bg-light); }

/* ---- alerts + badges --------------------------------------------- */
.alert { border-radius: var(--rounding-md); border-width: 1px; }
.alert-success {
    background: var(--moo-bg-light);
    border-color: var(--moo-pasture);
    color: #14532d;
}
.alert-warning {
    background: #fefce8;
    border-color: var(--moo-yellow);
    color: #713f12;
}
.badge-success, .bg-success { background: var(--moo-pasture) !important; color: var(--moo-black) !important; }
.badge-warning, .bg-warning { background: var(--moo-yellow)  !important; color: var(--moo-black) !important; }

/* ---- footer ------------------------------------------------------ */
#footer, .footer {
    background: var(--moo-black);
    color: #d4d4d4;
    border-top: 4px solid var(--moo-pasture);
}
#footer .copyright, .footer .copyright,
#footer p, .footer p { color: #d4d4d4 !important; }
#footer a, .footer a { color: var(--moo-pasture); }
#footer a:hover, .footer a:hover { color: var(--moo-yellow); }

/* ---- respect reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}