.siteTitle, .siteTitle a, .siteTitle a:visited, .siteTitle a:hover {
font-family: 'Montserrat';
font-size: 24px;
color: #FFFFFF;
font-weight: bold;
}


.pageBody, .pageBody TD, .pageBody TH, .pageBody DIV, .tabbedpanelitemactive * {
font-family: 'Montserrat';
}


.pageBody, .pageBody TD, .pageBody TH, .pageBody DIV, .tabbedpanelitemactive * {
font-size: 16px;
}


.pageBody, .pageBody TD, .pageBody TH, .pageBody DIV, .tabbedpanelitemactive * {
color: #555555;
}


.pageBody, .pageBody TD, .pageBody TH, .pageBody DIV, .tabbedpanelitemactive * {
font-weight: normal;
}


.pageBody, .pageBody TD, .pageBody TH, .pageBody DIV, .tabbedpanelitemactive * {
font-style: normal;
}


.pageBody A, .pageBody A:active, .pageBody A:visited, .pageBody A:hover,DIV.classes2Control A.addClassLink,.TableHeader A.removeRegistrantLink,A.customLink {
font-family: 'Montserrat';
font-size: 16px;
font-weight: bold;
}


.pageBody .header,.pageBody .header *, #section-page-header .header {
font-family: 'Montserrat';
}


.pageBody .header,.pageBody .header *, #section-page-header .header {
font-size: 24px;
}


.pageBody .header,.pageBody .header *, #section-page-header .header {
color: #009966;
}


.pageBody .header,.pageBody .header *, #section-page-header .header {
font-weight: bold;
}


.pageBody .header,.pageBody .header *, #section-page-header .header {
text-decoration: none;
}


.customHeader {
font-size: 28px;
color: #0AF3F3;
font-weight: bold;
}


.menuTopItem A, .menuTopItem A:visited, .mmenu li, .mmenu li > a, .mmenu li > span, .mmenu A:visited {
font-family: 'Montserrat';
font-size: 16px !important;
color: #FFFFFF;
}


.menuItemHover A, .menuItemHover.A,.menuItemHover A:visited, .menuItemHover.A:visited, .menuTopItem A:hover, .mmenu A:hover, .mmenu li > a:hover, .mmenu li.mmenu-selected > a, .mmenu li.mmenu-selected > span {
font-family: 'Montserrat';
font-size: 16px !important;
color: #FFFFFF;
font-weight: bold;
}


.menuItemL2 A, .menuItemL2 A:visited {
font-family: 'Montserrat';
font-size: 14px !important;
color: #FFFFFF;
font-weight: normal;
font-style: normal;
}


.menuItemL2 A:hover {
font-family: 'Montserrat';
font-size: 14px !important;
color: #2196F3;
font-weight: bold;
}

