/* ==========================================================================
   iPro Hire header: Goya's native header + mega menu, styled as the design's
   floating pill bar. Loaded site-wide. Ported from styles.css sections 4-6.
   ========================================================================== */
:root {
  --iph-bar: rgba(10, 11, 13, 0.82);
  --iph-bar-solid: rgba(10, 11, 13, 0.95);
  --iph-surface: #1c1f24;
  --iph-border: #2a2d34;
  --iph-text: #a7acb5;
  --iph-red: #d6001c;
  --iph-red-hover: #ef1f37;
  --iph-sky: #1e9be0;
  --iph-sky-300: #6fc4ee;
  --iph-inset: 24px;
  --iph-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --iph-ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- The pill ---------- */
#header.site-header {
  position: fixed !important;
  top: 6px; left: 12px; right: 12px;
  width: auto;
  height: auto !important;
  z-index: 1030;
  background: var(--iph-bar) !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: none !important;
  transition: background .2s var(--iph-ease), box-shadow .2s var(--iph-ease), top .2s var(--iph-ease);
}
.header_on_scroll #header.site-header {
  background: var(--iph-bar-solid) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}
@media (min-width: 992px) {
  #header.site-header { top: var(--iph-inset); left: var(--iph-inset); right: var(--iph-inset); }
}
@media (min-width: 783px) {
  .admin-bar #header.site-header,
  .admin-bar.header-sticky.header_on_scroll:not(.megamenu-active) #header.site-header,
  .admin-bar.header_on_scroll.megamenu-active #header.site-header { top: calc(32px + var(--iph-inset)); }
}
/* Goya switches the header to absolute while a mega menu is open on scroll; keep it fixed */
.header_on_scroll.megamenu-active #header.site-header { position: fixed !important; }
/* Room for the pill on pages without a transparent hero */
.header-spacer { height: 96px !important; }

#header .header-main,
#header .header-mobile { height: auto !important; background: none !important; border: 0 !important; }
#header .header-contents.container {
  max-width: none; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px 12px 10px 24px !important;
  min-height: 56px;
}
#header .header-items { display: flex; align-items: center; height: auto; }
#header .header-left-items, #header .header-right-items { flex: 0 0 auto; }
#header .header-center-items { flex: 1 1 auto; justify-content: center; position: static; }
#header .header-right-items { gap: 14px; }

/* Logo */
#header .logo-holder { display: inline-flex; align-items: center; flex-shrink: 0; }
#header .logolink .logoimg { height: 24px !important; width: auto; max-width: none; max-height: none; }
#header .logolink .logoimg.bg--dark { display: none !important; }
#header .logolink .logoimg.bg--light { display: block !important; opacity: 1 !important; }

/* ---------- Primary links ---------- */
#header .main-navigation, #header .et-header-menu { position: static; }
#header .et-header-menu { display: flex; gap: 28px; margin: 0; padding: 0; }
#header .et-header-menu > li { margin: 0; padding: 0; }
#header .et-header-menu > li > a,
.light-title:not(.header_on_scroll) #header .et-header-menu > li > a,
.sticky-header-light.header_on_scroll #header .et-header-menu > li > a {
  color: var(--iph-text) !important;
  font: 600 13px/1 var(--iph-font) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  padding: 10px 0 !important;
  white-space: nowrap;
}
#header .et-header-menu > li > a:after { display: none !important; }
#header .et-header-menu > li:hover > a,
#header .et-header-menu > li > a:focus-visible { color: #fff !important; }

