/*
Theme Name: Super Service Corona Final
Theme URI: https://superserviceofcorona.com/
Author: Super Service / TopRankROI
Description: Custom conversion-focused, local-SEO WordPress theme for Super Service of Corona Hills — Auto & Fleet Repair Shop in Corona, CA.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: super-service-corona-final
License: GPL-2.0-or-later
*/

:root {
  --ssc-navy: #06162e;
  --ssc-black: #03070d;
  --ssc-blue: #0055c0;
  --ssc-blue-bright: #0878e8;
  --ssc-blue-deep: #033c8f;
  --ssc-magenta: #e21caf;
  --ssc-magenta-deep: #a70780;
  --ssc-silver: #dce4ed;
  --ssc-silver-dark: #9ba9b8;
  --ssc-white: #ffffff;
  --ssc-ink: #142033;
  --ssc-muted: #59687a;
  --ssc-soft: #f4f7fb;
  --ssc-border: #dbe3ec;
  --ssc-shadow: 0 20px 55px rgba(6, 22, 46, .16);
  --ssc-radius: 22px;
  --ssc-max: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ssc-white);
  color: var(--ssc-ink);
  font-family: "Barlow", "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--ssc-magenta); outline-offset: 3px; }

.ssc-shell { width: min(calc(100% - 36px), var(--ssc-max)); margin-inline: auto; }
.ssc-section { padding: 78px 0; }
.ssc-eyebrow {
  margin: 0 0 12px;
  color: var(--ssc-blue-deep);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ssc-title {
  margin: 0;
  color: var(--ssc-navy);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: .98;
  text-transform: uppercase;
}
.ssc-subtitle { margin: 18px 0 0; color: var(--ssc-muted); font-size: clamp(1.02rem, 1.7vw, 1.2rem); }
.ssc-skip-link { position: fixed; left: 12px; top: -80px; z-index: 9999; background: var(--ssc-white); color: var(--ssc-navy); padding: 12px 16px; border-radius: 8px; font-weight: 800; }
.ssc-skip-link:focus { top: 12px; }

/* Header */
.ssc-topbar { background: var(--ssc-black); color: var(--ssc-white); font-size: .88rem; }
.ssc-topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 8px 0; }
.ssc-topbar a { text-decoration: none; font-weight: 700; }
.ssc-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(6,22,46,.08);
  backdrop-filter: blur(12px);
}
.ssc-header__inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.ssc-brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.ssc-brand img { width: min(310px, 42vw); max-height: 78px; object-fit: contain; }
.ssc-nav { display: flex; align-items: center; gap: 26px; }
.ssc-nav a { text-decoration: none; color: var(--ssc-navy); font-weight: 800; font-size: .95rem; }
.ssc-nav a:hover { color: var(--ssc-blue); }
.ssc-menu-toggle { display: none; border: 0; background: var(--ssc-navy); color: var(--ssc-white); border-radius: 10px; padding: 10px 13px; font-weight: 800; }

/* Buttons */
.ssc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 20px;
  border: 0;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.15;
  box-shadow: 0 8px 20px rgba(3,60,143,.15);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ssc-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(3,60,143,.22); }