#slideshow-banner.section-outer
{ background-color: #009966; }
.bx-wrapper div.bx-caption-overlay a.bx-caption-button
{ background-color: #FF7900; }
body.BG
{ background-color: #F4F4F4; }
a.TableWithBorders, .TableWithBorders, .TableWithBorders tr td, .TableWithBorders tr th
{ border-color: #CCCCCC; }
#section-site-greeting .site-greeting *
{ font-family: 'Montserrat';font-weight: bold; }
#section-site-greeting .site-greeting
{ background-color: #F4F4F4; }
.news-block .news-header
{ background-color: #F4F4F4; }
.news-container
{ background-color: #F4F4F4; }
.news-block .news-block-content
{ font-family: 'Montserrat';font-size: 16px;font-weight: normal;color: #555555; }
.bottom-bg-inner
{ background-color: #F4F4F4; }
.subscribe-block .subscribe-header
{ font-family: 'Montserrat';font-size: 18pt;font-weight: bold; }
.subscribe-block .submitBtn.subscribeContactSubmit
{ background-color: #FF7900; }
#section-main-bottom > div > div > div.address-header.header > b
{ font-family: 'Montserrat';font-size: 22px;font-weight: bold;color: #FFFFFF; }
.address-block
{ font-family: 'Montserrat';font-size: 16px;font-weight: normal;color: #555555; }
.classTable A.register, .classDetails A.register
{ background-color: #FF7900; }
.classTable A.register, .classDetails A.register
{ font-family: 'Montserrat';font-size: 18px;font-weight: bold;color: #FFFFFF; }
.classTable A.register.waitlist, .classDetails A.register.waitlist
{ font-family: 'Montserrat';font-size: 18px;font-weight: bold;color: #FFFFFF; }
.classTable A.classDetails, .classDetails A.classDetails
{ background-color: #B2DF8A; }
.classTable A.classDetails, .classDetails A.classDetails
{ font-family: 'Montserrat';font-size: 18px;font-weight: bold;color: #FFFFFF; }
@media (min-width: 768px) {
                    #header .no-custom-logo .siteTitle          { text-align: center; width: 100%; } 
                    #header .no-custom-logo .social-media-icons { position: absolute; right: 7px; }
                  }

                  @media (min-width: 890px) {
                    #header .mt-logo-wide .siteTitle          { text-align: center; width: 100%; margin-left: -70px; } 
                    #header .mt-logo-wide .social-media-icons { position: absolute; right: 0px; }
                  }
@media (min-width: 768px) { div#siteTitle IMG, div.siteTitle IMG
{ max-width: 250px !important; width: 100% !important; height: auto !important; }}
#header.section-outer
{ background-color: #F4F4F4; }
#header.section-outer
{ border-left: none;border-right: none;border-top-color: #009966;border-top-width: 2px;border-top-style: solid;border-bottom-color: #009966;border-bottom-width: 2px;border-bottom-style: solid;border-radius: 4px; }
#header .social-media-icons a.social-media-link, #header .social-media-icons a.social-media-link:visited, #header .social-media-icons a.social-media-link:hover
{ background-color: #B2DF8A; }
#header .social-media-icons .social-media-icon
{ color: #009966; }
#header .social-media-icons a.social-media-link, #header .social-media-icons a.social-media-link:visited, #header .social-media-icons a.social-media-link:hover
{ border-color: #009966; }
/*  ------- Styles below the line are not shown during page editing --------- */
/* ============================================================
   V2 Logo shrink + left-align (header fix) — 2026-04-18
   ============================================================ */
/* Shrink the logo image sitewide (desktop + mobile) */
.section-inner.customHeader img,
#section-page-header img,
.customHeader > img,
.customHeader a > img {
  max-height: 64px !important;
  max-width: 300px !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
}
@media (max-width: 768px) {
  .section-inner.customHeader img,
  #section-page-header img,
  .customHeader > img,
  .customHeader a > img {
    max-height: 44px !important;
    max-width: 200px !important;
  }
}
/* Left-align the main site header (logo area) — NARROWLY scoped so it doesn't hit body H1.customHeader */
#section-page-header, #section-main-top .customHeader {
  text-align: left !important;
  padding: 12px 24px !important;
  background: transparent !important;
}
@media (max-width: 768px) {
  #section-page-header, #section-main-top .customHeader {
    padding: 8px 14px !important;
  }
}
/* ==== /V2 Logo shrink + left-align ==== */


/* ============================================================
   V2 Footer copyright fix — 2026-04-18
   The template hardcodes "Copyright © 2011 World Voices" into .copyright-block
   and the Site Options "Copyright Notice" field doesn't drive it. This hides
   the template text and overlays our own via ::before.
   ============================================================ */
.copyright-block > div:first-child {
  font-size: 0 !important;
  color: transparent !important;
  line-height: 1.4;
}
.copyright-block > div:first-child::before {
  content: "Copyright © 2026 World Voices San Diego. All rights reserved.";
  font-size: 13px;
  color: #fffaf0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  display: inline-block;
}
/* ==== /V2 Footer copyright fix ==== */


/* ============================================================
   V2 Nav + Header polish — 2026-04-18
   Warm cream menu, Inter font, orange hover, styled mobile menu
   ============================================================ */

/* Menu background — warm cream strip below header */
.customMenuBG, .customMenuBGInner {
  background: #fffaf0 !important;
  border-bottom: 2px solid #1f1810;
}
#section-navmenu, #section-main-menu {
  background: #fffaf0 !important;
}

/* V2 Nav items — match mockup: plain text, orange on hover, no pills */
/* Mockup: <nav class="... text-[14px] font-bold text-ink-800"><a class="hover:text-orange-500 transition">...</a></nav> */
#menu_section {
  background: #fffaf0 !important;
  padding: 0 16px !important;
  border-top: none !important;
  border-bottom: 2px solid #1f1810 !important;
}
#menu_section .section-inner,
#menu_section .menu-wrapper,
#menu_section nav,
#menu_section table {
  white-space: nowrap !important;
}
.menuTopItem, .menuTopItem A, .menuTopItem A:visited {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1f1810 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color 0.15s ease !important;
}

/* Hover — only the text color shifts to brand orange. No pill, no background, no shadow. */
.menuItemHover A, .menuItemHover.A, .menuItemHover A:visited,
.menuTopItem A:hover, .menuTopItem:hover A {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ff7900 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
}

@media (max-width: 768px) {
  #menu_section {
    padding: 0 !important;
    border-bottom: 2px solid #1f1810 !important;
  }
}

/* Dropdown sub-menu items */
.menuItemL2 A, .menuItemLevel2 A, .dynamicLevelmenuItem A {
  font-family: 'Inter', sans-serif !important;
  color: #3d342a !important;
  font-weight: 500 !important;
  background: #fff !important;
  border: 1px solid #dcd5c5 !important;
  padding: 10px 18px !important;
}
.menuItemL2 A:hover, .dynamicLevelHovermenuItem A {
  background: #fdf3d8 !important;
  color: #ff7900 !important;
}

/* Mobile menu (hamburger + drawer) */
.mmenu, .mmenu li, .mmenu a {
  font-family: 'Inter', sans-serif !important;
  color: #3d342a !important;
  background: #fffaf0 !important;
}
.mmenu a:hover { color: #ff7900 !important; }
.toggle-menu, .hamburger { color: #3d342a !important; }

/* Site title spacing + shadow (in header bar) */
.siteTitle {
  font-size: 30px !important;
  letter-spacing: -0.02em;
}
/* ==== /V2 Nav + Header polish ==== */


/* ============================================================
   V2 Brand Restyle — 2026-04-18
   Warm charcoal text, brand green primary, orange CTA, Bagel Fat One for display
   ============================================================ */

/* Body + content text — Inter font, warm charcoal */
body, .pageBody, .pageBody TD, .pageBody TH, .pageBody DIV, .pageBody P, .pageBody LI, .pageBody SPAN, .tabbedpanelitemactive * {
  font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #3d342a !important;
}

/* Section headings — Bagel Fat One for display */
.pageBody .header, .pageBody .header *, #section-page-header .header,
.pageBody h1, .pageBody h2, .pageBody h1 *, .pageBody h2 * {
  font-family: 'Bagel Fat One', 'Inter', sans-serif !important;
  color: #084c4f !important;
  letter-spacing: -0.01em;
  font-weight: 400 !important;
}

/* H3 keeps brand green as accent */
.pageBody h3, .pageBody h3 * {
  font-family: 'Bagel Fat One', 'Inter', sans-serif !important;
  color: #009966 !important;
  font-weight: 400 !important;
}

/* Site title in main header */
.siteTitle, .siteTitle a, .siteTitle a:visited, .siteTitle a:hover {
  font-family: 'Bagel Fat One', sans-serif !important;
  color: #fffaf0 !important;
  letter-spacing: -0.01em;
  font-weight: 400 !important;
}

/* Body links — brand green, orange on hover */
.pageBody A, .pageBody A:active, .pageBody A:visited {
  color: #009966 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}
.pageBody A:hover {
  color: #ff7900 !important;
}

/* Primary CTA buttons — orange with sticker shadow */
A.customLink, .customButton, input.customButton, button.customButton, A.customLink.customButton {
  background: #ff7900 !important;
  color: #ffffff !important;
  border: 2px solid #1f1810 !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 3px 3px 0 0 #1f1810 !important;
  text-decoration: none !important;
  display: inline-block;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
A.customLink:hover, .customButton:hover, A.customLink.customButton:hover {
  background: #e26500 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 4px 4px 0 0 #1f1810 !important;
}

/* Testimonials / Quotes page — warmer tone */
.testimonialsTable .Quote, .testimonialsTable TD.Quote {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #3d342a !important;
}
.testimonialsTable .Name, .testimonialsTable TD.Name {
  font-family: 'Bagel Fat One', sans-serif !important;
  color: #ff5d8f !important;
  font-size: 20px !important;
  letter-spacing: -0.01em;
}

/* Class description cards */
.classDescriptionName, h3.classDescriptionName, .classDescriptionName * {
  font-family: 'Bagel Fat One', sans-serif !important;
  color: #009966 !important;
  letter-spacing: -0.01em;
  font-weight: 400 !important;
}
.classDescriptionDescription, .classDescriptionDescription * {
  font-family: 'Inter', sans-serif !important;
  line-height: 1.6 !important;
  color: #3d342a !important;
}

/* Footer — warm dark brown */
#footer, .footer {
  background: #1f1810 !important;
  color: #fffaf0 !important;
}
#footer *, .footer * {
  color: #fffaf0 !important;
}
#footer A, .footer A {
  color: #ffd23f !important;
}

/* Side/bottom widgets — light warm bg (Recent News, Subscribe, Contact) */
#section-main-bottom {
  background: #fffaf0 !important;
}
#section-main-bottom h3, #section-main-bottom .header,
#section-main-bottom h3 *, #section-main-bottom .header * {
  color: #084c4f !important;
}
#section-main-bottom p, #section-main-bottom span, #section-main-bottom div {
  color: #3d342a !important;
}
#section-main-bottom a:not(.customLink):not(.customButton) {
  color: #009966 !important;
}
#footer A:hover, .footer A:hover {
  color: #ff7900 !important;
}

/* Page body background subtle warm cream */
#section-main, body.pageBodyWrapper, .pageBodyWrapper {
  background: #fffaf0 !important;
}
/* ==== /V2 Brand Restyle ==== */


#section-main > .section-inner.pageBody {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* ==== Mobile responsive overrides ==== */
/* Collapse multi-column grids on narrow screens so content doesn't overflow */
@media (max-width: 720px) {
  /* Any inline-styled grid with 2 or 3 equal columns -> 1 column */
  #section-main-top div[style*="grid-template-columns: 1fr 1fr"],
  #section-main div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Founder story asymmetric 2-col (1fr 1.4fr) -> stack vertically, center polaroid */
  #section-main div[style*="grid-template-columns: 1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Summer Camp section big headline smaller on mobile */
  #section-main h3[style*="font-size: 34px"] {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  /* Hero polaroid image cap */
  #section-main-top img[src*="image_vault"] {
    max-width: 220px !important;
    height: auto !important;
  }
  /* Trust rail wraps more gracefully */
  #trust-rail > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  /* Avoid horizontal overflow site-wide */
  #section-main, #section-main-top, body {
    overflow-x: hidden !important;
  }
  /* Shrink stat stickers padding */
  #summer-camp-full div[style*="grid-template-columns"] > div {
    padding: 14px !important;
  }
  /* Founder 3-stat callout becomes 3 across but smaller */
  #founder-story div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
  }
}
/* ==== /Mobile responsive overrides ==== */

/* ==== Hero headline overrides ==== */
/* Existing CSS problems this overrides: */
/*   A) "#section-site-greeting .site-greeting *" forces font-size: 23px + Montserrat bold */
/*   B) ".pageBody .header *" + ".pageBody h1 *" force Bagel Fat One + color #084c4f !important */
/* We target ".site-greeting h1" (specificity 1,1,1) to beat these, and explicitly style the paragraph + spans. */

/* Hero h1 — multi-color big headline */
#section-site-greeting .site-greeting h1,
#section-site-greeting .site-greeting H1 {
  font-size: 68px !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  color: #1f1810 !important;
  font-weight: 400 !important;
  font-family: 'Bagel Fat One', 'Inter', sans-serif !important;
}
#section-site-greeting .site-greeting h1 span,
#section-site-greeting .site-greeting H1 span {
  font-size: inherit !important;
}
#section-site-greeting .site-greeting h1 span[style*="color: #084c4f"],
#section-site-greeting .site-greeting h1 span[style*="color:#084c4f"] {
  color: #084c4f !important;
}
#section-site-greeting .site-greeting h1 span[style*="color: #ff7900"],
#section-site-greeting .site-greeting h1 span[style*="color:#ff7900"] {
  color: #ff7900 !important;
}
#section-site-greeting .site-greeting h1 span[style*="color: #ff5d8f"],
#section-site-greeting .site-greeting h1 span[style*="color:#ff5d8f"] {
  color: #ff5d8f !important;
  font-size: 32px !important;
  vertical-align: top !important;
}

/* Hero body paragraph — Inter regular, not Bagel Fat One, not bold */
#section-site-greeting .site-greeting p,
#section-site-greeting .site-greeting p * {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0 !important;
}
#section-site-greeting .site-greeting p {
  font-weight: 400 !important;
  color: #3d342a !important;
}
#section-site-greeting .site-greeting p strong {
  font-weight: 700 !important;
  color: #3d342a !important;
}
#section-site-greeting .site-greeting p em {
  font-style: italic !important;
  color: #3d342a !important;
}
/* Allow inline em/strong color overrides to stick (e.g., "Spanish Through Art" pink) */
#section-site-greeting .site-greeting p em[style*="color: #ff5d8f"],
#section-site-greeting .site-greeting p em[style*="color:#ff5d8f"] {
  color: #ff5d8f !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
