/* ===========================================================
   2026 Header/Footer Wrapper Redesign
   Loaded after style.css and responsive.css (see functions.php)
   so these rules override the old .header_main / .footer_main
   styles without editing those files directly.
=========================================================== */

/* ===========================================================
   BASE H1–H6 — Homepage & Internal Pages ONLY (Oct 2026)
   -----------------------------------------------------------
   Applies to headings inside SiteOrigin Page Builder content
   (.panel-layout) on the homepage and internal pages.

   EXCLUDED (keep their existing heading styles):
     .single-post  = individual blog articles
     .blog         = the main blog/posts listing page
     .archive      = blog category (and tag/date) archive pages

   Header and footer headings are NOT affected — they sit
   outside .panel-layout.

   Placed at the TOP of this file on purpose: any more specific
   cc- heading rule further down (e.g. .cc-awards-heading h2,
   .cc-vote-heading h5) still overrides these base values.
=========================================================== */
:where(body:not(.single-post):not(.blog):not(.archive)) .panel-layout h1 {
  font-size: 36px;
  font-weight: bold;
  color: #666666;
}

/* Theme page title (Twenty Twenty-One's <header class="entry-header">
   <h1 class="entry-title">) on internal pages — matches the base H1
   above. The parent theme sizes this with ".singular .entry-title",
   so this selector is written one step more specific to beat it.
   Blog articles and blog category pages stay excluded. The homepage
   has no theme title, so nothing changes there. */
:where(body:not(.single-post):not(.blog):not(.archive)) .entry-header h1.entry-title {
  font-size: 36px;
  font-weight: bold;
  color: #666666;
}

:where(body:not(.single-post):not(.blog):not(.archive)) .panel-layout h2 {
  font-size: 30px;
  font-weight: bold;
  color: #0058f6;
}

:where(body:not(.single-post):not(.blog):not(.archive)) .panel-layout h3 {
  font-size: 28px;
  font-weight: bold;
  color: #666666;
  margin-bottom: 20px;
}

:where(body:not(.single-post):not(.blog):not(.archive)) .panel-layout h4 {
  font-size: 26px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 20px;
}

:where(body:not(.single-post):not(.blog):not(.archive)) .panel-layout h5 {
  font-size: 24px;
  font-weight: bold;
  color: #666666;
  margin-bottom: 20px;
}

:where(body:not(.single-post):not(.blog):not(.archive)) .panel-layout h6 {
  font-size: 20px;
  font-weight: bold;
  color: #0058f6;
  margin-bottom: 20px;
}

/* -----------------------------------------
   Homepage hero row — full-bleed viewport width
   regardless of what .container padding is doing.
   Apply the "cc-hero-row" CSS class to the row in
   SiteOrigin Row Settings > Attributes > CSS Class.
------------------------------------------ */
/* Hero row full-width background, using the same proven technique as
   the theme's own .expert_sec class: position:relative on the row
   itself, with ::before/::after pseudo-elements extending 50vw outward
   from its own edges. This sidesteps the container-padding problem
   entirely, since it never requires the row itself to become viewport
   width — only two decorative side-panels do. */
