/* ===== Circuit Craftworks — Maker's Mark design system v1 ===== */
:root{
  --cc-charcoal:#1E2124;
  --cc-charcoal-soft:#2A2E32;
  --cc-offwhite:#F5F1EA;
  --cc-offwhite-2:#EFE9DF;
  --cc-copper:#B5723A;
  --cc-copper-dark:#93592B;
  --cc-line:#D9D1C4;
  --cc-body:#2E3236;
  --cc-muted:#5C6268;
  --cc-radius:6px;
  --cc-maxw:1120px;
  --cc-s1:.5rem; --cc-s2:1rem; --cc-s3:1.5rem; --cc-s4:2.5rem; --cc-s5:4rem;
}
body{background:var(--cc-offwhite);color:var(--cc-body);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;}
.site-main,.page-content,.entry-content{max-width:var(--cc-maxw);margin-inline:auto;padding-inline:1.25rem;}
h1,h2,h3,h4,h5,h6{font-family:Sora,Outfit,Inter,sans-serif;color:var(--cc-charcoal);letter-spacing:-.015em;line-height:1.2;}
h1{font-size:clamp(2.1rem,5vw,3.25rem);font-weight:700;margin:0 0 var(--cc-s3);}
h2{font-size:clamp(1.6rem,3.2vw,2.25rem);font-weight:650;margin:var(--cc-s5) 0 var(--cc-s2);}
h3{font-size:clamp(1.2rem,2.2vw,1.45rem);font-weight:600;margin:var(--cc-s4) 0 var(--cc-s1);}
p{margin:0 0 var(--cc-s2);max-width:70ch;}
a{color:var(--cc-copper-dark);text-underline-offset:3px;}
a:hover{color:var(--cc-charcoal);}
h3 a{color:var(--cc-charcoal);text-decoration:none;}
h3 a:hover{color:var(--cc-copper-dark);text-decoration:underline;}
ul{max-width:70ch;} li{margin-bottom:.4rem;}
hr.wp-block-separator{border:0;border-top:1px solid var(--cc-line);margin:var(--cc-s5) 0;max-width:100%;}
/* Buttons */
.wp-block-button__link,.ff-btn-submit,button[type=submit]{
  background:var(--cc-copper)!important;color:#fff!important;border:2px solid var(--cc-copper)!important;
  border-radius:var(--cc-radius)!important;padding:.85rem 1.6rem!important;font-weight:600!important;
  font-family:Sora,Outfit,Inter,sans-serif!important;letter-spacing:.01em;text-decoration:none!important;
  transition:background .15s ease,border-color .15s ease;}
.wp-block-button__link:hover,.ff-btn-submit:hover,button[type=submit]:hover{
  background:var(--cc-copper-dark)!important;border-color:var(--cc-copper-dark)!important;}
