@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/*** ICF Greater Austin — CSS Styles ***/
/*** Author: Rafael Ruiz - Tonalli Media Services ***/
/*** Last Update: 07/21/2026 ***/

/* ---- Fonts ---- */
body, p, li, td, th, input, textarea, select, button {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', Arial, sans-serif !important;
  font-weight: 600 !important;
  color: #212251 !important;            /* Deep Blue */
}

/* ---- Body text & page background ---- */
body { color: #212251; background-color: #f8f0e4 !important; }   /* Bone */

/* ---- Links ---- */
a { color: #2b379b; }                   /* Blue */
a:hover { color: #5778fa; }             /* Light Blue */

/* ---- Buttons: blue pill, white text ---- */
a.button, .button, .stylizedButton, a.stylizedButton,
input.button, button.button,
input[type="submit"], input[type="button"], button[type="submit"] {
  background-color: #2b379b !important; /* Blue */
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;      /* pill */
  font-weight: 600 !important;
  padding: 10px 24px !important;
  display: inline-block;
}
a.button:hover, .button:hover, .stylizedButton:hover,
input[type="submit"]:hover, input[type="button"]:hover {
  background-color: #212251 !important; /* Deep Blue */
}
a.button, .button, .stylizedButton, .functionalButton,
input[type="submit"], input[type="button"], button,
a.button:hover, .button:hover, .stylizedButton:hover, .functionalButton:hover,
input[type="submit"]:hover, input[type="button"]:hover, button:hover {
  box-shadow: none !important;
}

/* ---- Images: 15px rounded corners site-wide (content, header, footer) ---- */
.zoneContent img,
.zoneHeader1 img, .zoneHeader2 img,
.zoneFooter1 img, .zoneFooter2 img {
  border-radius: 15px;
}
/* slideshow frame */
.WaGadgetSlideshow .camera_wrap { border-radius: 15px; overflow: hidden; }

/* ---- Opt-out from rounding ----
   Reusable: add the class "no-round" to any image (or a wrapper around it). Logos are excluded automatically below. */
img.no-round, .no-round img,
.zoneHeader1 .WaGadgetContent img,            /* header logo */
.zoneFooter1 .WaLayoutContainerFirst img,     /* footer logo */
.zoneFooter2 .WaLayoutContainerFirst img {
  border-radius: 0 !important;
}

/* ---- Rounding Class ---- 
Reusable: add the class "rounded" */
.rounded { border-radius: 15px !important; overflow: hidden !important; }

/* ===== HEADER: deep-blue band ===== */
.zonePlace.zoneHeader1,
.zonePlace.zoneHeader2 { background: #212251 !important; }

.WaPlaceHolderHeader1, #id_Header1 { background-image: none !important; }

.zoneHeader1 .WaLayoutItem, .zoneHeader1 .WaLayoutPlaceHolder,
.zoneHeader1 .placeHolderContainer, .zoneHeader1 .WaGadget,
.zoneHeader1 .gadgetStyleBody, .zoneHeader1 [class*="gadgetStyle"],
.zoneHeader2 .WaLayoutItem, .zoneHeader2 [class*="gadgetStyle"] {
  background: transparent !important;
}
.zoneHeader1 .WaLayoutItem { vertical-align: middle !important; }

/* "Log in" link */
.zoneHeader1 .loginLink, .zoneHeader2 .loginLink {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  text-indent: 0 !important;
  background: transparent !important;
  padding: 8px 24px !important;
  color: #ffffff !important;
  font: 600 14px/1.4 'Plus Jakarta Sans', Arial, sans-serif !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background-color .2s, border-color .2s, color .2s;
}
.zoneHeader1 .loginLink:before, .zoneHeader2 .loginLink:before {
  content: none !important;   /* kill the WA-theme-icons person glyph */
  display: none !important;
}
.zoneHeader1 .loginLink:hover, .zoneHeader2 .loginLink:hover {
  background-color: #5778fa !important;
  border-color: #5778fa !important;
  color: #ffffff !important;
}

/* SOCIAL ICONS (global: header + footer) */
.zoneHeader1 [class*="ThemeStyle"],
.zoneFooter1 [class*="ThemeStyle"], .zoneFooter2 [class*="ThemeStyle"],
.zoneHeader1 .WaGadgetSocialProfile,
.zoneFooter1 .WaGadgetSocialProfile, .zoneFooter2 .WaGadgetSocialProfile { background: transparent !important; }

.zoneHeader1 .WaGadgetSocialProfile li a,
.zoneFooter1 .WaGadgetSocialProfile li a,
.zoneFooter2 .WaGadgetSocialProfile li a {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;   /* circle */
  box-sizing: border-box !important;
  width: 36px !important;           /* smaller, tighter circle (theme default = 50px) */
  height: 36px !important;
  font-size: 16px !important;       /* glyph size (theme default = 24px) */
  line-height: 32px !important;
  margin: 0 5px !important;
  transition: color .2s, border-color .2s;
}
.zoneHeader1 .WaGadgetSocialProfile li a:hover,
.zoneFooter1 .WaGadgetSocialProfile li a:hover,
.zoneFooter2 .WaGadgetSocialProfile li a:hover {
  background: #ffffff !important;   /* white fill */
  color: #212251 !important;        /* deep-blue glyph */
  border-color: #ffffff !important;
}

/* Content-area social gadget */
.zoneContent .WaGadgetSocialProfile li a {
  background: transparent !important;
  color: #2b379b !important;
  border: 2px solid #2b379b !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 30px !important;
  margin: 0 5px !important;
  transition: color .2s, border-color .2s;
}
.zoneContent .WaGadgetSocialProfile li a:hover {
  background: #2b379b !important;   /* blue fill (white circle would vanish on bone) */
  color: #ffffff !important;
  border-color: #2b379b !important;
}

/* Search box */
.zoneHeader1 .searchBoxField, .zoneHeader2 .searchBoxField {
  background: rgba(255,255,255,.12) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.45) !important; border-radius: 999px !important;
}
.zoneHeader1 .searchBoxField::placeholder,
.zoneHeader2 .searchBoxField::placeholder { color: #c9cfee !important; }
/* magnifier icon */
.zoneHeader1 .searchBoxFieldContainer:before,
.zoneHeader2 .searchBoxFieldContainer:before { color: #ffffff !important; }

/* Header logo */
.zoneHeader1 .WaGadgetContent img { max-width: 100% !important; }

/* ===== MENU (Tinted Tiles: real dropdown menu) ===== */

.WaGadgetMenuHorizontal .menuInner,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel { background: transparent !important; }
/* dropdown panels stay solid deep-blue so they're readable over page content */
.WaGadgetMenuHorizontal .menuInner ul ul,
.WaGadgetMenuHorizontal .menuInner ul.secondLevel,
.WaGadgetMenuHorizontal .menuInner ul ul li > .item > a { background: #212251 !important; }
.WaGadgetMenuHorizontal .menuInner ul ul li > .item:hover > a { background: #2b379b !important; color: #fff !important; }
/* kill the theme's #165684 hover box on top-level items */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item:hover > a { background: transparent !important; }

.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;     
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:hover > .item > a,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a {
  color: #5778fa !important;
  background: transparent !important;
}
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a > span {
  box-shadow: inset 0 -2px 0 #5778fa;   
}
/* dropdown panel */
.WaGadgetMenuHorizontal .menuInner ul.secondLevel {
  background: #212251 !important;
  border-radius: 0 0 10px 10px;
}
.WaGadgetMenuHorizontal .menuInner ul.secondLevel a {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
  text-transform: none !important;
}
.WaGadgetMenuHorizontal .menuInner ul.secondLevel li:hover > .item > a { color: #ffffff !important; }  /* white text on the blue hover highlight */

/* ===== MOBILE PANEL (hamburger menu) — rebrand from theme azure to brand blues ===== */
.WaGadgetMobilePanel .mobilePanel,
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel,
.WaGadgetMobilePanel .mobilePanel .loginInner { background: #212251 !important; }   /* Deep Blue */
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel { border-top-color: rgba(255,255,255,.2) !important; }
.WaGadgetMobilePanel .mobilePanel .menuInner ul ul { background: #2b379b !important; }     /* submenu = Blue */
.WaGadgetMobilePanel .mobilePanel .menuInner ul ul ul { background: #202a6e !important; }   /* deeper level */
.WaGadgetMobilePanel .mobilePanel .menuInner a {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
  text-transform: none !important;
  color: #ffffff !important;
}
.WaGadgetMobilePanel .mobilePanel .menuInner li.sel > .item > a,
.WaGadgetMobilePanel .mobilePanel .menuInner .item:hover > a { color: #5778fa !important; }  /* Light Blue active/hover */

/* ===== FOOTER: deep-blue band ===== */
.zonePlace.zoneFooter1, .zonePlace.zoneFooter2, .zonePlace.zoneWAbranding { background: #212251 !important; }
.zoneWAbranding, .zoneWAbranding a, #idFooterPoweredByWA, #idFooterPoweredByWA a { color: #aeb6dd !important; font-size: 14px !important; }


.zonePlace.zoneFooter1 .WaPlaceHolder,
.zonePlace.zoneFooter2 .WaPlaceHolder { background: transparent !important; }


.zonePlace.zoneWAbranding { margin: 0 !important; }
.zonePlace.zoneFooter1 { padding: 0 !important; }

/* all footer text white */
.zoneFooter1, .zoneFooter1 p, .zoneFooter1 a,
.zoneFooter1 h1, .zoneFooter1 h2, .zoneFooter1 h3,
.zoneFooter2, .zoneFooter2 p, .zoneFooter2 a,
.zoneFooter2 h1, .zoneFooter2 h2, .zoneFooter2 h3 { color: #fff !important; }

/* clear gadget/column backgrounds inside the footer band */
.zoneFooter1 .WaLayoutItem, .zoneFooter1 .WaLayoutPlaceHolder,
.zoneFooter1 .placeHolderContainer, .zoneFooter1 .WaGadget,
.zoneFooter1 .gadgetStyleBody, .zoneFooter1 [class*="gadgetStyle"],
.zoneFooter2 .WaLayoutItem, .zoneFooter2 .WaLayoutPlaceHolder,
.zoneFooter2 .placeHolderContainer, .zoneFooter2 .WaGadget,
.zoneFooter2 .gadgetStyleBody, .zoneFooter2 [class*="gadgetStyle"] { background: transparent !important; }

/* columns centered + logo size */
.zoneFooter1 .WaLayoutItem, .zoneFooter2 .WaLayoutItem { vertical-align: middle; }
.zoneFooter1 img, .zoneFooter2 img { height: 62px; width: auto; }

/* newsletter link style (Content-gadget links only) */
.zoneFooter1 .gadgetContentEditableArea a,
.zoneFooter2 .gadgetContentEditableArea a { text-decoration: underline; font-weight: 600; color: #fff !important; }
.zoneFooter1 .gadgetContentEditableArea a:hover,
.zoneFooter2 .gadgetContentEditableArea a:hover { color: #5778fa !important; }

/* HR divider */
.zoneFooter1 .WaLayoutContainerFirst,
.zoneFooter2 .WaLayoutContainerFirst {
  border-bottom: none !important;   
}
.zoneFooter1 .WaLayoutContainerLast,
.zoneFooter2 .WaLayoutContainerLast {
  border-top: 1px solid rgba(255,255,255,.30) !important;
  padding-top: 18px !important;
  margin-top: 18px !important;
}

/* copyright line smaller */
.zoneFooter1 .WaLayoutContainerLast p,
.zoneFooter2 .WaLayoutContainerLast p { font-size: 14px; color: #e7e9f5 !important; }

/* ===== MOBILE (<=767px) spacing tweaks ===== */
@media (max-width: 767px) {
  /* header: tighten */
  .zoneHeader1 .WaPlaceHolderHeader > div {
    padding-top: 16px !important;
    padding-bottom: 30px !important;
  }
  /* footer: more space above the logo */
  .zonePlace.zoneFooter1 .WaPlaceHolderFooter1 > div,
  .zonePlace.zoneFooter2 .WaPlaceHolderFooter1 > div {
    padding-top: 30px !important;
  }
}

/* ---- Fixing Responsive embedded iframes (Google Forms, Maps, videos) ---- */
.zoneContent iframe { max-width: 100% !important; }

/* ---- Rounded content cards ---- */
.zoneContent .WaLayoutItem[style*="background-color"] {
  border-radius: 15px !important;
  overflow: hidden;
}

/* ===== Existing site CSS kept (Google Slides responsive embed) =====
   was previously pasted with <style> tags — tags removed, rules preserved */
.responsive-google-slides {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Ratio */
  height: 0;
  overflow: hidden;
}
.responsive-google-slides iframe {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}