/* ---------- Mega menu card ---------- */
#header .et-header-menu > li.menu-item-mega-parent { position: static; }
#header .et-header-menu > li.menu-item-mega-parent > .sub-menu {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1.1fr;
  gap: 28px;
  width: 760px; max-width: calc(100vw - 96px);
  top: 100%; margin-top: 0 !important;
  left: 50% !important; right: auto;
  transform: translateX(-50%);
  padding: 28px !important;
  background: var(--iph-surface);
  border: 1px solid var(--iph-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  text-transform: none;
}
/* hover bridge across the gap so the card doesn't close on the way down */
#header .et-header-menu > li.menu-item-mega-parent > .sub-menu:before {
  content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: -12px !important; height: 12px !important; width: 100% !important;
  background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important;
}
#header .et-header-menu > li.menu-item-mega-parent > .sub-menu > li {
  max-width: none !important; width: auto !important; flex: none !important;
  margin: 0 !important; padding: 0 !important;
}
/* Column headings */
#header .menu-item-mega-parent > .sub-menu > li > a {
  display: block;
  color: var(--iph-sky) !important;
  font: 700 12px/1.3 var(--iph-font) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  margin: 0 0 4px !important; padding: 0 !important;
  cursor: default;
}
#header .menu-item-mega-parent > .sub-menu > li > a:after { display: none; }
/* Column links */
#header .menu-item-mega-parent > .sub-menu > li > .sub-menu {
  display: flex !important; flex-direction: column; gap: 10px;
  padding: 10px 0 0 !important;
}
#header .menu-item-mega-parent > .sub-menu > li > .sub-menu > li > a {
  color: var(--iph-text) !important;
  font: 300 14px/1.4 var(--iph-font) !important;
  letter-spacing: 0 !important; text-transform: none !important;
  padding: 0 !important; margin: 0 !important;
}
#header .menu-item-mega-parent > .sub-menu > li > .sub-menu > li > a:hover { color: #fff !important; }
#header .menu-item-mega-parent > .sub-menu > li > .sub-menu > li > a:after { display: none; }

/* Featured panel (the item with a Goya menu image) */
#header li.ip-mega-feature > a {
  position: relative; display: block !important;
  min-height: 180px; height: 100%;
  border-radius: 6px; overflow: hidden;
  margin: 0 !important; padding: 0 !important;
  cursor: pointer !important;
}
#header li.ip-mega-feature .item-thumb { position: absolute; inset: 0; margin: 0; }
#header li.ip-mega-feature .item-thumb img {
  width: 100%; height: 100%; object-fit: cover; margin: 0 !important;
  filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(2.5) brightness(0.6);
  transition: transform .5s var(--iph-ease);
}
#header li.ip-mega-feature > a:hover .item-thumb img { transform: scale(1.04); }
#header li.ip-mega-feature > a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
}
#header li.ip-mega-feature .item-caption {
  position: absolute; inset: 0; z-index: 2; padding: 14px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  color: #fff; font: 700 15px/1.25 var(--iph-font); text-transform: none; letter-spacing: 0;
}
#header li.ip-mega-feature .ip-mega-price { font-weight: 300; font-size: 12px; color: rgba(255,255,255,0.8); }
#header li.ip-mega-feature .menu-label {
  position: absolute; top: 14px; left: 14px;
  background: var(--iph-red) !important; color: #fff;
  font: 800 10px/1 var(--iph-font); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; margin: 0;
}

/* ---------- Right-hand items ---------- */
#header .quick_search.icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--iph-text) !important;
}
#header .quick_search.icon .text { display: none; }
#header .quick_search.icon svg { width: 18px; height: 18px; }
#header .quick_search.icon:hover { color: #fff !important; background: rgba(255,255,255,0.07); }

