/*
Theme Name: CSP OPTIMA Classic
Theme URI: https://www.csp-battery.com/
Author: CSP / OpenAI migration build
Description: Responsive WordPress theme for the CSP OPTIMA battery website migration from Weebly.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: csp-optima
*/

:root {
  --csp-black:#080808;
  --csp-charcoal:#171717;
  --csp-red:#e11b22;
  --csp-yellow:#ffd900;
  --csp-blue:#1477b9;
  --csp-text:#202020;
  --csp-muted:#6d6d6d;
  --csp-line:#e7e7e7;
  --csp-bg:#ffffff;
  --csp-width:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--csp-bg);color:var(--csp-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;line-height:1.75}
a{color:var(--csp-red);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.csp-wrap{width:min(calc(100% - 36px),var(--csp-width));margin-inline:auto}
.csp-topbar{background:#000;color:#cfcfcf;font-size:13px}.csp-topbar .csp-wrap{display:flex;justify-content:flex-end;gap:18px;padding:7px 0;flex-wrap:wrap}.csp-topbar a{color:#fff}
.site-header{background:linear-gradient(180deg,#111,#050505);border-bottom:3px solid var(--csp-red);position:sticky;top:0;z-index:50;box-shadow:0 5px 20px rgba(0,0,0,.2)}
.csp-header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:92px}
.site-branding{display:flex;align-items:center;gap:14px;min-width:190px}.site-branding img{max-height:58px;width:auto}.site-title{font-weight:800;color:#fff;font-size:19px;line-height:1.15}.site-title small{display:block;color:#aaa;font-size:11px;font-weight:500;margin-top:5px;letter-spacing:.04em}
.csp-nav-toggle{display:none;background:none;border:1px solid #444;color:#fff;border-radius:6px;padding:8px 11px;font-size:22px}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px;flex-wrap:wrap}.primary-nav li{margin:0}.primary-nav a{display:block;color:#fff;padding:12px 11px;font-size:14px;font-weight:650;border-radius:5px}.primary-nav a:hover,.primary-nav .current-menu-item>a{background:#242424;color:#fff;text-decoration:none}
.site-main{min-height:60vh}.entry-header{padding:52px 0 20px}.entry-title{font-size:clamp(30px,4vw,48px);line-height:1.15;margin:0;color:#111}.entry-content{padding-bottom:64px}
.entry-content>*:not(.alignwide):not(.alignfull):not(.csp-section):not(.csp-hero){max-width:var(--csp-width);margin-left:auto;margin-right:auto}.entry-content>.alignwide{width:min(calc(100% - 36px),1280px);margin-left:auto;margin-right:auto}.entry-content>.alignfull{width:100%}
.csp-section{padding:42px 0;border-bottom:1px solid var(--csp-line)}.csp-section:last-child{border-bottom:0}.csp-section h2,.csp-section h3{line-height:1.25}.csp-section h2{font-size:clamp(25px,3vw,36px);margin:0 0 22px}.csp-section h3{font-size:22px}.csp-kicker{font-weight:800;color:var(--csp-red);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.csp-hero{background:#0a0a0a;color:#fff;padding:0}.csp-hero img{display:block;width:100%;max-height:600px;object-fit:cover}.csp-hero-copy{padding:34px 0}.csp-hero-copy h1,.csp-hero-copy h2{color:#fff;margin-top:0}
.csp-media{margin:24px auto}.csp-media img{display:block;margin:auto;border-radius:4px}.csp-media.is-bordered img{border:1px solid #ddd}.csp-video{position:relative;aspect-ratio:16/9;background:#000;margin:26px auto;max-width:980px}.csp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.csp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.csp-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.csp-card{background:#fff;border:1px solid #e6e6e6;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06)}.csp-card .csp-card-body{padding:22px}.csp-card h3{margin-top:0}.csp-card img{width:100%;display:block}.csp-card.dark{background:#111;color:#eee;border-color:#222}.csp-card.dark h3{color:#fff}
.csp-callout{border-left:5px solid var(--csp-red);background:#f7f7f7;padding:20px 24px;margin:28px auto}.csp-callout.yellow{border-left-color:var(--csp-yellow)}.csp-divider{height:6px;background:var(--csp-yellow);margin:38px auto;border-radius:10px;max-width:var(--csp-width)}
.csp-feature-list{padding-left:1.4em}.csp-feature-list li{margin-bottom:10px}.csp-review{padding:28px 0;border-bottom:1px solid #e7e7e7}.csp-review img{width:100%;margin-bottom:18px}.csp-review blockquote{margin:0;font-size:17px;color:#333}.csp-review blockquote p:first-child{margin-top:0}
.csp-location-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.csp-location{border:1px solid #e2e2e2;border-radius:8px;padding:20px}.csp-location h3{margin:0 0 8px;font-size:19px}.csp-location p{margin:4px 0}.csp-location a.csp-map-link{display:inline-block;margin-top:10px;background:#111;color:#fff;border-radius:4px;padding:7px 12px}.csp-location a.csp-map-link:hover{text-decoration:none;background:var(--csp-red)}
.site-footer{background:#080808;color:#d4d4d4;border-top:3px solid var(--csp-red);padding:42px 0 18px}.site-footer a{color:#fff}.csp-footer-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:36px}.csp-footer-logo img{max-width:210px;max-height:78px;width:auto}.csp-footer-title{color:#fff;font-size:15px;font-weight:800;margin-bottom:10px}.csp-footer-meta{font-size:14px}.csp-copyright{border-top:1px solid #262626;margin-top:28px;padding-top:16px;color:#888;font-size:12px}
.wp-block-image figcaption{color:#777;font-size:13px}.wp-block-separator{border:0;border-top:1px solid #ddd}
@media(max-width:900px){.csp-header-row{min-height:76px}.csp-nav-toggle{display:block}.primary-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#0b0b0b;border-top:1px solid #333;padding:10px 18px 18px}.primary-nav.is-open{display:block}.primary-nav ul{display:block}.primary-nav a{padding:12px}.csp-grid,.csp-grid.two{grid-template-columns:1fr}.csp-footer-grid{grid-template-columns:1fr}.csp-location-grid{grid-template-columns:1fr}.site-branding img{max-height:48px}.csp-topbar .csp-wrap{justify-content:center}}
@media(max-width:560px){.csp-wrap{width:min(calc(100% - 24px),var(--csp-width))}.entry-header{padding:34px 0 14px}.csp-section{padding:30px 0}.csp-topbar{display:none}.site-title{font-size:16px}}