/* IFA child theme bundle. Generated by inc/css-bundle.php; edit the sources, not this file. */

/* ---- style.css ---- */
/*
Theme Name: Divi Child Theme
Version: 1.1
Description: A child theme to house custom coding which modifies the Divi parent theme by Elegant Themes. Includes default line numbers where the code was taken from in the parent theme.
Author:   WowDigital.com
Template: Divi
*/

/*
 * The three Bootstrap 4 reboot rules the site came to depend on.
 * Bootstrap was loaded site-wide for years and has been removed; with it
 * disabled on the live pages, these were the only differences found:
 *  - hr margins: Network Partners separates ~100 entries with <hr>, and
 *    loses ~1,700px of spacing without them.
 *  - bare <a name> anchors: without this they pick up the link colour, so
 *    the A–Z headings there turn teal (#29A5A1), which fails contrast.
 *  - form controls inheriting line-height: nav search and the library
 *    filters are sized around it.
 */
hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  line-height: inherit;
}

:root {
  --ifa-green: #49B461;
  --ifa-dark-blue: #203248;
  --ifa-light-mint: #EDF7F4;
  --ifa-dark-teal: #255F71;
  --ifa-teal: #29A5A1;
  --ifa-purple: #A05793;
}

/*
body .gform_wrapper form .gform_body .gform_fields .gfield select,
body .gform_wrapper form .gform_body .gform_fields .gfield textarea,
body .gform_wrapper form .gform_body .gform_fields .gfield input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  border: 2px solid var(--ifa-dark-blue) !important; 
}*/

/* coloured boxes layout code */
.row-1-style * {
	color: #fff !important;
}
.row-1-style .grid figure img {
	opacity: 1;
	height:180px;
}
.row-1-style .grid figure figcaption {
	padding: 10px;
	text-align: right;
	bottom: 0;
	height: auto;
	top: auto;
	z-index: 999
}
.row-1-style figure {
/*	transition: all .3s ease-in-out 0;*/
	margin-bottom: 0!important;
	transition: all 0.3s ease, padding 0s linear;
}
.row-1-style .grid .overlay {
	background: rgba(0,174,112,1);
	position: absolute;
	height: 100%;
	top: 0;
	width: 100%;
	z-index: 0;
/*	transition: all 0.3s ease-in-out 0;*/
	-webkit-transition: all 0.3s ease-in-out 0;
	transition: all 0.3s ease, padding 0s linear;
}
.row-1-style .grid figure:hover .overlay {
	background: rgba(0,174,112,0.75)
}


/* *****
 custom box colours
 ***** */
.row-1-style .grid .overlay.one {
	background: rgba(0,174,112,1)!important
}
.row-1-style .grid figure:hover .overlay.one {
	background: rgba(0,174,112,0.75)!important
}
.row-1-style .grid .overlay.two {
	background: rgba(31,50,72,1)!important
}
.row-1-style .grid figure:hover .overlay.two {
	background: rgba(31,50,72,0.75)!important
}
.row-1-style .grid .overlay.three {
	background: rgba(37,94,112,1)!important
}
.row-1-style .grid figure:hover .overlay.three {
	background: rgba(37,94,112,0.75)!important
}
.row-1-style .grid .overlay.four {
	background: rgba(40,165,161,1)!important
}
.row-1-style .grid figure:hover .overlay.four {
	background: rgba(40,165,161,0.75)!important
}
.row-1-style .grid .overlay.five {
	background: rgba(159,87,146,1)!important
}
.row-1-style .grid figure:hover .overlay.five {
	background: rgba(159,87,146,0.75)!important
}

.row-1-style .grid, .row-2-style .grid, .row-3-style .grid {
	padding: 0
}
.row-1-style, .row-2-style, .row-3-style {
	padding: 0 0 40px!important
}



/*hover box css*/
.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1000px;
	list-style: none;
	text-align: center
}