#header .et-header-text { margin: 0; }
#header .ip-nav-phone {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff !important; text-decoration: none;
  font: 700 13px/1 var(--iph-font) !important; letter-spacing: 0.04em; white-space: nowrap;
}
#header .ip-nav-phone:hover { color: var(--iph-sky-300) !important; }
.ip-nav-phone-icon {
  display: inline-block; width: 15px; height: 15px; flex-shrink: 0;
  background: var(--iph-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#header .ip-nav-quote, #mobile-menu .ip-nav-quote {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--iph-red); color: #fff !important; text-decoration: none;
  border-radius: 999px; padding: 8px 8px 8px 20px;
  font: 700 12px/1 var(--iph-font) !important; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  transition: background .2s var(--iph-ease);
}
#header .ip-nav-quote:hover, #mobile-menu .ip-nav-quote:hover { background: var(--iph-red-hover); }
.ip-nav-arrow {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* lg..xl: the bar is tight, tighten the gaps (design section 16) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #header .header-contents.container { gap: 16px; padding-left: 18px !important; }
  #header .et-header-menu { gap: 18px; }
  #header .header-right-items { gap: 10px; }
  #header .ip-nav-quote { padding-left: 16px; }
  #header .ip-nav-phone { font-size: 12px !important; gap: 6px; }
}

/* ---------- Breakpoint: the design switches to mobile below 992px ---------- */
@media (min-width: 992px) {
  #header .header-main { display: block !important; }
  #header .header-mobile { display: none !important; }
}
@media (max-width: 991.98px) {
  #header .header-main { display: none !important; }
  #header .header-mobile { display: block !important; }
}

/* ---------- Mobile bar ---------- */
#header .header-mobile .header-contents.container { padding: 8px 8px 8px 16px !important; min-height: 52px; gap: 12px; }
#header .header-mobile .logo-holder { order: 1; margin-right: auto; }
#header .header-mobile .logolink .logoimg { height: 22px !important; }
#header .header-mobile .mobile-header-icons { order: 2; display: flex; align-items: center; }
#header .header-mobile .hamburger-menu { order: 3; }
#header .header-mobile .menu-toggle,
.light-title:not(.header_on_scroll) #header .header-mobile .menu-toggle,
.header-transparent-mobiles #header .header-mobile .menu-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04); color: var(--iph-text) !important; padding: 0;
}
#header .header-mobile .menu-toggle .name { display: none; }
#header .header-mobile .menu-toggle svg { width: 20px; height: 20px; }
#header .header-mobile .menu-toggle:hover { color: #fff !important; }
#header .ip-nav-phone-mobile {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--iph-red);
}
#header .ip-nav-phone-mobile .ip-nav-phone-icon { background: #fff; width: 16px; height: 16px; }

/* ---------- Mobile menu panel (the design's offcanvas) ---------- */
#mobile-menu.side-panel {
  background: #0c0d10 !important; color: var(--iph-text);
  border-left: 1px solid var(--iph-border);
  width: min(380px, 88vw);
}
#mobile-menu header { border-bottom: 1px solid var(--iph-border); }
#mobile-menu .et-close:before, #mobile-menu .et-close:after { background-color: var(--iph-text) !important; }
#mobile-menu .mobile-menu > li > a {
  color: #f4f5f6 !important;
  font: 600 13px/1.2 var(--iph-font) !important; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 16px 0 !important; border-bottom: 1px solid var(--iph-border);
}
#mobile-menu .mobile-menu .sub-menu > li > a { color: var(--iph-text) !important; font: 300 15px/1.4 var(--iph-font) !important; }
#mobile-menu .mobile-menu .sub-menu > li.menu-item-has-children > a {
  color: var(--iph-sky) !important; font: 700 11px/1.4 var(--iph-font) !important;
  letter-spacing: 0.06em; text-transform: uppercase;
}
#mobile-menu .mobile-menu li a:hover { color: #fff !important; }
#mobile-menu .et-menu-toggle:after, #mobile-menu .et-menu-toggle:before { border-color: var(--iph-text) !important; background-color: var(--iph-text); }
#mobile-menu .sliding-menu, #mobile-menu .sliding-menu-panel, #mobile-menu .sliding-menu-top { background: #0c0d10 !important; color: #f4f5f6; }
#mobile-menu li.ip-mega-feature { display: none; }
#mobile-menu .ip-nav-phone { color: #fff !important; display: inline-flex; gap: 8px; align-items: center; font: 700 14px/1 var(--iph-font); margin: 18px 0 12px; }
#mobile-menu .et-mobile-text { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  #header.site-header, #header li.ip-mega-feature .item-thumb img { transition: none; }
}

