﻿/* ============================================================
   THE ULTIMATE SYSTEM - CMS section styles (storefront)
   ============================================================ */
.cms-prose { font-size:0.98rem; line-height:1.9; color:var(--text); }

/* ---- Page Builder per-section design helpers (render_page.php) ---- */
.sec-styled { position:relative; }
.sec-styled, .sec-styled h1, .sec-styled h2, .sec-styled h3, .sec-styled h4,
.sec-styled p, .sec-styled .muted, .sec-styled .cms-prose,
.sec-styled figcaption, .sec-styled .product-card-desc, .sec-styled .product-price {
    color:inherit;
}
.sec-styled h1, .sec-styled h2 { font-size:var(--sec-head-fs, inherit); }
.sec-bgimg { background-size:cover; background-position:center; background-repeat:no-repeat; }
.sec-bgimg.sec-overlay::before {
    content:''; position:absolute; inset:0; z-index:0;
    background:color-mix(in srgb, var(--dark) calc(var(--sec-overlay, .3) * 100%), transparent);
}
.sec-overlay > * { position:relative; z-index:1; }
.cms-split {
    display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
    max-width:1100px; margin:0 auto;
}
.cms-split-img img {
    width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
.feat-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px;
    max-width:1150px; margin:0 auto;
}
.feat-card { text-align:center; padding:30px 22px; transition:var(--transition); }
.feat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.feat-icon { font-size:1.7rem; color:var(--primary); margin-bottom:14px; display:block; }
/* Alternate feature-card icons pick up the brand Accent colour */
.feat-grid > .feat-card:nth-child(even):not(.has-list) .feat-icon { color:var(--accent); }
.sf-cta {
    background:radial-gradient(900px 420px at 12% 115%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
               linear-gradient(135deg,var(--primary),var(--primary-hover));
    color:#fff; text-align:center; padding:74px 24px;
}
.sf-cta h2 { color:#fff; font-size:clamp(1.6rem,3.5vw,2.4rem); margin-bottom:12px; letter-spacing:-.02em; }
.sf-cta p { color:rgba(255,255,255,.85); max-width:600px; margin:0 auto 24px; }
.sf-cta-btn {
    display:inline-block; background:var(--surface); color:var(--primary-hover);
    padding:13px 34px; border-radius:999px; font-weight:800; transition:var(--transition);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.sf-cta-btn:hover { transform:translateY(-2px); color:var(--primary-hover); }
.contact-grid {
    display:grid; grid-template-columns:1fr 1.2fr; gap:22px; max-width:1050px; margin:0 auto;
}
@media (max-width:800px) {
    .cms-split, .contact-grid { grid-template-columns:1fr; }
}

/* ---- Page Builder extras (v3.0): hero buttons, rich-text button, feature links ---- */
.sf-hero-btns {
    display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px;
}
.sf-hero-btn {
    display:inline-block; background:var(--surface); color:var(--primary-hover);
    padding:13px 34px; border-radius:999px; font-weight:800; transition:var(--transition);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.sf-hero-btn:hover { transform:translateY(-2px); color:var(--primary-hover); }
.sf-hero-btn.alt {
    background:transparent; color:#fff; border:2px solid rgba(255,255,255,.65); box-shadow:none;
}
.sf-hero-btn.alt:hover { background:rgba(255,255,255,.12); }
.cms-btn {
    display:inline-block; background:var(--primary); color:#fff;
    padding:12px 30px; border-radius:999px; font-weight:700; transition:var(--transition);
}
.cms-btn:hover { background:var(--primary-hover); transform:translateY(-2px); color:#fff; }
.feat-link {
    display:inline-block; margin-top:14px; font-size:.82rem; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase; color:var(--primary); transition:var(--transition);
}
.feat-link:hover { color:var(--primary-hover); }
.feat-link i { margin-left:6px; font-size:.72rem; }

/* ---- Image & Layout (v3.0): per-section media placement ---- */
@media (min-width:801px) {
    .cms-split.media-right > *:first-child { order:2; }   /* image swings right */
    .cms-split.media-right > *:last-child  { order:1; }   /* text slides left   */
}
.cms-split.media-top { display:block; }                   /* stacked: image above */
.cms-split.media-top .cms-split-img { margin-bottom:24px; }

/* Generic engine (v3.0): ANY section inside an Image & Layout split/stack */
.cms-split-body > .sf-section,
.cms-split-body > .sf-hero { padding:10px 0; max-width:none; margin:0; }
.cms-split-body .sf-section-title { text-align:left; }
.cms-split-body .sf-section-title::after { margin-left:0; }
.cms-top-media { max-width:1200px; margin:0 auto 26px; padding:0 24px; }
.cms-top-media img { width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:block; }
@media (max-width:800px) {
    .cms-split-body > .sf-section,
    .cms-split-body > .sf-hero { padding-top:0; }
}

/* ---- Native hero split (Image & Layout) ---- */
.sf-band { width:100%; padding:72px 30px; }
.sf-band .cms-split { max-width:1200px; margin:0 auto; }
.sf-band.media-right .cms-split > *:first-child { order:2; }
.sf-band.media-right .cms-split > *:last-child  { order:1; }
.sf-band .cms-split.media-top { display:block; }
.cms-split-richtext { text-align:left; align-items:center; }
.cms-split-richtext .cms-split-img img { border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:block; }
.cms-split-title { color:inherit; font-size:clamp(1.4rem,3vw,2.1rem); letter-spacing:-.01em; margin-bottom:14px; }
.cms-split-sub { color:inherit; font-weight:600; font-size:1.08rem; margin-bottom:12px; opacity:.9; }
.cms-split-richtext .cms-prose { color:inherit; }
.sf-band.cms-richband .cms-prose { color:inherit; }

/* ---- CMS richtext content styling ---- */
.cms-prose { line-height:1.7; color:var(--text); }
.cms-prose h2 { font-size:1.4rem; font-weight:700; color:var(--heading); margin:28px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.cms-prose h2:first-child { margin-top:0; }
.cms-prose p { margin:0 0 14px; }
.cms-prose ul, .cms-prose ol { margin:0 0 14px; padding-left:24px; }
.cms-prose li { margin-bottom:6px; }
.cms-prose strong { color:var(--heading); font-weight:700; }
.cms-prose a { color:var(--primary); text-decoration:underline; }

.sf-hero-split { text-align:left; padding:72px 24px; }
.sf-hero-split .sf-hero-layout {
    max-width:1200px; margin:0 auto; display:grid;
    grid-template-columns:1fr 1fr; gap:48px; align-items:center; text-align:left;
}
.sf-hero-split .sf-hero-media img {
    width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:block;
}
.sf-hero-split.media-right .sf-hero-layout > *:first-child { order:2; }
.sf-hero-split.media-right .sf-hero-layout > *:last-child  { order:1; }
.sf-hero-split .sf-hero-layout.media-top { display:block; text-align:center; }
.sf-hero-split .sf-hero-layout.media-top .sf-hero-media { margin-bottom:32px; }
.sf-hero-split h1 { color:#fff; font-size:clamp(1.9rem,4.4vw,3rem); letter-spacing:-.03em; margin-bottom:14px; }
.sf-hero-split p { color:#cbd5e1; max-width:600px; margin:0 0 18px; }
.sf-hero-split .sf-hero-media { display:flex; align-items:center; }
@media (max-width:800px) {
    .sf-hero-split .sf-hero-layout { grid-template-columns:1fr; gap:28px; }
    .sf-hero-split.media-right .sf-hero-layout > *:first-child,
    .sf-hero-split.media-right .sf-hero-layout > *:last-child { order:0; }
}

/* ---- Feature cards with bullet lists (v3.1 — e.g. Industries page) ---- */
.feat-card.has-list {
    text-align:left; display:flex; flex-direction:column;
    border-top:4px solid var(--primary);
}
.feat-card.has-list .feat-icon {
    width:55px; height:55px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius:12px; font-size:1.25rem; margin:0 0 16px;
}
.feat-card.has-list h4 { font-size:1.02rem; }
.feat-list { list-style:none; margin:12px 0 6px; padding:0; flex:1; }
.feat-list li {
    display:flex; align-items:center; gap:9px; margin-bottom:7px;
    font-size:.9rem; color:var(--text); line-height:1.4;
}
.feat-list li i { color:var(--primary); font-size:.78rem; flex-shrink:0; }
.feat-card.has-list .feat-link { margin-top:auto; padding-top:12px; }

/* ---- SEO landing pages (v3.4 — seo-page.php) ---- */
.seo-content { max-width:860px; margin:0 auto; }
.seo-content h2 { font-size:1.45rem; margin:30px 0 12px; letter-spacing:-.01em; }
.seo-content h3 { font-size:1.12rem; margin:22px 0 10px; color:var(--heading); }
.seo-content p  { margin:0 0 14px; line-height:1.85; }
.seo-content ul { margin:0 0 16px; padding-left:4px; list-style:none; }
.seo-content ul li {
    position:relative; padding-left:26px; margin-bottom:8px; line-height:1.6;
}
.seo-content ul li::before {
    content:'\f058'; font-family:'Font Awesome 6 Free'; font-weight:900;
    color:var(--primary); position:absolute; left:0; top:1px; font-size:.85rem;
}
.seo-content strong { color:var(--heading); }