/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 100%;
	max-width: 100%;
	max-height: 360px;
	width: 99%;
	background: #000000;
	text-align: center;
	cursor: pointer
}
.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: .8;
	width: 100%
}
.grid figure figcaption {
	padding: 2em;
	color: #fff;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}
.grid figure figcaption::before, .grid figure figcaption::after {
	pointer-events: none
}
.grid figure figcaption, .grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0
}
.grid figure h2 {
	word-spacing: .1em;
	font-weight: 500;
	font-size: 1.3em;
	text-transform:uppercase;
}
.grid figure .smtext {
	font-size: 0.85em;
	text-transform:uppercase;
	line-height:1.1em;
	font-weight: 500;
}
.grid figure h2, .grid figure p {
	margin: 0
}
.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%
}



/***** MEDIA QUERIES ******/
@media screen and (max-width: 50em) {
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%
	}
	.grid figure img {
		min-height: 100%
	}
}

.membership-renewal{
    overflow: hidden;
}
.membership-renewal .second-line-space{
	margin-bottom: 50px;
}
.membership-renewal .contact-top-space{
	margin-top: 30px;
}

/* Keynote-style text box (accent only) */
.ifa-keynote-box {
  padding: 20px 25px;
  background-color: #ffffff;
  position: relative;
}
.ifa-keynote-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 4px;
  background-color: var(--ifa-green, #49B461);
  border-radius: 2px;
}
.ifa-keynote-box p:first-child {
  font-weight: 600;
  color: #203248;
  margin-bottom: 5px;
}
.ifa-keynote-box p {
  margin: 0;
  color: #6a6a6a;
  font-size: 15px;
  line-height: 1.5;
}

/* =========================================================
   HERO SECTION TITLE OVERLAP LAYOUT
   Module classes: g-hero-section (section), g-overlap-title (text module)
   ========================================================= */

.g-hero-section {
  position: relative !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  max-height: 50vh !important;
}
.g-hero-section .et_pb_section_inner {
  display: flex !important;
  flex-direction: column !important;
  flex: 1;
  justify-content: flex-end !important;
}
.g-hero-section > .et_pb_row {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  position: relative;
}
.g-hero-section .et_pb_section_inner > .et_pb_row {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}
.g-hero-section .et_pb_column {
  overflow: visible !important;
  position: relative;
}

.et_pb_text.g-overlap-title {
  width: fit-content !important;
  max-width: 100%;
  display: inline-flex !important;
  background: #fff;
  padding: 24px 32px;
  margin: 0 !important;
  transform: translateY(50%);
  position: relative;
  z-index: 10;
}
.g-overlap-title .et_pb_text_inner,
.g-overlap-title h1,
.g-overlap-title p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Main nav dropdowns above hero/slider and first-section content */
#main-header {
  z-index: 99999 !important;
}

/* =========================================================
   DIVI TEXT MODULE — Global typography defaults
   ========================================================= */

.et_pb_text_inner a {
  color: var(--ifa-teal);
  text-decoration: underline;
  font-weight: bold;
}

.et_pb_text_inner a:hover {
  text-decoration: none;
  font-weight: bold;
}

/* Network Partners (page 52) lists ~220 partner links, and teal on white is
   3.0:1, under the 4.5:1 AA needs for body-size text. Dark teal is the site's
   action colour (7.3:1); the hover goes to navy as actions do elsewhere.
   Scoped to this page only: the teal above is still the site-wide default. */
.page-id-52 .et_pb_text_inner a {
  color: var(--ifa-dark-teal);
}
.page-id-52 .et_pb_text_inner a:hover {
  color: var(--ifa-dark-blue);
}


/* ---- css/header.css ---- */
/* =============================================================
   HEADER — IFA STYLES
   Header row alignment and mobile logo layout.
   ============================================================= */

.ifa-header-row {
  display: flex;
  align-items: center;
}

.ifa-header-row .et_pb_column:nth-child(2),
.ifa-header-row .et_pb_column:nth-child(3) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .ifa-header-row .et_pb_column:nth-child(2),
  .ifa-header-row .et_pb_column:nth-child(3) {
    display: none !important;
  }

  .ifa-header-row {
    display: block !important;
  }

  .ifa-header-row .et_pb_column:first-child {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    float: none !important;
    text-align: center !important;
  }

  .ifa-header-row .et_pb_column:first-child .et_pb_image,
  .ifa-header-row .et_pb_column:first-child .et_pb_image_wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .ifa-header-row .et_pb_column:first-child img {
    display: block !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
  }
}

