/* PATLive site header
   ------------------------------------------------------------------
   Brand values live in .pl-header below — adjust to match
   Elementor > Site Settings > Global Colors.

   Note on !important: Hello Elementor and the Elementor kit both style
   bare <a> and <button> elements, so this component resets the
   properties a theme typically touches. Scope everything under
   .pl-header so nothing here leaks out to the rest of the site.
   ------------------------------------------------------------------ */

.pl-header{
  --pl-navy:#14405a;
  --pl-blue:#4a9cd1;
  --pl-underline-hover:#a9d1e8;
  --pl-btn-hover:#4a9cd1;
  --pl-text:#1b3d51;
  --pl-muted:#5b7a8c;
  --pl-line:#e4ecee;
  --pl-hover:#f1f6f8;
  --pl-bar-h:78px;
  --pl-maxw:1240px;

  position:sticky;
  top:0;
  z-index:100;
  background:#fff;
  border-bottom:1px solid var(--pl-line);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  color:var(--pl-text);
}
.pl-header *,.pl-header *::before,.pl-header *::after{box-sizing:border-box}

/* every link in the header starts clean */
.pl-header a{text-decoration:none !important;box-shadow:none !important}

.pl-bar{
  max-width:var(--pl-maxw);
  margin:0 auto;
  padding:0 28px;
  height:var(--pl-bar-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

.pl-brand{justify-self:start;display:flex;align-items:center}
.pl-brand img{display:block;height:36px;width:auto;max-width:none}
.pl-wordmark{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--pl-navy)}
.pl-wordmark span{color:var(--pl-blue);font-weight:600}

/* nav centres on the page, not on the space left between logo and buttons */
.pl-nav{justify-self:center;display:flex;align-items:center;gap:4px}

/* --- nav items ---
   All-states reset first (things a theme might inject, that never vary by
   breakpoint), then size and spacing in a plain rule that media queries can
   override without repeating the pseudo-classes. */
.pl-header .pl-nav-item,
.pl-header .pl-nav-item:hover,
.pl-header .pl-nav-item:focus,
.pl-header .pl-nav-item:active,
.pl-header .pl-nav-item:visited{
  appearance:none;
  -webkit-appearance:none;
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  text-transform:none !important;
  text-decoration:none !important;
  letter-spacing:normal !important;
  font-family:inherit !important;
  border-radius:0 !important;
}

.pl-header .pl-nav-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  padding:10px 16px !important;
  margin:0 !important;
  min-height:0 !important;
  min-width:0 !important;
  width:auto !important;
  height:auto !important;
  border-style:none none solid none !important;
  border-width:0 0 3px 0 !important;
  border-color:transparent !important;
  color:var(--pl-text) !important;
  cursor:pointer;
  transition:color .15s,border-color .15s;
}

.pl-header .pl-nav-item:hover{
  color:var(--pl-navy) !important;
  border-color:var(--pl-underline-hover) !important;
}
/* An open panel is the same gesture as a hover, so it reads the same. The
   full-strength blue is reserved for the page you are actually on. */
.pl-header .pl-nav-item[aria-expanded="true"],
.pl-header .pl-nav-item[aria-expanded="true"]:hover{
  color:var(--pl-navy) !important;
  border-color:var(--pl-underline-hover) !important;
}
.pl-header .pl-nav-item.is-current,
.pl-header .pl-nav-item.is-current:hover{
  color:var(--pl-navy) !important;
  font-weight:600 !important;
  border-color:var(--pl-blue) !important;
}
.pl-header .pl-nav-item:focus-visible{
  outline:2px solid var(--pl-blue) !important;
  outline-offset:-2px;
}

.pl-chev{
  width:7px;height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  opacity:.6;
  transition:transform .2s ease;
  flex:none;
}
.pl-nav-item[aria-expanded="true"] .pl-chev{transform:rotate(-135deg) translate(-2px,-2px)}

/* --- action buttons --- */
.pl-actions{justify-self:end;display:flex;align-items:center;gap:10px}

/* Reset only: properties that must hold in every state and never vary by
   breakpoint. Size and spacing live in the rule below, so media queries can
   override them without needing to repeat the pseudo-classes. */
.pl-header .pl-btn,
.pl-header .pl-btn:hover,
.pl-header .pl-btn:focus,
.pl-header .pl-btn:active,
.pl-header .pl-btn:visited{
  appearance:none;
  -webkit-appearance:none;
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  font-family:inherit !important;
  border-style:solid !important;
  border-width:1.5px !important;
  border-radius:999px !important;
  white-space:nowrap;
}

.pl-header .pl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1 !important;
  padding:13px 22px !important;
  margin:0 !important;
  min-height:0 !important;
  height:auto !important;
  width:auto !important;
  transition:background-color .18s,color .18s,border-color .18s;
}

