/* user-defined CSS */

.container-fluid {
  max-width: 100% !important;
}

/* Icons in the related-links panel.

   The badge means "this link takes you off the page you are reading". A topic
   in the same publication and a target outside it are the same thing to a
   reader in that respect, so both carry it; only a link that moves the reader
   within this page does not. The file is called external_link.svg, which is
   narrower than what it marks — a misleading name is not a reason to change
   what a reader sees. */
.related-links a {
  background: transparent url(resources/images/external_link.svg) center right no-repeat;
  padding-right: 22px;
}

/* ...so a link that keeps the reader on this page does not get one. Two kinds
   do: an in-page anchor, which the stylesheet can see for itself, and the
   panel's link to this topic, which it cannot — only the browser knows what
   page it is on, so `current-handler.js` marks that one `same-page` at run
   time and this rule is inert for it until the script has run.

   Note this is deliberately wider than `.related_link .current` below. A link
   to this topic is on this page wherever the reader has scrolled to, so it
   never wears the badge; but while they are partway down it stays live and
   clickable, because it takes them back to the top. Only `current` — pointing
   at exactly where they already are — is greyed out. */
.related-links a[href^="#"],
.related-links a.same-page {
  background: transparent;
}

/* A spreadsheet earns its own badge: it downloads rather than opens.

   Both halves are scoped to `.related-links`. The selector was previously
   `.related-links a[href$='.xls'], a[href$='.xlsx']`, whose second half is not
   scoped to anything: with `!important`, it put the Excel icon on every .xlsx
   link anywhere in the publication. Nothing rendered differently, because
   every .xlsx link in the content happens to be in a related-links panel, and
   the `!important` is no longer needed now the rule sits after the catch-all
   rather than before it. */
.related-links a[href$='.xls'],
.related-links a[href$='.xlsx'] {
  background: transparent url(resources/images/icon_excel.gif) center right no-repeat;
  padding-right: 22px;
}

.related-links {
  padding: 2px !important;
}

/* Suppress the target page's short description in the related-links panel.
   DITA emits the target's <shortdesc> as a <div class="desc"> beneath each
   link, so a link to a page that has a sub-title renders the sub-title
   underneath it — which in a narrow floating panel pushes the list out of
   shape and repeats text the link already carries in its `title` attribute.

   Consistent with the `.shortdesc` rule further down, which hides short
   descriptions on topic pages for the same reason: they are wanted on the home
   page and nowhere else. */
li.linklist div.desc {
  display: none;
}

/** suppress link to current page in related-links.
    The `current` class is applied at run time by resources/current-handler.js,
    so this rule has no effect until that script has run. */
.related_link .current {
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
  color: #999 !important;
  background: none !important;
}


/* hide web-help header bar in welcome page */
body#Welcome header.wh_header {
    display:none;
}

/* when a paragraph is inside a cell, we don't need to provide vertical padding */
/* commented out, since we should not need it */
/* .topic\/table .p {
  margin-top: 0;
  margin-bottom: 0;
} */

/** centre figures on the page */
figure {
  margin: auto;
  width: 90%;
}

/** formatting for the header block which will introduce a flag and country name */

/* Only a heading that carries the flag block is laid out as a flex row. The
   rule used to apply to every .title, and on a heading with no flag that did
   nothing useful and one thing harmful: flex turns each inline child into its
   own item, and an item's leading white space is dropped, so pub-10's
   "Gram 1<ph> - Pride of Le Havre</ph>" rendered as "Gram 1- Pride of Le Havre"
   (and a title whose ph starts with a space ran the two together). A heading
   without a flag is ordinary inline text again, where that space survives. */
.title:has(> .title-country) {
  display: flex;
  align-items: center;
}
.title-country {
  display: flex;
  margin-right: 12px;
  align-items: center;
  flex-direction: column;
  font-size: smaller;
}

/* put some whitespace between the sections. LM issue #581 */
.section {
  padding-bottom: 200px;
  border-top: 8px solid #448;
}

/* but not for the flag */
.section[id$="flag-section"] {
  padding-bottom: 0; 
  border-top: none;
}

/* hide the section title */
.section[id$="flag-section"] .sectiontitle {
  display: none;
}

.wh_footer_protection{
  text-align: center;
  padding: 1em;
  position:relative;
  bottom: 0;
  width: 100%;
  color: #000;
  background: none #bfebb9;
}

