/* ============================================================
   HELPASS CUSTOM OVERRIDES
   ============================================================ */

/* ----------------------------------------------------------
   1. FIXED HEADER — always pinned to top
   ---------------------------------------------------------- */
#header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/*
  Offset all content below the fixed header.
  --header-h is set by JS (app.js) measuring the real header height.
  Fallback values cover first paint before JS runs.
*/
.page-wrapper {
  padding-top: var(--header-h, 87px);
}

@media (max-width: 1399px) {
  .page-wrapper { padding-top: var(--header-h, 77px); }
}

@media (max-width: 991px) {
  .page-wrapper { padding-top: var(--header-h, 64px); }
}

/* The JS-cloned sticky-header is no longer needed */
.sticky-header {
  display: none !important;
}

/* ----------------------------------------------------------
   2. FLEXBOX HEADER INNER LAYOUT
      [ hamburger ] [ logo ] [ nav (grows + centres) ] [ CTA ]
   ---------------------------------------------------------- */
.hp-nav-inner {
  display: flex !important;
  align-items: center;
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}

/* Hamburger: left edge, mobile only */
.hp-nav-toggle {
  flex: 0 0 auto;
  margin-right: 12px;
}

/* Logo: sized by its own content */
.hp-nav-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-right: 32px;
  padding: 0;
}

.hp-nav-logo .navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.hp-nav-logo .navbar-brand img {
  max-width: 170px;
  height: auto;
  display: block;
}

/* Nav links: takes all remaining space, centred */
.hp-nav-links {
  flex: 1 1 auto;
  min-width: 0;
}

@media screen and (min-width: 992px) {
  .hp-nav-links {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .hp-nav-links > ul.navbar-nav {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 !important;
    padding: 0;
    justify-content: center;
  }
}

/* CTA: sized by content, right edge */
.hp-nav-cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 24px;
}

/* ----------------------------------------------------------
   3. TABLET (768px–991px): logo centred between burger & CTA
   ---------------------------------------------------------- */
@media (max-width: 991px) {
  .hp-nav-inner {
    padding: 12px 16px;
  }

  .hp-nav-toggle {
    order: 1;
    flex: 0 0 auto;
    margin-right: 8px;
  }

  /* Logo grows to fill middle space, centred */
  .hp-nav-logo {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0;
    margin-left: 0;
  }

  /* Nav is a fixed side drawer — out of the flex row */
  .hp-nav-links {
    order: 3;
    flex: 0 0 auto;
  }

  .hp-nav-cta {
    order: 4;
    flex: 0 0 auto;
    margin-left: 8px;
  }
}

/* ----------------------------------------------------------
   4. DESKTOP NAV LINK PADDING
   ---------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .wpo-site-header #navbar {
    padding-left: 0 !important;
  }

  .wpo-site-header #navbar > ul > li > a {
    padding: 28px 16px !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1399px) {
  .wpo-site-header #navbar > ul > li > a {
    padding: 24px 12px !important;
    font-size: 15px !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .wpo-site-header #navbar > ul > li > a {
    padding: 24px 8px !important;
    font-size: 14px !important;
  }
}

/* ----------------------------------------------------------
   5. PLAY BUTTON — visible & correctly sized everywhere
   ---------------------------------------------------------- */
.wpo-site-header .header-right .close-form .theme-btn,
.wpo-site-header .header-right .close-form .view-cart-btn {
  white-space: nowrap;
  padding: 12px 36px !important;
  font-size: 17px !important;
}

@media (max-width: 1399px) {
  .wpo-site-header .header-right .close-form .theme-btn,
  .wpo-site-header .header-right .close-form .view-cart-btn {
    padding: 11px 40px !important;
  }
}

@media (max-width: 1199px) {
  .wpo-site-header .header-right .close-form .theme-btn,
  .wpo-site-header .header-right .close-form .view-cart-btn {
    padding: 10px 30px !important;
    font-size: 15px !important;
  }
}

/* Show on mobile — was display:none in original style.css */
@media (max-width: 991px) {
  .wpo-site-header .header-right .close-form .theme-btn,
  .wpo-site-header .header-right .close-form .view-cart-btn {
    display: inline-block !important;
    padding: 10px 30px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .wpo-site-header .header-right .close-form .theme-btn,
  .wpo-site-header .header-right .close-form .view-cart-btn {
    padding: 10px 20px !important;
    font-size: 12px !important;
  }
}

.wpo-site-header .header-right {
  right: 0 !important;
}

/* ----------------------------------------------------------
   6. HERO BANNER — h1 white, home page description dimmed
   ---------------------------------------------------------- */

/* h1 in hero (was h2 before our breadcrumbs change) — force white */
.hp-hero-banner .wpo-breadcumb-wrap h1 {
  color: #fff !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
  .hp-hero-banner .wpo-breadcumb-wrap h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
}

/* Home page description paragraph — slightly dimmed */
.hp-hero-banner .wpo-breadcumb-wrap p {
  color: rgba(255, 255, 255, 0.88) !important;
  opacity: 0.82;
}

/* ----------------------------------------------------------
   7. TABLES — full-width, correct rounding, proper mobile scroll
   ----------------------------------------------------------
   Architecture:
     .hp-table-scroll          ← border-radius + overflow:hidden (clips corners)
       .hp-table-inner         ← overflow-x:auto (horizontal scroll)
         table                 ← full width, display:table always

   overflow:hidden on the outer div is what makes border-radius clip.
   You cannot have both overflow:hidden AND overflow-x:auto on the same
   element — so we use two divs. JS creates both.
   ---------------------------------------------------------- */

/* Outer clip: provides rounded corners */
.hp-table-scroll {
  width: 100%;
  overflow: hidden !important;   /* THIS is what makes border-radius clip */
  margin-bottom: 1.5rem;
  border-radius: 8px;
  /* Override hugo-custom.css which only has overflow-x:auto here */
}

/* Inner scroll container */
.hp-table-inner {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table itself: always full width, never display:block */
.hp-table-scroll table {
  width: 100% !important;
  min-width: 600px;             /* force scroll to kick in before table collapses */
  border-collapse: collapse !important;
  display: table !important;    /* override hugo-custom mobile display:block */
  border-radius: 0 !important;
  overflow: visible !important;
  border: none;
}

/* Kill hugo-custom.css mobile display:block rule for wrapped tables —
   inline style from JS also does this but belt-and-suspenders */
.hp-table-scroll article table,
.hp-table-scroll .hp-content table,
article .hp-table-scroll table,
.hp-content .hp-table-scroll table {
  display: table !important;
  overflow: visible !important;
}

/* For tables NOT yet wrapped (before JS runs on first paint) */
@media (max-width: 991px) {
  article table:not(.hp-table-inner table),
  .hp-content table:not(.hp-table-inner table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
}

/* Force all tables full-width */
.hp-content table,
article table,
.hp-table-scroll table,
.hp-table-inner table {
  width: 100% !important;
  table-layout: auto;
}