/* ===========================================================================
   MEGA MENUS — shared by DocPivot and ToolsPivot
   ===========================================================================
   Moved out of docpivot.css when ToolsPivot's navbar took the same All PDF
   Tools and All Image Tools menus. docpivot.css also carries DocPivot-only
   overrides (nav colour, navbar gutters, brand tokens); loading the whole of
   it site-wide would have painted those onto ToolsPivot, so only the part both
   brands need lives here.

   Pairs with docpivot/megamenu.php, which renders the markup, and
   js/docpivot/megamenu.js, which drives it. All three load on both brands. */


/* THE FOUR BRAND TOKENS THIS FILE USES, DECLARED WHERE IT CAN SEE THEM.
 *
 * They come from docpivot.css's :root, which is loaded on /doc/* only — so on
 * ToolsPivot every `var(--dp-*)` here resolved to nothing and the declaration
 * was dropped: the open trigger lost its orange rule and the panel its border
 * and heading colour. Scoped to the menu's own elements rather than :root, so
 * nothing outside these panels inherits DocPivot's palette; identical values to
 * docpivot.css, so on /doc the two agree and neither has to win. */
.dp-mega-wrap,
.dp-mega-panel {
  --dp-orange: #fa4c10;
  --dp-grad-a: #fff7f3;
  --dp-border: #e8ded8;
  /* #1a202c, NOT DOCPIVOT'S #23201f.
     These panels hang in ToolsPivot's navbar next to the theme's own All Tools
     menu, and #23201f is DocPivot's body-text token — a different near-black in
     the same dropdown row as the theme's. Imperceptible alone, wrong when the
     two are open side by side. The panel is navigation chrome, so it takes the
     navbar's colour; DocPivot's token stays for DocPivot's own content.
     15.5:1 on white, so nothing is lost on contrast. */
  --dp-text: #1a202c;
}

#myNavbar .navbar-nav > li.dp-mega-wrap { position: static; }

/* METRICS COPIED FROM THE THEME'S OWN `> li > a`, NOT INVENTED.
 *
 * A <button> beside six <a>s has to measure the same or the bar looks broken,
 * and it did: the anchors are 65px tall and these were 44, so the three menu
 * labels floated 10px above their neighbours. The 65 is 3 + 19.5 + 20 + 22.5 —
 * and the 3 is a transparent top border the theme colours in to mark the
 * active item, which is why simply matching the padding was not enough.
 *
 * If the theme ever restyles that anchor these four values have to follow. It
 * is the one place this file cannot inherit, because a button is not an a. */
.dp-mega-toggle {
  /* A <button> keeps the UA stylesheet's grey face and 3D border on Safari
     even once background and border are cleared, so the appearance reset has
     to be explicit. Folded in from a duplicate that used to live in
     docpivot.css under an ID selector — it out-specified this rule, and when
     the two drifted the stale one won. */
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;              /* floor for touch; the padding exceeds it */
  padding: 19.5px 15px 22.5px;
  border: 0;
  border-top: 3px solid transparent;
  background: none;
  font: inherit;
  /* Not `inherit`: a <button> defaults to buttontext (#333) and inheriting
     from the <li> lands on the body colour, so these three labels came out
     noticeably darker than the anchors beside them. #808080 is what the
     theme's nav anchors actually compute to. Belongs with the padding above
     as the small set of values that must follow the theme if it is restyled. */
  color: #808080;
  cursor: pointer;
  line-height: 20px;
}
.dp-mega-toggle:hover,
.dp-mega-toggle[aria-expanded="true"] { color: var(--dp-orange); }
/* Same active marker the anchors get, so an open menu is flagged the way a
   current page is. */
.dp-mega-toggle[aria-expanded="true"] { border-top-color: var(--dp-orange); }
.dp-mega-toggle:focus-visible { outline: 2px solid var(--dp-orange); outline-offset: -2px; }

/* The caret is the theme's `.caret`, inherited rather than redrawn, so these
   triggers carry the identical affordance to the All Tools dropdown next to
   them. Nothing to style here beyond letting it take the button's colour. */
.dp-mega-toggle .caret { border-top-color: currentColor; }