.ssc-btn--primary { color: var(--ssc-white); background: linear-gradient(135deg, var(--ssc-blue-bright), var(--ssc-blue-deep)); }
.ssc-btn--magenta { color: var(--ssc-white); background: linear-gradient(135deg, #ef2ac2, var(--ssc-magenta-deep)); }
.ssc-btn--dark { color: var(--ssc-white); background: var(--ssc-navy); }
.ssc-btn--outline { color: var(--ssc-white); border: 2px solid rgba(255,255,255,.7); background: rgba(255,255,255,.08); box-shadow: none; }
.ssc-btn--small { min-height: 44px; padding: 11px 16px; font-size: .92rem; }
.ssc-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Hero */
.ssc-hero {
  position: relative;
  min-height: 720px;
  color: var(--ssc-white);
  overflow: hidden;
  background: var(--ssc-navy) url('assets/img/shop-interior.webp') center/cover no-repeat;
}
.ssc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,7,13,.88) 0%, rgba(6,22,46,.72) 46%, rgba(6,22,46,.16) 100%),
    linear-gradient(180deg, rgba(0,85,192,.12), rgba(226,28,175,.10));
}
.ssc-hero::after {
  content: "";
  position: absolute;
  inset: auto -15% -50% 25%;
  height: 65%;
  background: radial-gradient(circle, rgba(226,28,175,.22), transparent 64%);
}
.ssc-hero__inner { position: relative; z-index: 2; min-height: 720px; display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; padding: 68px 0; }
.ssc-hero__logo { width: min(520px, 90%); margin-bottom: 24px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.36)); }
.ssc-hero__copy h1 {
  margin: 0;
  max-width: 720px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(3.1rem, 6.5vw, 6.8rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .88;
  text-transform: uppercase;
  text-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.ssc-hero__copy h1 span { display: block; color: var(--ssc-silver); }
.ssc-hero__lead { max-width: 700px; margin: 20px 0 28px; color: #eef4fb; font-size: clamp(1.06rem, 1.6vw, 1.24rem); }
.ssc-hero__meta { margin-top: 16px; color: #dce8f6; font-weight: 800; }
.ssc-orbit {
  position: relative;
  width: min(540px, 88vw);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 47%, #06162e 0 51%, transparent 52%),
    conic-gradient(from 210deg, var(--ssc-blue-bright), var(--ssc-magenta), var(--ssc-blue-deep), var(--ssc-blue-bright));
  box-shadow: 0 0 0 10px rgba(220,228,237,.9), 0 0 0 18px rgba(0,85,192,.9), 0 25px 70px rgba(0,0,0,.36);
}
.ssc-orbit::before {
  content: "";
  position: absolute;
  inset: 32px;
  border: 4px solid var(--ssc-magenta);
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px rgba(0,85,192,.8);
}
.ssc-orbit__content { position: relative; z-index: 2; width: 78%; text-align: center; }
.ssc-orbit__kicker { color: var(--ssc-magenta); font-weight: 900; letter-spacing: .18em; text-transform: uppercase; font-size: .82rem; }
.ssc-orbit__main {
  margin-top: 12px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  font-weight: 900;
  line-height: .9;
  text-transform: uppercase;
}
.ssc-orbit__sub { margin-top: 14px; color: var(--ssc-silver); font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 900; letter-spacing: .04em; }

/* Trust strip */
.ssc-trust { position: relative; z-index: 5; margin-top: -34px; }
.ssc-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ssc-white); border-radius: 20px; overflow: hidden; box-shadow: var(--ssc-shadow); }
.ssc-trust__item { padding: 24px; text-align: center; border-right: 1px solid var(--ssc-border); }
.ssc-trust__item:last-child { border-right: 0; }
.ssc-trust__item strong { display: block; color: var(--ssc-navy); font-family: "Barlow Condensed", sans-serif; font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.ssc-trust__item span { display: block; margin-top: 7px; color: var(--ssc-muted); font-size: .9rem; }

/* Content sections */
.ssc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.ssc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ssc-panel { background: var(--ssc-white); border: 1px solid var(--ssc-border); border-radius: var(--ssc-radius); box-shadow: 0 12px 35px rgba(6,22,46,.08); }
.ssc-photo { overflow: hidden; border-radius: var(--ssc-radius); box-shadow: var(--ssc-shadow); }
.ssc-photo img { width: 100%; min-height: 420px; object-fit: cover; }
.ssc-brand-band { background: linear-gradient(120deg, var(--ssc-navy), #0b2a55 60%, #0b3f84); color: var(--ssc-white); }
.ssc-brand-band .ssc-title, .ssc-brand-band .ssc-eyebrow { color: var(--ssc-white); }
.ssc-brand-band .ssc-subtitle { color: #dce8f6; }

.ssc-value-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.ssc-value { padding: 16px 18px; border-radius: 14px; background: var(--ssc-soft); border-left: 5px solid var(--ssc-blue); font-weight: 800; color: var(--ssc-navy); }

/* Promotions */
.ssc-promos { background: linear-gradient(180deg, #f8fbff 0, #eef4fb 100%); }
.ssc-promo {
  position: relative;
  overflow: hidden;
  padding: 30px;
  min-height: 280px;
  border-radius: 24px;
  color: var(--ssc-white);
  background: linear-gradient(145deg, var(--ssc-navy), #0a3c82);
  box-shadow: var(--ssc-shadow);
}
.ssc-promo:nth-child(2) { background: linear-gradient(145deg, #140b21, #7d0e68); }
.ssc-promo:nth-child(3) { background: linear-gradient(145deg, #10253e, #175cab); }
.ssc-promo::after { content: ""; position: absolute; width: 210px; height: 210px; border: 28px solid rgba(255,255,255,.08); border-radius: 50%; right: -80px; top: -65px; }
.ssc-promo h3 { position: relative; z-index: 2; margin: 0; font-family: "Barlow Condensed", sans-serif; font-size: 2.2rem; line-height: 1; text-transform: uppercase; }
.ssc-promo p { position: relative; z-index: 2; margin: 16px 0 0; color: #edf5ff; }
.ssc-promo .ssc-btn { position: relative; z-index: 2; margin-top: 22px; }
.ssc-fineprint { font-size: .83rem; line-height: 1.45; opacity: .9; }

/* Services */
.ssc-service-card { padding: 25px; background: var(--ssc-white); border: 1px solid var(--ssc-border); border-radius: 18px; box-shadow: 0 8px 22px rgba(6,22,46,.06); }
.ssc-service-card__num { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--ssc-white); background: linear-gradient(135deg, var(--ssc-blue), var(--ssc-magenta)); font-weight: 900; }
.ssc-service-card h3 { margin: 18px 0 7px; color: var(--ssc-navy); font-family: "Barlow Condensed", sans-serif; font-size: 1.7rem; line-height: 1; text-transform: uppercase; }
.ssc-service-card p { margin: 0; color: var(--ssc-muted); }

/* Gallery */
.ssc-gallery { display: grid; grid-template-columns: 1.25fr .75fr .75fr; grid-template-rows: 300px 300px; gap: 14px; }
.ssc-gallery figure { margin: 0; overflow: hidden; border-radius: 18px; position: relative; background: var(--ssc-soft); }
.ssc-gallery figure:first-child { grid-row: 1 / 3; }
.ssc-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ssc-gallery figure:hover img { transform: scale(1.025); }
.ssc-gallery figcaption { position: absolute; inset: auto 0 0; padding: 30px 18px 14px; background: linear-gradient(transparent, rgba(3,7,13,.78)); color: var(--ssc-white); font-weight: 800; }

/* CTA / location */
.ssc-location { background: var(--ssc-soft); }
.ssc-location-card { padding: 34px; }
.ssc-hours { margin: 20px 0 0; padding: 0; list-style: none; }
.ssc-hours li { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--ssc-border); }
.ssc-hours strong { color: var(--ssc-navy); }
.ssc-saturday { color: var(--ssc-magenta-deep); font-weight: 900; }
.ssc-final-cta { background: linear-gradient(135deg, var(--ssc-blue-deep), var(--ssc-navy) 55%, #34103c); color: var(--ssc-white); text-align: center; }
.ssc-final-cta .ssc-title { color: var(--ssc-white); }
.ssc-final-cta p { max-width: 780px; margin: 18px auto 0; color: #dce8f6; font-size: 1.15rem; }
.ssc-final-cta .ssc-actions { justify-content: center; margin-top: 28px; }

/* Footer */
.ssc-footer { background: var(--ssc-black); color: #cbd6e4; }
.ssc-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding: 54px 0 38px; }
.ssc-footer__logo { width: min(360px, 90%); }
.ssc-footer h3 { color: var(--ssc-white); font-family: "Barlow Condensed", sans-serif; font-size: 1.5rem; text-transform: uppercase; margin: 0 0 12px; }
.ssc-footer p { margin: 8px 0; }
.ssc-footer a { color: var(--ssc-white); text-decoration: none; }
.ssc-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; font-size: .87rem; }

/* Content templates */
.ssc-content { width: min(calc(100% - 36px), 920px); margin: 0 auto; padding: 64px 0; }
.ssc-content h1, .ssc-content h2, .ssc-content h3 { color: var(--ssc-navy); font-family: "Barlow Condensed", sans-serif; line-height: 1.05; }
.ssc-content h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); text-transform: uppercase; }
.ssc-content a { color: var(--ssc-blue); font-weight: 700; }

.ssc-mobile-cta { display: none; }

@media (max-width: 980px) {
  .ssc-topbar__inner { justify-content: center; text-align: center; }
  .ssc-topbar__inner > :last-child { display: none; }
  .ssc-menu-toggle { display: inline-flex; }
  .ssc-nav { display: none; position: absolute; top: 92px; left: 18px; right: 18px; padding: 18px; flex-direction: column; align-items: stretch; gap: 8px; background: var(--ssc-white); border: 1px solid var(--ssc-border); border-radius: 16px; box-shadow: var(--ssc-shadow); }
  .ssc-nav.is-open { display: flex; }
  .ssc-nav a { padding: 10px 8px; }
  .ssc-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .ssc-hero__logo { margin-inline: auto; }
  .ssc-hero__copy h1, .ssc-hero__lead { margin-inline: auto; }
  .ssc-actions { justify-content: center; }
  .ssc-trust__grid { grid-template-columns: repeat(2,1fr); }
  .ssc-trust__item:nth-child(2) { border-right: 0; }
  .ssc-grid-2 { grid-template-columns: 1fr; }
  .ssc-grid-3 { grid-template-columns: 1fr 1fr; }
  .ssc-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 260px 260px; }
  .ssc-gallery figure:first-child { grid-column: 1 / 3; grid-row: 1; }
  .ssc-footer__grid { grid-template-columns: 1fr 1fr; }
  .ssc-footer__grid > :first-child { grid-column: 1 / 3; }
}

@media (max-width: 680px) {
  .ssc-shell { width: min(calc(100% - 24px), var(--ssc-max)); }
  .ssc-section { padding: 58px 0; }
  .ssc-header__inner { min-height: 78px; }
  .ssc-brand img { width: 230px; max-height: 62px; }
  .ssc-nav { top: 78px; }
  .ssc-hero, .ssc-hero__inner { min-height: 0; }
  .ssc-hero__inner { padding: 48px 0 70px; gap: 42px; }
  .ssc-hero__copy h1 { font-size: clamp(3rem, 16vw, 5.4rem); }
  .ssc-hero__lead { font-size: 1rem; }
  .ssc-orbit { width: min(420px, 84vw); box-shadow: 0 0 0 6px rgba(220,228,237,.9), 0 0 0 11px rgba(0,85,192,.9), 0 20px 55px rgba(0,0,0,.34); }
  .ssc-orbit::before { inset: 24px; }
  .ssc-trust { margin-top: -24px; }
  .ssc-trust__grid { grid-template-columns: 1fr; }
  .ssc-trust__item { border-right: 0; border-bottom: 1px solid var(--ssc-border); }
  .ssc-trust__item:last-child { border-bottom: 0; }
  .ssc-grid-3 { grid-template-columns: 1fr; }
  .ssc-value-list { grid-template-columns: 1fr; }
  .ssc-gallery { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 260px); }
  .ssc-gallery figure:first-child { grid-column: auto; grid-row: auto; }
  .ssc-footer__grid { grid-template-columns: 1fr; }
  .ssc-footer__grid > :first-child { grid-column: auto; }
  .ssc-mobile-cta { position: fixed; z-index: 1100; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.25fr; padding: 8px; gap: 8px; background: rgba(3,7,13,.96); border-top: 1px solid rgba(255,255,255,.12); }
  .ssc-mobile-cta .ssc-btn { min-height: 48px; padding: 10px 8px; font-size: .86rem; }
  body { padding-bottom: 66px; }
}

/* ── v1.1.0 review additions (Claude) ─────────────────── */
.ssc-mt { margin-top: 34px; }
.ssc-mt-s { margin-top: 24px; }
.ssc-center { text-align: center; }
.ssc-actions--center { justify-content: center; }
img { height: auto; }
.ssc-photo img, .ssc-gallery img { width: 100%; }
.ssc-gallery--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ssc-service-card h3 a { color: inherit; text-decoration: none; }
.ssc-service-card h3 a:hover, .ssc-service-card h3 a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.ssc-service-card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.ssc-service-card { position: relative; }
.ssc-footer__h { font-size: 1.05rem; margin: 0 0 .6rem; color: var(--ssc-white); }
.ssc-social a { margin-right: 1rem; }
.ssc-legal { font-size: .82rem; opacity: .8; margin: .35rem 0; }
.ssc-privacy { font-size: .82rem; margin-top: .5rem; }
.ssc-privacy summary { cursor: pointer; }
/* Contrast: white text on magenta buttons now clears WCAG AA across the whole gradient. */
.ssc-btn--magenta { background: linear-gradient(135deg, #c8129c, var(--ssc-magenta-deep)); }
/* Hero background: same photo, responsive size (matches the preload). */
.ssc-hero { background-image: url('assets/img/shop-interior-1400.webp'); }
@media (max-width: 720px) { .ssc-hero { background-image: url('assets/img/shop-interior-720.webp'); } }
@media (max-width: 680px) {
  .ssc-hero__logo { width: min(300px, 72%); margin-bottom: 14px; }
  .ssc-hero__copy h1 { font-size: clamp(2.35rem, 11vw, 3.4rem); }
  .ssc-orbit { width: min(300px, 78vw); }
  .ssc-gallery--two { grid-template-columns: 1fr; }
  .ssc-topbar { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.ssc-gallery.ssc-gallery--two { grid-template-rows: auto; }
.ssc-gallery--two figure { grid-row: auto !important; grid-column: auto !important; }
.ssc-gallery--two img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
@media (max-width: 680px) { .ssc-gallery.ssc-gallery--two { grid-template-rows: auto; } }
@media (max-width: 400px) {
  .ssc-header__inner { gap: 12px; }
  .ssc-brand img { width: 170px; }
}
@media (max-width: 680px) {
  .ssc-orbit__content { width: 70%; }
  .ssc-orbit__kicker { display: none; }
  .ssc-orbit__main { font-size: clamp(1.5rem, 8vw, 2.1rem); }
  .ssc-orbit__sub { font-size: 1rem; }
}