#section-site-greeting .site-greeting p strong[style*="color"] {
  /* if strong has inline color, honor it */
}

/* Caveat script in yellow speech bubble */
#section-site-greeting .site-greeting span[style*="Caveat"] {
  font-family: 'Caveat', cursive !important;
  font-weight: 500 !important;
}

/* Floating stat stickers — keep Bagel Fat One numbers but Inter labels */
#section-site-greeting .site-greeting span[style*="Bagel Fat One"] {
  font-family: 'Bagel Fat One', sans-serif !important;
}

/* Mobile shrink */
@media (max-width: 720px) {
  #section-site-greeting .site-greeting h1,
  #section-site-greeting .site-greeting H1 {
    font-size: 42px !important;
    line-height: 1.05 !important;
  }
  #section-site-greeting .site-greeting h1 span[style*="color: #ff5d8f"],
  #section-site-greeting .site-greeting h1 span[style*="color:#ff5d8f"] {
    font-size: 22px !important;
  }
}
/* ==== /Hero headline overrides ==== */

/* ==== Cream background + hero width ==== */
/* MainStreets default body bg is grey #F4F4F4. Override to warm cream sitewide. */
body, body.BG, html {
  background-color: #fffaf0 !important;
}
/* Site-greeting wrapper has its own grey bg set by template — kill it */
#section-site-greeting,
#section-site-greeting .site-greeting {
  background-color: #fffaf0 !important;
  background: #fffaf0 !important;
}
/* Greeting section inner can go wider too */
/* #section-site-greeting IS itself a .section-inner (1024px max-width from template). Widen it. */
#section-site-greeting.section-inner,
#section-site-greeting {
  max-width: 1320px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}
