/* ============================================================
   MURRAY VALLEY CARE GROUP — BRAND STYLESHEET
   Version 1.0 — August 2026
   Prepared by Australian Skills Connect Pty Ltd

   Paste this into your project. Everything below matches the
   printed Brand Identity Guide exactly. Do not change the
   colour or type values without updating the guide.
   ============================================================ */

/* ---- FONTS ------------------------------------------------
   Add this to the <head> of your HTML, before this stylesheet:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700&family=Figtree:wght@400;500;700&display=swap" rel="stylesheet">
   ----------------------------------------------------------- */

:root {
  /* Colour */
  --mv-river:       #17565E;   /* primary — headings, mark, buttons, headers */
  --mv-river-dark:  #103F45;   /* hover states, footer */
  --mv-redgum:      #9C5334;   /* accent only — links, emphasis */
  --mv-sand:        #F2EDE4;   /* page background */
  --mv-sand-deep:   #E9E2D4;   /* panels, cards */
  --mv-reed:        #7D9471;   /* supporting — charts, tags */
  --mv-ink:         #2A2A28;   /* all body text */
  --mv-muted:       #6B6B66;   /* captions, secondary text */
  --mv-line:        #D8D0C2;   /* borders, rules */
  --mv-white:       #FFFFFF;

  /* Type */
  --mv-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mv-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --mv-radius: 6px;
  --mv-maxw: 1140px;
  --mv-gutter: 24px;
  --mv-space: 8px;
}

/* ---- RESET AND BASE --------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mv-sand);
  color: var(--mv-ink);
  font-family: var(--mv-body);
  font-size: 18px;          /* NEVER below 18px. Audience includes people in their 80s. */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.mv-container {
  width: 100%;
  max-width: var(--mv-maxw);
  margin: 0 auto;
  padding: 0 var(--mv-gutter);
}

/* ---- TYPOGRAPHY ------------------------------------------- */

h1, h2, h3 { font-family: var(--mv-head); font-weight: 700; color: var(--mv-river); margin: 0 0 0.5em; }

h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: 24px; line-height: 1.2; }
h3 { font-size: 19px; line-height: 1.3; color: var(--mv-ink); }

h4 {
  font-family: var(--mv-body); font-weight: 700; font-size: 15px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mv-redgum); margin: 0 0 0.5em;
}

p { margin: 0 0 1em; max-width: 68ch; }   /* keeps line length readable */

.mv-lead { font-size: 20px; line-height: 1.6; }
.mv-small { font-size: 15px; line-height: 1.5; color: var(--mv-muted); }

@media (min-width: 768px) {
  h1 { font-size: 52px; line-height: 1.1; }
  h2 { font-size: 34px; }
  h3 { font-size: 21px; }
  .mv-lead { font-size: 22px; }
  body { line-height: 1.7; }
}

/* ---- LINKS ------------------------------------------------ */

a {
  color: var(--mv-redgum);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--mv-river); }
a:focus-visible {
  outline: 3px solid rgba(156, 83, 52, 0.4);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- BUTTONS ---------------------------------------------- */

.mv-btn {
  display: inline-block;
  font-family: var(--mv-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  padding: 14px 24px;
  border-radius: var(--mv-radius);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  min-height: 48px;              /* touch target */
}

.mv-btn--primary { background: var(--mv-river); color: var(--mv-white); }
.mv-btn--primary:hover { background: var(--mv-river-dark); color: var(--mv-white); }

.mv-btn--secondary {
  background: transparent;
  color: var(--mv-river);
  border-color: var(--mv-river);
}
.mv-btn--secondary:hover { background: rgba(23, 86, 94, 0.08); }

.mv-btn:focus-visible {
  outline: 3px solid rgba(156, 83, 52, 0.4);
  outline-offset: 2px;
}

/* ---- HEADER ----------------------------------------------- */

.mv-header {
  background: var(--mv-sand);
  border-bottom: 2px solid var(--mv-river);
  position: sticky; top: 0; z-index: 50;
}
.mv-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px var(--mv-gutter);
  max-width: var(--mv-maxw); margin: 0 auto;
}
.mv-header__logo { height: 44px; width: auto; }

/* The phone button never collapses, on any screen size. */
.mv-header__phone {
  background: var(--mv-river); color: var(--mv-white);
  padding: 10px 18px; border-radius: var(--mv-radius);
  font-weight: 500; text-decoration: none; white-space: nowrap;
}
.mv-header__phone:hover { background: var(--mv-river-dark); color: var(--mv-white); }

.mv-nav { display: none; gap: 24px; }
.mv-nav a { color: var(--mv-ink); text-decoration: none; font-weight: 500; }
.mv-nav a:hover { color: var(--mv-river); text-decoration: underline; }
@media (min-width: 900px) { .mv-nav { display: flex; } }

/* ---- HERO ------------------------------------------------- */

.mv-hero { background: var(--mv-sand-deep); padding: 56px 0 64px; }
.mv-hero__inner { max-width: var(--mv-maxw); margin: 0 auto; padding: 0 var(--mv-gutter); }
.mv-hero p { font-size: 20px; max-width: 56ch; }
.mv-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Photo variant — overlay keeps text readable */
.mv-hero--photo { position: relative; color: var(--mv-white); }
.mv-hero--photo::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(23, 86, 94, 0.55);
}
.mv-hero--photo .mv-hero__inner { position: relative; }
.mv-hero--photo h1, .mv-hero--photo p { color: var(--mv-white); }

/* ---- CARDS ------------------------------------------------ */

.mv-card {
  background: var(--mv-white);
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  padding: 24px;
  /* No drop shadow. The warm background does the separating. */
}
.mv-card--sand { background: var(--mv-sand-deep); }

.mv-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .mv-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .mv-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- SECTIONS --------------------------------------------- */

.mv-section { padding: 56px 0; }
.mv-section--alt { background: var(--mv-sand-deep); }

/* ---- PANEL / CALLOUT -------------------------------------- */

.mv-panel {
  background: var(--mv-sand-deep);
  border-left: 3px solid var(--mv-redgum);
  border-radius: 0 var(--mv-radius) var(--mv-radius) 0;
  padding: 20px 24px;
}

/* ---- TABLES ----------------------------------------------- */

.mv-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.mv-table th {
  background: var(--mv-river); color: var(--mv-white);
  text-align: left; font-weight: 700; padding: 12px;
}
.mv-table td { padding: 12px; border: 1px solid var(--mv-line); vertical-align: top; }
/* No zebra striping — it competes with the warm background. */

/* ---- FOOTER ----------------------------------------------- */

.mv-footer { background: var(--mv-river-dark); color: var(--mv-white); padding: 48px 0 32px; }
.mv-footer a { color: var(--mv-white); }
.mv-footer__legal {
  font-size: 14px; color: rgba(255,255,255,0.75);
  border-top: 1px solid rgba(255,255,255,0.2);
  margin-top: 28px; padding-top: 20px;
}
.mv-footer__logo { height: 52px; width: auto; margin-bottom: 20px; }

/* ---- ACCESSIBILITY ---------------------------------------- */

.mv-skip {
  position: absolute; left: -9999px;
  background: var(--mv-river); color: var(--mv-white);
  padding: 12px 20px; z-index: 100;
}
.mv-skip:focus { left: 12px; top: 12px; }

.mv-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- PRINT ------------------------------------------------ */

@media print {
  .mv-header, .mv-footer, .mv-btn { display: none; }
  body { background: #fff; font-size: 11pt; }
}