/* Navigation — the wide mega menu, and the two quick actions that stay on
   every page.
 *
 * The row keeps six items and never lists a model: a panel says where a visitor
 * can go, and what is inside a product family is read on the family's own page.
 * Each panel carries one featured card, so a menu has a next step rather than
 * another list.
 *
 * Desktop opens a panel on hover and on click, with a short delay so the row
 * does not flicker as the pointer crosses it; a narrow screen turns the same
 * markup into a drawer with a second level and a way back. */

.site-header{position:sticky;top:0;z-index:60}
.site-header__inner{gap:clamp(16px,2vw,32px)}

/* The compact row changes what it paints, never the height of its own box.
 *
 * It used to drop the row's min-height and its padding and to print the mark
 * smaller, and the sticky row sits in the page's flow: the three together
 * shortened the document by 16px the moment the first 8px of scroll went past,
 * so everything below moved up with the row. A browser also re-anchors a page
 * whose content above the viewport has moved, which pushed the scroll position
 * back under the threshold — the row returned to its full height, the content
 * moved down again, and the row flickered between the two heights for as long as
 * a visitor scrolled near the top. The row is now one height in both states. */
.site-header{transition:box-shadow var(--transition-fast)}
.site-header.is-scrolled{box-shadow:0 6px 20px rgba(18,48,74,.07)}

/* The mark is what reads as compact. It is drawn 8px shorter and the same 8px is
   given back as margin, so the mark's slot in the line is still 44px and the row
   keeps the height it has at the top of the page. Below the width where the mark
   is already drawn at 36px, the scrolled row is the shadow alone. */
.brand__logo,
.custom-logo{transition:height var(--transition-fast),margin var(--transition-fast)}
@media (min-width:761px){
  .site-header.is-scrolled .brand__logo,
  .site-header.is-scrolled .custom-logo{height:36px;margin-block:4px}
}

/* ------------------------------------------------------------- The row -- */
/* The row is not positioned: a panel is placed against the header itself, so a
   panel is as wide as the page whatever its own item's position is. */
.nav-item__toggle,
.nav-item > a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:9px 10px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--color-navy);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--transition-fast),color var(--transition-fast);
}

.nav-item__toggle:hover,
.nav-item > a:hover,
.nav-item.is-open .nav-item__toggle{color:var(--color-accent);background:var(--color-accent-pale)}

.nav-item__caret{
  width:8px;
  height:8px;
  margin-top:-3px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--transition-fast);
}

.nav-item.is-open .nav-item__caret{transform:rotate(225deg);margin-top:3px}

/* --------------------------------------------------------- The panels -- */
.mega{
  position:absolute;
  top:100%;
  right:0;
  left:0;
  z-index:70;
  padding-block:clamp(24px,3vw,40px);
  border-bottom:1px solid var(--color-line);
  background:var(--color-surface);
  box-shadow:var(--shadow-panel);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity var(--transition-mid),transform var(--transition-mid),visibility var(--transition-mid);
}

.nav-item.is-open .mega{visibility:visible;opacity:1;pointer-events:auto;transform:none}

.mega__inner{
  display:grid;
  grid-template-columns:minmax(170px,.6fr) minmax(0,2fr) minmax(220px,.85fr);
  gap:clamp(20px,3vw,44px);
  max-width:var(--content-wide);
}

.mega__eyebrow{
  margin:0 0 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-accent);
}

.mega__title{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--color-heading)}
.mega__note{margin:0;font-size:13px;line-height:1.5;color:var(--color-muted)}
.mega__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(16px,2.4vw,32px)}
.mega__col-title{
  margin:0 0 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.mega__list{margin:0;padding:0;list-style:none}
.mega__list + .mega__col-title{margin-top:24px}

.mega__link{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 16px;
  align-items:start;
  gap:10px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  color:var(--color-heading);
  text-decoration:none;
  transition:background var(--transition-fast),color var(--transition-fast);
}

.mega__link:hover,
.mega__link:focus-visible{background:var(--color-pale);color:var(--color-accent)}

.mega__icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin-top:2px;border-radius:var(--radius-sm);background:var(--color-accent-pale);color:var(--color-accent)}
.mega__icon .icon{width:16px;height:16px}
.mega__text{min-width:0}
.mega__label{display:block;font-size:14px;font-weight:600;line-height:1.35}
.mega__desc{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--color-muted)}
.mega__arrow{align-self:center;font-size:14px;color:var(--color-accent);opacity:0;transition:opacity var(--transition-fast),transform var(--transition-fast)}
.mega__link:hover .mega__arrow,
.mega__link:focus-visible .mega__arrow{opacity:1;transform:translateX(2px)}

.mega__feature{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:start;
  padding:16px 18px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-pale);
}

