/* Auto-generated. Do not edit manually. */
/*
Theme Name: Excel Remediation (Lightning)
Theme URI: https://7figurewebdesign.com
Author: 7 Figure Web Design
Author URI: https://7figurewebdesign.com
Description: Ultra-lightweight, Classic Editor-only theme for Excel Interior Remediation Services. Built for maximum PageSpeed, with zero inline styles and minimal scripts.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: excelremediation
*/

:root{
  /* Core colors (editable via Customizer) */
  --bg:#ffffff;
  --soft:#f7f8f9;
  --text:#6a7383;
  --head:#020c2b;
  --brand:#016ac5;
  --brandHover:#020c2b;
  /* Content links (paragraphs + widgets) */
  --contentLink:#6a7383;
  --contentLinkHover:#016ac5;
  /* Footer link hover */
  --footerLinkHover:#016ac5;
  --line:#eaecee;
  --white:#ffffff;
  --stars:#f7cb45;

  /* Mobile-only header CTA colors (editable via Customizer) */
  --mobileCtaBg:#d11818;
  --mobileCtaHover:#a60f0f;

  /* Gradients / effects */
  --pageTitleGradTop:#c4c8cd;
  --pageTitleGradBottom:#6c7582;
  --heroOverlay:rgba(0,0,0,.5);
  --panelShadow:rgba(0,0,0,.08);
  --cardShadow:rgba(2,12,43,0.18);

  /* Layout */
  --btnRadius:4px;   /* less rounded buttons */
  --cardRadius:6px;  /* slightly rounded boxes */
  --container:84vw;
  --max:1200px;

  /* Hero background images (editable via Customizer) */



}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

.container{width:84%;max-width:var(--container);margin-inline:auto;}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);
  color:var(--white);
  border:0;
  border-radius:var(--btnRadius);
  padding:.62rem .9rem;
  font-weight:400;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{background:var(--brandHover);color:var(--white)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn-hero{border:1px solid var(--white)}

/* Header 24/7 CTA (red on all views; customizable via Customizer) */
.header-cta{background:var(--mobileCtaBg)}
.header-cta:hover{background:var(--mobileCtaHover);color:var(--white)}

/* Header CTA padding (desktop/tablet default) */
.btn.header-cta{padding:.62rem .9rem}
.top-actions .btn.header-cta{padding:.62rem 1.05rem}

.btn-icon,
.btn.btn-icon{
  width:36px;height:36px;min-width:36px;
  padding:0;
  justify-content:center;
}
.btn-icon svg{width:16px;height:16px}

.icon-white{fill:var(--white)}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  font-size:.84rem;
  border-bottom:1px solid var(--line);
}
.row-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0}
.divider{height:1px;background:var(--line);width:100%}
.logo{display:flex;align-items:center;justify-content:flex-start}
.logo .custom-logo-link{display:flex;align-items:center}
.logo .custom-logo{max-height:60px;height:60px;width:auto;object-fit:contain}
.logo img{max-height:60px;height:60px;width:auto;object-fit:contain}

/* Top actions (desktop) */
.top-actions{display:flex;align-items:center;gap:1rem}
.top-actions .btn{height:60px;padding:0 1rem}
.top-link{
  color:var(--text);
  font-weight:400;
  padding:.25rem 0;
  transition:color .15s ease;
}
.top-link:hover{color:var(--brand)}

/* Menus */
.menu,.footer-menu,.footer-links{list-style:none;margin:0;padding:0}
.menu{display:flex;align-items:center;gap:.4rem}

.menu a{
  font-size:.86rem;
  display:inline-block;
  padding:.35rem .5rem;
  border-radius:var(--btnRadius);
  color:var(--text);
  font-weight:400;
  transition:background-color .15s ease, color .15s ease;
}

/* Align the first link text flush to the container edge (match logo alignment) */
.site-header .menu > li:first-child > a{padding-left:0}
.footer-bottom-left .menu > li:first-child > a{padding-left:0}
.menu a:hover{background:transparent;color:var(--brand)}
.menu a.is-current{background:transparent;color:var(--brand);font-weight:700}

.desktop-only{display:flex}
.mobile-only{display:none}

/* Mobile nav toggle (no JS) */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}

