/* Design tokens.
 *
 * These live here because header.css is the one stylesheet every page loads.
 * They were previously declared in four places with two different values for
 * --primary-color (#154360 here and in style.css, #1a5276 in pages.css and
 * products.css), so the brand navy depended on the order a page happened to
 * list its <link> tags in - 25 pages, all of them service and product-hub
 * pages, rendered the off-brand shade. pages.css and products.css no longer
 * redeclare these; do not reintroduce a second copy. */
:root {
  --primary-color: #154360;
  --primary-dark: #0f3247;

  /* Brand orange. Accents, rules and icons only: white text on it is 2.85:1,
     which fails WCAG AA. Never use it as a fill behind white text. */
  --secondary-color: #e67e22;
  /* Darkened until white text clears AA - 4.58:1 base, 6.14:1 hover. These are
     the fills for solid calls to action. */
  --secondary-cta: #b45f14;
  --secondary-cta-dark: #964f10;

  --dark-color: #2c3e50;
  --light-color: #f4f6f7;
  --text-color: #333;
  --text-muted: #5b6770;
  --grey-color: #6c6d72;
  --border-color: #e3e8ea;

  /* One type stack for the whole site. pages.css and products.css used to set
     'Segoe UI', Tahoma, Geneva, Verdana on * - a stack only Windows has in
     full - so 645 pages rendered in Tahoma or Verdana on macOS, iOS and
     Android while the homepage used system-ui. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  /* Headings read this instead of --primary-color directly, so a dark panel can
     override it for everything inside. Navy headings on a navy panel measured
     1.05:1 in the footer and the same on the quality page's case study. */
  --heading-color: var(--primary-color);

  /* One table look, for the same reason the brand navy is declared once above.
     The site had three table systems - .grade-table at 15px/12px, .spec-table
     at 16px/15px and bare Bootstrap .table at 8px - over 2,466 tables, so two
     tables stating the same kind of data one above the other on a grade hub
     disagreed about size, padding and colour. The rules that read these live in
     pages.css and tables.css; the values live here so there is one copy. */
  --table-head-bg: var(--primary-color);
  --table-head-fg: #fff;
  --table-head-rule: rgba(255, 255, 255, 0.22);
  --table-row-bg: #fff;
  --table-row-alt-bg: #f4f7fa;
  --table-row-hover-bg: #eaf2f8;
  --table-border: #dbe2e8;
  /* Row headers are labels, not a second header band - see the table system in
     pages.css for why they are no longer painted navy. */
  --table-label-fg: var(--primary-color);
  --table-cell-pad-y: 12px;
  --table-cell-pad-x: 16px;
  --table-font-size: 15px;
}

/* Page titles are centred site-wide, hero style. Lives here because header.css
   is the one stylesheet every page loads, so the homepage (which links no
   pages.css) is covered too. Set directly on the h1: the common page wraps its
   h1 in <div class="title"> whose text-align:justify the h1 only inherits, and
   a declaration on the element itself beats an inherited value at any
   specificity, so this wins without having to outrank .title. Qualified with
   body so it also beats any bare h1 rule regardless of <link> order - the same
   reason body .container is. The banner-title h1s are absolutely positioned and
   already centred, so this only tidies how a wrapped caption line sits. */
body h1 {
  text-align: center;
}

/* A word that cannot fit its line breaks rather than running off the screen.
   The prose writes alloy families with non-breaking hyphens -
   "nickel-chromium-molybdenum" with U+2011, on 56 pages - which a browser will
   not wrap at, so on a 360px phone the word ran past its paragraph and the page
   scrolled sideways. break-word acts only on a word that would otherwise
   overflow, and unlike anywhere it leaves table column widths alone. */
body {
  overflow-wrap: break-word;
}

/* The footer is dark on every page, so its override lives here with the token.
   Every other dark surface sets --heading-color: currentColor beside its own
   background rule - see hero.css, proof.css, pages.css and style.css. Keeping
   the override next to the background is the point: a class like .header is
   only dark in the stylesheet that paints it, and claiming it globally would
   restyle pages that use the same name for something light. */
footer {
  --heading-color: currentColor;
}

