/* Caring And Sharing Disability Services — shared styles
   Colour direction and layout inspired by mcl.org.au, scaled down; see docs/sitemap.md */

:root {
  --navy: #233144;
  --navy-dark: #17212f;
  --blue: #2f6fa8;
  --blue-dark: #1f4e78;
  --off-white: #f7f7f7;
  --white: #ffffff;
  --text: #233144;
  --muted: #5b6472;
  --border: #e1e4e8;
  --focus: #1a5fb4;
  --max-width: 1100px;
}

* {
  box-sizing: border-box;
}

html {
  /* The desktop header is sticky (~141px) — keep anchor jumps (the skip
     link) and keyboard-focus scrolling from landing hidden underneath it
     (WCAG 2.4.11). Reset to 0 below wherever the header isn't sticky. */
  scroll-padding-top: 150px;
}

/* Smooth scrolling only for people who haven't asked their device to
   reduce motion — animated scrolling can trigger dizziness/nausea for
   people with vestibular conditions. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  /* Let long unbroken strings (the email address especially) wrap instead
     of forcing sideways scrolling when a visitor enlarges their text size —
     at 150-200% the email alone overflowed a 320px screen (WCAG 1.4.10). */
  overflow-wrap: anywhere;
}

img {
  max-width: 100%;
}

a {
  color: var(--blue-dark);
}

a:hover {
  color: var(--blue);
}

/* Browsers italicise <address> by default — harder to read for low-vision
   and dyslexic visitors. */
address {
  font-style: normal;
}

/* The email in an <address> block stands alone rather than inside a
   sentence, so give it the same ~44px touch target as the footer links. */
address a {
  display: inline-block;
  padding: 0.6rem 0;
}

/* Visible, high-contrast focus ring for keyboard users on every focusable element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  left: 0;
}

/* -- Header / nav ---------------------------------------------------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* On phones (and any short/landscape screen) a sticky 141px header ate
   25% of a portrait screen and 38% in landscape. Let it scroll away there
   instead of shrinking the logo, which was enlarged on purpose. */
@media (max-width: 720px), (max-height: 500px) {
  .site-header {
    position: static;
  }
  html {
    scroll-padding-top: 0;
  }
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1.2;
}

/* The logo is a square icon+wordmark combo, so it needs real height in the
   header for the text inside it to stay legible — a typical short/wide
   navbar-height logo wouldn't work here. */
.brand img {
  display: block;
  height: 108px;
  width: auto;
}

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--navy);
  border-radius: 6px;
  /* Buttons don't inherit the page font by default — it rendered in the
     system font, not Mulish. */
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 1rem;
  /* 44px minimum touch target (was 35px tall). */
  min-height: 44px;
  min-width: 44px;
  color: var(--navy);
  cursor: pointer;
}

.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}

.primary-nav a[aria-current="page"] {
  color: var(--blue-dark);
  border-bottom: 2px solid var(--blue-dark);
}

@media (max-width: 720px) {
  .nav-toggle {
    display: inline-block;
  }
  .primary-nav {
    width: 100%;
  }
  /* Only collapse the menu once JS is confirmed running (see js/nav.js) —
     without JS, .js-enhanced is never added and the full list stays visible. */
  .primary-nav.js-enhanced {
    display: none;
  }
  .primary-nav.js-enhanced.open {
    display: block;
  }
  .primary-nav ul {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border);
  }
  .primary-nav a {
    display: block;
    padding: 0.85rem 1.25rem;
  }
  .header-inner {
    flex-wrap: wrap;
  }
}

/* -- Layout helpers ---------------------------------------------------- */

main {
  display: block;
}

.section {
  padding: 3rem 1.25rem;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-alt {
  /* Off-white base plus a very faint dot grid for texture, so these
     sections don't read as flat blocks of colour. */
  background-color: var(--off-white);
  background-image: radial-gradient(circle, rgba(35, 49, 68, 0.07) 1px, transparent 1.6px);
  background-size: 22px 22px;
}

.section-navy {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

/* A soft, oversized glow in the corner — decorative only, no photos to work
   with yet, so this stands in for the kind of accent mcl.org.au gets from
   real client photography. Purely CSS, no image request, no CSP change. */
.section-navy::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.section-navy .section-inner {
  position: relative;
  z-index: 1;
}

.section-navy a {
  color: #cfe3ff;
}

h1, h2, h3 {
  color: var(--navy);
  line-height: 1.25;
}

.section-navy h1,
.section-navy h2,
.section-navy h3 {
  color: var(--white);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue-dark);
}

.section-navy .eyebrow {
  color: #a9cdf0;
}

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 65ch;
}

