/* Ledgemere Country Condominium Association. Layout and colours follow the old WordPress.com (Assembler) site. */
:root {
  --green: #2f5d3a;
  --green-dark: #1f3d27;
  --ink: #1d2a20;
  --muted: #4b5a4f;
  --line: #d8dfd5;
  --stone: #f5f2eb;
  --bg: #ffffff;
  --content: 620px;
  --wide: 1200px;
  --gutter: clamp(16px, 4vw, 2.5rem);
  --gap: 1.25rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid #d9a520; outline-offset: 2px; }
img { max-width: 100%; height: auto; }
figure { margin: 0; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; color: var(--ink); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }

/* ---------------------------------------------------------------- header + menu */
.site-header { background: var(--green-dark); color: #fff; }
.site-header .inner {
  max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 1rem var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
}
.site-title { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.4rem; font-size: .95rem; }
.menu a, .menu button {
  display: block; color: #fff; text-decoration: none; background: none; border: 0; font: inherit; line-height: 1.4;
  padding: .25rem 0; cursor: pointer;
}
.menu a:hover, .menu button:hover, .menu a[aria-current] { text-decoration: underline; text-underline-offset: .3em; }
.has-sub { position: relative; }
.has-sub > button::after {
  content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .45em; position: relative; top: -.2em;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.nav-toggle { display: none; }

@media (min-width: 900px) {
  .sub {
    position: absolute; top: 100%; left: -1rem; z-index: 5; min-width: 15rem; padding: .5rem 0 !important;
    background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    display: none;
  }
  .sub a { display: block; color: var(--ink); padding: .45rem 1rem; }
  .sub a:hover, .sub a[aria-current] { background: var(--stone); }
  .has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub > button[aria-expanded=true] + .sub { display: block; }
  /* hover bridge so the menu doesn't close crossing the gap */
  .has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .5rem; }
}

@media (max-width: 899.98px) {
  .site-header nav { flex-basis: 100%; }
  .menu { flex-direction: column; gap: 0; padding: .5rem 0 .25rem; font-size: 1.05rem; }
  .menu a, .menu button { display: block; padding: .45rem 0; }
  .has-sub > button { pointer-events: none; font-weight: 600; }
  .has-sub > button::after { display: none; }
  .sub { padding-left: 1rem !important; border-left: 2px solid rgba(255,255,255,.25); margin: 0 0 .25rem .1rem !important; }
  .js .nav-toggle {
    display: inline-block; color: #fff; background: none; border: 1.5px solid rgba(255,255,255,.7); border-radius: 6px;
    font: inherit; font-size: .95rem; padding: .35rem .9rem; cursor: pointer;
  }
  .js .site-header nav { display: none; }
  .js .menu-open .site-header nav { display: block; }
}

/* ---------------------------------------------------------------- page layout */
main { padding: 0 var(--gutter) 4rem; }
main.is-page { padding-top: clamp(2rem, 6vw, 4.5rem); }
.page-head { max-width: var(--content); margin: 0 auto 2.5rem; text-align: center; }
.page-title { font-size: clamp(2rem, 4.2vw, 2.6rem); line-height: 1.2; font-weight: 500; margin: 0; }
.page-meta { color: var(--muted); font-size: .9rem; margin: .75rem 0 0; }

.entry > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
.entry > .alignwide { max-width: var(--wide); }
.entry > div:not([class]) { margin-left: auto !important; margin-right: auto !important; } /* :::html blocks set inline margins */
.entry > .alignfull {
  max-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
}
.alignfull > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
.alignfull > .alignwide { max-width: var(--wide); }
.is-front .entry > .alignfull:first-child { margin-top: 0; }

/* vertical rhythm: blocks have no outer margins; siblings are spaced */
.entry * { margin-top: 0; margin-bottom: 0; }
.entry > * + *, .wp-block-group > * + *, .wp-block-column > * + *, details > * + *, li > ul, li > ol { margin-top: var(--gap); }
.entry > .wp-block-group.alignwide + .wp-block-group.alignwide { margin-top: 3rem; }
.entry > .alignfull + * { margin-top: 2.5rem; }
li > ul, li > ol { margin-top: .25rem; }
.entry > h2, .entry > h3 { margin-top: 2.5rem; }
.wp-block-group > h2 + *, .wp-block-group > h3 + * { margin-top: 1rem; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 2.6vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
ul, ol { padding-left: 1.4rem; }
li + li { margin-top: .25rem; }
strong { font-weight: 650; }
hr.wp-block-separator { border: 0; border-top: 1px solid var(--line); }
.has-text-align-center { text-align: center; }

/* groups (hero, tiles, cards, callouts): colours and padding are inline in the markup */
.wp-block-group { border-style: solid; border-width: 0; }
.has-border-color { border-width: 1px; }
.wp-block-group.has-background:not(.alignfull) { overflow-wrap: anywhere; }
.alignfull.has-background { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }

/* columns and grids */
.wp-block-columns { display: flex; flex-wrap: wrap; gap: 2rem; align-items: stretch; }
.wp-block-columns.alignwide { gap: 1.25rem; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-columns.alignwide > .wp-block-column > .has-border-color:only-child { height: 100%; }
.wp-block-column:empty { visibility: hidden; }
@media (max-width: 781.98px) {
  .wp-block-columns { flex-direction: column; }
  .wp-block-column { flex-basis: auto; }
  .wp-block-column:empty { display: none; }
}

/* buttons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.wp-block-button__link { display: inline-block; text-decoration: none; line-height: 1.3; border: 2px solid transparent; }
.wp-block-button__link:hover { filter: brightness(1.08); text-decoration: underline; }
.is-style-outline .wp-block-button__link { background: transparent; }

/* images */
.wp-block-image img { display: block; }
.wp-block-image.is-resized img { max-width: 100%; }
.wp-block-image figcaption { color: var(--muted); font-size: .85rem; margin-top: .5rem; }

/* tables */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.wp-block-table th, .wp-block-table td { padding: .55rem .75rem; text-align: left; vertical-align: top; border: 1px solid var(--line); }
.wp-block-table thead th { background: var(--green-dark); color: #fff; font-weight: 600; border-color: var(--green-dark); }
.is-style-stripes tbody tr:nth-child(odd) { background: var(--stone); }
.entry > .wp-block-table { max-width: max(var(--content), min(860px, 100%)); }

/* FAQ / collapsible */
.wp-block-details { border: 1px solid var(--line); border-radius: 6px; padding: .7rem 1rem; }
.wp-block-details + .wp-block-details { margin-top: .6rem; }
.wp-block-details summary { cursor: pointer; font-weight: 600; }
.wp-block-details[open] summary { margin-bottom: .75rem; }

/* news list */
.post-card { border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; }
.post-card + .post-card { margin-top: 1.25rem; }
.post-date { font-size: .85rem; color: var(--muted); }
.post-title { font-size: 1.5rem; margin-top: .25rem !important; }
.post-title a { text-decoration: none; }
.post-title a:hover { text-decoration: underline; }
.post-card .post-title + p { margin-top: .75rem; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--green-dark); color: #fff; font-size: .95rem; }
.site-footer .inner { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 3rem var(--gutter) 2rem; }
.site-footer h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: .3rem; }
.site-footer p { margin: 0; }
.site-footer .wp-block-columns { gap: 2rem; }
.site-footer .maintained { color: #d6e2d8; font-size: .85rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.2); }

@media print {
  .site-header nav, .nav-toggle, .site-footer .wp-block-columns { display: none; }
  .site-header, .site-footer { background: none; color: var(--ink); }
  .site-title { color: var(--ink); }
}