@font-face { font-family: Figtree; font-style: normal; font-weight: 400; font-display: swap;
            src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 600; font-display: swap;
            src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 700; font-display: swap;
            src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2"); }

/* ==========================================================================
   Mountain View Shores Association
   Brand theme layered over Bootstrap 5.3.

   Bootstrap supplies the grid, navbar, offcanvas, buttons and utilities.
   This file only does two things:
     1. sets the brand tokens (colour, type, radii, shadow)
     2. defines the handful of components Bootstrap does not ship

   Colours come from the association logo. Green is the association,
   navy is the water, sand is the warm accent. Do not add a fourth hue.
   ========================================================================== */

:root {
  /* brand */
  --mv-green:        #015E37;   /* logo green. primary action colour       */
  --mv-green-dark:   #053D26;   /* dark panels                             */
  --mv-green-deep:   #044A2B;   /* keylines on green                       */
  --mv-green-pale:   #EDF3EF;   /* tinted backgrounds, footer              */
  --mv-green-bright: #7FD3A4;   /* headings on dark green only             */
  --mv-navy:         #0B3C7A;   /* water. the pond graphic, nothing else   */
  --mv-navy-pale:    #CFE0EE;
  --mv-sand:         #F6E6C9;   /* warm band                               */
  --mv-sand-line:    #E3D2AC;
  --mv-sand-ink:     #745F33;   /* darkened from #8A7340 for WCAG AA on sand */

  /* neutrals, warmed slightly toward green so the page reads as one family */
  --mv-ink:          #16211D;
  --mv-body:         #4B5951;
  --mv-muted:        #5A6861;
  --mv-faint:        #636F69;   /* darkened from #7C8A83 for WCAG AA */
  --mv-line:         #E4EBE6;
  --mv-ground:       #FAFBF9;

  --mv-shadow-sm: 0 1px 2px rgba(5, 61, 38, .05);
  --mv-shadow:    0 1px 2px rgba(5, 61, 38, .05), 0 14px 32px -20px rgba(5, 61, 38, .22);
  --mv-shadow-img:0 1px 2px rgba(5, 61, 38, .06), 0 16px 34px -22px rgba(5, 61, 38, .30);

  /* Bootstrap overrides */
  --bs-primary: #015E37;
  --bs-primary-rgb: 1, 94, 55;
  --bs-body-bg: var(--mv-ground);
  --bs-body-color: var(--mv-ink);
  --bs-border-color: var(--mv-line);
  --bs-link-color: var(--mv-green);
  --bs-link-color-rgb: 1, 94, 55;
  --bs-link-hover-color: #04492B;
  --bs-font-sans-serif: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-border-radius: .875rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-focus-ring-color: rgba(1, 94, 55, .3);
}

body { -webkit-font-smoothing: antialiased; }

/* --------------------------------------------------------------------------
   Type scale. Display sizes are tracked tight; body is left alone.
   -------------------------------------------------------------------------- */
h1, h2, h3, .h1, .h2, .h3 { font-weight: 700; letter-spacing: -.028em; line-height: 1.1; }
h1, .h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem); }
h2, .h2 { font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.125rem); }
h3, .h3 { font-size: 1.2rem; letter-spacing: -.018em; }

.lede { font-size: 1.09rem; line-height: 1.62; color: var(--mv-muted); max-width: 64ch; }
.measure { max-width: 64ch; }
.num { font-variant-numeric: tabular-nums; }
.text-muted-mv { color: var(--mv-muted) !important; }
.text-faint   { color: var(--mv-faint) !important; }

/* --------------------------------------------------------------------------
   Brand rule. Sits above the navbar on every page.
   -------------------------------------------------------------------------- */
.mv-rule { height: 5px; background: var(--mv-green); }

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.navbar.mv-nav { background: #fff; border-bottom: 1px solid var(--mv-line); padding: .75rem 0; }
.mv-nav .navbar-brand { display: flex; align-items: center; gap: .875rem; padding: 0; }
.mv-nav .navbar-brand img { height: 46px; width: auto; border-radius: 999px; }
.mv-brand-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.022em; line-height: 1.18; color: var(--mv-ink); }
.mv-brand-sub  { display: block; font-size: .95rem; font-weight: 500; color: var(--mv-muted); letter-spacing: -.005em; }
.mv-nav .nav-link { color: var(--mv-muted); font-size: .97rem; padding: .5rem .25rem; }
.mv-nav .nav-link:hover,
.mv-nav .nav-link:focus { color: var(--mv-green); }
.mv-nav .nav-link.active { color: var(--mv-ink); font-weight: 600; }
.mv-nav .navbar-toggler { border-color: var(--mv-line); border-radius: .7rem; padding: .55rem .7rem; }
.mv-nav .navbar-toggler:focus { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }

