/* Put the browser's own defaults back, inside HBE markup only.
   ================================================================
   The static build is styled against a bare browser: index.html ships no CSS
   reset, so anything its stylesheet does not set — heading sizes and weights,
   paragraph and list margins, how an inline <svg> sits on the text baseline —
   comes from the browser's default stylesheet.

   Odoo's frontend bundle includes Bootstrap Reboot, which overrides exactly
   those defaults. Loading the HBE stylesheet after Bootstrap is not enough:
   for a property the HBE stylesheet never mentions, Bootstrap's value is the
   only author-level declaration and it wins by default. That is what made the
   section headings render at weight 500 instead of bold and lose ~33px of
   margin down the page.

   So this file restores the browser defaults for the properties Reboot claims,
   and loads BEFORE theme.css so the theme still wins wherever it has an
   opinion of its own.

   The selectors are deliberately bare, with no scoping class in front of them.
   A browser default carries element specificity, and anything emulating one
   has to as well. Scoping them to a .hbe-site wrapper was tried and it broke
   the hero: `.hbe-site figure` (0,1,1) outranks the theme's own `.hx-shot`
   (0,1,0), which put a 40px UA margin back onto figures the theme had
   deliberately zeroed and squeezed the hero stage 80px narrower. Bare
   selectors lose to every class rule in theme.css, which is exactly how the
   static build behaves against the real browser defaults.

   Nothing leaks to the rest of the database: this file lives in the
   hbe_website.assets_site bundle, which only HBE pages ever load.

   Only properties the HBE stylesheet leaves alone are listed. Nothing here
   sets line-height on headings, for instance, because theme.css does. */

/* --- headings ---
   Odoo's rule is:
     h1..h6, .h1..h6 { margin-top: 0; margin-bottom: .5rem;
                       font-family: "Inter Tight", ...; font-weight: 500;
                       line-height: 1.2; color: var(--heading-color); }
   Three of those — font-family, line-height and color — are properties a
   heading inherits from its parent by default, and the HBE stylesheet counts
   on that inheritance for every heading it does not style by class. Declaring
   them on the element breaks the inheritance, which is why headings came out
   in Inter Tight instead of the body's system stack and measured a few pixels
   narrower per line.

   line-height is `inherit`, not `normal`: no browser default stylesheet sets
   line-height on a heading, so a heading takes the body's — 1.62 here. Setting
   `normal` instead cost the footer column headings ~5px of height each.
   theme.css re-declares 1.08 for h1-h3 further down and wins, being later at
   the same specificity. */
h1 { font-size: 2em;    font-weight: bold; margin: 0.67em 0; }
h2 { font-size: 1.5em;  font-weight: bold; margin: 0.83em 0; }
h3 { font-size: 1.17em; font-weight: bold; margin: 1em 0; }
h4 { font-size: 1em;    font-weight: bold; margin: 1.33em 0; }
h5 { font-size: 0.83em; font-weight: bold; margin: 1.67em 0; }
h6 { font-size: 0.67em; font-weight: bold; margin: 2.33em 0; }
h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  color: inherit;
  line-height: inherit;
}

/* --- flow content: Reboot zeroes margin-top and uses margin-bottom 1rem --- */
p,
dl,
ol,
ul,
pre { margin: 1em 0; }
ol, ul { padding-left: 40px; }
ol ol, ul ul,
ol ul, ul ol { margin: 0; }
dd { margin-left: 40px; }
blockquote { margin: 1em 40px; }
figure { margin: 1em 40px; }

/* --- inline: Reboot sets b/strong to bolder, which is not the default --- */
b, strong { font-weight: bold; }
small { font-size: smaller; }

/* --- the one that quietly moves every icon ---
   Reboot sets `svg { vertical-align: middle }`. The page is built on inline
   SVG icons sitting on the text baseline, so this shifts them all. */
svg { vertical-align: baseline; }

/* --- rules and tables --- */
hr {
  margin: 0.5em auto;
  border: 1px inset;
  color: inherit;
  background-color: initial;
  opacity: 1;
  height: initial;
}
table { border-collapse: separate; border-spacing: 2px; }
th { font-weight: bold; text-align: center; }
th, td { padding: 1px; }
/* caption-side lives on `table` in Reboot (`table{caption-side:bottom}`)
   and is inherited, so the caption itself has to declare it back: a
   direct declaration beats an inherited one whatever the order. Without
   it every spec table printed its title underneath the rows — the model
   name read as the last line of the table instead of its heading. Seven
   page stylesheets set this themselves and looked right; the other 42
   did not. */
caption { text-align: center; padding: 0; color: inherit; caption-side: top; }