/* Mobile panel (CSS-only) */
.mobile-panel{
  display:none;
  position:absolute;
  left:0;right:0;
  top:54px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--cardRadius);
  padding:.75rem;
  box-shadow:0 6px 20px var(--panelShadow);
}
.nav-toggle:checked ~ .mobile-panel{display:block}

.mobile-panel .panel-inner{display:grid;gap:.6rem}
.mobile-panel a{
  color:var(--text);
  font-weight:400;
  padding:.6rem .75rem;
  border:1px solid var(--line);
  border-radius:var(--cardRadius);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mobile-panel a:hover{border-color:var(--brand);background:transparent;color:var(--brand)}
.mobile-panel a.is-current{background:transparent;color:var(--brand);font-weight:700;border-color:var(--line)}
.mobile-panel .btn{width:100%}

/* Hero */
.hero{
  position:relative;
  display:flex;align-items:center;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-image:var(--heroBgSm);
  padding:1.5rem 0;
}
@media (min-width:768px){
  .hero{background-image:var(--heroBgMd);padding:2.25rem 0}
}
@media (min-width:1100px){
  .hero{background-image:var(--heroBgLg);padding:3rem 0}
}
.hero::before{content:"";position:absolute;inset:0;background:var(--heroOverlay)}
.hero-inner{
  position:relative;
  width:100%;
  padding:2.25rem 0;
  text-align:center;
  color:var(--white);
}
.hero h1{
  margin:0 0 .8rem;
  font-size:clamp(1.5rem,3.2vw,2.6rem);
  line-height:1.1;
  letter-spacing:-.2px;
  color:var(--white);
  font-weight:600;
}
.hero p{
  margin:0 auto 1.2rem;
  max-width:80ch;
  color:var(--white);
  opacity:.95;
  font-weight:400;
}

/* Sections */
section{padding:3.75rem 0}
.soft{background:var(--soft)}
.white{background:var(--bg)}
.center{text-align:center}

h2,h3,h4,h5,h6{
  color:var(--head);
  margin:0 0 1.05rem;
  line-height:1.2;
  font-weight:700;
}
h2{font-size:clamp(1.6rem,2.2vw,2.05rem)}
p{margin:.25rem 0 1.35rem}
/* Desktop + tablet: left-align paragraph content for readability
   (boxed/card/hero paragraphs are handled separately below) */
p{ text-align:left; }
p a{color:var(--contentLink);transition:color .15s ease}
p a:hover{color:var(--contentLinkHover)}

/* Widget link colors (Customizer-controlled; does not affect header/footer menus) */
.widget-area a,
.widget a{color:var(--contentLink);transition:color .15s ease}
.widget-area a:hover,
.widget a:hover{color:var(--contentLinkHover)}

/* Keep "boxed" content paragraphs readable (do NOT justify inside boxes/cards) */
.hero p{ text-align:center; }
.card p{ text-align:center; }
.post-body p{ text-align:left; }

/* Cards */
.cards{display:grid;gap:1rem;margin-top:1.5rem;grid-template-columns:1fr}
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--cardRadius);
  padding:1.25rem 1.1rem;
  text-align:center;
}
.feature-ico{width:44px;height:44px;margin:0 auto .9rem}
@media (min-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}}

/* Split rows */
.split{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  align-items:center;
  padding:1.5rem 0;
}
.split + .split{border-top:1px solid var(--line)}
.split .media img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--line);
  border-radius:0;
}
@media (min-width:1100px){
  .split{grid-template-columns:1.05fr .95fr;gap:2rem;padding:2rem 0}
  .split.reverse{grid-template-columns:.95fr 1.05fr}
  .split.reverse .media{order:1}
  .split.reverse .content{order:2}
  .split .content{text-align:left}
}
@media (max-width:1099.98px){
  .split .media{order:1}
  .split .content{order:2;text-align:center}
}

/* Testimonial stars (SVG) */
.stars{display:flex;justify-content:center;gap:.25rem;margin:.15rem 0 .9rem}
.stars svg{width:18px;height:18px;fill:var(--stars)}
.t-name{margin-top:.9rem;margin-bottom:0;color:var(--head)}
.t-role{margin:0;color:var(--text);font-weight:400}

.pad-after-lg{margin-bottom:2rem}

