/* 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;
}


/* ---- 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;
}

/* =============================================================
   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;
}

.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;
}

.ifa-nav-search__input::placeholder {
    color: #aaa;
}

.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;
    }
}