.is-style-outline .wp-block-button__link{background:transparent!important;color:var(--cc-charcoal)!important;border:2px solid var(--cc-charcoal)!important;}
.is-style-outline .wp-block-button__link:hover{background:var(--cc-charcoal)!important;color:var(--cc-offwhite)!important;}
.wp-block-buttons{gap:.75rem;margin:var(--cc-s3) 0;}
/* Header / footer */
header.site-header{background:var(--cc-charcoal);border-bottom:3px solid var(--cc-copper);padding:.9rem 1.25rem;}
header.site-header .site-title,header.site-header .site-title a,header.site-header .site-description{color:var(--cc-offwhite)!important;font-family:Sora,Outfit,Inter,sans-serif;}
header.site-header .site-description{color:var(--cc-line)!important;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;}
.site-navigation a{color:var(--cc-offwhite)!important;font-family:Sora,Outfit,Inter,sans-serif;font-weight:500;text-decoration:none;padding:.5rem .7rem;border-radius:4px;}
.site-navigation a:hover,.site-navigation .current-menu-item>a{color:#fff!important;background:rgba(181,114,58,.25);}
footer.site-footer{background:var(--cc-charcoal);color:var(--cc-line);margin-top:var(--cc-s5);padding:var(--cc-s4) 1.25rem;}
footer.site-footer a{color:var(--cc-offwhite);}
/* Forms */
.fluentform .ff-el-input--label label{font-family:Sora,Outfit,Inter,sans-serif;font-weight:600;color:var(--cc-charcoal);}
.fluentform input[type=text],.fluentform input[type=email],.fluentform textarea,.fluentform select{
  border:1px solid var(--cc-line)!important;border-radius:var(--cc-radius)!important;background:#fff!important;
  padding:.7rem .8rem!important;font-size:1rem!important;}
.fluentform input:focus,.fluentform textarea:focus,.fluentform select:focus{
  border-color:var(--cc-copper)!important;box-shadow:0 0 0 3px rgba(181,114,58,.25)!important;outline:none!important;}
.fluentform .ff-el-form-check-label{font-weight:400;}
.ff-el-input--content{max-width:46rem;}
/* Accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--cc-copper);outline-offset:2px;border-radius:3px;}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
@media (max-width:782px){h2{margin-top:var(--cc-s4);} .wp-block-buttons{flex-direction:column;align-items:stretch;} .wp-block-button{width:100%;} .wp-block-button__link{display:block;text-align:center;}}

/* Front page: suppress duplicate theme page title */
body.home .page-header,body.home .entry-title,body.home h1.entry-title{display:none!important;}
/* Service + inner pages: theme title acts as H1, so soften first content heading */
body:not(.home) .page-header .entry-title{font-size:clamp(2rem,4.5vw,2.9rem);margin-bottom:var(--cc-s3);}
body:not(.home) .entry-content>h2:first-of-type{margin-top:0;}
.page-header{max-width:var(--cc-maxw);margin:var(--cc-s4) auto 0;padding-inline:1.25rem;}
/* Skip link visible on focus */
.skip-link:focus{background:var(--cc-copper);color:#fff;padding:.75rem 1rem;z-index:9999;}


/* ==================================================================
   ADVANCED-PAGE COMPATIBILITY LAYER - added 2026-08-06
   The 13 pages below each supply their own <main> layout wrapper.
   Goal: let that hand-coded design control its own layout, without
   editing page code and without altering the 10 old-format pages.
   Fully reversible: delete this entire block.
   Advanced page IDs: 10 11 12 13 23 24 26 27 28 29 30 31 42
   ================================================================== */

/* [A] Theme page title: hide on advanced pages only (each ships its own
       hero H1). Old-format pages keep it as their only H1; the blog
       index and all archives are untouched. */
body.page-id-10 .page-header,
body.page-id-11 .page-header,
body.page-id-12 .page-header,
body.page-id-13 .page-header,
body.page-id-14 .page-header,
body.page-id-15 .page-header,
body.page-id-23 .page-header,
body.page-id-24 .page-header,
body.page-id-26 .page-header,
body.page-id-27 .page-header,
body.page-id-28 .page-header,
body.page-id-29 .page-header,
body.page-id-30 .page-header,
body.page-id-31 .page-header,
body.page-id-42 .page-header{display:none;}

/* [B] Release the width cage on advanced pages so the page's own
       wrapper can span the full viewport. Overrides both the old global
       rule and theme.css's `body:not([class*=elementor-page-]) .site-main`
       max-width ladder (500/600/800/1140px) by equal specificity +
       later origin. Old-format pages keep the 1120px container. */
body.page-id-10 main.site-main,
body.page-id-10 .page-content,
body.page-id-11 main.site-main,
body.page-id-11 .page-content,
body.page-id-12 main.site-main,
body.page-id-12 .page-content,
body.page-id-13 main.site-main,
body.page-id-13 .page-content,
body.page-id-14 main.site-main,
body.page-id-14 .page-content,
body.page-id-15 main.site-main,
body.page-id-15 .page-content,
body.page-id-22 main.site-main,
body.page-id-22 .page-content,
body.page-id-23 main.site-main,
body.page-id-23 .page-content,
body.page-id-24 main.site-main,
body.page-id-24 .page-content,
body.page-id-26 main.site-main,
body.page-id-26 .page-content,
body.page-id-27 main.site-main,
body.page-id-27 .page-content,
body.page-id-28 main.site-main,
body.page-id-28 .page-content,
body.page-id-29 main.site-main,
body.page-id-29 .page-content,
body.page-id-30 main.site-main,
body.page-id-30 .page-content,
body.page-id-31 main.site-main,
body.page-id-31 .page-content,
body.page-id-42 main.site-main,
body.page-id-42 .page-content{max-width:none;margin-inline:0;padding-inline:0;}

/* [C] Remove the wpautop empty <p> artefacts that WordPress inserts
       around the page's <style> and <main>. These created the cream
       strip between the header and the hero (self-collapsing 16px margin
       plus a 57.8px empty line box) and padding before the footer.
       Verified: every top-level <p> on all 13 advanced pages is empty. */
body.page-id-10 .page-content > p,
body.page-id-11 .page-content > p,
body.page-id-12 .page-content > p,
body.page-id-13 .page-content > p,
body.page-id-14 .page-content > p,
body.page-id-15 .page-content > p,
body.page-id-23 .page-content > p,
body.page-id-24 .page-content > p,
body.page-id-26 .page-content > p,
body.page-id-27 .page-content > p,
body.page-id-28 .page-content > p,
body.page-id-29 .page-content > p,
body.page-id-30 .page-content > p,
body.page-id-31 .page-content > p,
body.page-id-42 .page-content > p{display:none;}

/* [D] Fix the repeatable 8px horizontal overflow at its source.
       Each wrapper declares width:100vw; max-width:100vw;
       margin-inline:calc(50% - 50vw). 100vw INCLUDES the classic
       scrollbar, so the wrapper was always half a scrollbar (8px) wider
       than the viewport on both edges. Now that [B] has removed the
       ancestor cage, width:auto makes the wrapper exactly as wide as the
       content box, which equals clientWidth - no overflow, same
       full-bleed result. Selectors carry the wrapper id plus body.page
       (1,1,0) so they outrank each page's own id rule (1,0,0) without
       !important. overflow-x:clip from the page is left in place. */
body.page #cc-homepage,
body.page #ccsp-services-page,
body.page #ccwp-how-it-works,
body.page #ccab-about-page,
body.page #ccarea-page,
body.page #ccrs-page,
body.page #ccdx-page,
body.page #ccup-page,
body.page #ccdt-page,
body.page #ccos-page,
body.page #ccpb-page,
body.page #cchs-page{width:auto;max-width:none;margin-inline:0;}

/* [E] The global footer.site-footer{margin-top:4rem} left a 64px cream
       band between the last navy section and the charcoal footer on every
       advanced page. Advanced pages end with their own section padding,
       so the footer should butt directly against them. Old-format pages
       keep the 4rem breathing room. */
body.page-id-10 footer.site-footer,
body.page-id-11 footer.site-footer,
body.page-id-12 footer.site-footer,
body.page-id-13 footer.site-footer,
body.page-id-14 footer.site-footer,
body.page-id-15 footer.site-footer,
body.page-id-23 footer.site-footer,
body.page-id-24 footer.site-footer,
body.page-id-26 footer.site-footer,
body.page-id-27 footer.site-footer,
body.page-id-28 footer.site-footer,
body.page-id-29 footer.site-footer,
body.page-id-30 footer.site-footer,
body.page-id-31 footer.site-footer,
body.page-id-42 footer.site-footer{margin-top:0;}

/* [F] The homepage wrapper alone declares its full-bleed margins with
       !important, so [D] could not reach them. This is the one place an
       !important override is required; it is targeted at a single id. */
body.page #cc-homepage{margin-left:0!important;margin-right:0!important;}

/* [G] wpautop also injects empty <p> tags INSIDE each wrapper. Their
       self-collapsing 1rem margins escaped the wrapper's top and bottom
       edges, leaving a residual 16px cream strip above the hero and below
       the last section. display:flow-root gives the wrapper its own block
       formatting context so those margins stay inside the navy area.
       Nothing is hidden and no internal design spacing is altered. */
body.page #cc-homepage,
body.page #ccsp-services-page,
body.page #ccwp-how-it-works,
body.page #ccab-about-page,
body.page #ccarea-page,
body.page #ccrs-page,
body.page #ccdx-page,
body.page #ccup-page,
body.page #ccdt-page,
body.page #ccos-page,
body.page #ccpb-page,
body.page #cchs-page{display:flow-root;}

/* ==================================================================
   COMPATIBILITY SUPPLEMENT V1.3 - added 2026-08-06
   Adds the class-only Help Center and Pricing designs to the full-bleed
   compatibility layer and removes empty wpautop paragraphs inside all
   known hand-coded page shells.
   ================================================================== */

/* Help Center (16) and Pricing (18) each provide their own hero H1. */
body.page-id-16 .page-header,
body.page-id-18 .page-header{display:none;}

/* Release the Hello Elementor/global width cage on these two pages. */
body.page-id-16 main.site-main,
body.page-id-16 .page-content,
body.page-id-18 main.site-main,
body.page-id-18 .page-content{max-width:none;margin-inline:0;padding-inline:0;}

/* Remove wpautop artefacts surrounding their hand-coded page shells. */
body.page-id-16 .page-content > p,
body.page-id-18 .page-content > p{display:none;}

/* Their full-bleed wrappers use classes rather than the IDs above. */
body.page .ccfaq-page-shell,
body.page .ccpp-page{
  width:auto;
  max-width:none;
  margin-left:0!important;
  margin-right:0!important;
  display:flow-root;
}

/* Remove only genuinely empty paragraphs inserted inside the wrappers.
   These paragraphs created the remaining 16px light seam before the
   first designed section. Real paragraphs remain untouched. */
body.page #cc-homepage > p:empty,
body.page #ccsp-services-page > p:empty,
body.page #ccwp-how-it-works > p:empty,
body.page #ccab-about-page > p:empty,
body.page #ccarea-page > p:empty,
body.page #ccrs-page > p:empty,
body.page #ccdx-page > p:empty,
body.page #ccup-page > p:empty,
body.page #ccdt-page > p:empty,
body.page #ccos-page > p:empty,
body.page #ccpb-page > p:empty,
body.page #cchs-page > p:empty,
body.page .ccfaq-page-shell > p:empty,
body.page .ccpp-page > p:empty{display:none;}

/* Some wpautop configurations serialize the empty paragraph as a lone
   line break. Use :has only in browsers that support it. */
@supports selector(p:has(> br:only-child)){
  body.page #cc-homepage > p:has(> br:only-child),
  body.page #ccsp-services-page > p:has(> br:only-child),
  body.page #ccwp-how-it-works > p:has(> br:only-child),
  body.page #ccab-about-page > p:has(> br:only-child),
  body.page #ccarea-page > p:has(> br:only-child),
  body.page #ccrs-page > p:has(> br:only-child),
  body.page #ccdx-page > p:has(> br:only-child),
  body.page #ccup-page > p:has(> br:only-child),
  body.page #ccdt-page > p:has(> br:only-child),
  body.page #ccos-page > p:has(> br:only-child),
  body.page #ccpb-page > p:has(> br:only-child),
  body.page #cchs-page > p:has(> br:only-child),
  body.page .ccfaq-page-shell > p:has(> br:only-child),
  body.page .ccpp-page > p:has(> br:only-child){display:none;}
}


/* [PATCH-CCPP-LEFT 2026-08-06] Pricing wrapper offset neutralizer.
   The page's own CSS declares .ccpp-page{position:relative;left:50%;
   width:100vw;margin-left:-50vw}. The full-bleed wrapper rule above
   zeroes the compensating negative margin, which left the bare left:50%
   in place and displaced the entire design 50% to the right.
   This cancels only that offset; nothing else is changed. */
body.page-id-18 .ccpp-page{
  left:0;
  inset-inline-start:0;
}


/* [PATCH-STRAY-BR 2026-08-06] wpautop also serializes an artefact as a
   bare <br> that is a DIRECT child of the designed wrapper (seen on the
   home, services and service-areas wrappers). It is not inside any p, so
   the p:empty and p:has(br) rules above never matched it, and its ~21px
   line box pushed the hero 25-29px below the sticky header.
   Scoped to direct children of the known wrappers only, so genuine <br>
   line breaks inside the page design are untouched. */
body.page #cc-homepage > br,
body.page #ccsp-services-page > br,
body.page #ccwp-how-it-works > br,
body.page #ccab-about-page > br,
body.page #ccarea-page > br,
body.page #ccrs-page > br,
body.page #ccdx-page > br,
body.page #ccup-page > br,
body.page #ccdt-page > br,
body.page #ccos-page > br,
body.page #ccpb-page > br,
body.page #cchs-page > br,
body.page .ccfaq-page-shell > br,
body.page .ccpp-page > br{display:none;}

/* ---------------------------------------------------------------------------
   Legacy page bottom seam - pages 14 (/contact/) and 15 (/request-service/).
   On these two old-format pages the final .page-content child is a paragraph
   whose 16px bottom margin collapses through .page-content and main, leaving a
   16px strip of body background above the global footer. Scoped to these two
   page IDs only - designed pages keep their existing spacing.
--------------------------------------------------------------------------- */
body.page-id-14 .page-content > *:last-child,
body.page-id-15 .page-content > *:last-child{margin-bottom:0;}


/* ---------------------------------------------------------------------------
   TABLET SIDE SPACING — 2026-09-03

   Between 701px and 1120px the page bodies resolve --shell to min(96vw,1060px),
   which leaves only 2vw of side gutter: 15px at 768, 18px at 900, 20px at 1024.
   Body copy and headings ran almost to the edge of the screen on every page
   built on the ccgx system; Services, Help Center, How It Works and Request
   Service were the worst affected.

   The shell measure is narrowed rather than the inner padding being rewritten,
   so the correction is strictly additive: whatever padding a page already sets
   on its own containers is preserved and the gutter can only grow. Nothing is
   repositioned and no horizontal overflow can be introduced.

   Page bodies are frozen and their <style> blocks sit after this file in the
   document, so the rules carry `html body` to win on specificity rather than on
   source order.

   Desktop (>1120px) and phone (<=700px) are untouched - both were already fine.
--------------------------------------------------------------------------- */
@media (min-width:701px) and (max-width:1120px){
	html body #ccgx-page{
		--shell:min(calc(100% - 76px),1060px);
		--shell-wide:min(calc(100% - 76px),1100px);
	}
}


/* ---------------------------------------------------------------------------
   MEASURE — 2026-09-03

   Everything was capped narrower than the screens it is read on. Measured at
   2560px the header shell and footer container both stopped at 1580px and the
   page content at 1425px, leaving 560px of empty board each side and a nav bar
   squeezed into the middle third of the display.

   All three widen by 25%:
       header shell      1580 -> 1975
       footer container  1580 -> 1975
       page content      1425 -> 1781

   Scoped to >=1121px so tablet and phone keep exactly the behaviour they have,
   and each keeps a min() against the viewport so nothing can overflow. The
   header and footer rules carry !important because the theme's own rules do;
   `html body` gives them the higher specificity that decides between two
   important declarations.
--------------------------------------------------------------------------- */
@media (min-width:1121px){
	html body .cc-header-v2__shell{
		width:min(calc(100vw - 26px),1975px) !important;
		max-width:none !important;
	}
	html body .cc-site-footer__container,
	html body .cc-footer__inner{
		width:min(calc(100vw - 26px),1975px) !important;
		max-width:none !important;
	}
	html body #ccgx-page{
		--maxw:1781px;
		--shell:min(calc(100vw - 26px),1781px);
		--shell-wide:min(calc(100vw - 26px),1781px);
	}
}