/* Doctor of Laxmi — redesign palette override
   Commit as assets/dol-palette.css and load it AFTER assets/main.css on every page:

     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/dol-palette.css" />

   Nothing else in main.css needs touching. Every page repaints from these tokens:
   white ground, navy ink, gold accent. The live tokens it replaces were an ivory
   canvas (#f9f8f5) with a navy accent misnamed --gold (#1a365d) — so the accent
   becomes genuinely gold here, and the ground becomes white.
   Token names are unchanged so no selector in main.css has to change. */

:root {
  /* ---- ground ---- */
  --bg:        #ffffff;          /* was #f9f8f5 ivory */
  --bg-2:      #f6f7fa;          /* section band, was #f4f3ee linen */
  --panel:     #ffffff;
  --panel-2:   #ffffff;
  --line:      #e1e5ec;          /* hairline, was #d8d6ce */
  --line-soft: #eef0f4;

  /* ---- ink: navy rather than near-black ---- */
  --ink:       #16233f;          /* headings, 13.5:1 on white */
  --ink-soft:  #263041;          /* body,      11.6:1 */
  --ink-mute:  #3e4759;          /* secondary,  8.4:1 */
  --ink-fade:  #5b6579;          /* labels,     5.6:1 */

  /* ---- accent: gold. --gold stays the token name main.css already uses ---- */
  --gold:       #6b430f;         /* links and primary fill, 8.0:1 on white */
  --gold-bright:#9a6318;         /* hover and emphasis,     5.1:1 */
  --gold-deep:  #52330b;         /* pressed */
  --gold-soft:  rgba(154, 99, 24, 0.06);
  --gold-line:  rgba(154, 99, 24, 0.28);

  /* ---- dark surfaces: the poster bands and the footer ---- */
  --navy-deep:    #16233f;
  --navy-surface: #1b2b4a;
  --navy-muted:   #22334f;
  --navy-abyss:   #101b33;

  --line-dark: rgba(255, 255, 255, 0.14);
}

/* Gold on navy needs the light step to stay legible. */
.footer a:not(.btn):hover,
.nav--dark a:hover { color: #e0ae58; }

/* The primary button is a solid gold fill with a flush-left label. */
.btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.btn--primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: #fff;
}

/* ---- footer, redesign structure. 8 September 2026 ----
   The footer moved to the structure in the design files: the brand block now
   carries the contact details between the tagline and the social icons, and
   three link columns replaced the four service groups. Two things in main.css
   were cut for the old shape and need restating. Kept here rather than in
   main.css, which the handoff asks us to leave alone. */

/* .footer__lnk has no top margin, so the first contact line sat flush against
   the tagline with no gap at all. */
.footer__lower .footer__brand > p:not(.footer__lnk) { margin-bottom: 20px; }

/* The 1.45/1.15/0.85/1.2 ratios were cut for the previous columns, which were
   shorter. The new middle column holds "Hospital Technology Integration" and
   the third holds nine items, so the three are evened out. Wrapped in a
   min-width query because this sheet loads after main.css: without it, this
   rule would also beat main.css's 1000px and 620px collapses, which have no
   extra specificity, and the footer would stay four columns on a phone. */
@media (min-width: 1001px) {
  .footer__lower { grid-template-columns: 1.25fr 1.05fr 1.05fr 1.05fr; }
}


/* ---- header, redesign structure. 8 September 2026 ----
   The design puts the header on a WHITE ground with a 2px navy rule under it,
   and replaces the navy mega-nav with a brand lockup and four flat links.
   main.css line 1790 paints .nav #081325 and line 1795 sets .brand to the
   on-dark colour, both written for the old dark bar, so they are restated
   here for the light one. */
.nav { background: #ffffff; border-bottom: 2px solid var(--ink); }
.nav .brand { color: var(--ink); }
/* main.css:1797 is `.nav__top, .nav__links > a.nav__top`, a two-class
   selector, so a bare .nav__top here loses to it and the links stay on the
   on-dark grey .. 1.5:1 on white. Matched at three classes instead. The same
   applies to the hover at 1798 and the open-menu colour at 1830. */
.nav .nav__links > a.nav__top { color: var(--ink); }
.nav .nav__links > a.nav__top:hover,
.nav .nav__links > a.nav__top.nav__top--active { color: var(--gold); }
.nav .nav__links.open > a.nav__top { color: var(--ink); }
.nav__burger { color: var(--ink); }

/* The brand is a two-line lockup rather than a single wordmark. Uppercased in
   CSS rather than in the markup so the accessible name and the page source
   still read "Doctor of Laxmi". */
.brand--lockup { display: flex; flex-direction: column; align-items: flex-start;
  gap: 5px; line-height: 1.05; white-space: normal; }
.brand__name { text-transform: uppercase; font-weight: 700; letter-spacing: -0.01em; }
.brand__tag { font-size: 13px; font-weight: 400; letter-spacing: 0;
  color: var(--ink-fade); text-transform: none; }

/* ---- footer detail, matched to the design canvas. 8 September 2026 ----
   Two things the first footer pass got wrong, both visible in Mehirr's
   recording of the design. */

/* Column headings are normal case and white in the design, not the uppercase
   letterspaced grey label main.css:1954 gives them. */
.footer .footer__ch { text-transform: none; letter-spacing: -0.01em;
  font-size: 17.5px; color: #ffffff; }

/* Social icons sit in gold-outlined squares rather than having a faint white
   hairline. */
.footer .footer__social a { border: 1px solid rgba(224,174,88,.55);
  color: #e0ae58; width: 44px; height: 44px; display: inline-flex;
  align-items: center; justify-content: center; }
.footer .footer__social a:hover { border-color: #e0ae58;
  background: rgba(224,174,88,.10); color: #e0ae58; }

/* ---- flush left and square, to match the design. 8 September 2026 ----
   The design files contain ZERO text-align:center and zero rounded corners.
   CLAUDE.md says the same thing: "Flush left. Headings, copy, and the labels
   inside buttons. Never centred." and "Zero border radius. Nothing is
   rounded." The live site had 47 pages with centred section heads and a
   6px radius token, so the copy matched the design while the page did not
   look like it.

   Done here as two rules rather than as 47 page rebuilds. */

/* Centring comes from four places, found by walking the DOM for the element
   that actually sets it rather than by guessing at class names:
   .section-head.center (96 uses), .section-head, .page-hero and .section.final. */
.section-head, .section-head.center, .wrap.section-head.center,
.prose.center, .page-hero, .section.final { text-align: left; }
.section-head > *, .prose.center > * { margin-left: 0; margin-right: 0; }

/* The radius token drives most of the rounding. Circular controls .. the
   WhatsApp float, avatars, flow nodes .. set border-radius:50% directly and
   are deliberately left alone. */
:root { --radius: 0px; }

/* The radius token covers most of it. These two set 4px directly: the buttons
   and the category chips, of which there are 32 on /for-clinics/ alone. The
   circular controls .. .wa-fab, avatars, flow nodes .. use border-radius:50%
   and are deliberately untouched. */
.btn, .btn--primary, .btn--ghost, .cat-chip { border-radius: 0; }

/* CLAUDE.md: "Flush left. Headings, copy, AND THE LABELS INSIDE BUTTONS.
   Never centred." .btn is a flex row that centres its own content, so the
   label needs justify-content as well as text-align. */
.btn { text-align: left; justify-content: flex-start; }
/* main.css has `.page-hero .lead { text-align:center }`, a two-class selector,
   so a bare .lead loses to it and the hero standfirst stayed centred. */
.lead, .page-hero .lead, .hero .lead { text-align: left; }