/* ============================================================================
   Eastside Village — editable-page custom styles (V2)

   Eastside authored custom CSS via <style> tags inside their editable-page
   content under V1. V2's AdminSafeInlineScrubber strips <style>, so that CSS is
   migrated here — but only the parts that are SAFE, i.e. that style content
   INSIDE div.editable_page. Every rule is scoped under .editable_page so it can
   never modify V2 chrome (nav, banner, layout) or other villages.

   Loaded only for eastside, only on the pages that render editable content:
     - villages#index        (homepage)
     - editable_pages#show2   (interior pages)
   via a conditional stylesheet_link_tag "villages/eastside" in those views.

   STRUCTURE
     1. Global content styles  — shared across ALL editable pages (canonical).
     2. Component: footer      — ev_footer (site-wide, global).
     3. Page: homepage_private — global.
     4. Header: PRIVATE        — scoped to .ev-header-private (see note below).
     5. Header: PUBLIC         — scoped to .ev-header-public.

   HEADER SCOPING NOTE
     The private and public headers reuse the same ids (#header2025, #headertitle,
     …) with DIFFERENT values, so they cannot both be global. Each header's stored
     HTML carries a semantic class on its root div — `ev-header-private` /
     `ev-header-public` — and the header's layout rules are scoped under it. The
     shared button styles (.headerbutton1/2/3) stay global (both headers + the
     homepage button row use them with identical values).
     ⚠ REQUIRES the class on the stored HTML root:
        <div id="header2025" class="page-XXXXX ev-header-private"> …
        <div id="header2025" class="page-XXXXX ev-header-public"> …

   Per-template review notes live in docs/editable_page_custom_styling_v1_to_v2/eastside/<template>/.
   ============================================================================ */


/* ===========================================================================
   1. GLOBAL CONTENT STYLES  (shared across all editable pages — canonical)
   Sources: the common block the customer copy-pasted into each header template.
   Where a template's copy had DRIFTED (e.g. .quote colour, .ev-page padding),
   the value here is canonical; the divergent copies are recorded in the relevant
   template's css_we_drop.css.
   =========================================================================== */

/* ── Typography (font family re-scoped from their V1 #maincontent rules) ── */

.editable_page,
.editable_page h2, .editable_page h3, .editable_page h4, .editable_page h5, .editable_page h6,
.editable_page p, .editable_page span, .editable_page li { font-family: "Montserrat medium", Arial, Verdana; }
.editable_page h1 { font-family: Montserrat, Arial, Verdana; }
.editable_page a { border-bottom: 0; }
.editable_page p { font-size: 20px; }
.editable_page ul li { font-size: 20px; margin-left: 1.0em; }
.editable_page ul, .editable_page ol { padding: 0 16px; } /* canonical; 2026 public header had 0 12px */

