/* ==========================================================================
   Diamond Valley Home Care Pty Ltd — Brand Stylesheet

   One company, one name, one mark.

   Colour is drawn from the mudbrick architecture of Eltham and the
   surrounding bushland — not from a mood board. Every value below has a
   stated source. Every text pair has a measured contrast ratio.

   Fonts: Archivo and Source Sans 3. Both SIL Open Font License.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {

  /* Colour — sources stated, ratios measured against WCAG 2.1 ------------- */

  --dv-ironbark:        #2B2724;  /* ironbark trunk. Body text and the mark. */
  --dv-mudbrick:        #8A3A1C;  /* fired Eltham brick. Primary accent.     */
  --dv-mudbrick-deep:   #6B2C14;  /* wet brick. Text-weight accent.          */
  --dv-ochre:           #C1873F;  /* dry clay bank. Highlight only.          */
  --dv-eucalypt:        #55684F;  /* box gum leaf. Secondary, sparingly.     */
  --dv-eucalypt-deep:   #44543F;  /* leaf shadow. Text-weight accent.        */
  --dv-stone:           #E8E6E1;  /* river stone, cool. Panels and quiet grounds. */
  --dv-paper:           #FCFBF9;  /* limewash. Page ground.                  */
  --dv-white:           #FFFFFF;

  /* Measured ratios — do not assume, these were calculated:
       ironbark      on paper   14.32   AAA
       ironbark      on stone   11.87   AAA
       mudbrick      on paper    7.51   AAA
       mudbrick-deep on paper   10.18   AAA
       eucalypt-deep on paper    7.85   AAA
       eucalypt      on paper    5.84   AA
       paper         on ironbark 14.32  AAA
       paper on mudbrick-deep   10.18   AAA
       ochre         on ironbark 4.80   AA
     Body text uses ironbark on paper. Accent text uses the -deep values.
     The lighter mudbrick and eucalypt are for fills and rules, not body text. */

  /* Semantic assignments -------------------------------------------------- */

  --dv-text:            var(--dv-ironbark);
  --dv-text-muted:      #5C544E;          /* 7.17:1 on paper — AAA */
  --dv-bg:              var(--dv-paper);
  --dv-bg-panel:        var(--dv-stone);
  --dv-rule:            #DCD5CA;
  --dv-accent:          var(--dv-mudbrick);
  --dv-accent-text:     var(--dv-mudbrick-deep);
  --dv-focus:           var(--dv-mudbrick-deep);

  /* Type ------------------------------------------------------------------ */

  --dv-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --dv-font-body:    'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

  /* Scale. Body starts at 18px — this is the floor, not a suggestion.
     Aged care audiences read at distance and often with reduced vision. */

  --dv-size-xs:   0.889rem;  /* 16px — captions and legal lines only */
  --dv-size-base: 1.125rem;  /* 18px — body minimum                  */
  --dv-size-lead: 1.375rem;  /* 22px — intro paragraphs              */
  --dv-size-h4:   1.375rem;
  --dv-size-h3:   1.75rem;
  --dv-size-h2:   2.25rem;
  --dv-size-h1:   3rem;
  --dv-size-hero: clamp(2.5rem, 6vw, 4rem);

  --dv-lh-tight:  1.15;
  --dv-lh-body:   1.65;

  /* Space — 8px base ------------------------------------------------------ */

  --dv-s1: 0.5rem;
  --dv-s2: 1rem;
  --dv-s3: 1.5rem;
  --dv-s4: 2rem;
  --dv-s5: 3rem;
  --dv-s6: 4.5rem;
  --dv-s7: 6rem;

  /* Structure ------------------------------------------------------------- */

  --dv-measure: 68ch;
  --dv-container: 1140px;
  --dv-radius: 3px;      /* mudbrick has a soft edge, not a rounded one */
  --dv-radius-lg: 6px;
  --dv-border-strong: 3px solid var(--dv-accent);
}

/* PROPORTION — the rule that keeps the palette from going muddy.
   Roughly 75% paper, 15% ironbark, 7% stone, 3% accent.
   Mudbrick and eucalypt are seasoning, not ingredients. If a page looks
   brown, too much accent has been used. */



/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */

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

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

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