/* Also widen inner .site-greeting wrapper + page-summary */
#section-site-greeting .site-greeting,
#section-site-greeting .page-summary,
#section-site-greeting .cms-content-inner {
  max-width: none !important;
  width: 100% !important;
}
/* ==== /Cream background + hero width ==== */

/* ==== Hero animations ==== */
/* Subtle, prefers-reduced-motion respects off — makes the hero feel alive without being distracting */

@keyframes bubbleBob {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(-1deg) translateY(-4px); }
}
@keyframes starPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.18) rotate(12deg); }
  50% { transform: scale(1) rotate(0deg); }
  75% { transform: scale(1.12) rotate(-8deg); }
}
@keyframes dotBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes stickerGreenFloat {
  0%, 100% { transform: rotate(6deg) translate(0, 0); }
  50% { transform: rotate(7.5deg) translate(0, -6px); }
}
@keyframes stickerPinkFloat {
  0%, 100% { transform: rotate(5deg) translate(0, 0); }
  50% { transform: rotate(3deg) translate(-3px, 5px); }
}
@keyframes stickerBlueFloat {
  0%, 100% { transform: rotate(-4deg) translate(0, 0); }
  50% { transform: rotate(-6deg) translate(4px, -4px); }
}
@keyframes whispererWobble {
  0%, 100% { transform: translateX(-50%) rotate(-3deg) scale(1); }
  50% { transform: translateX(-50%) rotate(-1deg) scale(1.04); }
}