/* ── Content utility classes (used inside the page body) ── */
.editable_page .hide-me { display: none; }
.editable_page .ev-page { padding: 10px 40px; } /* canonical; 2026 public header had 10px 12px */
.editable_page .ev-page p { margin: 0px; }
.editable_page p.tcenter { text-align: center; }
.editable_page .ev-page h1 { color: #ac903c; font-size: 175%; text-align: center; }
.editable_page .ev-page h3 { color: #4874c0; font-size: 125%; margin-bottom: 4px; }
.editable_page .ev-page .dflex-cont { display: flex; flex-wrap: wrap; justify-content: center; }
.editable_page .ev-page .dflex-cont .dflex-item { width: 45%; min-width: 380px; margin: 4px; text-align: center; }
.editable_page p.half-hite { font-size: 50%; margin-top: 0; margin-bottom: 0; }
.editable_page p.rvrs-indent, .editable_page div.rvrs-indent { text-indent: -1.5em; margin-left: 1.5em; }
.editable_page .place-hold { background-color: #f4e8d9; }
.editable_page .f150 { font-size: 150%; }
.editable_page .f125 { font-size: 125%; }
.editable_page .f110 { font-size: 110%; }
.editable_page .column-full li { margin-bottom: 0.5em; }
.editable_page .column-full ul { margin-block-start: 0.5em; }
.editable_page .gold-line { display: block; height: 4px; background-color: #ac903c; }
.editable_page p.gold { color: #ac903c; }
.editable_page .quote {
  background: #f0e8d8; padding: 20px; color: #062c35; font-size: 20px; /* canonical; 2026 public header had color:#fff !important (white-on-cream = unreadable) */
  border-radius: 30px; border: 6px solid #0F6D85; font-family: Montserrat medium,Arial,Verdana;
  width: 85%; max-width: 1250px; margin-left: auto; margin-right: auto;
}
.editable_page .quote .quote-say { font-style: oblique; }

/* ── Shared header/action buttons (used by BOTH headers and the homepage row) ── */
.editable_page a.headerbutton1 { background: #65733A; padding: 10px; margin: 10px; font-size: 20px; font-family: Montserrat,Arial,Verdana; font-weight: 700; display: inline-block; color: #fff !important; transition: 0.5s; }
.editable_page a.headerbutton2 { background: #CB5832; padding: 10px; margin: 10px; font-size: 20px; font-family: Montserrat,Arial,Verdana; font-weight: 700; display: inline-block; color: #fff !important; transition: 0.5s; }
.editable_page a.headerbutton3 { background: #0F6D85; padding: 10px; margin: 10px; font-size: 20px; font-family: Montserrat,Arial,Verdana; font-weight: 700; display: inline-block; color: #fff !important; transition: 0.5s; }
.editable_page a.headerbutton1:hover, .editable_page a.headerbutton2:hover, .editable_page a.headerbutton3:hover { background: #B5AA59; }

/* ── Events plugin embedded in editable pages ── */
.editable_page #events_plugin_in_editable_page a { color: #0F6D85; font-family: "Montserrat medium",Arial,Verdana !important; font-size: 20px !important; font-weight: 700; }
.editable_page #events_plugin_in_editable_page h3 span a { color: #0F6D85; font-size: 26px !important; }

/* ── Responsive visibility utilities (from 2026 public header) ── */
@media (min-width: 1201px) {
  .editable_page .show-lar { display: block; } .editable_page .hide-lar { display: none; }
  .editable_page .show-med { display: none; }  .editable_page .hide-med { display: block; }
  .editable_page .show-sma { display: none; }  .editable_page .hide-sma { display: block; }
}
@media (max-width: 1200px) and (min-width: 901px) {
  .editable_page .show-lar { display: none; }  .editable_page .hide-lar { display: block; }
  .editable_page .show-med { display: block; } .editable_page .hide-med { display: none; }
  .editable_page .show-sma { display: none; }  .editable_page .hide-sma { display: block; }
}
@media (max-width: 900px) {
  .editable_page .show-lar { display: none; }  .editable_page .hide-lar { display: block; }
  .editable_page .show-med { display: none; }  .editable_page .hide-med { display: block; }
  .editable_page .show-sma { display: block; } .editable_page .hide-sma { display: none; }
}


/* ===========================================================================
   2. COMPONENT: footer (ev_footer) — site-wide, global
   docs/editable_page_custom_styling_v1_to_v2/eastside/ev_footer/
   =========================================================================== */

.editable_page #footerdiv { background-color: #094150; color: #fff; padding: 10px; margin-top: 24px; }
.editable_page #footerdiv a { color: #fff; font-size: 20px; transition: 0.5s; }
.editable_page #footerdiv a:hover { color: #e5be31; }
.editable_page #footerdiv .footercontact {
  display: block; text-align: center; color: #ffffff; font-size: 20px;
  font-family: "Montserrat medium", Arial, Verdana; font-weight: 600; /* fixed: was `font-family: Monserrat, etc` (invalid) */
}
.editable_page #footernavdiv { width: 96%; margin: 10px 0px 20px; text-align: center; }
.editable_page .footernav { min-width: 140px; max-width: 210px; width: 100%; display: inline-block; margin: 0px 10px; vertical-align: top; text-align: left; }
.editable_page .footernav.logo { text-align: right; }
.editable_page #footerlogoimg { width: 70%; height: auto; display: inline-block; }
.editable_page #footerlogodiv { vertical-align: top; display: inline-block; }

@media (max-width: 900px) {
  .editable_page .footernav.logo { text-align: center; }
  .editable_page #footerlogoimg { width: 80%; height: auto; display: inline-block; }
}


/* ===========================================================================
   2b. COMPONENT: top nav bar (2026_April_Nav_Top_Bar) — site-wide, global
   docs/editable_page_custom_styling_v1_to_v2/eastside/2026_April_Nav_Top_Bar/
   =========================================================================== */

.editable_page #topnav { width: 100%; padding: 15px; text-align: center; }
.editable_page a.topnav {
  text-decoration: none; font-family: Montserrat Medium,Arial,Verdana; font-size: 24px;
  margin: 0px 10px; padding: 5px; display: inline-block; color: #C45630 !important;
  transition: 0.5s; border-bottom: none;
}
.editable_page a.topnav:hover { color: #0F6D85 !important; }


/* ===========================================================================
   2c. COMPONENT: nav column A (2025_Nav_A) — site-wide, global
   docs/editable_page_custom_styling_v1_to_v2/eastside/2025_Nav_A/
   NOTE: the header templates carry the responsive show/hide + pic-height rules
   for this nav system (#navA/#navAmobile, #nav-*-pic) — pending recovery decision.
   =========================================================================== */

.editable_page #navA { max-width: 300px; width: 100%; margin-top: 14px; }
.editable_page #nav-about-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 10px; }
.editable_page #nav-about-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/603/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #nav-about-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; padding: 10px; display: inline-block;
  background-color: #0F6D85; color: #fff; text-align: center; vertical-align: middle; font-size: 20px; font-weight: 700;
}
.editable_page #nav-what-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 1.5em; }
.editable_page #nav-what-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/604/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #nav-what-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; padding: 10px; display: inline-block;
  background-color: #CB5832; color: #fff; text-align: center; vertical-align: middle; font-size: 20px; font-weight: 700;
}


/* ===========================================================================
   2d. COMPONENT: nav column B (2025_Nav_B) — site-wide, global
   docs/editable_page_custom_styling_v1_to_v2/eastside/2025_Nav_B/
   =========================================================================== */

.editable_page #navB { max-width: 300px; width: 100%; }
.editable_page #nav-join-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 10px; }
.editable_page #nav-join-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/605/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #nav-join-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; padding: 10px; display: inline-block;
  background-color: #65733A; color: #fff; text-align: center; vertical-align: middle; font-size: 20px; font-weight: 700;
}
.editable_page #nav-contact-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 1.5em; }
.editable_page #nav-contact-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/618/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #nav-contact-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; padding: 10px; display: inline-block;
  background-color: #88722a; color: #fff; text-align: center; vertical-align: middle; font-size: 20px; font-weight: 700;
}


/* ===========================================================================
   2e. COMPONENT: nav column C — about (nav_c1_about + _mobile) — site-wide, global
   docs/editable_page_custom_styling_v1_to_v2/eastside/nav_c1_about[_mobile]/
   The desktop (#navC1) and mobile (#navC1mobile) variants REUSE the same tile ids
   (#nav-C1-*, #nav-C2-*) with different values, so tile rules are scoped under
   their container id to disambiguate.
   =========================================================================== */

/* desktop — #navC1 */
.editable_page #navC1 { width: 300px; vertical-align: top; }
.editable_page #navC1 #nav-C1-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 1.5em; }
.editable_page #navC1 #nav-C1-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/614/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navC1 #nav-C1-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #6fa7b6; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}
.editable_page #navC1 #nav-C2-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 1.5em; }
.editable_page #navC1 #nav-C2-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/615/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navC1 #nav-C2-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #3F8A9D; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}

/* mobile — #navC1mobile (tiles differ: #nav-C1-div margin-top 10px, #nav-C1-text #599BAB) */
.editable_page #navC1mobile { width: 300px; vertical-align: top; margin-bottom: 1.0em; }
.editable_page #navC1mobile #nav-C1-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 10px; }
.editable_page #navC1mobile #nav-C1-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/614/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navC1mobile #nav-C1-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #599BAB; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}
.editable_page #navC1mobile #nav-C2-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 1.5em; }
.editable_page #navC1mobile #nav-C2-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/615/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navC1mobile #nav-C2-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #3F8A9D; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}


/* ===========================================================================
   2f. COMPONENT: nav column C2 — about (nav_c2_about) — site-wide, global
   docs/editable_page_custom_styling_v1_to_v2/eastside/nav_c2_about/
   Tiles container-scoped under #navC2 (anticipating a nav_c2_about_mobile).
   =========================================================================== */

.editable_page #navC2 { width: 300px; vertical-align: top; }
.editable_page #navC2 #nav-C3-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 10px; }
.editable_page #navC2 #nav-C3-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/616/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navC2 #nav-C3-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #0c576a; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}
.editable_page #navC2 #nav-C4-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 1.5em; }
.editable_page #navC2 #nav-C4-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/617/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navC2 #nav-C4-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #094150; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}


/* ===========================================================================
   2g. COMPONENT: nav column D1 — what (2025_Nav_D1_What + _mobile) — site-wide, global
   docs/editable_page_custom_styling_v1_to_v2/eastside/2025_Nav_D1_What[_mobile]/
   Desktop (#navD1) and mobile (#navD1mobile) reuse the same tile ids; here the tile
   values match, but tiles are container-scoped so each variant is styled.
   =========================================================================== */

/* desktop — #navD1 */
.editable_page #navD1 { width: 300px; vertical-align: top; }
.editable_page #navD1 #nav-D1-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 10px; }
.editable_page #navD1 #nav-D1-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/623/download"); /* fixed: was url(/<TAB>https://…) */
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navD1 #nav-D1-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #D57758; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}
.editable_page #navD1 #nav-D2-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 1.5em; }
.editable_page #navD1 #nav-D2-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/624/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navD1 #nav-D2-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #d5795b; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}

/* mobile — #navD1mobile (same tile values; container adds margin-bottom) */
.editable_page #navD1mobile { width: 300px; vertical-align: top; margin-bottom: 1.0em; }
.editable_page #navD1mobile #nav-D1-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 10px; }
.editable_page #navD1mobile #nav-D1-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/623/download"); /* fixed: was url(/<TAB>https://…) */
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navD1mobile #nav-D1-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #D57758; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}
.editable_page #navD1mobile #nav-D2-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 1.5em; }
.editable_page #navD1mobile #nav-D2-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/624/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navD1mobile #nav-D2-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #d5795b; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}


/* ===========================================================================
   2h. COMPONENT: nav column E1 — join (2025_Nav_E1_Join + _mobile) — site-wide, global
   docs/editable_page_custom_styling_v1_to_v2/eastside/2025_Nav_E1_Join[_mobile]/
   Tiles container-scoped under #navE1 / #navE1mobile. Only #nav-E1-* is active;
   #nav-E2-* markup is commented out in the HTML (kept but inactive).
   Fixes: tab-in-url on #nav-E1-pic; desktop #nav-E1-text "# A09546" -> #A09546.
   =========================================================================== */

/* desktop — #navE1 */
.editable_page #navE1 { width: 300px; vertical-align: top; }
.editable_page #navE1 #nav-E1-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 10px; }
.editable_page #navE1 #nav-E1-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/631/download"); /* fixed: was url(/<TAB>https://…) */
  background-size: cover; background-repeat: no-repeat; background-position: center center;
  width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navE1 #nav-E1-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #A09546; color: #fff; text-align: center; vertical-align: middle; font-size: 20px; /* fixed: was "# A09546" (invalid) */
}
/* #nav-E2-* — inactive (E2 tile markup commented out in the HTML) */
.editable_page #navE1 #nav-E2-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 1.5em; }
.editable_page #navE1 #nav-E2-pic {
  background-color: white; background-image: url("");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 200px; display: block; padding: 0;
}
.editable_page #navE1 #nav-E2-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #d5795b; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}

/* mobile — #navE1mobile (same tile values; container adds margin-bottom) */
.editable_page #navE1mobile { width: 300px; vertical-align: top; margin-bottom: 1.0em; }
.editable_page #navE1mobile #nav-E1-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 10px; }
.editable_page #navE1mobile #nav-E1-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/631/download"); /* fixed: was url(/<TAB>https://…) */
  background-size: cover; background-repeat: no-repeat; background-position: center center;
  width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navE1mobile #nav-E1-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #A09546; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}
/* #nav-E2-* — inactive (E2 tile markup commented out in the HTML) */
.editable_page #navE1mobile #nav-E2-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 1.5em; }
.editable_page #navE1mobile #nav-E2-pic {
  background-color: white; background-image: url("");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 200px; display: block; padding: 0;
}
.editable_page #navE1mobile #nav-E2-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #d5795b; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}


/* ===========================================================================
   2i. COMPONENT: nav column E2 — join (2025_Nav_E2_Join) — site-wide, global
   docs/editable_page_custom_styling_v1_to_v2/eastside/2025_Nav_E2_Join/
   Distinct "join" column (Volunteer With Us). Tiles container-scoped under #navE2.
   Only #nav-E3-* is active; #nav-E4-* markup is commented out (kept but inactive).
   Fix: trailing tab in #nav-E3-pic url.
   =========================================================================== */

.editable_page #navE2 { width: 300px; vertical-align: top; }
.editable_page #navE2 #nav-E3-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 10px; }
.editable_page #navE2 #nav-E3-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/632/download"); /* fixed: was url("https://…/632/download<TAB>") */
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navE2 #nav-E3-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #918847; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}
/* #nav-E4-* — inactive (E4 tile markup commented out in the HTML) */
.editable_page #navE2 #nav-E4-div { width: 100%; display: inline-block; border: 0; padding: 0; margin-top: 1.5em; }
.editable_page #navE2 #nav-E4-pic {
  background-color: white; background-image: url("https://eastside.helpfulvillage.com/documents/626/download");
  background-size: cover; background-repeat: no-repeat; width: 100%; height: 300px; display: block; padding: 0;
}
.editable_page #navE2 #nav-E4-text {
  width: 100%; font-family: Montserrat,Arial,Verdana; font-weight: 700; padding: 10px; display: inline-block;
  background-color: #7a351e; color: #fff; text-align: center; vertical-align: middle; font-size: 20px;
}


