/**
 * Drupal 11 adaptations for Jane Sharvina's style.css.
 *
 * style.css is carried over from bluemarine_modified byte-for-byte, so this
 * file holds every change the port required. Reviewing this file alone answers
 * "what did the port alter?".
 *
 * The big one is the menus. The live site's top navigation is the Nice Menus
 * contrib module, which has no Drupal 11 release. Its markup was
 *   <ul class="nice-menu nice-menu-down" id="nice-menu-1"><li class="menuparent">
 * and Drupal 11's core menu block emits
 *   <ul class="menu"><li class="menu-item menu-item--expanded">
 * so the ~100 lines of ul.nice-menu-down rules in style.css select nothing.
 * They are left in place there as the record of the original intent; the rules
 * below reproduce that intent against core's markup, reusing Jane's numbers
 * (0.3em item margins, 8em submenu width, 0.8em submenu text, the nav_grad
 * background, #369 / hover #00ad84).
 */

/* ---------------------------------------------------------------------------
 * Main navigation - #primary, formerly #nice-menu-1
 * ------------------------------------------------------------------------- */

/* Core wraps region content in <nav class="block block-menu">; strip the block
   chrome so the bar sits where the table cell puts it. */
#primary .block {
  padding: 0;
  margin: 0;
  border: 0;
}

/* The menu block's own <h2> title, which Nice Menus did not render. */
#primary .block > h2 {
  display: none;
}

/* The 1.3em is not a guess and is not redundant with #primary's own 1.3em: on
   production the <ul> IS #nice-menu-1, which style.css also sets to 1.3em, so the
   two compound to ~20px. Without this the navigation renders at 15.6px and is
   visibly smaller than live. */
#primary ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.3em;
}

/* nice_menus.css floated the items (and cleared them with ul.nice-menu:after).
   Reproduced rather than using inline-block, because inline-block adds a
   whitespace gap between items and the spacing would no longer match. */
#primary ul.menu::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Top level: horizontal. The 0.3em side margins are Jane's
   (ul.nice-menu-down li), the float and the lack of border likewise. */
#primary ul.menu > li {
  float: left;
  position: relative;
  margin-left: 0.3em;
  margin-right: 0.3em;
  border: 0;
  background: none;
}

/* padding from nice_menus_default.css: ul.nice-menu a { padding: 0.3em 5px } */
#primary ul.menu a {
  display: block;
  padding: 0.3em 5px;
}

#primary ul.menu > li > a {
  font: 100% Arial, Helvetica, sans-serif;
  font-weight: bold;
  /* colour comes from #primary a in style.css */
}

/* The rotated "UPDATED" badge. Absolute rather than the original's
   float-dependent relative offsets - see the note in page.html.twig. The
   coordinates are measured from production's rendered page: the badge's bounding
   box is 51x22 at x=607, y=17 in a 1280px viewport, and the 996px body is
   centred there, so its left edge is at x=142 - putting the badge 465px in. */
#header {
  position: relative;
}

/* The template gives the header table and each cell a 1px transparent border.
   Production behaves as though those borders collapse - its table measures 120px,
   exactly the logo's height - while separate borders here added 4px and pushed
   everything below the logo down. Measured: this recovers 2px of that 4px, taking
   the bar from y=122 to y=120 against production's 118. The residual 2px is
   somewhere else in the header and is not chased, because nothing is positioned
   off the header's height any more. */
#header table {
  border-collapse: collapse;
}

#primary .ef-updated-badge {
  position: absolute;
  left: 465px;
  /* 21px, not the measured 17px: the badge is placed relative to #header, whose
     top edge sits 4px above production's, so 17px would render it 4px high.
     Verified by re-measuring - x landed exactly on 607 either way. */
  top: 21px;
  margin: 0;
  transform: rotate(-10deg);
}

#primary .ef-updated-badge img {
  display: block;
  width: 50px;
  border: 0;
}

/* Submenus: hidden until hover, which is what Nice Menus' JS-free CSS did. */
#primary ul.menu ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 100;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  /* Jane's ul.nice-menu-down ul background. background-attachment:fixed in the
     original made the gradient line up with the body's copy of the same image;
     it is kept for that reason. */
  background-image: url(/sites/default/files/images/nav_grad.jpg);
  background-repeat: repeat-x;
  background-attachment: fixed;
}