.wh_footer_protection span{
  font-family: Arial;
  font-size: 14px;
}

.wh_header_protection{
  background: #bfebb9 none;
  color: #000;
  text-align: center;
}

.wh_header_protection span{
  font-family: Arial;
  font-size: 14px;
}


/* hide the `short-desc` from topic pages, since we
  only want them on the home page */
.shortdesc {
  display: none;
}  

/* NOTE: `wh_tiles-container` and `wh_tiles-item` do not appear in the generated
   output under either Oxygen 2024 or 2026 - Oxygen emits `wh_tiles` and
   `wh_tile`. These rules are therefore inert. Left in place rather than deleted
   in case they are needed by the mockups; safe to remove. */

/* styling to make the `REGIONS` button twice the width of the others */
.wh_tiles-container {
  padding: 5% 15%;
  flex-direction: column;
  align-items: center;
}

@media only screen {
  .wh_tiles-item {
    display: flex;
    width: 100%;
    & > div {
      width: 50%;
    }
  }
}

@media only screen and (min-width: 985px) {
  .wh_tiles-item {
    flex-direction: row;
  }
}

@media only screen and (max-width: 985px) {
  .wh_tiles-item {
    flex-direction: column;
  }
}


/** this is instruction to make the `Regions` button full width.  It
    relies on DITA putting the filename prefix into the data-id attribute */
[data-id="PD_1"] {
  width: 100% !important;
}

/** background color of link boxes on home page */
.wh_tile {
  background-color: rgba(171, 199, 192, 0.419);
}

/** styling for global search text box */

#searchForm > div {
  width: 100%;
  min-width: 200px;
  max-width: 400px;
  padding-left: 8px;
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.wh_search_input {
  display:inline;
  margin:0;
  position:relative;
  background:none !important;
  border: none;
  padding: 0 0 !important;
}

/** other UI changes */

/* The Oxygen 2024 template added a `c-menu` class to the top menu via
   xslt/inc/customSearch.xsl, which forked an Oxygen template purely to add that
   one class. These rules now target Oxygen's own `wh_top_menu` class instead,
   so the XSLT fork is no longer needed. */
.wh_top_menu > ul {
  padding: 0 10px;
  display: flex;
  word-break: unset;
  justify-content: flex-end;
}

.c-nav-bar {
z-index: unset;
}

.wh_top_menu {
min-width: 710px;
text-align: start;
}

.c-full-width {
max-width: unset;
}

.wh_logo_and_publication_title {
width: max-content;
padding: 0 10px;
}

.fullWidthTable {
  display: block;
  width: 100%;
}

/** hide the sticky floating breadcrumb bar */
.breadcrumb-sticky {
  display: none;
}

/* ------------------------------------------- */


/* don't show section title anchro */
.permalink {
  display: none
}

/* make related pages show as a list of items */
.related-pages .xref {
  display: list-item
}

/* hide borders for image link table  */
.rich-collection .table-container table,  .rich-collection .table-container table td.entry {
  border: none;
}

/* show borders for tables */
.classlistbody .table .entry, .class .table .entry{ 
  border: 1px solid black !important;
  border-collapse: collapse;
}

/* text label for category image links
.xref .b {
  display:block;
  text-align: center;
  font-size: 2em;
} */

/* make table separators more prominent */
.table-separator {
  font-size: 1.5em;
}

/*
 * Table cell colours.
 *
 * !important is load-bearing here, not habit. Oxygen 28.1's main.css added
 *
 *     .simpletable>:not(caption)>*>*, .table>:not(caption)>*>* {
 *         background-color: var(--wh-primary-bg,#fff);
 *         color: var(--wh-primary-color,#000);
 *     }
 *
 * which scores (0,1,1) against these classes' (0,1,0). Every coloured cell in
 * every table rendered white under 28.1 while the HTML stayed correct and the
 * class was still on the element. No rule of this shape existed in Oxygen 26.
 *
 * Raising specificity instead (td.bkDarkGray and so on) would only tie, and
 * would need revisiting the next time Oxygen adds a descendant to that
 * selector. Verified by tests/publish/cascade.spec.js.
 */
.colorRed {
  color: #F00 !important;
  border-color: #000;
}

.colorPink {
  color: #F0F !important;
  border-color: #000;
}

.colorBlue {
  color: #00F !important;
  border-color: #000;
}

