/*
 * Skin the CMA top-navigation dropdowns.
 *
 * The legacy CMA opened these Bootstrap button-group menus on hover
 * (`data-hover="dropdown"` in topnav.jspf) via jQuery. LegacyNavMenu owns the
 * corresponding local state so the strict admin CSP never needs the legacy
 * third-party bundle; this stylesheet only renders Bootstrap's `.open` state.
 */
#main-nav .btn-group.open > .dropdown-menu {
  display: block;
}

/* The legacy footer binds menu-hover to the owning header as well as the
   panel. Bootstrap's `open` state carries that treatment for both hover and
   click-pinned menus in the replacement. */
#main-nav .btn-group.open > button.headerBtn {
  background-position: left -257px !important;
  color: #fff;
}

/* Legacy `.content-form` widths/heights are content-box declarations. */
input.content-form {
  box-sizing: content-box;
}

/*
 * Legacy positions the list nine pixels below the 34px button and its hover
 * plugin waits 500ms before closing. Extend the displayed menu's hit target
 * upward through the gap without moving the visible panel.
 */
#main-nav .btn-group > .dropdown-menu {
  /* React emits the button groups without the JSP's inline-formatting text
     nodes. Bootstrap consequently establishes their absolute containing box
     two pixels higher even though the header buttons themselves are aligned.
     `top:45px` preserves the source panel's observed y=154 boundary. */
  top: 45px;
  margin-top: 0;
}
#main-nav .btn-group > .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  width: 100%;
  height: 9px;
}


/*
 * The legacy CMA ran every `.chzn-select` through the Chosen jQuery plugin,
 * which replaced the native <select> with a light-blue rounded box carrying a
 * darker grey arrow square on the right (chosen.css `.chzn-single`). We don't
 * ship that JS, so this restyles the native <select> to read the same:
 *  - `.chzn-select`      — the edit page's Document Language / type dropdowns
 *  - `.doc-type-select`  — the create page's type selector (kept off `.chzn-select`
 *                          on purpose so Chosen-style JS could never hijack it).
 * `appearance:none` drops the browser's own arrow so our dark square + white
 * arrow (a right-anchored linear-gradient block + an inline SVG chevron) is the
 * only control shown — a faithful stand-in for Chosen's arrow sprite. The pale
 * blue (#d9ecf3) matches the light-blue form inputs on the same page.
 */
select.chzn-select,
select.doc-type-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #d9ecf3;
  /* white chevron over a dark-grey square anchored to the right edge */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E"),
    linear-gradient(#5a5a5a, #444444);
  background-repeat: no-repeat, no-repeat;
  background-position: right 11px center, right center;
  background-size: 10px 6px, 32px 100%;
  border: 1px solid #7ea8bb;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  height: 30px;
  padding: 4px 44px 4px 8px;
  color: #333333;
  font: 13px/20px arial, "Helvetica Neue", Helvetica, sans-serif;
  vertical-align: middle;
}

/*
 * Form controls do NOT inherit font-family, so the CMA's arial (set on body in
 * the legacy styles.css) never reached inputs/selects/buttons — they fell back
 * to the OS default (Helvetica Neue on macOS), reading subtly wrong against the
 * legacy arial. Re-assert arial on the CMA form controls (this sheet loads last).
 */
.content-form,
.content input,
.content select,
.content textarea,
.content button {
  font-family: arial, "Helvetica Neue", Helvetica, sans-serif;
}

/*
 * create-doc.jsp's publishing inputs predate a global border-box reset. Their
 * declared Bootstrap/content-form widths therefore exclude padding and border;
 * keeping border-box here shortened every visible date/time box and the wire
 * instructions field by 10–14px.
 */
#publishingOptions input.publishOptions {
  box-sizing: content-box;
}

/*
 * Button rows — horizontal, like legacy.
 *
 * The legacy `.submitBtn` skin sets `display:flex` on the button itself (to
 * centre its label over the sprite). `display:flex` is block-level, so every
 * row of buttons — the document lifecycle controls, the wizard step bar, and
 * the Save/Done/Cancel rows across the newsroom editor and its sub-screens —
 * stacked VERTICALLY down the left with the rest of the width left blank,
 * nothing like legacy's horizontal button rows. Overriding to `inline-flex`
 * keeps the label centring but makes the buttons inline-level so siblings flow
 * across and wrap, matching legacy. Loaded after styles.css, same specificity,
 * so this wins.
 */