.cc-hero-row {
  position: relative;
  background-image: url('https://mycomputerconcepts.com/stargazer/wp-content/uploads/2026/09/hero-image-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cc-hero-row::before,
.cc-hero-row::after {
  position: absolute;
  top: 0;
  width: 50vw;
  height: 100%;
  content: '';
  background-image: url('https://mycomputerconcepts.com/stargazer/wp-content/uploads/2026/09/hero-image-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.cc-hero-row::before { left: 100%; }
.cc-hero-row::after { right: 100%; }

/* -----------------------------------------
   Reusable light-grey gradient background for body sections.
   Add class "cc-section-bg-gradient" to any row that should use it.
   Uses the same full-width pseudo-element technique as .cc-hero-row —
   a vertical gradient has no seam risk between the three pieces, since
   it looks identical at any horizontal position.
------------------------------------------ */
.cc-section-bg-gradient {
  position: relative;
  padding-top: 65px;
  padding-bottom: 65px;
  background: linear-gradient(
    to bottom,
    #eeeef0 0%,
    #d0d0d0 20%,
    #d0d0d0 80%,
    #eeeef0 100%
  );
}

/* Security Is Everything section — white background, no gradient.
   Only needs top spacing so the heading isn't flush against the
   section above; bottom stays at 0 intentionally so the Time With A
   Tech image rests right at the boundary with the next section. */
.cc-security-row {
  padding-top: 50px;
}

/* -----------------------------------------
   Recent Article Posts (Tech Tip / Blog homepage module)
------------------------------------------ */
/* "Recent Article Posts" heading — matches the base H5 (24px, bold,
   #666). ".panel-layout" added so it beats the base heading rules
   at the top of this file. Keeps its original tight 8px gap above
   the divider line. */
.panel-layout .cc-recent-articles-heading {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 24px;
  margin: 0 0 8px;
  color: #666666;
}

.cc-recent-articles-top-divider {
  border: none;
  border-top: 3px solid var(--cc-text);
  margin: 0 0 20px;
}

.cc-recent-article-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  align-items: flex-start;
}

.cc-recent-article-thumb {
  flex: 0 0 auto;
  display: block;
  width: 140px;
}

.cc-recent-article-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.cc-recent-article-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Article titles in the [cc_recent_articles] module (H4 tags).
   ".panel-layout h4" added so this beats the base H4 rule (26px,
   20px bottom margin). Only the homepage shortcode outputs this
   class — blog article pages are not affected. */
.panel-layout h4.cc-recent-article-title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.3;
}

.cc-recent-article-title a {
  color: var(--cc-text);
  text-decoration: underline;
  font-weight: 600;
}

.cc-recent-article-excerpt {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #666666;
}

.cc-recent-article-readmore {
  display: block;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-blue);
  text-decoration: underline;
}

.cc-recent-article-divider {
  border: none;
  border-top: 1px solid #dddddd;
  margin: 0;
}

.cc-recent-articles-bottom-divider {
  border: none;
  border-top: 3px solid var(--cc-text);
  margin: 16px 0 20px;
}

.cc-recent-articles-cta {
  text-align: right;
}

.cc-see-all-articles-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 28px;
  background: var(--cc-blue);
  color: #ffffff !important;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none !important;
}

.cc-see-all-articles-btn:hover {
  background: var(--cc-blue-dark);
}
.cc-section-bg-gradient::before,
.cc-section-bg-gradient::after {
  position: absolute;
  top: 0;
  width: 50vw;
  height: 100%;
  content: '';
  background: linear-gradient(
    to bottom,
    #eeeef0 0%,
    #d0d0d0 20%,
    #d0d0d0 80%,
    #eeeef0 100%
  );
  pointer-events: none;
}
.cc-section-bg-gradient::before { left: 100%; }
.cc-section-bg-gradient::after { right: 100%; }

:root {
  --cc-blue: #1e56e8;
  --cc-blue-dark: #133ea8;
  --cc-gray-bg: #f4f4f4;
  --cc-text: #2b2b2b;
  --cc-text-light: #6b6b6b;
  --cc-header-height: 90px;
  --cc-max-width: 1300px;
}

/* -----------------------------------------
   Header
------------------------------------------ */
.cc-site-header {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #eaeaea;
  box-sizing: border-box;
}

.cc-site-header * { box-sizing: border-box; }

.cc-site-header__inner {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  min-height: var(--cc-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 24px;
  flex-wrap: wrap;
}

.cc-site-header__logo-img {
  max-height: 48px;
  width: auto;
  display: block;
}

.cc-site-header__nav {
  flex: 1 1 auto;
}

.cc-primary-menu {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
}

.cc-primary-menu li {
  position: relative;
}

.cc-primary-menu > li > a {
  color: var(--cc-text);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
}

.cc-primary-menu > li > a:hover {
  color: var(--cc-blue);
}

.cc-primary-menu ul.sub-menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  min-width: 200px;
  display: none;
  z-index: 100;
}