.colorGray {
  color: #777 !important;
  border-color: #000;
}

.colorOrange {
  color: #FC0 !important;
  border-color: #000;
}

.colorLightBlue {
  color: #0FF !important;
  border-color: #000;
}

/* Dark blue and dark brown. Both were in use in the content — Vanes & Cranes
   has had "This title is in blue" and "This title is in brown" since before the
   2026 template — but neither class was ever defined in any stylesheet, so both
   lines rendered in ordinary black. Chosen dark enough to be unmistakable
   against .colorBlue (#00F) rather than a second shade of the same colour. */
.colorDarkBlue {
  color: #008 !important;
  border-color: #000;
}

.colorDarkBrown {
  color: #630 !important;
  border-color: #000;
}

/*
 * The same colour classes, applied to a whole <row>.
 *
 * `outputclass="colorRed"` on a DITA <row> puts the class on the <tr>, and the
 * colour used to reach the cells by inheritance. Oxygen 28.1's main.css ended
 * that: its `.table>:not(caption)>*>*` rule sets `color` on every <td>
 * *directly*, and a directly-declared value always beats an inherited one.
 *
 * This is not the specificity fight the .bk* classes above have, and the
 * !important on the rules above does not help here — an important declaration
 * on the parent is still only inherited, and inheritance never competes with a
 * declaration that matches the element itself. The only fix is to name the
 * cells, which is what these rules do.
 *
 * The selector does not exist in the Oxygen 26 output at all, so row-level
 * colouring worked there and broke silently on the upgrade. Four rows in the
 * sample content use it (Phase_G, unit_anchors ×3).
 *
 * cascade.spec.js cannot catch this class of fault: it audits the element
 * carrying the class, and the <tr>'s own computed colour is correct — it is the
 * descendants that lose. Verified by eye on the Style Samples page, and tracked
 * as a coverage gap in issue #184.
 */