/* --- form controls: Reboot makes them inherit the page font --- */
/* line-height too, not just margin. Reboot sets line-height:inherit on form
   controls, so the tab buttons picked up the body's 1.62 — 15px x 1.62 =
   24.3px against the browser default of `normal`. That made every tab strip
   62px tall instead of 56px and pushed the whole page below it down by 6px. */
button,
input,
optgroup,
select,
textarea { margin: 0; line-height: normal; }
label { display: inline; margin-bottom: 0; }
legend {
  float: none;
  width: auto;
  padding: 0 2px;
  margin-bottom: 0;
  font-size: initial;
  line-height: inherit;
}
fieldset { margin: 0 2px; padding: 0.35em 0.75em 0.625em; border: 2px groove; min-width: min-content; }

/* --- .row is the site's own class, not Bootstrap's grid ---------------
   The static build uses class="row" to mean "a flex row" — a card footer
   holding a price and a small View product pill, on switches.html and
   all-prime-surge.html. Bootstrap claims the same name for its grid and
   gives every child `width: 100%; flex-shrink: 0` plus gutter padding, and
   the row itself negative side margins. That stretched the pill to the full
   width of the card and wrapped it onto its own line under the price.

   Scoped to .hbe-site so Odoo's own chrome keeps a working Bootstrap grid;
   these declarations only give the site's markup back the plain flex row it
   was written against. Placed before the page stylesheets, so a page that
   has an opinion about its own .row still wins. */
.hbe-site .row { margin-left: 0; margin-right: 0; margin-top: 0; }
.hbe-site .row > * {
  flex-shrink: 1;
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}

/* --- mega menu above the sticky tab strip ------------------------------
   header.site is position:sticky with z-index:40, which makes it a stacking
   context: every z-index inside it, including the mega panel's 50, is
   resolved *within* that context and can never beat .ptabs-bar's 60 sitting
   outside it. So on a tabbed page the pinned tab strip drew straight through
   the open dropdown.

   Raising the header only while the menu is actually open leaves the normal
   order untouched - scrolled and not hovering, the tab strip still sits on
   top and still parks flush at the viewport edge. .open is the class the page
   script toggles; :hover and :focus-within cover keyboard and pointer before
   the script runs. */
.hbe-site header.site:has(.has-mega:hover),
.hbe-site header.site:has(.has-mega:focus-within),
.hbe-site header.site:has(.has-mega.open) {
  z-index: 70;
}

/* --- mobile navigation panel -------------------------------------------
   Below 1010px the page's own CSS hides nav.main and shows .menu-toggle,
   but nothing ever wired the two together: the button exists on 70 pages
   and has no handler in the static build either, so a phone could see the
   site and not move around it.

   Everything here is inside that same 1010px query, so the desktop header
   is untouched. It re-uses the existing markup and the page's own tokens
   rather than introducing a second visual language: the section labels are
   the .has-mega triggers already in the header, and an opened section shows
   the .mega panel the desktop menu already carries, laid out in one column
   instead of floating. */
@media (max-width: 1010px) {
  .hbe-site header.site nav.main.is-open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 10px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
  }

  .hbe-site header.site nav.main.is-open > a,
  .hbe-site header.site nav.main.is-open > .has-mega { display: block; }

  .hbe-site header.site nav.main.is-open > a,
  .hbe-site header.site nav.main.is-open > .has-mega > a {
    display: block;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft, var(--line));
  }

  /* the desktop panel, brought inline and closed until its label is tapped */
  .hbe-site header.site nav.main.is-open .mega {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    margin: 0;
    padding: 4px 0 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface, var(--bg));
  }
  .hbe-site header.site nav.main.is-open .has-mega.is-expanded > .mega { display: block; }

  /* one column on a phone, and drop the desktop-only art rails */
  .hbe-site header.site nav.main.is-open .mega .mega-grid {
    display: block;
    padding: 0;
  }
  .hbe-site header.site nav.main.is-open .mega .mm-rail,
  .hbe-site header.site nav.main.is-open .mega .promo { display: none; }
  .hbe-site header.site nav.main.is-open .mega .col a,
  .hbe-site header.site nav.main.is-open .mega .mm-item,
  .hbe-site header.site nav.main.is-open .mega .col > h4 {
    padding-left: 30px;
    padding-right: 18px;
  }

  /* the header already ships an <svg class="caret"> in each trigger; turn
     that one over rather than drawing a second arrow of my own */
  .hbe-site header.site nav.main.is-open > .has-mega.is-expanded > a .caret {
    transform: rotate(180deg);
  }
}

