/* ============================================================
   Guardian Funds custom header + mega menu
   Rendered by gf_render_custom_header() in functions.php.

   Layout mechanics were derived from remara.com; type, colour and
   logo are Guardian Funds'. Fonts are NOT redeclared here — Source
   Sans and Minerva Modern are already registered site-wide by the
   Yabe Webfont plugin.

   Panel style is chosen per menu item via the CSS Classes field in
   Appearance -> Menus:
     about        one-third panel, deeper levels cascade right
     mega         two-thirds panel, two columns side by side
     heading      a column title inside a .mega panel
     simple-drop  small dropdown that hugs its own item
     investor-btn renders as the solid LOGIN block
     mobile-only  hidden in the desktop bar
   Top-level items with children and no panel class default to
   .about, so the menu works with no classes set at all.
   ============================================================ */

:root{
  --gf-brand:#1c294b;
  --gf-accent:#a58270;
  --gf-sand:#f6f4f1;
  --gf-nav:400;
  --gf-medium:600;
  --gf-nav-size:1.25rem; /* menu text, desktop bar and mobile menu alike */
  --gf-bar:5.5rem;   /* bar height; matches the desktop bar (link padding + line-height) */
}

/* The Elementor theme-builder header is hidden while this one is active.
   Remove gf_render_custom_header() from functions.php to get it back. */
body.gf-custom-header .elementor-location-header{display:none !important}

.gf-header *{box-sizing:border-box}
.gf-header a{text-decoration:none;color:inherit}
body.gf-menu-open{overflow:hidden}

/* ---------- logo ---------- */
/* height = bar height + flex centring keeps the logo vertically centred in the bar */
a.gf-logo{
  display:flex;align-items:center;position:fixed;top:0;left:0;height:var(--gf-bar);
  padding:0 1.25rem;z-index:1002;transition:opacity .5s;
}
@media (min-width:769px){ a.gf-logo{padding:0 2.5rem} }
.gf-logo-stack{position:relative;display:block}
.gf-logo-stack img{display:block;height:3.75rem;width:auto;transition:opacity .5s}
.gf-logo-stack .on-dark{position:absolute;top:0;left:0;opacity:0}
body.gf-reverse.gf-idle .gf-logo-stack .on-light,
body.gf-menu-open .gf-logo-stack .on-light{opacity:0}
body.gf-reverse.gf-idle .gf-logo-stack .on-dark,
body.gf-menu-open .gf-logo-stack .on-dark{opacity:1}
body.gf-menu-open a.gf-logo{opacity:1 !important}

/* ---------- bar ---------- */
.gf-topnav{
  top:0;right:0;left:0;position:fixed;z-index:1001;
  font-family:"Source Sans 3","Source Sans Pro",sans-serif;
  font-size:1em;font-weight:var(--gf-nav);line-height:1.65;
  color:var(--gf-brand);
  transition:.5s;padding-left:1.5em;background-color:#fff;
  display:none;align-items:center;justify-content:flex-end;
}
/* Full bar from 1201px up; at 1200 and below the items no longer fit, so the burger takes over. */
@media (min-width:1201px){ .gf-topnav{display:flex} }
.gf-topnav ul,.gf-topnav li{margin:0;padding:0;list-style:none;display:flex}
/* One font-size drives the whole bar; change it and everything rescales. */
.gf-topnav>ul{font-size:var(--gf-nav-size);position:relative}
.gf-topnav li>a{padding:1.4em 1.2em;transition:color .3s;display:block}

/* No weight change on hover, anywhere. Bolder text is wider, which reflows
   every neighbouring item and makes the bar visibly jump. Colour only. */
.gf-topnav li:not(.investor-btn)>a:hover,
.gf-topnav li:not(.investor-btn)>a:focus{color:var(--gf-accent)}
.gf-topnav>ul>li.menu-item-has-children>a:after{content:"+";margin-left:.15em}

/* Menu items flagged mobile-only in Appearance > Menus stay out of the bar. */
.gf-topnav li.mobile-only{display:none}