/* =============================================================
   DIVI IMAGES — reserve space before a lazy image loads (CLS)
   -------------------------------------------------------------
   Nothing to do with the header. It is here only because this
   file is enqueued on every page; it can move to a stylesheet of
   its own once that has an enqueue line.

   An <img> with width/height attributes gets two things from
   them: an aspect-ratio, and a presentational width. Before it
   loads an image has no natural width, so that attribute width is
   the only thing giving it a box. Divi discards it at 980px and
   below: every Image module gets a generated

     @media (max-width: 980px) {
       .et_pb_image_N .et_pb_image_wrap img { width: auto }
     }

   and blurb icons get `.et_pb_main_blurb_image img[src*=".svg"]
   { width: auto }` at every width. With width:auto and nothing
   loaded yet, Chrome lays the image out at 0x0, so each lazy
   image pushes everything below it down as it arrives. Above
   980px Divi emits no width for Image modules, which is why
   desktop never shifted.

   `revert-layer` rolls width back past those author rules to the
   attribute width, which is what desktop already uses. Divi's
   global `img { max-width: 100%; height: auto }` still caps it at
   the column and derives the height from the aspect-ratio. Once
   loaded, that matches width:auto whenever the natural width is
   either at least the column width or equal to the attribute.
   The `sizes` values WordPress and Divi write guarantee one or
   the other (WordPress: min(100vw, attribute width); Divi: a
   breakpoint at or above the viewport), and without srcset the
   natural width is the file's, which is what WordPress writes as
   the width attribute. An image with no width attribute has
   nothing to revert to and behaves exactly as before. The one
   exception is a module with a fixed Divi Height: its width then
   follows the attribute rather than the ratio (one post when this
   was written: 3px wider, 599 to 602, at a 768px viewport).

   Scoped to page and Theme Builder body content. The TB footer
   logo is left out on purpose: it pairs Divi's width:auto with
   max-height:100px so that it shrinks by height, and a fixed
   attribute width would stretch it instead. The header logo is
   an SVG that loads eagerly, and has its own rules above.

   Image-module SVGs keep Divi's width:auto, because their
   attribute sizes are often nominal (3000x3000 on a 150px icon)
   and reverting could enlarge one. Blurb SVGs are reverted
   because every SVG blurb on the site, seven when this was
   written, sets an icon width, which Divi puts on
   .et_pb_main_blurb_image; the attribute width is only ever
   clamped down to that. A new SVG blurb with no icon width would
   render its icon at column width, so give it one. Left- and
   right-positioned blurbs are excluded because Divi sizes their
   icons with `width: inherit`, which this would override.
   ============================================================= */

@media (max-width: 980px) {
  .et-l--post .et_pb_image .et_pb_image_wrap img:not([src*=".svg"]),
  .et-l--body .et_pb_image .et_pb_image_wrap img:not([src*=".svg"]) {
    width: revert-layer;
  }
}

.et-l--post .et_pb_blurb:not([class*="_position_left"]):not([class*="_position_right"]) .et_pb_main_blurb_image img[src*=".svg"],
.et-l--body .et_pb_blurb:not([class*="_position_left"]):not([class*="_position_right"]) .et_pb_main_blurb_image img[src*=".svg"] {
  width: revert-layer;
}