#hero-bubble { animation: bubbleBob 3.6s ease-in-out infinite; }
#hero-star { animation: starPulse 2.2s ease-in-out infinite; transform-origin: center; }
#hero-dot { animation: dotBounce 2.4s ease-in-out infinite; }
#hero-sticker-green { animation: stickerGreenFloat 4.2s ease-in-out infinite; }
#hero-sticker-pink { animation: stickerPinkFloat 5s ease-in-out infinite; animation-delay: 0.6s; }
#hero-sticker-blue { animation: stickerBlueFloat 4.6s ease-in-out infinite; animation-delay: 1.1s; }
#hero-kid-whisperer { animation: whispererWobble 3.8s ease-in-out infinite; animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  #hero-bubble, #hero-star, #hero-dot, #hero-sticker-green, #hero-sticker-pink, #hero-sticker-blue, #hero-kid-whisperer {
    animation: none !important;
  }
}
/* ==== /Hero animations ==== */

/* ==== Hero sticker text colors ==== */
/* The .pageBody .header * rule forces color:#084c4f !important on all hero descendants. */
/* Override for sticker content so numbers + labels show in white (or charcoal on the yellow pill). */
#hero-sticker-green .hero-stat-num,
#hero-sticker-green .hero-stat-label,
#hero-sticker-pink .hero-stat-num,
#hero-sticker-pink .hero-stat-label,
#hero-sticker-blue .hero-stat-num,
#hero-sticker-blue .hero-stat-label {
  color: #ffffff !important;
}
#hero-kid-whisperer {
  color: #1f1810 !important;
}
/* ==== /Hero sticker text colors ==== */

/* ==== Hero CTA buttons — thinner ==== */
/* Default customButton is 24px text + big padding — too thick next to the headline. Slim for the hero only. */
#section-site-greeting .page-summary .customButton,
#section-site-greeting .page-summary .customLink.customButton {
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
/* ==== /Hero CTA buttons — thinner ==== */

/* ==== Body section color overrides ==== */
/* Summer Camp h2 should be pink (mockup) — override teal from .pageBody h2 rule */
#summer-camp-full h2,
#summer-camp-full h2 *:not(span[style*="background:"]) {
  color: #ff5d8f !important;
}
/* Allow yellow marker highlight span inside Summer Camp h2 */
#summer-camp-full h2 span[style*="background: linear-gradient"] {
  color: #ff5d8f !important;
  background: linear-gradient(transparent 55%, #ffd23f 55%) !important;
  padding: 0 4px !important;
}

/* Founder story headline — charcoal with yellow marker */
#founder-story h3 {
  color: #1f1810 !important;
}
#founder-story h3 span[style*="background: linear-gradient"] {
  background: linear-gradient(transparent 55%, #ffd23f 55%) !important;
  color: #1f1810 !important;
  padding: 0 4px !important;
}
#founder-story .caveat-label,
#founder-story div[style*="Caveat"] {
  color: #1f1810 !important;
  font-family: 'Caveat', cursive !important;
}

/* Final CTA (green card) — Listos yellow Caveat, headline white, Spanish journey span yellow */
.pageBody div[style*="background: #009966"][style*="box-shadow: 8px 8px"] p:first-child {
  color: #ffd23f !important;
  font-family: 'Caveat', cursive !important;
  font-weight: 500 !important;
  font-size: 44px !important;
  line-height: 1 !important;
}
.pageBody div[style*="background: #009966"][style*="box-shadow: 8px 8px"] h2 {
  color: #ffffff !important;
}
.pageBody div[style*="background: #009966"][style*="box-shadow: 8px 8px"] h2 span {
  color: #ffd23f !important;
}
.pageBody div[style*="background: #009966"][style*="box-shadow: 8px 8px"] p {
  color: #fffaf0 !important;
}

