/* =====================================================================
MHHC BRAND SYSTEM — mhhc-base.css (v1.3 · 2026-06-05)
Macdonald's Home Health Care — "Your Partner in Comfort and Mobility"
---------------------------------------------------------------------
SINGLE SOURCE OF TRUTH for every digital deliverable (reports, scoping
docs, requirements/PRDs, dashboards, Teams HTML, email shells).
Link it, don't copy it:
…
.
All colors are WCAG 2.2 AA verified. Derived from MHHC_BrandStandards.pdf.
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');
/* ---------- TOKENS ---------- */
:root{
/* Brand blue (immutable primary) */
--mhhc-blue: #0175A8; /* PRIMARY + display hero · 5.11:1 on white (AA) */
--mhhc-blue-ink: #015A82; /* small links / small headings · 7.54:1 (AAA) */
--mhhc-blue-light: #E8F4FA; /* soft tint surface */
/* Brand blue tints (supporting use only — never on the logo) */
--mhhc-blue-80: #3491BA;
--mhhc-blue-60: #67ABCB;
--mhhc-blue-40: #9AC7DC;
--mhhc-blue-10: #E6F1F6;
/* Neutrals (greyscale per brand) */
--ink: #1A1A1A; /* body text · 17.4:1 */
--ink-secondary: #4D4D4D; /* secondary text · 8.45:1 */
--ink-muted: #666666; /* 60% black · meta/labels · 5.74:1 (AA) */
--grey-nontext: #999999; /* NON-TEXT only (icons/disabled) · fails AA */
--border: #E2E8F0; /* hairlines */
--border-strong: #CCCCCC;
--surface: #F6F8FA; /* page tint / cards */
--surface-2: #EEF2F6;
--white: #FFFFFF;
/* Semantic (FUNCTIONAL UI ONLY — these are not brand colors) */
--success: #1E7A46; --success-bg: #E6F4EC;
--warning: #8A6100; --warning-bg: #FBF1DC;
--danger: #B42318; --danger-bg: #FBE9E7;
--info: var(--mhhc-blue); --info-bg: var(--mhhc-blue-light);
/* Type */
--font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-serif:'Lora', Georgia, 'Times New Roman', serif; /* Caslon substitute · long-form print body */
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
--w-light:300; --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;
--text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
--text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem;
--lh-tight:1.2; --lh-snug:1.35; --lh-base:1.6; --lh-loose:1.75;
--track-wide:.08em; --track-wider:.14em;
/* Spacing (4-pt) */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
--space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
/* Radius / shadow / layout */
--radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:999px;
--shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
--shadow-md:0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
--shadow-lg:0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
--measure:720px; /* optimal reading width */
--page-max:1080px; /* full document frame */
}
/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--surface);color:var(--ink);
font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--lh-base);
font-weight:var(--w-regular);-webkit-font-smoothing:antialiased;}
/* Document frame */
.mhhc-doc{max-width:var(--page-max);margin:0 auto;background:var(--white);
padding:var(--space-12) var(--space-16);box-shadow:var(--shadow-sm);}
.mhhc-doc--narrow{max-width:820px;}
/* ---------- HEADINGS ---------- */
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);color:var(--ink);
line-height:var(--lh-tight);margin:0 0 var(--space-4);font-weight:var(--w-bold);}
h1{font-size:var(--text-4xl);letter-spacing:-.01em;}
h2{font-size:var(--text-2xl);color:var(--mhhc-blue);padding-bottom:var(--space-2);
border-bottom:2px solid var(--mhhc-blue);margin-top:var(--space-12);}
h3{font-size:var(--text-xl);font-weight:var(--w-semibold);margin-top:var(--space-8);}
h4{font-size:var(--text-lg);font-weight:var(--w-semibold);color:var(--ink-secondary);}
h5,h6{font-size:var(--text-sm);font-weight:var(--w-semibold);
text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--ink-muted);}
/* ---------- TEXT ELEMENTS ---------- */
p{margin:0 0 var(--space-4);max-width:var(--measure);}
a{color:var(--mhhc-blue-ink);text-decoration:underline;text-underline-offset:2px;}
a:hover{color:var(--mhhc-blue);}
strong,b{font-weight:var(--w-semibold);}
ul,ol{margin:0 0 var(--space-4);padding-left:var(--space-6);max-width:var(--measure);}
li{margin-bottom:var(--space-2);}
hr{border:0;border-top:1px solid var(--border);margin:var(--space-8) 0;}
small,.mhhc-meta{font-size:var(--text-sm);color:var(--ink-muted);}
blockquote{margin:var(--space-6) 0;padding:var(--space-2) var(--space-6);
border-left:3px solid var(--mhhc-blue);font-family:var(--font-serif);
font-size:var(--text-lg);color:var(--ink-secondary);}
/* Long-form print body (memos/letters/proposals) — Caslon substitute */
.mhhc-prose-serif p,.mhhc-prose-serif li{font-family:var(--font-serif);
font-size:var(--text-lg);line-height:var(--lh-loose);}
/* ---------- EYEBROW / LABELS ---------- */
.mhhc-eyebrow{font-size:var(--text-xs);font-weight:var(--w-semibold);
text-transform:uppercase;letter-spacing:var(--track-wider);color:var(--mhhc-blue);
margin:0 0 var(--space-2);}
/* ---------- COVER BAND ---------- */
.mhhc-cover{background:var(--mhhc-blue);color:var(--white);
margin:calc(-1 * var(--space-12)) calc(-1 * var(--space-16)) var(--space-12);
padding:var(--space-16);border-radius:0;}
.mhhc-cover .mhhc-eyebrow{color:rgba(255,255,255,.85);}
.mhhc-cover h1{color:var(--white);font-size:var(--text-5xl);margin-bottom:var(--space-3);}
.mhhc-cover .mhhc-cover-sub{font-size:var(--text-lg);color:rgba(255,255,255,.9);max-width:var(--measure);}
/* Hang the script 'M' left (-21px @34px) so the 'H' of HOME HEALTH CARE aligns with the body column. */
.mhhc-cover img.mhhc-cover-logo{height:34px;margin-bottom:var(--space-8);display:block;margin-left:-21px;}
.mhhc-cover-meta{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-8);
padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.25);font-size:var(--text-sm);}
.mhhc-cover-meta b{display:block;font-weight:var(--w-semibold);color:var(--white);}
.mhhc-cover-meta span{color:rgba(255,255,255,.8);}
/* ---------- DASHBOARD HEADER (blue ribbon + blue title bar) ----------
Use as the FIRST children of .mhhc-doc. The ribbon carries the WHITE wordmark;
the img is hung -17px so 'HOME HEALTH CARE' aligns with the title column below. */
.mhhc-dashbar{background:var(--mhhc-blue);
margin:calc(-1 * var(--space-12)) calc(-1 * var(--space-16)) 0;
padding:var(--space-4) var(--space-16);display:flex;align-items:center;}
.mhhc-dashbar img{height:28px;display:block;margin-left:-17px;}
.mhhc-dashtitle{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);
flex-wrap:wrap;border-bottom:2px solid var(--mhhc-blue);
padding:var(--space-6) 0 var(--space-3);margin-bottom:var(--space-6);}
.mhhc-dashtitle h1{margin:0;color:var(--mhhc-blue);font-size:var(--text-3xl);}
.mhhc-dashtitle .mhhc-meta{color:var(--ink-muted);}
/* ---------- TABLES ---------- */
table,.mhhc-table{width:100%;border-collapse:collapse;margin:var(--space-6) 0;font-size:var(--text-sm);}
.mhhc-table th{background:var(--mhhc-blue);color:var(--white);text-align:left;
font-weight:var(--w-semibold);padding:var(--space-3) var(--space-4);
font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-wide);}
.mhhc-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);
vertical-align:top;}
.mhhc-table tr:nth-child(even) td{background:var(--surface);}
.mhhc-table tr:last-child td{border-bottom:1px solid var(--border-strong);}
/* ---------- CALLOUTS ---------- */
.mhhc-callout{border-left:4px solid var(--mhhc-blue);background:var(--mhhc-blue-light);
padding:var(--space-4) var(--space-5);border-radius:0 var(--radius-md) var(--radius-md) 0;
margin:var(--space-6) 0;max-width:var(--measure);}
.mhhc-callout p:last-child{margin-bottom:0;}
.mhhc-callout .mhhc-callout-title{font-weight:var(--w-semibold);margin:0 0 var(--space-1);color:var(--mhhc-blue-ink);}
.mhhc-callout--success{border-color:var(--success);background:var(--success-bg);}
.mhhc-callout--success .mhhc-callout-title{color:var(--success);}
.mhhc-callout--warning{border-color:var(--warning);background:var(--warning-bg);}
.mhhc-callout--warning .mhhc-callout-title{color:var(--warning);}
.mhhc-callout--danger{border-color:var(--danger);background:var(--danger-bg);}
.mhhc-callout--danger .mhhc-callout-title{color:var(--danger);}
/* ---------- BADGES / TAGS / PILLS ---------- */
.mhhc-badge{display:inline-block;padding:2px 10px;border-radius:var(--radius-full);
font-size:var(--text-xs);font-weight:var(--w-semibold);line-height:1.6;
background:var(--mhhc-blue);color:var(--white);letter-spacing:.01em;}
.mhhc-badge--success{background:var(--success);}
.mhhc-badge--warning{background:var(--warning);}
.mhhc-badge--danger{background:var(--danger);}
.mhhc-badge--soft{background:var(--mhhc-blue-light);color:var(--mhhc-blue-ink);}
.mhhc-tag{display:inline-block;padding:2px 10px;border-radius:var(--radius-sm);
font-size:var(--text-xs);font-weight:var(--w-medium);
background:var(--surface-2);color:var(--ink-secondary);border:1px solid var(--border);}
/* ---------- KPI CARDS ---------- */
.mhhc-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:var(--space-4);margin:var(--space-6) 0;}
.mhhc-kpi{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
padding:var(--space-5);border-top:3px solid var(--mhhc-blue);}
.mhhc-kpi .mhhc-kpi-label{font-size:var(--text-xs);text-transform:uppercase;
letter-spacing:var(--track-wide);color:var(--ink-muted);font-weight:var(--w-semibold);margin-bottom:var(--space-2);}
.mhhc-kpi .mhhc-kpi-value{font-size:var(--text-3xl);font-weight:var(--w-bold);color:var(--mhhc-blue);line-height:1.1;}
.mhhc-kpi .mhhc-kpi-delta{font-size:var(--text-sm);margin-top:var(--space-1);}
.mhhc-kpi .mhhc-kpi-delta.up{color:var(--success);}
.mhhc-kpi .mhhc-kpi-delta.down{color:var(--danger);}
/* ---------- BUTTONS (links styled as actions, for email/CTA) ---------- */
.mhhc-btn{display:inline-block;background:var(--mhhc-blue);color:var(--white);
font-weight:var(--w-semibold);font-size:var(--text-sm);text-decoration:none;
padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);}
.mhhc-btn:hover{background:var(--mhhc-blue-ink);color:var(--white);}
.mhhc-btn--ghost{background:transparent;color:var(--mhhc-blue-ink);border:1px solid var(--mhhc-blue);}
/* ---------- CODE ---------- */
code,kbd,samp{font-family:var(--font-mono);font-size:.9em;
background:var(--surface-2);padding:1px 6px;border-radius:var(--radius-sm);color:var(--ink);}
pre{background:#0E1B24;color:#E6F1F6;padding:var(--space-4) var(--space-5);
border-radius:var(--radius-md);overflow:auto;font-size:var(--text-sm);line-height:1.5;}
pre code{background:none;padding:0;color:inherit;}
/* ---------- FOOTER ---------- */
.mhhc-footer{margin-top:var(--space-16);padding-top:var(--space-6);
border-top:1px solid var(--border);display:flex;justify-content:space-between;
align-items:center;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-xs);color:var(--ink-muted);}
.mhhc-footer img{height:20px;opacity:.8;}
.mhhc-footer .mhhc-slogan{font-family:var(--font-serif);font-style:italic;color:var(--mhhc-blue-ink);font-size:var(--text-sm);}
/* ---------- SECTION HELPERS ---------- */
.mhhc-section{margin-bottom:var(--space-12);}
.mhhc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);}
.mhhc-divider{height:1px;background:var(--border);margin:var(--space-8) 0;border:0;}
/* ---------- ACCESSIBILITY / MOTION ---------- */
:focus-visible{outline:3px solid var(--mhhc-blue);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
.mhhc-doc{padding:var(--space-6) var(--space-5);}
.mhhc-cover{margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) var(--space-8);padding:var(--space-8) var(--space-5);}
.mhhc-cover h1{font-size:var(--text-3xl);}
.mhhc-dashbar{margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) 0;padding:var(--space-4) var(--space-5);}
.mhhc-dashtitle h1{font-size:var(--text-2xl);}
h1{font-size:var(--text-3xl);} h2{font-size:var(--text-xl);}
.mhhc-grid-2{grid-template-columns:1fr;}
}
/* ---------- PRINT (PDF export) ---------- */
@page{size:Letter;margin:18mm 16mm;}
@media print{
body{background:var(--white);}
.mhhc-doc{max-width:none;box-shadow:none;padding:0;}
.mhhc-cover{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.mhhc-table th{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
h2{break-after:avoid;} h3{break-after:avoid;}
.mhhc-kpi,.mhhc-callout,table{break-inside:avoid;}
a{color:var(--ink);text-decoration:none;}
.mhhc-no-print{display:none!important;}
}