/* ===========================================================================
   3. PAGE: homepage_private (Page 10207) — global
   docs/editable_page_custom_styling_v1_to_v2/eastside/homepage_private/
   =========================================================================== */

.editable_page #headerbuttont { text-align: center; }
.editable_page td { background-color: #f4e6b6; } /* WATCH: applies to ALL editable-page tables site-wide */
.editable_page .home-flex-cont { display: flex; flex-wrap: wrap; justify-content: center; }
.editable_page .home-flex-cont .home-flex-item { flex: 1 1 355px; min-width: 350px; max-width: 600px; margin: 2px; }
.editable_page #hfi01 { flex: 1 1 300px; max-width: 450px; }
.editable_page #hfi02 { flex: 1 1 500px; max-width: 700px; }
.editable_page #events_plugin_in_editable_page > div { margin-bottom: 8px; }
.editable_page p.comment { display: none; }


/* ===========================================================================
   3b. PAGE: public_homepage — global
   docs/editable_page_custom_styling_v1_to_v2/eastside/public_homepage/
   NOTE: #middlecontent is content here — the public header's dropped
   #middlecontent multi-column widths are pending recovery (see that page's docs).
   =========================================================================== */

.editable_page .half { display: inline-block; width: 48%; vertical-align: top; }
.editable_page table#evt-map td { vertical-align: top; }


/* ===========================================================================
   3c. PAGE: website_index — global
   docs/editable_page_custom_styling_v1_to_v2/eastside/website_index/
   NOTE: #maincontentprivate/.middle-nonav are content wrappers here — the private
   header's dropped .middle-nonav max-width centering is pending recovery.
   =========================================================================== */

.editable_page #web-index a { text-decoration: underline; color: #ce7c40; }
.editable_page #web-index a:hover { color: #515c2e; }
.editable_page #web-index .link-list p { padding-left: 4%; }


/* ===========================================================================
   4. HEADER: PRIVATE  — scoped to .ev-header-private
   docs/editable_page_custom_styling_v1_to_v2/eastside/2025_private_header/
   Requires: <div id="header2025" class="page-10169 ev-header-private"> in the DB.
   =========================================================================== */

.editable_page .ev-header-private {
  background-color: white;
  background-image: url("https://eastside.helpfulvillage.com/documents/582/download");
  background-repeat: no-repeat;
  width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; overflow-x: hidden;
}
.editable_page .ev-header-private #headerlogodiv { width: 20%; text-align: left; padding: 5px; min-width: 100px; display: inline-block; float: left; margin: 0; }
.editable_page .ev-header-private #headertitlediv { width: 60%; text-align: center; padding: 10px; display: inline-block; margin: 0; }
.editable_page .ev-header-private #headersocialdiv { width: 20%; text-align: right; padding: 10px; min-width: 100px; display: inline-block; float: right; margin: 0; position: relative; }
.editable_page .ev-header-private #headertitle {
  letter-spacing: 3px; font-size: 64px; line-height: 54px;
  text-shadow: 2px 2px 2px #F5DED6; text-transform: uppercase; font-weight: 700;
  font-family: "Montserrat Black", "Arial Black", "Verdana"; margin: 5px; padding: 0px 10px; color: #0F6D85;
}
.editable_page .ev-header-private a.headertitlelink, .editable_page .ev-header-private .headertitlelink {
  letter-spacing: 3px; font-size: 64px; line-height: 54px;
  text-shadow: 1px 1px 1px #fff; text-transform: uppercase; font-weight: 700;
  font-family: "Montserrat Medium","Arial Medium","Verdana"; margin: 5px; color: #062c35 !important;
  text-decoration: none; border-bottom: none;
}
.editable_page .ev-header-private #headertagline {
  font-family: "Montserrat Medium", "Arial", "Verdana"; font-size: 24px; margin: auto;
  color: #F9F2DA; text-shadow: 2px 2px 2px #062c35; background-color: rgba(109, 102, 23, 0.18);
  width: 20em; padding: 8px 0px; border-radius: 12px;
}
.editable_page .ev-header-private #headerlogoimg { width: 140px; height: auto; display: inline-block; margin: 14px; }
.editable_page .ev-header-private #headersocialfb { width: 30px; height: 30px; display: inline-block; margin: 3px; }
.editable_page .ev-header-private #headersocialig { width: 30px; height: 30px; display: inline-block; margin: 3px; }
.editable_page .ev-header-private #headerbuttons { display: inline-block; margin: 80px 20px 30px 0px; float: right; }

