@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Figtree:wght@300;400;500;600;700&display=swap');

/* ---- TOKENS ---- */
:root {
  --navy:      #0C2340;
  --navy-md:   #163560;
  --navy-lt:   #1E4A82;
  --navy-dk:   #06142A;
  --gold:      #B8972C;
  --gold-lt:   #D4AF5A;
  --gold-pale: #F7EDD0;
  --cream:     #F9F5EC;
  --warm-wh:   #FDFBF7;
  --text:      #0C1B2E;
  --muted:     #4A5568;
  --rule:      #D4C4A0;
}

/* ---- BASE TYPOGRAPHY ---- */
/* html/body use a light background. A navy body fill was tried (to make any
   zone gaps read dark) but it also painted WA's admin content-editor canvas
   navy, making content hard to edit. Light here keeps editing comfortable;
   zones still define their own navy/colored backgrounds explicitly. */
html {
  background-color: var(--warm-wh) !important;
}

body {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: var(--text) !important;
  background-color: var(--warm-wh) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
}

/* Content area gets the warm white background */
.zoneContent,
.WaPlaceHolderContent,
.zoneContent .WaLayoutItem,
.zoneContent .gadgetContentEditableArea {
  background-color: var(--warm-wh) !important;
}

/* Consistent heading scale — sizes, weight, and navy color locked site-wide */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--navy) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

h1 { font-size: 36px !important; }
h2 { font-size: 28px !important; }
h3 { font-size: 22px !important; font-weight: 600 !important; }
h4 { font-size: 18px !important; font-weight: 600 !important; }
h5 { font-size: 15px !important; font-weight: 600 !important; }
h6 { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }

/* Override the .promo h1 (site title in header area).
   The original has font color #7a0026 via inline <font> tag;
   we can't remove that tag but we can force the h1 color. */
h1.promo {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
  font-size: 40px !important;
  font-weight: 700 !important;
}

h1.promo font {
  color: #fff !important;
}