.section-navy .lede {
  color: #d7dee8;
}

/* -- Hero ---------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--off-white);
  padding: 3.5rem 1.25rem;
}

/* Two soft blue blobs, opposite corners — same idea as the navy section's
   glow, in the page's accent colour instead of white. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  top: -90px;
  right: -70px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(47, 111, 168, 0.14), rgba(47, 111, 168, 0) 70%);
}

.hero::after {
  bottom: -110px;
  left: -90px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(35, 49, 68, 0.08), rgba(35, 49, 68, 0) 70%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.75rem;
}

.button-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* -- Buttons ---------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
}

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

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

.btn-secondary:hover {
  background: var(--navy);
  color: var(--white);
}

/* Buttons sitting on a .section-navy background need inverted colours.
   Kept as classes (not inline style="") because the CSP has no
   'unsafe-inline' in style-src — see docs/sitemap.md security notes. */
.section-navy .btn-primary {
  background: var(--white);
  color: var(--navy);
}

.section-navy .btn-primary:hover {
  background: #e6e6e6;
}

.section-navy .btn-secondary {
  border-color: var(--white);
  color: var(--white);
}

.section-navy .btn-secondary:hover {
  background: var(--white);
  color: var(--navy);
}

/* -- Cards ---------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}

.section-alt .card {
  background: var(--white);
}

.card h3 {
  margin-top: 0;
}

.card-icon {
  width: 42px;
  height: 42px;
  color: var(--blue-dark);
  margin-bottom: 0.75rem;
}

/* -- Team ---------------------------------------------------- */

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

/* -- Forms ---------------------------------------------------- */

form {
  max-width: 640px;
}

.field {
  margin-bottom: 1.25rem;
}

label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.hint {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  color: var(--text);
  background: var(--white);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 1.25rem;
  padding: 1rem;
}

legend {
  font-weight: 700;
  padding: 0 0.5rem;
}

.required-note {
  color: var(--muted);
  font-size: 0.9rem;
}

.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-weight: 600;
}

.form-status[data-state="success"] {
  background: #e4f4ee;
  color: #1c5c46;
  border: 1px solid #b6e0cc;
}

.form-status[data-state="error"] {
  background: #fbe9e7;
  color: #8a2e1f;
  border: 1px solid #f0c3ba;
}

.form-status[hidden] {
  display: none;
}

/* -- FAQ ---------------------------------------------------- */

details.faq {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
  background: var(--white);
}

/* Padding lives on the summary (not the details box) so the whole card
   width/height is the tap target — it was only the 26px-tall text line. */
details.faq summary {
  font-weight: 700;
  cursor: pointer;
  padding: 1rem 1.25rem;
}

details.faq p {
  margin: 0;
  padding: 0 1.25rem 1rem;
}

/* -- Footer ---------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--navy);
  color: #d7dee8;
  padding: 2.5rem 1.25rem;
}

/* Thin gradient accent line along the top edge — a blue-toned nod to the
   gradient dividers mcl.org.au uses, kept to our own blue+white palette. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--navy-dark));
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.footer-inner h2 {
  color: var(--white);
  font-size: 1rem;
  margin-top: 0;
}

.site-footer a {
  color: #cfe3ff;
}

.footer-inner ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Footer links were 20px-tall tap targets; padding brings each to ~44px
   without changing the visual spacing much. */
.footer-inner li a {
  display: inline-block;
  padding: 0.6rem 0;
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 2rem auto 0;
  border-top: 1px solid #37455a;
  padding-top: 1.25rem;
  font-size: 0.9rem;
  color: #9aa7b8;
}

/* -- Utility ---------------------------------------------------- */

.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;
}

.note-callout {
  background: #fff8e6;
  border: 1px solid #f0dfa8;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}