/* =============================================================
   ABOVE-THE-FOLD PLACEHOLDERS FOR DIVI'S DEFERRED CSS (CLS)
   -------------------------------------------------------------
   Divi's Critical CSS setting (Theme Options > Performance) is on.
   On some pages, the homepage included, it treats none of the Theme
   Builder header's module styles and none of the first section's as
   critical. They all go into the *-deferred-*.min.css file, which
   loads as <link rel="preload" onload="...rel='stylesheet'">, so
   the first paint lays the page out without them. When the file
   lands, the header shrinks (homepage, desktop: 406px to 262px) and
   all the content below moves up. PageSpeed reported that as CLS
   0.26 on `.et_builder_inner_content`.

   The rules below copy only the layout-affecting declarations of
   those deferred rules. Each selector has exactly the specificity
   of Divi's own rule, and this file loads before the deferred one,
   so Divi's rule wins wherever both set a property. These rules only
   fill the gap until the deferred file arrives. The homepage rules
   are scoped with :where() for the same reason: it adds no
   specificity.

   They go stale if the header or the homepage's first section is
   edited in the builder. A value Divi still sets is overridden as
   soon as the deferred file loads, so a stale copy means a small
   shift again, not a wrong layout. A declaration Divi no longer sets
   would persist, so remove a line here when its builder setting is
   removed. Turning Critical CSS off should make this block
   unnecessary; confirm on staging before deleting it.
   ============================================================= */

.et_pb_section_0_tb_header.et_pb_section,
.et_pb_section_1_tb_header.et_pb_section {
  padding-top: 0;
  padding-bottom: 0;
}

.et_pb_row_1_tb_header.et_pb_row {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.et_pb_image_0_tb_header {
  width: 40%;
  text-align: left;
  margin-left: 0;
}

.et_pb_image_0_tb_header .et_pb_image_wrap {
  display: block;
}

.et_pb_menu_0_tb_header.et_pb_menu ul li a {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 20px;
}

@media only screen and (max-width: 980px) {
  .et_pb_image_0_tb_header .et_pb_image_wrap img {
    width: auto;
  }

  .et_pb_code_0_tb_header {
    display: none !important;
  }
}

/* Divi's JS, not its CSS, adds `et_pb_row_1-2_1-4_1-4` to the header
   row, and only that class turns on the wrapping and the 50% quarter
   columns at tablet width. Until it runs, the logo column is a
   quarter of the row, so the logo renders at a third of its final
   size (80px instead of 241px wide at 768px) and the header grows
   100px when the script adds the class. This gives the same result
   without waiting for it. Below 768px the mobile rules at the top of
   this file stack the row as a block instead. */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .ifa-header-row {
    flex-wrap: wrap;
  }

  .ifa-header-row.et_pb_gutters1 > .et_pb_column.et_pb_column_1_4 {
    width: 50%;
    margin-right: 0;
  }
}

/* Homepage (page 36975): the hero slider's section and row. */
:where(.page-id-36975) .et_pb_section_0.et_pb_section {
  padding: 0 100px;
  margin-left: 0;
  margin-right: 0;
}