#primary ul.menu > li:hover > ul,
#primary ul.menu > li:focus-within > ul {
  display: block;
}

#primary ul.menu ul li {
  display: block;
  float: none;
  clear: both;
  width: 8em; /* Jane's value; increase to fit longer submenu labels */
  margin: 0;
  border-top: 0;
  font-size: 0.8em;
  text-align: left;
}

#primary ul.menu ul li a {
  display: block;
  padding: 0.15em 0.4em;
}

/* Third level opens to the side, at the submenu's own width. */
#primary ul.menu ul ul {
  left: 9.5em; /* match the 8em width above plus padding, as in style.css */
  top: -1px;
  font-size: 1em; /* 0.8em is already inherited; do not compound it */
}

#primary ul.menu ul li:hover > ul,
#primary ul.menu ul li:focus-within > ul {
  display: block;
}

/* ---------------------------------------------------------------------------
 * Secondary menu bar - the pale blue strip under the header
 * ------------------------------------------------------------------------- */

/* style.css styles #secondary, the ul id that Drupal 7's
   theme('links__system_secondary_menu') was given explicitly. Core's region and
   menu block do not set that id, so the same rules are applied by descent. */
#secondary_menu .block {
  padding: 0;
  margin: 0;
  border: 0;
}

#secondary_menu .block > h2 {
  display: none;
}

/* padding-left is 40px, not 0, on purpose. Production's bar is a <ul
   id="secondary" class="links"> and nothing in style.css resets its padding, so
   it keeps the user-agent default padding-inline-start: 40px. Zeroing it moved
   every item in the bar 40px left - measured on all four labels (Blog, Products,
   Documentation, Sources), each exactly 40px off. Reproducing the inherited
   default is what makes the bar line up. */
#secondary_menu ul.menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 40px;
  font-size: 1em;
  /* Centred with flex rather than a line-height or a negative offset. Both of
     those depend on where the line box happens to start, which is exactly what
     went wrong twice: the inherited -9px put the labels above the bar, and a
     22px line-height left them 3px below its centre because the region wrapper
     starts lower than the bar's content edge. align-items resolves against the
     bar's own height, so it cannot drift. */
  display: flex;
  align-items: center;
  height: 22px;
}

/* NOT reproducing style.css's `#secondary li { position: relative; bottom: 9px }`.
 *
 * That -9px only lands correctly on production because the <ul> there also
 * carries the user-agent's default margin-block: 1em (12px at this font size),
 * which pushes it down first - the two together net to +3px. This markup sets
 * margin: 0 on the ul, so the -9px lifted the labels clean out of the bar: they
 * straddled the top border with the pale fill empty underneath, which is the
 * "blue bar looks bad" Andrey reported on 2026-07-27. Centring on the bar's own
 * height gives production's appearance without depending on a user-agent margin
 * cancelling a negative offset. */
#secondary_menu ul.menu li {
  list-style: none;
  padding-left: 50px;
  font-size: 1.1em;
  white-space: nowrap;
  line-height: 1;
  /* A 2px optical correction, measured, not guessed. Flex centring puts the
     glyphs 8px below the fill's top edge and 5px above its bottom; production
     has them at 6 and 7. The residual is font metrics - half-leading and the gap
     between the ascent and the cap height - and it does not move with
     line-height, so it is corrected directly. Verified after: 6 above, 7 below,
     matching production exactly. */
  position: relative;
  top: -2px;
}

/* :link ONLY - deliberately not :visited.
 *
 * style.css's rule is `#secondary a:link, .site-name a:visited { color: #666 }`:
 * the :visited half of that selector belongs to .site-name, not to the bar. So a
 * bar link that has been visited falls through to the global
 * `a:visited { color: #007f87 }` and renders teal. Every link in this bar points
 * at blog / wiki / git / products, so in practice they are all visited and the
 * bar reads teal, which is what Andrey measured in ImageJ: 0,127,135.
 *
 * Setting :visited to #666 here made the bar grey and was wrong. Note this is
 * invisible in a headless screenshot, where nothing is visited and both render
 * #666 - it only shows in a browser with history. */
#secondary_menu ul.menu a:link {
  color: #666;
}

#secondary_menu ul.menu a:hover {
  color: #00ad84;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Search box
 * ------------------------------------------------------------------------- */