button.submitBtn, a.submitBtn, input.submitBtn,
button.smsubmitBtn, a.smsubmitBtn, input.smsubmitBtn {
  display: inline-flex;
  vertical-align: middle;
  /* Native buttons centre their inline label. A flex replacement defaults to
     flex-start, which shifts the label to the left of the legacy sprite. */
  justify-content: center;
}

/* The document wizard step bar stays a horizontal row. */
nav[aria-label='Document steps'] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin-top: 8px;
}

/*
 * The document editor bottom bar (create-doc.jsp #update) — legacy STACKS these
 * buttons (Save Draft / Submit Publishing Request / Web Preview / Print Preview
 * / Close) in a narrow VERTICAL column of fixed-width `.submitBtn` sprites, not
 * a horizontal row. The global `.submitBtn { inline-flex }` above makes them
 * flow horizontally, so re-block them inside #update so they stack like legacy.
 */
#update.buttonRow {
  display: block;
  margin-top: 8px;
}
#update.buttonRow > form {
  display: block;
  margin: 0 0 5px;
}
#update.buttonRow > .submitBtn,
#update.buttonRow > form > .submitBtn {
  display: flex; /* block-level (not inline-flex) → one per line, 125px wide */
  /* create-doc.jsp writes `style="line-height:1"` on every lifecycle control.
     The long submit button already inherits the equivalent 14px line-height,
     but the other labels otherwise sit one pixel lower in Chromium. */
  line-height: 1;
  margin-bottom: 0;
}

/*
 * Dashboard fast-menu — preserve the legacy content-box measurements.
 *
 * The app's component helpers set border-box globally, while the verbatim
 * legacy stylesheet sized this panel before that reset existed. Without this
 * exception its 70px horizontal padding is taken out of the declared 1145px
 * width and the fourth tile wraps onto a third row.
 */
#fm_pre_text,
#fm_box,
#fm_box_text,
#fm_box .fm_btn a {
  box-sizing: content-box;
}

/* The dashed Tools/Links column divider is the right edge of a 220px legacy
   content box. Border-box moves that divider one pixel left. */
#main-nav .double-left {
  box-sizing: content-box;
}

/*
 * Skip link (WCAG SC 2.4.1 Bypass Blocks).
 *
 * `.visually-hidden` itself is NOT defined here — `apps/admin/src/app/globals.css`
 * already carries it (and its `.sr-only` twin) for the icon-only labels on the
 * embargo menu and newsroom screens. Only the focus-reveal half is new: the
 * legacy CMA had no skip link, so nothing ever needed a hidden element to come
 * back into view. Redefining the base rule here just to add the reveal would
 * put two spellings of the same utility in one app.
 *
 * The clip-rect technique in globals.css keeps the link in the accessibility
 * tree and in the focus order while taking it out of the visual layout;
 * `display:none` and `visibility:hidden` would remove it from both and defeat
 * the purpose. `position: static !important` here beats that rule whichever
 * order the bundled and linked sheets land in, and `margin: 0` undoes the
 * `-1px` it uses to collapse the hidden box — without it the revealed link is
 * clipped by a pixel on each side.
 *
 * No `z-index`: on focus the link is `position: static`, and z-index does not
 * apply to a static, non-flex, non-grid box. Nothing needs to be stacked over
 * anyway — the CMA chrome is in normal flow (the only `position: fixed` rules
 * in the legacy sheets are a side widget and the loading overlay), so the link
 * renders at the top of `#container` with nothing above it.
 */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static !important;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
}

.skip-link:focus {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  color: #17527d;
  border: 2px solid #17527d;
  font-size: 12px;
  text-decoration: underline;
}

/* The skip target itself must not paint a focus ring when it receives
   programmatic focus from the skip link — it is a container, not a control. */
#content:focus {
  outline: none;
}