.cc-primary-menu li:hover > ul.sub-menu {
  display: block;
}

.cc-primary-menu ul.sub-menu li a {
  display: block;
  padding: 8px 18px;
  color: var(--cc-text);
  white-space: nowrap;
  text-decoration: none;
}

.cc-primary-menu ul.sub-menu li a:hover {
  background: var(--cc-gray-bg);
}

/* Suppress the old theme's dropdown toggle BUTTON (Twenty Twenty-One
   injects an actual <button><svg>...</svg></button> for items with
   children, not CSS-generated content — confirmed via inspector). Hiding
   it is safe: our dropdown open/close is driven entirely by the :hover
   rule above, not by this button. Targeting the element type rather than
   a guessed class name, since nothing else in our menus adds a <button>. */
.cc-primary-menu li > button,
.cc-footer-menu li > button {
  display: none !important;
}

/* Suppress the old theme's +/- dropdown indicator (comes from the
   still-loaded style.css/responsive.css targeting WordPress's automatic
   .menu-item-has-children class). Purely visual — doesn't touch the
   hover show/hide logic above. */
.cc-primary-menu .menu-item-has-children > a::after,
.cc-primary-menu .menu-item-has-children > a::before,
.cc-footer-menu .menu-item-has-children > a::after,
.cc-footer-menu .menu-item-has-children > a::before {
  content: none !important;
  display: none !important;
}

/* Force primary (header) submenu links to match the primary nav's own
   top-level font size/weight */
.cc-primary-menu ul.sub-menu li a {
  font-size: 16px;
  font-weight: 500;
}

/* Force footer submenu links to match the FOOTER's own top-level link
   style (15px, normal weight) — not the header's, which is a different
   size */
.cc-footer-menu .sub-menu li a {
  font-size: 15px;
  font-weight: normal;
}

.cc-site-header__contact {
  display: flex;
  gap: 24px;
}

.cc-site-header__contact-item {
  text-align: center;
  font-size: 15px;
  line-height: 1.3;
}

.cc-site-header__contact-label {
  display: block;
  color: var(--cc-text);
  font-weight: 600;
  text-transform: uppercase;
}

.cc-site-header__contact-item a {
  color: var(--cc-text-light);
  font-weight: 500;
  text-decoration: none;
}

/* -----------------------------------------
   Footer
------------------------------------------ */
.cc-site-footer {
  background: var(--cc-gray-bg);
  padding: 48px 24px 24px;
  box-sizing: border-box;
}

.cc-site-footer * { box-sizing: border-box; }

.cc-site-footer__inner {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  text-align: center;
}

.cc-footer-menu {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 0 0 24px;
  padding: 0;
  flex-wrap: wrap;
}

.cc-footer-menu a {
  color: var(--cc-text-light);
  font-size: 15px;
  text-decoration: none;
}

.cc-site-footer__heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--cc-text);
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 32px;
}

.cc-site-footer__locations {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.cc-site-footer__location {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 460px;
  text-align: left;
}

.cc-site-footer__locations-divider {
  width: 3px;
  background: #000000;
  align-self: stretch;
}

.cc-site-footer__location-name {
  font-weight: 700;
  margin: 0 0 4px;
}

.cc-site-footer__location-details p {
  margin: 2px 0;
  font-size: 14.5px;
  color: var(--cc-text);
}

.cc-directions-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--cc-text);
  flex: 0 0 auto;
}

.cc-directions-pin {
  width: 28px;
  height: auto; /* preserves the image's native 35x50 aspect ratio */
}

.cc-site-footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.cc-site-footer__social-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cc-site-footer__social-divider {
  width: 3px;
  align-self: stretch;
  min-height: 70px;
  background: #000000;
}