/* --- the homepage headline on a narrow phone ---------------------------
   "Noise" ran off the edge on Android but not on iPhone, and the font stack
   is why: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
   "Times New Roman", Georgia, serif. iOS has Palatino, so an iPhone gets the
   narrow face the design was drawn around. Android has none of them and falls
   through to generic serif - Noto Serif - which sets the same words wider.
   .hero.mag h1 is clamp(40px, 4.6vw, 66px), so the floor stays at 40px however
   narrow the screen is, and .hl-line is white-space: nowrap, so the line
   cannot break: the extra width had nowhere to go and was clipped away by
   .hbe-site's overflow-x: clip.

   Letting it wrap did stop the clipping, but it split the headline onto a
   third line and that is not the design. So the line stays unbreakable and
   the type is sized to the widest fallback instead: 8.6vw puts "Without the
   Noise" at about 238px inside 308px of room on a 360px phone, which leaves
   Noto Serif real headroom rather than the single pixel it had before.
   min() caps it at the original 40px, so from 465px upward - every tablet and
   desktop - the value is exactly what it always was. */
@media (max-width: 480px) {
  .hbe-site .hero.mag h1 { font-size: min(40px, 8.6vw); }
}

/* --- the hero eyebrow pill on a phone -----------------------------------
   The longest eyebrow in the catalogue is "5G Accessories · Installation
   Accessories" - 41 characters - and at the usual 15px it sets 459px wide
   against 308px of column on a 360px phone, so it broke onto a second line
   inside the pill.

   Measured against that worst case: the text runs about 30.6px wide per
   pixel of font-size, the pill adds 22px of padding, and the column is the
   viewport less 52px. 2.5vw stays inside that at every phone width - 8px at
   320, 9px at 360, 10.3px at 412 - so nowrap is safe rather than a new way
   to overflow. min() caps it at the original 15px, and the query stops at
   600px because from there the full string already fits unaided. */
@media (max-width: 600px) {
  /* The class is repeated deliberately. Some pages style this as
     ".phero .sec-eyebrow", which carries the same weight as a single
     ".hbe-site .sec-eyebrow" and, loading after this file, would win the tie
     and keep its own 12.5px - that is why gen-psu still overflowed while
     grip-clip scaled. Repeating the class outranks both without reaching for
     !important.

     2.4vw, not 2.5: measured against the real pill, the text runs 31.6px per
     pixel of font-size rather than the 30.6 estimated, which left the longest
     eyebrow 7px over the column at 320px. */
  .hbe-site .sec-eyebrow.sec-eyebrow {
    font-size: min(15px, 2.4vw);
    white-space: nowrap;
  }
}

/* The same pill above 600px. Only the .cpe-hero family needs it: measured at
   1280px, where the copy column is at its narrowest 656px, every other page
   clears by 70-270px, while the longest eyebrow wants 660px and loses by four.
   At 1440px it matches the column exactly - one line with nothing to spare, so
   any difference in font rendering tips it over, which is why it wrapped on a
   laptop and not here.

   22px to 21px is about two percent, invisible next to the heading, and it
   buys 30px of clearance. The vw term carries the value down through the
   middle widths where the column narrows faster than the viewport does, so
   nowrap never becomes a way to overflow instead. The .phero pages set this
   text at 12.5px and are left alone - scoping matters, since a min() written
   for the 22px family would have enlarged theirs. */
@media (min-width: 601px) {
  .hbe-site .cpe-hero .sec-eyebrow.sec-eyebrow {
    font-size: min(21px, 2.4vw);
    white-space: nowrap;
  }
}

/* The utility row on a phone.
   ==========================================================================
   It was designed for a logo and Contact Us. It has since gained an account
   button and a cart, and on a 360px screen the row runs to x=407 — 47px past
   the edge, with the Contact Us label sliced through. Measured on a Galaxy
   S10 viewport at 360x760 and reproduced on every page of the site.

   This file rather than theme.css: theme.css is the homepage's stylesheet,
   and every other page loads its own page-<name>.css instead, so a header fix
   left in theme.css reaches exactly one page. The header is on all of them.

   On a phone the envelope carries Contact Us and the word comes off. All
   three controls stay reachable, which is the part that matters — the
   alternative is dropping one. title and aria-label are untouched, so nothing
   changes for a screen reader, and the desktop header is not in this query. */
@media (max-width: 560px) {
  .hbe-site .util .wrap { gap: 10px; }
  .hbe-site .util-right { gap: 10px; min-width: 0; }
  .hbe-site .contact-us span { display: none; }
  .hbe-site .contact-us { gap: 0; flex: none; }
  .hbe-site .logo { min-width: 0; }
  .hbe-site .logo img { max-width: 132px; height: auto; }
}