/* ============================================================
   READABILITY & POLISH LAYER
   Loaded LAST (after light-theme.css) so it wins the cascade.
   Goal: every letter clearly visible + cleaner spacing/rhythm.

   SAFETY: the site still has a few dark-background zones with
   light text -- product hero (.product-hero*), the datasheet
   band (.datasheet-row) and a dark FAQ band. This file never
   darkens text inside those; it only targets components that
   sit on white/light backgrounds.

   Reversible: remove the <link> in include/css-tag.php.
   ============================================================ */

/* ---------------------------------------------------------
   1. CONTRAST FLOOR
   The template scatters faint grays: #a9a6a5 (~2.6:1),
   #94a3b8, #64748b, #888, #999 -- several fail WCAG on white.
   Pull body text to near-black and muted text to >= 7:1.
   --------------------------------------------------------- */
:root{
  --pm-text: #14181f;
  --pm-text-muted: #3d4654;   /* ~8:1 on white */
}

body{ color:#14181f; }

/* Long-form / list / table text -> near-black */
p, li, dd, blockquote,
.text, .text p, .content-box p,
td, th{ color:#1f2733; }

/* Secondary "description" copy across the modern components
   (all on light backgrounds). ~8:1 instead of ~4.5:1. */
.ad-head p, .ad-card p,
.tool-card p,
.bento-item p, .bento-content p,
.blog-card-excerpt, .blog-card-body,
.industry-card p,
.service-block p, .service-block-two p, .service-block-three p,
.feature-item p, .feature-text,
.faq-answer, .faq-answer p,
.cert-badge-desc, .cert-badge-item .badge-text p,
.author-company,
.about-text, .about-content-col p,
.comparison-table tbody td,
.sec-title .text, .section-desc, .sec-desc{
  color:#3d4654 !important;
}

/* Small uppercase eyebrows / labels / pills -- were light gray */
.sub-title, .sec-title .sub-title,
.section-label, .section-tag,
.badge-tag, .tool-card .badge-tag,
.ad-badge, .cert-badge-label,
.pricing-table .title-box p{
  color:#334155 !important;
}

/* Explicitly darken all headings and gradients on light backgrounds.
   light-theme.css tries to override gradients to solid text, but
   some selectors have competing specificity. Force dark text everywhere
   text sits on white/light gray bg (process, cta, about sections). */
.section-title,
.section-title .text-gradient,
.section-title .text-gradient *,
.cta-section .section-title,
.cta-section .section-title *,
.cta-section .text-gradient,
.cta-section .text-gradient *,
.process-section .section-title,
.process-section .section-title *{
  color: #0c1f3f !important;
  -webkit-text-fill-color: #0c1f3f !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* The 60px accent bar under .section-title (modern.css:3930) is
   `display:block; width:60px` with no auto margins, so it pins to the LEFT
   edge of the heading block. modern.css only centres it for
   `.section-title.text-center`, `.sec-title.centred` and `.products-header`.
   Every other centred header -- industries, exports, process, CTA -- was
   left out, so the bar sat at the container's left edge while the heading
   text was centred above it, reading as a stray line. Centre it for those. */
.industries-header .section-title::after,
.exports-header .section-title::after,
.process-header .section-title::after,
.cta-inner .section-title::after,
.seo-block-header .section-title::after,
.blog-header .section-title::after{
  margin-left:auto;
  margin-right:auto;
}

/* Headings are a SINGLE colour -- the accent word matches the rest of the
   heading rather than picking up a second tone.
   These selectors also have to stay at (0,3,0): visual-upgrade.css:1216
   forces the CTA accent word white at that specificity (a leftover from when
   the CTA band was dark navy, before light-theme.css turned it light grey),
   which rendered it invisible on the light band. Equal specificity + later
   load order wins. */
.cta-section .section-title .text-gradient,
.cta-section .section-title .text-gradient *,
.cta-inner .section-title .text-gradient,
.cta-inner .section-title .text-gradient *,
.section-title .text-gradient,
.section-title .text-gradient *{
  color: #0c1f3f !important;
  -webkit-text-fill-color: #0c1f3f !important;
}

/* Breadcrumbs, meta text, dates, post info */
.breadcrumb-modern .current, .breadcrumb-modern .separator,
.breadcrumb-modern span,
.bread-crumb li, .page-title .bread-crumb li,
.post-date, .post-info li, .post-info li i,
.blog-card-category, .meta, .date{
  color:#475569 !important;
}

/* Form fields + placeholders clearly legible */
input:not([type=submit]):not([type=button]),
textarea, select{ color:#14181f !important; }
input::placeholder, textarea::placeholder{
  color:#6b7280 !important; opacity:1 !important;
}

/* Safety re-assert: never darken text inside the dark zones */
.product-hero, .product-hero *,
.datasheet-row, .datasheet-row *{ }
.product-hero p, .product-hero .product-hero-desc,
.product-hero-eyebrow{ color:inherit !important; }

/* ---------------------------------------------------------
   2. TYPOGRAPHIC RHYTHM
   Small text was cramped; give it a touch more line-height
   and tidy heading spacing so blocks read cleanly.
   --------------------------------------------------------- */
p{ line-height:1.7; }
.ad-card p, .tool-card p, .bento-item p,
.faq-answer p, .service-block p{ line-height:1.65; }

h1,h2,h3,h4,h5,h6{ letter-spacing:-0.01em; }
h2{ line-height:1.2; }

/* Anchor target (#downloads etc.) shouldn't hide under the
   sticky header when linked to. */
[id]{ scroll-margin-top:110px; }

/* ---------------------------------------------------------
   3. SPACING / ALIGNMENT POLISH (safe, additive)
   --------------------------------------------------------- */
/* Consistent, comfortable gaps for the tool/download card grids */
.tool-cards, .ad-grid{ align-items:stretch; }
.tool-card, .ad-card{ height:100%; }

/* Cards: subtle, consistent border + hover so edges are crisp
   on white (faint 1px borders often disappeared). */
.ad-card, .tool-card, .bento-item,
.industry-card, .cert-badge-item{
  border-color:#e3e8ef;
}

/* Keep long tables from overflowing the viewport on mobile */
.comparison-table, .datasheet-table{ width:100%; }

/* ---------------------------------------------------------
   3b. HOMEPAGE HERO -- photo background
   light-theme.css deliberately blanks the hero: white bg, the
   3-slide slideshow hidden, all hero text forced to #141414.
   Restore a single still photo (the corrugation machine) behind
   it with a left-weighted scrim, and flip the type back to white.
   Everything here is scoped to .hero-section so nothing leaks.
   --------------------------------------------------------- */
.hero-section{ background:#0a1830 !important; }

/* the photo */
.hero-section::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:url('../images/background/manufacturing-hero.jpg') center/cover no-repeat;
}
/* scrim -- heaviest on the left where the copy sits, easing right so the
   hose and yellow machinery stay visible. Over the brightest pixel of the
   photo the left end still resolves to ~rgb(21,30,46): white type ~15:1. */
.hero-section::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(95deg, rgba(6,16,33,.95) 0%, rgba(6,16,33,.90) 42%,
                            rgba(6,16,33,.62) 72%, rgba(6,16,33,.42) 100%),
    linear-gradient(to top, rgba(6,16,33,.55) 0%, transparent 38%);
}
/* keep the slideshow hidden -- we want one still, not a rotation */
.hero-section .hero-slideshow, .hero-section .hero-overlay{ display:none !important; }
.hero-section > .container-modern,
.hero-section .hero-scroll-hint{ position:relative; z-index:2; }

/* type back to white */
.hero-section .hero-title, .hero-section .hero-title *,
.hero-section .hero-desc, .hero-section .hero-trust-indicator,
.hero-section .stat-number, .hero-section .stat-label,
.hero-section .counter, .hero-section h1, .hero-section p,
.hero-section .hero-scroll-hint span{
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
/* single-colour heading: the accent phrase matches the rest of the hero
   title rather than introducing a second tone (white here, since the
   heading sits on the dark photo) */
.hero-section .hero-title .highlight,
.hero-section .hero-title .highlight.text-gradient,
.hero-section .hero-title .text-gradient,
.hero-section .hero-title .text-gradient *{
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  background:none !important;
}
.hero-section .hero-trust-indicator i{ color:#fff !important; }
.hero-section .stat-label{ color:rgba(226,236,248,.75) !important; }

/* badge -- light-theme gives it a light-grey fill that floats oddly on dark */
.hero-section .hero-badge{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#fff !important;
}
.hero-section .hero-badge .badge-dot{ background:#66b3ff !important; }

/* buttons -- light-theme makes these near-black, which goes muddy on navy.
   One solid white primary, two outlined. */
.hero-section .btn-modern.btn-cta{
  background:#fff !important; color:#0a1830 !important; border-color:#fff !important;
}
.hero-section .btn-modern.btn-cta:hover{ background:#e8eef7 !important; color:#0a1830 !important; }
.hero-section .btn-modern.btn-cta i{ color:#0a1830 !important; }
.hero-section .btn-modern.btn-whatsapp,
.hero-section .btn-modern.btn-secondary{
  background:transparent !important; color:#fff !important;
  border:1.5px solid rgba(255,255,255,.55) !important;
}
.hero-section .btn-modern.btn-whatsapp:hover,
.hero-section .btn-modern.btn-secondary:hover{
  background:rgba(255,255,255,.12) !important; color:#fff !important;
  border-color:#fff !important;
}
.hero-section .btn-modern.btn-whatsapp i,
.hero-section .btn-modern.btn-secondary i{ color:#fff !important; }

/* ---------------------------------------------------------
   4. FIX THE BROKEN SCROLL-REVEAL (all breakpoints)
   The scroll-reveal JS leaves elements frozen mid-animation:
   .reveal-left/.reveal-right keep an inline translateX(+/-29px)
   that never resets (clips text off the edge -- e.g. the About Us
   intro, desktop AND mobile), and reveal images get stuck at
   ~0.04 opacity (the facility photo was practically invisible).
   The CSS resting state is meant to be opacity:1/transform:none,
   so we force exactly that. A broken entrance animation is worse
   than none. (!important beats the JS inline style, which has none.)
   --------------------------------------------------------- */
.reveal, .reveal-left, .reveal-right, .reveal-scale,
.reveal img, .reveal-left img, .reveal-right img, .reveal-scale img{
  transform:none !important;
  opacity:1 !important;
}

/* modern.css hides EVERY lazy image (`img[loading="lazy"]{opacity:0}`)
   and fades it in via JS on load. When that handler misses, the image
   stays invisible (e.g. the About Us team photo). Native lazy-loading
   needs no opacity trick -- keep lazy images fully visible. */
img[loading="lazy"]{ opacity:1 !important; }

/* ---------------------------------------------------------
   5. MOBILE LEGIBILITY
   Make sure nothing drops below a comfortable reading size
   and sections don't feel cramped on phones.
   --------------------------------------------------------- */
@media (max-width:600px){
  body{ font-size:16px; line-height:26px; }
  p, li{ font-size:15.5px; }
  .ad-card p, .tool-card p, .bento-item p,
  .faq-answer p{ font-size:14.5px; }
  h1{ line-height:1.18; }
  h2{ font-size:26px; line-height:1.22; }
}