/* ==========================================================================
   Suttner America — modern theme chrome (header, nav, footer, base)
   Loads globally AFTER style.css, so it overrides the dated styles.
   Branding preserved: Suttner blue / navy / green, dark header.
   ========================================================================== */

:root {
  --s-blue: #2b73ad;
  --s-blue-dk: #1e6198;
  --s-navy: #0e2a44;
  --s-green: #62a92b;
  --s-green-dk: #509111;
  --s-ink: #2c333c;
  --s-muted: #6b7480;
  --s-border: #dde0e8;
  --s-bg: #eef1f5;
  --s-header-bg: #111418;
  --s-maxw: 1200px;
}

/* ---- base ---- */
/* Always reserve the scrollbar gutter so the viewport width — and therefore the header
   layout — never shifts between pages with/without a scrollbar. */
/* Override the legacy `html,body { height: 101% }` scrollbar hack — that fixed the body
   to ~viewport height, which broke the sticky header on tall pages (it released once
   `body` scrolled past). We already force a scrollbar via overflow-y/scrollbar-gutter. */
html { scrollbar-gutter: stable; overflow-y: scroll; scroll-behavior: smooth; height: auto; }
body.spm-modern { height: auto; min-height: 100vh; }
/* Offset in-page anchor jumps so they clear the sticky header. */
:target { scroll-margin-top: 150px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.spm-modern { font-family: 'Open Sans', system-ui, -apple-system, sans-serif; color: var(--s-ink); background: var(--s-header-bg); }
body.spm-modern #mainbody, body.spm-modern .bodymain { max-width: var(--s-maxw); margin: 0 auto; background: var(--s-bg); min-height: 40vh; }
/* NOTE: no broad `.spm-modern a` color rule — it leaked blue into the green buttons.
   Link colors are set per-context (nav, buttons, footer, content) below. */
.spm-skip { position: absolute; left: -999px; }
.spm-skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px 14px; z-index: 1000; }

/* ==========================================================================
   Header
   ========================================================================== */
/* Normalize box-sizing for the chrome so it renders identically whether or not the
   plugin's Tailwind reset is present on a given page. */
.site-header, .site-header *, .site-footer, .site-footer * { box-sizing: border-box; }
.site-header { background: var(--s-header-bg); position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: box-shadow .2s ease; }
.site-header__inner {
  max-width: var(--s-maxw); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: padding .2s ease;
}
.site-logo { display: inline-flex; align-items: center; flex: none; }
/* Explicit height (+ max-width:none to beat style.css `img{max-width:100%}`) keeps the
   logo the same size on every page regardless of which resets are loaded. */
.site-logo img { display: block; height: 58px; width: auto; max-width: none; transition: height .2s ease; }
/* Condense the sticky header slightly once the page is scrolled (JS toggles .is-scrolled). */
.site-header.is-scrolled { box-shadow: 0 4px 16px rgba(0,0,0,.38); }
.site-header.is-scrolled .site-header__inner { padding-top: 6px; padding-bottom: 6px; }
.site-header.is-scrolled .site-logo img { height: 46px; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__inner, .site-logo img { transition: none; }
}

.site-header__right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex: 1; min-width: 0; }