.cc-site-footer__social-group-label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  margin-top: 8px;
}

.cc-site-footer__social-icons {
  display: flex;
  gap: 10px;
}

.cc-site-footer__social-icons img {
  width: 28px;
  height: 28px;
  display: block;
}

.cc-site-footer__social-icons-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
}

.cc-site-footer__social-icons-grid img {
  width: 28px;
  height: 28px;
  display: block;
}

.cc-site-footer__bottom {
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
  font-size: 13px;
  color: var(--cc-text-light);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* -----------------------------------------
   Awards Row (Hampton Roads Multi-Year Service Award Winner)
------------------------------------------ */
.cc-awards-row {
  padding: 40px 0;
}

.cc-staff-img {
  max-width: 85%;
  margin: 0 auto 16px;
}

.cc-fixit-banner {
  max-width: 85%;
  margin: 0 auto;
}

.cc-awards-heading h2 {
  color: #0058f6 !important;
  font-weight: 700;
  font-size: 30px !important;
  letter-spacing: 1px;
  line-height: 1.25;
  margin: 0 0 16px;
}

/* Larger/spaced-out variant, independent of cc-awards-heading — use this
   for section headers like "We Have Everything To Meet Your Mac - or PC -
   Needs" that need a bigger, more spread-out look without affecting the
   awards heading. */
.cc-section-heading-lg h2 {
  color: #0058f6 !important;
  font-weight: 700;
  font-size: 32px !important;
  letter-spacing: 1px;
  line-height: 1.25;
  margin: 0 0 16px;
}

.cc-awards-intro {
  font-size: 16px;
  line-height: 1.5;
  color: var(--cc-text);
  margin-bottom: 24px;
}

/* SIMPLE VERSION — use this once the badge images are rebuilt with
   matching/complementary aspect ratios (singles sized consistently with
   each other, and the 2 stacked ones sized so their combined height
   naturally matches a single badge). No forced height needed once the
   source images are sized correctly — this just makes each image fill
   its own column width naturally. */
.cc-award-badge img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.cc-award-badge-small img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ORIGINAL FORCED-HEIGHT VERSION — kept here commented out in case the
   simple version above doesn't line up and forced heights are needed
   again as a stopgap. Delete once no longer needed either way.
.cc-award-badge img {
  height: 78px !important;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
.cc-award-badge-small img {
  height: 48px !important;
}
*/

/* Vote For Us block */
.cc-vote-row {
  margin-top: 12px;
}

.cc-vote-heading h2,
.cc-vote-heading h5 {
  color: #0058f6;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

/* Styles ANY hr you place inside the vote row — covers the one you're
   keeping regardless of exactly which widget it lives in */
.cc-vote-row hr {
  border: none;
  border-top: 2px solid var(--cc-text);
  width: 100%;
  margin: 0 0 12px;
}

.cc-vote-row img {
  width: 100%;
  height: auto;
  display: block;
}

.cc-vote-row p {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-text);
  margin: 0;
}

.cc-vote-row a {
  color: var(--cc-blue);
  font-weight: 700;
  text-decoration: none;
}

.cc-vote-row a:hover {
  text-decoration: underline;
}

/* Fallback divider, only relevant if the cell's native Design-tab
   border isn't working as expected — apply this class to the
   Williamsburg/Yorktown cell only if needed */
.cc-vote-divider-cell {
  border-left: 3px solid #000000;
  padding-left: 16px;
}

/* "Our Knowledgeable Staff..." text + inline laptop image wrap.
   Apply cc-staff-text to the Editor widget. The laptop image should be
   inserted INLINE within that same widget's text (not a separate cell),
   with WordPress's built-in "Align Right" option selected on it — that
   applies the core .alignright class, which handles the float/wrap
   automatically. This CSS just darkens the text and fixes mobile. */
.cc-staff-text {
  color: var(--cc-text);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

/* Inline badge images (3yr warranty, Apple, Lenovo) inserted directly
   in the same Editor widget as the staff text/floated laptop image,
   so they sit alongside the float instead of waiting for it to clear */
.cc-staff-text img.cc-mac-badge-inline {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 12px 15px 0 0 !important;
}

/* Learn More button image — sits inline immediately next to the
   preceding text (not floated, so it doesn't drift to the far edge of
   a wide cell). Set the image's own alignment to "None" in WordPress,
   not "Align Right" — this class handles the positioning instead. */
img.cc-learnmore-inline {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 0 0 15px !important;
  float: none !important;
}

/* Learn More button image — sits on its OWN line below the paragraph
   text (not inline after a sentence), flush with the text's left edge.
   Use this instead of cc-learnmore-inline when the mockup shows the
   button on its own row rather than tucked into a sentence. */
img.cc-learnmore-block {
  display: block !important;
  float: none !important;
  margin: 20px 0 0 0 !important;
}

/* Learn More button image — KEEP WordPress's "Align Right" setting on
   the image (don't change it to None). This class just pulls it back
   in from the far right edge by a set amount, rather than sitting
   flush against it. Adjust margin-right to taste. */
img.cc-learnmore-right-inset {
  margin-right: 75px !important;
}

/* Security Is Everything section header */
.security-header {
  margin-bottom: 0px !important;
}

.eliminate-threats {
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: bold;
  font-size: 20pt;
}

/* Time With A Tech (lower left of Security section) */
.time-tech-title {
  margin-bottom: 0px;
  font-size: 16pt;
  font-weight: bold;
}

.time-tech-subtitle {
  margin-top: 0px;
  font-size: 12pt;
  font-weight: bold;
  line-height: 10px;
}

.time-tech-quote {
  margin-top: 30px;
  font-size: 12pt;
  font-weight: 400;
  line-height: 18px;
}

/* Threat characters (Red Ransomware, Blue Phisher, Green Glitch,
   Black Void) — same two classes reused for all 4 name/description
   pairs */
.threat-name {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: bold;
  font-size: 14pt;
}

.threat-desc {
  text-align: center;
  margin-top: 0px;
  font-size: 10pt;
  font-weight: 400;
  line-height: 15px;
}

/* Computer Repair section — vertical breathing room so the heading
   isn't flush against the top and the bottom content isn't flush
   against whatever grey section follows */
.cc-repair-row {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Alien image — SO Image widget forces width:100% by default via its
   own inline style block, which fights against margin-based
   positioning (percentage width recalculates when margin shrinks the
   available space). This overrides it with a fixed pixel width so
   margin can shift the image instead of resizing it.
   Adjust the width value to whatever looks right, then use
   margin-left (negative to shift left) to nudge position. */
.cc-alien-img img {
  width: 280px !important;
  height: auto !important;
  margin-left: -55px;
  margin-top: 20px;
}

/* Homepage Gaming section — body text subheadings.
   Use in the Editor widget's Text tab as: <h3 class="gaming-home">
   Color isn't set here, so it inherits the base H3 color (#666).
   ".panel-layout" is included so this always wins over the base
   H3 rule at the top of this file (which sets a 20px bottom margin). */
.panel-layout h3.gaming-home {
  font-size: 24px;
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 35px;
}

/* About Us page — lead-in text.
   Use as class="about-us-lead-ins" on a paragraph or heading in the
   Editor widget's Text tab. ".panel-layout" is included so it also
   wins if placed on a heading tag (over the base heading sizes). */
.panel-layout .about-us-lead-ins {
  margin-top: 15px;
  font-size: 16px;
}

/* Staff titles (e.g. job titles under staff names/photos).
   Use as <p class="staff-titles"> in the Editor widget's Text tab. */
.panel-layout .staff-titles {
  text-align: center;
  font-size: 14px;
}

@media (max-width: 782px) {
  .cc-staff-text img.alignright,
  .cc-staff-text img.alignleft {
    float: none;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 16px;
  }
}

@media (max-width: 782px) {
  .cc-site-header__inner { justify-content: center; text-align: center; }
  .cc-primary-menu { justify-content: center; gap: 16px; }
  .cc-site-footer__locations { flex-direction: column; align-items: center; }
  .cc-site-footer__locations-divider { display: none; }
  .cc-site-footer__social-divider { display: none; }
  .cc-site-footer__bottom { justify-content: center; text-align: center; }
}

/* -----------------------------------------
   Blog Article Right Column
   Grid activates only when the "Blog Article Sidebar"
   widget area has at least one widget in it (see single.php).
------------------------------------------ */
.cc-article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.cc-article-layout.cc-has-sidebar {
  grid-template-columns: 3fr 1fr; /* 75/25 split */
}

.cc-article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.cc-article-widget img {
  max-width: 100%;
  height: auto;
  display: block;
}

.cc-article-widget-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--cc-text);
}

@media (max-width: 782px) {
  .cc-article-layout.cc-has-sidebar {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------
   Article Sidebar — Social Icons
   Same icons/links as the site footer (.cc-site-footer__social),
   rebuilt with dedicated classes sized for the narrower ~30% sidebar
   column instead of the full-width footer row.
------------------------------------------ */
.cc-article-social {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--cc-gray-bg);
  padding: 20px;
}

.cc-article-social-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cc-article-social-divider {
  width: 3px;
  align-self: stretch;
  min-height: 50px;
  background: #000000;
}

.cc-article-social-locations {
  display: flex;
  gap: 10px;
}

.cc-article-social-icons-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px;
}

.cc-article-social-icons-grid img {
  width: 24px;
  height: 24px;
  display: block;
}

.cc-article-social-icons {
  display: flex;
  gap: 6px;
}

.cc-article-social-icons img {
  width: 24px;
  height: 24px;
  display: block;
}

.cc-article-social-label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 8px;
  color: var(--cc-text);
}

/* -----------------------------------------
   Article Sidebar — Local Authorized Apple
   Repair Store block (aliens graphic, heading,
   Apple program badges, AppleCare+ badge)
------------------------------------------ */
.cc-article-apple {
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 20px;
  text-align: center;
  margin-top: -25px;
}

.cc-article-apple-team {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 16px;
}

.cc-article-apple-heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--cc-text);
  margin: 0 0 20px;
  line-height: 1.3;
}