/* Position: anchored to the bar, not to the page.
 *
 * style.css puts the box at `#search { position: relative; top: 120px;
 * left: 780px }`, i.e. measured from the top-left of the document. That works on
 * production only because its header happens to be exactly 118px tall; this
 * theme's is a couple of pixels taller, so the box protruded above the bar. The
 * markup now nests #search inside #secondary_menu (which style.css already makes
 * position: relative) and it is placed against the bar's own box.
 *
 * right: 17px is measured from production: the bar's right edge is at x=1137 and
 * the Search button ends at 1120. Flex centring rather than a top offset, so the
 * 22px bar centres it whatever the control heights turn out to be. This also
 * neutralises style.css's `float: left` on the two fields - floats do not apply
 * to flex items - which is what previously kept them on the bar's text baseline. */
#secondary_menu #search {
  position: absolute;
  right: 17px;
  top: 0;
  height: 22px;
  width: auto;
  display: flex;
  align-items: center;
  z-index: 10;
  overflow: visible;
}

#secondary_menu #search form {
  display: flex;
  align-items: center;
}

/* The rest of the search box needs NO rules at all, and two that were here have
 * been removed. Both were added on the assumption that starterkit_theme's component
 * CSS was interfering; it is not - form.css and button.css only ever select
 * .form-item and .button, never a bare <input>. The form carries Jane's
 * .form-text / .form-submit classes and style.css sizes it exactly as on
 * production.
 *
 * 1. box-sizing: content-box. This was the actual cause of the misalignment
 *    Andrey reported on 2026-07-27. Chromium's user-agent stylesheet gives text
 *    inputs content-box but submit buttons border-box, and style.css relies on
 *    that difference: the field is height:18px + 2px border = 20px, and the
 *    button is height:20px INCLUDING its border = 20px. Forcing both to
 *    content-box made the button 22px, so it sat 2px below the field.
 *
 * 2. position: relative; top: 2px. style.css does carry that nudge, but on the
 *    selector #edit-submit - the id Drupal gives the *generated* search form's
 *    button. The hand-written header box has no such id, so the rule never
 *    applies on production either. */

/* One rule IS needed, for the button's width. style.css tries to set the font
 * with `font: "Verdana", Arial, Helvetica, sans-serif`, which is an invalid
 * shorthand (no size) and is dropped by every browser - so on production the
 * button keeps the user-agent's control font. This theme loads core/normalize,
 * whose `button, input { font-family: inherit; font-size: 100% }` does what the
 * broken shorthand meant to, and the button came out 50px wide against
 * production's 54px. `revert` puts the user-agent value back for these two
 * fields only. The text field is unaffected either way because style.css gives
 * it an explicit width:130px, which is why only the button drifted. */
#search .form-submit,
#search .form-text {
  font: revert;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */

/* style.css already makes #footer a centred 9px grey strip. The copyright notice
 * and the account menu run together on ONE line - Andrey, 2026-07-27: "Log in in
 * the footer - OK, but I would rather add it inline, not on the next line." Both
 * blocks and everything inside them are therefore inline, so they flow as a
 * single centred sentence instead of stacking. */
#footer .block,
#footer .region-footer > *,
#footer .ef-footer {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
}

#footer .block > h2 {
  display: none;
}

#footer ul.menu {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer ul.menu li {
  display: inline;
  margin-left: 0.9em;
}

/* ---------------------------------------------------------------------------
 * Regions and layout
 * ------------------------------------------------------------------------- */

/* Drupal 7 Bluemarine and Drupal 11 both name these region classes
   .region-sidebar-first / .region-sidebar-second, so style.css's negative
   margin columns work unchanged. The one thing missing is the clearfix that
   D7's template had as a class on .layout-columns. */
.layout-columns.clearfix::after,
#header.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* starterkit_theme has no opinion about <table> borders, but node bodies
   imported from the old site rely on the D7 default of no collapsed borders. */
#main .inner table {
  border-collapse: separate;
}

/* ---------------------------------------------------------------------------
 * Things the old theme got from Drupal 7 core CSS
 * ------------------------------------------------------------------------- */

/* D7's system.base.css hid these; Drupal 11 leaves it to the theme. */
.element-invisible,
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}

/* The skip-link target in page.html.twig must not take up space. */
#main-content {
  display: block;
  height: 0;
  overflow: hidden;
}