:where(.page-id-36975) .et_pb_row_0.et_pb_row {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =============================================================
   HEADER MENU — first paint laid out as it finally is (CLS)
   -------------------------------------------------------------
   The header menu's own layout rules (flex row, link padding,
   inline arrows) live in the Theme Builder's custom CSS, which
   Divi prints as `et-core-unified-tb-*-cached-inline-styles-2`
   at the END of <body>. So does the Google Fonts @font-face
   block. The browser paints before the parser reaches either,
   so on the first frame the menu is Divi's default: block links
   with no vertical padding and absolutely positioned arrows, the
   header 16px shorter at 1350px. When the rules arrive, their
   `transition: all .3s` on the links animates the padding in,
   and the page below moves across three frames. Lighthouse
   desktop measured that, plus the font swaps below, as CLS
   0.046-0.069 on the homepage.

   1. The layout declarations of those Theme Builder rules,
      copied with the same selectors and !important. This file
      loads earlier, so where both set a property the Theme
      Builder's rule wins; the values are identical, so nothing
      changes and there is nothing to transition. Same caveat as
      the block above: if the menu's custom CSS is edited in the
      builder, update these to match.
   2. The arrow is an ETmodules glyph ("3"), and that font is
      font-display: block. Until it loads, the invisible arrow
      takes the width of a Times "3" (8px) instead of the icon's
      16px, so each item is 8px narrower and the centred row
      widens by 40px when it lands. The icon glyph is exactly 1em
      wide, so fixing the box at 1em changes nothing once loaded.
   3. Open Sans is 1-4% wider than Arial for these labels. The
      fallback face is local Arial scaled to Open Sans's width
      for exactly this copy (102.79% is the ratio of the five
      labels' total widths at 20px), so the row keeps its width
      and no item moves more than 3px when the web font swaps in.
      The ascent and descent overrides are Open Sans's own
      (1.069 / 0.293) divided by that size-adjust. Open Sans
      stays first in the stack, so nothing changes once it has
      loaded. Where Arial is not installed, local() finds nothing
      and the stack carries on as before.
   ============================================================= */

@font-face {
  font-family: 'IFA Menu Fallback';
  src: local('Arial'), local('ArialMT');
  size-adjust: 102.79%;
  ascent-override: 104%;
  descent-override: 28.5%;
  line-gap-override: 0%;
}

.nav-menu-ifa .et_pb_menu__menu ul.et-menu.nav {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-menu-ifa .et_pb_menu__menu ul.et-menu.nav > li {
  position: relative !important;
  margin: 0 !important;
}

.nav-menu-ifa .et_pb_menu__menu ul.et-menu.nav > li > a {
  padding: 15px 20px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  font-family: 'Open Sans', 'IFA Menu Fallback', Helvetica, Arial, Lucida, sans-serif;
}

.nav-menu-ifa .et_pb_menu__menu ul.et-menu.nav > li.menu-item-has-children > a::after {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  position: relative !important;
  top: 0 !important;
  width: 1em;
}

@media (min-width: 981px) and (max-width: 1200px) {
  .nav-menu-ifa .et_pb_menu__menu ul.et-menu.nav > li > a {
    padding: 12px 16px !important;
  }
}

/* =============================================================
   SMART SLIDER FULL-WIDTH WRAPPER — final width before JS (CLS)
   -------------------------------------------------------------
   Smart Slider's CSS gives <ss3-force-full-width> `width: 100vw`
   until its script measures <body> and sets an inline width. With a
   classic (non-overlay) scrollbar, 100vw is wider than <body> by the
   scrollbar's width. A slider whose height follows its content, as
   the homepage hero's does at tablet widths, then wraps its text
   differently before and after the script: 610px tall before and
   640px after at 1024px, and everything below it jumps 30px.

   A container on <body> lets the wrapper use 100cqw, which is
   <body>'s own width: what the script sets anyway. The script's
   inline width still wins once it runs. Until then the slider stays
   invisible (opacity 0, translated off-screen), as before; that is
   Smart Slider's own CSS, and a transform moves nothing else.

   `container-type: inline-size` adds inline-size and style
   containment only; it creates no containing block for fixed
   elements. It applies only on pages that have a slider.

   `body` is in the second selector for specificity only:
   smartslider.min.css loads after this file, so a bare
   `ss3-force-full-width` would lose to its 100vw.
   ============================================================= */

body:has(ss3-force-full-width) {
  container-type: inline-size;
}

body ss3-force-full-width {
  width: 100cqw;
}

/* Smart Slider heading layers set to a real heading tag (the homepage
   hero headline is an <h1>, so the page has one) pick up Divi's
   h1-h6 padding-bottom of 10px, which a <div> layer never had. The
   slider's own font class sets everything else, so only the padding
   needs cancelling to keep the layer exactly as designed. */
.n2-ss-item-content.n2-ss-text:is(h1, h2, h3, h4, h5, h6) {
  padding-bottom: 0;
}


/* ---- css/ifa-nav.css ---- */
/* ============================================================
   IFA Nav Styles
   Global navigation overrides and components.
   Uses CSS custom properties from style.css :root.
   ============================================================ */

/* ---------- Nav search widget ---------- */

/* ---------- Divi header menu ---------- */

/* Lift the whole Theme Builder header into its own stacking context above the
   page body. By default header.et-l--header is position:static/z:auto, so its
   inner content (.et_builder_inner_content) only reaches root-level z-index:2 —
   which the search page's hero content (z:2) and search form (z:10) sit on top
   of, causing the hero <h1> to bleed over open dropdowns. The dropdown's own
   z-index:9999 is meaningless because it's trapped inside that z:2 box. Giving
   the header a high z-index here lets its submenus paint above all page content. */
#page-container header.et-l--header {
    position: relative;
    z-index: 100;
}

#page-container .nav-menu-ifa .et-menu > li > a {
    color: #fff !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

#page-container .nav-menu-ifa .et-menu > li > a:hover,
#page-container .nav-menu-ifa .et-menu > li.menu-item-has-children:hover > a {
    background: #fff !important;
    color: var(--ifa-dark-blue, #203248) !important;
    border-radius: 8px !important;
    opacity: 1 !important;
}

#page-container .nav-menu-ifa .et-menu > li > a:hover::after,
#page-container .nav-menu-ifa .et-menu > li.menu-item-has-children:hover > a::after {
    color: var(--ifa-dark-blue, #203248) !important;
}

/* Keyboard focus has to repeat the :hover treatment, because the two are styled
   in different places and only one of them was finished.

   The Theme Builder's own CSS (module 36975, not in this repo) already sets
       .nav-menu-ifa .et_pb_menu__menu ul.et-menu.nav > li > a:focus { background: var(--ifa-white) !important }
   but never touches `color`. The white-on-navy rule at the top of this file then
   still applies, so a focused top-level item was white text on a white pill —
   readable by nobody, and the state you land in the moment you Tab into the menu.

   et-show-dropdown is Divi's own open-dropdown class. It is included so the
   parent keeps the white pill while focus is down inside its submenu, which is
   what hovering already does. */
#page-container .nav-menu-ifa .et-menu > li > a:focus,
#page-container .nav-menu-ifa .et-menu > li.menu-item-has-children > a:focus,
#page-container .nav-menu-ifa .et-menu > li.et-show-dropdown > a {
    background: #fff !important;
    color: var(--ifa-dark-blue, #203248) !important;
    -webkit-text-fill-color: var(--ifa-dark-blue, #203248);
    border-radius: 8px !important;
    opacity: 1 !important;
}

#page-container .nav-menu-ifa .et-menu > li > a:focus::after,
#page-container .nav-menu-ifa .et-menu > li.menu-item-has-children > a:focus::after,
#page-container .nav-menu-ifa .et-menu > li.et-show-dropdown > a::after {
    color: var(--ifa-dark-blue, #203248) !important;
}

#page-container .nav-menu-ifa .et-menu > li.current-menu-item > a,
#page-container .nav-menu-ifa .et-menu > li.current_page_item > a,
#page-container .nav-menu-ifa .et-menu > li.current-menu-parent > a,
#page-container .nav-menu-ifa .et-menu > li.current-menu-ancestor > a {
    background: #fff !important;
    color: var(--ifa-dark-blue, #203248) !important;
    border-radius: 8px !important;
    opacity: 1 !important;
}

#page-container .et_pb_menu.nav-menu-ifa .et-menu-nav > ul.et-menu > li:hover > a,
#page-container .et_pb_menu.nav-menu-ifa .et-menu-nav > ul.et-menu > li.current-menu-item > a,
#page-container .et_pb_menu.nav-menu-ifa .et-menu-nav > ul.et-menu > li.current_page_item > a,
#page-container .et_pb_menu.nav-menu-ifa .et-menu-nav > ul.et-menu > li.current-menu-parent > a,
#page-container .et_pb_menu.nav-menu-ifa .et-menu-nav > ul.et-menu > li.current-menu-ancestor > a {
    color: var(--ifa-dark-blue, #203248) !important;
    -webkit-text-fill-color: var(--ifa-dark-blue, #203248);
}

#page-container .nav-menu-ifa .et-menu > li.current-menu-item > a::after,
#page-container .nav-menu-ifa .et-menu > li.current_page_item > a::after,
#page-container .nav-menu-ifa .et-menu > li.current-menu-parent > a::after,
#page-container .nav-menu-ifa .et-menu > li.current-menu-ancestor > a::after {
    color: var(--ifa-dark-blue, #203248) !important;
}

#page-container .nav-menu-ifa .et-menu .sub-menu {
    background: #fff !important;
}

#page-container .nav-menu-ifa .et-menu .sub-menu a {
    background: #fff !important;
    color: var(--ifa-dark-blue, #203248) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

#page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-item > a,
#page-container .nav-menu-ifa .et-menu .sub-menu li.current_page_item > a,
#page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-parent > a,
#page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-ancestor > a {
    background: var(--ifa-dark-blue, #203248) !important;
    color: #fff !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

#page-container .nav-menu-ifa .et-menu .sub-menu a:hover,
#page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-item > a:hover,
#page-container .nav-menu-ifa .et-menu .sub-menu li.current_page_item > a:hover,
#page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-parent > a:hover,
#page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-ancestor > a:hover {
    background: var(--ifa-dark-blue, #203248) !important;
    color: #fff !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Same omission one level down: submenu links had a :hover state and no :focus
   state at all, so tabbing through an open dropdown moved through it with
   nothing changing on screen. */
#page-container .nav-menu-ifa .et-menu .sub-menu a:focus,
#page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-item > a:focus,
#page-container .nav-menu-ifa .et-menu .sub-menu li.current_page_item > a:focus,
#page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-parent > a:focus,
#page-container .nav-menu-ifa .et-menu .sub-menu li.current-menu-ancestor > a:focus {
    background: var(--ifa-dark-blue, #203248) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* A focus ring on top of the colour change, for the same reason the search
   widget below has one: colour alone is a weak signal, and these are the only
   controls in the header.

   Both rules have to out-specify the Theme Builder's
       .nav-menu-ifa a.da11y-submenu                          { outline: 0 !important }
       .nav-menu-ifa .et_pb_menu__menu ul.et-menu.nav > li > a { outline: none !important }
   which is why they carry the #page-container prefix — the ID wins on
   specificity regardless of which stylesheet the browser sees last.

   Each ring is coloured for the surface it is actually drawn on, which is not
   the same surface in both cases:

   - Top level sits as a white pill on the navy bar. A positive outline-offset
     puts the ring outside the pill, on the navy — teal on navy is 4.3:1. Teal
     on the white pill would be 3.0:1, a hair over the line and not where a
     focus indicator belongs.
   - Submenu items fill with navy on focus and butt up against each other, so
     an outside ring would both collide with the neighbour and land navy-on-navy.
     A negative offset draws it inside the item instead, in white — 13:1. */
#page-container .nav-menu-ifa .et-menu > li > a:focus-visible {
    outline: 2px solid var(--ifa-teal, #29A5A1) !important;
    outline-offset: 2px !important;
}

#page-container .nav-menu-ifa .et-menu .sub-menu a:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: -4px !important;
}

/* A dropdown dismissed with Esc (js/ifa-nav-a11y.js) has to stay shut while
   focus is still on its trigger. The Theme Builder header CSS shows it on
   `li:focus-within` with !important, so this needs !important as well, and
   wins on the #page-container ID. display:none also takes the hidden links out
   of the Tab order, so Tab moves on to the next top-level item. */
#page-container .nav-menu-ifa .et-menu > li.ifa-dropdown-dismissed > .sub-menu {
    display: none !important;
}

/* Focus rings for the rest of the header. The divi-accessibility plugin's ring
   colour (#2ea3f2) is 2.75:1 on white, under the 3:1 a focus indicator needs,
   and Divi's reset (`a { outline: none !important }` among others) removes
   even that from most of these. As above, each ring is coloured for the
   surface it is drawn on.

   - Logo: on white, so dark teal (7.1:1). The ring goes on the <img>, not the
     <a>: the link is inline around a block-level wrapper, so an outline on it
     traces a sliver rather than the logo, and changing its display would
     disturb the logo layout that header.css works hard to hold steady.
   - Hamburger: a <span> that js/ifa-nav-a11y.js makes focusable, drawn as a
     white box on the navy bar. A ring outside it would be teal on navy, so it
     goes inside, on the white (7.1:1).
   - Mobile menu: the open panel is navy, so links get a white ring drawn
     inside the item (negative offset), as the desktop submenu links do, which
     also keeps neighbouring rings from overlapping. Donate is a white pill on
     that navy, so its ring goes outside instead, on the navy. */
#page-container header.et-l--header .et_pb_image a:focus-visible img {
    outline: 2px solid var(--ifa-dark-teal, #255F71);
    outline-offset: 4px;
}

#page-container .nav-menu-ifa .mobile_nav > .mobile_menu_bar:focus-visible {
    outline: 2px solid var(--ifa-dark-teal, #255F71) !important;
    outline-offset: -5px !important;
}

#page-container .nav-menu-ifa .et_mobile_menu a:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: -4px !important;
}

#page-container .nav-menu-ifa .et_mobile_menu li.donate-menu-trigger > a:focus-visible {
    outline-offset: 2px !important;
}

.ifa-nav-search {
    display: inline-flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.ifa-nav-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--ifa-dark-blue);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
    z-index: 2;
}

.ifa-nav-search__toggle:hover {
    color: var(--ifa-teal);
    background: rgba(41, 165, 161, 0.08);
}

.ifa-nav-search__toggle:focus-visible {
    outline: 2px solid var(--ifa-teal);
    outline-offset: 2px;
}

/* Swap icon when open */
.ifa-nav-search.is-open .ifa-nav-search__toggle .fa-magnifying-glass::before {
    content: '\f00d'; /* fa-xmark */
}

/* Expanding form panel */
.ifa-nav-search__form {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 0;
    opacity: 0;
    pointer-events: none;
    transition: width 0.3s ease, opacity 0.25s ease;
}

.ifa-nav-search.is-open .ifa-nav-search__form {
    width: 200px;
    opacity: 1;
    pointer-events: auto;
}

.ifa-nav-search__input {
    flex: 1;
    min-width: 0;
    height: 43px;
    padding: 0 14px;
    font-size: 16px;
    border: 1.5px solid var(--ifa-dark-blue);
    border-right: none;
    border-radius: 6px 0 0 6px;
    outline: none;
    background: #fff;
    color: var(--ifa-dark-blue);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Placeholder text is still text a visitor has to read (WCAG 1.4.3). #aaa
   was 2.3:1 on the white field; dark teal is about 7:1, and stays distinct
   from the navy of typed text. opacity: 1 because Firefox dims placeholders
   to 0.54 by default, which would undo the contrast. */
.ifa-nav-search__input::placeholder {
    color: var(--ifa-dark-teal);
    opacity: 1;
}

.ifa-nav-search__input:focus {
    border-color: var(--ifa-teal);
    box-shadow: 0 0 0 3px rgba(41, 165, 161, 0.15);
}

.ifa-nav-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    background: var(--ifa-dark-blue);
    color: #fff;
    border: 1.5px solid var(--ifa-dark-blue);
    border-radius: 0 6px 6px 0;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ifa-nav-search__submit:hover {
    background: var(--ifa-teal);
    border-color: var(--ifa-teal);
}

.ifa-nav-search__submit:focus-visible {
    outline: 2px solid var(--ifa-teal);
    outline-offset: 2px;
}

/* Mobile — full width when open */
@media (max-width: 768px) {
    .ifa-nav-search.is-open .ifa-nav-search__form {
        width: 180px;
    }
}

/* ---------- Top-level item spacing above 1200px (CLS) ----------
   The Theme Builder header gives each top-level link 20px of side padding
   above 1200px and 16px at or below it. At 20px, the five items need 1,067px
   of a 1,068px row at a 1350px viewport, so whether "Get Involved" fits on
   the first line is decided by whichever font or icon has loaded: it fits in
   the fallback font and wraps once Open Sans and the ETmodules arrows arrive.
   The header then grows 46px and the whole page moves down — a 0.26 layout
   shift on Lighthouse desktop, which renders at 1350px.
   16px, the value the header already uses at 1200px and below, leaves 40px
   of room there, so the line breaks the same way before and after the fonts.
   It also changes nothing at 1440px and 1920px, where the row has room at
   20px as well. Narrower than about 1300px the menu takes two rows either
   way, as it does today. */
@media (min-width: 1201px) {
  body #page-container .nav-menu-ifa .et_pb_menu__menu ul.et-menu.nav > li > a {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

