/*
 Theme Name:   LP Steel Child
 Theme URI:    https://lpsteelindustries.com
 Description:  LP Steel Industries child theme for Divi 5
 Author:       Emercive Marketing
 Author URI:   https://emercivemarketing.com
 Template:     Divi
 Version:      1.0.0
 Text Domain:  lpsteel-child
*/

/* ─────────────────────────────────────────────────────────────────────────────
   LP STEEL DESIGN TOKENS
   Mirror of Divi Global Variables — use as CSS fallbacks
───────────────────────────────────────────────────────────────────────────── */
:root {
  --lp-navy:        #002b5c;
  --lp-rust:        #c2632a;
  --lp-rust-hover:  #ae5925;
  --lp-charcoal:    #231f20;
  --lp-ink:         #14110f;
  --lp-sand:        #ebdfc7;
  --lp-cream:       #faf5ea;
  --lp-bg-light:    #f3f2ef;
  --lp-white:       #ffffff;
  --lp-galv:        #aeb0af;
  --lp-rule:        2px solid var(--lp-rust);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE ↔ HEADER ALIGNMENT
   The header rows use max-width:1400px. Divi's DEFAULT row width is the
   --content-max-width variable (1080px), so default page rows sit inset from
   the header's left/right edges. Lifting the variable to 1400px aligns every
   default-width row to the header. Rows given an explicit width in the builder
   set a literal max-width and are NOT affected (narrow text / full-bleed keep
   their intended width).
───────────────────────────────────────────────────────────────────────────── */
:root { --content-max-width: 1400px; }
/* Override Divi's default row max-width (1080px) to match the header (1400px).
   Equal specificity to Divi's base rule + loaded after it via the child theme,
   so it wins over the default — but Divi's per-row rules (explicit narrow/
   full-bleed widths) have higher specificity and still win, so intentional
   widths are preserved. */
.et_pb_row:not([class*=et_flex_column]) { max-width: 1400px; }

/* ─────────────────────────────────────────────────────────────────────────────
   PHOTO-CLIP TEXT SYSTEM
   Usage: Add class "lp-clip-rpanel", "lp-clip-coil", "lp-clip-mill", etc.
   to any Text or Heading module via Advanced → CSS Class.
   The text content renders with the photo showing through letterforms.
   Works reliably on all backgrounds — no blend mode dependency.
───────────────────────────────────────────────────────────────────────────── */

/* Base clip class — apply alongside an image class */
.lp-clip-text,
.lp-clip-rpanel,
.lp-clip-coil,
.lp-clip-mill,
.lp-clip-sparks,
.lp-clip-steel {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  display: inline-block;
  width: 100%;
}

/* Image sources — uses actual LP Steel photos */
.lp-clip-stock {
  background-image: url('/wp-content/uploads/2026/05/AdobeStock_1908354212_Preview.jpeg');
  background-position: center 40%;
}
.lp-clip-coil {
  background-image: url('/wp-content/uploads/2026/05/coil-handler-loading-blue-peterbilt-arizona-1.jpg');
  background-position: center 50%;
}
.lp-clip-mill {
  background-image: url('/wp-content/uploads/2026/05/Arizona_Phoenix_Skyline.jpg');
  background-position: center 65%;
}
.lp-clip-sparks {
  background-image: url('/wp-content/uploads/2026/05/cnc-saw-cutting-steel-sparks-maricopa-arizona.jpg');
  background-position: 30% 60%;
}
.lp-clip-steel {
  background-image: url('/wp-content/uploads/2026/05/purlin-line-blue-roll-former-maricopa-arizona.jpg');
  background-position: center 40%;
}

/* Fallback gradient for each (shows if image fails to load) */
.lp-clip-rpanel  { background-color: #8a4419; }
.lp-clip-coil    { background-color: #a86a35; }
.lp-clip-mill    { background-color: #5a5550; }
.lp-clip-sparks  { background-color: #d4842a; }
.lp-clip-steel   { background-color: #5a4a3a; }

/* Target the actual text elements inside Divi modules (h1/h2 deliberately excluded —
   no child-theme CSS controls h1/h2; this clip utility is unused on any page anyway) */
.lp-clip-rpanel h3,
.lp-clip-rpanel h4, .lp-clip-rpanel p, .lp-clip-rpanel span,
.lp-clip-coil h3,
.lp-clip-coil h4, .lp-clip-coil p, .lp-clip-coil span,
.lp-clip-stock h3,
.lp-clip-stock h4, .lp-clip-stock p, .lp-clip-stock span,
.lp-clip-mill h3,
.lp-clip-mill h4, .lp-clip-mill p, .lp-clip-mill span,
.lp-clip-sparks h3,
.lp-clip-sparks h4, .lp-clip-sparks p, .lp-clip-sparks span,
.lp-clip-steel h3,
.lp-clip-steel h4, .lp-clip-steel p, .lp-clip-steel span {
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: inherit;
  color: inherit;
  background: none;
}

/* When applied directly to a heading/text module's wrapper div */
.et_pb_text.lp-clip-rpanel .et_pb_text_inner,
.et_pb_text.lp-clip-coil .et_pb_text_inner,
.et_pb_text.lp-clip-stock .et_pb_text_inner,
.et_pb_text.lp-clip-mill .et_pb_text_inner,
.et_pb_text.lp-clip-sparks .et_pb_text_inner,
.et_pb_text.lp-clip-steel .et_pb_text_inner {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Divi 5 block wrapper targeting */
.wp-block-divi-text.lp-clip-stock,
.wp-block-divi-text.lp-clip-rpanel,
.wp-block-divi-heading.lp-clip-rpanel,
.wp-block-divi-text.lp-clip-coil,
.wp-block-divi-heading.lp-clip-coil,
.wp-block-divi-text.lp-clip-mill,
.wp-block-divi-heading.lp-clip-mill,
.wp-block-divi-text.lp-clip-sparks,
.wp-block-divi-heading.lp-clip-sparks,
.wp-block-divi-text.lp-clip-steel,
.wp-block-divi-heading.lp-clip-steel {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EYEBROW TEXT UTILITY
   Class: lp-eyebrow
   Usage: Add to any Text module. The text renders as uppercase eyebrow
   with rust rule prefix (::before pseudo-element).
───────────────────────────────────────────────────────────────────────────── */
.lp-eyebrow,
.lp-eyebrow p {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: var(--lp-rust) !important;
  display: inline-flex !important;
  align-items: left !important;
  gap: 12px !important;
}
.lp-eyebrow p::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--lp-rust);
  flex-shrink: 0;
}
.lp-eyebrow--light,
.lp-eyebrow--light p {
  color: var(--lp-sand) !important;
}
.lp-eyebrow--light p::before {
  background: var(--lp-sand);
}

/* ─────────────────────────────────────────────────────────────────────────────
   IMAGE STYLES
   Class: lp-img-rounded
   Applies 12px rounded corners + shadow to image modules.
───────────────────────────────────────────────────────────────────────────── */
.lp-img-rounded img,
.lp-img-rounded .et_pb_image_wrap,
.lp-img-rounded .wp-block-divi-image img {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .14);
}

/* Large rounded — 20px for hero/feature images */
.lp-img-rounded-lg img,
.lp-img-rounded-lg .wp-block-divi-image img {
  border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .20);
}

/* Overlay label on images (location/caption labels in the mill strip) */
.lp-img-labeled {
  position: relative;
}
.lp-img-labeled::after {
  content: attr(data-label);
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--lp-white);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARD STYLES
   Class: lp-card
   Base card — white bg, subtle border, hover lift + rust border.
───────────────────────────────────────────────────────────────────────────── */
.lp-card {
  background: var(--lp-white);
  border: 1px solid rgba(20, 17, 15, .12);
  border-radius: 12px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.lp-card:hover {
  transform: translateY(-3px);
  border-color: var(--lp-rust);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .10);
}
.lp-card--cream {
  background: var(--lp-cream);
  border-color: #d8c89f;
}
.lp-card--dark {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION DIVIDER RULE
   Class: lp-section-rule
   Adds the rust 2px bottom border automatically on sections.
───────────────────────────────────────────────────────────────────────────── */
.lp-section-rule {
  border-bottom: var(--lp-rule) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHIP / TAG SYSTEM
   Class: lp-chips (on wrapper), lp-chip (on each span/tag)
───────────────────────────────────────────────────────────────────────────── */
.lp-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.lp-chip {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(235, 223, 199, .28);
  color: var(--lp-sand);
  border-radius: 30px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  background: rgba(255, 255, 255, .04);
  white-space: nowrap;
}
.lp-chip--dark {
  border-color: rgba(20, 17, 15, .18);
  color: var(--lp-charcoal);
  background: var(--lp-white);
}

/* ─────────────────────────────────────────────────────────────────────────────
   STAT DISPLAY
   Class: lp-stat-num
   Large rust stat number with small suffix text.
───────────────────────────────────────────────────────────────────────────── */
.lp-stat-num,
.lp-stat-num p {
  font-size: 54px !important;
  line-height: 1 !important;
  color: var(--lp-rust) !important;
  letter-spacing: -.02em !important;
  font-weight: 900 !important;
  margin: 0 !important;
}
.lp-stat-label,
.lp-stat-label p {
  font-size: 11px !important;
  color: rgba(255, 255, 255, .70) !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
  line-height: 1.4 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LANE CARD (horizontal photo + content)
   Class: lp-lane
   Full horizontal card with image on left, content on right.
   Use in a text module with inline HTML.
───────────────────────────────────────────────────────────────────────────── */
.lp-lane {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(20, 17, 15, .12);
  background: var(--lp-white);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  min-height: 148px;
  text-decoration: none;
  color: inherit;
}
.lp-lane:hover {
  transform: translateY(-3px);
  border-color: var(--lp-rust);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .10);
}
.lp-lane__img {
  flex-shrink: 0;
  width: 140px;
  background-size: cover;
  background-position: center;
  transition: transform .5s;
}
.lp-lane:hover .lp-lane__img {
  transform: scale(1.06);
}
.lp-lane__body {
  flex: 1;
  padding: 16px 40px 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lp-lane__num {
  font-size: 12px;
  font-style: italic;
  color: var(--lp-rust);
  margin-bottom: 4px;
}
.lp-lane__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--lp-navy);
  margin: 0 0 4px;
  line-height: 1.05;
}
.lp-lane__desc {
  font-size: 12px;
  color: #3a3537;
  margin: 0;
  line-height: 1.5;
}
.lp-lane--sister {
  background: var(--lp-cream);
  border-color: #d8c89f;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REVIEW CARD
   Class: lp-review
───────────────────────────────────────────────────────────────────────────── */
.lp-review {
  background: var(--lp-white);
  border: 1px solid rgba(20, 17, 15, .10);
  border-radius: 12px;
  padding: 28px 26px;
}
.lp-review__stars {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  color: var(--lp-rust);
}
.lp-review__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.lp-review__quote {
  font-size: 40px;
  color: var(--lp-rust);
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}
.lp-review__author {
  font-weight: 800;
  color: var(--lp-charcoal);
  font-size: 14px;
}
.lp-review__meta {
  font-size: 11px;
  color: var(--lp-galv);
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TIMELINE ENTRY
   Class: lp-timeline-item
───────────────────────────────────────────────────────────────────────────── */
.lp-timeline-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
  border-top: 1px solid rgba(20, 17, 15, .12);
  padding-top: 24px;
  margin-bottom: 28px;
}
.lp-timeline-item--first {
  border-top-width: 2px;
  border-top-color: var(--lp-ink);
}
.lp-timeline-year {
  font-size: 14px;
  font-weight: 700;
  color: var(--lp-rust);
  letter-spacing: .08em;
  font-family: monospace;
}
.lp-timeline-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--lp-navy);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .005em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-card,
  .lp-lane,
  .lp-lane__img {
    transition: none !important;
    transform: none !important;
  }
}