/* FULL-WIDTH PANEL, ANCHORED TO THE BAR, NOT THE BUTTON.
   Six columns cannot hang off a button without running out of viewport on the
   right-hand items, which is why the <li> above is position: static. */
.dp-mega-panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 1000;
  background: #fff;
  border-top: 1px solid var(--dp-border);
  box-shadow: 0 18px 40px rgba(35, 32, 31, .13);
  padding: 26px 0 30px;
  /* A 1024x768 laptop is not a big screen. Once the six columns wrap to two
     rows the panel is ~911px tall, and its bottom row sat below the fold with
     no indication it was there. Capped to what is actually on screen, and it
     scrolls inside itself rather than pushing the page around.
     (This is the page navigation, not the tool action panel — that one still
     must never scroll.) */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dp-mega-panel[hidden] { display: none; }

/* Entrance only. Exit is instant because the panel is dismissed to get it out
   of the way, and animating that just delays the thing the user asked for. */
.dp-mega-panel.is-open { animation: dp-mega-in .18s ease-out; }
@keyframes dp-mega-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-mega-panel.is-open { animation: none; }
}

.dp-mega-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 26px;
  align-items: flex-start;
}

/* The navbar centres its links with `#myNavbar .navbar-nav > li a`, an ID
   selector that beats anything class-based inside the panel. Only visible on
   names long enough to wrap: "Remove Metadata from Photo" came out as two
   centred lines in an otherwise left-aligned column. Matched at the same
   weight rather than reached for !important, which would have to be undone by
   the next person who needs to align anything in here. */
#myNavbar .dp-mega-panel .dp-mega-head,
#myNavbar .dp-mega-panel .dp-mega-item { text-align: left; }

/* THE ONE !important IN THIS FILE, AND IT IS ANSWERING ANOTHER ONE.
 *
 * `.navigation_container .navbar-right li a { color: gray !important }` in the
 * shared theme was painting every tool link in every panel #808080 — 3.95:1 on
 * white, under the 4.5:1 floor. These are 15px navigation links, not captions.
 *
 * An ID selector does not beat !important; only !important does. Scoped as
 * tightly as possible so it can never reach a link outside these panels. */
#myNavbar .dp-mega-panel .dp-mega-item { color: var(--dp-text) !important; }
/* --dp-orange (#fa4c10) on the pale hover tint is only 3.21:1. The hover state
   is where a row is being read most carefully, so it cannot be the one state
   that fails: #c2410c is the same hue two steps darker, already used as the
   theme's base link colour, and measures 4.94:1 on that tint. */
#myNavbar .dp-mega-panel .dp-mega-item:hover,
#myNavbar .dp-mega-panel .dp-mega-item:focus-visible { color: #c2410c !important; }
.dp-mega-col { flex: 1 1 0; min-width: 0; }
.dp-mega-group + .dp-mega-group { margin-top: 22px; }

/* The column headings carry the whole structure of a panel that is otherwise
   fifty near-identical links, so they are sized and weighted to be read first:
   13px at 800 in the near-black text colour, not 12px at 700 in muted grey.
   --dp-muted (#7b716c) is 4.3:1 on white, under AA for text this size; the
   text token is 14.9:1 and reads as a heading rather than as a disabled row. */
.dp-mega-head {
  display: block;                /* it is a <span>; see brand.php for why */
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--dp-text);
}
.dp-mega-list { list-style: none; margin: 0; padding: 0; }

.dp-mega-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;              /* pointer rows; the mobile rule below lifts
                                    these to 44px where thumbs are involved */
  padding: 5px 8px;
  margin-left: -8px;
  border-radius: 8px;
  color: var(--dp-text);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
}
.dp-mega-item:hover,
.dp-mega-item:focus-visible {
  background: var(--dp-grad-a);
  color: #c2410c;                /* not --dp-orange: 3.21:1 on this tint */
  text-decoration: none;
}
.dp-mega-item:focus-visible { outline: 2px solid var(--dp-orange); outline-offset: -2px; }

.dp-mega-ico {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--dp-orange);
  font-size: 15px;
}
.dp-mega-ico img { width: 22px; height: 22px; object-fit: contain; }
.dp-mega-name { min-width: 0; }

