/* ===========================================================================
   Parkside Steel — shared mobile / small-screen stylesheet
   ---------------------------------------------------------------------------
   Loaded last in <head> on every page, so plain class selectors here override
   the page's own inline rules of equal specificity by source order.

   It supplies the one piece every page was missing — a working navigation on
   small screens (the 6-item menu used to overflow the bar) — plus a stacked
   info bar and a few site-wide safety nets that stop content overflowing the
   viewport. Page-specific body layouts already collapse via each page's own
   media queries; the homepage's reflow lives in its own inline <style>.
   =========================================================================== */

/* Hamburger button — injected by /js/parkside-mobile.js, hidden on desktop. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(26, 86, 160, 0.45);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white, #f4f8ff);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }

/* Animate into an "X" while the menu is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* Keep the header "Request a Quote" pill on a single line. At intermediate
   (tablet/laptop) widths the flex nav used to compress the button and break
   its label across two lines. */
.nav-cta { white-space: nowrap; }

@media (max-width: 900px) {

  /* --- Top info bar: stack the address above the contact details so the long
         postal address no longer runs off the side of the screen. --- */
  .phone-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 20px;
    font-size: 11px;
    line-height: 1.45;
  }
  .phone-bar-right {
    gap: 14px 18px;
    flex-wrap: wrap;
  }

  /* --- Navigation: reveal the hamburger and drop the links into a panel. --- */
  .nav-toggle { display: inline-flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--navy, #0e1f3b);
    border-bottom: 2px solid var(--royal, #1a56a0);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
    padding: 6px 0;
    margin: 0;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }

  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(26, 86, 160, 0.18);
  }
  .nav-links li:last-child a { border-bottom: none; }

  /* Keep the "Request a Quote" pill looking like a button inside the panel. */
  .nav-links .nav-cta {
    margin: 10px 24px 6px;
    text-align: center;
    border-radius: 2px;
  }
}

/* --- Article/news pages: let the main content column shrink.
   The .article-wrap grid item .article-body defaults to min-width:auto, which
   sizes the column to a wide child's content (e.g. a comparison table) and
   forces horizontal page overflow once the grid collapses to one column
   (≤960px). min-width:0 lets it shrink so wide tables scroll inside their
   overflow-x wrapper instead of blowing out the viewport. Harmless on desktop. */
.article-body { min-width: 0; }

/* --- Site-wide safety nets for the very small end of the range. --- */
@media (max-width: 600px) {
  /* Never let an image or embed force the page wider than the screen. */
  img, svg, video, iframe, table { max-width: 100%; }

  /* Wide data tables become horizontally scrollable instead of overflowing. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------------------
   Site-wide company navigation in the footer.
   Added to every page's <footer> so the core company links (About, Facility,
   Fleet, Industries, News, Contact, Quote) are reachable from anywhere — not
   just the homepage. Plain class selectors, loaded last, so they style this
   block consistently regardless of each page's own inline footer CSS.
   --------------------------------------------------------------------------- */
.footer-company-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
  padding: 0 0 24px;
  margin: 0 0 24px;
  border-bottom: 1px solid rgba(26, 86, 160, 0.25);
}
.footer-company-nav a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sky, #b8d0f0);
  text-decoration: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.footer-company-nav a:hover { color: var(--white, #f4f8ff); }
.footer-company-nav a.footer-company-cta {
  color: var(--white, #f4f8ff);
  border: 1px solid rgba(184, 208, 240, 0.5);
  border-radius: 2px;
  padding: 6px 16px;
}
.footer-company-nav a.footer-company-cta:hover {
  background: var(--royal, #1a56a0);
  border-color: var(--royal, #1a56a0);
}
@media (max-width: 600px) {
  .footer-company-nav { gap: 8px 16px; padding-bottom: 18px; margin-bottom: 18px; }
  .footer-company-nav a { font-size: 13px; }
}