/* About / default page & post layout */
.page-title{
  position:relative;
  background:linear-gradient(to bottom, var(--pageTitleGradTop) 0%, var(--pageTitleGradBottom) 100%);
  padding:3.5rem 0;
  overflow:hidden;
}

/* If a featured image exists behind the H1, increase banner height on desktop/tablet only */
@media (min-width:601px){
  .page-title.has-featured{padding:9.1rem 0}
}
.page-title-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.page-title-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-title::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
  z-index:1;
  pointer-events:none;
}
.page-title .container{position:relative;z-index:2}
.page-title h1{
  color:var(--white);
  margin:0 auto;
  text-align:center;
  font-size:clamp(1.5rem,3.2vw,2.6rem);
  width:70%;
}
@media (max-width:900px){
  .page-title h1{width:100%}
}

.about-content{padding:2.6rem 0 2rem}
.about-narrow{width:70%;margin:0 auto}
@media (max-width:900px){.about-narrow{width:100%}}

.about-narrow ul{margin-bottom:1.8rem}

/* Blog / archives */
.blog-wrap{padding:3.5rem 0}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.1rem;
}
.post-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:transparent;
  border:1px solid var(--line);
}
.post-img{display:block}
.post-img img{display:block;width:100%;height:auto}
.post-body{
  flex:1;
  background:var(--white);
  padding:1.6rem 1.6rem 1.35rem;
  box-shadow:0 12px 26px var(--cardShadow);
}
.post-cat{
  margin:0 0 .4rem;
  font-size:.85rem;
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.post-title{margin:0 0 .6rem}
.post-title a{color:var(--head)}
.post-title a:hover{color:var(--brand)}
.post-excerpt{margin:0;color:var(--text)}

@media (max-width:1099.98px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .blog-grid{grid-template-columns:1fr}
  .blog-wrap{padding:3rem 0}
}

/* Footer */
footer{background:var(--bg)}
.footer-top{
  padding:2.25rem 0;
  border-top:1px solid var(--line);
  font-size:.86rem;
}
.footer-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:768px) and (max-width:1099.98px){
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){.footer-grid{grid-template-columns:repeat(4,1fr)}}

.footer-col h3,
.footer-col h4{
  margin:0 0 .6rem;
  position:relative;
  padding-bottom:.9rem;
}
.footer-col h3::after,
.footer-col h4::after{
  content:"";
  position:absolute;left:0;right:0;bottom:.35rem;
  height:1px;background:var(--line);
}
.footer-col h3::before,
.footer-col h4::before{
  content:"";
  position:absolute;left:0;bottom:.05rem;
  width:10%;
  height:5px;
  background:var(--brand);
}

/* Footer widget lists: use arrows instead of bullets */
.footer-col ul:not(.menu){
  margin:0;
  padding-left:0;
  list-style:none;
}

.footer-col ul:not(.menu) li{
  position:relative;
  padding-left:1.1rem;
}

.footer-col ul:not(.menu) li::before{
  content:"\2192"; /* → */
  position:absolute;
  left:0;
  top:0;
  color:var(--brand);
}

.footer-links{display:grid;gap:.5rem}
.footer-links a{
  display:inline-block;
  padding:.2rem 0;
  transition:color .15s ease;
  text-decoration:underline;
}
.footer-links a:hover{color:var(--footerLinkHover)}

/* Footer link hover (menus + widget links) */
footer a:not(.btn):hover{color:var(--footerLinkHover)}
.footer-badge{border:0;border-radius:0;padding:0;display:flex;justify-content:flex-start;align-items:flex-start}