/* Inline SVG icons, in place of the Font Awesome webfont that used to be
   pulled from a second CDN. Sized in em and painted with currentColor so an
   icon inherits the size and colour of the text it sits in, the way the old
   <i> tags did. Icon shapes are Font Awesome Free, CC BY 4.0
   (https://fontawesome.com/license/free). */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.icon-3x {
  width: 3em;
  height: 3em;
}

/* Custom hover effects */
.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--secondary-color);
}

.navbar .nav-link,
.navbar-brand span {
  color: var(--primary-color) !important;
  transition: color 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-item.dropdown:hover>.nav-link,
.navbar .dropdown-item:hover,
.navbar-brand span:hover {
  color: var(--secondary-color) !important;
}

/* Multi-level dropdown hover effects */
@media (min-width: 992px) {
  .dropdown:hover>.dropdown-menu {
    display: block;
  }

  .nav-link {
    color: var(--primary-color);
  }

  .dropend:hover>.dropdown-menu {
    display: block;
    margin-top: -2.5rem;
    margin-left: 10rem;
    color: var(--secondary-color);
  }
}

.nav-link {
  color: var(--primary-color);
}

.dropdown-item:hover {
  color: var(--secondary-color);
}

.dropdown-item {
  color: var(--primary-color);
}

.nav-item {
  color: var(--primary-color);
}

.nav-item:hover {
  color: var(--secondary-color);
}

/* Logo text color */
.navbar-brand {
  color: var(--primary-color);
}

/* The logo is drawn at its intrinsic 160x48. pages.css, style.css and
   products.css each carry a bare `img { width: 100%; height: auto }`, and the
   logo is an <img>, so it was sized by whatever room the navbar happened to
   leave it: 350x105 on a 390px phone, which pushed the menu button onto a
   second row and made the header 145-179px tall between 320 and 414px
   wide - a fifth of the screen, on every page, before a word of the page. At
   1366px it came out 325x98 on a form page and 91x27 on the homepage, because
   the nav left different room on each. The width attribute on the <img> says
   160, but any stylesheet width beats an attribute. Qualified with body, like
   body .container, so no <link> order or later bare rule can take it back.
   max-width lets it shrink in proportion where the desktop nav genuinely needs
   the room instead of stretching where it does not. */
body .navbar-brand img {
  width: 160px;
  max-width: 100%;
  height: auto;
}

/* The desktop nav, from 992px: eight links, Get a Quote and the search box on
   one row. Only the search box gives when the row is short - from a floor set
   per width band below, up to 14rem - and the links and the logo never do.

   Until 2026-10-01 "About Us" and "Get a Quote" broke onto two lines from 992
   to 1279px, and to 1319px on the four pages that load style.css, on every
   page type: a 76-83px header, at 892 of 1,545 widths measured (one page per
   stylesheet set, every 4px from 992 to 1400). Flex shrinks every item in
   proportion to its width, so the two-word links broke while the search box
   still had 60px to spare. Now the links keep their width and the search box
   takes the shortfall, down to its floor.

   Where even the floor does not fit - a reader who has set a larger default
   font - the row wraps and the search box takes a second line, instead of the
   page scrolling sideways. At a 20px default font the old nav did both at every
   width from 992 to 1440: wrapped the links and widened the page.

   Measured with DejaVu Sans, wider than Segoe UI, San Francisco or Roboto: no
   link on two lines, no sideways scroll and no second row at any of the 1,545
   widths, the logo 120x36 below 1200px and 160x48 from it, the header 62px and
   74px, and at least 15px to spare (the homepage at 1200px). */
@media (min-width: 992px) {
  body .navbar {
    --nav-search-floor: 11rem;
  }

  body .navbar-expand-lg .navbar-brand {
    flex-shrink: 0;
  }

  body .navbar-expand-lg .navbar-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body .navbar-expand-lg .navbar-nav .nav-link {
    white-space: nowrap;
  }

  body .navbar-expand-lg .site-search {
    flex: 1 1 var(--nav-search-floor);
    max-width: 14rem;
  }

  body .navbar-expand-lg .site-search__input {
    min-width: var(--nav-search-floor);
  }
}

/* 992-1199px: the full desktop nav is wider than the bar at 16px, and before
   the logo had a fixed size it paid for all of it: 8x2px at 992 and 1024 on
   form pages, i.e. invisible on an iPad in landscape, and on the homepage and
   contact page, where the nav was wider still, the bar overflowed and the whole
   page scrolled sideways. A fixed 120x36 logo, tighter link padding, a .92rem
   link size and an 8.5rem search floor make the room. None of this applies
   from 1200px; see the link size below for what does. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body .navbar {
    --nav-search-floor: 8.5rem;
  }

  body .navbar-brand {
    margin-right: 0.5rem;
  }

  body .navbar-brand img {
    width: 120px;
  }

  body .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    font-size: 0.92rem;
  }

  body .navbar .nav-link.nav-cta {
    padding: 0.45rem 0.75rem;
    margin-left: 0.25rem;
  }
}

/* 992-1099px is still short with the links on one line: 59px on a form page at
   992 and 75px on the style.css pages, whose container keeps 20px a side. A
   .875rem link size, .25rem padding and a 6.5rem search floor leave 17px. */
@media (min-width: 992px) and (max-width: 1099.98px) {
  body .navbar {
    --nav-search-floor: 6.5rem;
  }

  body .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 0.875rem;
  }

  body .navbar .nav-link.nav-cta {
    padding: 0.45rem 0.6rem;
  }
}

