/* Custom styles for Arrington Lumber */
html {
    scroll-behavior: smooth;
}

.hero-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
}

/* Prose typography for content pages */
.prose {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #374151;
}
.prose p {
    margin-bottom: 1.25em;
}
.prose p:last-child {
    margin-bottom: 0;
}
.prose a {
    color: #E23328;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose a:hover {
    color: #C41E14;
}
.prose strong {
    color: #1A1A1A;
    font-weight: 600;
}
.prose h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: #1A1A1A;
}
.prose h5 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: #1A1A1A;
}
.prose blockquote.pullquote,
.prose blockquote {
    border-left: 4px solid #E23328;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-size: 1.125rem;
    font-style: italic;
    color: #4B5563;
}
.prose ul.checkmark {
    padding-left: 0;
}
.prose ul.checkmark li {
    list-style: none;
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 1.25em;
}
.prose ul.checkmark li::before {
    content: "\2713";
    color: #E23328;
    font-weight: bold;
    position: absolute;
    left: 0;
}
.prose ul.link-list {
    list-style: none;
    padding-left: 0;
}
.prose ul.link-list li {
    padding: 0.25rem 0;
}
.prose ul.link-list a {
    color: #E23328;
    text-decoration: underline;
}
.prose img {
    border-radius: 0.375rem;
    margin: 1rem 0;
}
.prose .alignleft {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.nav-active {
    border-bottom: 2px solid #E23328;
}

/* Section sub-nav (company, process, products) */
.step-nav {
    position: sticky;
    top: 96px; /* header height */
    z-index: 40;
    background: #1A1A1A;
    border-bottom: 4px solid #E23328;
    overflow-x: auto;
    scrollbar-width: none;
}
.step-nav::-webkit-scrollbar { display: none; }
.step-nav a {
    display: inline-flex;
    align-items: center;
    padding: 1rem 1.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9CA3AF;
    white-space: nowrap;
    transition: color 0.2s;
    border-right: 1px solid #374151;
}
.step-nav a:last-child { border-right: none; }
.step-nav a:hover { color: #fff; }
.step-nav a.active { color: #fff; }

/* Process page — decorative step numbers */
.step-number {
    font-size: clamp(80px, 12vw, 140px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    user-select: none;
    pointer-events: none;
}

/* Process page — parallax image sections */
.parallax-section {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
/* iOS Safari fallback — fixed attachment not supported */
@supports (-webkit-overflow-scrolling: touch) {
    .parallax-section { background-attachment: scroll; }
}

/* Prose on dark backgrounds */
.prose-dark {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #D1D5DB;
}
.prose-dark p { margin-bottom: 1.25em; }
.prose-dark p:last-child { margin-bottom: 0; }
.prose-dark a { color: #F87171; text-decoration: underline; text-underline-offset: 2px; }
.prose-dark strong { color: #fff; font-weight: 600; }

/* Stat callout blocks */
.stat-callout {
    border-left: 4px solid #E23328;
    padding-left: 1.25rem;
}
.stat-callout .stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
.stat-callout .stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6B7280;
    margin-top: 0.25rem;
}

/* Country tags for heat treating */
.country-tag {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: #F3F2EF;
    color: #374151;
    border-radius: 0.25rem;
    margin: 0.2rem;
}