@charset "utf-8";
/* ==========================================================================
   MKC EXTERIORS — WordPress + Elementor bridge
   Everything WordPress markup needs on top of the design system, plus the
   handful of rules that make the widgets behave inside Elementor containers.
   ========================================================================== */

/* --- NAV MENUS (wp_nav_menu markup) --------------------------------------- */
.menu li{list-style:none}
.menu li.current-menu-item > a,
.menu li.current_page_item > a,
.menu li.current-menu-ancestor > a{color:var(--ink);background:rgba(154,116,64,.13)}
.menu .sub-menu{display:none}

.drawer-menu{counter-reset:mkcnav}
.drawer-menu ul,.drawer-menu li{list-style:none}
.drawer-menu > li,.drawer-menu li{position:relative}
.drawer-menu a{display:flex;justify-content:space-between;align-items:baseline;
  font-size:clamp(1.85rem,8vw,2.7rem);letter-spacing:-.04em;padding:.26em 0}
.drawer-menu a::after{counter-increment:mkcnav;content:"0" counter(mkcnav);
  font-size:.6rem;color:var(--bronze);letter-spacing:.14em;font-weight:500}
.drawer-menu .sub-menu{display:none}

.foot ul li{list-style:none}

/* --- PROSE (the_content on non-builder pages) ----------------------------- */
.prose{max-width:74ch;font-size:1.02rem;color:var(--ink2)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.035em;color:var(--ink);margin-top:2em}
.prose h3{font-size:clamp(1.2rem,1.8vw,1.55rem);letter-spacing:-.03em;color:var(--ink);margin-top:1.8em}
.prose h4{font-size:1.08rem;color:var(--ink);margin-top:1.6em}
.prose a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--bronze2)}
.prose a:hover{color:var(--bronze)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.2em}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--bronze)}
.prose img,.prose figure img{border-radius:var(--rm)}
.prose figure{margin-block:1.8em}
.prose figcaption{margin-top:.7em;font-size:.83rem;color:var(--ink3)}
.prose blockquote{background:var(--white);border-radius:var(--rm);padding:22px 26px;box-shadow:var(--sh-1);
  font-size:1.08rem;color:var(--ink)}
.prose code{background:var(--paper2);border-radius:6px;padding:.15em .4em;font-size:.92em}
.prose pre{background:var(--ink);color:var(--paper);border-radius:var(--rm);padding:20px 22px;overflow:auto}
.prose pre code{background:none;padding:0}
.prose hr{border:0;height:1px;background:var(--line,#DCD9D1);margin-block:2.4em}
.prose table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--rm);overflow:hidden}
.prose th,.prose td{padding:12px 16px;text-align:left}
.prose th{font-weight:500;color:var(--ink);background:var(--paper2)}
.alignwide{width:min(100%,1200px);margin-inline:auto}
.alignfull{width:100vw;margin-left:calc(50% - 50vw)}
.aligncenter{margin-inline:auto;display:block}
.wp-caption{max-width:100%}
.sticky .card{box-shadow:var(--sh-2)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* --- PAGINATION ----------------------------------------------------------- */
.pagination,.navigation.pagination{margin-top:clamp(32px,4vw,56px);display:flex;justify-content:center}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 14px;
  border-radius:100px;background:var(--white);box-shadow:var(--sh-1);font-size:.9rem;color:var(--ink2);
  transition:box-shadow .4s var(--e),color .3s}
.pagination .page-numbers:hover{box-shadow:var(--sh-2);color:var(--ink)}
.pagination .page-numbers.current{background:var(--ink);color:var(--paper)}

/* --- COMMENTS ------------------------------------------------------------- */
.comment-list{display:grid;gap:12px;margin-top:1.6rem}
.comment-list li{list-style:none}
.comment-body{background:var(--white);border-radius:var(--rm);padding:20px 24px;box-shadow:var(--sh-1)}
.comment-meta{font-size:.78rem;color:var(--ink3);margin-bottom:.6rem}
.comment-form{display:grid;gap:12px;margin-top:1.4rem}
.comment-form input:not([type=submit]),.comment-form textarea{width:100%;background:var(--white);
  border:0;border-radius:var(--rm);padding:15px 18px;box-shadow:var(--sh-1)}