/* The header's own container is 1320px on every page, the width pages.css
   already gives it through #header__container. style.css caps .container at
   1200px, and the homepage and contact page load style.css and not pages.css,
   so their nav had 120px less room and squeezed the logo to 91x27 at 1366px -
   out of the rule above's reach, because max-width had no room to give back. */
body .navbar > .container {
  max-width: 1320px;
}

/* From 1200px the nav links are 1rem on every page. They set no size of their
   own, so on the four pages that load style.css - home, contact, quality and
   about - they inherited its fluid body size, 18px at 1366, and that wider nav
   took its room from the logo: 100x30 at 1200px, 137x41 at 1240, and "About
   Us" and "Get a Quote" wrapped onto two lines at 1366, an 89-90px header on
   the homepage. With it, at 1200-1440 on all page types the logo is 154x46 at
   1200 and 159-160 from 1240, and the homepage header is 74px from 1320 like
   every other page. Every page that already drew them at 16px, which is all
   but those four, is unchanged.

   Get a Quote's side padding is set here too, because nothing decided it: the
   1.1rem in the rule further down and Bootstrap's .5rem for every desktop nav
   link are both (0,3,0), so the later stylesheet won - 1.1rem on 361 pages and
   .5rem on 435, by link order alone. Qualified with body, it is 1.1rem on all. */
@media (min-width: 1200px) {
  body .navbar-expand-lg .navbar-nav .nav-link {
    font-size: 1rem;
  }

  body .navbar .nav-link.nav-cta {
    padding: 0.45rem 1.1rem;
  }
}

/* 1200-1279px: the 160px logo and 1rem links leave the row 45px short on a
   form page at 1200 and 61px on the style.css pages. .375rem link padding, a
   .75rem button and a 9rem search floor leave 15px. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  body .navbar {
    --nav-search-floor: 9rem;
  }

  body .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }

  body .navbar .nav-link.nav-cta {
    padding: 0.45rem 0.75rem;
  }
}

/* Contact rail: email, WhatsApp and Call.

   Every rule here is qualified with body because pages.css and products.css
   each still carry an older copy of the rail at the same specificity, so which
   copy won used to depend on the order a page linked its stylesheets in. The
   138 pages that list pages.css after header.css drew the email item grey
   instead of navy and, on a phone, kept the 40%-down position that the 575px
   rules below exist to replace. */
body .floating-contact-bar {
    position: fixed;
    top: 40%;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px 0 0 8px;
    animation: contact-rail-bob 2s infinite;
}

body .contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 60px;
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
}

/* The label is hidden visually, not with display: none, which also took it out
   of the accessibility tree: with the icon aria-hidden beside it, every link in
   the rail read to a screen reader as a bare, unnamed "link". */