.pl-header .pl-btn--solid{
  background-color:var(--pl-navy) !important;
  border-color:var(--pl-navy) !important;
  color:#fff !important;
}
.pl-header .pl-btn--ghost{
  background-color:#fff !important;
  border-color:var(--pl-btn-hover) !important;
  color:var(--pl-btn-hover) !important;
}

/* Both buttons land on the same blue fill on hover, matching the rest of the site. */
.pl-header .pl-btn--solid:hover,
.pl-header .pl-btn--solid:focus,
.pl-header .pl-btn--ghost:hover,
.pl-header .pl-btn--ghost:focus{
  background-color:var(--pl-btn-hover) !important;
  border-color:var(--pl-btn-hover) !important;
  color:#fff !important;
}
.pl-header .pl-btn:focus-visible{outline:2px solid var(--pl-navy) !important;outline-offset:2px}

/* --- dropdown panels --- */
.pl-panel{
  position:absolute;
  left:0;right:0;top:var(--pl-bar-h);
  background:#fff;
  border-bottom:1px solid var(--pl-line);
  box-shadow:0 12px 24px -18px rgba(20,64,90,.35);
  display:none;
}
.pl-panel.is-open{display:block}
.pl-panel-inner{max-width:var(--pl-maxw);margin:0 auto;padding:34px 28px 30px}

.pl-svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

.pl-header .pl-svc,
.pl-header .pl-svc:hover,
.pl-header .pl-svc:focus,
.pl-header .pl-svc:visited{
  display:block;
  text-decoration:none !important;
  padding:18px 18px 20px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:10px !important;
  background-color:transparent;
  box-shadow:none !important;
  transition:background-color .15s;
}
.pl-header .pl-svc:hover{background-color:var(--pl-hover)}
.pl-header .pl-svc-title{
  display:block;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  color:var(--pl-navy) !important;
  margin:0 0 6px !important;
}
.pl-header .pl-svc-copy{
  display:block;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  color:var(--pl-muted) !important;
}

.pl-header .pl-ent{
  margin:22px 0 0 !important;
  padding:20px 0 0 !important;
  border-top:1px solid var(--pl-line);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:10px 36px;
}
.pl-header .pl-ent-item{
  margin:0 !important;
  padding:0 !important;
  font-size:15px !important;
  line-height:1.5 !important;
  color:var(--pl-muted) !important;
}
/* Each half holds together, so the single space between them is the only
   break point: one line if it fits, otherwise a break before "See". */
.pl-header .pl-ent-lead,
.pl-header .pl-ent-link{white-space:nowrap}
.pl-header .pl-ent a{color:var(--pl-navy) !important;font-weight:600 !important}
.pl-header .pl-ent a:hover{text-decoration:underline !important}

/* 11 items read down the columns: 4 / 4 / 3 */
.pl-ind-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;
  gap:2px 20px;
}
.pl-header .pl-ind,
.pl-header .pl-ind:hover,
.pl-header .pl-ind:focus,
.pl-header .pl-ind:visited{
  display:block;
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1.35 !important;
  color:var(--pl-text) !important;
  text-decoration:none !important;
  padding:11px 12px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  transition:background-color .15s,color .15s;
}
.pl-header .pl-ind:hover{background-color:var(--pl-hover);color:var(--pl-navy) !important}

.pl-header .pl-ind-all{
  margin:20px 0 0 !important;
  padding:18px 0 0 !important;
  border-top:1px solid var(--pl-line);
  font-size:15px !important;
  line-height:1.4 !important;
}
.pl-header .pl-ind-all a{color:var(--pl-navy) !important;font-weight:600 !important}
.pl-header .pl-ind-all a:hover{text-decoration:underline !important}

/* --- mobile --- */
/* display lives in its own rule: putting it in the grouped reset below would
   let :active out-specify the media query and hide the button mid-click. */
.pl-header .pl-burger{display:none}

.pl-header .pl-burger,
.pl-header .pl-burger:hover,
.pl-header .pl-burger:focus,
.pl-header .pl-burger:active{
  justify-self:end;
  appearance:none;
  -webkit-appearance:none;
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:10px !important;
  margin:0 !important;
  min-height:0 !important;
  width:auto !important;
  height:auto !important;
  cursor:pointer;
  color:var(--pl-navy) !important;
}
.pl-header .pl-burger svg{width:26px;height:26px;display:block;pointer-events:none}