/* Testimonial pink section — main headline white marker, keep card contents dark */
.pageBody div[style*="background: #ffe2ec"] h2 {
  color: #1f1810 !important;
}
.pageBody div[style*="background: #ffe2ec"] h2 span[style*="background: linear-gradient"] {
  color: #1f1810 !important;
  background: linear-gradient(transparent 55%, #ffd23f 55%) !important;
  padding: 0 4px !important;
}

/* Programs intro h2 — let yellow marker highlight render */
h2 span[style*="background: linear-gradient(transparent 55%, #ffd23f 55%)"] {
  background: linear-gradient(transparent 55%, #ffd23f 55%) !important;
  padding: 0 4px !important;
}

/* Schools headline: allow teal color on "eleven schools" span */
h2 span[style*="color: #009966"] {
  color: #009966 !important;
}

/* Visiting families headline */
.pageBody div[style*="background: #fdf3d8"][style*="border-radius: 24px"] h3 {
  color: #1f1810 !important;
}
.pageBody div[style*="background: #fdf3d8"][style*="border-radius: 24px"] div[style*="Caveat"] {
  color: #ff7900 !important;
  font-family: 'Caveat', cursive !important;
}
/* ==== /Body section color overrides ==== */

/* ==== Widen all page body inner containers ==== */
/* The MainStreets template has a generic .section-inner class set to max-width: 1024px */
/* applied on an inner div inside the page body. That constrains all homepage content to 1024px */
/* even though #section-main > .section-inner.pageBody is now 1200px. Widen everything. */
.section-inner {
  max-width: 1320px !important;
}
/* The pageContent div (id) and its .section-inner parent inside it */
#pageContent,
#pageContent.pageBody {
  max-width: 1320px !important;
  width: 100% !important;
}
/* News block, main-bottom, and other content section wrappers */
#section-main-bottom .section-inner,
#section-main-top .section-inner,
.news-block,
.news-block .section-inner {
  max-width: 1320px !important;
}
/* ==== /Widen all page body inner containers ==== */

/* ==== Full-width header + sections ==== */
/* Make the top header, nav menu, and bottom footer use the same wider container as the body. */
#section-page-header.section-inner,
#section-main-menu.section-inner,
#section-main-bottom > .section-inner,
#section-main-top.section-inner,
#section-navmenu.section-inner {
  max-width: 1320px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}
/* News block and other top-area widgets */
#section-main-top > .section-inner,
.news-block {
  max-width: 1320px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
/* ==== /Full-width header + sections ==== */

/* ==== Trust rail full-bleed + white text ==== */
/* The trust rail uses margin-left/right: calc(50% - 50vw) to escape the content container and fill the viewport. */
/* This requires ancestors to have overflow-x: visible; (overflow-x: hidden is used only on mobile-overflow rule). */
/* And it requires text color overrides because template's .pageBody * rule would force it to charcoal. */

#trust-rail,
#trust-rail * {
  box-sizing: border-box;
}
#trust-rail .trust-rail-schools,
#trust-rail .trust-rail-schools * {
  color: #fffaf0 !important;
  font-family: 'Inter', sans-serif !important;
}
#trust-rail .trust-rail-schools sup {
  color: #ffffff !important;
}

/* Ensure page body wrapper does not constrain trust-rail via overflow-x */
@media (min-width: 721px) {
  #section-main, #section-main-top, body {
    overflow-x: visible !important;
  }
}
/* On mobile, the trust rail falls back to contained (no 100vw escape) */
@media (max-width: 720px) {
  #trust-rail {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* ==== /Trust rail full-bleed + white text ==== */

/* ==== Summer Camp stat card styles ==== */
/* Force white text on all camp stat cards + Bagel Fat One on values (beats template h3/p color locks) */
#summer-camp-full .camp-stat-card,
#summer-camp-full .camp-stat-card *,
#summer-camp-full .camp-stat-label,
#summer-camp-full .camp-stat-value,
#summer-camp-full .camp-stat-value span {
  color: #ffffff !important;
}
#summer-camp-full .camp-stat-value {
  font-family: 'Bagel Fat One', sans-serif !important;
}
#summer-camp-full .camp-stat-label {
  font-family: 'Inter', sans-serif !important;
}
/* Pop stickers on hover */
#summer-camp-full .camp-stat-card {
  transition: transform 0.25s ease;
}
#summer-camp-full .camp-stat-card:hover {
  transform: rotate(0deg) translateY(-2px) scale(1.03) !important;
}
/* Mobile: flatten rotations + offsets to keep layout clean */
@media (max-width: 720px) {
  #summer-camp-full .camp-stat-card {
    transform: none !important;
  }
}
/* ==== /Summer Camp stat card styles ==== */

/* ==== Full-width sections ==== */
/* Maria's feedback: sections should NOT be in rounded boxes — they should span full viewport with tinted backgrounds, */
/* matching the V2 mockup's <section> structure (programs / schools / summer / visit / story / parents / faq / enroll). */

/* Shared full-bleed section treatment — extends past the 1040px page body container */
@media (min-width: 721px) {
  #summer-camp-full,
  #founder-story,
  .wv-section-parents,
  .wv-section-faq,
  .wv-section-enroll,
  .wv-section-visit,
  .wv-section-programs,
  .wv-section-schools {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: max(24px, calc(50vw - 600px)) !important;
    padding-right: max(24px, calc(50vw - 600px)) !important;
  }
}
/* Vertical padding + mobile */
#summer-camp-full,
#founder-story {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 720px) {
  #summer-camp-full,
  #founder-story {
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* ==== /Full-width sections ==== */