.colorRed > td, .colorRed > th { color: #F00 !important; }
.colorPink > td, .colorPink > th { color: #F0F !important; }
.colorBlue > td, .colorBlue > th { color: #00F !important; }
.colorGray > td, .colorGray > th { color: #777 !important; }
.colorOrange > td, .colorOrange > th { color: #FC0 !important; }
.colorLightBlue > td, .colorLightBlue > th { color: #0FF !important; }
.colorDarkBlue > td, .colorDarkBlue > th { color: #008 !important; }
.colorDarkBrown > td, .colorDarkBrown > th { color: #630 !important; }


/* No !important, unlike every .bk* class below it, so in a table cell this
   loses to Oxygen 28.1's main.css and renders white — the bug that was fixed
   for the others. Nothing in pub-5 uses it, so nothing exercises it; the Style
   Samples page demonstrates it in a paragraph for that reason. Issue #184. */
.placeholder {
  background-color: #FF0;
}

.bkLightGray {
  background-color: #CCC !important;    
}

.bkDarkGray {
  background-color: #999 !important;    
}

.bkYellow {
  background-color: #ffff00 !important;    
}

.bkBlue {
  background-color: #0000ff !important;    
}

.bkRed {
  background-color: #ff0000 !important;    
}

.bkGreen {
  background-color: #00ff00 !important;    
}

.bold {
  font-weight: 800
}

/* artificially support headings */
.h1, .h2 {
  font-size: 2em;
}

/* float the related link, if the screen is wide enough */
@media screen and (min-width: 692px) {
  /* pad the right-hand side of hte content, to make space for hte
  floating table of contents */
  .body {
      padding-right: 200px;
  }

  /* make the right-hand notes block float */
  .rh_notes {
      background-color: #EFEFFA; 
      position:fixed;
      width: 200px;
      right:0;
      top:200px;
      z-index: 1000;
  }

  /* make the related links float */
  .wh_related_links {
      background-color: #EFEFFA; 
      position:fixed;
      width: 200px;
      right:0;
      top:200px;
      z-index: 1000;
  }
 
  /** the next blocks are for plain DITA-OT export
  /* make the related links float */
  .relref {
      background-color: #EFEFFA; 
      position:fixed;
      width: 200px;
      right:200px;
      top:200px;
      z-index: 1000;
  }

  /* make the related links float */
  .relinfo {
      background-color: #EFEFFA; 
      position:fixed;
      width: 200px;
      right:0;
      top:300px;
      z-index: 1000;
  }
}

/* text label for category image links */
.ImageLinksTable .xref .b {
  display:block;
  text-align: center;
}

/*
 * ---------------------------------------------------------------------------
 * Equal-height linked images.
 *
 * Oxygen's own stylesheet contains `.image { height: auto }`, which outranks the
 * HTML `height` attribute that DITA emits from `<image height="...">`. The
 * `width` attribute is not overridden, so each image ends up scaled to its own
 * width at its own aspect ratio - which is why rows of images that are authored
 * as the same height render at different heights.
 *
 * The two cases are treated differently on purpose:
 *
 *   Rows of images in a <div>  uniform height, width follows the aspect ratio.
 *                              Nothing is cropped or distorted.
 *
 *   Image link tables          uniform height AND width, so the navigation
 *                              tiles form an even grid. An image whose real
 *                              aspect ratio differs is stretched to fit.
 *
 * The table case has to restate the authored size rather than defer to the
 * `<image width= height=>` attributes, because it cannot defer to them: HTML
 * presentational attributes lose to *any* author declaration, and Oxygen's
 * `.image { height: auto }` is one. The attribute can never win on its own, so
 * the only way to honour the authored size is for the CSS to carry the same
 * numbers.
 *
 * That makes these two variables and the content a matched pair. If you change
 * the tile size here, change `<image width= height=>` in the ImageLinksTable
 * topics to match (currently Britain1.dita, Wales1.dita and StyleSamples.dita)
 * — otherwise the
 * markup claims one size and the page renders another, which is exactly the
 * confusion this comment exists to prevent.
 * ---------------------------------------------------------------------------
 */
/* Starting points, not measured values: read off the representative content in
   this repo rather than the real publication, though the real images are
   expected to be roughly the same size. The declared height is unreachable from
   CSS, so a number has to be chosen here - these two variables are the only
   place to change it. */
:root {
  /* Rows of linked images inside a plain DITA <div>. Demonstrated on
     StyleSamples.dita, and used for real by the unit pages
     (_100_unit_charlie.dita and its siblings). The height attributes in those
     topics have to match this number, for the same reason as the tile
     properties below; the width does not, because the rule leaves it `auto`. */
  --f13-image-row-height: 177px;

  /* Linked images used as navigation tiles inside a table cell. Both
     dimensions are fixed here, and must match the `<image width= height=>`
     attributes in the ImageLinksTable topics. */
  --f13-image-link-height: 203px;
  --f13-image-link-width: 438px;
}

/*
 * Rows of linked images: a plain DITA <div> holding sibling <xref>s that each
 * wrap an <image>.
 *
 * The `:has(> a.xref + a.xref)` guard restricts this to divs that hold a *row*
 * of two or more linked images. Without it the selector also catches lone
 * linked images - country flags in page titles, standalone figures - and would
 * resize those too. The guard is structural rather than tuned to any particular
 * content, so it should hold on the real publication.
 *
 * :has() needs Chrome/Edge 105+, Safari 15.4+ or Firefox 121+. On anything
 * older the whole rule is ignored and images fall back to today's uneven
 * rendering, so the failure mode is safe.
 */
.body div.div:has(> a.xref + a.xref) > a.xref > img.image {
  height: var(--f13-image-row-height);
  width: auto;
}

/* Image link tables, i.e. the country landing pages. Written against the
   generic "linked image in a table cell" shape rather than .ImageLinksTable,
   so any image link table picks this up regardless of outputclass.

   The width is a target, not a guarantee: Oxygen sets `max-width: 100%` on
   images, so a tile in a cell narrower than the declared width is capped to
   the cell — 412.5px in a 422.5px cell on the 28.1 publish. Every cell in the
   grid is the same width, so the tiles still match each other, which is the
   point of the rule. What the rule does guarantee is the height, and that is
   what tests/publish/fi3ldman-styling.spec.js asserts literally. */
.body td > a.xref > img.image {
  height: var(--f13-image-link-height);
  width: var(--f13-image-link-width);
}

/* style for large link buttons */
.enterBtn {
  font: bold 28px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  display: block;
  text-align: center;
}


/* Matches nothing in the pub-5 sample content, so the publish tests cannot
   exercise it. It is live in the real publication on the target network. */
.item-list {
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  gap: 0.5em; /* spacing between buttons */
}

.item-list a {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 5px;
}

/* A flowing row of gram buttons (pub-10's gram index) is there to be scanned,
   so each button is three-quarters the height of the search box and more of
   them fit on screen at once (issue #199).

   The search box is Oxygen's .wh_search_textfield, 2.8em tall at the body font
   size (oxygen.css). The button's font size is reset to that same size — its
   text sits at the scale of the search field's own text, not .enterBtn's
   28px — so 2.1em here is three-quarters of 2.8em there, and the two stay in
   step if the body font size changes. The height is the whole box, border
   included, and the line height is what is left inside the 1px top and bottom
   borders, so the text sits centred. */
.item-list .enterBtn {
  font-size: 1em;
  box-sizing: border-box;
  height: 2.1em;
  line-height: calc(2.1em - 2px);
  padding: 0 1em;
}

.enterBtn:visited {
  color: #333333;
}

/** just shrink the buttons on the contents page, since there are lots of them */
.contents-index .enterBtn {
  font: bold 20px Arial;
}

/** make the contents index go full width */
.contents-index {
  width: 100%;
}

/* Sortable table - styling for sortable column */
table.sortable thead {
    cursor: ns-resize;
}

/* Sortable tables - styling for unsortable column */
table.sortable  .sorttable_nosort {
  cursor: default;
}

/* !important for the same reason as the .bk* classes above, and one more:
   these header cells also carry a bk* class from the content, and those are
   now !important too. Without a matching !important here the cell's own
   colour would win and the sortable headers would lose their lighter shade.
   Specificity still decides between two !important declarations. */
table.sortable thead td {
    background-color: #BBB !important;
}

table.sortable thead td.sorttable_nosort {
    background-color: #999 !important;
}

table.sortable thead td:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after, 
table.sortable thead th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}

/******
 * display calculated harmonics
 */
.calc_harms,  .wh_harmonics  {
  font-family: monospace;
  background-color: rgba(255, 250, 205, 0.8);
  border: 1px solid rgb(255, 191, 0);
  border-spacing: 4px;
  border-collapse: separate;
    border-radius: 5px;
} 

@keyframes animateDown {
  0% {
    opacity: 0.4;
    transform: translatey(-2px);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

.calc_harms td.scaled {
  animation: animateDown 0.2s linear forwards;
}

.calc_harms td {

  font-weight: normal;
  line-height: 1.2em;
  font-size: 90%;
  padding: 0px;
  padding-left: 2px;
  margin: 0px;
  border: 0px;
  text-align: right;
}
.calc_harms td:first-child {
  padding-right: 2px;
  text-align: left;
} 

.calc_harms tr.match {
  background-color: #000;
  border-color: #000;
  color: #FFF;
  font-weight: bold;
}

.first_harm {
  margin: 0;
  padding: 0;
  font-weight: bold;
  text-align: center;
  font-size: 0.9em;
}

tr.match_row {
  background-color: rgba(244, 191, 0, 0.3);
}

tr.match_harmonic {
  color: rgba(255, 250, 205, 0.8);
  background-color: rgba(0, 0, 0, 0.8);
}

.matches {
  background-color: rgba(244, 191, 0, 0.3) !important;
}

.calc_harms .dominant {
  font-weight: bold !important;
}

/******
 * enter harmonics details
 */
.wh_harmonics {
  position:fixed;
  width: 250px;
  right:0;
  top:580px;
  z-index: 1000;
  text-align: center;
} 
.wh_harmonics table, table.calc_harms {
    margin-bottom: 0px;
    margin-top: 0px;  
}
.wh_harmonics .error {
  color: red;
  font-size: 70%;
}
.wh_harmonics td {
    text-align: right;
    line-height: 1.4em;
    padding: 0;
}
.wh_harmonics input.working {
  width: 20px;
}
.wh_harmonics input.absolute {
  width: 20px;
}
.wh_harmonics .speed-head {
  display: block;
  margin-top: 30px;
}

.wh_harmonics input.clear {
  width: 70px;
  float: right;
}

.wh_harmonics td.obs {
    text-align: left;
    padding-left: 10px;
}

.wh_harmonics input {
   width: 50px;  
   margin: 0 !important;
}

.wh_harmonics textarea {
   width: 120px; 
}

.wh_harmonics strong {
  font-family: sans-serif;
}

/*
* ==============================================
* Style changes for Fi3ldMan project above this block
* ==============================================
*/