/* Kill Goya dropdown panels inside the mega card (customizer paints them white) */
#header .et-header-menu > li.menu-item-mega-parent > .sub-menu { background-color: var(--iph-surface) !important; }
#header .et-header-menu > li.menu-item-mega-parent > .sub-menu .sub-menu,
#header .et-header-menu > li.menu-item-mega-parent > .sub-menu .sub-menu:before,
#header .et-header-menu > li.menu-item-mega-parent > .sub-menu > li,
#header .et-header-menu > li.menu-item-mega-parent > .sub-menu li a { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; }
#header .et-header-menu > li.menu-item-mega-parent > .sub-menu .sub-menu:before { display: none !important; }
/* Transparent-hero pages: no spacer, the hero runs up behind the pill */
.page-header-transparent .site-content > .header-spacer, body:has(.ip-hero) .site-content > .header-spacer { display: none !important; height: 0 !important; }

/* ==========================================================================
   iPro Hire footer: Goya footer widgets + footer bar, styled as the design
   (styles.css section 14). Five widgets become five grid cells.
   ========================================================================== */
#colophon.site-footer {
  background: #0c0d10 !important;
  border-top: 1px solid var(--iph-border);
  font-family: var(--iph-font);
}
#colophon .footer-widgets { background: #0c0d10 !important; padding: 0 !important; }
#colophon .footer-widgets::before { content: none !important; display: none !important; }
#colophon .footer-widgets .container {
  max-width: 1280px !important; width: 100%;
  margin: 0 auto; padding: 48px 20px 32px !important;
}
#colophon .footer-widgets .row {
  display: grid; grid-template-columns: 1fr; gap: 28px; margin: 0;
}
/* Goya's column wrappers step aside so every widget is its own grid cell */
#colophon .footer-widgets .row > [class*="footer"] { display: contents; }
#colophon .footer-widgets .widget { margin: 0 !important; padding: 0 !important; }
@media (min-width: 576px) {
  #colophon .footer-widgets .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #colophon .footer-widgets .footer1 > .widget { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  #colophon .footer-widgets .container { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (min-width: 992px) {
  #colophon .footer-widgets .container { padding: 64px 32px 48px !important; }
  #colophon .footer-widgets .row { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 32px; }
  #colophon .footer-widgets .footer1 > .widget { grid-column: auto; }
}

/* Headings and links */
#colophon .footer-widgets .widgettitle {
  color: #fff !important;
  font: 700 13px/1.3 var(--iph-font) !important;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 16px !important; padding: 0 !important;
}
#colophon .footer-widgets .widgettitle span:after { display: none; }
#colophon .footer-widgets .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#colophon .footer-widgets .menu li { margin: 0; padding: 0; }
#colophon .footer-widgets a {
  color: var(--iph-text) !important;
  font: 300 14px/1.4 var(--iph-font) !important;
  text-decoration: none;
}
#colophon .footer-widgets a:hover { color: #fff !important; }

/* Brand column */
#colophon .ip-footer-brand { display: flex; flex-direction: column; gap: 14px; }
#colophon .ip-footer-logo { width: 160px; height: auto; max-width: 100%; display: block; }
#colophon .ip-footer-brand .ip-footer-tagline {
  color: #8a90a0 !important; font: 300 13px/1.6 var(--iph-font) !important;
  max-width: 260px; margin: 0 !important;
}

/* Get in touch */
#colophon .ip-footer-contact { display: flex; flex-direction: column; gap: 12px; }
#colophon .ip-footer-addr { color: #8a90a0; font: 300 13px/1.4 var(--iph-font); }

