/* Portal header + footer chrome — v1 port. The header's core classes already live in site.min.css;
   this file adds the header dropdown/burger bits and the full footer styling (the legacy footer CSS
   lived inline in _FooterContentsV2.cshtml and was never in the bundle). Brand colour comes from the
   theme vars on .body-{abbr} (--bgcolor-theme / --textcolorcontrast-theme), so the admin recolour
   only edits that block. */

/* ── Header main bar: logo + search + hamburger inline on one row (legacy floats them) ── */
.navbarHeaderWrapper {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.navbarHeaderWrapper > a { flex: 0 0 auto; margin: 0 !important; }
/* Search stretches to fill the row up to the hamburger (no max-width cap). */
.navbarHeaderWrapper .navSearchWrap { flex: 1 1 auto; width: auto !important; max-width: none !important; }
/* Align the hamburger to the search box, not the row centre. The search sits low (its wrap carries a
   10px margin-top), so centring the burger on the row leaves it ~8px below the search. Pin the burger
   to the row top (align-self:flex-start) and drop it by a fixed offset so its 44px icon centres on the
   search box (top ≈ 20px, centre ≈ 40px → burger top ≈ 18px). */
.navbarHeaderWrapper .navMenuAndDropdownContainer {
  flex: 0 0 auto;
  position: relative;
  /* Pin to the 44px button height (a stray legacy height makes it 49px) so it centres with the
     account icon inside .pp-nav-right (no vertical drift). */
  display: flex;
  align-items: center;
  height: 44px;
  /* Legacy site.min.css gives this a float:right + negative margin-right (old overlay hack); both
     fight the flex layout. Neutralise them (the .pp-nav-right group now owns the vertical offset). */
  float: none !important;
  margin-right: 0 !important;
}

/* Right cluster — hamburger + (when signed in) the account icon, grouped so they sit together at the
   far right whether or not the page has a header search bar. Vertically centred on the search box
   (its wrap sits ~8px low). The 2-class selector beats the legacy `.navbarHeaderWrapper > div`
   float/margin that would otherwise pull this direct child. */
.navbarHeaderWrapper .pp-nav-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  margin-top: 10px;
  float: none !important;
  margin-right: 0 !important;
}
.pp-account-wrap { display: flex; align-items: center; }
.pp-account-link { display: block; line-height: 0; }
/* EasyAsset master logo is wide (~5.3:1), so the max-width must clear its natural width at this
   height or it gets squished (height is forced, width capped → horizontal compression). */
/* Sized to match the EasyAsset.com.au header logo (~198px wide ≈ 38px tall at this aspect). */
.pp-nav-logo { height: 38px !important; width: auto !important; max-width: 220px; display: block; }
.pp-nav-logo--mobile { height: 32px !important; max-width: 190px; }
.mobile-navbar__header a > img { height: 32px !important; width: auto !important; max-width: 190px; }

/* Hamburger = hidden checkbox + label (pure-CSS toggle, survives client-side navigation). */
.pp-burger-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; margin: 0; }
.pp-burger-btn {
  display: inline-block;
  height: 44px;
  width: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  vertical-align: middle;
}
/* Three-bar icon drawn in CSS in the portal brand colour (theme var = IS yellow #83FFC1) —
   middle bar + box-shadow for top/bottom. */
.pp-burger-btn::before {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  height: 3px;
  border-radius: 2px;
  background: var(--bgcolor-theme);
  box-shadow: 0 -7px 0 var(--bgcolor-theme), 0 7px 0 var(--bgcolor-theme);
  transform: translateY(-50%);
}

/* Self-owned mega-menu (one clean dropdown box; legacy classes carried a nested box + a mobile
   full-screen overlay that collided). Shown when its sibling checkbox is checked. */
.pp-megamenu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  z-index: 100000;
  display: none;
  background: #fff;
  width: 820px;
  max-width: 94vw;
  border: 1px solid #dae0e6;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.pp-burger-toggle:checked ~ .pp-megamenu { display: block; }