/* ==== Top header (logo bar) sitewide ==== */
/* MainStreets default renders #header with grey-blue #F4F4F4 and a green top+bottom border. */
/* We want cream background matching the homepage, no green border stripes, left-aligned logo, and a smaller logo on mobile. */

/* 1. Kill the grey-blue background and green borders on the top header strip */
#header.section-outer,
#header {
  background-color: #fffaf0 !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
}

/* 2. Left-align the logo (template centers it by default) */
#header .siteTitle,
#header #siteTitle {
  text-align: left !important;
  width: auto !important;
  margin-left: 32px !important;
  padding-left: 0 !important;
}
#header .no-custom-logo .siteTitle,
#header .mt-logo-wide .siteTitle {
  text-align: left !important;
  width: auto !important;
  margin-left: 32px !important;
}

/* 3. Shrink the logo image — desktop + mobile */
#header .siteTitle img,
#header #siteTitle img,
div#siteTitle img,
div.siteTitle img {
  max-width: 170px !important;
  max-height: 90px !important;
  width: auto !important;
  height: auto !important;
}

/* 4. Mobile: even smaller logo, keep left-aligned */
@media (max-width: 720px) {
  #header .siteTitle img,
  div#siteTitle img,
  div.siteTitle img {
    max-width: 110px !important;
    max-height: 60px !important;
  }
  #header .siteTitle,
  #header #siteTitle {
    margin-left: 12px !important;
  }
  #header.section-outer,
  #header {
    padding: 4px 0 !important;
  }
}

/* 5. Social icons — tuck to the right, smaller, in brand green not pale */
#header .social-media-icons {
  right: 24px !important;
}
#header .social-media-icons a.social-media-link,
#header .social-media-icons a.social-media-link:visited,
#header .social-media-icons a.social-media-link:hover {
  background-color: #009966 !important;
  border-color: #1f1810 !important;
  border-width: 2px !important;
  box-shadow: 2px 2px 0 0 #1f1810 !important;
}
#header .social-media-icons .social-media-icon {
  color: #ffffff !important;
}
@media (max-width: 720px) {
  #header .social-media-icons {
    right: 12px !important;
  }
}
/* ==== /Top header (logo bar) sitewide ==== */

/* ==== Fix top header blue phone + border cleanup ==== */
/* Phone number in the header shows up in template blue by default — force brand charcoal. */
#header .social-media-icons .phone-link,
#header .phone-link,
#header .phone a,
#header a[href^="tel:"] {
  color: #1f1810 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
#header .social-media-icons .phone-link:hover,
#header a[href^="tel:"]:hover {
  color: #ff7900 !important;
}

/* Kill the invisible 2px border on #mobile-menu-actions which can show as a stray line in some states */
#mobile-menu-actions {
  border-bottom: none !important;
}
/* ==== /Fix top header blue phone + border cleanup ==== */

/* ==== Nav double-line + dropdown border + camp-stat sitewide ==== */

/* 1) The #menu_section has a 2px border. Its inner .customMenuBGInner ALSO gets a 2px border from the template,
      which stacks and makes the line look ~4px thick in the center. Kill the inner one. */
#menu_section .customMenuBGInner,
.customMenuBGInner {
  border-bottom: none !important;
  border-top: none !important;
}

/* 2) Dropdown sub-menu containers — the template default gives them a blue/grey border.
      Force the whole dropdown to use sticker border (charcoal) + cream bg, no blue anywhere. */
.menuItemL2, .menuItemLevel2, .dynamicLevelmenuItem,
.mmenu-submenu,
.menuTopItem > div,
.menuTopItem > ul,
.menuTopItem table table {
  border-color: #1f1810 !important;
}
/* Dropdown link items themselves */
.menuItemL2 A, .menuItemLevel2 A, .dynamicLevelmenuItem A,
.mmenu-submenu a, .mmenu-submenu li > a {
  border: 1px solid transparent !important;
  background: #fffaf0 !important;
  color: #1f1810 !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
}
.menuItemL2 A:hover, .menuItemLevel2 A:hover, .dynamicLevelmenuItem A:hover,
.menuItemL2 A.menuItemHover, .dynamicLevelHovermenuItem A,
.mmenu-submenu a:hover {
  background: #fff4c4 !important;
  color: #ff7900 !important;
}
/* Also kill any dark grey/blue borders that slip through on menu tables */
#menu_section table, #menu_section td, #menu_section tr {
  border: none !important;
}

/* 3) Summer Camp PAGE stat cards — un-scope the white-text rule so it also applies on /Summer-Camp.html */
.camp-stat-card,
.camp-stat-card .camp-stat-label,
.camp-stat-card .camp-stat-value,
.camp-stat-card .camp-stat-value span,
.camp-stat-card .camp-stat-sub {
  color: #ffffff !important;
}
/* All 4 camp cards share white text — yellow stays #ffd23f but uses white + text-shadow for contrast */
.camp-stat-card.camp-stat-yellow {
  background: #e89500 !important; /* deeper gold so white text reads cleanly */
}
/* ==== /Nav double-line + dropdown border + camp-stat sitewide ==== */

