/* user-defined CSS */

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

/* styling for related links */
.related-links a[href$='.xls'], a[href$='.xlsx'] {
  background: transparent url(resources/images/icon_excel.gif) center right no-repeat !important;
  padding-right: 22px;
}

.related-links a[href^="#"] {
  background: transparent;
}

.related-links a {
  background: transparent url(resources/images/external_link.svg) 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 */
.title {
  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.
 */
.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; }


.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 and Wales1.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>. */
  --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. */
.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;
}

.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
* ==============================================
*/