/*
 * lulu-sections.css (phase 8): building blocks of the informational pages (about, quality, production lines, contract manufacturing,
 * environment) and of the articles. The pages are plain HTML written with these classes (database/seeders/data/pages/*.html), so the
 * client can edit them in the page editor without the page builder. Colours come from the theme variables set by the colour settings.
 */
.lx { direction: rtl; color: var(--paragraph-color, #3d4660); line-height: 1.95; font-size: 1.05rem; }
.lx * { box-sizing: border-box; }
.lx h2, .lx h3, .lx h4 { color: var(--heading-color, #081a73); font-weight: 800; line-height: 1.45; margin: 0 0 12px; }
.lx h2 { font-size: 2rem; }
.lx h3 { font-size: 1.3rem; }
.lx p { margin: 0 0 14px; }
.lx a { color: var(--main-color-one, #0d22a3); }

.lx-section { padding: 28px 0 44px; }
.lx-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.lx-eyebrow { display: inline-block; font-size: .85rem; font-weight: 700; letter-spacing: .04em; color: #8a6a12; background: rgba(197, 155, 42, .14); padding: 4px 16px; border-radius: 999px; margin-bottom: 12px; }
.lx-head h2:after { content: ""; display: block; width: 64px; height: 4px; margin: 14px auto 0; border-radius: 3px; background: linear-gradient(90deg, #e9c75e, #c59b2a); }
.lx-lead { font-size: 1.22rem; color: var(--heading-color, #081a73); font-weight: 600; line-height: 2; }

.lx-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.lx-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.lx-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.lx-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .lx-grid.cols-3, .lx-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .lx-grid.cols-2, .lx-grid.cols-3, .lx-grid.cols-4 { grid-template-columns: 1fr; } .lx h2 { font-size: 1.6rem; } }

.lx-card { position: relative; background: #fff; border: 1px solid #e4e8f6; border-radius: 18px; padding: 28px 26px; box-shadow: 0 10px 30px rgba(13, 34, 163, .06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lx-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(13, 34, 163, .13); border-color: rgba(13, 34, 163, .25); }
.lx-card p:last-child { margin-bottom: 0; }
.lx-icon { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 23px; color: #fff; margin-bottom: 16px; background: linear-gradient(135deg, var(--main-color-one, #0d22a3), var(--main-color-two, #081a73)); box-shadow: 0 8px 18px rgba(13, 34, 163, .28); }
.lx-icon.green { background: linear-gradient(135deg, #25a07f, #1b7a63); box-shadow: 0 8px 18px rgba(27, 122, 99, .28); }
.lx-icon.gold { background: linear-gradient(135deg, #e9c75e, #b98a1c); box-shadow: 0 8px 18px rgba(185, 138, 28, .32); }
.lx-tag { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--main-color-one, #0d22a3); background: rgba(13, 34, 163, .08); padding: 2px 12px; border-radius: 999px; margin-bottom: 10px; }

.lx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 0 0 42px; }
.lx-stat { background: linear-gradient(160deg, #fff, #f3f6ff); border: 1px solid #e4e8f6; border-radius: 16px; padding: 20px 14px; text-align: center; box-shadow: 0 8px 24px rgba(13, 34, 163, .06); }
.lx-stat b { display: block; font-size: 1.9rem; line-height: 1.3; font-weight: 800; color: var(--main-color-one, #0d22a3); }
.lx-stat span { font-size: .95rem; color: var(--paragraph-color, #3d4660); }

.lx-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch; }
@media (max-width: 991px) { .lx-split { grid-template-columns: 1fr; } }
.lx-panel { background: linear-gradient(135deg, var(--main-color-two, #081a73), var(--main-color-one, #0d22a3)); color: #fff; border-radius: 20px; padding: 34px 32px; position: relative; overflow: hidden; }
.lx-panel:after { content: ""; position: absolute; left: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.lx .lx-panel h3, .lx .lx-panel h2, .lx .lx-panel p { color: #fff !important; position: relative; z-index: 1; }
.lx-panel .lx-icon { background: rgba(255, 255, 255, .16); box-shadow: none; }

.lx-check { list-style: none; margin: 0; padding: 0; }
.lx-check li { position: relative; padding: 6px 34px 6px 0; }
.lx-check li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 0; top: 7px; width: 24px; height: 24px; border-radius: 50%; background: rgba(27, 122, 99, .14); color: #1b7a63; font-size: 11px; display: flex; align-items: center; justify-content: center; }

.lx-steps { counter-reset: lxstep; display: grid; gap: 16px; }
.lx-step { counter-increment: lxstep; position: relative; background: #fff; border: 1px solid #e4e8f6; border-radius: 16px; padding: 18px 84px 18px 22px; box-shadow: 0 8px 24px rgba(13, 34, 163, .05); }
.lx-step:before { content: counter(lxstep); position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--main-color-one, #0d22a3), var(--main-color-two, #081a73)); color: #fff; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.lx-step b { display: block; color: var(--heading-color, #081a73); font-size: 1.1rem; }

.lx-goal { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid #e4e8f6; border-radius: 16px; padding: 20px 22px; }
.lx-goal > i { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: rgba(27, 122, 99, .12); color: #1b7a63; display: flex; align-items: center; justify-content: center; font-size: 20px; }

.lx-note { border-right: 4px solid #c59b2a; background: rgba(197, 155, 42, .09); border-radius: 12px; padding: 14px 20px; font-size: .98rem; }

.lx-cta { background: linear-gradient(135deg, var(--main-color-two, #081a73), var(--main-color-one, #0d22a3)); color: #fff; border-radius: 22px; padding: 38px 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; position: relative; overflow: hidden; border-bottom: 6px solid #c59b2a; }
.lx .lx-cta h3, .lx .lx-cta p { color: #fff !important; margin: 0; }
.lx-cta p { opacity: .9; margin-top: 6px; }
.lx-btn { display: inline-flex; align-items: center; gap: 10px; background: #c59b2a; color: #1a1400 !important; font-weight: 800; border-radius: 12px; padding: 13px 28px; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.lx-btn:hover { transform: translateY(-2px); background: #dcb340; }
.lx-btn.blue { background: var(--main-color-one, #0d22a3); color: #fff !important; }
.lx-btn.blue:hover { background: var(--main-color-two, #081a73); }

.lx-contact { display: grid; gap: 14px; }
.lx-contact a, .lx-contact div { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e4e8f6; border-radius: 14px; padding: 14px 18px; text-decoration: none; color: inherit; }
.lx-contact i { width: 44px; height: 44px; border-radius: 12px; background: rgba(13, 34, 163, .09); color: var(--main-color-one, #0d22a3); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }

/* article body (blog single page) */
.lx-article { font-size: 1.1rem; line-height: 2.1; }
.lx-article h2 { font-size: 1.55rem; margin-top: 34px; padding-right: 14px; border-right: 4px solid #c59b2a; }
.lx-article h3 { font-size: 1.2rem; margin-top: 24px; }
.lx-article ul, .lx-article ol { padding-right: 22px; margin: 0 0 16px; }
.lx-article li { margin-bottom: 8px; }
.lx-article blockquote { margin: 22px 0; padding: 16px 22px; border-right: 4px solid #1b7a63; background: rgba(27, 122, 99, .08); border-radius: 12px; font-weight: 600; color: var(--heading-color, #081a73); }
.lx-article table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 1rem; }
.lx-article th { background: var(--main-color-two, #081a73); color: #fff; padding: 10px 14px; text-align: right; }
.lx-article td { border-bottom: 1px solid #e4e8f6; padding: 10px 14px; }

/* the theme's own article styles centre headings and shrink the text: win them back inside .lx-article */
.lx .lx-article h2, .lx .lx-article h3, .lx-article h2, .lx-article h3 { text-align: right !important; }
.lx-article p, .lx-article li, .lx-article td { font-size: 1.08rem !important; line-height: 2.1 !important; color: var(--paragraph-color, #3d4660); text-align: right; }
.lx-article .lx-lead { font-size: 1.22rem !important; color: var(--heading-color, #081a73); font-weight: 600; }
.lx-article th { font-size: 1rem; }
.lx-article li strong { margin-left: .45em; }

/* call-to-action band of the home page: a dark brand overlay so white text stays readable over any photo */
.cta-style-seven-custom { position: relative; background-position: center; }
.cta-style-seven-custom:before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(8, 26, 115, .92), rgba(13, 34, 163, .78)); }
.cta-style-seven-custom > .container { position: relative; z-index: 1; }
.cta-style-seven-custom .cta-subtitle, .cta-style-seven-custom .cta-inner h2, .cta-style-seven-custom .cta-inner h3, .cta-style-seven-custom .cta-title { color: #fff !important; }
.cta-style-seven-custom .cta-subtitle { max-width: 760px; margin-inline: auto; line-height: 2; opacity: .95; }

/* the FAQ page: the theme's accordion (.faq-acc-*), without the scroll box it has inside a home-page section */
.faq-page-content-area .faq-acc-list { max-height: none; overflow: visible; padding-inline-start: 0; }
.faq-page-content-area .faq-acc-btn { font-size: 1.05rem; }

/* the article page: the details card is compact (views and category side by side, the share row under them) and as tall as the picture beside it */
.bsv2-wrap .psv2-grid { align-items: stretch; }
.bsv2-wrap .psv2-info { position: static; display: flex; flex-direction: column; padding: 20px 22px; }
.bsv2-wrap .psv2-summary { margin-block-end: 14px; }
.bsv2-wrap .psv2-meta-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-start: auto; }
.bsv2-wrap .psv2-meta-item { padding: 9px 12px; border-radius: 10px; }
.bsv2-wrap .psv2-meta-item b { margin-block-end: 2px; font-size: .95rem; }
.bsv2-wrap .psv2-meta-item:last-child { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bsv2-wrap .psv2-meta-item:last-child b { margin: 0; }