/* Phone number (CSS class "phone" in Appearance > Menus) */
.gf-header li.phone>a:before{
  content:"";display:inline-block;width:.8em;height:.8em;margin-right:.45em;vertical-align:-.05em;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.4 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.7 370.7 0 0 1 130.6 204.1l60.6-49.6a23.9 23.9 0 0 0 6.9-28l-48-112A24.2 24.2 0 0 0 122.6.6l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.3 24.3 0 0 0-14-27.6z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.4 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.7 370.7 0 0 1 130.6 204.1l60.6-49.6a23.9 23.9 0 0 0 6.9-28l-48-112A24.2 24.2 0 0 0 122.6.6l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.3 24.3 0 0 0-14-27.6z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* TranslatePress language switcher menu item: flag + language name */
.gf-header .trp-language-switcher-container a{white-space:nowrap}
.gf-header .trp-flag-image{display:inline-block;width:18px;height:auto;margin:0 .4em 0 0;vertical-align:-.05em}

/* transparent over a dark hero, solid white once hovered or scrolled past */
body.gf-reverse.gf-idle .gf-topnav{background-color:transparent}
body.gf-reverse.gf-idle .gf-topnav li>a{color:#fff}
body.gf-reverse.gf-idle .gf-topnav li:not(.investor-btn)>a:hover,
body.gf-reverse.gf-idle .gf-topnav li:not(.investor-btn)>a:focus{color:var(--gf-brand)}

/* ---------- dropdown panels ---------- */
.gf-topnav .sub-menu{
  position:relative;left:0;margin:0;padding:2em 0;display:block;
  transition:.5s;opacity:0;pointer-events:none;
}
.gf-topnav .sub-menu:after{
  content:"";position:absolute;left:0;top:.1em;bottom:0;width:1px;
  background-color:var(--gf-brand);opacity:0;transition:1s;transition-delay:.5s;
}
.gf-topnav .menu-item-has-children:hover>.sub-menu,
.gf-topnav .menu-item-has-children:focus-within>.sub-menu{opacity:1;pointer-events:auto}
.gf-topnav .menu-item-has-children:hover>.sub-menu:after,
.gf-topnav .menu-item-has-children:focus-within>.sub-menu:after{opacity:1}
.gf-topnav .sub-menu li{display:block;padding:0}
.gf-topnav .sub-menu a{display:block;padding:.35em 2.5em;margin:0;color:var(--gf-brand)}
.gf-topnav .sub-menu a:hover,.gf-topnav .sub-menu a:focus{color:var(--gf-accent)}
.gf-topnav .sub-menu .menu-item-has-children>a{font-weight:var(--gf-medium)}
/* Same "+" as the top level, as on remara.com. \00a0 is a non-breaking space:
   it keeps the "+" on the same line as the label if the label ever wraps. */
.gf-topnav .sub-menu .menu-item-has-children>a:after{content:"\00a0+"}

/* shared frosted full-bleed backdrop behind a panel */
.gf-topnav>ul>li.about>ul:before,
.gf-topnav>ul>li.mega>ul:before,
.gf-topnav>ul>li.simple-drop>ul:before{
  content:"";position:absolute;top:0;left:-100vw;width:200vw;height:100%;
  background-color:rgba(255,255,255,0);z-index:-1;
  backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
  transition:background-color .5s,backdrop-filter .5s,-webkit-backdrop-filter .5s;
}
/* Browsers switch backdrop-filter off inside anything with opacity < 1, so
   fading the whole panel made the blur snap on at the end of the fade and the
   hero text jumped. Instead the panel stays opacity 1 and is hidden with
   visibility; the blur and the links fade in separately. */
.gf-topnav>ul>li.about>ul,
.gf-topnav>ul>li.mega>ul,
.gf-topnav>ul>li.simple-drop>ul{opacity:1;visibility:hidden;transition:visibility 0s .5s}
.gf-topnav>ul>li.about>ul>li,
.gf-topnav>ul>li.mega>ul>li,
.gf-topnav>ul>li.simple-drop>ul>li{opacity:0;transition:opacity .5s}
.gf-topnav>ul>li.about:is(:hover,:focus-within)>ul,
.gf-topnav>ul>li.mega:is(:hover,:focus-within)>ul,
.gf-topnav>ul>li.simple-drop:is(:hover,:focus-within)>ul{visibility:visible;transition-delay:0s}
.gf-topnav>ul>li.about:is(:hover,:focus-within)>ul>li,
.gf-topnav>ul>li.mega:is(:hover,:focus-within)>ul>li,
.gf-topnav>ul>li.simple-drop:is(:hover,:focus-within)>ul>li{opacity:1}
.gf-topnav>ul>li.about:is(:hover,:focus-within)>ul:before,
.gf-topnav>ul>li.mega:is(:hover,:focus-within)>ul:before,
.gf-topnav>ul>li.simple-drop:is(:hover,:focus-within)>ul:before{
  background-color:rgba(255,255,255,.65);
  backdrop-filter:blur(24.1px);-webkit-backdrop-filter:blur(24.1px);
}
.gf-topnav>ul>li.about>ul:after,
.gf-topnav>ul>li.mega>ul:after,
.gf-topnav>ul>li.simple-drop>ul:after{display:none}

/* one-third panel; top:100% pins it to the bar however tall the bar ends up */
/* min-height keeps the frosted backdrop covering a deeper column than this one:
   child columns are absolutely positioned, so they cannot stretch the parent. */
.gf-topnav>ul>li.about>ul{position:absolute;top:100%;left:0;width:33.3334%;min-height:13.5em}
.gf-topnav>ul>li.about>ul>li.menu-item-has-children>a{font-weight:var(--gf-nav)}
/* each deeper level becomes the next column to the right */
/* height:auto + min-height:100% — a fixed 100% cropped any column with more
   items than its parent (Legal and Compliance lost its last entry). */
.gf-topnav>ul>li.about>ul>li>.sub-menu,
.gf-topnav>ul>li.about>ul>li>ul>li>.sub-menu{
  position:absolute;width:auto;min-width:100%;left:100%;top:0;height:auto;min-height:100%;
  white-space:nowrap; /* one line per label keeps the panel short */
}

/* two-thirds, two-column panel */
.gf-topnav>ul>li.mega>ul{
  position:absolute;top:100%;left:0;width:66.6667%;display:flex;padding:0;
}
.gf-topnav>ul>li.mega>ul .sub-menu:after{display:none}
.gf-topnav>ul>li.mega>ul .menu-item-has-children>a{font-weight:var(--gf-nav)}
.gf-topnav>ul>li.mega>ul>li{
  width:50%;border-right:solid 1px var(--gf-brand);padding-top:3em;padding-bottom:3em;
}
.gf-topnav>ul>li.mega>ul>li.heading>a{font-weight:var(--gf-medium)}
.gf-topnav>ul>li.mega>ul>li.heading>a:after{content:none}
/* Always-shown column list. No pointer-events declared on purpose: it must
   inherit, or this list keeps catching the mouse while the panel is hidden. */
.gf-topnav>ul>li.mega>ul>li>ul{opacity:1;position:relative;top:auto;padding:0}
.gf-topnav>ul>li.mega>ul>li>ul>li>ul{position:absolute;left:100%;padding:0;width:100%;top:0}

/* small dropdown that hugs its own item */
.gf-topnav>ul>li.simple-drop{position:relative}
.gf-topnav>ul>li.simple-drop>ul{position:absolute;top:100%}

/* ---------- LOGIN block (Client Portal) ---------- */
/* align-self:stretch fills the bar top to bottom; padding is horizontal only,
   so there is no gap above or below the block. */
.gf-topnav .investor-btn{
  text-transform:uppercase;letter-spacing:.125em;font-size:.75em;
  margin-left:1.5em;display:inline-flex;align-items:stretch;align-self:stretch;
  padding:0;background:var(--gf-brand);transition:background .3s;
}
.gf-topnav .investor-btn>a{display:flex;align-items:center;padding:0 2.5em;color:#fff;transition:color .3s;white-space:nowrap}
.gf-topnav .investor-btn:hover,.gf-topnav .investor-btn:focus-within{background:var(--gf-sand)}
.gf-topnav .investor-btn:hover>a,.gf-topnav .investor-btn:focus-within>a{color:var(--gf-brand)}
body.gf-reverse.gf-idle .gf-topnav .investor-btn>a{color:#fff}
body.gf-reverse.gf-idle .gf-topnav .investor-btn:hover>a,
body.gf-reverse.gf-idle .gf-topnav .investor-btn:focus-within>a{color:var(--gf-brand)}
.gf-topnav .investor-btn>a:after{content:none !important}

/* ---------- hamburger ---------- */
/* Selector is .gf-header button.gf-burger, not .gf-burger: the Elementor kit
   ships `.elementor-kit-7 button{background-color:#FFFFFF00}` which otherwise
   wins on specificity and leaves this button see-through. */
.gf-header button.gf-burger{
  border:none;background-color:var(--gf-brand);
  display:flex;flex-direction:column;justify-content:center;
  position:fixed;top:0;right:0;width:var(--gf-bar);height:var(--gf-bar);z-index:1005;
  margin:0;padding:0 1.4rem;cursor:pointer;transition:.5s;border-radius:0;
}
/* 5px + 5px margins (flex margins do not collapse) keep the 12px line pitch
   the is-open rotation offsets below rely on */
.gf-header button.gf-burger em{
  display:block;height:2px;margin:5px 0;background:#fff;transition:.5s;
  position:relative;width:100%;
}
.gf-header button.gf-burger.is-open em:first-child{transform:rotate(-45deg);top:12px}
.gf-header button.gf-burger.is-open em:nth-child(2){opacity:0}
.gf-header button.gf-burger.is-open em:last-child{transform:rotate(45deg);top:-11px}
@media (min-width:1201px){ .gf-header button.gf-burger{display:none} }
/* the scrolled bar below replaces the shadow the site's button styles add */
.gf-header button.gf-burger{box-shadow:none}

/* Mobile: solid white bar behind logo + burger once scrolled past the hero,
   matching the desktop bar. gf-sticky is toggled by header.js. */
@media (max-width:1200px){
  .gf-header:before{
    /* sits under the logo (1002), burger (1005) and open menu (1000) */
    content:"";position:fixed;top:0;left:0;right:0;height:var(--gf-bar);z-index:999;
    background-color:#fff;opacity:0;transition:opacity .5s;pointer-events:none;
    box-shadow:0 6px 24px rgba(28,41,75,.056); /* very soft navy-tinted shadow */
  }
  body.gf-sticky:not(.gf-menu-open) .gf-header:before{opacity:1}
}

/* ---------- full-screen mobile nav ---------- */
.gf-fullnav{
  background-color:var(--gf-brand);color:#fff;z-index:1000;
  top:0;right:0;left:0;bottom:0;position:fixed;
  font-family:"Source Sans 3","Source Sans Pro",sans-serif;
  overflow-x:hidden;overflow-y:auto;font-size:var(--gf-nav-size);line-height:1.65;
  transition:.5s;transform:translateX(100%);pointer-events:none;
}
.gf-fullnav ul,.gf-fullnav li{margin:0;padding:0;list-style:none}
.gf-fullnav li{border-bottom:solid 1px rgba(255,255,255,.2)}
/* scroll room goes on the list, not the last li — on the li it pushed that
   item's divider 4em down and left a gap under Client Portal */
.gf-fullnav ul{padding-bottom:4em}
.gf-fullnav a{color:#fff;font-weight:var(--gf-nav);padding:.35em 0;display:block}
.gf-fullnav a:hover,.gf-fullnav a:focus{color:var(--gf-accent)}
.gf-fullnav .gf-inner{padding:6.65rem 1.25rem 1.65rem 1.25rem;position:relative;width:100%}
.gf-fullnav .investor-btn>a{color:var(--gf-accent)}
.gf-fullnav .menu-item-has-children{position:relative}
.gf-fullnav button.gf-toggle{
  /* height = the link's own row (1.65 line-height + .35em top/bottom padding),
     not bottom:0, so the + stays on the label line whatever the li contains */
  cursor:pointer;position:absolute;right:.75rem;top:0;height:2.35em;width:2.5rem;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:#fff;font:inherit;padding:0;
}
.gf-fullnav button.gf-toggle:before{font-size:1.5em;line-height:1;font-weight:300}
.gf-fullnav button.gf-toggle:before{content:"+"}
/* The Elementor kit gives every button a hover background + drop shadow;
   these are plain text controls, so strip that in every state. */
.gf-header .gf-fullnav button.gf-toggle,
.gf-header .gf-fullnav button.gf-toggle:is(:hover,:focus,:active),
.gf-header .gf-fullnav button.gf-back,
.gf-header .gf-fullnav button.gf-back:is(:hover,:focus,:active){
  background:none;box-shadow:none;border:0;color:#fff;
}
.gf-header .gf-fullnav button:is(.gf-toggle,.gf-back):hover{color:var(--gf-accent)}
.gf-fullnav .menu-item-has-children.is-open>button.gf-toggle:before{content:"\2013"}
.gf-fullnav .sub-menu{
  position:fixed;top:0;bottom:0;right:0;left:0;
  transform:translateX(100%);transition:.5s;
  padding:6.65rem 1.25rem 1.65rem 1.25rem;
  background-color:var(--gf-brand);overflow-y:auto;overflow-x:hidden;z-index:1;
}
.gf-fullnav .sub-menu a{padding-right:3em}
.gf-fullnav .menu-item-has-children.is-open>.sub-menu{transform:translateX(0)}
.gf-fullnav button.gf-back{
  text-transform:uppercase;font-size:.6em;letter-spacing:.2em;
  margin:2em 0;display:block;cursor:pointer;border:0;background:none;
  color:#fff;font-family:inherit;padding:0;
}
.gf-fullnav button.gf-back:before{content:"\2190";margin-right:.5em}
body.gf-menu-open .gf-fullnav{transform:translateX(0);pointer-events:auto}
@media (min-width:1201px){ .gf-fullnav{display:none} }

/* Pages without a dark hero need their content pushed below the fixed bar.
   Keyed to gf-hero-page, which PHP sets once and JS never touches. Using the
   JS-toggled gf-reverse here would re-pad the page mid-scroll and make it jump. */
body.gf-custom-header:not(.gf-hero-page) .elementor-location-header + .elementor,
body.gf-custom-header:not(.gf-hero-page) #content{padding-top:81px}