/* public-base.css - Dhan public 1.0 (30 Oct 2026): the parts every version of the public pages shares.
   Loaded after dhan-look.css (the standard's colours, corners, borders, buttons, fields, tiles, the door) and before the
   version's own public-{a,b,c,d}.css. Names follow the Dhan design standard (proposed section 15, "Public websites").
   Nothing is fetched from other sites: Inter is served from /fonts/inter, icons are inline. No purple anywhere.
   The same file in both sites; keep it so. */

/* ---------- Inter, self-hosted (rsms/inter 4.1, SIL Open Font License: /fonts/inter/OFL.txt) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter/InterVariable.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/fonts/inter/InterVariable-Italic.woff2') format('woff2'); }

/* ---------- 15.5 the public sizes and the "on dark" whites ---------- */
:root {
    color-scheme: light;
    --fs-display: clamp(36px, 28px + 2.6vw, 56px);  /* the page's one serif title */
    --fs-section: 30px;                              /* section headings (Inter) */
    --fs-lead: 19px;
    --fs-read: 17px;                                 /* reading text */
    --fs-body-public: 16px;
    --fs-h3-public: 18px;
    --fs-figure: 40px;
    --measure: 68ch;                                 /* reading width */
    --section-y: 80px;                               /* section spacing */
    --space-12: 48px; --space-16: 64px; --space-20: 80px;
    --on-dark: rgba(255, 255, 255, .88);
    --on-dark-muted: rgba(255, 255, 255, .72);
    --on-dark-line: rgba(255, 255, 255, .16);
    --on-dark-hover: rgba(255, 255, 255, .08);
    --edge: 28px;                                    /* the page's side gutter (A calls it --gutter) */
    --gutter: 28px;
}
@media (max-width: 600px) { :root { --edge: 16px; --gutter: 16px; } }

body.pub { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font); font-size: var(--fs-body-public); line-height: 1.6;
    -webkit-font-smoothing: antialiased; }
.pub img { max-width: 100%; height: auto; }
.pub .icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- focus: always visible, never under the sticky bar ---------- */
html { scroll-padding-top: 96px; }
.pub :focus-visible { outline: 2px solid var(--look-focus); outline-offset: 2px; }
.pub .on-dark :focus-visible, .pub .deep :focus-visible { outline-color: var(--side-mark); }
.skip-link { z-index: 100; }

/* ---------- the "[to confirm: ...]" mark: a fact or claim not held yet (<x-confirm>); none may be left at launch ---------- */
.confirm { display: inline; margin: 0 2px; padding: 0 5px; border: 1px dashed var(--amber); border-radius: var(--radius-xs); background: var(--amber-soft);
    color: var(--amber-text); font-family: var(--font); font-size: .82em; font-style: normal; font-weight: 600; letter-spacing: 0; line-height: 1.5;
    text-transform: none; white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.on-dark .confirm, .deep .confirm, .pbar .confirm, .pfoot .confirm, .p-bar .confirm, .p-foot .confirm, .p-door-brand .confirm, .p-close-brand .confirm,
.foot .confirm { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); color: #fff; }
.deep .card .confirm, .deep .paths .confirm { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-text); }

/* ---------- 30 Oct 2026: the preview bar - only on the new site's preview (/d/..., before launch) ---------- */
.vbar { position: relative; z-index: 60; background: var(--grey-soft); border-bottom: 1px solid var(--grey-line); color: var(--grey-text); font-size: 13px; }
.vbar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; max-width: calc(1180px + 2 * var(--edge)); margin: 0 auto; padding: 6px var(--edge); }
.vbar-label { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; }
.vbar-note { color: var(--muted); }

/* ---------- people and motion ---------- */
@media (prefers-reduced-motion: reduce) { .pub *, .pub *::before, .pub *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .confirm { border: 1px solid CanvasText; } }
@media print { .vbar { display: none; } }

/* ---------- 30 Oct 2026: small utilities in place of style="" attributes (the new pages' CSP allows no inline style).
   Each does what the attribute did, so they win as it did (!important); the --n ones set the count a grid reads. ---------- */
.u-muted { color: var(--muted) !important; }
.u-block { display: block !important; }
.u-m-0 { margin: 0 !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-mt-16 { margin-top: 16px !important; }
.u-mt-20 { margin-top: 20px !important; }
.u-mt-24 { margin-top: 24px !important; }
.u-mt-28 { margin-top: 28px !important; }
.u-mt-40 { margin-top: 40px !important; }
.u-section-title { font-size: var(--fs-section) !important; font-weight: 600 !important; line-height: 1.2 !important; }
.u-row-between { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; justify-content: space-between !important; gap: 16px !important; max-width: none !important; }
.u-self-start { align-self: start !important; }
.u-nowrap { white-space: nowrap !important; }   /* 30 Oct 2026: a number kept on one line ("ABN 12 934 023 558") */
/* 30 Oct 2026: "hidden" always hides, also on an element with a display of its own (a .btn print button waits hidden until
   public.js shows it) */
[hidden] { display: none !important; }
.u-n-2 { --n: 2; }
.u-n-3 { --n: 3; }
.u-n-4 { --n: 4; }
.u-n-5 { --n: 5; }

/* ---------- 30 Oct 2026: the enquiry form (<x-enquiry-form>) ---------- */
.eform-title { margin: 0; font-size: var(--fs-section, 24px); font-weight: 600; line-height: 1.2; }
/* the form's title as the page's h1 (:level="1", the Contact page): the serif, as every page's one title; its own line under it */
.eform.is-page .eform-title { color: var(--text); font-family: var(--serif); font-size: var(--fs-door); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.eform-lead { max-width: 52ch; margin-top: 12px; color: var(--muted); font-size: 16.5px; }
.eform-quiet { margin-top: 8px; color: var(--muted); }
.eform-problems { margin-top: 16px; padding: 12px 16px; border: 1px solid var(--red-line); border-left: 4px solid var(--red); border-radius: var(--radius-sm);
    background: var(--red-soft); color: var(--red-text); }
.eform-problems:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.eform-problems p { margin: 0; font-weight: 600; }
.eform-problems ul { margin: 6px 0 0; padding-left: 20px; }
.eform-problems a { color: var(--red-text); }
.field-hint { margin: 0; color: var(--muted); font-size: 13.5px; }
.field-error { margin: 0; color: var(--red-text); font-size: 13.5px; font-weight: 600; }
.eform-jobs { margin-top: 14px; }
.eform-status { grid-column: 1 / -1; margin: 0; min-height: 1.4em; color: var(--muted); font-size: 14px; }
.eform-status:empty { display: none; }
/* the honeypot: out of sight and out of reach (never display:none, which some robots read) */
.eform-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 30 Oct 2026: a page not drawn yet (a stub: its title and h1 only; the page agents replace it) ---------- */
.stub-page { padding: 56px 0 72px; }
.stub-page h1 { margin: 0; font-family: var(--serif); font-size: clamp(30px, 4vw, 44px); font-weight: 400; line-height: 1.15; }
.stub-lead { max-width: 68ch; margin-top: 14px; color: var(--muted); font-size: 18px; }
.stub-page .eform { max-width: 760px; margin-top: 40px; }