/* ==========================================================================
   C & C Cellphone and Computer Repair — consolidated stylesheet
   Single file replacing the previous 19 Elementor/WordPress export CSS files.
   ========================================================================== */

/* --- Reset -------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: #fff;
  color: #333;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1rem;
  font-weight: 500;
  line-height: 1.2;
}
p,
ul,
ol {
  margin: 0 0 1rem;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  padding-left: 1.25rem;
}

/* --- Design tokens -------------------------------------------------------
   Source of truth: assets/css/post-8.css (Elementor global kit) plus the
   real colors found in post-1321.css / post-4619.css / header-footer.css.
   -------------------------------------------------------------------------- */
:root {
  --color-black: #000000;
  --color-brand: #de3732; /* buttons, H1 accent */
  --color-text: #494949; /* body copy default */
  --color-accent: #fcd9d8; /* button hover */
  --color-banner: #de3733; /* top promo bar */
  --color-hero-border: #711d1a;
  --color-card-border: #6d6d6d1c;
  --color-muted-icon: #d8d8d8;
  --color-muted: #a7a7a7;
  --color-divider: #424242;
  --color-footer-copy: #666666;

  --font-primary: "Roboto", sans-serif; /* headings default, weight 600 */
  --font-secondary: "Roboto Slab", sans-serif;
  --font-text: "Roboto", sans-serif; /* body copy, weight 400 */
  --font-accent: "Roboto", sans-serif; /* buttons, weight 500 */
  --font-display: "Outfit", sans-serif; /* hero/heading accents */
  --font-feature: "Montserrat", sans-serif; /* feature card titles */
}

/* --- Fonts -----------------------------------------------------------------
   Latin-only subset (site content is plain English). Each family below is a
   variable font: one file covers its whole weight range, so a single
   @font-face per family/style is enough — no per-weight duplication needed.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/roboto-kfo7cnqeu92fr1me7ksn66agldtyluama3yuba.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/robotoslab-bngmuxzytxpivibgjjsb6ufn5qu.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/outfit-qgyvz_mvcbenp4njtetq.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/montserrat-jtusjig1_i6t8kchkm459wlhyw.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Layout primitives ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (max-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (max-width: 767px) {
  .container {
    max-width: 767px;
  }
}

/* --- Promo bar -------------------------------------------------------------- */
.promo-bar {
  background: var(--color-banner);
  color: #fff;
  width: 100%;
  padding: 15px;
  text-align: center;
}
.promo-bar span {
  color: #000;
}

/* --- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  border-radius: 0;
  padding: 16px 26px;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn svg {
  fill: #fff;
  width: 1em;
  height: 1em;
}
.btn--primary {
  background: var(--color-brand);
}
.btn--primary:hover,
.btn--primary:focus {
  background: var(--color-accent);
  color: #000;
}
.btn--primary:hover svg,
.btn--primary:focus svg {
  fill: #000;
}
.btn--outline {
  background: transparent;
  border-color: #fff;
  padding: 14px 25px;
}
.btn--outline:hover,
.btn--outline:focus {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* --- Hero (home + policy pages share this, policy uses --compact) -------- */
.hero {
  background: var(--color-black);
  padding: 80px;
}
.hero--compact {
  padding: 20px;
}
@media (max-width: 1024px) {
  .hero {
    padding: 15px;
  }
}
.hero__frame {
  border: 1px solid var(--color-hero-border);
  padding: 30px;
}
.hero--compact .hero__frame {
  padding: 15px;
}
@media (max-width: 1024px) {
  .hero__frame {
    padding: 15px;
  }
}
.hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.hero__row > * {
  min-width: 0;
}
.hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.hero__media img {
  width: 85.421%;
}
@media (max-width: 767px) {
  .hero:not(.hero--compact) .hero__media img {
    width: 100%;
  }
}
.hero__logo {
  width: 100%;
}
.hero__logo img {
  width: 55.513%;
}
@media (max-width: 767px) {
  .hero__logo img {
    width: 77px;
    margin-inline: auto;
  }
}
.hero__info {
  width: 100%;
}
.hero__cta {
  width: 100%;
}
@media (max-width: 767px) {
  .hero__cta {
    margin-top: 15px;
  }
}
@media (min-width: 768px) {
  .hero:not(.hero--compact) .hero__media {
    width: 29.855%;
  }
  .hero:not(.hero--compact) .hero__info {
    width: 70.1%;
  }
  .hero__logo {
    width: 7.967%;
  }
  .hero--compact .hero__info {
    width: 58.365%;
  }
  .hero--compact .hero__cta {
    width: auto;
    margin-left: auto;
  }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .hero__logo {
    width: 30%;
  }
  .hero--compact .hero__info {
    width: 70%;
  }
}
.hero__eyebrow {
  margin: 30px 0 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
}
.hero--compact .hero__eyebrow {
  margin: 0;
}
@media (max-width: 767px) {
  .hero__eyebrow {
    text-align: center;
    font-size: 16px;
  }
}
.hero__title {
  margin: 15px 0 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1em;
  color: var(--color-brand);
}
.hero--compact .hero__title {
  margin: 0;
}
@media (max-width: 767px) {
  .hero__title {
    text-align: center;
  }
}
.hero__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
@media (max-width: 767px) {
  .hero__list {
    gap: 18px;
  }
}
.hero__list li,
.hero__list li a {
  display: flex;
  align-items: center;
  gap: 5px;
}
.hero__list svg {
  width: 14px;
  height: 14px;
  fill: var(--color-muted-icon);
}
.hero__list li a .hero__list-text {
  text-decoration: underline;
}
.hero__list-text {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-muted);
}
.hero__text {
  margin: 15px 0 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: var(--color-muted);
}
@media (max-width: 767px) {
  .hero__text {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
  }
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}
@media (max-width: 767px) {
  .hero__actions {
    justify-content: center;
  }
  .hero__actions .btn--primary {
    padding: 14px 24px 14px 20px;
  }
  .hero__actions .btn--outline {
    padding: 13px 20px;
  }
}