body {
  margin: 0;
  background: var(--dv-bg);
  color: var(--dv-text);
  font-family: var(--dv-font-body);
  font-size: var(--dv-size-base);
  line-height: var(--dv-lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--dv-font-display);
  font-weight: 600;
  line-height: var(--dv-lh-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--dv-s2);
  text-wrap: balance;
}

h1 { font-size: var(--dv-size-h1); }
h2 { font-size: var(--dv-size-h2); }
h3 { font-size: var(--dv-size-h3); }
h4 { font-size: var(--dv-size-h4); font-weight: 500; }

p, li { max-width: var(--dv-measure); }
p { margin: 0 0 var(--dv-s2); }

a {
  color: var(--dv-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

/* Focus is visible and unmistakable. Never remove this. */
:focus-visible {
  outline: 3px solid var(--dv-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

img, svg { max-width: 100%; height: auto; }

.dv-skip-link {
  position: absolute;
  left: -9999px;
  background: var(--dv-ironbark);
  color: var(--dv-paper);
  padding: var(--dv-s2) var(--dv-s3);
}
.dv-skip-link:focus { left: var(--dv-s2); top: var(--dv-s2); z-index: 100; }


/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.dv-container {
  width: 100%;
  max-width: var(--dv-container);
  margin-inline: auto;
  padding-inline: var(--dv-s3);
}

.dv-section { padding-block: var(--dv-s6); }
.dv-section--tight { padding-block: var(--dv-s5); }
.dv-section--panel { background: var(--dv-bg-panel); }
.dv-section--dark  { background: var(--dv-ironbark); color: var(--dv-paper); }
.dv-section--dark a { color: var(--dv-ochre); }
.dv-section--dark h1,
.dv-section--dark h2,
.dv-section--dark h3 { color: var(--dv-paper); }

.dv-grid {
  display: grid;
  gap: var(--dv-s4);
  grid-template-columns: 1fr;
}

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


/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */

.dv-header {
  background: var(--dv-paper);
  border-bottom: 1px solid var(--dv-rule);
  position: sticky;
  top: 0;
  z-index: 40;
}

.dv-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-s3);
  padding-block: var(--dv-s2);
}

.dv-header__logo img,
.dv-header__logo svg { height: 52px; width: auto; display: block; }

.dv-nav {
  display: flex;
  gap: var(--dv-s3);
  align-items: center;
  flex-wrap: wrap;
}

.dv-nav a {
  font-family: var(--dv-font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--dv-text);
  text-decoration: none;
  padding-block: var(--dv-s1);
  border-bottom: 2px solid transparent;
}
.dv-nav a:hover,
.dv-nav a[aria-current="page"] {
  border-bottom-color: var(--dv-accent);
}

/* The phone number is a primary navigation item, not a footer detail. */
.dv-header__phone {
  font-family: var(--dv-font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--dv-accent-text);
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .dv-header__inner { flex-wrap: wrap; }
  .dv-nav { width: 100%; gap: var(--dv-s2); }
}


/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */

.dv-hero {
  background: var(--dv-paper);
  border-bottom: 1px solid var(--dv-rule);
  padding-block: var(--dv-s6) var(--dv-s5);
}

.dv-hero__title {
  font-size: var(--dv-size-hero);
  font-weight: 600;
  max-width: 20ch;
  margin-bottom: var(--dv-s3);
}

.dv-hero__lead {
  font-size: var(--dv-size-lead);
  line-height: 1.5;
  max-width: 54ch;
  color: var(--dv-text);
}

.dv-hero__actions {
  display: flex;
  gap: var(--dv-s2);
  flex-wrap: wrap;
  margin-top: var(--dv-s4);
}


/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */

.dv-btn {
  display: inline-block;
  font-family: var(--dv-font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: var(--dv-radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  min-height: 48px;          /* touch target floor */
  transition: background-color .15s ease, color .15s ease;
}

.dv-btn--primary {
  background: var(--dv-mudbrick-deep);   /* 7.64:1 with paper text */
  color: var(--dv-paper);
}
.dv-btn--primary:hover { background: var(--dv-ironbark); }


.dv-btn--secondary {
  background: transparent;
  color: var(--dv-text);
  border-color: var(--dv-ironbark);
}
.dv-btn--secondary:hover { background: var(--dv-stone); }


/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */

.dv-card {
  background: var(--dv-white);
  border: 1px solid var(--dv-rule);
  border-left: var(--dv-border-strong);
  border-radius: var(--dv-radius);
  padding: var(--dv-s3);
}

.dv-card h3 { font-size: var(--dv-size-h4); margin-bottom: var(--dv-s1); }
.dv-card p:last-child { margin-bottom: 0; }
.dv-card p { max-width: none; }


/* --------------------------------------------------------------------------
   8. PANELS AND CALLOUTS
   -------------------------------------------------------------------------- */

.dv-panel {
  background: var(--dv-stone);
  border-left: var(--dv-border-strong);
  border-radius: var(--dv-radius);
  padding: var(--dv-s3) var(--dv-s4);
}

.dv-panel__title {
  font-family: var(--dv-font-display);
  font-weight: 600;
  font-size: var(--dv-size-h4);
  margin: 0 0 var(--dv-s1);
}

.dv-callout {
  background: var(--dv-ironbark);
  color: var(--dv-paper);
  border-left: 4px solid var(--dv-ochre);
  border-radius: var(--dv-radius);
  padding: var(--dv-s3) var(--dv-s4);
}


/* --------------------------------------------------------------------------
   9. TABLES
   -------------------------------------------------------------------------- */

.dv-table-wrap { overflow-x: auto; }

.dv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dv-size-base);
}

.dv-table th {
  background: var(--dv-ironbark);
  color: var(--dv-paper);
  font-family: var(--dv-font-display);
  font-weight: 600;
  text-align: left;
  padding: var(--dv-s2);
}

.dv-table td {
  padding: var(--dv-s2);
  border-bottom: 1px solid var(--dv-rule);
  vertical-align: top;
}

.dv-table tbody tr:nth-child(even) td { background: var(--dv-paper); }


/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */

.dv-field { margin-bottom: var(--dv-s3); }

.dv-label {
  display: block;
  font-family: var(--dv-font-display);
  font-weight: 500;
  margin-bottom: var(--dv-s1);
}

.dv-input,
.dv-textarea,
.dv-select {
  width: 100%;
  font-family: var(--dv-font-body);
  font-size: var(--dv-size-base);
  padding: 0.75rem;
  min-height: 48px;
  background: var(--dv-white);
  border: 2px solid var(--dv-rule);
  border-radius: var(--dv-radius);
  color: var(--dv-text);
}

.dv-input:focus,
.dv-textarea:focus,
.dv-select:focus { border-color: var(--dv-accent-text); }

.dv-hint { font-size: var(--dv-size-xs); color: var(--dv-text-muted); margin-top: var(--dv-s1); }

.dv-error { color: #8A2B1E; font-weight: 600; }   /* 8.31:1 on paper — AAA */


/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */

.dv-footer {
  background: var(--dv-ironbark);
  color: var(--dv-paper);
  padding-block: var(--dv-s5) var(--dv-s4);
  font-size: 1.0625rem;
}

.dv-footer a { color: var(--dv-ochre); }

.dv-footer__grid {
  display: grid;
  gap: var(--dv-s4);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .dv-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.dv-footer__logo img { height: 56px; width: auto; }

.dv-footer h4 {
  color: var(--dv-paper);
  font-size: 1.125rem;
  margin-bottom: var(--dv-s2);
}

/* The legal line. Required on every page. Never smaller than 16px, never
   grey-on-grey. A provider that hides its complaints number looks like it
   has something to hide. */
.dv-legal {
  margin-top: var(--dv-s4);
  padding-top: var(--dv-s3);
  border-top: 1px solid rgba(252, 251, 249, 0.25);
  font-size: var(--dv-size-xs);
  line-height: 1.6;
  color: #D8D2CA;                     /* 9.86:1 on ironbark — AAA */
  max-width: 80ch;
}


/* --------------------------------------------------------------------------
   12. UTILITIES
   -------------------------------------------------------------------------- */

.dv-lead   { font-size: var(--dv-size-lead); line-height: 1.5; }
.dv-muted  { color: var(--dv-text-muted); }
.dv-stack > * + * { margin-top: var(--dv-s2); }
.dv-flow   { max-width: var(--dv-measure); }

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


/* --------------------------------------------------------------------------
   13. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .dv-header, .dv-nav, .dv-hero__actions { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}