/**
 * NAQDA Carbon Theme Connector  (v1.1)
 * ------------------------------------------------------------------
 * Lightweight, conflict-safe stylesheet linked into EVERY page so the
 * whole site shares one connected identity — IBM Plex Sans, the IBM
 * Carbon blue accent, accessible focus rings, and Carbon colour tokens.
 *
 * Conservative by design: it unifies TYPOGRAPHY + ACCENT + FOCUS and
 * exposes design tokens, but does NOT impose page layout (no fixed-nav
 * padding, no forced component restyles), so it will not break the
 * Tailwind / custom-styled pages. The full Carbon component system lives
 * in naqda-global-styles.css (homepage + core pages).
 *
 * The font rules use !important + a text-element selector list because
 * many pages re-declare body{font-family:Inter} in <style> blocks placed
 * inside <body> (after this <head> link). Icon elements (<i>, .fa*,
 * [class*="fa-"], material icons, <span>) are intentionally NOT targeted,
 * so Font Awesome / icon fonts keep working.
 *
 * Inspired by IBM's open-source Carbon Design System. Trilingual
 * EN / සිංහල / தமிழ் preserved via Noto Sans Sinhala / Noto Sans Tamil.
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* IBM Carbon blue ramp — the single chromatic accent */
  --carbon-blue-10: #edf5ff;
  --carbon-blue-20: #d0e2ff;
  --carbon-blue-50: #4589ff;
  --carbon-blue-60: #0f62fe;   /* primary accent */
  --carbon-blue-70: #0043ce;   /* link hover */
  --carbon-blue-80: #002d9c;   /* pressed */
  /* Neutrals */
  --carbon-ink: #161616;
  --carbon-ink-muted: #525252;
  --carbon-gray-20: #e0e0e0;   /* hairline */
  --carbon-gray-10: #f4f4f4;   /* surface-1 */
  /* Semantic */
  --carbon-success: #24a148;
  --carbon-warning: #f1c21b;
  --carbon-error:   #da1e28;
  /* Font stack */
  --carbon-font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Typography unification (the core "one connected theme" signal) ----
   Text elements only — icons (<i>, .fa*, <span>, material icons) excluded. */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, li, dt, dd, figcaption, caption,
label, legend, th, td,
button, input, select, textarea, .btn, .button {
  font-family: var(--carbon-font) !important;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Language scripts set data-lang on <html>; active language styling belongs only
   on real controls. Keep the document root from turning every page white. */
html[data-lang],
html[data-lang].active {
  background: transparent !important;
  color: var(--carbon-ink) !important;
}

body {
  color: var(--carbon-ink);
}

body.dark-mode {
  color: #e2e8f0;
}

/* Trilingual scripts keep their dedicated faces */
:lang(si), [lang="si"] { font-family: 'Noto Sans Sinhala', var(--carbon-font) !important; }
:lang(ta), [lang="ta"] { font-family: 'Noto Sans Tamil', var(--carbon-font) !important; }

/* Icon fonts: restore the CORRECT icon families (NOT `revert`, which falls back
   to the inherited body font and turns every icon into a box). FA's own CSS keeps
   the right font-weight; we only re-assert the family so our text rules can't win. */
.fa, .fas, .far, .fal, .fad, .fa-solid, .fa-regular, .fa-light,
i[class^="fa-"], i[class*=" fa-"], [class^="fa-"]::before, [class*=" fa-"]::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}
.fab, .fa-brands, i.fa-brands {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}
.material-icons { font-family: "Material Icons" !important; }
.material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }
.material-symbols-rounded { font-family: "Material Symbols Rounded" !important; }

/* Shared industry calculator readability guard. Several production pages reuse
   pale selected cards, so text must not inherit white from global language state. */
.business-type-btn,
.business-type-btn h3,
.business-type-btn h4 {
  color: var(--carbon-ink) !important;
}

.business-type-btn p {
  color: var(--carbon-ink-muted) !important;
}

.business-type-btn .text-emerald-600,
.business-type-btn [class*="text-emerald"] {
  color: #007a5a !important;
}

.business-type-btn.bg-blue-50,
.business-type-btn[class*="bg-blue-50"] {
  background-color: var(--carbon-blue-10) !important;
}

/* ---- Accent + accessibility ---- */
::selection { background: var(--carbon-blue-20); color: var(--carbon-ink); }