body .contact-item span {
    display: inline;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* A 2px white rule between neighbours in the column - each side draws half of
   it, which is how the email/WhatsApp pair was already built. */
body .contact-item.email {
    background: linear-gradient(135deg, #1a5276 0%, #2c3e50 100%);
    border-bottom: 1px solid #fff;
}

body .contact-item.whatsapp {
    background-color: #25D366;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

/* The site's call-to-action fill: white on it clears AA at 4.58:1, which the
   brand orange (2.85:1) does not. */
body .contact-item.phone {
    background-color: var(--secondary-cta);
    border-top: 1px solid #fff;
}

body .contact-item:hover,
body .contact-item:focus-visible {
    width: 150px;
    justify-content: start;
    padding-left: 15px;
}

body .contact-item:hover span,
body .contact-item:focus-visible span {
    display: inline-block;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    margin-left: 10px;
}

/* Named for the rail alone. It was `pulse`, which pages.css also defines -
   twice, the second time as a scale-and-fade for its loading spinner - and
   @keyframes of the same name resolve to whichever stylesheet loaded last, so
   on the 138 pages that link pages.css after this file the rail swelled and
   faded instead of bobbing. */
@keyframes contact-rail-bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Accessibility ---------------------------------------------------------- */

/* Lets keyboard users jump the 40-item nav; visible only once focused. */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.skip-link:focus {
    left: 0;
}

/* Bootstrap's reset removes the UA outline; without a replacement there is no
   keyboard focus indicator anywhere on the site. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Quote CTA in the navbar */
.navbar .nav-link.nav-cta {
    background: var(--secondary-cta);
    color: #fff !important;
    border-radius: 5px;
    padding: 0.45rem 1.1rem;
    margin-left: 0.5rem;
    font-weight: 600;
}

.navbar .nav-link.nav-cta:hover,
.navbar .nav-link.nav-cta:focus {
    background: var(--secondary-cta-dark);
    color: #fff !important;
}

@media (max-width: 991.98px) {
    .navbar .nav-link.nav-cta {
        display: inline-block;
        margin: 0.5rem 0 0;
    }

    /* 60px-wide icons are below the 44px comfortable-tap guidance once the
       vertical padding is counted; give them room on small screens. */
    body .contact-item {
        min-height: 48px;
    }

    /* The rail is fixed at z-index 9999 and the navbar (sticky-top) at 1020, so an
       opened menu slid underneath it and the rail sat on the right-hand end of
       the menu's rows for as long as it was open. Step aside while it is.
       :has() is the only way to see the menu from here, because the rail comes
       before the navbar in the markup; a browser without it keeps the old
       overlap and nothing worse. */
    body:has(#mainNav.show, #mainNav.collapsing) .floating-contact-bar {
        visibility: hidden;
    }
}

/* Tablets in portrait: top: 40% put the rail across the page's <h1> once the
   header shrank to 74px - on 56 of 161 sampled pages at 768x1024 and 52 at
   820x1180, against none before. Anchored just above the scroll-to-top button
   (#scrollUpBtn, bottom 55px, 50px tall) it covers no <h1> at either size. */
@media (min-width: 576px) and (max-width: 991.98px) and (min-height: 500.02px) {
    body .floating-contact-bar {
        top: auto;
        bottom: 120px;
    }
}

/* Phones, and any screen under 500px tall - a phone held in landscape is wider
   than 575px and so used to get the desktop rail: top: 40% with three 48px
   tiles reached past the top of #scrollUpBtn at 844x390, and since the rail
   sits above it (z-index 9999 against 999) a tap on the top of "back to top"
   dialled the sales desk and logged a phone contact_click nobody made. */
@media (max-width: 575.98px), (max-height: 500px) {
    /* top: 40% floats wherever a short viewport happens to put it, which
       landed the rail on top of the page's own <h1>. Anchor it just under the
       header instead: 74px tall now that the logo keeps its own size, and 80px
       leaves room for the 5px lift of the bob. The navbar carries sticky-top but
       sticks only on the homepage: everywhere else its #header__container
       wrapper is exactly its height, so it scrolls away and the rail then sits
       over the text - which is what the scrolled views below count.

       A narrow column, not the row this used to be. The row fitted a ~55px gap
       under a 145-179px header; under a 74px one it lands on the page's first
       heading. Measured on 134 pages at landing, a three-icon row at 320px
       covered <h1> text on 40 and banner-caption text on 76, and this column
       covers <h1> text on 2 and caption text on none. While reading it hides
       less too: over 201 scrolled views it overlapped text on 86 at 320px
       against the row's 172, a seventh of the area. */
    body .floating-contact-bar {
        top: 80px;
    }

    /* 36px wide keeps the column clear of all but the last few pixels of a
       justified line; 40px tall keeps each target near the 44px guidance. */
    body .floating-contact-bar .contact-item {
        width: 36px;
        min-height: 40px;
        padding: 6px;
        font-size: 16px;
    }

    /* No room to expand into a labelled pill at this width without
       overrunning the page text beneath. */
    body .floating-contact-bar .contact-item:hover,
    body .floating-contact-bar .contact-item:focus-visible {
        width: 36px;
        justify-content: center;
        padding-left: 6px;
    }

    /* The label stays visually hidden, and so still names the link. */
    body .floating-contact-bar .contact-item:hover span,
    body .floating-contact-bar .contact-item:focus-visible span {
        display: inline;
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        margin-left: 0;
    }
}

/* The column above still sat on the last word of a long <h1> on a few pages:
   measured at landing on 161 pages, 3 at 390x844, 4 at 360x740 and 1 at
   667x375 - the homepage, Alloy 28, Titanium Grade 16 and Ti-5-2-4-4. The
   heading keeps out of the rail's 36px plus 6px of air, but only by as much as
   the rail actually reaches into it. A flat 42px also counted the 12-32px its
   container already leaves at the screen edge, and at 320px that squeezed 14
   long titles until a word broke in two - "Temperatu|re", "Visakhapatna|m" -
   6 of them still at 340px. (100vw - 100%) / 2 is that edge gap, since the
   heading's container is symmetric at these widths: a grade hub in a 12px
   .container gets 30px, a form page's .main-content heading 10px and a
   full-bleed one the whole 42px. Over every page at ten widths from 320 to
   575px and seven landscape phones, no padded heading sits under the rail and
   no word breaks.

   The quality page's banner heading sits in style.css's .header block, where
   nothing positions it, so it is an ordinary centred heading: it was the one
   still under the rail, at 380-405px. The real banner captions are left out -
   they centre themselves by transform inside a symmetric 10px box, which a
   one-sided padding would knock lopsided - and two of them keep 3-6px under
   the rail at 320px, against 28 headings there before the column. The family
   hubs' lead sentence sits directly under their heading, in the rail's band,
   and lost the end of its first lines the same way. */
@media (max-width: 575.98px), (max-height: 500px) {
    body #main h1:not(.banner-title),
    body #main .header h1,
    body #main #family-intro > .lead:first-child {
        padding-right: max(0px, 42px - (100vw - 100%) / 2);
    }
}

@media (prefers-reduced-motion: reduce) {

    /* Qualified to match the rules above, which would otherwise outrank these
       and keep the rail bouncing for a visitor who asked for no motion. */
    body .floating-contact-bar {
        animation: none;
    }

    body .contact-item,
    .navbar .nav-link,
    .navbar-brand span {
        transition: none;
    }
}

/* Header site search. Styles are written here rather than reusing Bootstrap
   dropdown classes: bootstrap.min.css is a PurgeCSS subset of only what the
   site already uses, so a component introduced here would render unstyled
   until someone remembered to regenerate it. */
.site-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}

.site-search__input {
  width: 100%;
  min-width: 12rem;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-color, #e3e8ea);
  border-radius: var(--radius-sm, 6px);
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-color);
  background: #fff;
}

.site-search__input::placeholder { color: var(--text-muted, #5b6770); }

.site-search__results {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 1050;
  width: min(26rem, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border-color, #e3e8ea);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 12px 32px rgba(16, 32, 44, 0.14);
}

.site-search__results li a {
  display: block;
  padding: 0.5rem 0.85rem;
  text-decoration: none;
  color: var(--text-color);
}

.site-search__results li.is-active a,
.site-search__results li a:hover,
.site-search__results li a:focus {
  background: var(--light-color, #f4f6f7);
}

.site-search__title { display: block; font-weight: 600; font-size: 0.95rem; }

.site-search__url {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted, #5b6770);
  word-break: break-all;
}

.site-search__empty {
  padding: 0.6rem 0.85rem;
  color: var(--text-muted, #5b6770);
  font-size: 0.9rem;
}

/* Visually hidden but still read out, for the field label and the live region
   that announces how many results were found. */
.visually-hidden-label {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 991.98px) {
  .site-search { margin: 0.5rem 0 0; }
  .site-search__results { right: auto; left: 0; width: 100%; }
}