@media (max-width: 1200px) and (min-width: 901px) {
  .editable_page .ev-header-private #headerbuttons { margin: 0px 20px 80px 0px; float: right; }
  .editable_page .ev-header-private { width: 100%; }
  .editable_page .ev-header-private #headertagline { text-shadow: 1px 1px 2px #14170C; color: #F0EEDE; font-size: 24px; }
}
@media (max-width: 900px) {
  .editable_page .ev-header-private { background-size: cover; height: 220px; overflow: hidden; }
  .editable_page .ev-header-private #headertitle {
    font-size: 28px; font-family: "Montserrat Black", "Arial Black"; line-height: 28px;
    margin-top: 108px; width: 90%; position: absolute; text-shadow: 1px 1px 2px #14170C; color: #F0EEDE;
  }
  .editable_page .ev-header-private a.headertitlelink {
    font-size: 24px; font-family: "Montserrat Medium", "Arial Medium","Verdana"; font-weight: 700;
    line-height: 28px; margin-top: -38px; text-shadow: 1px 1px 2px #14170C; color: #F0EEDE !important;
    position: relative; border: 0;
  }
  .editable_page .ev-header-private #headertagline {
    font-family: "Montserrat Medium", "Arial medium", Verdana; font-size: 16px; top: 40px; left: 0px;
    color: #062c35; width: 100px; text-shadow: none; line-height: normal; margin: 0px; padding: 5px;
  }
  .editable_page .ev-header-private #headerlogoimg { width: 120px; margin: 0px; }
  .editable_page .ev-header-private #headerlogodiv { width: 100%; text-align: center; position: absolute; }
  .editable_page .ev-header-private #headertitlediv { width: 50%; display: inline-block; }
  .editable_page .ev-header-private #headersocialdiv { width: 30%; text-align: right; display: inline-block; }
  .editable_page .ev-header-private #headersocialfb { width: 30px; height: 30px; }
  .editable_page .ev-header-private #headersocialig { width: 30px; height: 30px; }
  .editable_page .ev-header-private #headerbuttons { margin: 75px 0px 10px 0px; text-align: right; float: right; width: 100%; }
}


