/* Shared public-site theme. Loaded after the existing Tailwind and legacy CSS.
   Keep compatibility rules scoped so standalone admin tools retain their theme. */
.theme-light {
    --brand-primary: #066596;
    --brand-primary-hover: #056397;
    --theme-ink: #18344c;
    --theme-body: #425b70;
    --theme-muted: #485f72;
    --theme-border: #cbdde9;
    color-scheme: light;
    background: #ffffff;
    color: var(--theme-body);
}

/* Existing pages use dark Tailwind utilities; map those surfaces to light ones. */
.theme-light :is(.bg-brand-dark, .bg-gray-800, .bg-gray-900) {
    background-color: #f2f8fc;
}

.theme-light :is([class~="bg-gray-800/30"], [class~="bg-gray-800/40"],
    [class~="bg-gray-800/50"], [class~="bg-gray-800/60"],
    [class~="bg-gray-900/40"], [class~="bg-gray-900/50"]) {
    background-color: #ffffff;
}

.theme-light :is(.glass-card, article.group) {
    background: #ffffff;
    border-color: var(--theme-border);
    box-shadow: 0 8px 28px rgb(24 73 105 / 7%);
}

.theme-light article.group:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 14px 32px rgb(24 73 105 / 12%);
}

.theme-light :is(.text-white, .text-gray-100, .text-gray-200) {
    color: var(--theme-ink);
}

