/* Pacific Park Place Housing Co-operative — static site
   ---------------------------------------------------------------------------
   Values below were MEASURED from the live WordPress site (Twenty Twenty-One)
   at a 1920px viewport, not guessed:

     container      1240px centred          text column   610px centred
     body text      20px / 1.7              site title    24px, uppercase
     page heading   96px, weight 300        section head  20px, weight 400,
     background     #d1e4dd                               uppercase
     text           #28303d                 footer        16px

   One stylesheet, no build step, no JavaScript. Edit and upload.            */

:root {
  --bg:      #d1e4dd;
  --text:    #28303d;
  --muted:   #4f5b62;
  --rule:    #39414d;
  --content: 610px;    /* the text column */
  --wide:    1240px;   /* header, headings, footer rule */
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1.25rem;      /* 20px */
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 2rem; }

/* ---------- header / navigation ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 2.5rem 0 2rem;
}

.site-title {
  margin: 0;
  font-size: 1.5rem;       /* 24px */
  font-weight: 400;
  text-transform: uppercase;
}
.site-title a { text-decoration: none; }
.site-title a:hover { text-decoration: underline; }

/* Direct-child selector only. A plain `.nav ul` would also match the submenu,
   and would override its `display: none` on specificity — leaving the dropdown
   permanently open and laid out sideways. */
.nav > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a { text-decoration: none; }
.nav a:hover,
.nav a:focus,
.nav [aria-current="page"] { text-decoration: underline; }

/* Submenu under "Member Manual" — opens on hover and on keyboard focus.
   No JavaScript. */
.has-sub { position: relative; }
.has-sub > a::after { content: " \25BE"; font-size: .7em; }

.sub {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10;
  display: none;
  min-width: 18rem;
  margin: 0;
  padding: .9rem 1.2rem;
  list-style: none;
  font-size: 1.05rem;
  background: var(--bg);
  border: 1px solid var(--rule);
}
.sub li + li { margin-top: .5rem; }
.has-sub:hover  .sub,
.has-sub:focus-within .sub { display: block; }

/* ---------- content ---------- */

main { padding: 1rem 0 4rem; }

/* The page heading spans the full container, left aligned. The body text sits
   in a narrower centred column — that offset is the theme's signature. */
h1 {
  font-size: clamp(2.75rem, 5vw, 6rem);   /* 6rem = the measured 96px */
  font-weight: 300;
  line-height: 1.1;
  margin: 1rem 0 3rem;
}

.entry { max-width: var(--content); margin: 0 auto; }

/* Section headings on the original are plain uppercase paragraphs at body size
   and weight. Marked up as real headings here — same look, better structure
   for screen readers. */
h2 {
  font-size: 1.25rem;
  font-weight: 400;
  text-transform: uppercase;
  margin: 2.5rem 0 1rem;
}

p { margin: 0 0 1.7rem; }

a { color: var(--text); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0 0 1.7rem; padding-left: 1.4rem; }
li { margin-bottom: .6rem; }

/* Document lists — the PDF links that make up most of this site. */
.docs { list-style: none; padding-left: 0; }
.docs li { margin-bottom: .8rem; }

/* Attribute selector, so the label follows the link type automatically —
   nothing to remember when adding or changing a link. */
.docs a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: .8em;
  color: var(--muted);
  text-decoration: none;
}
.docs .nolink { color: var(--muted); }

/* The home page photo sits inside the text column at its natural 562x500 —
   measured from the live site. Not stretched to the container width. */
.figure { max-width: 562px; margin: 0 auto 3.5rem; }
.figure img { width: 100%; height: auto; display: block; }

.address { font-style: normal; margin-bottom: 1.7rem; }

.note {
  border-left: 3px solid var(--rule);
  padding: .25rem 0 .25rem 1.25rem;
  margin: 2.5rem 0;
  color: var(--muted);
}

/* ---------- footer ---------- */

.site-footer {
  max-width: var(--content);
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  font-size: 1rem;         /* 16px */
  color: var(--muted);
}

/* ---------- small screens ---------- */

@media (max-width: 800px) {
  .wrap { padding: 0 1.25rem; }
  body { font-size: 1.125rem; }
  .site-header { padding: 1.5rem 0; display: block; }
  .site-title { margin-bottom: 1rem; }
  h1 { margin-bottom: 2rem; }

  /* Hover dropdowns do not work on touch — show the submenu inline instead. */
  .nav > ul { flex-direction: column; gap: .7rem; }
  .sub {
    position: static;
    display: block;
    border: 0;
    padding: .4rem 0 0 1.25rem;
    min-width: 0;
    font-size: 1rem;
  }
  .has-sub > a::after { content: ""; }
}