/* Compact desktop: everything still fits, just tighter. */
@media (max-width:1199px) and (min-width:990px){
  .pl-bar{padding:0 20px;gap:16px;height:70px}
  .pl-brand img{height:32px}
  .pl-header .pl-nav-item{font-size:15px !important;padding:10px 10px !important}
  .pl-header .pl-btn{font-size:14px !important;padding:11px 16px !important}
  .pl-panel-inner{padding:28px 20px 26px}
}

@media (max-width:989px){
  /* Row 1: logo | buttons | burger. The drawer becomes row 2, spanning the
     full grid — normal flow, so no absolute positioning to go wrong. */
  .pl-bar{
    grid-template-columns:1fr auto auto;
    grid-template-rows:66px;
    height:auto;
    min-height:66px;
    align-items:center;
    padding:0 16px;
    gap:0 10px;
  }
  .pl-brand{grid-row:1;grid-column:1}
  .pl-brand img{height:32px}
  .pl-actions{grid-row:1;grid-column:2}
  .pl-header .pl-burger{display:block;grid-row:1;grid-column:3}

  .pl-nav{display:none}

  /* buttons stay in the top row on mobile */
  .pl-header .pl-btn{font-size:13px !important;padding:9px 14px !important}

  /* burger turns into a close X while the drawer is open */
  .pl-header .pl-burger[aria-expanded="true"]{position:relative}
  .pl-header .pl-burger[aria-expanded="true"] svg{visibility:hidden}
  .pl-header .pl-burger[aria-expanded="true"]::before,
  .pl-header .pl-burger[aria-expanded="true"]::after{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:22px;height:2px;
    border-radius:2px;
    background:currentColor;
  }
  .pl-header .pl-burger[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg)}
  .pl-header .pl-burger[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(-45deg)}

  .pl-nav.is-open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    grid-row:2;
    grid-column:1 / -1;
    width:100%;
    padding:4px 0 20px;
    max-height:calc(100vh - 66px);
    max-height:calc(100dvh - 66px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* Flex items shrink by default. With a max-height on the drawer that means
     expanding a panel squeezes every row's padding instead of scrolling —
     which reads as the whole menu jumping. Pin them to their natural size. */
  .pl-nav.is-open > *{flex:0 0 auto}

  .pl-nav.is-open .pl-nav-item{
    width:100% !important;
    justify-content:space-between;
    border-style:none none solid none !important;
    border-width:0 0 1px 0 !important;
    border-color:var(--pl-line) !important;
    border-radius:0 !important;
    padding:18px 2px !important;
    font-size:18px !important;
  }
  .pl-nav.is-open .pl-nav-item.is-current{border-color:var(--pl-line) !important}
  .pl-nav.is-open .pl-chev{width:9px;height:9px;opacity:.8}

  /* panels expand inline underneath their nav item */
  .pl-panel{
    position:static;
    box-shadow:none;
    border:0;
    background:transparent;
    width:100%;
    order:0;
  }
  .pl-panel-inner{padding:6px 0 14px;max-width:none}
  .pl-svc-grid{grid-template-columns:1fr;gap:0}
  .pl-header .pl-svc,
  .pl-header .pl-svc:hover,
  .pl-header .pl-svc:focus,
  .pl-header .pl-svc:visited{
    padding:14px 2px !important;
    border-radius:0 !important;
    background-color:transparent !important;
  }
  .pl-header .pl-svc-title{font-size:16px !important}
  .pl-header .pl-svc-copy{font-size:14px !important}
  .pl-header .pl-ent{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-top:12px !important;
    padding-top:14px !important;
  }
  .pl-header .pl-ent-item{font-size:14px !important}

  .pl-ind-grid{grid-template-columns:1fr;grid-template-rows:auto;grid-auto-flow:row}
  .pl-header .pl-ind,
  .pl-header .pl-ind:hover,
  .pl-header .pl-ind:focus,
  .pl-header .pl-ind:visited{
    padding:13px 2px !important;
    border-radius:0 !important;
    font-size:16px !important;
    background-color:transparent !important;
  }
  .pl-header .pl-ind-all{margin-top:12px !important;padding-top:14px !important}

  /* actions live in the top row, so the drawer copy is not needed */
  .pl-actions.is-open{display:flex}
}

@media (max-width:340px){
  .pl-header .pl-ent-lead,
  .pl-header .pl-ent-link{white-space:normal}
}

@media (max-width:520px){
  .pl-bar{padding:0 12px;gap:0 6px}
  .pl-brand img{height:26px}
  .pl-header .pl-btn{font-size:12px !important;padding:8px 11px !important}
  .pl-header .pl-burger,
  .pl-header .pl-burger:hover,
  .pl-header .pl-burger:focus,
  .pl-header .pl-burger:active{padding:8px !important}
}

/* stops the page scrolling behind the open mobile drawer */
body.pl-nav-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .pl-header *{transition:none !important}
}