.comment-form input:focus,.comment-form textarea:focus{outline:none;box-shadow:var(--sh-2)}
.comment-form .submit{justify-self:start;background:var(--ink);color:var(--paper);border:0;
  border-radius:100px;padding:.95em 1.6em;font-size:.83rem;cursor:pointer}

/* --- OVERFLOW SAFETY ------------------------------------------------------ */
/* One guard at the root. `clip` stops sideways scrolling without creating a
   scroll container, which `hidden` would (and which breaks position:sticky).
   Never clip the hero or page head themselves: their bronze glow is meant to
   bleed past the block, and clipping it draws a hard rectangular edge. */
html{overflow-x:clip}

/* --- WIDGET WRAPPERS ------------------------------------------------------ */
/* The widget wrapper IS the container, exactly like .wrap in the static build.
   Owning the gutter here means the layout is identical whatever Elementor's
   container settings are, and whatever section a client drags a widget into. */
.mkc-w{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad)}
.mkc-w > .wrap{padding-inline:0;max-width:none}
.elementor-widget-container > .mkc-w > section{padding-block:0}

/* Edge-to-edge widgets: the wrapper steps aside and the block keeps its own
   gutter, which is how .band / .feature / .cta already behave in the design system. */
.mkc-w.mkc-flush{max-width:none;padding-inline:0}
.mkc-w.mkc-flush > .band,
.mkc-w.mkc-flush > .feature,
.mkc-w.mkc-flush > .cta{padding-inline:var(--pad)}

.mkc-w .hero{padding-top:0;padding-bottom:0}
.mkc-w .phead{padding-top:0;padding-bottom:0}

/* Elementor puts no space between stacked widgets, so a heading would butt
   straight up against the block under it. This is the design's block rhythm. */
.elementor-widget + .elementor-widget > .elementor-widget-container > .mkc-w{
  margin-top:clamp(20px,2.4vw,40px)}
/* The quick bar is meant to overlap the media band above it. */
.elementor-widget + .elementor-widget-mkc-quickbar > .elementor-widget-container > .mkc-w,
.elementor-widget + .elementor-widget-mkc-marquee > .elementor-widget-container > .mkc-w{
  margin-top:0}

/* Sections the importer marks as boxed keep the design's max width, so split
   layouts line up with full-width ones on very large screens. */
.elementor-section.mkc-boxed > .elementor-container{max-width:var(--maxw);margin-inline:auto}

/* A band / feature / CTA that is NOT flush sits inside the wrapper's gutter
   already, so it must not add its own on top. */
.mkc-w:not(.mkc-flush) > .band,
.mkc-w:not(.mkc-flush) > .feature,
.mkc-w:not(.mkc-flush) > .cta{padding-inline:0}
.elementor-widget-mkc-band .elementor-widget-container,
.elementor-widget-mkc-feature .elementor-widget-container,
.elementor-widget-mkc-cta .elementor-widget-container{overflow:visible}

/* Legacy alias: older content may still carry this class. */
.mkc-bleed{width:auto;left:auto;right:auto;margin-inline:0}

/* the estimate form's error state on the message panel */
.form-msg.bad{background:#F3DDD5;color:#7C3A26}

/* --- ELEMENTOR EDITOR ----------------------------------------------------- */
.elementor-editor-active .mkc-w [data-lines]{opacity:1}
.elementor-editor-active .mkc-w .r{opacity:1;transform:none}
.elementor-editor-active .mkc-w [data-reveal]{clip-path:none!important}
.mkc-empty{background:var(--paper2);border-radius:var(--rm);padding:26px;color:var(--ink3);
  font-size:.9rem;text-align:center}

/* Reset only a heading that is the widget's own top-level element. Scoping this
   with > matters: a blanket reset also strips the margins our components set,
   which knocked service-card titles out of line with their body text. */
.elementor-widget-container > h1,.elementor-widget-container > h2,
.elementor-widget-container > h3,.elementor-widget-container > h4{margin:0}
.elementor-section.mkc-tone{background:linear-gradient(180deg,var(--paper),var(--paper2) 30%,var(--paper2) 70%,var(--paper))}

/* --- ADMIN BAR ------------------------------------------------------------ */
.admin-bar .nav{top:calc(12px + 32px)}
@media (max-width:782px){.admin-bar .nav{top:calc(12px + 46px)}}
.admin-bar .drawer{top:calc(8px + 32px)}
@media (max-width:782px){.admin-bar .drawer{top:calc(8px + 46px)}}