/* ==== Schedule/Enrollment tabs ==== */
/* The .tabs .menu-item a elements (WINTER 2026 / FALL-WINTER 2025 / SPRING 2026 / Class Descriptions on the Schedule & Enrollment page) render with a MainStreets-default blue background + green border. Restyle as sticker-pills in the brand palette. */

.tabs .menu-item,
.tabs .menu-item a,
.TableWithBorders .menu-item,
.TableWithBorders .menu-item a {
  background: #fffaf0 !important;
  border: 2px solid #1f1810 !important;
  border-radius: 999px !important;
  color: #1f1810 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  margin: 3px !important;
  display: inline-block !important;
  box-shadow: 2px 2px 0 0 #1f1810 !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}

.tabs .menu-item a:hover,
.TableWithBorders .menu-item a:hover {
  background: #ff7900 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Active tab — green sticker pill */
.tabs .menu-item a.active,
.TableWithBorders .menu-item a.active,
.tabs .tabbedpanelitemactive,
.tabs .tabbedpanelitemactive a,
.tabbedpanelitemactive {
  background: #009966 !important;
  color: #ffffff !important;
  border: 2px solid #1f1810 !important;
  box-shadow: 2px 2px 0 0 #1f1810 !important;
}

/* Kill table cell borders that surround the tab row */
.tabs table, .tabs tr, .tabs td,
.TableWithBorders table, .TableWithBorders tr, .TableWithBorders td {
  border: none !important;
  background: transparent !important;
}

/* ==== /Schedule/Enrollment tabs ==== */

/* ==== Camp stat font enforcement ==== */
.camp-stat-card .camp-stat-value,
.camp-stat-card .camp-stat-value * {
  font-family: 'Bagel Fat One', sans-serif !important;
  font-weight: 400 !important;
}
.camp-stat-card .camp-stat-value span {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}
.camp-stat-card .camp-stat-label,
.camp-stat-card .camp-stat-sub {
  font-family: 'Inter', sans-serif !important;
}
/* ==== /Camp stat font enforcement ==== */


/* ==== Nav dropdown menu ==== */
/* The ASP.NET dynamic menu renders dropdowns with light-blue table backgrounds. Restyle as cream sticker card. */
.menuItemL2, .menuItemLevel2, .dynamicLevelmenuItem {
  background: #fffaf0 !important;
  border: 2px solid #1f1810 !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 0 #1f1810 !important;
  padding: 6px !important;
  margin-top: 4px !important;
}
.menuItemL2 table, .menuItemLevel2 table, .dynamicLevelmenuItem table,
.menuItemL2 tr, .menuItemLevel2 tr, .dynamicLevelmenuItem tr,
.menuItemL2 td, .menuItemLevel2 td, .dynamicLevelmenuItem td,
.dynamicMenuItem, .dynamicMenuItemFirst, .dynamicMenuItemLast {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}
.menuItemL2 a, .menuItemLevel2 a, .dynamicLevelmenuItem a,
.dynamicMenuItem a {
  background: transparent !important;
  border: none !important;
  color: #1f1810 !important;
  padding: 8px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: block !important;
  border-radius: 6px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.menuItemL2 a:hover, .menuItemLevel2 a:hover, .dynamicLevelmenuItem a:hover,
.dynamicMenuItem a:hover, .dynamicLevelHovermenuItem a,
.dynamicLevelHovermenuItem {
  background: #ff7900 !important;
  color: #ffffff !important;
}
/* ==== /Nav dropdown menu ==== */


/* ==== Hide redundant page-title h2 ==== */
/* On pages that have custom hero content, the template also renders an h2.header with the page name */
/* (e.g. "Spanish Through Art | Summer Camp" above the real hero). Hide those on specific pages. */
.vault-page h2.header,
.vlt224144Page h2.header,
body.vault-page h2.header,
.cms-content-inner > h2.header:first-of-type,
.page-summary > h2.header {
  display: none !important;
}
/* ==== /Hide redundant page-title h2 ==== */

/* ==== Hide auto-generated class list on class_description.aspx ==== */
/* MainStreets auto-renders the full class catalog (with semester dropdown + individual class listings + Summer Camp duplication) BELOW the editable Page Summary. Our V2 Page Summary already covers everything a parent needs on the "What We Offer" page, so hide the redundant auto-generated section. */

.class_descriptionPage .additionalContent,
.class_descriptionPage .classDescriptionControl,
.class_descriptionPage .filters-panel,
.class_descriptionPage .semester-control,
body.class_descriptionPage .additionalContent,
body.class_descriptionPage .classDescriptionControl,
body.class_descriptionPage .footable,
body.class_descriptionPage .classDescriptionSpacer {
  display: none !important;
}

/* ==== /Hide auto-generated class list on class_description.aspx ==== */