/* ===========================================================================
   5. HEADER: PUBLIC  — scoped to .ev-header-public
   docs/editable_page_custom_styling_v1_to_v2/eastside/2026_April_Public_Header/
   Requires: <div id="header2025" class="page-10214 ev-header-public"> in the DB.
   =========================================================================== */

.editable_page .ev-header-public {
  background-color: white;
  background-image: url("https://eastside.helpfulvillage.com/documents/582/download");
  background-repeat: no-repeat;
  width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; overflow-x: hidden;
}
.editable_page .ev-header-public #headerlogodiv { width: 20%; text-align: left; padding: 5px; min-width: 100px; display: inline-block; float: left; margin: 0; }
.editable_page .ev-header-public #headertitlediv { width: 57%; text-align: center; padding: 10px 0 10px 10px; display: inline-block; margin: 0; }
.editable_page .ev-header-public #headersocialdiv { width: 22%; text-align: right; padding: 10px 10px 10px 0; min-width: 100px; display: inline-block; float: right; margin: 0; position: relative; }
.editable_page .ev-header-public #headertitle {
  letter-spacing: 3px; font-size: 64px; line-height: 54px;
  text-shadow: 2px 2px 2px #F5DED6; text-transform: uppercase; font-weight: 700;
  font-family: "Montserrat Black", "Arial Black", "Verdana"; margin: 5px; color: #0F6D85; padding: 0px 10px;
}
.editable_page .ev-header-public a.headertitlelink, .editable_page .ev-header-public .headertitlelink {
  letter-spacing: 3px; font-size: 64px; line-height: 54px;
  text-shadow: 1px 1px 1px #fff; text-transform: uppercase; font-weight: 700;
  font-family: "Montserrat Medium","Arial Medium","Verdana"; margin: 5px; color: #062c35 !important;
  text-decoration: none; border-bottom: none;
}
.editable_page .ev-header-public #headertagline {
  font-family: "Montserrat Medium", "Arial", "Verdana"; font-size: 24px; margin: auto;
  color: #F9F2DA; text-shadow: 2px 2px 2px #062c35; background-color: rgba(109, 102, 23, 0.18);
  width: 20em; padding: 8px 0px; border-radius: 12px;
}
.editable_page .ev-header-public #headerlogoimg { width: 140px; height: auto; display: inline-block; margin: 14px; }
.editable_page .ev-header-public #headersocialfb { width: 30px; height: 30px; display: inline-block; margin: 3px; }
.editable_page .ev-header-public #headersocialig { width: 30px; height: 30px; display: inline-block; margin: 3px; }
.editable_page .ev-header-public #headerbuttons { display: inline-block; margin: 80px 20px 30px 0px; float: right; }

