/* ==========================================================================
   Pinnacle Packaging — UX / design-system fixes (Sept 2026)
   Loaded AFTER style.css, responsive.css and seo-enhancements.css.
   Purpose: consistent typography, inline-link styling, button alignment,
   product/spec tables, industry + related-product cards, guide articles,
   accessibility focus states and mobile overflow fixes.
   No existing template rule is deleted — everything here is additive.
   ========================================================================== */

:root{
  --pp-navy:#253c61;
  --pp-navy-dark:#151a33;
  --pp-red:#cf2127;
  --pp-red-dark:#a8171c;
  --pp-ink:#3e3e3e;
  --pp-muted:#6a7280;
  --pp-line:#e2e6f0;
  --pp-tint:#edf0fa;
  --pp-radius:8px;
  --pp-container:1170px;
  --pp-section-pad:70px;
}

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY — one scale for the whole site
   -------------------------------------------------------------------------- */
body,
p, li, td, th, label, input, select, textarea, button, a{
  font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
h1, .main-heading{ font-size:40px; line-height:1.22; font-weight:800; color:var(--pp-navy-dark); }
h2{ font-size:30px; line-height:1.3; font-weight:700; }
h3{ font-size:22px; line-height:1.35; font-weight:700; }
h4{ font-size:19px; line-height:1.4; font-weight:600; }
h5{ font-size:17px; line-height:1.5; font-weight:600; }
p{ font-size:16px; line-height:1.8; color:var(--pp-ink); }

/* --------------------------------------------------------------------------
   2. IN-CONTENT LINKS — must inherit surrounding typography
      (fixes: anchor text rendering in a different font / size / weight)
   -------------------------------------------------------------------------- */
p a,
li a:not(.cs-btn-one),
td a, th a,
.accordion-body a,
.product-row a:not(.cs-btn-one),
.pp-prose a:not(.cs-btn-one),
address a{
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  color:var(--pp-red);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
p a:hover,
li a:not(.cs-btn-one):hover,
.pp-prose a:not(.cs-btn-one):hover,
.accordion-body a:hover{ color:var(--pp-red-dark); text-decoration:underline; }

/* Navigation, footer and card links keep their own template styling */
.main-menu a, .footer a, .breadcrumb a, .navbar-brand, .social-list a, .social-links a{
  text-decoration:none !important;
}
.footer a{ font-size:15px; line-height:1.9; }

/* --------------------------------------------------------------------------
   3. BUTTONS — equal height, consistent padding, predictable wrapping
   -------------------------------------------------------------------------- */
.pp-btn,
a.pp-btn,
button.pp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:14px 30px;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  border-radius:var(--pp-radius);
  border:2px solid transparent;
  text-align:center;
  text-decoration:none !important;
  cursor:pointer;
  transition:all .25s ease;
  white-space:normal;
}
.pp-btn--primary{ background:var(--pp-red); color:#fff; }
.pp-btn--primary:hover,
.pp-btn--primary:focus{ background:var(--pp-red-dark); color:#fff; }
.pp-btn--outline{ background:transparent; color:var(--pp-navy); border-color:var(--pp-navy); }
.pp-btn--outline:hover,
.pp-btn--outline:focus{ background:var(--pp-navy); color:#fff; }
.pp-btn--light{ background:#fff; color:var(--pp-navy); }
.pp-btn--light:hover{ background:var(--pp-tint); color:var(--pp-navy); }

/* Button groups: same baseline, sane wrapping on small screens */
.pp-btn-group{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:14px;
  margin:26px 0 0;
}
.pp-btn-group .pp-btn{ flex:0 1 auto; }
@media (max-width:575px){
  .pp-btn-group{ gap:12px; }
  .pp-btn-group .pp-btn{ flex:1 1 100%; }
}
/* Align existing template buttons to the same height so mixed rows stay level */
.cs-btn-one{ min-height:52px; display:inline-flex; align-items:center; justify-content:center; }

/* Form submit buttons on enquiry / callback blocks */
form button[type="submit"],
form input[type="submit"]{
  min-height:52px;
  padding:14px 32px;
  font-weight:600;
  border-radius:var(--pp-radius);
}

/* --------------------------------------------------------------------------
   4. SECTION + CONTAINER RHYTHM
   -------------------------------------------------------------------------- */
.pp-section{ padding:var(--pp-section-pad) 0; }
.pp-section--tint{ background:var(--pp-tint); }
.pp-section__head{ max-width:820px; margin:0 auto 42px; text-align:center; }
.pp-section__head p{ color:var(--pp-muted); margin-bottom:0; }
.pp-eyebrow{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pp-red);
  margin-bottom:10px;
}
@media (max-width:767px){
  :root{ --pp-section-pad:46px; }
  h1, .main-heading{ font-size:29px; }
  h2{ font-size:24px; }
  h3{ font-size:20px; }
}

/* --------------------------------------------------------------------------
   5. BREADCRUMBS
   -------------------------------------------------------------------------- */
.page-title-content .breadcrumb{
  background:transparent;
  justify-content:center;
  flex-wrap:wrap;
  padding:0;
  margin:14px 0 0;
}
.page-title-content .breadcrumb-item,
.page-title-content .breadcrumb-item a{ color:#fff; font-size:14px; }
.page-title-content .breadcrumb-item a{ opacity:.85; }
.page-title-content .breadcrumb-item a:hover{ opacity:1; text-decoration:underline; }
.page-title-content .breadcrumb-item.active{ font-weight:600; }
.page-title-content .breadcrumb-item + .breadcrumb-item::before{ color:rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   6. PRODUCT / CATEGORY CARDS
   -------------------------------------------------------------------------- */
.pp-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:26px;
}
.pp-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--pp-line);
  border-radius:var(--pp-radius);
  overflow:hidden;
  height:100%;
  transition:box-shadow .25s ease, transform .25s ease;
}
.pp-card:hover{ box-shadow:0 14px 34px rgba(21,26,51,.10); transform:translateY(-3px); }
.pp-card__media{ aspect-ratio:4 / 3; background:var(--pp-tint); overflow:hidden; }
.pp-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-card__body{ padding:24px; display:flex; flex-direction:column; flex:1 1 auto; }
.pp-card__body h3{ font-size:20px; margin-bottom:10px; color:var(--pp-navy); }
.pp-card__body p{ font-size:15px; margin-bottom:18px; }
.pp-card__body .pp-card__link{
  margin-top:auto;
  font-size:14px;
  font-weight:600;
  color:var(--pp-red);
  text-decoration:none !important;
}
.pp-card__body .pp-card__link:hover{ color:var(--pp-red-dark); text-decoration:underline !important; }
.pp-card__meta{ font-size:13px; color:var(--pp-muted); margin-bottom:12px; }

/* --------------------------------------------------------------------------
   7. SPEC / SELECTION TABLES  (horizontal scroll instead of page overflow)
   -------------------------------------------------------------------------- */
.pp-table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:24px 0 30px; }
table.pp-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:15px;
  background:#fff;
}
table.pp-table caption{
  caption-side:top;
  text-align:left;
  font-size:14px;
  color:var(--pp-muted);
  padding-bottom:10px;
}
table.pp-table th,
table.pp-table td{
  border:1px solid var(--pp-line);
  padding:12px 14px;
  text-align:left;
  vertical-align:top;
  line-height:1.6;
}
table.pp-table thead th{ background:var(--pp-navy); color:#fff; font-weight:600; }
table.pp-table tbody tr:nth-child(even){ background:#f7f9fd; }

/* --------------------------------------------------------------------------
   8. INDUSTRY / USE-CASE TILES
   -------------------------------------------------------------------------- */
.pp-industry-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
}
.pp-industry{
  background:#fff;
  border:1px solid var(--pp-line);
  border-left:4px solid var(--pp-red);
  border-radius:var(--pp-radius);
  padding:24px;
}
.pp-industry h3{ font-size:18px; margin-bottom:8px; color:var(--pp-navy); }
.pp-industry p{ font-size:14.5px; margin-bottom:10px; }
.pp-industry ul{ margin:0; padding-left:18px; }
.pp-industry li{ font-size:14px; line-height:1.7; }

/* --------------------------------------------------------------------------
   9. CTA BANDS
   -------------------------------------------------------------------------- */
.pp-cta{
  background:linear-gradient(135deg,#253c61 0%,#151a33 100%);
  color:#fff;
  border-radius:var(--pp-radius);
  padding:42px 40px;
  margin:54px 0 10px;
}
.pp-cta h2, .pp-cta h3{ color:#fff; margin-bottom:12px; }
.pp-cta p{ color:rgba(255,255,255,.86); margin-bottom:0; }
.pp-cta a:not(.pp-btn){ color:#fff; text-decoration:underline; }
.pp-cta .pp-btn-group{ margin-top:24px; }
@media (max-width:575px){ .pp-cta{ padding:30px 22px; } }

/* --------------------------------------------------------------------------
   10. BENEFIT / FEATURE LISTS
   -------------------------------------------------------------------------- */
.pp-benefits{ list-style:none; margin:24px 0 8px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px 30px; }
.pp-benefits li{ position:relative; padding-left:30px; font-size:15.5px; line-height:1.7; color:var(--pp-ink); }
.pp-benefits li:before{
  content:"";
  position:absolute; left:0; top:9px;
  width:14px; height:14px; border-radius:50%;
  background:var(--pp-red);
  box-shadow:0 0 0 4px rgba(207,33,39,.14);
}
.pp-benefits li strong{ color:var(--pp-navy-dark); }

/* --------------------------------------------------------------------------
   11. GUIDE / ARTICLE PAGES
   -------------------------------------------------------------------------- */
.pp-article{ max-width:820px; margin:0 auto; }
.pp-article h2{ margin:38px 0 14px; }
.pp-article h3{ margin:26px 0 10px; }
.pp-article ul, .pp-article ol{ margin:0 0 22px; padding-left:22px; }
.pp-article li{ font-size:16px; line-height:1.8; margin-bottom:8px; }
.pp-article__meta{ font-size:14px; color:var(--pp-muted); margin-bottom:26px; }
.pp-callout{
  background:var(--pp-tint);
  border-left:4px solid var(--pp-navy);
  border-radius:var(--pp-radius);
  padding:22px 24px;
  margin:28px 0;
}
.pp-callout p:last-child{ margin-bottom:0; }
.pp-toc{ background:#fff; border:1px solid var(--pp-line); border-radius:var(--pp-radius); padding:22px 26px; margin:0 0 34px; }
.pp-toc h2{ font-size:17px; margin:0 0 10px; }
.pp-toc ol{ margin:0; padding-left:20px; }
.pp-toc li{ font-size:15px; margin-bottom:4px; }

/* --------------------------------------------------------------------------
   12. RELATED PRODUCTS STRIP
   -------------------------------------------------------------------------- */
.pp-related{ border-top:1px solid var(--pp-line); margin-top:56px; padding-top:34px; }
.pp-related h2{ font-size:24px; margin-bottom:22px; }
.pp-related__list{ display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:0; padding:0; }
.pp-related__list li a{
  display:inline-block;
  background:var(--pp-tint);
  border:1px solid var(--pp-line);
  border-radius:30px;
  padding:9px 20px;
  font-size:14.5px;
  font-weight:600;
  color:var(--pp-navy) !important;
  text-decoration:none !important;
}
.pp-related__list li a:hover{ background:var(--pp-navy); color:#fff !important; }

/* --------------------------------------------------------------------------
   13. IMAGES — no distortion, no layout shift
   -------------------------------------------------------------------------- */
img{ max-width:100%; height:auto; }
.product-img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:var(--pp-radius);
  display:block;
}
.product-row{ margin-bottom:54px; }
.product-row:last-child{ margin-bottom:0; }
@media (max-width:767px){
  .product-row .col-md-6 + .col-md-6{ margin-top:22px; }
  .product-row{ margin-bottom:38px; }
}

/* --------------------------------------------------------------------------
   14. ACCESSIBILITY
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #ffb703;
  outline-offset:2px;
  border-radius:3px;
}
.pp-skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--pp-navy); color:#fff; padding:12px 20px; border-radius:0 0 6px 0;
}
.pp-skip-link:focus{ left:0; }
.pp-visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.pp-service-areas{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:18px 0 0; }
.pp-service-areas li{ background:var(--pp-tint); color:var(--pp-navy); font-size:13.5px; font-weight:600; padding:8px 16px; border-radius:30px; }

/* --------------------------------------------------------------------------
   15. MOBILE OVERFLOW GUARDS
   -------------------------------------------------------------------------- */
html, body{ overflow-x:hidden; max-width:100%; }
.container{ max-width:var(--pp-container); }
pre, code{ white-space:pre-wrap; word-wrap:break-word; }
.accordion-header .title{ font-size:16.5px; line-height:1.5; padding-right:10px; }
@media (max-width:575px){
  .pp-cta h2{ font-size:22px; }
  table.pp-table{ font-size:14px; }
}

/* --------------------------------------------------------------------------
   16. HEADER TOP BAR — replaces the dead social icon row with NAP + quote CTA
   -------------------------------------------------------------------------- */
.header-top-right-part{ display:flex; align-items:center; justify-content:flex-end; gap:18px; flex-wrap:wrap; }
.header-top-right-part .address{ font-size:13.5px; color:#fff; opacity:.92; }
.header-top-right-part .address i{ margin-right:6px; }
a.pp-header-quote{
  display:inline-flex; align-items:center;
  background:#fff; color:var(--pp-navy) !important;
  font-size:13px; font-weight:700; letter-spacing:.02em;
  padding:7px 16px; border-radius:30px;
  text-decoration:none !important;
}
a.pp-header-quote:hover{ background:var(--pp-red); color:#fff !important; }
@media (max-width:991px){ .header-top-right-part{ justify-content:center; } }

/* --------------------------------------------------------------------------
   17. ON-PAGE QUOTE FORMS (product pages)
   -------------------------------------------------------------------------- */
.pp-quote-form .form-group{ margin-bottom:18px; }
.pp-quote-form .form-control{
  width:100%;
  min-height:52px;
  padding:13px 16px;
  font-size:15px;
  line-height:1.5;
  color:var(--pp-ink);
  background:#fff;
  border:1px solid var(--pp-line);
  border-radius:var(--pp-radius);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.pp-quote-form textarea.form-control{ min-height:130px; resize:vertical; }
.pp-quote-form .form-control::placeholder{ color:#98a0ae; }
.pp-quote-form .form-control:focus{
  border-color:var(--pp-navy);
  box-shadow:0 0 0 3px rgba(37,60,97,.12);
  outline:none;
}
.pp-quote-form .form-control:invalid:not(:placeholder-shown){ border-color:#d98b8b; }
#quote{ scroll-margin-top:130px; }
@media (max-width:767px){
  .pp-quote-form .form-group{ margin-bottom:14px; }
}