/*
  Mudgeeraba Early Childhood Centre — one page, hand-written CSS.

  The Homeground landing page is Astro with Tailwind v4, where the brand
  palette lives in an @theme block and the layout is utility classes. There
  is no build step here and nothing to share with a second page, so the same
  result is written out longhand: the utilities that page uses, resolved to
  the values they compile to, and the five brand colours as custom
  properties.

  Values are taken from src/styles/global.css in the homeground-website
  repository. If the brand palette ever changes there, it changes here by
  hand — there is no shared source, and pretending otherwise would be worse
  than saying so.
*/

:root {
  /* Brand palette. See the Homeground CLAUDE.md for what each one is for. */
  --eucalypt: #3d5245;
  --weatherboard: #faf7f1;
  --clay: #c0764f;
  --ink: #2b2b2b;

  /*
    TEXT-SAFE VARIANTS, not extra brand colours.

    Two of the five brand colours do not clear WCAG AA at body size, so
    these exist for lettering only. Measured against the weatherboard page
    background, which is the only surface on this page:
      --eucalypt-soft  #52645A  5.90:1  passes AA normal
      --clay-deep      #8F5130  5.80:1  passes AA normal

    Brand clay (#C0764F) is 3.30:1 on weatherboard — fine for a rule or a
    border, a fail for anything that reads as words. It appears below only
    as a focus outline, which is a graphical object at the 3:1 bar.
  */
  --eucalypt-soft: #52645a;
  --clay-deep: #8f5130;

  /*
    ONE TYPEFACE, AND NO WEB FONT FILE.

    This stack resolves to a humanist or geometric sans already present on
    every target device. It costs zero bytes, cannot cause a layout shift,
    and matches what the Homeground site serves today. Same [PLACEHOLDER]
    caveat as there: swap for the licensed brand face if one is ever chosen.
  */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

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

body {
  /* The landing page is a full-height column: content centred in the space
     that is left once the footer has taken what it needs. */
  display: flex;
  min-height: 100vh;
  /* dvh after vh, so a browser that lacks it keeps the line above rather
     than dropping the declaration. Mobile address bars make 100vh too tall
     and the footer slips below the fold without this. */
  min-height: 100dvh;
  flex-direction: column;
  margin: 0;

  background-color: var(--weatherboard);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 1.5rem;
  text-align: center;
}

h1 {
  /* Regular weight and open letter-spacing, per the brand rules — never
     bold-shouty. The brand's lowercase transform is deliberately NOT applied
     here; see the note in index.html.

     clamp() rather than a breakpoint: the name is four longish words and the
     thing that matters is that it never wraps mid-word on a narrow phone,
     which a fluid size handles without a media query. */
  margin: 0;
  max-width: 24rem;
  color: var(--eucalypt);
  font-size: clamp(1.75rem, 6.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.lead {
  margin: 2rem 0 0;
  max-width: 30rem;
  color: var(--eucalypt-soft);
  font-size: 1rem;
  line-height: 1.625;
  text-wrap: pretty;
}

/* The second lead sits closer to the first — they are two halves of one
   statement, not two separate thoughts. */
.lead + .lead {
  margin-top: 1rem;
}

.eyebrow {
  margin: 3.5rem 0 0;
  color: var(--clay-deep);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
}

footer {
  padding: 0 1.5rem 3rem;
  text-align: center;
}

address {
  color: var(--eucalypt-soft);
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.625;
}

address .org {
  display: block;
  color: var(--eucalypt);
}

address span {
  display: block;
}

/* The phone takes a line of its own. The email is inline-block so its
   underline stops at the end of the address rather than running the full
   width of the footer. */
address .block {
  display: block;
  margin-top: 0.25rem;
}

address .break {
  display: inline-block;
}

/* The email is long enough to overflow a narrow phone otherwise. */
address .break {
  word-break: break-all;
}


a {
  color: inherit;
  text-decoration: underline;
  /* 25% eucalypt: present enough to read as a link, quiet enough not to
     fight the text. The full-strength rule arrives on hover. */
  text-decoration-color: rgb(61 82 69 / 0.25);
  text-underline-offset: 4px;
  transition: color 150ms, text-decoration-color 150ms;
}

a:hover {
  color: var(--eucalypt);
  text-decoration-color: var(--eucalypt);
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}

/* Visible keyboard focus, in the one place brand clay is allowed on this
   page: a graphical object, where the bar is 3:1 rather than 4.5:1. */
:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (min-width: 40rem) {
  main {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  /* Four long words break to three lines inside the narrow phone measure,
     which looks cramped once there is room for two. `balance` then splits
     them evenly rather than leaving one word stranded. */
  h1 {
    max-width: 34rem;
  }

  .lead {
    font-size: 1.125rem;
  }
}