/* --- Locations / store cards (home page only) ---------------------------- */
.locations {
  width: 100%;
}
.locations__map {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}
.store-grid {
  max-width: 1000px;
  margin: -100px auto 80px;
  padding-inline: 20px;
  display: flex;
  flex-wrap: wrap;
}
.store-grid > * {
  min-width: 0;
}
@media (max-width: 767px) {
  .store-grid {
    margin: 0 auto;
  }
}
.store-card {
  background: #fff;
  border: 1px solid var(--color-card-border);
  padding: 30px;
  margin-right: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.store-card a {
  color: var(--color-brand);
  text-decoration: underline;
}
@media (min-width: 768px) {
  .store-card {
    width: calc(50% - 10px);
  }
}
@media (max-width: 767px) {
  .store-card {
    margin: 15px;
    padding: 15px;
    width: calc(100% - 30px);
  }
}

.icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}
.icon-box__icon {
  color: var(--color-black);
  font-size: 28px;
  line-height: 0;
}
.icon-box__icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.icon-box__title {
  margin: 0;
  font-family: var(--font-feature);
  font-size: 22px;
  font-weight: 600;
  line-height: 1em;
}
.icon-box__desc {
  margin: 0;
  font-family: var(--font-feature);
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
}
@media (max-width: 767px) {
  .icon-box__desc {
    font-size: 14px;
  }
}

/* --- CTA band (dark grid section, shared by all 4 pages) ------------------ */
.cta-band {
  background: var(--color-black);
  width: 100%;
}
.cta-band__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding: 45px 20px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.cta-band__inner > * {
  min-width: 0;
}
@media (max-width: 1024px) {
  .cta-band__inner {
    max-width: 1024px;
  }
}
@media (max-width: 767px) {
  .cta-band__inner {
    max-width: 767px;
    grid-template-columns: 1fr;
    padding: 45px 15px 45px;
  }
}
.cta-band__heading {
  margin: 0 0 20px;
  font-family: var(--font-primary);
  font-weight: 600;
  color: #fff;
}
.cta-band__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cta-band__list li,
.cta-band__list li a {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cta-band__list svg {
  width: 14px;
  height: 14px;
  fill: var(--color-muted);
}
.cta-band__list li a .cta-band__list-text {
  text-decoration: underline;
}
.cta-band__list-text {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-muted);
}
.cta-band__list--links {
  gap: 11px;
}
.cta-band__list--links svg {
  width: 6px;
  height: 6px;
}
.cta-band__list--links li:hover .cta-band__list-text {
  color: #fff;
}

/* --- Footer ----------------------------------------------------------------- */
.site-footer {
  background: var(--color-black);
  width: 100%;
}
.site-footer__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding: 15px 20px 24px;
}
@media (max-width: 1024px) {
  .site-footer__inner {
    max-width: 1024px;
  }
}
@media (max-width: 767px) {
  .site-footer__inner {
    max-width: 767px;
    padding: 0 15px 24px;
  }
}
.divider {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: 0;
}
.copyright {
  margin: 15px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-footer-copy);
}
@media (max-width: 767px) {
  .copyright {
    margin: 15px 0 0;
    line-height: 20px;
  }
}

/* --- Page hero title + policy content (privacy/terms/refund pages) ------- */
.page-content {
  padding-bottom: 65px;
}
@media (max-width: 767px) {
  .page-content {
    padding-bottom: 0;
  }
}
.page-title {
  margin: 20px 0;
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 700;
  line-height: 65px;
  text-align: start;
}
@media (max-width: 1024px) {
  .page-title {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .page-title {
    font-size: 40px;
    line-height: 46px;
    padding-inline: 10px;
  }
}
.policy {
  max-width: 800px;
  padding: 10px 20px 20px;
  color: var(--color-text);
  font-family: var(--font-text);
}
.policy__meta {
  font-size: 16px;
}
.policy h4,
.policy h5 {
  margin: 1.5em 0 0.5em;
  font-family: var(--font-primary);
  font-weight: 600;
  color: var(--color-black);
}
.policy ul {
  padding-left: 1.25rem;
}
.policy__contact {
  list-style: none;
  margin: 1.5em 0 0;
  padding: 0;
}
.policy__contact li {
  margin-bottom: 0.5em;
}
.policy__contact .policy__contact-value {
  color: var(--color-brand);
}

/* --- Utility: visually hidden (kept for a11y parity, no visual effect) --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}