.cc-article-apple-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0 0 16px;
}

.cc-article-apple-badges img {
  min-width: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* flex-grow weighted by each image's own aspect ratio (width/height) —
   the result is both badges render at the SAME height as each other,
   scaling together to fill whatever width the sidebar column has,
   instead of splitting the row evenly and distorting their proportions. */
.cc-article-apple-badge-service {
  flex: 3.43 1 0;
}

.cc-article-apple-badge-reseller {
  flex: 2.77 1 0;
}

.cc-article-applecare {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* -----------------------------------------
   Article Sidebar — Awards block
   Gradient background, rounded corners, stacked badges
------------------------------------------ */
.cc-article-awards {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 15px;
  background: linear-gradient(to bottom, #0153e9 0%, #0344b9 50%, #0153e9 100%);
  text-align: center;
}

.cc-article-awards-heading {
  font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
}

.cc-article-awards img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* -----------------------------------------
   Article Sidebar — "Mac/PC Needs" ad box
   Same light-grey gradient as the homepage .cc-section-bg-gradient,
   rounded corners + 15px padding to match the awards block above it.
------------------------------------------ */
.cc-article-adbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  background: linear-gradient(to bottom, #eeeef0 0%, #d0d0d0 20%, #d0d0d0 80%, #eeeef0 100%);
}

/* "We Have Everything..." heading — sized to match the Awards heading above */
.cc-article-adbox-heading-sm {
  font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #0058f6;
  margin: 0;
  line-height: 1.25;
}

/* "Refurbished Macs & PCs" heading — bold 24pt per Photoshop spec, same blue as cc-section-heading-lg */
.cc-article-adbox-heading-lg {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 22px;
  color: #0058f6;
  margin: 0;
  line-height: 1.25;
}

/* "Lease-to-Own Options..." heading — regular 20pt per Photoshop spec */
.cc-article-adbox-heading-sm2 {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
  color: var(--cc-text);
  margin: 0;
  line-height: 1.3;
}

/* Body copy — regular 13pt per Photoshop spec */
.cc-article-adbox-text {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: var(--cc-text);
  margin: 0;
  line-height: 1.5;
}

.cc-article-adbox-img-full {
  display: block;
  width: 100%;
  height: auto;
}

.cc-article-adbox-btn-learnmore {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
}

.cc-article-adbox-btn-cards {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
}

/* -----------------------------------------
   Article Sidebar — "In-Store, On-Site or Remote Computer Repair" block
   White background, heading matches .cc-article-adbox-heading-lg,
   body text matches .cc-article-adbox-heading-sm2.
------------------------------------------ */
.cc-article-repair {
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 20px 0; /* no left/right buffer — heading/text run full column width */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: -25px; /* pull section up 25px, same technique as the Apple block above */
}

.cc-article-repair-heading {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 22px;
  color: #0058f6;
  margin: 0;
  line-height: 1.25;
}

.cc-article-repair-text {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
  color: var(--cc-text);
  margin: 0;
  line-height: 1.3;
}

.cc-article-repair-img {
  display: block;
  width: 100%;
  height: auto;
}

/* -----------------------------------------
   Article Sidebar — Gamers block
   Same blue gradient/rounded-corner treatment as the Awards block above.
------------------------------------------ */
.cc-article-gaming {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  background: linear-gradient(to bottom, #0153e9 0%, #0344b9 50%, #0153e9 100%);
  margin-top: -25px; /* pull section up 25px, same technique as the Apple/repair blocks */
}

.cc-article-gaming-img {
  display: block;
  width: 100%;
  height: auto;
}

.cc-article-gaming-heading {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.cc-article-gaming-text {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

.cc-article-gaming-btn {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
}

/* -----------------------------------------
   Article Sidebar — "Security Is Everything" block
   Same light-grey gradient/rounded-corner treatment as the ad box.
------------------------------------------ */
.cc-article-security {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  background: linear-gradient(to bottom, #eeeef0 0%, #d0d0d0 20%, #d0d0d0 80%, #eeeef0 100%);
}

/* Groups the two headings together with no gap between them,
   so they read as one tight two-line header inside the block's
   normal 15px gap flow. */
.cc-article-security-headings {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cc-article-security-heading {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 22px;
  color: #0058f6;
  margin: 0;
  line-height: 1.25;
}

.cc-article-security-subheading {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  margin: 0;
  line-height: 1.25;
}

.cc-article-security-img {
  display: block;
  width: 100%;
  height: auto;
}

.cc-article-security-text {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: var(--cc-text);
  margin: 0;
  line-height: 1.5;
}

/* -----------------------------------------
   Article Sidebar — "Time With A Tech" block
   White background, everything centered in a column — same pattern
   as the repair block. (Dropped the earlier float/text-wrap layout;
   the narrow 25% column made the wrap unworkable, so the image now
   just sits centered above the text instead.)
------------------------------------------ */
.cc-article-tech {
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: -25px;
}

.cc-article-tech-img {
  display: block;
  width: 100px;
  height: auto;
  margin: 0 0 5px;
}

.cc-article-tech-heading {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: var(--cc-text);
  margin: 0;
  line-height: 1.2;
}

.cc-article-tech-subheading {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: var(--cc-text);
  margin: 0;
  line-height: 1.25;
}

.cc-article-tech-text {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: var(--cc-text);
  margin: 0;
  line-height: 1.5;
}

.cc-article-tech-link {
  color: var(--cc-blue);
  font-weight: bold;
  text-decoration: underline;
}

/* -----------------------------------------
   Article Sidebar — "Knowledgebase" block
   Same light-grey gradient / rounded-corner treatment as the ad box
   and the Security block.
------------------------------------------ */
.cc-article-kb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  background: linear-gradient(to bottom, #eeeef0 0%, #d0d0d0 20%, #d0d0d0 80%, #eeeef0 100%);
  margin-top: -25px;
}

.cc-article-kb-logo {
  display: block;
  width: 100%;
  height: auto;
}

.cc-article-kb-img {
  display: block;
  width: 100%;
  height: auto;
}

.cc-article-kb-text {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: var(--cc-text);
  margin: 0;
  line-height: 1.5;
}

.cc-article-kb-btn {
  display: block;
  width: 100%;
  height: auto;
  max-width: 230px;
}

/* ===========================================================
   Blog Article BODY formatting (SO Page Builder content)
   Scoped to .cc-article-content so it only touches the article
   body area, not the sidebar or the rest of the site. The page
   title (H1) is handled separately by the theme and is NOT
   touched here — only H2 through H5.
=========================================================== */

/* Heading hierarchy: each level Arial, black, and smaller than the
   one above it. Starts intentionally plain (black, no color accents)
   per initial spec — expect this to get revisited after live testing. */
.cc-article-content h2 {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 26px;
  color: #000000;
  margin: 1.2em 0 0.5em;
  line-height: 1.3;
}

.cc-article-content h3 {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 22px;
  color: #000000;
  margin: 1.1em 0 0.5em;
  line-height: 1.3;
}

.cc-article-content h4 {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 19px;
  color: #000000;
  margin: 1em 0 0.5em;
  line-height: 1.35;
}

.cc-article-content h5 {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 17px;
  color: #000000;
  margin: 1em 0 0.5em;
  line-height: 1.4;
}

/* Bullet-point outline, 3 levels deep, each level with its own
   bullet style so nesting is visually obvious at a glance. */
.cc-article-content ul {
  list-style-type: disc;
  margin: 0 0 1em;
  padding-left: 1.5em;
}

.cc-article-content ul ul {
  list-style-type: circle;
  margin: 0.25em 0 0;
}

.cc-article-content ul ul ul {
  list-style-type: square;
  margin: 0.25em 0 0;
}

.cc-article-content li {
  margin-bottom: 0.4em;
}

/* Featured image, auto-pulled from the post's WordPress featured image
   (same image used for the blog listing thumbnail). Client is uploading
   these at a standard 1600x980, so this is sized/ratio'd around that. */
.cc-article-featured-image {
  width: 100%;
  margin: 0 0 24px;
}

.cc-article-featured-image-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pull the whole blog-article content block (top breadcrumb + article body +
   right column) up 35px, closer to the grey H1 header background. Scoped to
   .post-single-page only (the blog article template) so it doesn't affect
   .wn-pagecont on any other page template. */
.post-single-page .wn-pagecont {
  margin-top: -35px;
}

/* Breadcrumb nav — top and bottom of the article body.
   [Blog Categories Landing Page] > [Current Blog Category Page] > [blog title]
   Text color matches .cc-section-heading-lg (#0058f6). */
.cc-article-breadcrumb {
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #0058f6;
}

.cc-article-breadcrumb a {
  color: #0058f6;
  text-decoration: underline !important;
}

.cc-article-breadcrumb a:hover {
  text-decoration: none !important;
}

.cc-article-breadcrumb-sep {
  margin: 0 6px;
}

.cc-article-breadcrumb-top {
  display: block;
  text-align: left;
  margin: 20px 0 20px;
}

.cc-article-breadcrumb-bottom {
  display: block;
  margin: 24px 0 0;
}