/* WCAG 2.1 — visible keyboard focus (>=3:1), without obtrusive mouse rings */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--carbon-blue-60);
  outline-offset: 2px;
}

/* ---- Opt-in Carbon helpers any page can use ---- */
.carbon-square     { border-radius: 0 !important; }
.carbon-accent     { color: var(--carbon-blue-60); }
.bg-carbon-accent  { background: var(--carbon-blue-60); color: #fff; }
.carbon-hairline   { border: 1px solid var(--carbon-gray-20); }

/* ---- Compliance layer (carbon-compliance.js): skip-link, switcher, legal bar ---- */
.carbon-skip { position:absolute; left:-9999px; top:auto; z-index:100050;
  background:var(--carbon-blue-60); color:#fff; padding:10px 16px;
  font:600 14px/1 var(--carbon-font); text-decoration:none; }
.carbon-skip:focus { left:8px; top:8px; outline:2px solid #fff; outline-offset:2px; }

.carbon-lang { display:inline-flex; border:1px solid var(--carbon-gray-20); background:#fff; vertical-align:middle; }
.carbon-lang button { font:400 13px/1 var(--carbon-font); padding:8px 11px; min-height:36px;
  background:#fff; color:var(--carbon-ink); border:0; border-left:1px solid var(--carbon-gray-20); cursor:pointer; }
.carbon-lang button:first-child { border-left:0; }
.carbon-lang button[aria-pressed="true"] { background:var(--carbon-blue-60); color:#fff; }
.carbon-lang.in-header { margin-left:12px; }
.carbon-lang.floating { position:fixed; top:10px; right:10px; z-index:100040; box-shadow:0 2px 10px rgba(0,0,0,.18); }

.carbon-legal { background:var(--carbon-ink); color:rgba(255,255,255,.72); border-top:1px solid #393939;
  padding:16px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:center;
  font:400 12px/1.5 var(--carbon-font); text-align:center; }
.carbon-legal a { color:rgba(255,255,255,.72); text-decoration:none; }
.carbon-legal a:hover { color:#fff; text-decoration:underline; }
.carbon-legal__links { display:inline-flex; flex-wrap:wrap; gap:14px; }
.carbon-legal__upd { opacity:.85; }

/* ---- Responsive containment: keep content in-box site-wide (universal-ui-css-fixer) ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }
img:not([style*="height"]):not([width]) { height: auto; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.carbon-lang.floating { max-width: calc(100vw - 20px); }

/* ============================================================
   Premium ocean footer — unique, high-standard, on-brand for a
   blue-economy / aquaculture authority. Layered deep-sea gradient
   with "light through water" glows + a teal→sky accent edge.
   Overrides flat charcoal/navy on .footer and JS-injected #globalFooter.
   ============================================================ */
.footer, footer.footer, #globalFooter {
  background:
    radial-gradient(1100px 260px at 50% -40px, rgba(16,185,129,0.30), transparent 72%),
    radial-gradient(720px 220px at 88% 8%, rgba(56,189,248,0.16), transparent 70%),
    linear-gradient(180deg, #063b52 0%, #042a3e 55%, #02161f 100%) !important;
  color: #c7d3da !important;
  border-top: 3px solid #10b981;                 /* fallback */
  border-image: linear-gradient(90deg, #10b981 0%, #38bdf8 50%, #10b981 100%) 1;
  position: relative;
}
/* Soft wave crest along the top edge (subtle, sits on the accent line) */
.footer::before, #globalFooter::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,55 350,5 600,28 C850,52 1050,8 1200,30 L1200,0 L0,0 Z' fill='rgba(255,255,255,0.025)'/%3E%3C/svg%3E") repeat-x top;
  background-size: 1200px 60px; pointer-events: none;
}
/* keep footer content above the decorative wave */
.footer > *, #globalFooter > * { position: relative; z-index: 1; }

/* Legal bar: translucent deep-water strip that blends with the ocean */
.carbon-legal {
  background: rgba(2,18,26,0.55) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(2px);
}
.carbon-legal a { color: rgba(255,255,255,0.78) !important; }
.carbon-legal a:hover { color: #7fe7d0 !important; }   /* aqua hover */
.carbon-legal__upd { opacity: 0.9; }