/* WA's theme and editor embed <font> and <span> tags inside headings with
   their own face/color attributes. Force all inline children to inherit
   both font-family and color from the heading — covers any nesting depth. */
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
h1 font, h2 font, h3 font, h4 font, h5 font, h6 font {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* Higher-specificity sweep for headings inside WA content gadgets,
   in case the WA theme stylesheet wins the global h1–h6 rule above. */
.gadgetContentEditableArea h1,
.gadgetContentEditableArea h2,
.gadgetContentEditableArea h3,
.gadgetContentEditableArea h4,
.gadgetContentEditableArea h5,
.gadgetContentEditableArea h6 {
  color: var(--navy) !important;
}

p {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

a {
  color: var(--navy) !important;
  transition: color 0.15s !important;
}

a:hover {
  color: var(--gold) !important;
  text-decoration: none !important;
}

/* ---- BROAD FIGTREE SWEEP — system page gadgets ---- */
/* WA system pages (events, directory, profiles, forum, blog) render content
   in gadget-specific containers that may not include .gadgetContentEditableArea.
   Without this, div/span text in those containers can inherit Playfair Display
   from h1-h6 via ancestor elements if the markup nests content inside headings. */
.WaGadget p,
.WaGadget li,
.WaGadget span,
.WaGadget div,
.gadgetBody p,
.gadgetBody li,
.gadgetBody span,
.gadgetBody div,
.gadgetBodyNoBorder p,
.gadgetBodyNoBorder li,
.gadgetBodyNoBorder span,
.gadgetBodyNoBorder div {
  font-family: 'Figtree', 'Arial', sans-serif !important;
}

/* Headings inside system gadgets still use Playfair Display */
.WaGadget h1, .WaGadget h2, .WaGadget h3, .WaGadget h4,
.gadgetBody h1, .gadgetBody h2, .gadgetBody h3, .gadgetBody h4,
.gadgetBodyNoBorder h1, .gadgetBodyNoBorder h2, .gadgetBodyNoBorder h3, .gadgetBodyNoBorder h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* ---- CONTENT TYPOGRAPHY NORMALIZATION ---- */
/* WA's editor can output <font> tags, <span> elements with inline styles,
   and bare <p> tags — all potentially with different families/sizes baked in.
   These rules enforce Figtree 16px for all normal body text regardless of
   how WA serializes it.                                                       */
.gadgetContentEditableArea {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 16px !important;
}

/* Legacy <font face="..." size="..."> tags WA still emits */
.gadgetContentEditableArea font {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: inherit !important;
}

/* Inline <span> elements the editor wraps around styled text */
.gadgetContentEditableArea p > span,
.gadgetContentEditableArea li > span,
.gadgetContentEditableArea td > span {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: inherit !important;
}

/* Spans inside headings: descendant selector (not >) catches nested spans */
.gadgetContentEditableArea h1 span,
.gadgetContentEditableArea h2 span,
.gadgetContentEditableArea h3 span,
.gadgetContentEditableArea h4 span {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* ---- HORIZONTAL NAV (zoneHeader2 / WaGadgetMenuHorizontal) ----
   Theme defaults: background #384244, links #d6dde1, active #e87f6d
   Override to: navy background, white links, gold active              */

.menuInner {
  background: var(--navy) !important;
  border-top: 3px solid var(--gold) !important;
  border-bottom: none !important;
}

.menuInner ul.firstLevel {
  background: var(--navy) !important;
}

/* Top-level link — keep original height/padding structure to preserve alignment */
.menuInner ul.firstLevel > li > .item > a {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  height: 26px !important;
  padding: 14px 11px 14px !important;
  line-height: 26px !important;
}

/* Hover */
.menuInner ul.firstLevel > li > .item:hover > a {
  background: var(--navy-md) !important;
  color: #fff !important;
}

/* Active / selected — inset shadow pins the indicator flush to the bottom edge */
.menuInner ul.firstLevel > li.sel > .item > a {
  color: var(--gold-lt) !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 var(--gold) !important;
}

.menuInner ul.firstLevel > li.sel > .item:hover > a {
  color: var(--gold-lt) !important;
  background: var(--navy-md) !important;
}

/* Dropdown background */
.menuInner ul ul {
  background: var(--navy-dk) !important;
  border-top: 2px solid var(--gold) !important;
}

/* Dropdown links */
.menuInner ul ul li > .item > a {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  background: var(--navy-dk) !important;
}

.menuInner ul ul li > .item:hover > a {
  background: var(--navy-md) !important;
  color: var(--gold-lt) !important;
}

.menuInner ul ul li.sel > .item > a {
  color: var(--gold-lt) !important;
}

/* ---- HEADER ZONES ----
   zoneHeader1 = logo/title row, zoneHeader2 = nav bar
   Must target ALL intermediate containers — WA uses inline
   background-color:transparent on several child divs.             */
.zoneHeader1,
.zoneHeader2,
.WaPlaceHolderHeader,
.WaPlaceHolderHeader1,
.zoneHeader1 .WaLayoutContainerOnly,
.zoneHeader2 .WaLayoutContainerOnly,
.zoneHeader1 .WaLayoutItem,
.zoneHeader2 .WaLayoutItem,
.zoneHeader1 .WaLayoutPlaceHolder,
.zoneHeader2 .WaLayoutPlaceHolder,
.zoneHeader1 .WaGadgetOnly,
.zoneHeader2 .WaGadgetOnly {
  background-color: var(--navy) !important;
}

/* Remove any gap between header zones and below nav */
.zoneHeader1,
.zoneHeader2 {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.zoneHeader2 .WaLayoutContainerOnly,
.zoneHeader2 .WaLayoutItem,
.zoneHeader2 .WaLayoutPlaceHolder,
.zoneHeader2 .WaGadgetOnly,
.zoneHeader2 .WaPlaceHolder,
.zoneHeader2 .placeHolderContainer,
.zoneHeader2 > div,
.menuInner,
.menuInner ul.firstLevel {
  border-bottom: none !important;
}

.zoneHeader2 .WaPlaceHolder,
.zoneHeader2 .placeHolderContainer,
.zoneHeader2 > div {
  background-color: var(--navy) !important;
}

/* Text inside header zone */
.zoneHeader1 p,
.WaPlaceHolderHeader p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.zoneHeader1 a,
.WaPlaceHolderHeader a {
  color: var(--gold-lt) !important;
}

/* ---- MOBILE PANEL (hamburger menu) ---- */
.mobilePanel {
  /* Transparent: on mobile this panel is lifted out of flow and overlaid on the
     eye+title lockup (see the ONE-ROW HEADER rules in the 768px block). The
     hamburger/login buttons sit over the navy lockup zone, and the open menu
     list carries its own navy background, so the panel itself paints nothing. */
  background: transparent !important;
  border-bottom: none !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mobilePanelButton {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: var(--navy) !important;
  /* Prevent iOS double-tap zoom on the hamburger button */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.mobilePanelButton:hover {
  background: var(--navy-md) !important;
  color: var(--gold-lt) !important;
}

/* ----------------------------------------------------------------------
   MOBILE MENU LAYOUT OVERRIDE  (the important part)

   WA's mobile panel reuses the SAME .menuInner > ul.firstLevel markup as
   the desktop horizontal nav. Without these overrides, the desktop rules
   below (NAV CENTERING: display:inline-flex, and the fixed height:26px
   link rule) leak in and render the mobile menu HORIZONTALLY — it then
   overflows the viewport and the dropdowns float as overlapping boxes.

   These rules force a clean VERTICAL, full-width, stacked menu. They are
   scoped to .mobilePanel and use 3+ classes so they win on specificity
   against the desktop .menuInner rules (both use !important).
   ---------------------------------------------------------------------- */

/* The menu container + lists: vertical, full width, no centering/flex */
.mobilePanel .menuInner {
  text-align: left !important;
  border-top: none !important;
}
.mobilePanel .menuInner ul.firstLevel,
.mobilePanel .menuInner ul.secondLevel,
.mobilePanel .menuInner ul ul {
  display: block !important;
  width: 100% !important;
  background: var(--navy) !important;
}
.mobilePanel .menuInner ul.firstLevel > li,
.mobilePanel .menuInner ul li {
  display: block !important;
  width: 100% !important;
  float: none !important;
}

/* Submenus: stack inline (static), don't float as absolute boxes */
.mobilePanel .menuInner ul.secondLevel,
.mobilePanel .menuInner ul ul {
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border-top: none !important;
  background: var(--navy-dk) !important;
}

/* The .item wrapper: full width block */
.mobilePanel .menuInner .item {
  display: block !important;
  width: 100% !important;
}

/* First-level links: full width, left-aligned, auto height (kills 26px) */
.mobilePanel .menuInner ul.firstLevel > li > .item > a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.4 !important;
  text-align: left !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  border-bottom: 1px solid rgba(184, 151, 44, 0.15) !important;
  padding: 15px 20px !important;
  box-shadow: none !important;
  touch-action: manipulation !important;
}
.mobilePanel .menuInner ul.firstLevel > li > .item > a > span {
  display: inline !important;
}

/* Selected first-level item */
.mobilePanel .menuInner ul.firstLevel > li.sel > .item > a {
  color: var(--gold-lt) !important;
  background: transparent !important;
  box-shadow: inset 3px 0 0 var(--gold) !important;
}

/* Submenu links: indented, slightly smaller, darker bg */
.mobilePanel .menuInner ul ul li > .item > a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.4 !important;
  text-align: left !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-transform: none !important;
  background: var(--navy-dk) !important;
  border-bottom: 1px solid rgba(184, 151, 44, 0.1) !important;
  padding: 13px 20px 13px 38px !important;
}
.mobilePanel .menuInner ul ul li > .item > a > span {
  display: inline !important;
}

/* Tap feedback */
.mobilePanel .menuInner .item:hover > a,
.mobilePanel .menuInner .item > a:active {
  background: var(--navy-md) !important;
  color: #fff !important;
}

/* ---- CONTENT BLOCKS — recolor the 3 home panels ----
   Original inline colors: green #48A956, purple #9790BE, blue #2F88B8
   Override to navy shades. Uses attribute contains selector.          */
.WaLayoutItem[style*="#48A956"],
.WaLayoutItem[style*="48A956"] {
  background-color: var(--navy) !important;
}

.WaLayoutItem[style*="#9790BE"],
.WaLayoutItem[style*="9790BE"] {
  background-color: var(--navy-md) !important;
}

.WaLayoutItem[style*="#2F88B8"],
.WaLayoutItem[style*="2F88B8"] {
  background-color: var(--navy-lt) !important;
}

/* Text and headings inside dark content panels — scoped to the three
   background overrides so gadgetStyle002 on light backgrounds stays dark */
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
}

.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea li {
  color: rgba(255, 255, 255, 0.8) !important;
}

.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea a {
  color: var(--gold-lt) !important;
}


/* Ensure light-background content always reads dark */
.zoneContent .gadgetContentEditableArea p,
.zoneContent .gadgetContentEditableArea li {
  color: var(--text) !important;
}
.zoneContent .gadgetContentEditableArea h1,
.zoneContent .gadgetContentEditableArea h2,
.zoneContent .gadgetContentEditableArea h3,
.zoneContent .gadgetContentEditableArea h4 {
  color: var(--navy) !important;
}

/* gadgetStyle002 on transparent/light backgrounds — WA theme defaults this
   to light text; override to dark and include the legacy <font> wrapper     */
.gadgetStyle002 .gadgetContentEditableArea font,
.gadgetStyle002 .gadgetContentEditableArea p,
.gadgetStyle002 .gadgetContentEditableArea li {
  color: var(--text) !important;
}
.gadgetStyle002 .gadgetContentEditableArea h1,
.gadgetStyle002 .gadgetContentEditableArea h2,
.gadgetStyle002 .gadgetContentEditableArea h3,
.gadgetStyle002 .gadgetContentEditableArea h4 {
  color: var(--navy) !important;
}

/* Dark panels win back white text — more specific due to parent attribute selector */
.WaLayoutItem[style*="#48A956"] .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="48A956"]  .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="#9790BE"] .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="9790BE"]  .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="#2F88B8"] .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="2F88B8"]  .gadgetStyle002 .gadgetContentEditableArea font {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ---- BUTTONS ---- */
input[type="submit"],
input[type="button"],
button[type="submit"],
.buttonLink,
.WaButtonText,
.sysButton,
a.button,
.button {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background-color: var(--gold) !important;
  color: #fff !important;
  border: none !important;
  padding: 11px 26px !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  text-decoration: none !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button[type="submit"]:hover,
.buttonLink:hover,
.WaButtonText:hover,
a.button:hover {
  background-color: #A0811F !important;
  color: #fff !important;
}

/* ---- FOOTER ---- */

/* Footer zones match the warm-white page background. WA wraps the footer
   in a transparent container that showed a light "band" once body went light;
   rather than chase that wrapper, the whole footer is light so nothing
   contrasts. The gold border-top stays as a clean divider from page content. */
.zoneFooter1,
.WaPlaceHolderFooter {
  background-color: var(--warm-wh) !important;
  border-top: 3px solid var(--gold) !important;
}

/* Footer zone 2 — override the inline #566467 background */
.zoneFooter2,
.WaPlaceHolderFooter1,
#id_Footer1 {
  background-color: var(--warm-wh) !important;
}

.zoneFooter1 p,
.zoneFooter2 p,
.WaPlaceHolderFooter p,
.WaPlaceHolderFooter1 p {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: #4A5568 !important;
}

.zoneFooter1 a,
.zoneFooter2 a,
.WaPlaceHolderFooter a,
.WaPlaceHolderFooter1 a {
  color: #64748B !important;
}

.zoneFooter1 a:hover,
.zoneFooter2 a:hover,
.WaPlaceHolderFooter a:hover,
.WaPlaceHolderFooter1 a:hover {
  color: #94A3B8 !important;
}

.zoneFooter1 h1, .zoneFooter1 h2, .zoneFooter1 h3,
.zoneFooter2 h1, .zoneFooter2 h2, .zoneFooter2 h3 {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: var(--gold) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ---- FORMS ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea,
select {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 15px !important;
  border: 1.5px solid var(--rule) !important;
  padding: 9px 13px !important;
  color: var(--text) !important;
  background-color: #fff !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--navy) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(12, 35, 64, 0.08) !important;
}

label {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: var(--navy) !important;
}

/* ---- TABLES ---- */
th {
  background-color: var(--navy) !important;
  color: #fff !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 11px 14px !important;
}

td {
  border-bottom: 1px solid var(--rule) !important;
  padding: 11px 14px !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
}

/* ---- EVENTS GADGET ---- */
.WaGadgetUpcomingEvents .eventTitle,
.WaGadgetUpcomingEvents h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
}

.WaGadgetUpcomingEvents a {
  color: var(--gold-lt) !important;
}

.WaGadgetUpcomingEvents a:hover {
  color: #fff !important;
}

/* ---- WA BRANDING BAR ---- */
.zoneWAbranding {
  background-color: var(--warm-wh) !important;
  border-top: 1px solid var(--warm-wh) !important;
}

.zoneWAbranding a {
  color: #334155 !important;
}

/* ---- SYSTEM / ALERT MESSAGES ---- */
.systemMessage,
.WaSystemMessage,
.errorMessage {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  border-left: 4px solid var(--gold) !important;
  background-color: var(--gold-pale) !important;
  color: var(--navy) !important;
  padding: 12px 16px !important;
}

/* ---- TOPBAR (HTML gadget injected above logo zone) ----
   Classes used by wildapricot-header-html.html snippet            */
.iao-topbar {
  background: var(--navy) !important;
  border-bottom: 2px solid var(--gold) !important;
  padding: 7px 0 !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
}
.iao-topbar-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.iao-topbar-announce {
  color: #94A3B8 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
}
.iao-topbar-announce a {
  color: var(--gold-lt) !important;
  text-decoration: none !important;
}
.iao-topbar-announce a:hover { color: #fff !important; }
.iao-topbar-links {
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
}
.iao-topbar-links a {
  color: #94A3B8 !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
.iao-topbar-links a:hover { color: var(--gold-lt) !important; }
.iao-topbar-divider {
  width: 1px !important;
  height: 12px !important;
  background: rgba(255,255,255,0.15) !important;
  display: inline-block !important;
}

/* ---- STICKY NAV ---- */
.zoneHeader2 {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 4px 16px rgba(12,35,64,0.10) !important;
}

/* ---- LOGO ZONE — height + vertical centering ---- */
/* Only target the innermost gadget container — avoids breaking WA's layout grid */
.zoneHeader1 {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.zoneHeader1 .gadgetContentEditableArea {
  display: flex !important;
  align-items: center !important;
}
/* Logo image — cap height, preserve aspect ratio */
.zoneHeader1 img {
  max-height: 64px !important;
  width: auto !important;
  display: block !important;
}
.zoneHeader1 .gadgetContentEditableArea p {
  margin-right: -12px !important;
}
/* Collapse the gap between eye logo cell and title cell on desktop */
.zoneHeader1 .WaLayoutTable {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
}
.zoneHeader1 .WaLayoutItem {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.zoneHeader1 .WaLayoutSeparator {
  display: none !important;
  width: 0 !important;
}
h1.promo {
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* ---- NAV CENTERING ---- */
.menuInner {
  text-align: center !important;
}
.menuInner ul.firstLevel {
  display: inline-flex !important;
  justify-content: center !important;
}

/* ---- DROPDOWN CHEVRONS ---- */
/* WA renders expand arrows as border triangles on .item or via span.arrow */
.menuInner .hasChildren > .item::after,
.menuInner .hasChildren > .item > a::after {
  border-top-color: var(--gold-lt) !important;
  border-bottom-color: var(--gold-lt) !important;
}
.menuInner .hasChildren.open > .item::after,
.menuInner .hasChildren.open > .item > a::after {
  border-top-color: var(--gold) !important;
}
.menuInner .hasChildren > .item .arrow {
  border-top-color: var(--gold-lt) !important;
  opacity: 0.85 !important;
}

/* ---- FOCUS RINGS ---- */
/* Restore visible focus for keyboard users (navy outline removed by theme) */
.menuInner a:focus-visible,
.menuInner a:focus {
  outline: 3px solid var(--gold) !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}
.mobilePanel a:focus-visible,
.mobilePanel a:focus {
  outline: 3px solid var(--gold) !important;
  outline-offset: 2px !important;
}

/* ---- WA LOGIN GADGET ---- */
/* ROOT CAUSE OF THE "NAVY BANDS IN THE POPUP":
   The login icon lives in the logo zone (above the nav). When the popup
   drops down it crosses over .zoneHeader2, which is position:sticky with
   z-index:1000. The nav therefore PAINTS ON TOP of the middle of the popup
   — that's the navy band (and you can see the nav's gold top border and
   menu items inside it). It was never a background-color problem.
   Fix: lift the login gadget + its popup above the sticky nav.            */
.loginContainer,
.WaGadgetLogin {
  position: relative !important;
  z-index: 1100 !important;
}

.loginPanel {
  z-index: 1100 !important;
}

/* Panel cosmetics — white card matching the redesign */
.loginPanel {
  background-color: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--rule) !important;
  box-shadow: 0 8px 32px rgba(12,35,64,0.18) !important;
  border-radius: 4px !important;
}

.loginPanel input[type="text"],
.loginPanel input[type="password"] {
  background-color: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--rule) !important;
  /* WA renders a person/lock icon as a left background-image inside the
     input; pad the text over so it no longer overlaps the icon */
  padding-left: 24px !important;
  background-repeat: no-repeat !important;
  background-position: 11px center !important;
}

.loginPanel input[type="submit"],
.loginPanel .loginButton {
  background-color: var(--gold) !important;
  color: #fff !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  width: 100% !important;
  padding: 11px 26px !important;
  cursor: pointer !important;
}

.loginPanel label {
  color: var(--navy) !important;
}

.loginPanel a {
  color: var(--navy) !important;
}
.loginPanel a:hover {
  color: var(--gold) !important;
}

/* Eye icon for password toggle */
.loginPanel .toggle-password {
  color: var(--muted) !important;
  cursor: pointer !important;
}

/* The "Log in" trigger link in the header stays as a white ghost button */
.loginContainer .loginLink,
.loginContainer .logoutLink,
.loginContainer .memberLink {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  letter-spacing: 0.03em !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  padding: 7px 16px !important;
  transition: all 0.15s !important;
  display: inline-block !important;
}
.loginContainer .loginLink:hover,
.loginContainer .logoutLink:hover,
.loginContainer .memberLink:hover {
  border-color: var(--gold-lt) !important;
  color: var(--gold-lt) !important;
}

/* ---- MEMBERS-ONLY INLINE LOGIN ---- */
/* On WA's members-only gate page the login gadget is embedded directly in
   the content zone (not a header dropdown). The header position/z-index
   rules above would push it behind the page background — reset them here. */
/* WA flags this login gadget as full-site-only (.WaGadgetOnly) and its mobile
   theme collapses the whole gadget wrapper to display:none — so on phones the
   inner-panel un-hide below has nothing to show (panel computes to w:0 h:0).
   Force the content-zone login GADGET wrapper visible so the members-only gate
   renders on mobile too. (Scoped to the content zone; header gadgets that are
   correctly mobile-hidden are untouched.) */
.zoneContent .WaGadgetLoginForm,
.WaPlaceHolderContent .WaGadgetLoginForm {
  display: block !important;
}

.zoneContent .loginContainer,
.WaPlaceHolderContent .loginContainer {
  position: static !important;
  z-index: auto !important;
  display: flex !important;
  justify-content: center !important;
  padding: 40px 16px !important;
}

.zoneContent .loginPanel,
.WaPlaceHolderContent .loginPanel {
  position: static !important;
  z-index: auto !important;
  display: block !important;
  /* WA builds .loginPanel as a header dropdown that ships visibility:hidden +
     opacity:0 until a click "opens" it. Inline on the members-only gate there
     is no trigger, so the whole form (OAuth buttons, email/password inputs,
     submit) stays painted-but-invisible — boxes have correct size and color
     yet nothing shows. visibility:hidden inherits, so this one reset un-hides
     the entire form. (Scoped to the content zone so the header popup, which
     SHOULD start hidden, is untouched.) */
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 36px !important;
}

/* The "Log in" trigger link is a header-only affordance — hide it inline */
.zoneContent .loginLink,
.WaPlaceHolderContent .loginLink {
  display: none !important;
}

/* ---- OAUTH SOCIAL BUTTONS (Google, Microsoft, Apple) ----
   WildApricot ships these as solid brand-colored buttons (Apple = black,
   Google = blue #4285f4, Microsoft = #2f2f2f) with WHITE text and white/
   brand logos — a matched, accessible, brand-guideline-compliant set.
   We deliberately DO NOT recolor the backgrounds. The previous version
   forced `background:#fff`, which left WA's white text + Apple's white
   logo washed out on white. Here we only adjust LAYOUT (full-width,
   spacing, radius, font) and keep the brand backgrounds intact.

   Text must be set white EXPLICITLY and with high specificity: the global
   `a { color: var(--navy) !important }` rule (line ~103) otherwise turns
   this text navy-on-dark and re-creates the invisibility. WA itself uses
   no !important on these, so this wins cleanly. */
.wa-authenticateLoginLink {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 16px !important;
  margin-bottom: 8px !important;
  border-radius: 4px !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: opacity 0.15s !important;
}

/* Keep WA's intended white text/logo on the brand backgrounds, beating the
   global navy `a` rule. */
.oAuthButtonsContainer a.wa-authenticateLoginLink,
.oAuthButtonsContainer a.wa-authenticateLoginLink .authenticateLoginText,
.wa-authenticateLoginLink,
.wa-authenticateLoginLink .authenticateLoginText {
  color: #fff !important;
}

.wa-authenticateLoginLink:hover {
  opacity: 0.85 !important;
}

/* Divider between OAuth block and email/password form */
.oAuthButtonsContainer {
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* Field row spacing */
.loginUserName,
.loginPassword {
  margin-bottom: 14px !important;
}

/* Remember me checkbox row */
.loginActionRememberMe {
  margin: 12px 0 !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 14px !important;
  color: var(--muted) !important;
}

/* Forgot password link */
.loginPasswordForgot {
  margin-top: 14px !important;
  text-align: center !important;
  font-size: 13.5px !important;
}

.loginPasswordForgot a {
  color: var(--muted) !important;
  text-decoration: underline !important;
}

.loginPasswordForgot a:hover {
  color: var(--navy) !important;
}

/* ---- CONTENT EDITOR — navy bleed-through fix ---- */
/* WA's TinyMCE editor copies the page's custom CSS into its editing iframe.
   Our body{background:navy} follows it in, making typed text invisible.
   .mceContentBody = TinyMCE 4; .mce-content-body = TinyMCE 5+.
   Reset the editor frame body to white so the editor remains usable.     */
.mceContentBody,
body.mceContentBody,
.mce-content-body,
body.mce-content-body {
  background-color: #fff !important;
  color: var(--text) !important;
}

/* Catch any inline contenteditable gadgets WA uses outside TinyMCE */
[contenteditable="true"],
[contenteditable=""] {
  background-color: #fff !important;
  color: var(--text) !important;
}

/* ---- BACKGROUND IMAGE GADGETS ---- */
/* WA content gadgets can have background-image set via inline style.
   Our warm-white rule on .gadgetContentEditableArea would cover the image;
   this resets the inner body to transparent so the image shows through. */
[style*="background-image"] .gadgetStyleBody,
[style*="background-image"] .gadgetContentEditableArea {
  background-color: transparent !important;
}

/* ---- HEADER BANNER FIX ---- */
/* Hide the banner gif that appears on inner pages */
img[src*="Banner-2"] {
  display: none !important;
}

/* Inject org name — target the <p> that holds the hidden image */
.zoneHeader1 p:has(img[src*="Banner-2"])::after {
  content: 'Indiana Academy of Ophthalmology';
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  display: block !important;
}

/* ---- MOBILE ---- */
@media (max-width: 768px) {
  h1 { font-size: 28px !important; }
  h1.promo { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 19px !important; }
  h4 { font-size: 16px !important; }

  /* Topbar: hide announcement, keep links right-aligned */
  .iao-topbar-announce { display: none !important; }
  .iao-topbar-inner { justify-content: flex-end !important; }

  /* Hide the desktop horizontal nav on mobile — the .mobilePanel hamburger
     handles navigation. This also removes the stray inset gold line, which
     was this nav's leftover border-top floating in the header. */
  .zoneHeader2 { display: none !important; }

  /* RESPONSIVE MEDIA — the key overflow fix.
     A fixed-width iframe (event embed/video, ~560px) and oversized promo
     images push the page wider than the viewport; mobile Safari then shrinks
     the whole page to fit, which is what makes the right side look
     "pixelated"/blurry. Constrain all embedded media to the column width. */
  img,
  iframe,
  embed,
  object,
  video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* WA LAYOUT TABLES — the remaining overflow source.
     WA builds multi-column layouts (header logo row, footer columns, home
     content panels) with <table class="WaLayoutTable"> whose cells render at
     fixed content-box widths (~370–398px), overrunning the viewport's right
     edge. Block-stack every layout table on mobile so each cell becomes a
     full-width single-column block — fixes the overflow site-wide and is the
     correct responsive behavior for these columns. (Data tables use a
     separate rule below: .gadgetContentEditableArea table -> overflow-x.) */
  .WaLayoutTable,
  .WaLayoutTable > tbody,
  .WaLayoutTable > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .WaLayoutItem {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header LOGO LOCKUP — eye + title side by side in one centered group.
     The global rule above block-stacks every .WaLayoutItem; here we override
     the header's row to flex so the eye logo cell and the title cell sit on
     one line, vertically centered, packed together as a single brand lockup
     (instead of stacked cells separated by gold rules and dead space). */
  .zoneHeader1 .WaLayoutTable > tbody > tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .zoneHeader1 .WaLayoutItem {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Eye cell: fixed size, never shrinks */
  .zoneHeader1 .WaLayoutItem:has(img) { flex: 0 0 auto !important; }
  /* Title cell: cap width so the long text wraps to 2 lines instead of overflowing */
  .zoneHeader1 .WaLayoutItem:has(h1) { max-width: 210px !important; }
  /* Empty cells: hide */
  .zoneHeader1 .WaLayoutItem:not(:has(img)):not(:has(h1)) { display: none !important; }
  /* Zero out the wrapper padding/margins WA bakes into the header gadgets. The
     unnamed div inside .WaPlaceHolderHeader carries a padding-top:20px that
     pushes the eye+title ~15px below the zone's vertical center (so they sat
     lower than the hamburger/login icons); zero the placeholder subtree so the
     lockup centers on the same line as the buttons. */
  .zoneHeader1 .WaLayoutContainerOnly,
  .zoneHeader1 .WaLayoutPlaceHolder,
  .zoneHeader1 .placeHolderContainer,
  .zoneHeader1 .WaGadgetContent,
  .zoneHeader1 .gadgetStyleBody,
  .zoneHeader1 .WaPlaceHolderHeader,
  .zoneHeader1 .WaPlaceHolderHeader > div {
    padding: 0 !important;
    margin: 0 !important;
  }
  .zoneHeader1 .WaLayoutSeparator { display: none !important; }

  /* GOLD RULE under the lockup — ONE clean full-width line. WA bakes a pale 1px
     border-bottom (rgb(212,196,160)) onto each layout cell; kill those (the
     single zone border below replaces them). */
  .zoneHeader1 .WaLayoutItem { border-bottom: none !important; }

  /* ONE-ROW HEADER — hamburger + eye + title + login on a single fixed-height
     row. WA renders the hamburger/login bar (.mobilePanelContainer) as its own
     band ABOVE the eye+title lockup (.zoneHeader1); both are children of the
     position:relative .mLayout.layoutMain. Lift the bar out of flow (absolute)
     so the lockup rises to the top, pin the buttons to the left/right edges, and
     give the zone a FIXED height so the buttons and the eye+title share one
     vertical center. Side padding clears the buttons; the gold line sits under
     the whole row. */
  .zoneHeader1 {
    height: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 50px !important;
    box-sizing: border-box !important;
    border-bottom: 2px solid var(--gold) !important;
    /* Stick the header to the top on scroll. No ancestor has overflow!=visible,
       so sticky resolves against the viewport; the fixed button bar above rides
       along at the same top:0. z-index keeps it above scrolling content. */
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
  }
  /* WA wraps the eye gadget in an unnamed div with padding:12px 0 0 50px — that
     50px left padding shoves the eye ring to the right of its cell, so the
     visible eye+title group sat ~25px right of center. Zero the horizontal
     padding (keep the top padding; vertical alignment is already tuned) so the
     lockup centers in the viewport between the hamburger and login. */
  .zoneHeader1 .placeHolderContainer > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .zoneHeader1 .gadgetContentEditableArea,
  .WaPlaceHolderHeader .gadgetContentEditableArea {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Title: centered, wraps to two lines, sized to fit between the hamburger
     (left) and login (right) buttons within the row height. The WA content is
     the full "Indiana Academy of Ophthalmology" string (no separate eye logo),
     so the cell is full-width and the text centers within it. */
  .zoneHeader1 h1.promo {
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
    width: auto !important;
    margin: 0 !important;
  }
  .zoneHeader1 img { max-height: 50px !important; }

  /* position:fixed (not absolute) so the hamburger/login bar STAYS pinned to the
     top of the viewport on scroll, together with the sticky lockup below. */
  .mobilePanelContainer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 50 !important;
  }
  /* Buttons anchor to .mobilePanel (position:relative); full row height so the
     icons line up with the eye/title vertical center. */
  .mobilePanelButton.buttonMenu,
  .mobilePanelButton.buttonLogin {
    position: absolute !important;
    top: 0 !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
  }
  .mobilePanelButton.buttonMenu  { left: 0 !important; }
  .mobilePanelButton.buttonLogin { right: 0 !important; }
  /* The icons are ::before pseudo-elements WA pins at top:0 (a 50x50 box), so
     flex centering on the button can't move them. Center the pseudo itself so
     the hamburger/login glyphs line up with the eye + title vertical center. */
  .mobilePanelButton.buttonMenu::before,
  .mobilePanelButton.buttonLogin::before {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  /* Open menu drops BELOW the row. WA positions .menuInner absolute when open;
     pin it flush under the 90px header row (its auto top otherwise leaves a gap
     where the content background shows through). */
  .mobilePanel .menuInner {
    position: absolute !important;
    top: 90px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    /* The bar is fixed, so the open menu is effectively viewport-pinned. Cap it
       to the space below the header and scroll internally, so a long menu's
       lower items stay reachable instead of being cut off the bottom.
       iOS Safari: 100vh = the LARGEST viewport (toolbar retracted), so it runs
       the menu's bottom behind the visible Safari toolbar and the last item gets
       lost/unreachable. 100dvh tracks the CURRENTLY VISIBLE height (dynamic
       toolbar excluded) and fixes it; the vh line stays first as a fallback for
       browsers without dvh. Bottom padding clears the home indicator. */
    max-height: calc(100vh - 90px) !important;
    max-height: calc(100dvh - 90px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  /* Bigger touch targets in the WA mobile panel (min ~44px per WCAG) */
  .mobilePanel .firstLevel > li > .item > a {
    padding: 16px 20px !important;
    font-size: 15px !important;
  }

  /* iOS Safari auto-zoom prevention: inputs below 16px trigger zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Tables: horizontal scroll instead of overflowing the viewport */
  .gadgetContentEditableArea table,
  .WaGadgetEvents table,
  .WaGadgetUpcomingEvents table,
  .eventTable,
  table.tablesorter {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* Buttons: full width for easy tapping */
  input[type="submit"],
  .buttonLink,
  .WaButtonText,
  a.button {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Content zones: tighter side padding */
  .zoneContent,
  .WaPlaceHolderContent {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Very small phones: hide topbar entirely, tighten further */
@media (max-width: 480px) {
  .iao-topbar { display: none !important; }

  h1 { font-size: 24px !important; }
  h1.promo { font-size: 22px !important; }
  h2 { font-size: 19px !important; }
  h3 { font-size: 17px !important; }
  h4 { font-size: 15px !important; }

  .zoneHeader1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .zoneHeader1 img { max-height: 44px !important; }

  /* Stack WA multi-column content cells on very narrow screens */
  td[style*="width: 50%"],
  td[style*="width:50%"],
  td[style*="width: 33%"],
  td[style*="width:33%"] {
    display: block !important;
    width: 100% !important;
  }

  .zoneContent,
  .WaPlaceHolderContent {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}