/* Bottom bar */
#colophon .footer-bar { background: #0c0d10 !important; border: 0 !important; }
#colophon .footer-bar .container {
  max-width: 1280px; width: 100%; margin: 0 auto;
  padding: 24px 20px !important;
  border-top: 1px solid var(--iph-border);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
@media (min-width: 768px) { #colophon .footer-bar .container { padding: 24px 32px !important; } }
#colophon .footer-bar .footer-items { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; flex: 0 1 auto; }
#colophon .footer-bar .footer-center:empty,
#colophon .footer-bar .footer-center:not(:has(*)) { display: none; }
#colophon .footer-bar .footer-bar-content,
#colophon .footer-bar .footer-bar-content.copyright,
#colophon .footer-bar .text-1 span {
  color: #8a90a0 !important; font: 400 12px/1.4 var(--iph-font) !important; margin: 0;
}
#colophon .footer-bar .text-1 { display: flex; flex-wrap: wrap; gap: 16px; }
#colophon .footer-bar .footer-navigation .menu { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
#colophon .footer-bar .footer-navigation .menu li { margin: 0; padding: 0; }
#colophon .footer-bar .footer-navigation a {
  color: #8a90a0 !important; font: 400 12px/1.4 var(--iph-font) !important; text-decoration: none;
}
#colophon .footer-bar .footer-navigation a:hover { color: #fff !important; }
@media (max-width: 575.98px) {
  #colophon .footer-bar .container { justify-content: flex-start; gap: 10px; }
}

/* ---------- Mobile menu v2: readable links in Goya's sliding panels, panel above the header pill ---------- */
#mobile-menu.side-panel { z-index: 1050 !important; }
#mobile-menu .panel-header-inner .et-close { background: rgba(255,255,255,0.08) !important; }
#mobile-menu .panel-header-inner .et-close:before, #mobile-menu .panel-header-inner .et-close:after { background-color: #f4f5f6 !important; }
#mobile-menu .sliding-menu, #mobile-menu .sliding-menu-panel, #mobile-menu .sliding-menu ul { background: #0c0d10 !important; }
#mobile-menu .sliding-menu a,
#mobile-menu .mobile-menu li > a,
#mobile-menu .sliding-menu-panel li > a {
  color: #f4f5f6 !important; opacity: 1 !important;
  font: 600 13px/1.3 var(--iph-font) !important; letter-spacing: 0.04em !important; text-transform: uppercase;
  padding-top: 16px !important; padding-bottom: 16px !important;
  border-bottom: 1px solid var(--iph-border) !important;
}
#mobile-menu .sliding-menu a:hover, #mobile-menu .sliding-menu a:focus-visible { color: #fff !important; }
#mobile-menu .sliding-menu .sliding-menu-nav:before { color: var(--iph-text) !important; background: rgba(255,255,255,0.05); }
#mobile-menu .sliding-menu a.sliding-menu-back { color: var(--iph-sky) !important; font-weight: 700 !important; }
/* Second level (column headings) sky blue, third level (links) light and sentence case */
#mobile-menu .sliding-menu-panel:not(.sliding-menu-panel-root) a:not(.sliding-menu-back) { color: var(--iph-text) !important; }
#mobile-menu .sliding-menu-panel:not(.sliding-menu-panel-root) a.sliding-menu-nav, #mobile-menu .sliding-menu-panel:not(.sliding-menu-panel-root) a:has(+ .sliding-menu-nav) { color: var(--iph-sky) !important; }
#mobile-menu .sliding-menu-panel .sub-menu a, #mobile-menu .mobile-menu .sub-menu .sub-menu a { color: #d6d9de !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; }
#mobile-menu li.ip-mega-feature, #mobile-menu .sliding-menu li.ip-mega-feature { display: none !important; }
#mobile-menu .et-mobile-text { margin-top: 12px; }
#mobile-menu .et-mobile-text .ip-nav-phone { color: #fff !important; }