.mega__feature-title{margin:0;font-size:15px;font-weight:600;line-height:1.35;color:var(--color-heading)}
.mega__feature-note{margin:0;font-size:12px;line-height:1.5;color:var(--color-muted)}
.mega__feature .btn{align-self:flex-start;min-height:40px;padding:8px 16px;font-size:13px}
.mega__feature-art{color:var(--color-accent);opacity:.85}

.mega__back{display:none}
.mega__all{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:600;text-decoration:none}

/* ----------------------------------------------------- Quick actions -- */
/* Two entries, always visible, never more: the pump selection and a way to
   talk to HOBER. Desktop keeps them at the middle of the right edge, compact
   and clear of the text column; a phone gets them as a bar along the bottom,
   inside the safe area, so a thumb can reach them. */

.quick-actions{position:fixed;top:50%;right:0;z-index:55;transform:translateY(-50%)}
.quick-actions__rail{display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--color-line);border-right:0;border-radius:var(--radius-md) 0 0 var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-card)}

.quick-action{
  display:flex;
  align-items:center;
  gap:12px;
  width:216px;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  color:#fff;
  text-decoration:none;
  transition:background var(--transition-fast);
}

.quick-action__icon{display:flex;flex:none;align-items:center;justify-content:center;width:24px;height:24px}
.quick-action__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.quick-action__label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.quick-action__note{font-size:12px;line-height:1.3;opacity:.85}

.quick-action--select{background:var(--color-accent)}
.quick-action--select:hover{background:var(--color-accent-dark)}
.quick-action--whatsapp{background:#1f9d55}
.quick-action--whatsapp:hover{background:#178047}

.quick-action__label--short{display:none}

/* -------------------------------------------------------------- Mobile -- */
/* The row turns into the drawer below this width rather than squeezing: six
   sections and one action fit on one line above it, and below it they do not. */
@media (max-width:1100px){
  .site-header__inner{min-height:var(--header-height-compact);flex-wrap:nowrap}

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:10px 14px;
    border:1px solid var(--color-line);
    border-radius:var(--radius-sm);
    background:var(--color-surface);
    color:var(--color-navy);
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
  }

  /* The drawer starts under the row itself. --header-live is the row's measured
     height, written by nav.js, so the panel follows a header that is taller on
     one breakpoint than on another rather than being offset by a guess. */
  .site-header__inner > .site-nav{
    position:fixed;
    inset:var(--header-live,var(--header-height)) 0 0;
    z-index:65;
    display:none;
    overflow-y:auto;
    padding:12px var(--gutter) calc(var(--quickbar-height) + 32px);
    background:var(--color-surface);
  }

  body.nav-open .site-header__inner > .site-nav{display:block}
  body.nav-open{overflow:hidden}

  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-item{border-bottom:1px solid var(--color-line)}
  .nav-item__toggle,
  .nav-item > a{width:100%;justify-content:space-between;min-height:56px;padding:14px 4px;font-size:18px}

  /* A panel becomes a screen of its own: it covers the drawer and offers the
     way back, so the second level never reads as a list inside a list. */
  .mega{
    position:fixed;
    inset:var(--header-live,var(--header-height)) 0 0;
    width:auto;
    max-width:none;
    margin:0;
    padding:12px var(--gutter) calc(var(--quickbar-height) + 32px);
    overflow-y:auto;
    transform:none;
    box-shadow:none;
    border-bottom:0;
  }

  .nav-item.is-open .mega{transform:none}
  .mega__inner{grid-template-columns:minmax(0,1fr);gap:24px;max-width:none}
  .mega__intro{order:-1}
  .mega__back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    padding:10px 4px;
    border:0;
    background:transparent;
    color:var(--color-accent);
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
  }

  .mega__link{padding:10px 0;grid-template-columns:26px minmax(0,1fr)}
  .mega__label{font-size:15px}
  .mega__desc{font-size:13px}
  .mega__arrow{display:none}
  .mega__feature{margin-top:8px}

  .quick-actions{top:auto;right:0;bottom:0;left:0;transform:none}
  .quick-actions__rail{
    flex-direction:row;
    gap:0;
    padding:0;
    border:0;
    border-top:1px solid var(--color-line);
    border-radius:0;
    box-shadow:0 -6px 20px rgba(18,48,74,.08);
    padding-bottom:env(safe-area-inset-bottom,0);
  }

  .quick-action{flex:1 1 50%;justify-content:center;width:auto;min-height:var(--quickbar-height);border-radius:0;padding:10px 12px}
  .quick-action__label{font-size:13px;letter-spacing:.04em}
  .quick-action__note{display:none}
  .quick-action__label--long{display:none}
  .quick-action__label--short{display:inline}

  /* The bar sits over the bottom of the page, so the page keeps that space
     clear: a form's submit button and a cookie notice stay reachable. */
  body{padding-bottom:calc(var(--quickbar-height) + env(safe-area-inset-bottom,0px))}
}

@media (min-width:1101px){
  .menu-toggle{display:none}
  .quick-action__label--short{display:none}
  .quick-action__label--long{display:inline}
}