/* ==========================================================================
   Yan Yean Support Services Pty Ltd — Brand Stylesheet

   Wordmark-led. Pine and amber, drawn from the red gums and dry grassland
   around the Yan Yean Reservoir. Body type is Atkinson Hyperlegible, designed
   for low-vision readers — a functional choice for a disability provider.

   Fonts: Zilla Slab and Atkinson Hyperlegible. Both SIL Open Font License.
   ========================================================================== */

:root {

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

  --yy-pine:         #1E3A2F;  /* red gum canopy. Text and dominant dark.  */
  --yy-amber:        #C9962B;  /* dry summer grassland. The accent.        */
  --yy-amber-text:   #8C6314;  /* amber at text weight.                    */
  --yy-fern:         #4F6B5A;  /* understorey. Secondary, sparingly.       */
  --yy-cream:        #FBF9F4;  /* paperbark. Page ground.                  */
  --yy-sand:         #EFEBE1;  /* reservoir edge. Panels.                  */
  --yy-white:        #FFFFFF;

  /* Measured:
       pine       on cream    11.73  AAA
       amber-text on cream     5.10  AA
       cream      on pine     11.73  AAA
       amber      on pine      4.63  AA   (large text and rules on dark only)
       muted      on cream     7.79  AAA
     Body text is pine on cream. Amber is for rules, fills and large display.
     Amber-text is for links and short accent lines only. */

  --yy-text:         var(--yy-pine);
  --yy-text-muted:   #465249;
  --yy-bg:           var(--yy-cream);
  --yy-bg-panel:     var(--yy-sand);
  --yy-rule:         #DAD5C8;
  --yy-accent:       var(--yy-amber);
  --yy-accent-text:  var(--yy-amber-text);
  --yy-focus:        var(--yy-amber-text);

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

  --yy-font-display: 'Zilla Slab', Georgia, serif;
  --yy-font-body:    'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;

  --yy-size-xs:   0.889rem;
  --yy-size-base: 1.125rem;   /* 18px floor */
  --yy-size-lead: 1.375rem;
  --yy-size-h4:   1.375rem;
  --yy-size-h3:   1.75rem;
  --yy-size-h2:   2.25rem;
  --yy-size-h1:   3rem;
  --yy-size-hero: clamp(2.5rem, 6vw, 4rem);
  --yy-lh-tight:  1.15;
  --yy-lh-body:   1.65;

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

  --yy-measure: 66ch;
  --yy-container: 1140px;
  --yy-radius: 8px;      /* softer than the aged care brand — deliberate */
  --yy-radius-lg: 14px;
  --yy-border-strong: 3px solid var(--yy-accent);
}

/* PROPORTION: roughly 70% cream, 18% pine, 8% sand, 4% amber.
   Amber is the beam under the name and the rule on a card — not a wall colour. */

/* --------------------------------------------------------------------------
   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(--yy-bg);
  color: var(--yy-text);
  font-family: var(--yy-font-body);
  font-size: var(--yy-size-base);
  line-height: var(--yy-lh-body);
  -webkit-font-smoothing: antialiased;
}

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

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

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

a {
  color: var(--yy-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(--yy-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

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

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


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

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

.yy-section { padding-block: var(--yy-s6); }
.yy-section--tight { padding-block: var(--yy-s5); }
.yy-section--panel { background: var(--yy-bg-panel); }
.yy-section--dark  { background: var(--yy-pine); color: var(--yy-cream); }
.yy-section--dark a { color: var(--yy-amber); }
.yy-section--dark h1,
.yy-section--dark h2,
.yy-section--dark h3 { color: var(--yy-cream); }

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

.yy-btn--primary {
  background: var(--yy-pine);            /* 11.73:1 with cream text */
  color: var(--yy-cream);
}
.yy-btn--primary:hover { background: #142A21; }


.yy-btn--secondary {
  background: transparent;
  color: var(--yy-text);
  border-color: var(--yy-pine);
}
.yy-btn--secondary:hover { background: var(--yy-sand); }


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

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

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


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

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

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

.yy-callout {
  background: var(--yy-pine);
  color: var(--yy-cream);
  border-left: 4px solid var(--yy-amber);
  border-radius: var(--yy-radius);
  padding: var(--yy-s3) var(--yy-s4);
}


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

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

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

.yy-table th {
  background: var(--yy-pine);
  color: var(--yy-cream);
  font-family: var(--yy-font-display);
  font-weight: 600;
  text-align: left;
  padding: var(--yy-s2);
}

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

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


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

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

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

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

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

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

.yy-error { color: #8A2B1E; font-weight: 600; }   /* 8.16:1 on cream — AAA */


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

.yy-footer {
  background: var(--yy-pine);
  color: var(--yy-cream);
  padding-block: var(--yy-s5) var(--yy-s4);
  font-size: 1.0625rem;
}

.yy-footer a { color: var(--yy-amber); }

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

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

.yy-footer h4 {
  color: var(--yy-cream);
  font-size: 1.125rem;
  margin-bottom: var(--yy-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. */
.yy-legal {
  margin-top: var(--yy-s4);
  padding-top: var(--yy-s3);
  border-top: 1px solid rgba(251, 249, 244, 0.25);
  font-size: var(--yy-size-xs);
  line-height: 1.6;
  color: #D5D9CF;                     /* 8.61:1 on pine — AAA */
  max-width: 80ch;
}


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

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

.yy-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 {
  .yy-header, .yy-nav, .yy-hero__actions { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}