.pp-megamenu__inner { display: flex; gap: 28px; padding: 22px 26px; }
.pp-megamenu__nav { flex: 0 0 190px; }
.pp-megamenu__cats { flex: 1 1 auto; border-left: 1px solid #e2e3e8; padding-left: 26px; }
.pp-megamenu__title { font-weight: bold; font-size: 16px; color: #434343; margin: 4px 0 8px; }
.pp-megamenu__nav .pp-megamenu__link { display: block; }
.pp-megamenu__link { color: #434343 !important; text-decoration: none !important; font-size: 14px; padding: 5px 0; }
.pp-megamenu__link:hover { color: var(--bgcolor-theme) !important; }
.pp-megamenu__divider { border-top: 1px solid #e2e3e8; margin: 12px 0; }
.pp-megamenu__cats-grid { columns: 2; column-gap: 30px; }
.pp-megamenu__cats-grid a { display: block; color: #434343 !important; text-decoration: none !important; font-size: 14px; padding: 4px 0; break-inside: avoid; }
.pp-megamenu__cats-grid a:hover { color: var(--bgcolor-theme) !important; }

/* ── Header: login dropdowns + burger category panel ── */
/* Trust line (left) + Buyers/Suppliers/Advertise nav (right) sit on one vertically-centred row. */
.pp-trust-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pp-trust-row .navSlogan--desktop { margin: 0; }
/* The row also carries Bootstrap .row/.clearfix, whose ::before/::after become phantom flex items
   and defeat space-between (they centre the two real children instead of pushing them to the edges).
   Drop them so the trust line sits at the logo's left edge and the nav at the hamburger's right edge. */
.pp-trust-row::before,
.pp-trust-row::after { display: none !important; }

#buyer-logins-container,
#supplier-logins-container {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
#supplier-logins-container { margin-left: 15px; }
/* Nav copy is ~5% smaller than the old 14px top row (13.3px) and aligns with the trust line. */
.headerTopOptions {
  display: flex;
  align-items: center;
  font-size: 13.3px;
  line-height: 1;
}
.headerTopOptions > div > span,
.nav-header-advertise {
  color: #434343;
  font-weight: 600;
}
.headerTopOptions > div > span { border-bottom: 2px solid var(--bgcolor-theme); padding-bottom: 2px; }
.nav-header-advertise {
  display: inline-block;
  margin-left: 15px;
  padding: 4px 16px;
  border: 1px solid var(--bgcolor-theme);
  border-radius: 18px;
  text-decoration: none;
}
.dropdown-login {
  display: none;
  list-style: none;
  position: absolute;
  width: 250px;
  padding: 10px 20px;
  margin: 0;
  right: 0;
  top: 18px;
  background: #fff;
  border: 1px solid #dae0e6;
  border-radius: 3px;
  box-shadow: 3px 3px 6px #00000026;
  z-index: 10000;
  text-align: left;
}
/* Open the login dropdowns on hover (pure CSS — survives navigation). The padding-top bridges the
   gap between the trigger and the menu so the hover doesn't drop. */
#buyer-logins-container:hover .dropdown-login,
#supplier-logins-container:hover .dropdown-login { display: block; }
.dropdown-login li { margin: 7px 0; }
.dropdown-login li a { color: #434343; text-decoration: none; }
.dropdown-login li a:hover { text-decoration: underline; }
.dropdown-login__header { font-weight: bold; color: #434343; font-size: 13px; margin-bottom: 8px !important; }
.dropdown-login__demo { padding-bottom: 8px; color: #434343; }
.dropdown-login__sep { color: #333; }
.dropdown-login .bookdemo {
  display: inline-block;
  background: var(--bgcolor-theme);
  color: var(--textcolorcontrast-theme, #434343);
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 2px;
  text-decoration: none !important;
}

/* ── Footer (ported verbatim from _FooterContentsV2.cshtml inline <style>) ── */
.footer-parent-container { background-color: var(--grey-bg, #f5f6fa); padding-top: 40px; }

.footer-container { background-color: #434343; color: #fff; padding: 30px 0; }
.footer-container .row { display: flex; justify-content: space-between; flex-wrap: wrap; }
.footer-container .row .foot-sec1 { order: 1; }
.footer-container .row .foot-sec2 { order: 2; }
.footer-container .row .foot-sec3 { order: 3; }

.footer-container-signup {
  background-color: var(--bgcolor-theme);
  color: var(--textcolor-theme, #434343);
  padding: 30px 0;
  text-align: center;
  font-size: 15px;
  position: relative;
}
.footer-container-signup .group-input { width: 380px; display: inline-block; margin-left: 20px; position: relative; top: 2px; text-align: left; }
.footer-container-signup .group-input input[type='text'] { width: 65%; padding: 8px; border: none; float: left; }
.footer-container-signup .group-input input[type='button'] { width: auto; background-color: var(--green, #00b242); padding: 8px 15px; border: none; color: #fff; font-weight: bold; float: left; cursor: pointer; }
.footer-container-signup__intro { display: inline-block; position: relative; top: -10px; font-size: 18px; color: var(--textcolorcontrast-theme); }

.footer-panel { width: 1200px !important; max-width: 1200px !important; margin: 0 auto; }
.footer-panel * { font-size: 14px; }
.footer-panel h3, .footer-panel .footer-header { margin: 3px 0 0; padding-bottom: 0; font-weight: bold; font-size: 20px; }
.footer-panel hr { margin: 6px 0 8px 0; padding: 0; border: solid 1px #fff; border-bottom: none; }
.footer-panel hr.saperator-links { width: 89%; }
.footer-panel hr.saperator-explore { width: 94%; }
.footer-panel hr.saperator-partner { width: 97%; }
.footer-panel ul { list-style: none; padding-left: 0; }
.footer-panel ul li { margin-bottom: 5px; }
.footer-panel ul li a:not(.easy-asset-link) { font-size: 13px; color: #fff !important; text-decoration: none !important; }
.footer-panel ul li a:hover { text-decoration: underline !important; }
.footer-panel ul li a.list-your-business {
  background-color: var(--bgcolor-theme);
  color: var(--textcolorcontrast-theme) !important;
  font-size: 20px;
  font-weight: bold;
  padding: 3px 0;
  display: block;
  width: 90%;
  text-align: center;
  margin-top: 10px;
  text-decoration: none !important;
}
.footer-panel ul li a.supplier-subscriber-login {
  font-size: 16px;
  font-weight: bold;
  padding: 2px 0;
  display: block;
  width: 90%;
  text-align: center;
  border: solid 1px #fff;
  margin: 10px 0;
  text-decoration: none !important;
}
.footer-panel div.singleline { margin: 15px 0; }
.footer-panel ul.list-inline { padding-left: 0; }
.footer-panel ul.list-inline li { margin: 5px 20px 5px 0; display: inline-block; }
.footer-panel .footer-main-logo { width: 40%; }
.footer-panel ul.list-social-media { list-style: none; padding-left: 0; display: flex; }
.footer-panel ul.list-social-media li { margin: 5px 20px 5px 0; display: inline-block; }
.footer-panel ul.list-social-media li .social-media-icon { font-size: 28px; color: #fff; }

.foot-sec1 { width: 25%; display: inline-block; vertical-align: top; }
.foot-sec2 { width: 40%; display: inline-block; vertical-align: top; }
.foot-sec3 { width: 30%; display: inline-block; vertical-align: top; padding: 0 10px; }
.foot-sec2 ul { column-count: 2; }
.foot-sec1 ul { column-count: 1; }
.foot-sec3 .d-flex { display: flex; align-items: center; }

.partner-links a,
.easy-asset-link { color: #428bca !important; text-decoration: underline; }
.easy-asset-link:hover { opacity: 0.8; }

.how-it-works-video-container { margin-bottom: 20px; }
.how-it-works-video {
  height: 120px;
  width: 220px;
  background-position: center;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  border: solid 2px #d9d9d9;
  position: relative;
}
.how-it-works-video img { margin: auto; position: absolute; inset: 0; opacity: 0.85; }

.footer-container-whitebg { background-color: var(--grey-bg, #f5f6fa); padding: 15px 20px 17px; text-align: center; font-size: 11px; }
#footer-base { color: #434343; }
#footer-base a { color: #428bca; }
.industracom-footer-logo { display: inline-block; margin-left: 60px; vertical-align: middle; }

/* responsive */
@media screen and (max-width: 1199px) {
  .footer-container { width: 100%; padding: 15px 10px !important; }
  .footer-panel { width: 100% !important; padding: 0 !important; }
  .footer-container-signup .group-input { width: 310px; margin-left: 0; }
  .footer-panel hr.saperator-links,
  .footer-panel hr.saperator-explore,
  .footer-panel hr.saperator-partner { width: 100%; }
}
@media screen and (max-width: 768px) {
  .footer-container .row { flex-direction: column; }
  .foot-sec1, .foot-sec2, .foot-sec3 { width: 100%; margin: 0; }
  .footer-container .row .foot-sec1 { order: 2; }
  .footer-container .row .foot-sec2 { order: 3; }
  .footer-container .row .foot-sec3 { order: 1; margin-bottom: 20px; }
  .footer-panel .footer-main-logo { width: 125px; margin: 20px auto; }
  .footer-panel ul li a.list-your-business,
  .footer-panel ul li a.supplier-subscriber-login { width: 100%; }
  .industracom-footer-logo { display: block; margin: 8px auto 0; }
  .footer-container-signup__intro { display: block; top: 0; margin-bottom: 12px; }
  .footer-container-signup .group-input { margin-left: 0; }
}