/* primary nav — the blue bar hugs the nav items (content width), right-aligned */
.primary-nav { align-self: stretch; display: flex; justify-content: flex-end; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; background: var(--s-blue); border-radius: 6px; overflow: hidden; }
.primary-nav li { margin: 0; }
.primary-nav a { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: 14px; line-height: 1; padding: 13px 13px; white-space: nowrap; text-decoration: none; transition: background .15s; }
.primary-nav a:hover { background: var(--s-blue-dk); color: #fff; }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-parent > a { background: var(--s-blue-dk); color: #fff; box-shadow: inset 0 -3px 0 var(--s-green); }
.primary-nav .fa { font-size: 14px; }

/* actions row: catalog + search */
/* All header action controls share an explicit height so the header is the SAME
   height on every page, regardless of whether the plugin's form reset is loaded. */
.header-actions { display: flex; align-items: stretch; gap: 0; height: 44px; }
/* Digital Catalog + download read as one split-button (no gap; outer corners rounded only). */
.btn-catalog { display: inline-flex; align-items: center; gap: 9px; height: 44px; background: var(--s-green); color: #fff; font-weight: 700; font-size: 15px; padding: 0 16px; border-radius: 6px 0 0 6px; text-decoration: none; transition: background .15s; }
.btn-catalog:hover { background: var(--s-green-dk); color: #fff; text-decoration: none; }
.btn-catalog__dl { display: inline-flex; align-items: center; justify-content: center; height: 44px; background: var(--s-green); color: #fff; padding: 0 14px; border-radius: 0 6px 6px 0; border-left: 1px solid rgba(0,0,0,.14); text-decoration: none; font-size: 16px; transition: background .15s; }
.btn-catalog__dl:hover { background: var(--s-green-dk); color: #fff; text-decoration: none; }

/* Nozzle Calculator — Suttner blue button, sits between catalog and search. */
.btn-nozzle { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-left: 10px; background: var(--s-blue); color: #fff; font-weight: 700; font-size: 15px; padding: 0 16px; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background .15s; }
.btn-nozzle:hover { background: var(--s-blue-dk); color: #fff; text-decoration: none; }

.header-search { display: flex; align-items: stretch; height: 44px; margin-left: 10px; background: #fff; border-radius: 6px; overflow: hidden; min-width: 280px; }
.header-search input { flex: 1; height: 44px; border: 0; outline: 0; font-size: 14px; line-height: 44px; color: #333; padding: 0 14px; min-width: 0; background: #fff; }
.header-search button { height: 44px; background: var(--s-green); color: #fff; border: 0; font-weight: 700; font-size: 14px; padding: 0 18px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.header-search button:hover { background: var(--s-green-dk); }
/* Tactile press on the header action buttons. */
.btn-catalog:active, .btn-catalog__dl:active, .btn-nozzle:active, .header-search button:active { transform: translateY(1px); }

.header-adv { font-size: 11.5px; color: #9fb6cf; max-height: 24px; }
.header-adv a { color: #cfe2f6; text-decoration: underline; }

/* Smoothly animate the header controls when the sticky header condenses on scroll. */
.site-header__right, .primary-nav a, .header-actions,
.btn-catalog, .btn-catalog__dl, .btn-nozzle,
.header-search, .header-search input, .header-search button, .header-adv {
  transition: background .15s ease, height .2s ease, padding .2s ease,
              font-size .2s ease, gap .2s ease, opacity .2s ease, max-height .2s ease;
}
/* Condensed state: tighter nav links + shorter buttons/search, and the
   "advanced search" hint collapses to reclaim vertical space. */
.site-header.is-scrolled .site-header__right { gap: 6px; }
.site-header.is-scrolled .primary-nav a { padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.site-header.is-scrolled .header-actions { height: 38px; }
.site-header.is-scrolled .btn-catalog,
.site-header.is-scrolled .btn-catalog__dl,
.site-header.is-scrolled .btn-nozzle,
.site-header.is-scrolled .header-search,
.site-header.is-scrolled .header-search input,
.site-header.is-scrolled .header-search button { height: 38px; }
.site-header.is-scrolled .btn-catalog,
.site-header.is-scrolled .btn-nozzle { font-size: 14px; padding: 0 13px; }
.site-header.is-scrolled .header-search input { line-height: 38px; font-size: 13px; }
.site-header.is-scrolled .header-adv { opacity: 0; max-height: 0; margin: 0; overflow: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .site-header__right, .primary-nav a, .header-actions,
  .btn-catalog, .btn-catalog__dl, .btn-nozzle,
  .header-search, .header-search input, .header-search button, .header-adv {
    transition: background .15s ease;
  }
}

/* mobile toggle (hidden on desktop) */
.nav-toggle { display: none; align-items: center; gap: 8px; background: var(--s-blue); color: #fff; border: 0; border-radius: 6px; font-size: 16px; font-weight: 700; padding: 10px 16px; cursor: pointer; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--s-navy); color: #cdd9e6; margin-top: 0; }
.site-footer__inner { max-width: var(--s-maxw); margin: 0 auto; padding: 32px 20px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.site-footer__brand strong { color: #fff; font-size: 17px; }
.site-footer__brand { font-size: 14px; line-height: 1.9; }
.site-footer__brand a { color: #9fd0ff; }
.site-footer__brand .fa { color: var(--s-green); width: 18px; }
.site-footer__nav .ttl { color: #7fb2e6; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; font-weight: 800; margin-bottom: 10px; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 36px; }
.site-footer__nav a { color: #cdd9e6; text-decoration: none; display: block; padding: 4px 0; font-size: 14px; }
.site-footer__nav a:hover { color: #fff; }
.site-footer__bar { background: rgba(0,0,0,.3); text-align: center; padding: 14px; font-size: 13px; color: #9fb0c4; }

/* ==========================================================================
   Homepage sections (slider stays; modern content below)
   ========================================================================== */
.spm-home__slider { margin-bottom: 6px; }
.spm-home__body { padding: 8px 20px 40px; }
.spm-home__section { margin: 30px 0; }
.spm-home__h { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--s-navy); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--s-border); }
.spm-home__h .more { font-size: 13px; font-weight: 600; color: var(--s-blue); text-decoration: none; white-space: nowrap; align-self: center; }
.spm-home__h .more:hover { text-decoration: underline; }
/* On-brand centered callout band with a faded watermark of the site logo. */
.spm-home__intro { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--s-navy) 0%, #1c4f7d 55%, var(--s-blue) 100%); border-radius: 10px; padding: 48px 36px; margin: 30px 0; text-align: center; box-shadow: 0 6px 22px rgba(14,42,68,.20); }
.spm-home__intro::before { content: ""; position: absolute; top: 50%; right: -50px; transform: translateY(-50%); width: 480px; max-width: 55%; height: 280px; background: url('../images/SuttnerLogo.png') no-repeat right center / contain; opacity: .08; pointer-events: none; }
.spm-home__intro > * { position: relative; z-index: 1; }
.spm-home__intro h2 { font-size: 24px; line-height: 1.2; font-weight: 800; color: #fff; margin: 0 0 14px; }
.spm-home__intro p { font-size: 15.5px; line-height: 1.8; color: rgba(255,255,255,.92); max-width: 68ch; margin: 0 auto; }

/* Category rail: faded vertical Suttner logo watermark running up the sidebar.
   (The rail itself — position/overflow/bubbles — is styled in the plugin's app.css.) */
.spm-catrail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 460px;            /* logo natural size; becomes the vertical extent once rotated */
  height: 90px;            /* becomes the horizontal width once rotated */
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  background: url('../images/SuttnerLogo.png') no-repeat center / contain;
  filter: brightness(0) invert(1);   /* soft white silhouette on the blue */
  opacity: .09;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) { .spm-catrail::before { display: none; } }

/* ==========================================================================
   Pagination (WordPress paginate_links — .page-numbers)
   ========================================================================== */
#spm-pagination, .products-pagination, .spm-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin: 30px 0 6px; padding: 0; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid var(--s-border); border-radius: 6px; background: #fff; color: var(--s-navy); font-weight: 700; line-height: 1; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
a.page-numbers:hover { background: var(--s-blue); border-color: var(--s-blue); color: #fff; }
.page-numbers.current { background: var(--s-navy); border-color: var(--s-navy); color: #fff; }
.page-numbers.dots { border-color: transparent; background: transparent; min-width: 24px; padding: 0 4px; }
.page-numbers.next, .page-numbers.prev { font-weight: 700; }

/* ==========================================================================
   Content pages (History, FAQ, Contact, What's New, generic pages)
   ========================================================================== */
.spm-page { padding: 22px 20px 40px; }
.spm-page__title { font-size: 28px; line-height: 1.15; font-weight: 800; color: var(--s-navy); margin: 6px 0 18px; }
.spm-page__content { background: #fff; border: 1px solid var(--s-border); border-radius: 8px; padding: 30px 36px; font-size: 16.5px; line-height: 1.8; color: var(--s-ink); }
/* Prose: proper heading hierarchy + content typography for WYSIWYG page content. */
.spm-page__content h1 { font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--s-navy); margin: 1.3em 0 .5em; }
.spm-page__content h2 { font-size: 23px; font-weight: 800; line-height: 1.25; color: var(--s-navy); margin: 1.4em 0 .5em; }
.spm-page__content h3 { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--s-navy); margin: 1.3em 0 .4em; }
.spm-page__content h4 { font-size: 16px; font-weight: 700; color: var(--s-navy); margin: 1.2em 0 .4em; }
.spm-page__content h5, .spm-page__content h6 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #555c66; margin: 1.1em 0 .3em; }
.spm-page__content p { font-size: 16.5px; line-height: 1.8; margin: 0 0 1.35em; }
/* Content links: underline wipes in on hover instead of snapping. */
.spm-page__content a {
  color: var(--s-blue); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.spm-page__content a:hover { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
  .spm-page__content a { transition: none; }
  .spm-page__content a:hover { text-decoration: underline; background-size: 0 0; }
}
.spm-page__content img { max-width: 100%; height: auto; }
.spm-page__content ul, .spm-page__content ol { margin: 0 0 1em; padding-left: 1.5em; }
.spm-page__content ul { list-style: disc; }
.spm-page__content ol { list-style: decimal; }
.spm-page__content li { font-size: 16.5px; line-height: 1.7; margin: .4em 0; }
.spm-page__content blockquote { margin: 1em 0; padding: .5em 1em; border-left: 4px solid var(--s-blue); color: #4a525c; background: #f6f9fc; }
.spm-page__content > :first-child { margin-top: 0; }
.spm-page__content > :last-child { margin-bottom: 0; }

/* Modern breadcrumb — content pages (custom_breadcrumbs => ul#breadcrumbs.breadcrumb). */
ul#breadcrumbs.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 16px; padding: 9px 14px; font-size: 12.5px; color: #6b7480; background: #fff; border: 1px solid var(--s-border); border-radius: 6px; }
ul#breadcrumbs.breadcrumb li { display: inline-flex; align-items: center; }
ul#breadcrumbs.breadcrumb a { color: var(--s-blue); text-decoration: none; font-weight: 600; }
ul#breadcrumbs.breadcrumb a:hover { text-decoration: underline; }
ul#breadcrumbs.breadcrumb .separator { color: #c0c6cf; padding: 0 2px; }
ul#breadcrumbs.breadcrumb strong, ul#breadcrumbs.breadcrumb .bread-current { color: #2c333c; font-weight: 700; }

/* ==========================================================================
   Neutralize dated bits from style.css
   ========================================================================== */
body.spm-modern .sbleft { background: none !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .site-header__inner { flex-wrap: wrap; gap: 12px; }
  .nav-toggle { display: inline-flex; }
  .site-header__right { width: 100%; align-items: stretch; }
  .primary-nav { width: 100%; }
  .primary-nav ul { flex-direction: column; display: none; width: 100%; border-radius: 6px; }
  .primary-nav.is-open ul { display: flex; }
  .primary-nav a { justify-content: flex-start; border-bottom: 1px solid rgba(255,255,255,.12); }
  .header-actions { flex-wrap: wrap; }
  .header-search { flex: 1 1 100%; }
  .header-adv { align-self: flex-start; }
  .site-footer__nav ul { columns: 1; }
}

/* ==========================================================================
   Interaction polish: focus rings, back-to-top, image fade-in
   ========================================================================== */
/* Keyboard focus rings (mouse clicks stay clean via :focus-visible). */
.spm-modern a:focus-visible,
.spm-modern button:focus-visible,
.spm-modern input:focus-visible,
.spm-modern select:focus-visible,
.spm-modern textarea:focus-visible,
.spm-modern .spm-card:focus-visible,
.spm-modern .spm-cat-tile:focus-visible {
  outline: 2px solid var(--s-blue); outline-offset: 2px; border-radius: 4px;
}
/* On the dark header, a white ring reads better than blue. */
.site-header a:focus-visible, .site-header button:focus-visible, .site-header input:focus-visible {
  outline-color: #fff;
}

/* Floating "back to top" button (JS toggles .is-visible past a scroll threshold). */
.spm-totop {
  position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--s-blue); color: #fff; border: 0; border-radius: 50%;
  font-size: 18px; cursor: pointer; z-index: 300;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background .15s ease;
}
.spm-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.spm-totop:hover { background: var(--s-blue-dk); color: #fff; }

/* Lazy images fade in once loaded (class added by JS, so no-JS shows them normally). */
img.spm-fade { opacity: 0; transition: opacity .45s ease; }
img.spm-fade.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .spm-totop { transition: opacity .2s ease; transform: none; }
  img.spm-fade { opacity: 1 !important; transition: none; }
}