/**
 * D11-specific fixes for the jQuery UI modal dialog that hosts the ported forms.
 * The old site used colorbox; here core uses jQuery UI dialog, whose claro theme
 * leaks a couple of styles that all.css (written for the D7 markup) doesn't
 * neutralise. Keep these overrides OUT of all.css.
 *
 * (The forms themselves are now Form API forms with D7 markup — form-type-radios,
 * form-radios, form-text — so all.css styles them directly; no per-field hacks.)
 */

/* Title came out 56px (jquery.ui base title inherits a 2em size); all.css sets
 * the titlebar to 28px — pin the title itself to match. */
.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
  font-size: 28px;
  line-height: 1.2;
}

/* Claro's jQuery UI theme.css sets `.ui-widget { font-family: Arial }`,
 * overriding the theme's Open Sans inside the dialog. Restore Open Sans. */
.ui-dialog,
.ui-dialog .ui-widget,
.ui-dialog input,
.ui-dialog select,
.ui-dialog textarea,
.ui-dialog button {
  font-family: 'Open Sans', sans-serif;
}

/* Backdrop: all.css sets .ui-widget-overlay { background: rgba(0,0,0,.5) }, but
 * claro's theme also applies opacity:0.3 on top, so the dim came out far too
 * light (0.5 alpha × 0.3 opacity). Drop the extra opacity to get the D7 dim. */
.ui-widget-overlay {
  opacity: 1;
}

/* .element-invisible: D7 core's visually-hidden class (used e.g. in the news
 * read-more link's hidden title suffix "…о <title>"). The full D7 hide rule
 * (position:absolute; clip; overflow:hidden; 1px) did NOT make it into all.css —
 * only a stray `.element-invisible{width:1px}` did, so the text stayed visible.
 * Restore the D7 rule here (loads after all.css, wins the cascade). */
.element-invisible {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
}