/* ==========================================================================
   salient-skin-overrides-v2.css
   Custom CSS overrides for the Azure_Blue26 skin.

   Add this file via: Skin editor > Layout > User Assets > Add Asset
   It loads after the generated layout.css, so plain (non-!important)
   overrides win as long as the selectors match Adobe's specificity.

   Do NOT edit /template/<skin>/layout.css in the output folder --
   RoboHelp regenerates that file on every publish.

   IMPORTANT: CSS comments do NOT nest. Never put a slash-star sequence
   inside an explanatory comment block -- the first star-slash after it
   closes the whole comment and the CSS that follows is silently discarded.
   All code samples below are therefore written without inline comments.
   ========================================================================== */


/* --------------------------------------------------------------------------
   FIX 1: stray 2px vertical scrollbar on the header title

   Adobe's layout.css sets, for body.media-landscape div.header h1.title:
       height 1.1em (33px at font-size 1.875em), line-height 100%,
       overflow auto.

   The title's inline line box renders 35px tall (the font's ascent plus
   descent exceed line-height 100%), so content overflows the 33px box by
   2px and overflow auto draws a scrollbar.

   The header title is a single line and never needs to scroll, so
   overflow visible is the correct value. Applied to all three media
   classes for consistency -- only .media-landscape has the fixed height
   today, but this keeps the rule from reappearing if Adobe adds one.
   -------------------------------------------------------------------------- */

body.media-mobile div.header h1.title,
body.media-landscape div.header h1.title,
body.media-desktop div.header h1.title {
    overflow: visible;
}

/* Belt-and-braces: give the box enough room for the line box so nothing
   overflows in the first place. 1.15em is the measured minimum; 1.25em
   leaves headroom for font-fallback differences across platforms. */

body.media-landscape div.header h1.title {
    height: 1.25em;
}


/* --------------------------------------------------------------------------
   FIX 2: remove the white function bar above the topic

   Adobe's layout.css sets, for body.media-landscape div.topic
   div.functionholder and the media-desktop equivalent:
       display block, height 4em (64px) / 4.3em, a 0.1em #e6e6e6 bottom
       border, padding-top 1em, padding-right 2em, transparent background.

   div.functionholder is the strip between the blue header and the topic
   iframe. In this skin it holds only the two custom buttons (Remove
   Highlight and Print) plus an empty left-hand button group, so the whole
   strip is 64px of empty white with a hairline bottom border.

   Setting display none collapses it. The sibling iframe.topic is sized
   relative to div.topic, which is absolutely positioned, so the iframe
   does not need a height adjustment. On mobile, iframe.topic sets only
   left and right margins (no height calc), so there is no gap there
   either.

   NOTE: this also removes the Remove Highlight and Print buttons, since
   they are the only contents of the bar. Delete this block if you need
   them back.

   Applied to mobile as well. There is exactly one div.functionholder in
   this layout, and on mobile it contains only the two custom buttons:
   the browse-sequence arrows nested inside it are gated on
   KEY_SCREEN_DESKTOP, so they never render at mobile width. Mobile
   navigation lives in div.functionbar, div.mobilespecialfunctions and
   div.brs-holder, which are separate elements and are untouched here.
   -------------------------------------------------------------------------- */

body.media-mobile div.topic div.functionholder,
body.media-landscape div.topic div.functionholder,
body.media-desktop div.topic div.functionholder {
    display: none;
}