/* THE TILE. ONE SHAPE FOR EVERY ROW IN EVERY MENU.
 *
 * Two things can sit inside it and nothing else: the target format of a
 * conversion ("JPG", "PDF"), or a white glyph for an operation (merge, lock,
 * crop). Same 22px rounded square either way, so a column reads as one list
 * rather than as a pile of unrelated marks.
 *
 * The format text exists because FontAwesome has exactly one file-image glyph
 * — JPG, PNG, WebP, AVIF, GIF, BMP, TIFF, SVG, HEIC, ICO and JFIF all drew the
 * same picture in a menu whose whole purpose is telling them apart.
 *
 * Colours differ between neighbours in a column. They are not a code anyone
 * has to learn and the row's text says the format regardless; the tile is a
 * scanning aid, not the label. */
.dp-fmt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 5px;
  background: #8b8b8b;
  color: #fff;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  font-style: normal;
}
.dp-fmt-pdf  { background: #e5252a; }
.dp-fmt-pdfa { background: #b3181c; font-size: 6px; letter-spacing: -.04em; }
.dp-fmt-word { background: #2b579a; }
.dp-fmt-excel{ background: #217346; }
/* #d24726 measured 4.50 — right on the AA line, which is not a pass worth
   defending. Darkened a step. */
.dp-fmt-powerpoint { background: #b8391c; }
/* Darkened from #e8a33d: white on that amber was 2.16:1, and the tile text is
   7.5px bold, which is exactly where contrast matters most. */
.dp-fmt-jpg  { background: #9a6410; }
.dp-fmt-png  { background: #7b5ea7; }
/* Darkened from #1a9c8f, which was 3.39:1 against white. */
.dp-fmt-webp { background: #0e7268; }
.dp-fmt-avif { background: #c2417a; }
.dp-fmt-gif  { background: #5a8f3d; }
.dp-fmt-bmp  { background: #4a6fa5; }
.dp-fmt-tiff { background: #96682e; }
.dp-fmt-svg  { background: #d98324; }
.dp-fmt-heic { background: #3f7f8c; }
.dp-fmt-ico  { background: #6b6f8a; }
.dp-fmt-jfif { background: #a3743a; }
.dp-fmt-epub { background: #86633f; }
.dp-fmt-odt  { background: #3d6ea8; }
.dp-fmt-text { background: #6f6f6f; }
.dp-fmt-base64 { background: #4c5b6b; font-size: 6px; }

/* Operations. One neutral tile for all of them, so "merge" and "lock" read as
   the same kind of thing while the formats keep their own colours. The glyph
   is white and small enough to sit inside the same square the labels use. */
.dp-fmt-op { background: #55606e; }
.dp-fmt-op .fa { font-size: 11px; line-height: 1; color: #fff; }


/* SIX COLUMNS DO NOT FIT A LAPTOP. Wrap to rows rather than shrink to
   unreadable, and let the image menu take two rows of three. */
@media (max-width: 1180px) {
  .dp-mega-inner { flex-wrap: wrap; }
  .dp-mega-col { flex: 1 1 30%; min-width: 200px; }
}

/* Below the navbar's own collapse point the panel is not a panel any more —
   it is a section of the open mobile menu, so it goes back in the flow.
 *
 * 767px, BECAUSE THAT IS WHERE THE THEME ACTUALLY COLLAPSES.
 *
 * This said 991px, picked by eye. The theme is Bootstrap 3 and collapses at
 * `screen and (max-width: 767px)`, so from 768 to 991 — every tablet in
 * portrait — the navbar was still a horizontal bar while these panels had
 * already switched to the stacked mobile layout, rendering their rows down the
 * middle of the page at x=382 instead of in a dropdown. Two breakpoints for
 * one piece of furniture is always this bug; there is only one now. */
@media (max-width: 767px) {
  #myNavbar .navbar-nav > li.dp-mega-wrap { position: relative; }

  /* THE COLLAPSED NAVBAR'S OWN SCROLL BOX, WHILE ONE OF THESE IS OPEN.
   *
   * Bootstrap 3 caps an open collapsed navbar at max-height: 340px with
   * overflow-y: auto — fine for six links, but a mega panel is ~2,700px, so it
   * scrolled inside a 339px window: a nested scroller inside the page's own.
   *
   * `:has()` rather than a blanket rule, so this relaxes only while one of MY
   * panels is open. The theme's All Tools menu keeps the cap it has always had
   * — adding these two menus is not licence to restyle the one already there.
   * Browsers without :has() keep the 340px box: degraded, not broken. */
  #myNavbar.navbar-collapse:has(.dp-mega-panel:not([hidden])) {
    max-height: calc(100vh - 96px);
  }
  /* THE COLLAPSED MENU INDENTS ITS LINKS 58px, AND THESE HAVE TO MATCH.
     The desktop padding above (19.5/15/22.5) is for a horizontal bar; carried
     into the stacked menu it put the labels at x=-15, i.e. clipped off the
     left edge, while every anchor beside them started at x=28. Same values the
     theme gives `.navbar-nav > li > a` at this breakpoint.
     Caret stays next to the label rather than pushed to the far edge, which is
     how the All Tools trigger renders here. */
  .dp-mega-toggle {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    padding: 11px 15px 11px 58px;
    border-top: 0;
  }
  .dp-mega-panel {
    position: static;
    box-shadow: none;
    border-top: 0;
    padding: 4px 0 14px;
    animation: none;
    /* In the stacked menu the panel is part of the page's own scroll; a second
       scrolling region nested inside the first is the `scroll-behavior`
       anti-pattern. The desktop cap above is undone here. */
    max-height: none;
    overflow-y: visible;
  }
  /* The panel's contents line up under the toggle that opened them, on the
     same 58px the collapsed menu indents everything else. Left at the old 4px
     gutter they started at x=-26 — off the left edge, because the collapsed
     nav itself sits at -30. */
  .dp-mega-inner { display: block; padding: 0 15px 0 58px; }
  .dp-mega-col { min-width: 0; }
  .dp-mega-group + .dp-mega-group { margin-top: 16px; }
  /* The desktop row bleeds 8px left so its hover highlight sits proud of the
     column. There is no gutter to bleed into here, so it pushed every row
     past the right edge and put the whole page into horizontal scroll. */
  .dp-mega-item { min-height: 44px; font-size: 16px; margin-left: 0; }

  /* HOVER/TAP BACKGROUND, WHICH WAS HIDING THE LABEL.
   *
   * The base theme paints a strong red behind any nav link on hover. Its own
   * mobile block cancels that for `> li > a` and for `.mega-tool-item` — the
   * two kinds of row it knew about — but not for these, which did not exist
   * when it was written. So a tapped row went red while my rule set the text
   * orange on top of it: orange on red, and the label disappeared. On a
   * touchscreen :hover also sticks after the tap, so it stayed gone.
   *
   * Same values the theme gives its own mega rows, so the two menus highlight
   * identically. !important because the rule being answered is !important. */
  .navbar-inverse .navbar-nav .dp-mega-panel .dp-mega-item:hover,
  .navbar-inverse .navbar-nav .dp-mega-panel .dp-mega-item:focus,
  .navbar-inverse .navbar-nav .dp-mega-panel .dp-mega-item:active {
    background: #fff5f0 !important;
    color: #c2410c !important;
  }

  /* THE TRIGGER'S OWN OPEN/HOVER BAND.
   *
   * All Tools gets a full-width tint plus an orange rule above it when open;
   * mine only changed text colour, so two triggers in the same list responded
   * differently to the same gesture. Same declarations the theme gives
   * `.mega-open > a.mega-menu-trigger` — copied, not approximated — with the
   * text one step darker for contrast on that tint. */
  .navbar-inverse .navbar-nav > li.dp-mega-wrap > .dp-mega-toggle:hover,
  .navbar-inverse .navbar-nav > li.dp-mega-wrap > .dp-mega-toggle:focus,
  .navbar-inverse .navbar-nav > li.dp-mega-wrap > .dp-mega-toggle[aria-expanded="true"] {
    background: #fff5f0 !important;
    color: #c2410c !important;
  }
  /* The rule above the open row. Transparent at rest so the row does not move
     3px when it opens. */
  #myNavbar .navbar-nav > li.dp-mega-wrap > .dp-mega-toggle {
    border-top: 3px solid transparent;
  }
  #myNavbar .navbar-nav > li.dp-mega-wrap > .dp-mega-toggle[aria-expanded="true"] {
    border-top-color: var(--dp-orange);
  }
}