/* Bootstrap's default burger icon is a grey data-URI. Redraw it in brand ink. */
.mv-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2316211D' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.btn-mv {
  --bs-btn-bg: var(--mv-green); --bs-btn-border-color: var(--mv-green); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #04492B;  --bs-btn-hover-border-color: #04492B;  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #033C22; --bs-btn-active-border-color: #033C22; --bs-btn-active-color: #fff;
  --bs-btn-padding-x: 1.3rem; --bs-btn-padding-y: .6rem; --bs-btn-font-weight: 600;
  border-radius: 999px; box-shadow: 0 1px 2px rgba(5,61,38,.2), 0 8px 18px -10px rgba(5,61,38,.5);
}
.btn-mv-dark {
  --bs-btn-bg: var(--mv-ink); --bs-btn-border-color: var(--mv-ink); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #0C1612; --bs-btn-hover-border-color: #0C1612; --bs-btn-hover-color: #fff;
  --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .6rem; --bs-btn-font-weight: 600;
}

/* --------------------------------------------------------------------------
   Hero photograph. No text sits on it.
   -------------------------------------------------------------------------- */
.mv-hero { width: 100%; height: 408px; object-fit: cover; object-position: 50% 56%; display: block; }
@media (max-width: 767.98px) { .mv-hero { height: 230px; } }

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */
.mv-band-green { background: var(--mv-green); color: #fff; border-bottom: 4px solid var(--mv-green-deep); }
.mv-band-green h1 { color: #fff; }
.mv-band-green p  { color: #B9D6C7; margin-bottom: 0; }

.mv-band-sand { background: var(--mv-sand); }
.mv-keydate { padding: 1.7rem 2rem; }
.mv-keydate + .mv-keydate { border-left: 1px solid var(--mv-sand-line); }
.mv-keydate .when { font-size: .92rem; font-weight: 700; color: var(--mv-sand-ink); }
.mv-keydate .what { margin-top: .35rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.mv-keydate .note { margin-top: .25rem; font-size: .97rem; color: #6E6855; }
@media (max-width: 767.98px) {
  .mv-keydate { padding: 1.25rem 0; }
  .mv-keydate + .mv-keydate { border-left: 0; border-top: 1px solid var(--mv-sand-line); }
}

.mv-band-dark { background: var(--mv-green-dark); color: #E4EEE8; border-radius: 1.25rem; }
.mv-band-dark h2 { color: #fff; }
.mv-band-dark .lede { color: #9CBAAA; }
.mv-step { padding-top: 1.1rem; border-top: 2px solid #2F7F56; }
.mv-step .t { font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.25; }

/* --------------------------------------------------------------------------
   Pieces Bootstrap does not ship
   -------------------------------------------------------------------------- */
.mv-card { background: #fff; border: 1px solid var(--mv-line); border-radius: 1rem; box-shadow: var(--mv-shadow); }
.mv-card-accent { border-left: 5px solid var(--mv-green); }

.mv-shot { width: 100%; height: 236px; object-fit: cover; border-radius: .875rem; display: block; box-shadow: var(--mv-shadow-img); }
@media (max-width: 767.98px) { .mv-shot { height: 200px; } }
.mv-cap { margin-top: 1.05rem; font-size: 1.22rem; font-weight: 700; letter-spacing: -.018em; }
.mv-cap + p { margin: .3rem 0 0; color: var(--mv-muted); }

.mv-stat { background: #fff; border: 1px solid var(--mv-line); border-radius: .875rem; padding: 1rem 1.15rem; height: 100%; }
.mv-stat .n { font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: var(--mv-green); font-variant-numeric: tabular-nums; }
.mv-stat .l { font-size: .92rem; color: var(--mv-muted); margin-top: .1rem; }

/* dated rows, for the title history */
.mv-yr { display: flex; gap: 1.4rem; padding: .8rem 0; border-top: 1px solid #E8EEE9; }
.mv-yr dt { flex: 0 0 6rem; font-size: .97rem; font-weight: 700; color: var(--mv-green); font-variant-numeric: tabular-nums; }
.mv-yr dd { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .97rem; line-height: 1.55; color: var(--mv-body); }
@media (max-width: 575.98px) { .mv-yr { flex-direction: column; gap: .2rem; } .mv-yr dt { flex-basis: auto; } }

/* link rows, for the resources page */
.mv-link { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: baseline;
           padding: 1.05rem 0; border-bottom: 1px solid #EDF1EE; text-decoration: none; color: inherit; }
.mv-link:hover { background: #F4F8F5; }
.mv-link .t  { flex: 999 1 18rem; min-width: 0; }
.mv-link .t b { display: block; font-size: 1.1rem; font-weight: 600; letter-spacing: -.012em; color: var(--mv-green); }
.mv-link .t span { display: block; margin-top: .2rem; font-size: .97rem; line-height: 1.55; color: var(--mv-muted); }
.mv-link .host { flex: 0 0 auto; font-size: .87rem; color: var(--mv-faint); }

/* the "More at" line under the water quality steps. Was an inline style. */
.mv-band-dark .more { border-top: 1px solid #1C5A3C; color: #9CBAAA; }
.mv-band-dark .more a { color: var(--mv-green-bright); font-weight: 600; text-decoration: none; }

/* prose pages written in markdown: history, horn pond, privacy, terms */
.mv-prose > * { max-width: 70ch; }
.mv-prose > .mv-figure-wide { max-width: none; }
.mv-prose h2 { margin-top: 2.75rem; margin-bottom: 1rem; }
.mv-prose h2:first-child { margin-top: 0; }
.mv-prose h3 { margin-top: 1.75rem; margin-bottom: .6rem; }
.mv-prose dl { margin: 1rem 0 0; }
.mv-prose figure { margin: 2rem 0; }
.mv-prose figcaption { margin-top: .75rem; font-size: .92rem; line-height: 1.55; color: var(--mv-faint); }

/* form fields need an edge people can see: 3:1 against the page (WCAG 1.4.11) */
.form-control, .form-select { border-color: #86928C; }
.form-control:focus, .form-select:focus { border-color: var(--mv-green); box-shadow: 0 0 0 .2rem var(--mv-green); }

/* --------------------------------------------------------------------------
   Footer. Wide and short.
   -------------------------------------------------------------------------- */
.mv-footer { background: var(--mv-green-pale); border-top: 1px solid #DCE5DF; }
.mv-footer h2 { font-size: .9rem; font-weight: 700; letter-spacing: -.005em; margin-bottom: .75rem; color: var(--mv-ink); }
.mv-footer a, .mv-footer .fl { display: block; text-decoration: none; color: var(--mv-muted); font-size: .95rem; padding: .22rem 0; line-height: 1.45; }
.mv-footer a:hover { color: var(--mv-green); }
.mv-footer .legal { border-top: 1px solid #DCE5DF; font-size: .9rem; color: var(--mv-faint); }
.mv-footer .legal a { display: inline; color: var(--mv-faint); }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1080; background: var(--mv-green);
             color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 .6rem 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--mv-green); outline-offset: 2px; }
.mv-band-dark :focus-visible { outline-color: var(--mv-green-bright); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ==========================================================================
   Member area shell
   Only loaded pages behind the login use these. Everything here is layout;
   the brand tokens above are unchanged.
   ========================================================================== */
.mv-app { background: #F7F7F4; }
.mv-appbar { background: #fff; border-bottom: 1px solid var(--mv-line); }
.mv-appbar .who { display: flex; align-items: center; gap: .55rem; padding: .3rem .75rem .3rem .3rem;
                  border: 1px solid var(--mv-line); border-radius: 999px; }
.mv-avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--mv-green); color: #fff;
             font-size: .78rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }

.mv-side { background: #fff; border-right: 1px solid var(--mv-line); }
@media (min-width: 992px) { .mv-side { min-height: calc(100vh - 57px); } }
.mv-side .nav-link { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem;
                     border-radius: .55rem; color: var(--mv-body); font-size: .97rem; font-weight: 500; }
.mv-side .nav-link:hover { background: #F2F6F3; color: var(--mv-ink); }
.mv-side .nav-link.active { background: var(--mv-green-pale); color: var(--mv-green); font-weight: 600; }
.mv-side .nav-link .dot { width: 7px; height: 7px; border-radius: 2px; background: #B6C2BB; flex: 0 0 auto; }
.mv-side .nav-link.active .dot { background: var(--mv-green); }
.mv-side .grp { font-size: .76rem; font-weight: 700; color: #8D968F; letter-spacing: .04em;
                padding: 0 .75rem; margin: 1.3rem 0 .45rem; }

.mv-strip { background: #fff; border: 1px solid var(--mv-line); border-radius: .875rem; }
.mv-strip > div + div { border-left: 1px solid #EFF2F0; }
.mv-strip .k { font-size: .76rem; font-weight: 700; color: #8D968F; letter-spacing: .03em; }
.mv-strip .v { font-size: 1.3rem; font-weight: 700; letter-spacing: -.022em; }
@media (max-width: 767.98px) { .mv-strip > div + div { border-left: 0; border-top: 1px solid #EFF2F0; } }

.mv-table { --bs-table-border-color: #EFF2F0; margin-bottom: 0; }
.mv-table thead th { font-size: .76rem; font-weight: 700; color: #8D968F; letter-spacing: .03em;
                     background: #FBFCFB; border-bottom-width: 1px; }
.mv-table td { font-size: .97rem; vertical-align: middle; }
.mv-feed { border-top: 1px solid #EFF2F0; padding: .9rem 0; }
.mv-feed:first-child { border-top: 0; }
.mv-feed .d { font-size: .85rem; color: #8D968F; }
.mv-feed .h { font-size: 1.02rem; font-weight: 600; margin-top: .15rem; }
.mv-feed .b { font-size: .95rem; color: var(--mv-muted); margin: .15rem 0 0; }