@media (max-width: 1200px) and (min-width: 901px) {
  .editable_page .ev-header-public #headerbuttons { margin: 0px 20px 80px 0px; float: right; }
  .editable_page .ev-header-public { height: 300px; width: 100%; }
  .editable_page .ev-header-public #headertagline { text-shadow: 1px 1px 2px #14170C; color: #F0EEDE; font-size: 24px; }
}
@media (max-width: 900px) {
  .editable_page .ev-header-public { background-size: cover; }
  .editable_page .ev-header-public #headertitle {
    font-size: 28px; font-weight: 700; font-family: "Montserrat Black", "Arial Black"; line-height: 28px;
    margin-top: 108px; text-align: center; width: 100%; position: absolute; /* fixed: original had `text-aligo:center` (typo) */
    text-shadow: 1px 1px 2px #14170C; color: #F0EEDE;
  }
  .editable_page .ev-header-public a.headertitlelink {
    font-size: 24px; font-family: "Montserrat Medium", "Arial Medium","Verdana"; font-weight: 700;
    line-height: 28px; margin-top: -38px; text-shadow: 1px 1px 2px #14170C; color: #F0EEDE !important;
    position: relative; border: 0;
  }
  .editable_page .ev-header-public #headertagline {
    font-family: "Montserrat Medium", "Arial medium", Verdana; font-size: 16px; top: 40px; left: 0px;
    color: #062c35; width: 100px; text-shadow: none; line-height: normal; margin: 0px; padding: 5px;
  }
  .editable_page .ev-header-public #headerlogoimg { width: 120px; margin: 0px; }
  .editable_page .ev-header-public #headerlogodiv { width: 100%; text-align: center; position: absolute; }
  .editable_page .ev-header-public #headertitlediv { width: 50%; display: inline-block; }
  .editable_page .ev-header-public #headersocialdiv { width: 30%; text-align: right; display: inline-block; }
  .editable_page .ev-header-public #headersocialfb { width: 30px; height: 30px; }
  .editable_page .ev-header-public #headersocialig { width: 30px; height: 30px; }
  .editable_page .ev-header-public #headerbuttons { margin: 85px 0px 30px 0px; text-align: right; float: none; width: 100%; }
}