.footer-bottom{
  border-top:1px solid var(--line);
  padding:1rem 0;
  font-size:.86rem;
}
.footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
}
.footer-bottom-left{display:flex;color:var(--text);font-size:.84rem;gap:1.8rem;align-items:center;flex-wrap:wrap}
.footer-bottom-right{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

@media (max-width:1099.98px){
  .footer-bottom-inner{flex-direction:column;justify-content:center;align-items:center;text-align:center}
  .footer-bottom-left,.footer-bottom-right{justify-content:center;align-items:center}
  .footer-bottom-right{flex-direction:column}

  .footer-bottom-left .menu,.footer-bottom-right .menu{justify-content:center}
}

/* Mobile only: make the 2nd footer row content full width */
@media (max-width:767.98px){
  .footer-bottom-inner{gap:0}
  .footer-bottom .container{width:100%;max-width:100%}
}

.footer-link{
  color:var(--text);
  font-weight:400;
  font-size:.84rem;
  transition:color .15s ease;
}
.footer-link:hover{color:var(--brand)}
.footer-bottom-right .btn-icon{width:36px;height:36px;min-width:36px;padding:0;justify-content:center}

@media (max-width:1099.98px){
  :root{--container:92vw}
  .desktop-only{display:none}
  .mobile-only{display:flex}
  .row-inner{padding:.4rem 0}

  .bottom-mobile{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    width:100%;
  }
  .bottom-mobile > label{flex:0 0 auto}
  .bottom-mobile > a{flex:0 0 auto;margin-left:auto}

  .hero-inner{padding:1.75rem 0}

  .top-mobile .btn{height:60px;min-width:221px;padding:0 .9rem}
  .logo img{height:60px;width:221px;object-fit:contain}
  .logo .custom-logo{height:60px;width:221px;object-fit:contain}
}

/* Mobile: make logo and CTA button visually equal size */
@media (max-width:600px){

  /* Shared mobile header height (logo + CTA) */
  .site-header{--mobileHeaderH:46px;}

  /* Mobile layout: keep everything visually centered */
  .container{width:92%;}

  /* Mobile buttons: reduce text size + prevent overflow */
  .btn{font-size:.88rem;max-width:100%;white-space:normal;line-height:1.2;}

  /* Mobile typography: left-align paragraphs for readability
     (except paragraphs inside content boxes/cards) */
  p{ text-align:left; }
  .hero p,
  .card p,
  .box p,
  .cta-box p{ text-align:center; }

  /* Mobile header layout: logo + CTA side-by-side (46% each) */
  .site-header .header-row:first-of-type .row-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:.6rem;
  }

  .logo{width:46%;flex:0 0 46%;max-width:46%;justify-content:flex-start}
  .logo img,
  .logo .custom-logo{
    width:100%;
    height:var(--mobileHeaderH);
    max-height:var(--mobileHeaderH);
    object-fit:contain;
  }

  .top-mobile{width:46%;flex:0 0 46%;max-width:46%;display:flex;justify-content:flex-end}
  .top-mobile .btn{
    width:100%;
    max-width:100%;
    min-width:0;
    height:var(--mobileHeaderH);
    min-height:var(--mobileHeaderH);
    padding:0 .4rem;
    font-size:.62rem;
    line-height:1.1;
    background:var(--mobileCtaBg);
    white-space:normal;
    text-align:center;
  }
  .top-mobile .btn:hover{background:var(--mobileCtaHover)}
}


/* Bigger H1 on tablet/mobile for hero + page title */
@media (max-width:900px){
  .hero h1{font-size:clamp(2.1rem,6vw,3.1rem)}
  .page-title h1{font-size:clamp(2.1rem,6vw,3.1rem)}
}


/* Auto-generated. Do not edit manually. */
:root{
	--bg:#ffffff;
	--soft:#f7f8f9;
	--text:#000000;
	--head:#000000;
	--brand:#016ac5;
	--brandHover:#020c2b;
	--contentLink:#6a7383;
	--contentLinkHover:#016ac5;
	--footerLinkHover:#016ac5;
	--line:#eaecee;
	--white:#ffffff;
	--stars:#f7cb45;
	--pageTitleGradTop:#c4c8cd;
	--pageTitleGradBottom:#6c7582;
	--heroOverlay:rgba(0,0,0,.5);
	--panelShadow:rgba(0,0,0,.08);
	--cardShadow:rgba(2,12,43,0.18);
	--mobileCtaBg:#d11818;
	--mobileCtaHover:#a60f0f;
	--heroBgSm:url("https://excelremediation.ca/wp-content/uploads/2026/01/excel-hero-1200x800-1.jpg");
	--heroBgMd:url("https://excelremediation.ca/wp-content/uploads/2026/01/excel-hero-1600x900-1.jpg");
	--heroBgLg:url("https://excelremediation.ca/wp-content/uploads/2026/01/excel-hero-2560x1440-1.jpg");
}