.theme-light .text-gray-300 { color: var(--theme-body); }
.theme-light :is(.text-gray-400, .text-gray-500) { color: var(--theme-muted); }
.theme-light :is(.text-brand-primary, .text-blue-300, .text-blue-400,
    [class~="text-blue-400/80"], [class~="text-brand-primary/80"]) {
    color: var(--brand-primary);
}
.theme-light :is(.text-cyan-300, .text-cyan-400, .text-teal-300, .text-teal-400) { color: #0e697f; }
.theme-light :is(.text-green-300, .text-green-400, .text-emerald-300, .text-emerald-400,
    [class~="text-emerald-400/80"]) { color: #08734f; }
.theme-light :is(.text-purple-300, .text-purple-400, [class~="text-purple-400/80"]) { color: #7741b3; }
.theme-light :is(.text-indigo-300, .text-indigo-400, [class~="text-indigo-400/80"]) { color: #4f46a5; }
.theme-light :is(.text-red-300, .text-red-400, [class~="text-red-400/80"]) { color: #b52c38; }
.theme-light :is(.text-orange-300, .text-orange-400) { color: #a4470c; }
.theme-light :is(.text-yellow-300, .text-yellow-400) { color: #806108; }
.theme-light :is(.text-pink-300, .text-pink-400) { color: #9b2860; }

/* Light-tinted cards replace layered dark-theme colour washes. */
.theme-light :is([class~="bg-blue-500/10"], [class~="bg-blue-500/20"], [class~="bg-blue-500/30"],
    [class~="bg-brand-primary/10"], [class~="bg-brand-primary/20"],
    [class~="bg-purple-500/10"], [class~="bg-purple-500/20"], [class~="bg-purple-500/30"],
    [class~="bg-indigo-500/10"], [class~="bg-indigo-500/20"], [class~="bg-indigo-500/30"],
    [class~="bg-cyan-500/10"], [class~="bg-cyan-500/20"], [class~="bg-cyan-500/30"],
    [class~="bg-emerald-500/10"], [class~="bg-emerald-500/20"], [class~="bg-emerald-500/30"],
    [class~="bg-green-500/15"], [class~="bg-green-500/20"], [class~="bg-green-500/30"],
    [class~="bg-red-500/10"], [class~="bg-red-500/20"], [class~="bg-red-500/30"],
    [class~="bg-orange-500/20"], [class~="bg-orange-500/30"],
    [class~="bg-yellow-500/20"], [class~="bg-yellow-500/30"],
    [class~="bg-pink-500/20"], [class~="bg-teal-500/20"], [class~="bg-teal-500/30"]) {
    background-color: #eaf4fb;
}
.theme-light :is([class~="from-blue-400/20"], [class~="from-blue-500/20"],
    [class~="from-purple-500/20"], [class~="from-indigo-500/20"],
    [class~="from-cyan-500/20"], [class~="from-emerald-500/20"],
    [class~="from-green-500/20"], [class~="from-red-500/10"], [class~="from-red-500/20"],
    [class~="from-orange-500/20"], [class~="from-yellow-500/20"],
    [class~="from-teal-500/20"], [class~="from-sky-500/20"]) {
    background-image: linear-gradient(135deg, #f2f8fc, #e8f2fa);
}

.theme-light :is(.border-gray-500, .border-gray-600, .border-gray-700,
    .border-gray-800, [class~="border-gray-700/50"]) {
    border-color: var(--theme-border);
}

/* Hero sections pair a pale sky-blue background with readable navy headings. */
.theme-light main > section.relative.overflow-hidden.bg-brand-dark {
    background: linear-gradient(120deg, #edf8ff 0%, #d9effb 58%, #eff8fc 100%);
    border-bottom: 1px solid #c9e4f3;
}
.theme-light .animate-blob { opacity: 0.18; }
.theme-light .bg-clip-text.text-transparent {
    background-image: linear-gradient(100deg, #086fa7, #145287);
}
.theme-light :is(.from-gray-800, .to-gray-900):not(.bg-clip-text) {
    background-image: linear-gradient(135deg, #ffffff, #eaf4fb);
}

/* Filled actions and CTA panels retain white text; coloured panels use blue. */
.theme-light :is(.bg-brand-primary, .bg-blue-600, .bg-emerald-600,
    .bg-purple-600, .bg-red-600, .bg-emerald-500, .bg-green-500) {
    background-color: var(--brand-primary);
    color: #ffffff;
}
.theme-light :is(.from-brand-primary, .from-blue-600, .from-purple-600,
    .from-emerald-600, .from-red-600):not(.bg-clip-text) {
    background-image: linear-gradient(110deg, #087bb8, #125b96);
    color: #ffffff;
}
.theme-light :is(.bg-brand-primary, .bg-blue-600, .bg-emerald-600,
    .bg-purple-600, .bg-red-600, .bg-emerald-500, .bg-green-500,
    .from-brand-primary, .from-blue-600, .from-purple-600, .from-emerald-600,
    .from-red-600):not(.bg-clip-text) :is(.text-white, .text-gray-300,
    .text-gray-400, .text-blue-50, .text-blue-100, .text-blue-200, .text-blue-300,
    .text-purple-100, .text-emerald-100, .text-red-100) {
    color: #ffffff;
}
.theme-light :is(.bg-brand-primary, .bg-blue-600, .bg-emerald-600,
    .bg-purple-600, .bg-red-600, .bg-emerald-500, .bg-green-500).text-white {
    color: #ffffff;
}
.theme-light :is(.from-brand-primary, .from-blue-600, .from-purple-600,
    .from-emerald-600, .from-red-600) .bg-white {
    color: #075e96;
}
.theme-light :is([class~="hover:text-white"], [class~="hover:text-blue-300"],
    [class~="hover:text-blue-400"], [class~="hover:text-brand-primary"]):hover {
    color: #075e96;
}
.theme-light :is([class~="hover:bg-gray-700"], [class~="hover:bg-gray-700/50"],
    [class~="hover:bg-gray-800"], [class~="hover:bg-gray-800/50"],
    [class~="hover:bg-gray-800/70"]):hover {
    background-color: #e2f1fb;
}
.theme-light :is([class~="hover:bg-brand-primary"], [class~="hover:bg-blue-600"],
    [class~="hover:bg-blue-700"], [class~="hover:bg-brand-primary/90"]):hover {
    background-color: var(--brand-primary-hover);
    color: #ffffff;
}

/* Blue navigation mirrors the reference; the mobile dropdown stays white. */
.theme-light .site-header {
    background: #087bb8;
    border-color: #076b9f;
    box-shadow: 0 3px 16px rgb(18 76 111 / 12%);
}
.theme-light .site-header :is(.text-white, .text-gray-300, .text-brand-primary) {
    color: #ffffff;
}
.theme-light .site-header nav > a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 6px; }
.theme-light .site-header nav > .bg-brand-primary {
    background-color: #ffffff;
    color: #075e96;
    box-shadow: none;
}
.theme-light .site-header nav > .bg-brand-primary:hover { background-color: #e9f6ff; color: #075e96; }
.theme-light #mobile-menu > div { background: #ffffff; border-color: var(--theme-border); }
.theme-light #mobile-menu a { color: var(--theme-ink); }
.theme-light #mobile-menu a:hover { color: #075e96; background-color: #e2f1fb; }
.theme-light #mobile-menu a.bg-brand-primary { color: #ffffff; background: var(--brand-primary); }
.theme-light #mobile-menu a.bg-brand-primary:hover { background: var(--brand-primary-hover); }
.theme-light #mobile-menu-button:hover { background: #056397; }

.theme-light .site-footer { background: #edf6fb; border-color: var(--theme-border); }
.theme-light .site-footer .space-x-6 { flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; }
.theme-light .site-footer .space-x-6 > * + * { margin-left: 0; }

/* Keep the full navigation from crowding the logo on tablets and small laptops. */
@media (max-width: 1199px) {
    .theme-light .site-header nav { display: none !important; }
    .theme-light .site-header .md\:hidden { display: block !important; }
    .theme-light #mobile-menu { display: block !important; }
}
@media (min-width: 1200px) {
    .theme-light .site-header .md\:hidden { display: none !important; }
}

/* Enquiry controls, keyboard focus, and native dropdown options. */
.theme-light :is(input:not([type="hidden"]), select, textarea) {
    background: #ffffff;
    color: var(--theme-ink);
    border-color: #afc8da;
}
.theme-light :is(input, textarea)::placeholder { color: #607688; opacity: 1; }
.theme-light :is(input, select, textarea):focus-visible {
    outline: 3px solid #087bb8;
    outline-offset: 2px;
}
.theme-light option { color: var(--theme-ink); background: #ffffff; }
.theme-light a[href^="https://wa.me/"] .bg-gray-900 { color: var(--theme-ink); }

/* Reset inverted article typography without touching article content. */
.theme-light .prose {
    --tw-prose-body: #425b70;
    --tw-prose-headings: #18344c;
    --tw-prose-lead: #485f72;
    --tw-prose-links: #066596;
    --tw-prose-bold: #18344c;
    --tw-prose-counters: #485f72;
    --tw-prose-bullets: #087bb8;
    --tw-prose-hr: #cbdde9;
    --tw-prose-quotes: #18344c;
    --tw-prose-quote-borders: #087bb8;
    --tw-prose-captions: #485f72;
    --tw-prose-code: #18344c;
    --tw-prose-pre-code: #18344c;
    --tw-prose-pre-bg: #edf6fb;
    --tw-prose-th-borders: #afc8da;
    --tw-prose-td-borders: #cbdde9;
    color: var(--theme-body);
}
.theme-light .prose a:hover { color: #056397; }
.theme-light .prose blockquote { background: #edf6fb; }

@media (max-width: 767px) {
    .theme-light main > section.relative.overflow-hidden.bg-brand-dark {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .theme-light .site-header .text-2xl { font-size: 1.25rem; }
}

/* Approved WebDeveloper WD identity, 9 October 2026. */
.theme-light {
    --brand-primary: #14263d;
    --brand-primary-hover: #243e5b;
    --brand-accent: #20b8ce;
    --theme-ink: #14263d;
    --theme-body: #42576c;
    --theme-muted: #526579;
    --theme-border: #d9e3eb;
}
.theme-light .site-header { background: #ffffff; border-color: var(--theme-border); box-shadow: 0 3px 16px rgb(20 38 61 / 5%); }
.theme-light .site-header :is(.text-white, .text-gray-300, .text-brand-primary) { color: var(--theme-ink); }
.brand-home { display: inline-flex; flex-shrink: 0; align-items: center; max-width: 100%; }
.brand-logo { display: block; width: 242px; height: auto; }
.theme-light .site-header nav { gap: 22px; }
.theme-light .site-header nav > * + * { margin-left: 0; }
.theme-light .site-header nav > a { font-size: 14px; }
.theme-light .site-header nav > a:hover { color: #0c7180; }
.theme-light .site-header nav > .bg-brand-primary { color: white; background: #14263d; padding: 12px 16px; }
.theme-light .site-header nav > .bg-brand-primary:hover { color: white; background: #243e5b; }
.theme-light #mobile-menu-button { color: #14263d; min-width: 44px; min-height: 44px; }
.theme-light #mobile-menu-button:hover { background: #f1f5f8; }
.theme-light #mobile-menu[hidden] { display: none !important; }
.theme-light #mobile-menu a:hover { color: #14263d; background: #e8f4f6; }
.theme-light .site-footer { background: #14263d; border-color: #14263d; }
.theme-light .site-footer :is(p, a, .text-gray-400, .text-gray-500) { color: #d5e2ed; }
.theme-light .site-footer a:hover { color: white; }
.theme-light .site-footer p { max-width: 620px; }
.theme-light main > section.relative.overflow-hidden.bg-brand-dark { background: #f1f5f8; border-color: #d9e3eb; }
.theme-light .bg-clip-text.text-transparent { background-image: none; color: #14263d; }
.theme-light :is(.from-brand-primary, .from-blue-600, .from-purple-600, .from-emerald-600, .from-red-600):not(.bg-clip-text) { background-image: none; background-color: #14263d; color: white; }
.theme-light :is(.from-brand-primary, .from-blue-600, .from-purple-600, .from-emerald-600, .from-red-600) .bg-white { color: #14263d; }
.theme-light :is(.text-brand-primary, .text-blue-300, .text-blue-400) { color: #0c7180; }
.theme-light :is(.bg-brand-primary, .bg-blue-600, .bg-emerald-600, .bg-purple-600, .bg-red-600).text-white { color: white; }
.theme-light .animate-blob { display: none; }
.theme-light :is(a, button, input, select, textarea):focus-visible { outline: 3px solid #0c7180; outline-offset: 3px; }
.theme-light .site-footer a:focus-visible { outline-color: #20b8ce; }
.brand-form-notice { font-size: 14px; line-height: 1.6; color: #526579; }
.brand-form-notice a { color: #0c7180; text-decoration: underline; text-underline-offset: 3px; }
#business-system-use-cases { scroll-margin-top: 110px; }
@media (max-width: 767px) {
    .brand-logo { width: 216px; }
    .theme-light .site-header .container { padding-left: 16px; padding-right: 16px; }
    .theme-light .site-footer .brand-home { justify-content: center; }
}